Skip to content

Commit 60ce17c

Browse files
NellowTCSNellowTCS
committed
Buildscripts and Inline Formatting Fix
1 parent bebccae commit 60ce17c

File tree

8 files changed

+308
-78
lines changed

8 files changed

+308
-78
lines changed

‎Build/Buildscripts/build-all.sh‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
#!/bin/bash
2+
echo "Starting full build..."
3+
echo ""
4+
./build.sh
5+
echo ""
6+
./build-inline.sh
7+
echo ""
8+
echo "Full build completed."

‎Build/Buildscripts/build-inline.sh‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
#!/bin/bash
2+
echo "Starting inlining process..."
3+
DIST_DIR="../dist"
4+
HTML_FILE="$DIST_DIR/index.html"
5+
CSS_FILE="$DIST_DIR/styles.css"
6+
JS_FILE="$DIST_DIR/main.js"
7+
OUTPUT_FILE="$DIST_DIR/index-inline.html"
8+
9+
# Check that required files exist
10+
if [[ ! -f "$HTML_FILE" || ! -f "$CSS_FILE" || ! -f "$JS_FILE" ]]; then
11+
echo "Missing one or more required files in $DIST_DIR."
12+
exit 1
13+
fi
14+
15+
# Step 1: Create a backup of the original HTML
16+
cp "$HTML_FILE" "$OUTPUT_FILE"
17+
18+
# Step 2: Read and indent CSS and JS
19+
INDENTED_CSS=$(sed 's/^/ /' "$CSS_FILE")
20+
INDENTED_JS=$(sed 's/^/ /' "$JS_FILE")
21+
22+
# Step 3: Replace <link> and <script> tags with placeholders (only those marked for inlining)
23+
sed -i.bak 's|<link[^>]*data-inline="true"[^>]*href="styles\.css"[^>]*>|@@INLINE_CSS@@|g' "$OUTPUT_FILE"
24+
sed -i.bak "s|<link[^>]*data-inline=\"true\"[^>]*href='styles\.css'[^>]*>|@@INLINE_CSS@@|g" "$OUTPUT_FILE"
25+
sed -i.bak 's|<script[^>]*data-inline="true"[^>]*src="main\.js"[^>]*></script>|@@INLINE_JS@@|g' "$OUTPUT_FILE"
26+
sed -i.bak "s|<script[^>]*data-inline=\"true\"[^>]*src='main\.js'[^>]*></script>|@@INLINE_JS@@|g" "$OUTPUT_FILE"
27+
28+
# Step 4: Write the indented CSS and JS to temporary files
29+
echo " <style>" > /tmp/inlined_css
30+
echo "$INDENTED_CSS" >> /tmp/inlined_css
31+
echo " </style>" >> /tmp/inlined_css
32+
33+
echo " <script>" > /tmp/inlined_js
34+
echo "$INDENTED_JS" >> /tmp/inlined_js
35+
echo " </script>" >> /tmp/inlined_js
36+
37+
# Step 5: Replace placeholders with actual content
38+
# Use a different approach for multiline replacement
39+
awk '
40+
/@@INLINE_CSS@@/ {
41+
while ((getline line < "/tmp/inlined_css") > 0) {
42+
print line
43+
}
44+
close("/tmp/inlined_css")
45+
next
46+
}
47+
/@@INLINE_JS@@/ {
48+
while ((getline line < "/tmp/inlined_js") > 0) {
49+
print line
50+
}
51+
close("/tmp/inlined_js")
52+
next
53+
}
54+
{ print }
55+
' "$OUTPUT_FILE" > "$OUTPUT_FILE.tmp" && mv "$OUTPUT_FILE.tmp" "$OUTPUT_FILE"
56+
57+
# Clean up temporary files and backup
58+
rm -f /tmp/inlined_css /tmp/inlined_js "$OUTPUT_FILE.bak"
59+
60+
echo "Inlined output written to $OUTPUT_FILE"

