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

Comparing version 1.0.0-beta1 to 1.0.0-beta2

dist/modules/asset_injector_with_blob.js

@@ -7,3 +7,3 @@ (function (factory) {
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "./asset_injector"], factory);
+        define(["require", "exports", "node-html-parser", "./asset_injector"], factory);
     }
@@ -13,9 +13,63 @@ })(function (require, exports) {
     Object.defineProperty(exports, "__esModule", { value: true });
-    exports.AssetInsertorWithBlob = void 0;
+    exports.StyleAssetInjectorWithBlob = exports.ScriptAssetInjectorWithBlob = exports.DrivenAssetInjectorWithBlob = exports.AssetInsertorWithBlob = void 0;
+    const node_html_parser_1 = require("node-html-parser");
     const asset_injector_1 = require("./asset_injector");
     class AssetInsertorWithBlob extends asset_injector_1.AssetInjector {
-        blobOf() {
+    }
+    exports.AssetInsertorWithBlob = AssetInsertorWithBlob;
+    class DrivenAssetInjectorWithBlob extends AssetInsertorWithBlob {
+        createBlobSource(context) {
+            return context.assetSource
+                .replaceAll("`", "\\`")
+                .replaceAll("$", "\\$");
         }
+        perform(context, parent) {
+            parent.appendChild(this.createElement(context));
+        }
     }
-    exports.AssetInsertorWithBlob = AssetInsertorWithBlob;
+    exports.DrivenAssetInjectorWithBlob = DrivenAssetInjectorWithBlob;
+    class ScriptAssetInjectorWithBlob extends DrivenAssetInjectorWithBlob {
+        options;
+        constructor(options) {
+            super();
+            this.options = options;
+        }
+        createElement(context) {
+            const blobSrc = this.createBlobSource(context);
+            const loading = this.options.scriptLoading;
+            const element = new node_html_parser_1.HTMLElement("script", {});
+            element.textContent = `{
+            const blob = new Blob([String.raw\`${blobSrc}\`], {type: "application/javascript"});
+            const blobUrl = window.URL.createObjectURL(blob);
+            const element = document.createElement("script");
+            element.setAttribute("src", blobUrl);
+            ${
+            // To defines an optional attributes about script loading behavior.
+            loading != "DEFAULT"
+                ? `element.setAttribute("${loading == "DEFER" ? "defer" : loading == "ASYNC" ? "async" : ""}", "");`
+                : ``}
+
+            document.head.appendChild(element);
+        }`;
+            return element;
+        }
+    }
+    exports.ScriptAssetInjectorWithBlob = ScriptAssetInjectorWithBlob;
+    class StyleAssetInjectorWithBlob extends DrivenAssetInjectorWithBlob {
+        createElement(context) {
+            const blobSrc = this.createBlobSource(context);
+            const element = new node_html_parser_1.HTMLElement("script", {});
+            element.textContent = `{
+            const blob = new Blob([String.raw\`${blobSrc}\`], {type: "text/css"});
+            const blobUrl = window.URL.createObjectURL(blob);
+            const element = document.createElement("link");
+            element.setAttribute("href", blobUrl);
+            element.setAttribute("rel", "stylesheet");
+
+            document.head.appendChild(element);
+        }`;
+            return element;
+        }
+    }
+    exports.StyleAssetInjectorWithBlob = StyleAssetInjectorWithBlob;
 });

dist/modules/asset_injector.js

@@ -29,6 +29,8 @@ (function (factory) {
         }
-        perform(context, parent, source) {
-            const target = this.createElement();
+        perform(context, parent) {
+            const target = this.createElement(context);
             if (this.isInline) {
-                target.textContent = source;
+                target.textContent = context.assetSource;
+                // A given asset has already been inserted into the document,
+                // so there is no need to output it separately.
                 context.compilation.deleteAsset(context.assetName);
@@ -43,3 +45,9 @@ }
     exports.DrivenAssetInjector = DrivenAssetInjector;
+    /** This class performs injecting HTML element about javascript assets. */
     class ScriptAssetInjector extends DrivenAssetInjector {
+        options;
+        constructor(options) {
+            super(options);
+            this.options = options;
+        }
         createElement() {
@@ -49,3 +57,11 @@ return new node_html_parser_1.HTMLElement("script", {});
         setAttribute(context, element) {
-            element.setAttribute("defer", "");
+            switch (this.options.scriptLoading) {
+                case "DEFER":
+                    element.setAttribute("defer", "");
+                    break;
+                case "ASYNC":
+                    element.setAttribute("async", "");
+                    break;
+                case "DEFAULT": break;
+            }
             element.setAttribute("src", context.assetName);
@@ -55,2 +71,3 @@ }
     exports.ScriptAssetInjector = ScriptAssetInjector;
+    /** This class performs injecting HTML elements about CSS style sheet assets. */
     class StyleAssetInjector extends DrivenAssetInjector {
@@ -57,0 +74,0 @@ createElement() {

dist/modules/head_injector.js

@@ -14,5 +14,10 @@ (function (factory) {
     const node_html_parser_1 = require("node-html-parser");
+    /** This class provides the function of injecting an element into the <head> of a given document. */
     class HeadInjector {
     }
     exports.HeadInjector = HeadInjector;
+    /**
+     * This class performs the function of injecting an element that define
+     * the favicon request path of a given html document.
+     */
     class FavIconInjector extends HeadInjector {
@@ -19,0 +24,0 @@ path;

dist/types.js

@@ -1,1 +0,12 @@
-"use strict";
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});

dist/types/modules/asset_injector_with_blob.d.ts

@@ -1,4 +0,22 @@
-import { AssetInjector } from "./asset_injector";
+import { HTMLElement } from "node-html-parser";
+import { AssetInjector, AssetInjectorContext } from "./asset_injector";
+import { HTMLInlineWebpackPluginScriptLoading } from "../types";
 export declare abstract class AssetInsertorWithBlob<T> extends AssetInjector<T> {
-    blobOf(): void;
+    abstract createBlobSource(context: AssetInjectorContext<T>): string;
 }
+export declare abstract class DrivenAssetInjectorWithBlob extends AssetInsertorWithBlob<string> {
+    createBlobSource(context: AssetInjectorContext<string>): string;
+    perform(context: AssetInjectorContext, parent: HTMLElement): void;
+}
+export declare class ScriptAssetInjectorWithBlob extends DrivenAssetInjectorWithBlob {
+    options: {
+        scriptLoading: HTMLInlineWebpackPluginScriptLoading;
+    };
+    constructor(options: {
+        scriptLoading: HTMLInlineWebpackPluginScriptLoading;
+    });
+    createElement(context: AssetInjectorContext): HTMLElement;
+}
+export declare class StyleAssetInjectorWithBlob extends DrivenAssetInjectorWithBlob {
+    createElement(context: AssetInjectorContext<string>): HTMLElement;
+}

dist/types/modules/asset_injector.d.ts

 import { HTMLElement } from "node-html-parser";
 import { Compilation } from "webpack";
+import { HTMLInlineWebpackPluginScriptLoading } from "../types";
 /**
@@ -9,4 +10,5 @@ * Signature for the interface that defines the required information
  */
-export interface AssetInjectorContext {
+export interface AssetInjectorContext<T = string> {
     compilation: Compilation;
+    assetSource: T;
     assetName: string;
@@ -16,4 +18,4 @@ }
 export declare abstract class AssetInjector<T> {
-    abstract createElement(): HTMLElement;
-    abstract perform(context: AssetInjectorContext, parent: HTMLElement, source: T): void;
+    abstract createElement(context: AssetInjectorContext<T>): HTMLElement;
+    abstract perform(context: AssetInjectorContext<T>, parent: HTMLElement): void;
 }
@@ -30,9 +32,19 @@ /** This class provides injecting HTML elements about asset based on the string. */
     get isInline(): boolean;
-    perform(context: AssetInjectorContext, parent: HTMLElement, source: string): void;
+    perform(context: AssetInjectorContext, parent: HTMLElement): void;
     abstract setAttribute(context: AssetInjectorContext, element: HTMLElement): void;
 }
+/** This class performs injecting HTML element about javascript assets. */
 export declare class ScriptAssetInjector extends DrivenAssetInjector {
+    options: {
+        inline: boolean;
+        scriptLoading: HTMLInlineWebpackPluginScriptLoading;
+    };
+    constructor(options: {
+        inline: boolean;
+        scriptLoading: HTMLInlineWebpackPluginScriptLoading;
+    });
     createElement(): HTMLElement;
     setAttribute(context: AssetInjectorContext, element: HTMLElement): void;
 }
+/** This class performs injecting HTML elements about CSS style sheet assets. */
 export declare class StyleAssetInjector extends DrivenAssetInjector {
@@ -39,0 +51,0 @@ createElement(): HTMLElement;

dist/types/modules/head_injector.d.ts

 import { HTMLElement } from "node-html-parser";
+/** This class provides the function of injecting an element into the <head> of a given document. */
 export declare abstract class HeadInjector {
     abstract perform(parent: HTMLElement): void;
 }
+/**
+ * This class performs the function of injecting an element that define
+ * the favicon request path of a given html document.
+ */
 export declare class FavIconInjector extends HeadInjector {
@@ -6,0 +11,0 @@ path: string;

dist/types/webpack/webpack_plugin.d.ts

 import { Compilation, Compiler } from "webpack";
+import { HTMLInlineWebpackPluginScriptLoading } from "../types";
 /** Signature for the interface that defines option values of [HTMLInlineWebpackPlugin]. */
@@ -35,2 +36,3 @@ export interface HTMLInlineWebpackPluginOptions {
     processStage?: "OPTIMIZE" | "OPTIMIZE_INLINE";
+    scriptLoading?: HTMLInlineWebpackPluginScriptLoading;
 }
@@ -37,0 +39,0 @@ /** This webpack plugin package is bundling related HTML files by injecting inline tags. */

dist/webpack/webpack_plugin.js

@@ -10,3 +10,3 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "webpack", "node-html-parser", "prettier", "path", "fs", "../modules/asset_injector", "../modules/head_injector"], factory);
+        define(["require", "exports", "webpack", "node-html-parser", "prettier", "path", "fs", "../modules/asset_injector", "../modules/head_injector", "../modules/asset_injector_with_blob"], factory);
     }
@@ -24,2 +24,3 @@ })(function (require, exports) {
     const head_injector_1 = require("../modules/head_injector");
+    const asset_injector_with_blob_1 = require("../modules/asset_injector_with_blob");
     /** This webpack plugin package is bundling related HTML files by injecting inline tags. */
@@ -35,4 +36,10 @@ class HTMLInlineWebpackPlugin {
         applyContext(options) {
-            this.assetInjectors.set(".js", new asset_injector_1.ScriptAssetInjector({ inline: options.inline }));
-            this.assetInjectors.set(".css", new asset_injector_1.StyleAssetInjector({ inline: options.inline }));
+            /** Whether asset resource should be inserted in blob form. */
+            const isInjectAsBlob = options.injectAsBlob;
+            this.assetInjectors.set(".js", isInjectAsBlob
+                ? new asset_injector_with_blob_1.ScriptAssetInjectorWithBlob({ scriptLoading: options.scriptLoading })
+                : new asset_injector_1.ScriptAssetInjector({ inline: options.inline, scriptLoading: options.scriptLoading }));
+            this.assetInjectors.set(".css", isInjectAsBlob
+                ? new asset_injector_with_blob_1.StyleAssetInjectorWithBlob()
+                : new asset_injector_1.StyleAssetInjector({ inline: options.inline }));
             if (options.favIcon != null) {
@@ -52,2 +59,3 @@ this.headInjectors.push(new head_injector_1.FavIconInjector(options.favIcon));
             const processStage = this.options.processStage ?? "OPTIMIZE_INLINE";
+            const scriptLoading = this.options.scriptLoading ?? "DEFER";
             this.applyContext({
@@ -62,2 +70,3 @@ template: template,
                 processStage: processStage,
+                scriptLoading: scriptLoading
             });
@@ -77,8 +86,8 @@ if (inject && path_1.default.extname(template) != ".html") {
                         if (err) {
-                            throw new Error(`Exception while reading files: ${err.message}`);
+                            throw new Error(`Exception while reading the file of a given HTML template path: ${err.message}`);
                         }
                         if (inject) {
                             const injected = this.inject(compilation, data);
-                            const resulted = pretty ? await (0, prettier_1.format)(injected, { parser: "html" }) : injected;
-                            this.output(compilation, filename, resulted);
+                            const formated = pretty ? await (0, prettier_1.format)(injected, { parser: "html" }) : injected;
+                            this.output(compilation, filename, formated);
                         }
@@ -98,3 +107,3 @@ callback();
             }
-            /** Insert the head for additional settings about a given information. */
+            /** See Also, This is for additional features in addition to inserting assets. */
             this.headInjectors.forEach(func => func.perform(documentHead));
@@ -109,3 +118,3 @@ for (const asset in compilation.assets) {
                 if (active) {
-                    active.perform({ compilation, assetName: asset }, documentHead, source);
+                    active.perform({ compilation, assetName: asset, assetSource: source }, documentHead);
                 }
@@ -112,0 +121,0 @@ }

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-beta1",
+  "version": "1.0.0-beta2",
   "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-beta1</th>
+            <th>v1.0.0-beta2</th>
           </tr>
@@ -71,7 +71,8 @@ </tbody>
 | 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 |
-| inject | Whether the assets will ultimately be injected into the given HTML document template. | boolean |
-| injectAsBlob | Whether it loads and operates asynchronously in the same way as the existing method, but handles loading data as a blob to avoid re-requesting resources from the server. | boolean |
-| inline | Whether to reduce the number of resource requests to the server by injecting asset content all at once into the document template instead of using the traditional asynchronous request method. | boolean |
-| pretty | Not ready a comment about this. | boolean |
-| processStage | Not ready a comment about this. | "OPTIMIZE" \| "OPTIMIZE_INLINE" |
+| 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 |
+| injectAsBlob? | Whether it loads and operates asynchronously in the same way as the existing method, but handles loading data as a blob to avoid re-requesting resources from the server. | boolean |
+| inline? | Whether to reduce the number of resource requests to the server by injecting asset content all at once into the document template instead of using the traditional asynchronous request method. | boolean |
+| pretty? | Not ready a comment about this. | boolean |
+| processStage? | Not ready a comment about this. | "OPTIMIZE" \| "OPTIMIZE_INLINE" |
+| scriptLoading? | Not ready a comment about this. | "DEFAULT" \| "ASYNC" \| "DEFER" |

src/modules/asset_injector_with_blob.ts

@@ -1,7 +0,65 @@
-import { AssetInjector } from "./asset_injector";
+import { HTMLElement } from "node-html-parser";
+import { AssetInjector, AssetInjectorContext } from "./asset_injector";
+import { HTMLInlineWebpackPluginScriptLoading } from "../types";
 
 export abstract class AssetInsertorWithBlob<T> extends AssetInjector<T> {
-    blobOf() {
-        
+    abstract createBlobSource(context: AssetInjectorContext<T>): string;
+}
+
+export abstract class DrivenAssetInjectorWithBlob extends AssetInsertorWithBlob<string> {
+    createBlobSource(context: AssetInjectorContext<string>): string {
+        return context.assetSource
+            .replaceAll("`", "\\`")
+            .replaceAll("$", "\\$");
     }
+
+    perform(context: AssetInjectorContext, parent: HTMLElement): void {
+        parent.appendChild(this.createElement(context));
+    }
+}
+
+export class ScriptAssetInjectorWithBlob extends DrivenAssetInjectorWithBlob {
+    constructor(public options: {scriptLoading: HTMLInlineWebpackPluginScriptLoading}) {
+        super();
+    }
+
+    createElement(context: AssetInjectorContext): HTMLElement {
+        const blobSrc = this.createBlobSource(context);
+        const loading = this.options.scriptLoading;
+        const element = new HTMLElement("script", {});
+        element.textContent = `{
+            const blob = new Blob([String.raw\`${blobSrc}\`], {type: "application/javascript"});
+            const blobUrl = window.URL.createObjectURL(blob);
+            const element = document.createElement("script");
+            element.setAttribute("src", blobUrl);
+            ${
+                // To defines an optional attributes about script loading behavior.
+                loading != "DEFAULT"
+                    ? `element.setAttribute("${loading == "DEFER" ? "defer" : loading == "ASYNC" ? "async" : ""}", "");`
+                    : ``
+            }
+
+            document.head.appendChild(element);
+        }`;
+
+        return element;
+    }
+}
+
+export class StyleAssetInjectorWithBlob extends DrivenAssetInjectorWithBlob {
+    createElement(context: AssetInjectorContext<string>): HTMLElement {
+        const blobSrc = this.createBlobSource(context);
+        const element = new HTMLElement("script", {});
+        element.textContent = `{
+            const blob = new Blob([String.raw\`${blobSrc}\`], {type: "text/css"});
+            const blobUrl = window.URL.createObjectURL(blob);
+            const element = document.createElement("link");
+            element.setAttribute("href", blobUrl);
+            element.setAttribute("rel", "stylesheet");
+
+            document.head.appendChild(element);
+        }`;
+
+        return element;
+    }
 }

src/modules/asset_injector.ts

 import { HTMLElement } from "node-html-parser";
 import { Compilation } from "webpack";
+import { HTMLInlineWebpackPluginScriptLoading } from "../types";
 
@@ -10,4 +11,5 @@ /**
  */
-export interface AssetInjectorContext {
+export interface AssetInjectorContext<T = string> {
     compilation: Compilation;
+    assetSource: T;
     assetName: string;
@@ -18,4 +20,4 @@ }
 export abstract class AssetInjector<T> {
-    abstract createElement(): HTMLElement;
-    abstract perform(context: AssetInjectorContext, parent: HTMLElement, source: T): void;
+    abstract createElement(context: AssetInjectorContext<T>): HTMLElement;
+    abstract perform(context: AssetInjectorContext<T>, parent: HTMLElement): void;
 }
@@ -34,7 +36,10 @@
 
-    perform(context: AssetInjectorContext, parent: HTMLElement, source: string): void {
-        const target = this.createElement();
+    perform(context: AssetInjectorContext, parent: HTMLElement): void {
+        const target = this.createElement(context);
 
         if (this.isInline) {
-            target.textContent = source;
+            target.textContent = context.assetSource;
+
+            // A given asset has already been inserted into the document,
+            // so there is no need to output it separately.
             context.compilation.deleteAsset(context.assetName);
@@ -51,3 +56,8 @@ } else {
 
+/** This class performs injecting HTML element about javascript assets. */
 export class ScriptAssetInjector extends DrivenAssetInjector {
+    constructor(public options: {inline: boolean, scriptLoading: HTMLInlineWebpackPluginScriptLoading}) {
+        super(options);
+    }
+
     createElement(): HTMLElement {
@@ -58,3 +68,8 @@ return new HTMLElement("script", {});
     setAttribute(context: AssetInjectorContext, element: HTMLElement): void {
-        element.setAttribute("defer", "");
+        switch (this.options.scriptLoading) {
+            case "DEFER": element.setAttribute("defer", ""); break;
+            case "ASYNC": element.setAttribute("async", ""); break;
+            case "DEFAULT": break;
+        }
+
         element.setAttribute("src", context.assetName);
@@ -64,2 +79,3 @@ }
 
+/** This class performs injecting HTML elements about CSS style sheet assets. */
 export class StyleAssetInjector extends DrivenAssetInjector {
@@ -66,0 +82,0 @@ createElement(): HTMLElement {

src/modules/head_injector.ts

 import { HTMLElement } from "node-html-parser";
 
+/** This class provides the function of injecting an element into the <head> of a given document. */
 export abstract class HeadInjector {
@@ -7,2 +8,6 @@ abstract perform(parent: HTMLElement): void;
 
+/**
+ * This class performs the function of injecting an element that define
+ * the favicon request path of a given html document.
+ */
 export class FavIconInjector extends HeadInjector {
@@ -9,0 +14,0 @@ constructor(public path: string) {

src/webpack/webpack_plugin.ts

 import { Compilation, Compiler, sources } from "webpack";
 import { parse } from "node-html-parser";
-import { doc, format } from "prettier"
+import { format } from "prettier"
 import path from "path";
@@ -8,2 +8,4 @@ import fs from "fs";
 import { FavIconInjector, HeadInjector } from "../modules/head_injector";
+import { ScriptAssetInjectorWithBlob, StyleAssetInjectorWithBlob } from "../modules/asset_injector_with_blob";
+import { HTMLInlineWebpackPluginScriptLoading } from "../types";
 
@@ -43,2 +45,3 @@ /** Signature for the interface that defines option values of [HTMLInlineWebpackPlugin]. */
     processStage?: "OPTIMIZE" | "OPTIMIZE_INLINE";
+    scriptLoading?: HTMLInlineWebpackPluginScriptLoading;
 }
@@ -56,5 +59,15 @@
     applyContext(options: Required<HTMLInlineWebpackPluginOptions>) {
-        this.assetInjectors.set(".js", new ScriptAssetInjector({inline: options.inline}));
-        this.assetInjectors.set(".css", new StyleAssetInjector({inline: options.inline}));
+        /** Whether asset resource should be inserted in blob form. */
+        const isInjectAsBlob = options.injectAsBlob;
 
+        this.assetInjectors.set(".js", isInjectAsBlob
+            ? new ScriptAssetInjectorWithBlob({scriptLoading: options.scriptLoading})
+            : new ScriptAssetInjector({inline: options.inline, scriptLoading: options.scriptLoading})
+        );
+
+        this.assetInjectors.set(".css", isInjectAsBlob
+            ? new StyleAssetInjectorWithBlob()
+            : new StyleAssetInjector({inline: options.inline})
+        );
+
         if (options.favIcon != null) {
@@ -75,2 +88,3 @@ this.headInjectors.push(new FavIconInjector(options.favIcon));
         const processStage = this.options.processStage ?? "OPTIMIZE_INLINE";
+        const scriptLoading = this.options.scriptLoading ?? "DEFER";
 
@@ -86,2 +100,3 @@ this.applyContext({
             processStage: processStage,
+            scriptLoading: scriptLoading
         });
@@ -103,3 +118,3 @@
                     if (err) {
-                        throw new Error(`Exception while reading files: ${err.message}`);
+                        throw new Error(`Exception while reading the file of a given HTML template path: ${err.message}`);
                     }
@@ -109,5 +124,5 @@
                         const injected = this.inject(compilation, data as string);
-                        const resulted = pretty ? await format(injected, {parser: "html"}) : injected;
+                        const formated = pretty ? await format(injected, {parser: "html"}) : injected;
 
-                        this.output(compilation, filename, resulted);
+                        this.output(compilation, filename, formated);
                     }
@@ -131,3 +146,3 @@
 
-        /** Insert the head for additional settings about a given information. */
+        /** See Also, This is for additional features in addition to inserting assets. */
         this.headInjectors.forEach(func => func.perform(documentHead));
@@ -144,3 +159,3 @@
             if (active) {
-                active.perform({compilation, assetName: asset}, documentHead, source);
+                active.perform({compilation, assetName: asset, assetSource: source}, documentHead);
             }
@@ -147,0 +162,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

40255

increased by37.94%

Lines of code

765

increased by39.09%

Number of lines in readme file

76

increased by1.33%

No dependency changes