fix: issue when used js dynamic import with magic comments, #88

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Change log
 
+## 3.9.1 (2024-04-10)
+
+- fix: issue when used js dynamic import with magic comments /* webpackPrefetch: true */ and css.inline=true, #88
+- fix: ansi colors for verbose output in some terminals
+
 ## 3.9.0 (2024-04-07)
 
 - feat: add support for dynamic import of styles

package.json

@@ -1,6 +1,6 @@
 {
   "name": "html-bundler-webpack-plugin",
-  "version": "3.9.0",
+  "version": "3.9.1",
   "description": "HTML bundler plugin for webpack handles a template as an entry point, extracts CSS and JS from their sources referenced in HTML, supports template engines like Eta, EJS, Handlebars, Nunjucks.",
   "keywords": [
     "html",

src/Plugin/AssetCompiler.js

@@ -955,6 +955,11 @@ class AssetCompiler {
       return assetModule;
     }
 
+    // fix #88: when used js dynamic import with magic comments /* webpackPrefetch: true */ and css.inline=true
+    if (!this.currentEntryPoint && entry.isTemplate) {
+      this.currentEntryPoint = entry;
+    }
+
     // extract CSS
     const cssOptions = Option.getStyleOptions(sourceFile);
     if (cssOptions == null) return;

src/Plugin/Messages/Info.js

@@ -1,17 +1,5 @@
 const path = require('path');
-const {
-  red,
-  green,
-  cyan,
-  cyanBright,
-  magenta,
-  black,
-  ansi256,
-  bgAnsi256,
-  yellowBright,
-  bgAnsi,
-  yellow,
-} = require('ansis');
+const { red, green, cyan, cyanBright, magenta, black, yellow, yellowBright, fg, bg } = require('ansis');
 const Collection = require('../Collection');
 const { outToConsole, isFunction } = require('../../Common/Helpers');
 const { relativePathForView } = require('../../Common/FileUtils');
@@ -22,7 +10,7 @@ const PluginService = require('../PluginService');
 
 const { pluginLabel } = Config.get();
 
-const gray = ansi256(244);
+const gray = fg(244);
 const padLevel1 = 16;
 const padLevel2 = padLevel1 + 10;
 const padLevel3 = padLevel2 + 8;
@@ -37,13 +25,11 @@ const padChunks = padLevel1 + 4;
  * @return {string}
  */
 const compilationName = (error) =>
-  error
-    ? bgAnsi(196).whiteBright` ${pluginLabel} ` + red` ▶▶▶`
-    : bgAnsi(118).black` ${pluginLabel} ` + green` ▶▶▶`;
+  error ? bg(196).whiteBright` ${pluginLabel} ` + red` ▶▶▶` : bg(118).black` ${pluginLabel} ` + green` ▶▶▶`;
 
 const colorType = (item, pad) => {
   let { type, inline } = item;
-  const color = inline ? yellowBright : ansi256(112);
+  const color = inline ? yellowBright : fg(112);
 
   if (type === Collection.type.style && item.imported) {
     type = inline ? `inline styles` : `import styles`;
@@ -82,7 +68,7 @@ const renderAssets = (item, pad = padLevel2) => {
       padLen = padLevel1;
     } else {
       padLen = padChunks;
-      str += `${'->'.padStart(padLevel1)} ${ansi256(120)`chunks:`}` + '\n';
+      str += `${'->'.padStart(padLevel1)} ${fg(120)`chunks:`}` + '\n';
     }
 
     for (let { inline, chunkFile, assetFile } of item.chunks) {
@@ -102,21 +88,21 @@ const renderAssets = (item, pad = padLevel2) => {
  * Display all processed assets in entry points.
  */
 const verbose = () => {
-  let str = '\n' + black.bgGreen` ${pluginLabel} ` + bgAnsi256(193).black` Entry processing ` + '\n';
+  let str = '\n' + black.bgGreen` ${pluginLabel} ` + bg(193).black` Entry processing ` + '\n';
 
   // display loader watch dependencies
   if (PluginService.isWatchMode()) {
     const watchFiles = Dependency.files;
 
     if (watchFiles && watchFiles.size > 0) {
       str += '\n';
-      str += ansi256(134)`watch files:` + `\n`;
+      str += fg(134)`watch files:` + `\n`;
 
       // TODO: correct sort paths
       const files = Array.from(watchFiles).sort();
       for (let file of files) {
         file = relativePathForView(file);
-        str += `${'-'.padStart(3)} ${ansi256(147)(file)}` + '\n';
+        str += `${'-'.padStart(3)} ${fg(147)(file)}` + '\n';
       }
     }
   }
@@ -127,16 +113,16 @@ const verbose = () => {
     const outputPath = relativePathForView(entry.outputPath);
 
     str += '\n';
-    str += bgAnsi256(27).whiteBright` ENTRY ` + ansi256(195).inverse` ${entryAsset} ` + '\n';
+    str += bg(27).whiteBright` ENTRY ` + bg(195).black` ${entryAsset} ` + '\n';
     // str += `${magenta`output:`} ${cyanBright(entry.outputPath)}\n`; // for debugging only
     str += `${magenta`source:`} ${cyanBright(entrySource)}\n`;
     str += `${magenta`output:`} ${cyanBright(outputPath)}\n`;
 
     // preload
     if (preloads?.length > 0) {
-      str += ansi256(202)(`preloads:`) + `\n`;
+      str += fg(202)(`preloads:`) + `\n`;
       for (const item of preloads) {
-        str += ansi256(209)(`${item.type}:`.padStart(padLevel1)) + ` ${yellowBright(item.tag)}\n`;
+        str += fg(209)(`${item.type}:`.padStart(padLevel1)) + ` ${yellowBright(item.tag)}\n`;
       }
     }
 
@@ -164,11 +150,11 @@ const verbose = () => {
 
       // styles imported in JS
       if (item.imported) {
-        str += `${''.padStart(padLevel1)} ${ansi256(214)`imports:`}\n`;
+        str += `${''.padStart(padLevel1)} ${fg(214)`imports:`}\n`;
         // note: if a style is imported, then resource is an array
         for (let importItem of item.imports) {
           sourceFile = relativePathForView(importItem.resource);
-          str += `${''.padStart(padChunks)} ${ansi256(143)(sourceFile)}\n`;
+          str += `${''.padStart(padChunks)} ${fg(143)(sourceFile)}\n`;
           str += renderAssets(importItem, padLevel3);
         }
       } else {

test/cases/js-dynamic-import-js/expected/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Test</title>
+    <style>h1 {
+  color: indianred;
+}
+</style>
+    <script src="main.js"></script>
+  </head>
+  <body>
+    <h1>Hello World!</h1>
+  </body>
+</html>

test/cases/js-dynamic-import-js/src/deferred.js

@@ -0,0 +1,5 @@
+import log from './log';
+
+export default function () {
+  log('Executed: Deferred module!');
+}

test/cases/js-dynamic-import-js/src/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Test</title>
+    <link href="./style.css" rel="stylesheet" />
+    <script src="./main.js"></script>
+  </head>
+  <body>
+    <h1>Hello World!</h1>
+  </body>
+</html>

test/cases/js-dynamic-import-js/src/log.js

@@ -0,0 +1,3 @@
+export default function (msg = 'Script executed.') {
+  console.log(msg);
+}

test/cases/js-dynamic-import-js/src/main.js

@@ -0,0 +1,19 @@
+import log from './log';
+import(/* webpackChunkName: "deferred" */ './deferred').then((module) => module.default());
+
+// OK
+//import(/* webpackChunkName: "prefetched" */ './prefetched').then((module) => module.default());
+
+// test bugfix: if css.inline=true then occurs the error
+import(/* webpackChunkName: "prefetched", webpackPrefetch: true */ './prefetched').then((module) => module.default());
+
+// OK
+import(/* webpackChunkName: "prefetched-delayed", webpackPrefetch: true */ './prefetched-delayed').then(
+  ({ default: run }) => {
+    setTimeout(() => {
+      run();
+    }, 2000);
+  }
+);
+
+log('>> main');

test/cases/js-dynamic-import-js/src/prefetched-delayed.js

@@ -0,0 +1,5 @@
+import log from './log';
+
+export default function () {
+  log('Executed: Prefetched delayed module!');
+}

test/cases/js-dynamic-import-js/src/prefetched.js

@@ -0,0 +1,5 @@
+import log from './log';
+
+export default function () {
+  log('Executed: Prefetched module!');
+}

test/cases/js-dynamic-import-js/src/style.css

@@ -0,0 +1,3 @@
+h1 {
+  color: indianred;
+}

test/cases/js-dynamic-import-js/webpack.config.js

@@ -0,0 +1,36 @@
+const path = require('path');
+const HtmlBundlerPlugin = require('@test/html-bundler-webpack-plugin');
+
+module.exports = {
+  mode: 'production',
+
+  output: {
+    path: path.join(__dirname, 'dist/'),
+  },
+
+  entry: {
+    index: './src/index.html',
+  },
+
+  plugins: [
+    new HtmlBundlerPlugin({
+      js: {
+        chunkFilename: '[name].[chunkhash:4].js',
+        //inline: true,
+      },
+      css: {
+        // test: css.inline=true with magic comments in js /* webpackChunkName: "prefetched", webpackPrefetch: true */
+        inline: true,
+      },
+    }),
+  ],
+
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: ['css-loader'],
+      },
+    ],
+  },
+};

test/integration.test.js

@@ -425,6 +425,8 @@ describe('special cases', () => {
   test('resolve img in attr json', () => compareFiles('resolve-attr-json-require'));
   test('multiple chunks with the same filename', () => compareFiles('entry-multiple-chunks-same-filename'));
 
+  test('dynamic import in js', () => compareFiles('js-dynamic-import-js'));
+
   // for debugging
   // test('resolve hmr file', () => watchCompareFiles('resolve-hmr-file'));
 });