html-bundle 6.0.6 → 6.0.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -5
- package/dist/bundle.mjs +9 -4
- package/dist/utils.mjs +3 -2
- package/package.json +12 -12
- package/src/bundle.mts +15 -6
- package/src/utils.mts +5 -3
package/README.md
CHANGED
|
@@ -104,7 +104,7 @@ Set `"jsxFactory": "h"` in `tsconfig.json` for JSX.
|
|
|
104
104
|
</html>
|
|
105
105
|
```
|
|
106
106
|
|
|
107
|
-
## Example Vue.js
|
|
107
|
+
## Example Vue.js
|
|
108
108
|
|
|
109
109
|
Set `"jsxFactory": "h"` in `tsconfig.json`.
|
|
110
110
|
|
|
@@ -140,7 +140,7 @@ Set `"jsxFactory": "h"` in `tsconfig.json`.
|
|
|
140
140
|
|
|
141
141
|
## Example React
|
|
142
142
|
|
|
143
|
-
Set `"jsxFactory": "
|
|
143
|
+
Set `"jsxFactory": "React.createElement"` in `tsconfig.json`.
|
|
144
144
|
|
|
145
145
|
```html
|
|
146
146
|
<!DOCTYPE html>
|
|
@@ -152,8 +152,7 @@ Set `"jsxFactory": "h"` in `tsconfig.json`.
|
|
|
152
152
|
</head>
|
|
153
153
|
<script type="module">
|
|
154
154
|
import React, { useState } from "react";
|
|
155
|
-
import {
|
|
156
|
-
const h = React.createElement;
|
|
155
|
+
import { createRoot } from "react-dom/client";
|
|
157
156
|
|
|
158
157
|
function Example() {
|
|
159
158
|
const [count, setCount] = useState(0);
|
|
@@ -166,7 +165,7 @@ Set `"jsxFactory": "h"` in `tsconfig.json`.
|
|
|
166
165
|
);
|
|
167
166
|
}
|
|
168
167
|
|
|
169
|
-
|
|
168
|
+
createRoot(document.getElementById("app")).render(<Example />);
|
|
170
169
|
</script>
|
|
171
170
|
<body>
|
|
172
171
|
<div id="app"></div>
|
package/dist/bundle.mjs
CHANGED
|
@@ -151,10 +151,15 @@ async function build(err, files, firstRun = true) {
|
|
|
151
151
|
inlineFiles.add(file);
|
|
152
152
|
await minifyCode();
|
|
153
153
|
}
|
|
154
|
-
else {
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
154
|
+
else if (!file.endsWith(".css")) {
|
|
155
|
+
if (handlerFile) {
|
|
156
|
+
const { stdout } = await execFilePromise("node", [handlerFile, file]);
|
|
157
|
+
if (String(stdout))
|
|
158
|
+
console.log("📋 Logging Handler: ", String(stdout));
|
|
159
|
+
}
|
|
160
|
+
else {
|
|
161
|
+
await fileCopy(file);
|
|
162
|
+
}
|
|
158
163
|
}
|
|
159
164
|
serverSentEvents?.({ file, html });
|
|
160
165
|
}
|
package/dist/utils.mjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { copyFile, mkdir, readFile } from "fs/promises";
|
|
2
2
|
import path from "path";
|
|
3
3
|
import Fastify from "fastify";
|
|
4
|
-
import fastifyStatic from "fastify
|
|
4
|
+
import fastifyStatic from "@fastify/static";
|
|
5
5
|
import postcssrc from "postcss-load-config";
|
|
6
6
|
import cssnano from "cssnano";
|
|
7
7
|
import { parse, parseFragment, serialize } from "parse5";
|
|
@@ -207,7 +207,8 @@ function getHMRCode(file, id, src) {
|
|
|
207
207
|
for (const key of elem.getAttributeNames()) {
|
|
208
208
|
clone.setAttribute(key, elem.getAttribute(key));
|
|
209
209
|
}
|
|
210
|
-
|
|
210
|
+
const attrVal = elem.getAttribute(attr);
|
|
211
|
+
if (attrVal) clone.setAttribute(attr, attrVal + "?v=" + String(Math.random().toFixed(4)).slice(2));
|
|
211
212
|
render(clone, elem, false);
|
|
212
213
|
}
|
|
213
214
|
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "html-bundle",
|
|
3
|
-
"version": "6.0.
|
|
3
|
+
"version": "6.0.9",
|
|
4
4
|
"description": "A very simple bundler for HTML SFC",
|
|
5
5
|
"bin": "./dist/bundle.mjs",
|
|
6
6
|
"scripts": {
|
|
@@ -18,12 +18,13 @@
|
|
|
18
18
|
"author": "Fabian Krutsch <f.krutsch@gmx.de> (https://krutsch.netlify.app/)",
|
|
19
19
|
"license": "MIT",
|
|
20
20
|
"devDependencies": {
|
|
21
|
+
"@fastify/static": "^5.0.2",
|
|
21
22
|
"@types/cssnano": "^5.0.0",
|
|
22
23
|
"@types/glob": "^7.2.0",
|
|
23
24
|
"@types/html-minifier-terser": "^6.1.0",
|
|
24
25
|
"@types/parse5": "^6.0.3",
|
|
25
26
|
"@types/postcss-load-config": "^3.0.1",
|
|
26
|
-
"typescript": "^4.
|
|
27
|
+
"typescript": "^4.7.2"
|
|
27
28
|
},
|
|
28
29
|
"repository": {
|
|
29
30
|
"type": "git",
|
|
@@ -33,17 +34,16 @@
|
|
|
33
34
|
"dependencies": {
|
|
34
35
|
"@web/parse5-utils": "^1.3.0",
|
|
35
36
|
"await-spawn": "^4.0.2",
|
|
36
|
-
"chokidar": "^3.5.
|
|
37
|
+
"chokidar": "^3.5.3",
|
|
37
38
|
"critical": "^4.0.1",
|
|
38
|
-
"cssnano": "^5.
|
|
39
|
-
"esbuild": "^0.14.
|
|
40
|
-
"fastify": "^3.
|
|
41
|
-
"
|
|
42
|
-
"glob": "^7.2.0",
|
|
39
|
+
"cssnano": "^5.1.9",
|
|
40
|
+
"esbuild": "^0.14.42",
|
|
41
|
+
"fastify": "^3.29.0",
|
|
42
|
+
"glob": "^8.0.3",
|
|
43
43
|
"html-minifier-terser": "^6.1.0",
|
|
44
|
-
"hydro-js": "^1.5.
|
|
45
|
-
"parse5": "^
|
|
46
|
-
"postcss": "^8.4.
|
|
47
|
-
"postcss-load-config": "^
|
|
44
|
+
"hydro-js": "^1.5.13",
|
|
45
|
+
"parse5": "^7.0.0",
|
|
46
|
+
"postcss": "^8.4.14",
|
|
47
|
+
"postcss-load-config": "^4.0.0"
|
|
48
48
|
}
|
|
49
49
|
}
|
package/src/bundle.mts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
#!/usr/bin/env node
|
|
2
2
|
|
|
3
|
-
import type { TextNode } from "parse5";
|
|
3
|
+
import type { TextNode } from "@web/parse5-utils";
|
|
4
4
|
import type { AcceptedPlugin } from "postcss";
|
|
5
5
|
import { performance } from "perf_hooks";
|
|
6
6
|
import { readFile, rm, writeFile, readdir, lstat } from "fs/promises";
|
|
@@ -189,9 +189,14 @@ async function build(err: any, files: string[], firstRun = true) {
|
|
|
189
189
|
} else if (/\.(jsx?|tsx?)$/.test(file)) {
|
|
190
190
|
inlineFiles.add(file);
|
|
191
191
|
await minifyCode();
|
|
192
|
-
} else {
|
|
193
|
-
|
|
194
|
-
|
|
192
|
+
} else if (!file.endsWith(".css")) {
|
|
193
|
+
if (handlerFile) {
|
|
194
|
+
const { stdout } = await execFilePromise("node", [handlerFile, file]);
|
|
195
|
+
if (String(stdout))
|
|
196
|
+
console.log("📋 Logging Handler: ", String(stdout));
|
|
197
|
+
} else {
|
|
198
|
+
await fileCopy(file);
|
|
199
|
+
}
|
|
195
200
|
}
|
|
196
201
|
|
|
197
202
|
serverSentEvents?.({ file, html });
|
|
@@ -283,7 +288,9 @@ async function writeInlineScripts(file: string) {
|
|
|
283
288
|
for (let index = 0; index < scripts.length; index++) {
|
|
284
289
|
const script = scripts[index];
|
|
285
290
|
const scriptTextNode = script.childNodes[0] as TextNode;
|
|
286
|
-
const isReferencedScript = script.attrs.find(
|
|
291
|
+
const isReferencedScript = script.attrs.find(
|
|
292
|
+
(a: { name: string }) => a.name === "src"
|
|
293
|
+
);
|
|
287
294
|
const scriptContent = scriptTextNode?.value;
|
|
288
295
|
if (!scriptContent || isReferencedScript) continue;
|
|
289
296
|
|
|
@@ -315,7 +322,9 @@ async function minifyHTML(file: string, buildFile: string) {
|
|
|
315
322
|
for (let index = 0; index < scripts.length; index++) {
|
|
316
323
|
const script = scripts[index];
|
|
317
324
|
const scriptTextNode = script.childNodes[0] as TextNode;
|
|
318
|
-
const isReferencedScript = script.attrs.find(
|
|
325
|
+
const isReferencedScript = script.attrs.find(
|
|
326
|
+
(a: { name: string }) => a.name === "src"
|
|
327
|
+
);
|
|
319
328
|
if (!scriptTextNode?.value || isReferencedScript) continue;
|
|
320
329
|
|
|
321
330
|
// Use bundled file
|
package/src/utils.mts
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
|
+
import type { ParentNode } from "@web/parse5-utils";
|
|
1
2
|
import type { FastifyServerOptions } from "fastify";
|
|
2
3
|
import { copyFile, mkdir, readFile } from "fs/promises";
|
|
3
4
|
import path from "path";
|
|
4
5
|
import Fastify from "fastify";
|
|
5
|
-
import fastifyStatic from "fastify
|
|
6
|
+
import fastifyStatic from "@fastify/static";
|
|
6
7
|
import postcssrc from "postcss-load-config";
|
|
7
8
|
import cssnano from "cssnano";
|
|
8
9
|
import { parse, parseFragment, serialize } from "parse5";
|
|
@@ -135,7 +136,7 @@ export function addHMRCode(
|
|
|
135
136
|
node.attrs?.push({ name: "data-hmr", value: htmlIdMap.get(file) })
|
|
136
137
|
);
|
|
137
138
|
|
|
138
|
-
return serialize(DOM);
|
|
139
|
+
return serialize(DOM as ParentNode);
|
|
139
140
|
}
|
|
140
141
|
|
|
141
142
|
function randomText() {
|
|
@@ -243,7 +244,8 @@ function getHMRCode(file: string, id: string, src: string) {
|
|
|
243
244
|
for (const key of elem.getAttributeNames()) {
|
|
244
245
|
clone.setAttribute(key, elem.getAttribute(key));
|
|
245
246
|
}
|
|
246
|
-
|
|
247
|
+
const attrVal = elem.getAttribute(attr);
|
|
248
|
+
if (attrVal) clone.setAttribute(attr, attrVal + "?v=" + String(Math.random().toFixed(4)).slice(2));
|
|
247
249
|
render(clone, elem, false);
|
|
248
250
|
}
|
|
249
251
|
});
|