html-bundle 6.0.10 → 6.0.13

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.
Files changed (4) hide show
  1. package/README.md +1 -1
  2. package/dist/bundle.mjs +14 -20
  3. package/package.json +49 -49
  4. package/src/bundle.mts +15 -20
package/README.md CHANGED
@@ -12,7 +12,7 @@ A (primarily) zero-config bundler for HTML files. The idea is to use HTML as Sin
12
12
  - 📦 Automatic Package Installation
13
13
  - 💨 HMR and automatic reconnect
14
14
  - ⚡ [ESBuild](https://github.com/evanw/esbuild)
15
- - 🦔 [Critical CSS](https://github.com/evanw/esbuild)
15
+ - 🦔 [Critical CSS](https://www.npmjs.com/package/critters)
16
16
  - 🚋 Watcher on PostCSS and Tailwind CSS and TS Config
17
17
  - 🛡️ Almost no need to restart
18
18
 
package/dist/bundle.mjs CHANGED
@@ -6,7 +6,7 @@ import { promisify } from "util";
6
6
  import glob from "glob";
7
7
  import postcss from "postcss";
8
8
  import esbuild from "esbuild";
9
- import critical from "critical";
9
+ import Critters from "critters";
10
10
  import { minify } from "html-minifier-terser";
11
11
  import { watch } from "chokidar";
12
12
  import { serialize, parse, parseFragment } from "parse5";
@@ -15,6 +15,10 @@ import awaitSpawn from "await-spawn";
15
15
  import { fileCopy, createDefaultServer, getPostCSSConfig, getBuildPath, createDir, bundleConfig, serverSentEvents, addHMRCode, } from "./utils.mjs";
16
16
  const isHMR = process.argv.includes("--hmr") || bundleConfig.hmr;
17
17
  const isCritical = process.argv.includes("--isCritical") || bundleConfig.isCritical;
18
+ const critters = new Critters({
19
+ path: bundleConfig.build,
20
+ logLevel: "silent",
21
+ });
18
22
  const isSecure = process.argv.includes("--secure") || bundleConfig.secure; // uses CSP for critical too
19
23
  const handlerFile = process.argv.includes("--handler")
20
24
  ? process.argv[process.argv.indexOf("--handler") + 1]
@@ -309,31 +313,21 @@ async function minifyHTML(file, buildFile) {
309
313
  catch (e) {
310
314
  console.error(e);
311
315
  }
312
- if (!isCritical) {
313
- await writeFile(buildFile, fileText);
314
- return fileText;
315
- }
316
- else {
317
- const buildFileArr = buildFile.split("/");
318
- const fileWithBase = buildFileArr.pop();
319
- const buildDir = buildFileArr.join("/");
320
- // critical is generating the files on the fs
316
+ if (isCritical) {
321
317
  try {
322
- const { html } = await critical.generate({
323
- base: buildDir,
324
- html: fileText,
325
- target: fileWithBase,
326
- inline: !isSecure,
327
- extract: true,
328
- rebase: () => { },
329
- ...bundleConfig.critical,
330
- });
331
- return html;
318
+ const isPartical = !fileText.startsWith("<!DOCTYPE html>");
319
+ fileText = await critters.process(fileText);
320
+ // fix critters jsdom
321
+ if (isPartical) {
322
+ fileText = fileText.replace(/<\/?(html|head|body)>/g, "");
323
+ }
332
324
  }
333
325
  catch (err) {
334
326
  console.error(err);
335
327
  }
336
328
  }
329
+ await writeFile(buildFile, fileText);
330
+ return fileText;
337
331
  }
338
332
  async function rebuildCSS(files, config) {
339
333
  const newConfig = await getPostCSSConfig();
package/package.json CHANGED
@@ -1,49 +1,49 @@
1
- {
2
- "name": "html-bundle",
3
- "version": "6.0.10",
4
- "description": "A very simple bundler for HTML SFC",
5
- "bin": "./dist/bundle.mjs",
6
- "scripts": {
7
- "start": "tsc",
8
- "update": "npx npm-check-updates -u && npx typesync && npm i && npm outdated"
9
- },
10
- "keywords": [
11
- "bundler",
12
- "SFC",
13
- "HTML",
14
- "TypeScript",
15
- "esbuild",
16
- "hydro-js"
17
- ],
18
- "author": "Fabian Krutsch <f.krutsch@gmx.de> (https://krutsch.netlify.app/)",
19
- "license": "MIT",
20
- "devDependencies": {
21
- "@types/cssnano": "^5.0.0",
22
- "@types/glob": "^7.2.0",
23
- "@types/html-minifier-terser": "^6.1.0",
24
- "@types/parse5": "^6.0.3",
25
- "@types/postcss-load-config": "^3.0.1",
26
- "typescript": "^4.7.2"
27
- },
28
- "repository": {
29
- "type": "git",
30
- "url": "git+https://github.com/Krutsch/html-bundle.git"
31
- },
32
- "bugs": "https://github.com/Krutsch/html-bundle/issues",
33
- "dependencies": {
34
- "@fastify/static": "^5.0.2",
35
- "@web/parse5-utils": "^1.3.0",
36
- "await-spawn": "^4.0.2",
37
- "chokidar": "^3.5.3",
38
- "critical": "^4.0.1",
39
- "cssnano": "^5.1.9",
40
- "esbuild": "^0.14.42",
41
- "fastify": "^3.29.0",
42
- "glob": "^8.0.3",
43
- "html-minifier-terser": "^6.1.0",
44
- "hydro-js": "^1.5.13",
45
- "parse5": "^7.0.0",
46
- "postcss": "^8.4.14",
47
- "postcss-load-config": "^4.0.0"
48
- }
49
- }
1
+ {
2
+ "name": "html-bundle",
3
+ "version": "6.0.13",
4
+ "description": "A very simple bundler for HTML SFC",
5
+ "bin": "./dist/bundle.mjs",
6
+ "scripts": {
7
+ "start": "tsc",
8
+ "update": "npx npm-check-updates -u && npx typesync && npm i && npm outdated"
9
+ },
10
+ "keywords": [
11
+ "bundler",
12
+ "SFC",
13
+ "HTML",
14
+ "TypeScript",
15
+ "esbuild",
16
+ "hydro-js"
17
+ ],
18
+ "author": "Fabian Krutsch <f.krutsch@gmx.de> (https://krutsch.netlify.app/)",
19
+ "license": "MIT",
20
+ "devDependencies": {
21
+ "@types/cssnano": "^5.0.0",
22
+ "@types/glob": "^7.2.0",
23
+ "@types/html-minifier-terser": "^6.1.0",
24
+ "@types/parse5": "^6.0.3",
25
+ "@types/postcss-load-config": "^3.0.1",
26
+ "typescript": "^4.7.2"
27
+ },
28
+ "repository": {
29
+ "type": "git",
30
+ "url": "git+https://github.com/Krutsch/html-bundle.git"
31
+ },
32
+ "bugs": "https://github.com/Krutsch/html-bundle/issues",
33
+ "dependencies": {
34
+ "@fastify/static": "^5.0.2",
35
+ "@web/parse5-utils": "^1.3.0",
36
+ "await-spawn": "^4.0.2",
37
+ "chokidar": "^3.5.3",
38
+ "critters": "^0.0.16",
39
+ "cssnano": "^5.1.9",
40
+ "esbuild": "^0.14.42",
41
+ "fastify": "^3.29.0",
42
+ "glob": "^8.0.3",
43
+ "html-minifier-terser": "^6.1.0",
44
+ "hydro-js": "^1.5.13",
45
+ "parse5": "^7.0.0",
46
+ "postcss": "^8.4.14",
47
+ "postcss-load-config": "^3.1.4"
48
+ }
49
+ }
package/src/bundle.mts CHANGED
@@ -9,7 +9,7 @@ import { promisify } from "util";
9
9
  import glob from "glob";
10
10
  import postcss from "postcss";
11
11
  import esbuild from "esbuild";
12
- import critical from "critical";
12
+ import Critters from "critters";
13
13
  import { minify } from "html-minifier-terser";
14
14
  import { watch } from "chokidar";
15
15
  import { serialize, parse, parseFragment } from "parse5";
@@ -29,6 +29,10 @@ import {
29
29
  const isHMR = process.argv.includes("--hmr") || bundleConfig.hmr;
30
30
  const isCritical =
31
31
  process.argv.includes("--isCritical") || bundleConfig.isCritical;
32
+ const critters = new Critters({
33
+ path: bundleConfig.build,
34
+ logLevel: "silent",
35
+ });
32
36
  const isSecure = process.argv.includes("--secure") || bundleConfig.secure; // uses CSP for critical too
33
37
  const handlerFile = process.argv.includes("--handler")
34
38
  ? process.argv[process.argv.indexOf("--handler") + 1]
@@ -367,30 +371,21 @@ async function minifyHTML(file: string, buildFile: string) {
367
371
  console.error(e);
368
372
  }
369
373
 
370
- if (!isCritical) {
371
- await writeFile(buildFile, fileText);
372
- return fileText;
373
- } else {
374
- const buildFileArr = buildFile.split("/");
375
- const fileWithBase = buildFileArr.pop();
376
- const buildDir = buildFileArr.join("/");
377
-
378
- // critical is generating the files on the fs
374
+ if (isCritical) {
379
375
  try {
380
- const { html } = await critical.generate({
381
- base: buildDir,
382
- html: fileText,
383
- target: fileWithBase,
384
- inline: !isSecure,
385
- extract: true,
386
- rebase: () => {},
387
- ...bundleConfig.critical,
388
- });
389
- return html;
376
+ const isPartical = !fileText.startsWith("<!DOCTYPE html>");
377
+ fileText = await critters.process(fileText);
378
+ // fix critters jsdom
379
+ if (isPartical) {
380
+ fileText = fileText.replace(/<\/?(html|head|body)>/g, "");
381
+ }
390
382
  } catch (err) {
391
383
  console.error(err);
392
384
  }
393
385
  }
386
+
387
+ await writeFile(buildFile, fileText);
388
+ return fileText;
394
389
  }
395
390
 
396
391
  async function rebuildCSS(files: string[], config?: string) {