‎Build/Buildscripts/build.sh‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
#!/bin/bash
2+
3+
echo "Building HTMLRunner"
4+
cd /workspaces/HTMLRunner
5+
cd Build
6+
npm run build
7+
echo "Built HTMLRunner"

‎Build/src/index.html‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,9 @@
1717
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.7/addon/dialog/dialog.min.css">
1818
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.7/addon/search/matchesonscrollbar.min.css">
1919
<!-- Main Styles-->
20-
<link rel="stylesheet" href="styles.css">
20+
<!-- prettier-ignore-start -->
21+
<link rel="stylesheet" data-inline="true" href="styles.css">
22+
<!-- prettier-ignore-end -->
2123
</head>
2224
<body>
2325
<div class="loading" id="loading">
@@ -103,6 +105,8 @@
103105
});
104106
});
105107
</script>
106-
<script src="main.js"></script>
108+
<!-- prettier-ignore-start -->
109+
<script data-inline="true" src="main.js"></script>
110+
<!-- prettier-ignore-end -->
107111
</body>
108112
</html>

‎Build/src/runner.ts‎

Lines changed: 91 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { saveState } from "./state";
66
import * as prettier from "prettier/standalone";
77
import * as parserHtml from "prettier/plugins/html";
88
import * as parserCss from "prettier/plugins/postcss";
9-
import * as parserFlow from "prettier/plugins/flow";
9+
import * as parserBabel from "prettier/plugins/babel"; // Use Babel instead of Flow
1010
import * as prettierPluginEstree from "prettier/plugins/estree";
1111

1212
export function runCode(): void {
@@ -58,13 +58,13 @@ export function runCode(): void {
5858
"</style>",
5959
"<script>",
6060
consoleInterceptor,
61-
"</script>",
61+
"<\/script>",
6262
"</head><body>",
6363
html,
64-
"</body>",
64+
"<\/body>",
6565
"<script>",
6666
js,
67-
"</script></html>",
67+
"<\/script><\/html>",
6868
].join("");
6969
}
7070

