New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
html-inline-webpack-plugin
Advanced tools
html-inline-webpack-plugin - npm Package Compare versions
Comparing version 1.0.0-beta2 to 1.0.0-beta3
@@ -0,1 +1,4 @@ | ||
| var __importDefault = (this && this.__importDefault) || function (mod) { | ||
| return (mod && mod.__esModule) ? mod : { "default": mod }; | ||
| }; | ||
| (function (factory) { | ||
@@ -7,3 +10,3 @@ if (typeof module === "object" && typeof module.exports === "object") { | ||
| else if (typeof define === "function" && define.amd) { | ||
| define(["require", "exports", "node-html-parser"], factory); | ||
| define(["require", "exports", "node-html-parser", "webpack", "path", "fs"], factory); | ||
| } | ||
@@ -15,2 +18,5 @@ })(function (require, exports) { | ||
| const node_html_parser_1 = require("node-html-parser"); | ||
| const webpack_1 = require("webpack"); | ||
| const path_1 = __importDefault(require("path")); | ||
| const fs_1 = __importDefault(require("fs")); | ||
| /** This class provides the function of injecting an element into the <head> of a given document. */ | ||
@@ -30,7 +36,21 @@ class HeadInjector { | ||
| } | ||
| perform(parent) { | ||
| parent.appendChild(new node_html_parser_1.HTMLElement("link", {}, `rel="shortcut icon" href="${this.path}"`)); | ||
| /** Gets an output path for a given favicon source path. */ | ||
| get assetName() { | ||
| return path_1.default.basename(this.path); | ||
| } | ||
| perform(compilation, parent) { | ||
| this.performAsset(compilation); | ||
| // Settings a favicon path by injecting into HTML template as link. | ||
| parent.appendChild(new node_html_parser_1.HTMLElement("link", {}, `rel="shortcut icon" href="${this.assetName}"`)); | ||
| } | ||
| performAsset(compilation) { | ||
| fs_1.default.readFile(this.path, (err, data) => { | ||
| if (err) { | ||
| throw new Error(`Exception while reading the file of a given favicon path: ${err.message}`); | ||
| } | ||
| compilation.emitAsset(this.assetName, new webpack_1.sources.RawSource(data)); | ||
| }); | ||
| } | ||
| } | ||
| exports.FavIconInjector = FavIconInjector; | ||
| }); |
| import { HTMLElement } from "node-html-parser"; | ||
| import { Compilation } from "webpack"; | ||
| /** 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; | ||
| abstract perform(compilation: Compilation, parent: HTMLElement): void; | ||
| } | ||
@@ -13,3 +14,6 @@ /** | ||
| constructor(path: string); | ||
| perform(parent: HTMLElement): void; | ||
| /** Gets an output path for a given favicon source path. */ | ||
| get assetName(): string; | ||
| perform(compilation: Compilation, parent: HTMLElement): void; | ||
| performAsset(compilation: Compilation): void; | ||
| } |
| /** Signature for the string literals of loading options about script. */ | ||
| export type HTMLInlineWebpackPluginScriptLoading = "DEFAULT" | "ASYNC" | "DEFER"; | ||
| /** Signature for the string literals about HTML elements injecting position. */ | ||
| export type HTMLInlineWebpackPluginInjectingType = "HEAD" | "BODY"; |
| import { Compilation, Compiler } from "webpack"; | ||
| import { HTMLInlineWebpackPluginScriptLoading } from "../types"; | ||
| import { HTMLInlineWebpackPluginInjectingType, HTMLInlineWebpackPluginScriptLoading } from "../types"; | ||
| /** Signature for the interface that defines option values of [HTMLInlineWebpackPlugin]. */ | ||
| export interface HTMLInlineWebpackPluginOptions { | ||
| /** The path of the HTML document to finally insert an assets. */ | ||
| /** The path of the HTML document to finally inject an assets. */ | ||
| template: string; | ||
@@ -13,2 +13,4 @@ /** The path of the HTML document that is outputed finally. */ | ||
| inject?: boolean; | ||
| /** The type of the document element to which you want to inject the assets. */ | ||
| injectType?: HTMLInlineWebpackPluginInjectingType; | ||
| /** | ||
@@ -48,5 +50,5 @@ * Whether it loads and operates asynchronously in the same way as the existing method, | ||
| /** Inserts the content of assets as inline into a given HTML document in head or body. */ | ||
| inject(compilation: Compilation, docText: string): string; | ||
| inject(compilation: Compilation, docText: string, injectType: HTMLInlineWebpackPluginInjectingType): string; | ||
| /** Outputs an asset file by a given filename and file contents. */ | ||
| output(compilation: Compilation, filename: string, data: string): void; | ||
| } |
@@ -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", "../modules/asset_injector_with_blob"], factory); | ||
| define(["require", "exports", "webpack", "node-html-parser", "prettier", "../modules/asset_injector", "../modules/head_injector", "../modules/asset_injector_with_blob", "path", "fs"], factory); | ||
| } | ||
@@ -20,7 +20,7 @@ })(function (require, exports) { | ||
| const prettier_1 = require("prettier"); | ||
| const path_1 = __importDefault(require("path")); | ||
| const fs_1 = __importDefault(require("fs")); | ||
| const asset_injector_1 = require("../modules/asset_injector"); | ||
| const head_injector_1 = require("../modules/head_injector"); | ||
| const asset_injector_with_blob_1 = require("../modules/asset_injector_with_blob"); | ||
| const path_1 = __importDefault(require("path")); | ||
| const fs_1 = __importDefault(require("fs")); | ||
| /** This webpack plugin package is bundling related HTML files by injecting inline tags. */ | ||
@@ -54,2 +54,3 @@ class HTMLInlineWebpackPlugin { | ||
| const inject = this.options?.inject ?? true; | ||
| const injectType = this.options.injectType ?? "HEAD"; | ||
| const injectAsBlob = this.options?.injectAsBlob ?? false; | ||
@@ -65,2 +66,3 @@ const inline = this.options?.inline ?? mode == "production"; // by web-dev-server | ||
| inject: inject, | ||
| injectType: injectType, | ||
| injectAsBlob: injectAsBlob, | ||
@@ -70,3 +72,3 @@ inline: inline, | ||
| processStage: processStage, | ||
| scriptLoading: scriptLoading | ||
| scriptLoading: scriptLoading, | ||
| }); | ||
@@ -84,3 +86,3 @@ if (inject && path_1.default.extname(template) != ".html") { | ||
| }, (_, callback) => { | ||
| fs_1.default?.readFile(path_1.default.resolve(template), "utf-8", async (err, data) => { | ||
| fs_1.default.readFile(path_1.default.resolve(template), "utf-8", async (err, data) => { | ||
| if (err) { | ||
@@ -90,3 +92,3 @@ 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 injected = this.inject(compilation, data, injectType); | ||
| const formated = pretty ? await (0, prettier_1.format)(injected, { parser: "html" }) : injected; | ||
@@ -101,11 +103,12 @@ this.output(compilation, filename, formated); | ||
| /** Inserts the content of assets as inline into a given HTML document in head or body. */ | ||
| inject(compilation, docText) { | ||
| inject(compilation, docText, injectType) { | ||
| const document = (0, node_html_parser_1.parse)(docText); | ||
| const documentHead = document.getElementsByTagName("head")[0] | ||
| ?? document.getElementsByTagName("body")[0]; | ||
| if (documentHead == null) { | ||
| const elements = injectType == "HEAD" | ||
| ? document.getElementsByTagName("head")[0] ?? document.getElementsByTagName("body")[0] | ||
| : document.getElementsByTagName("body")[0] ?? document.getElementsByTagName("head")[0]; | ||
| if (elements == null) { | ||
| throw new Error("Must be exists a node about <head> or <body> into html document."); | ||
| } | ||
| /** See Also, This is for additional features in addition to inserting assets. */ | ||
| this.headInjectors.forEach(func => func.perform(documentHead)); | ||
| this.headInjectors.forEach(func => func.perform(compilation, elements)); | ||
| for (const asset in compilation.assets) { | ||
@@ -119,3 +122,3 @@ /** To ensure compatibility with webpack-dev-server. */ | ||
| if (active) { | ||
| active.perform({ compilation, assetName: asset, assetSource: source }, documentHead); | ||
| active.perform({ compilation, assetName: asset, assetSource: source }, elements); | ||
| } | ||
@@ -122,0 +125,0 @@ } |
| { | ||
| "name": "html-inline-webpack-plugin", | ||
| "description": "This webpack plugin package is bundling related HTML files by injecting inline tags.", | ||
| "version": "1.0.0-beta2", | ||
| "version": "1.0.0-beta3", | ||
| "main": "./dist/index.js", | ||
@@ -6,0 +6,0 @@ "types": "./dist/types/index.d.ts", |
@@ -8,3 +8,3 @@ <div align="center"> | ||
| <th>Version</th> | ||
| <th>v1.0.0-beta2</th> | ||
| <th>v1.0.0-beta3</th> | ||
| </tr> | ||
@@ -73,2 +73,3 @@ </tbody> | ||
| | inject? | Whether the assets will ultimately be injected into the given HTML document template. | boolean | | ||
| | injcetType? | The type of the document element to which you want to inject the assets. | "HEAD" \| "BODY" | | ||
| | 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 | | ||
@@ -75,0 +76,0 @@ | 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 | |
| import { HTMLElement } from "node-html-parser"; | ||
| import { Compilation, sources } from "webpack"; | ||
| import path from "path"; | ||
| import fs from "fs"; | ||
| /** This class provides the function of injecting an element into the <head> of a given document. */ | ||
| export abstract class HeadInjector { | ||
| abstract perform(parent: HTMLElement): void; | ||
| abstract perform(compilation: Compilation, parent: HTMLElement): void; | ||
| } | ||
@@ -17,5 +20,23 @@ | ||
| perform(parent: HTMLElement): void { | ||
| parent.appendChild(new HTMLElement("link", {}, `rel="shortcut icon" href="${this.path}"`)); | ||
| /** Gets an output path for a given favicon source path. */ | ||
| get assetName(): string { | ||
| return path.basename(this.path); | ||
| } | ||
| perform(compilation: Compilation, parent: HTMLElement): void { | ||
| this.performAsset(compilation); | ||
| // Settings a favicon path by injecting into HTML template as link. | ||
| parent.appendChild(new HTMLElement("link", {}, `rel="shortcut icon" href="${this.assetName}"`)); | ||
| } | ||
| performAsset(compilation: Compilation) { | ||
| fs.readFile(this.path, (err, data) => { | ||
| if (err) { | ||
| throw new Error(`Exception while reading the file of a given favicon path: ${err.message}`); | ||
| } | ||
| compilation.emitAsset(this.assetName, new sources.RawSource(data)); | ||
| }); | ||
| } | ||
| } |
| /** Signature for the string literals of loading options about script. */ | ||
| export type HTMLInlineWebpackPluginScriptLoading = "DEFAULT" | "ASYNC" | "DEFER"; | ||
| export type HTMLInlineWebpackPluginScriptLoading = "DEFAULT" | "ASYNC" | "DEFER"; | ||
| /** Signature for the string literals about HTML elements injecting position. */ | ||
| export type HTMLInlineWebpackPluginInjectingType = "HEAD" | "BODY"; |
| import { Compilation, Compiler, sources } from "webpack"; | ||
| import { parse } from "node-html-parser"; | ||
| import { format } from "prettier" | ||
| import path from "path"; | ||
| import fs from "fs"; | ||
| import { AssetInjector, ScriptAssetInjector, StyleAssetInjector } from "../modules/asset_injector"; | ||
| import { FavIconInjector, HeadInjector } from "../modules/head_injector"; | ||
| import { ScriptAssetInjectorWithBlob, StyleAssetInjectorWithBlob } from "../modules/asset_injector_with_blob"; | ||
| import { HTMLInlineWebpackPluginScriptLoading } from "../types"; | ||
| import { HTMLInlineWebpackPluginInjectingType, HTMLInlineWebpackPluginScriptLoading } from "../types"; | ||
| import path from "path"; | ||
| import fs from "fs"; | ||
| /** Signature for the interface that defines option values of [HTMLInlineWebpackPlugin]. */ | ||
| export interface HTMLInlineWebpackPluginOptions { | ||
| /** The path of the HTML document to finally insert an assets. */ | ||
| /** The path of the HTML document to finally inject an assets. */ | ||
| template: string; | ||
@@ -21,2 +21,4 @@ /** The path of the HTML document that is outputed finally. */ | ||
| inject?: boolean; | ||
| /** The type of the document element to which you want to inject the assets. */ | ||
| injectType?: HTMLInlineWebpackPluginInjectingType; | ||
| /** | ||
@@ -82,2 +84,3 @@ * Whether it loads and operates asynchronously in the same way as the existing method, | ||
| const inject = this.options?.inject ?? true; | ||
| const injectType = this.options.injectType ?? "HEAD"; | ||
| const injectAsBlob = this.options?.injectAsBlob ?? false; | ||
@@ -94,2 +97,3 @@ const inline = this.options?.inline ?? mode == "production"; // by web-dev-server | ||
| inject: inject, | ||
| injectType: injectType, | ||
| injectAsBlob: injectAsBlob, | ||
@@ -99,3 +103,3 @@ inline: inline, | ||
| processStage: processStage, | ||
| scriptLoading: scriptLoading | ||
| scriptLoading: scriptLoading, | ||
| }); | ||
@@ -115,3 +119,3 @@ | ||
| }, (_, callback) => { | ||
| fs?.readFile(path.resolve(template), "utf-8", async (err, data) => { | ||
| fs.readFile(path.resolve(template), "utf-8", async (err, data) => { | ||
| if (err) { | ||
@@ -122,3 +126,3 @@ throw new Error(`Exception while reading the file of a given HTML template path: ${err.message}`); | ||
| if (inject) { | ||
| const injected = this.inject(compilation, data as string); | ||
| const injected = this.inject(compilation, data as string, injectType); | ||
| const formated = pretty ? await format(injected, {parser: "html"}) : injected; | ||
@@ -136,8 +140,13 @@ | ||
| /** Inserts the content of assets as inline into a given HTML document in head or body. */ | ||
| inject(compilation: Compilation, docText: string): string { | ||
| inject( | ||
| compilation: Compilation, | ||
| docText: string, | ||
| injectType: HTMLInlineWebpackPluginInjectingType | ||
| ): string { | ||
| const document = parse(docText); | ||
| const documentHead = document.getElementsByTagName("head")[0] | ||
| ?? document.getElementsByTagName("body")[0]; | ||
| const elements = injectType == "HEAD" | ||
| ? document.getElementsByTagName("head")[0] ?? document.getElementsByTagName("body")[0] | ||
| : document.getElementsByTagName("body")[0] ?? document.getElementsByTagName("head")[0]; | ||
| if (documentHead == null) { | ||
| if (elements == null) { | ||
| throw new Error("Must be exists a node about <head> or <body> into html document."); | ||
@@ -147,3 +156,3 @@ } | ||
| /** See Also, This is for additional features in addition to inserting assets. */ | ||
| this.headInjectors.forEach(func => func.perform(documentHead)); | ||
| this.headInjectors.forEach(func => func.perform(compilation, elements)); | ||
@@ -159,3 +168,3 @@ for (const asset in compilation.assets) { | ||
| if (active) { | ||
| active.perform({compilation, assetName: asset, assetSource: source}, documentHead); | ||
| active.perform({compilation, assetName: asset, assetSource: source}, elements); | ||
| } | ||
@@ -162,0 +171,0 @@ } |
No alert changes
Improved metrics
- Total package byte prevSize
- increased by8.4%
43638
- Lines of code
- increased by7.71%
824
- Number of lines in readme file
- increased by1.32%
77
Worsened metrics
- Number of low supply chain risk alerts
- increased by50%
3
No dependency changes