html-bundle 6.0.11 → 6.0.12

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 +9 -20
  3. package/package.json +49 -49
  4. package/src/bundle.mts +10 -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,16 @@ 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
+ fileText = await critters.process(fileText);
332
319
  }
333
320
  catch (err) {
334
321
  console.error(err);
335
322
  }
336
323
  }
324
+ await writeFile(buildFile, fileText);
325
+ return fileText;
337
326
  }
338
327
  async function rebuildCSS(files, config) {
339
328
  const newConfig = await getPostCSSConfig();
package/package.json CHANGED
@@ -1,49 +1,49 @@
1
- {
2
- "name": "html-bundle",
3
- "version": "6.0.11",
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": "^3.1.4"
48
- }
49
- }
1
+ {
2
+ "name": "html-bundle",
3
+ "version": "6.0.12",
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,16 @@ 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
+ fileText = await critters.process(fileText);
390
377
  } catch (err) {
391
378
  console.error(err);
392
379
  }
393
380
  }
381
+
382
+ await writeFile(buildFile, fileText);
383
+ return fileText;
394
384
  }
395
385
 
396
386
  async function rebuildCSS(files: string[], config?: string) {