@@ -87,42 +87,97 @@ export function runCode(): void {
8787

8888
export async function formatCode(): Promise<void> {
8989
try {
90-
const formattedHtml = await prettier.format(
91-
editors.html.view.state.doc.toString(),
92-
{
93-
parser: "html",
94-
plugins: [parserHtml],
95-
printWidth: 100,
96-
tabWidth: 2,
97-
htmlWhitespaceSensitivity: "css",
90+
// Format each editor separately with error handling
91+
let formattedHtml = editors.html.view.state.doc.toString();
92+
let formattedCss = editors.css.view.state.doc.toString();
93+
let formattedJs = editors.js.view.state.doc.toString();
94+
95+
// Format HTML
96+
try {
97+
if (formattedHtml.trim()) {
98+
// First normalize the HTML by removing extra whitespace
99+
const normalizedHtml = formattedHtml.trim().replace(/^\s+/gm, '');
100+
101+
formattedHtml = await prettier.format(normalizedHtml, {
102+
parser: "html",
103+
plugins: [parserHtml],
104+
printWidth: 120,
105+
tabWidth: 4,
106+
htmlWhitespaceSensitivity: "ignore",
107+
bracketSameLine: true,
108+
singleAttributePerLine: false,
109+
});
110+
111+
// Ensure the formatted HTML is well-formed
112+
formattedHtml = formattedHtml.replace(/>\n\s*\n/g, '>\n');
113+
114+
// Remove two spaces from the beginning of each line
115+
formattedHtml = formattedHtml.replace(/^ /gm, '');
116+
98117
}
99-
);
100-
const formattedCss = await prettier.format(
101-
editors.css.view.state.doc.toString(),
102-
{
103-
parser: "css",
104-
plugins: [parserCss],
105-
printWidth: 100,
106-
tabWidth: 2,
118+
} catch (error) {
119+
console.warn("HTML formatting skipped:", error);
120+
// Keep original HTML if formatting fails
121+
}
122+
123+
// Format CSS
124+
try {
125+
if (formattedCss.trim()) {
126+
formattedCss = await prettier.format(formattedCss, {
127+
parser: "css",
128+
plugins: [parserCss],
129+
printWidth: 100,
130+
tabWidth: 2,
131+
});
132+
// Remove two spaces from the beginning of each line
133+
formattedCss = formattedCss.replace(/^ /gm, '');
134+
}
135+
} catch (error) {
136+
console.warn("CSS formatting failed:", error);
137+
}
138+
139+
// Format JavaScript with better error handling
140+
try {
141+
if (formattedJs.trim()) {
142+
formattedJs = await prettier.format(formattedJs, {
143+
parser: "babel", // Use babel instead of flow
144+
plugins: [
145+
parserBabel,
146+
(prettierPluginEstree as any).default || prettierPluginEstree,
147+
],
148+
printWidth: 100,
149+
tabWidth: 2,
150+
semi: true,
151+
singleQuote: true,
152+
trailingComma: "es5",
153+
bracketSpacing: true,
154+
});
155+
// Remove two spaces from the beginning of each line
156+
formattedJs = formattedJs.replace(/^ /gm, '');
107157
}
108-
);
109-
const formattedJs = await prettier.format(
110-
editors.js.view.state.doc.toString(),
111-
{
112-
parser: "flow",
113-
plugins: [
114-
parserFlow,
115-
(prettierPluginEstree as any).default || prettierPluginEstree,
116-
],
117-
printWidth: 100,
118-
tabWidth: 2,
119-
semi: true,
120-
singleQuote: true,
121-
trailingComma: "es5",
122-
bracketSpacing: true,
158+
} catch (error) {
159+
console.warn("JavaScript formatting failed:", error);
160+
// Try with a simpler parser as fallback
161+
try {
162+
formattedJs = await prettier.format(formattedJs, {
163+
parser: "babel-ts", // Alternative parser
164+
plugins: [
165+
parserBabel,
166+
(prettierPluginEstree as any).default || prettierPluginEstree,
167+
],
168+
printWidth: 100,
169+
tabWidth: 2,
170+
semi: true,
171+
singleQuote: true,
172+
});
173+
// Remove two spaces from the beginning of each line
174+
formattedJs = formattedJs.replace(/^ /gm, '');
175+
} catch (fallbackError) {
176+
console.warn("Fallback JavaScript formatting also failed:", fallbackError);
123177
}
124-
);
178+
}
125179

180+
// Update editors
126181
editors.html.view.dispatch({
127182
changes: {
128183
from: 0,

‎Build/src/state.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -95,12 +95,12 @@ export function resetCode(skipConfirmation: boolean = false): void {
9595
<link rel="stylesheet" href="styles.css">
9696
</head>
9797
<body>
98-
<script src="main.js"></script>
98+
<script src="main.js"><\/script>
9999
<h1>Hello, HTMLRunner!</h1>
100100
<p>This is a demo page.</p>
101101
<button onclick="testFunction()">Click me!</button>
102-
</body>
103-
</html>`,
102+
<\/body>
103+
<\/html>`,
104104
},
105105
});
106106

‎index.html‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,9 @@
1717
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.7/addon/dialog/dialog.min.css">
1818
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.7/addon/search/matchesonscrollbar.min.css">
1919
<!-- Main Styles-->
20-
<link rel="stylesheet" href="styles.css">
20+
<!-- prettier-ignore-start -->
21+
<link rel="stylesheet" data-inline="true" href="styles.css">
22+
<!-- prettier-ignore-end -->
2123
</head>
2224
<body>
2325
<div class="loading" id="loading">
@@ -103,6 +105,8 @@
103105
});
104106
});
105107
</script>
106-
<script src="main.js"></script>
108+
<!-- prettier-ignore-start -->
109+
<script data-inline="true" src="main.js"></script>
110+
<!-- prettier-ignore-end -->
107111
</body>
108112
</html>

‎main.js‎

Lines changed: 127 additions & 35 deletions
Large diffs are not rendered by default.

0 commit comments

Comments
 (0)