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

Comparing version 1.0.0-beta7 to 1.0.0-beta8

CHANGELOG.md

 # 1.0.0-beta7
-- Fixed an issue where favicon assets would not load if the files were in binary data formats.
+- Fixed an issue where favicon assets would not load if the files were in binary data formats.
+
+# 1.0.0-beta8
+- Changed the property name of an option from `favIcon` to `favicon`.
+- Fixed an issue with the inject option where all script code was inserted inline into the document. This caused problems for code that needed to be executed after the entire tree was loaded, as the `DOMContentLoaded` event was used to wrap and trigger the code. This approach led to issues with scripts dependent on the `DOMContentLoaded` event, causing adverse effects and malfunctioning of the code. The issue has been resolved to ensure that scripts dependent on `DOMContentLoaded` function correctly without negative impacts.

dist/modules/asset_injector_with_blob.js

@@ -7,3 +7,3 @@ (function (factory) {
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "node-html-parser", "./asset_injector"], factory);
+        define(["require", "exports", "node-html-parser", "./asset_injector", "../utils/string"], factory);
     }
@@ -16,2 +16,3 @@ })(function (require, exports) {
     const asset_injector_1 = require("./asset_injector");
+    const string_1 = require("../utils/string");
     class AssetInsertorWithBlob extends asset_injector_1.AssetInjector {
@@ -22,3 +23,3 @@ }
         createBlobSource(context) {
-            return context.assetSource.replaceAll("`", "\\`");
+            return string_1.StringUtil.rawStringOf(context.assetSource);
         }
@@ -41,3 +42,3 @@ perform(context, parent) {
             element.textContent = `{
-            const blob = new Blob([String.raw\`${blobSrc}\`], {type: "application/javascript"});
+            const blob = new Blob([${blobSrc}], {type: "application/javascript"});
             const blobUrl = window.URL.createObjectURL(blob);
@@ -63,3 +64,3 @@ const element = document.createElement("script");
             element.textContent = `{
-            const blob = new Blob([String.raw\`${blobSrc}\`], {type: "text/css"});
+            const blob = new Blob([${blobSrc}], {type: "text/css"});
             const blobUrl = window.URL.createObjectURL(blob);
@@ -66,0 +67,0 @@ const element = document.createElement("link");

dist/modules/asset_injector.js

@@ -56,3 +56,17 @@ (function (factory) {
             else { // is "DEFER" and "ASYNC"
-                return `addEventListener("DOMContentLoaded", () => {${context.assetSource}});`;
+                return `{
+                let __LISTENER__;
+                addEventListener("DOMContentLoaded", __LISTENER__ = function() {
+                    ${context.assetSource}
+
+                    // Remove previous registered existing callback function.
+                    removeEventListener("DOMContentLoaded", __LISTENER__);
+
+                    // Since 'DOMContentLoaded' has already been called, any related callback functions registered
+                    // afterwards may not be properly executed according to the existing document flow.
+                    //
+                    // Therefore, the event needs to be artificially triggered again.
+                    dispatchEvent(new Event("DOMContentLoaded"));
+                });
+            }`;
             }
@@ -59,0 +73,0 @@ }

dist/types/webpack/webpack_plugin.d.ts

@@ -10,3 +10,3 @@ import { Compilation, Compiler } from "webpack";
     /** The path of the favicon.ico file about the HTML document. */
-    favIcon?: string;
+    favicon?: string;
     /** Whether the assets will ultimately be injected into the given HTML document template. */
@@ -13,0 +13,0 @@ inject?: boolean;

dist/webpack/webpack_plugin.js

@@ -42,4 +42,4 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
                 : new asset_injector_1.StyleAssetInjector({ inline: options.inline }));
-            if (options.favIcon != "") {
-                this.headInjectors.push(new head_injector_1.FavIconInjector(options.favIcon));
+            if (options.favicon != "") {
+                this.headInjectors.push(new head_injector_1.FavIconInjector(options.favicon));
             }
@@ -51,3 +51,3 @@ }
             const filename = this.options?.filename ?? "index.html"; // output or exit
-            const favIcon = this.options?.favIcon ?? "";
+            const favicon = this.options?.favicon ?? "";
             const inject = this.options?.inject ?? true;
@@ -63,3 +63,3 @@ const injectType = this.options.injectType ?? "HEAD";
                 filename: filename,
-                favIcon: favIcon,
+                favicon: favicon,
                 inject: inject,
@@ -66,0 +66,0 @@ injectType: injectType,

package.json

 {
   "name": "html-inline-webpack-plugin",
   "description": "This webpack plugin package is bundling related HTML files by injecting inline tags.",
-  "version": "1.0.0-beta7",
+  "version": "1.0.0-beta8",
   "main": "./dist/index.js",
@@ -6,0 +6,0 @@ "types": "./dist/types/index.d.ts",

README.md

@@ -8,3 +8,3 @@ <div align="center">
             <th>Version</th>
-            <th>v1.0.0-beta7</th>
+            <th>v1.0.0-beta8</th>
           </tr>
@@ -33,3 +33,3 @@ </tbody>
 
-> When you want to update this package, enter npm update animable-js --save in the terminal to run it.
+> When you want to update this package, enter `npm update html-inline-webpack-plugin --save` in the terminal to run it.
 
@@ -74,3 +74,3 @@ ```
 | filename | The path of the HTML document that is outputed finally. | string |
-| favIcon? | The path of the favicon.ico file about the HTML document. | string |
+| favicon? | The path of the favicon.ico file about the HTML document. | string |
 | inject? | Whether the assets will ultimately be injected into the given HTML document template. | boolean |
@@ -82,2 +82,2 @@ | injcetType? | The type of the document element to which you want to inject the assets. | "HEAD" \| "BODY" |
 | processStage? | Not ready a comment about this. | "OPTIMIZE" \| "OPTIMIZE_INLINE" |
-| scriptLoading? | Not ready a comment about this. | "DEFAULT" \| "ASYNC" \| "DEFER" |
+| scriptLoading? | Not ready a comment about this. | "DEFAULT" \| "ASYNC" \| "DEFER" |

src/modules/asset_injector_with_blob.ts

 import { HTMLElement } from "node-html-parser";
 import { AssetInjector, AssetInjectorContext } from "./asset_injector";
 import { HTMLInlineWebpackPluginScriptLoading } from "../types";
+import { StringUtil } from "../utils/string";
 
@@ -11,3 +12,3 @@ export abstract class AssetInsertorWithBlob<T> extends AssetInjector<T> {
     createBlobSource(context: AssetInjectorContext<string>): string {
-        return context.assetSource.replaceAll("`", "\\`");
+        return StringUtil.rawStringOf(context.assetSource);
     }
@@ -30,3 +31,3 @@
         element.textContent = `{
-            const blob = new Blob([String.raw\`${blobSrc}\`], {type: "application/javascript"});
+            const blob = new Blob([${blobSrc}], {type: "application/javascript"});
             const blobUrl = window.URL.createObjectURL(blob);
@@ -54,3 +55,3 @@ const element = document.createElement("script");
         element.textContent = `{
-            const blob = new Blob([String.raw\`${blobSrc}\`], {type: "text/css"});
+            const blob = new Blob([${blobSrc}], {type: "text/css"});
             const blobUrl = window.URL.createObjectURL(blob);
@@ -57,0 +58,0 @@ const element = document.createElement("link");

src/modules/asset_injector.ts

@@ -64,3 +64,17 @@ import { HTMLElement } from "node-html-parser";
         } else { // is "DEFER" and "ASYNC"
-            return `addEventListener("DOMContentLoaded", () => {${context.assetSource}});`;
+            return `{
+                let __LISTENER__;
+                addEventListener("DOMContentLoaded", __LISTENER__ = function() {
+                    ${context.assetSource}
+
+                    // Remove previous registered existing callback function.
+                    removeEventListener("DOMContentLoaded", __LISTENER__);
+
+                    // Since 'DOMContentLoaded' has already been called, any related callback functions registered
+                    // afterwards may not be properly executed according to the existing document flow.
+                    //
+                    // Therefore, the event needs to be artificially triggered again.
+                    dispatchEvent(new Event("DOMContentLoaded"));
+                });
+            }`;
         }
@@ -67,0 +81,0 @@ }

src/webpack/webpack_plugin.ts

@@ -18,3 +18,3 @@ import { Compilation, Compiler, sources } from "webpack";
     /** The path of the favicon.ico file about the HTML document. */
-    favIcon?: string;
+    favicon?: string;
     /** Whether the assets will ultimately be injected into the given HTML document template. */
@@ -73,4 +73,4 @@ inject?: boolean;
 
-        if (options.favIcon != "") {
-            this.headInjectors.push(new FavIconInjector(options.favIcon));
+        if (options.favicon != "") {
+            this.headInjectors.push(new FavIconInjector(options.favicon));
         }
@@ -83,3 +83,3 @@ }
         const filename = this.options?.filename ?? "index.html";       // output or exit
-        const favIcon = this.options?.favIcon ?? "";
+        const favicon = this.options?.favicon ?? "";
         const inject = this.options?.inject ?? true;
@@ -96,3 +96,3 @@ const injectType = this.options.injectType ?? "HEAD";
             filename: filename,
-            favIcon: favIcon,
+            favicon: favicon,
             inject: inject,
@@ -99,0 +99,0 @@ injectType: injectType,

No alert changes

Improved metrics

Total package byte prevSize

48941

9.08%

Number of package files

26

13.04%

Lines of code

926

9.59%

Number of lines in readme file

80

1.27%

No dependency changes