html-bundler-webpack-plugin - npm Package Compare versions

Comparing version 1.6.0 to 1.6.1

CHANGELOG.md

 # Change log
 
+## 1.6.1 (2023-03-07)
+- fix: correct inline JS when used split chunks
+- refactor: optimize code for windows, clean up from needless code
+- test: add test for inline JS with split chunks
+- test: refactor and clean up tests
+
 ## 1.6.0 (2023-03-06)
@@ -4,0 +10,0 @@ - feat: add `css.inline` option, replaces the functionality of `style-loader`.\

package.json

 {
   "name": "html-bundler-webpack-plugin",
-  "version": "1.6.0",
+  "version": "1.6.1",
   "description": "HTML bundler plugin for webpack handels HTML template as entry point, extracts CSS and JS from their sources specified in HTML.",
@@ -5,0 +5,0 @@ "keywords": [

src/Common/Helpers.js

@@ -92,2 +92,13 @@ const path = require('path');
 
+/**
+ * Parse resource path and raw query from request.
+ *
+ * @param {string} request
+ * @return {{resource: string, query: string|null}}
+ */
+const parseRequest = (request) => {
+  const [resource, query] = request.split('?');
+  return { resource, query };
+};
+
 module.exports = {
@@ -98,4 +109,5 @@ isWin,
   parseQuery,
+  parseRequest,
   outToConsole,
   pathRelativeByPwd,
 };

src/Loader/Dependency.js

@@ -5,3 +5,2 @@ const path = require('path');
 const Options = require('./Options');
-const { isWin } = require('./Utils');
 const { verboseWatchFiles } = require('./Messages/Info');
@@ -60,3 +59,2 @@
   static addFile(file) {
-    file = isWin ? path.normalize(file) : file;
     this.files.add(file);
@@ -63,0 +61,0 @@

src/Loader/Loader.js

@@ -6,3 +6,3 @@ const { merge } = require('webpack-merge');
 const Options = require('./Options');
-const { parseQuery } = require('./Utils');
+const { parseQuery } = require('../Common/Helpers');
 
@@ -9,0 +9,0 @@ class Loader {

src/Loader/Messages/Info.js

@@ -0,5 +1,4 @@
+const { black, ansi } = require('ansis/colors');
 const { pluginName } = require('../../config');
-const { pathRelativeByPwd } = require('../../Common/Helpers');
-const { outToConsole } = require('../Utils');
-const { black, ansi } = require('ansis/colors');
+const { pathRelativeByPwd, outToConsole } = require('../../Common/Helpers');
 
@@ -6,0 +5,0 @@ /**

src/Loader/Options.js

@@ -76,3 +76,3 @@ const Eta = require('eta');
       { tag: 'img', attributes: ['src', 'srcset'] },
-      { tag: 'image', attributes: ['href'] }, // <svg><image href="image.png"></image></svg>
+      { tag: 'image', attributes: ['href', 'xlink:href'] }, // <svg><image href="image.png"></image></svg>
       { tag: 'use', attributes: ['href'] }, // <svg><use href="icons.svg#home"></use></svg>
@@ -79,0 +79,0 @@ { tag: 'input', attributes: ['src'] }, // type="image"

src/Loader/Resolver.js

@@ -8,3 +8,2 @@ const fs = require('fs');
 const PluginService = require('../Plugin/PluginService');
-const { isWin, pathToPosix } = require('./Utils');
 const { resolveException } = require('./Messages/Exeptions');
@@ -117,3 +116,3 @@
 
-    return isWin ? pathToPosix(resolvedFile) : resolvedFile;
+    return resolvedFile;
   }
@@ -120,0 +119,0 @@

src/Loader/Template.js

 const PluginService = require('../Plugin/PluginService');
 const Loader = require('./Loader');
 const Options = require('./Options');
-const { isWin, pathToPosix } = require('./Utils');
 
@@ -98,4 +97,2 @@ const spaceChars = [' ', '\t', '\n', '\r', '\f'];
 
-    if (isWin) issuer = pathToPosix(issuer);
-
     for (let { type, file, startPos, endPos } of result) {
@@ -102,0 +99,0 @@ const resolvedFile = this.resolve({ type, file, issuer });

src/Loader/Utils.js

 const path = require('path');
 
-const { isWin, pathToPosix, parseQuery, outToConsole } = require('../Common/Helpers');
+const { isWin, pathToPosix } = require('../Common/Helpers');
 
@@ -9,7 +9,3 @@ let hmrFile = path.join(__dirname, 'hmr.js');
 module.exports = {
-  isWin,
-  pathToPosix,
-  outToConsole,
   hmrFile,
-  parseQuery,
 };

src/Plugin/AssetCompiler.js

@@ -9,3 +9,4 @@ const vm = require('vm');
 const { pluginName } = require('../config');
-const { isWin, pathToPosix, isFunction, toCommonJS } = require('./Utils');
+const { isFunction } = require('../Common/Helpers');
+const { toCommonJS } = require('./Utils');
 
@@ -209,5 +210,2 @@ const Options = require('./Options');
           const [, entryDataId] = module.layer.split('=', 2);
-          // loaderContext.entryData = this.entryDataCache.get(entryDataId);
-          // loaderContext.data = this.entryDataCache.get(entryDataId);
-
           loaderContext.entryData = AssetEntry.getData(entryDataId);
@@ -403,3 +401,3 @@ loaderContext.data = AssetEntry.getData(entryDataId);
 
-      if (!sourceRequest || AssetInline.isDataUrl(sourceRequest)) continue;
+      if (!sourceRequest || !resourceResolveData?.context || AssetInline.isDataUrl(sourceRequest)) continue;
 
@@ -746,4 +744,3 @@ const { issuer } = resourceResolveData.context;
           case 'script': {
-            const posixSourceFile = isWin ? pathToPosix(sourceFile) : sourceFile;
-            const entity = ScriptCollection.getEntity(posixSourceFile);
+            const entity = ScriptCollection.getEntity(sourceFile);
             verboseExtractScript({
@@ -750,0 +747,0 @@ entity,

src/Plugin/AssetEntry.js

 const path = require('path');
-const { isFunction } = require('./Utils');
 const Options = require('./Options');
+const { isFunction } = require('../Common/Helpers');
 
@@ -5,0 +5,0 @@ /**

src/Plugin/AssetInline.js

@@ -1,4 +0,1 @@
-const path = require('path');
-const { isWin } = require('./Utils');
-
 /**
@@ -112,3 +109,2 @@ * @param {{key: string, value: string}} attrs
   static getDataUrl(sourceFile, issuer) {
-    if (isWin) sourceFile = path.win32.normalize(sourceFile);
     const item = this.data.get(sourceFile);
@@ -115,0 +111,0 @@

src/Plugin/AssetScript.js

 const path = require('path');
-const Asset = require('./Asset');
 const AssetEntry = require('./AssetEntry');
@@ -7,3 +6,2 @@ const AssetTrash = require('./AssetTrash');
 const ScriptCollection = require('./ScriptCollection');
-const { isWin, pathToPosix } = require('./Utils');
 
@@ -42,3 +40,2 @@ class AssetScript {
       let [scriptFile] = module.resource.split('?', 1);
-      if (isWin) scriptFile = pathToPosix(scriptFile);
       module.__isScript = ScriptCollection.has(scriptFile);
@@ -148,11 +145,4 @@ }
           const issuerAssets = issuer.assets.get(issuerAssetFilename);
-
-          // init script cache by current issuer
-          if (!usedScripts.has(issuerAssetFilename)) {
-            usedScripts.set(issuerAssetFilename, new Set());
-          }
-
           const content = assets[issuerAssetFilename].source();
           let newContent = content;
-          let scriptTags = '';
 
@@ -182,2 +172,8 @@ // replace source filename with asset filename
           } else {
+            // init script cache by current issuer
+            if (!usedScripts.has(issuerAssetFilename)) {
+              usedScripts.set(issuerAssetFilename, new Set());
+            }
+
+            const chunkScripts = usedScripts.get(issuerAssetFilename);
             // extract original script tag with all attributes for usage it as template for chunks
@@ -188,2 +184,3 @@ let srcStartPos = content.indexOf(sourceFile);
             let tagEndPos = srcEndPos;
+            let scriptTags = '';
 
@@ -193,14 +190,28 @@ while (tagStartPos >= 0 && content.charAt(--tagStartPos) !== '<') {}
 
-            const tmplScriptStart = content.slice(tagStartPos, srcStartPos);
-            const tmplScriptEnd = content.slice(srcEndPos, tagEndPos);
+            if (asset.inline === true) {
+              const tmplScriptStart = '<script>';
+              const tmplScriptEnd = '</script>';
 
-            // generate additional scripts of chunks
-            const chunkScripts = usedScripts.get(issuerAssetFilename);
-            for (let chunkFile of chunkFiles) {
-              // avoid generate a script of the same split chunk used in different js files required in one template file,
-              // happens when used optimisation.splitChunks
-              if (!chunkScripts.has(chunkFile)) {
-                const assetFile = Options.getAssetOutputFile(chunkFile, issuerAssetFilename);
+              // generate additional scripts of chunks
+              for (let chunkFile of chunkFiles) {
+                // ignore already injected common used script
+                if (chunkScripts.has(chunkFile)) continue;
 
+                const source = assets[chunkFile].source();
                 if (scriptTags) scriptTags += LF;
+                scriptTags += tmplScriptStart + source + tmplScriptEnd;
+                chunkScripts.add(chunkFile);
+                AssetTrash.add(chunkFile);
+              }
+            } else {
+              const tmplScriptStart = content.slice(tagStartPos, srcStartPos);
+              const tmplScriptEnd = content.slice(srcEndPos, tagEndPos);
+
+              // generate additional scripts of chunks
+              for (let chunkFile of chunkFiles) {
+                // ignore already injected common used script
+                if (chunkScripts.has(chunkFile)) continue;
+
+                const assetFile = Options.getAssetOutputFile(chunkFile, issuerAssetFilename);
+                if (scriptTags) scriptTags += LF;
                 scriptTags += tmplScriptStart + assetFile + tmplScriptEnd;
@@ -212,2 +223,5 @@ chunkScripts.add(chunkFile);
               }
+
+              // set relation between source file and generated output filenames
+              chunkFiles.forEach(asset.chunkFiles.add, asset.chunkFiles);
             }
@@ -221,5 +235,2 @@
             }
-
-            // set relation between source file and generated output filenames
-            chunkFiles.forEach(asset.chunkFiles.add, asset.chunkFiles);
           }
@@ -226,0 +237,0 @@

src/Plugin/AssetSource.js

 const path = require('path');
-const { isWin, pathToPosix } = require('./Utils');
 
@@ -50,4 +49,2 @@ class AssetSource {
     for (let [sourceFile, item] of this.data) {
-      if (isWin) sourceFile = pathToPosix(sourceFile);
-
       for (let [assetFile, source] of item.issuers) {
@@ -54,0 +51,0 @@ const asset = compilation.assets[assetFile];

src/Plugin/Extras/ResponsiveLoader.js

 const vm = require('vm');
 const Asset = require('../Asset');
-const { isWin, parseQuery } = require('../Utils');
 const Options = require('../Options');
+const { isWin, parseQuery } = require('../../Common/Helpers');
 
@@ -6,0 +6,0 @@ class ResponsiveLoader {

src/Plugin/Messages/Deprecation.js

 const { red, green, black } = require('ansis/colors');
 const { pluginName } = require('../../config');
-const { outToConsole } = require('../Utils');
+const { outToConsole } = require('../../Common/Helpers');
 
@@ -5,0 +5,0 @@ const header = `\n${black.bgYellow` ${pluginName} `}${black.bgAnsi(227)` DEPRECATE `} `;

src/Plugin/Messages/Info.js

 const { pluginName } = require('../../config');
-const { pathRelativeByPwd, outToConsole, isFunction } = require('../Utils');
+const { pathRelativeByPwd, outToConsole, isFunction } = require('../../Common/Helpers');
 const { green, greenBright, cyan, cyanBright, magenta, yellowBright, black, ansi, yellow } = require('ansis/colors');
@@ -4,0 +4,0 @@ const Asset = require('../Asset');

src/Plugin/Messages/Warning.js

 const { black, yellow, cyan, magenta } = require('ansis/colors');
 const { pluginName } = require('../../config');
-const { outToConsole, parseRequest } = require('../Utils');
+const { outToConsole, parseRequest } = require('../../Common/Helpers');
 
@@ -5,0 +5,0 @@ const header = `\n${black.bgYellow` ${pluginName} `}${black.bgAnsi(227)` WARNING `} `;

src/Plugin/Options.js

 const path = require('path');
 const extractCssModule = require('./Modules/extractCss');
-const { isWin, isFunction, pathToPosix } = require('./Utils');
+const { isWin, isFunction, pathToPosix } = require('../Common/Helpers');
 const { optionModulesException } = require('./Messages/Exception');
@@ -5,0 +5,0 @@

src/Plugin/ScriptCollection.js

@@ -1,4 +0,2 @@
-const path = require('path');
 const Options = require('./Options');
-const { isWin } = require('../Common/Helpers');
 
@@ -41,5 +39,2 @@ /**
 
-    // normalize slashes for windows
-    if (isWin) issuer = path.normalize(issuer);
-
     // add only unique issuer
@@ -46,0 +41,0 @@ if (!item.issuers.find(({ request }) => request === issuer)) {

src/Plugin/Utils.js

@@ -1,15 +0,2 @@
-const { isWin, isFunction, pathRelativeByPwd, pathToPosix, parseQuery, outToConsole } = require('../Common/Helpers');
-
 /**
- * Parse resource path and raw query from request.
- *
- * @param {string} request
- * @return {{resource: string, query: string|null}}
- */
-const parseRequest = (request) => {
-  const [resource, query] = request.split('?');
-  return { resource, query };
-};
-
-/**
  * Transform source code from ESM to CommonJS.
@@ -42,10 +29,3 @@ *
 module.exports = {
-  isWin,
-  pathToPosix,
-  outToConsole,
-  pathRelativeByPwd,
-  parseQuery,
-  parseRequest,
-  isFunction,
   toCommonJS,
 };

No alert changes

Worsened metrics

Total package byte prevSize

250558

decreased by-0.17%

Lines of code

4500

decreased by-0.4%

No dependency changes