vite-plugin-singlefile-compression 2.3.3 → 2.4.1

package/README.md

@@ -6,7 +6,7 @@ The recipient can open it directly in the browser without manually unzipping the
 
 Using [DecompressionStream](https://developer.mozilla.org/en-US/docs/Web/API/DecompressionStream) + [base128-ascii](https://www.npmjs.com/package/base128-ascii).
 
-Preview: https://bddjr.github.io/vite-plugin-singlefile-compression/
+Preview: https://bddjr.github.io/vite-plugin-singlefile-compression/#/
 
 ## Setup
 
@@ -65,6 +65,8 @@ Use Base128 to encode compressed script.
 If false, use Base64.  
 https://www.npmjs.com/package/base128-ascii
 
+This option is only valid when the `enableCompress` option is set to true.
+
 default: `true`
 
 type: `boolean`
@@ -75,6 +77,8 @@ Compress format.
 
 https://developer.mozilla.org/en-US/docs/Web/API/DecompressionStream/DecompressionStream
 
+This option is only valid when the `enableCompress` option is set to true.
+
 default: `"deflate-raw"`
 
 type:
@@ -94,6 +98,8 @@ type:
 
 Custom compressor.
 
+This option is only valid when the `enableCompress` option is set to true.
+
 type: `(buf: zlib.InputType) => (Buffer | Uint8Array | Promise<Buffer | Uint8Array>)`
 
 ### htmlMinifierTerser
@@ -124,7 +130,7 @@ type: `boolean`
 
 ### tryInlineHtmlPublicIcon
 
-Try inline html icon, if icon is in public dir.
+Try inline html favicon, if icon is in public dir.
 
 default: `true`
 
@@ -132,12 +138,24 @@ type: `boolean`
 
 ### removeInlinedPublicIconFiles
 
-Remove inlined html icon files.
+Remove inlined html favicon files.
 
 default: `true`
 
 type: `boolean`
 
+### enableCompressInlinedIcon
+
+Enable compress inlined html favicon.
+
+This option is only valid when the `enableCompress` option is set to true.
+
+⚠️ Not works on Safari (See [#20](https://github.com/bddjr/vite-plugin-singlefile-compression/issues/20))
+
+default: `false`
+
+type: `boolean`
+
 ### useImportMetaPolyfill
 
 Use import.meta polyfill.
@@ -149,24 +167,24 @@ type: `boolean`
 
 ## Effect
 
-Preview: https://bddjr.github.io/vite-plugin-singlefile-compression/
+Preview: https://bddjr.github.io/vite-plugin-singlefile-compression/#/
 
 ```
-vite v8.0.8 building client environment for production...
+vite v8.0.10 building client environment for production...
 ✓ 43 modules transformed.
 rendering chunks (1)...
 
-vite-plugin-singlefile-compression 2.3.3 deflate-raw base128-ascii
+vite-plugin-singlefile-compression 2.4.1 deflate-raw base128-ascii
 
   file:///D:/code/js/vite-plugin-singlefile-compression/test/dist/index.html
-  125.847 kB -> 51.312 kB
+  126.509 kB -> 59.596 kB
 
 Finish.
 
 computing gzip size...
-dist/index.html  51.31 kB │ gzip: 44.73 kB
+dist/index.html  59.59 kB │ gzip: 44.92 kB
 
-✓ built in 285ms
+✓ built in 307ms
 ```
 
 ## Clone

package/dist/index.d.ts

@@ -37,6 +37,9 @@ interface Options {
    * Use Base128 to encode compressed script.
    * If false, use Base64.
    * https://www.npmjs.com/package/base128-ascii
+   *
+   * This option is only valid when the `enableCompress` option is set to true.
+   *
    * @default true
    */
   useBase128?: boolean;
@@ -45,6 +48,8 @@ interface Options {
    *
    * https://developer.mozilla.org/en-US/docs/Web/API/DecompressionStream/DecompressionStream
    *
+   * This option is only valid when the `enableCompress` option is set to true.
+   *
    * @type {"deflate-raw" | "deflate" | "gzip" | "brotli" | "zstd" | "deflateRaw" | "gz" | "br" | "brotliCompress" | "zstandard" | "zst"}
    *
    * @default "deflate-raw"
@@ -52,6 +57,8 @@ interface Options {
   compressFormat?: CompressFormat | CompressFormatAlias;
   /**
    * Custom compressor.
+   *
+   * This option is only valid when the `enableCompress` option is set to true.
    */
   compressor?: Compressor;
   /**
@@ -70,15 +77,25 @@ interface Options {
    */
   removeInlinedAssetFiles?: boolean;
   /**
-   * Try inline html icon, if icon is in public dir.
+   * Try inline html favicon, if icon is in public dir.
    * @default true
    */
   tryInlineHtmlPublicIcon?: boolean;
   /**
-   * Remove inlined html icon files.
+   * Remove inlined html favicon files.
    * @default true
    */
   removeInlinedPublicIconFiles?: boolean;
+  /**
+   * Enable compress inlined html favicon.
+   *
+   * This option is only valid when the `enableCompress` option is set to true.
+   *
+   * ⚠️ Not works on Safari (See [#20](https://github.com/bddjr/vite-plugin-singlefile-compression/issues/20))
+   *
+   * @default false
+   */
+  enableCompressInlinedIcon?: boolean;
   /**
    * Use import.meta polyfill.
    * @default false

package/dist/index.js

@@ -9,7 +9,7 @@ import zlib from "zlib";
 import svgToTinyDataUri from "mini-svg-data-uri";
 import { lookup } from "mrmime";
 //#region package.json
-var version = "2.3.3";
+var version = "2.4.1";
 //#endregion
 //#region src/compress.ts
 const compressors = {
@@ -77,8 +77,6 @@ const files = {
 		"\").then(e=>new Response(e.body.pipeThrough(new DecompressionStream(",
 		"))).text()).then(e=>{var t=document.createElement(\"script\");t.type=\"module\",t.innerHTML=e,document.head.appendChild(t)})"
 	],
-	"css": "document.head.appendChild(document.createElement(\"style\")).innerHTML=",
-	"icon": "document.querySelector(\"link[rel=icon]\").href=",
 	"importmeta": ["{let e=import.meta,t=e.resolve,r=e.url=new URL(", ",location).href;e.resolve=function(e){return/^\\.{0,2}\\//.test(e)?new URL(e,r).href:t.apply(this,arguments)}}"]
 };
 //#endregion
@@ -93,12 +91,6 @@ const template = {
 		const t = files.assets;
 		return t[0].concat(JSON.stringify(assetsJSON), t[1]);
 	},
-	css(cssSource) {
-		return files.css + JSON.stringify(cssSource);
-	},
-	icon(dataURL) {
-		return files.icon + JSON.stringify(dataURL);
-	},
 	importmeta(p) {
 		const t = files.importmeta;
 		return t[0].concat(JSON.stringify(p), t[1]);
@@ -127,9 +119,10 @@ const defaultHtmlMinifierTerserOptions = {
 };
 function getInnerOptions(opt) {
 	opt ||= {};
+	const enableCompress = opt.enableCompress ?? true;
 	return {
 		rename: opt.rename == null ? void 0 : String(opt.rename),
-		enableCompress: opt.enableCompress ?? true,
+		enableCompress,
 		useBase128: opt.useBase128 ?? true,
 		compressFormat: opt.compressFormat ? compressFormatAlias.hasOwnProperty(opt.compressFormat) ? compressFormatAlias[opt.compressFormat] : String(opt.compressFormat) : "deflate-raw",
 		compressor: typeof opt.compressor == "function" ? opt.compressor : void 0,
@@ -138,6 +131,7 @@ function getInnerOptions(opt) {
 		removeInlinedAssetFiles: opt.removeInlinedAssetFiles ?? true,
 		tryInlineHtmlPublicIcon: opt.tryInlineHtmlPublicIcon ?? true,
 		removeInlinedPublicIconFiles: opt.removeInlinedPublicIconFiles ?? true,
+		enableCompressInlinedIcon: enableCompress && (opt.enableCompressInlinedIcon ?? false),
 		useImportMetaPolyfill: opt.useImportMetaPolyfill ?? false
 	};
 }
@@ -186,12 +180,12 @@ async function generateBundle(bundle, config, options) {
 		bundle[options.rename].fileName = options.rename;
 		delete bundle["index.html"];
 	}
-	const distURL = pathToFileURL(config.build.outDir).href + "/", assetsDir = path.posix.join(config.build.assetsDir, "/"), assetsDirWithBase = config.base + assetsDir, assetsHrefSelector = `[href^="${assetsDirWithBase}"]`, assetsSrcSelector = `[src^="${assetsDirWithBase}"]`, fakeScript = `_vitePluginSinglefileCompression(${Date.now()})`, globalDelete = /* @__PURE__ */ new Set(), globalDoNotDelete = /* @__PURE__ */ new Set(), globalRemoveDistFileNames = /* @__PURE__ */ new Set(), globalAssetsDataURL = {}, globalPublicFilesCache = {}, bundleAssetsNames = [], bundleHTMLNames = [];
+	const distURL = pathToFileURL(config.build.outDir).href + "/", assetsDir = path.posix.join(config.build.assetsDir, "/"), assetsDirWithBase = config.base + assetsDir, assetsHrefSelector = `[href^="${assetsDirWithBase}"]`, assetsSrcSelector = `[src^="${assetsDirWithBase}"]`, fakeScript = `_${Math.random().toString(36).slice(2, 10)}()`, globalDelete = /* @__PURE__ */ new Set(), globalDoNotDelete = /* @__PURE__ */ new Set(), globalRemoveDistFileNames = /* @__PURE__ */ new Set(), globalAssetsDataURL = {}, globalPublicFilesCache = {}, bundleAssetsNames = [], bundleHTMLNames = [];
 	for (const name in bundle) if (name.startsWith(assetsDir)) bundleAssetsNames.push(name);
 	else if (/\.html$/i.test(name)) bundleHTMLNames.push(name);
 	for (const htmlFileName of bundleHTMLNames) {
 		console.log("\n  " + pc.underline(pc.cyan(distURL) + pc.greenBright(bundle[htmlFileName].fileName)));
-		const htmlChunk = bundle[htmlFileName], oldHTML = htmlChunk.source, dom = new JSDOM(oldHTML), document = dom.window.document, thisDel = /* @__PURE__ */ new Set(), newJSCode = [], scriptElement = document.querySelector(`script[type=module]${assetsSrcSelector}`), scriptName = scriptElement ? cutPrefix(scriptElement.src, config.base) : "";
+		const htmlChunk = bundle[htmlFileName], oldHTML = htmlChunk.source, dom = new JSDOM(oldHTML), document = dom.window.document, thisDel = /* @__PURE__ */ new Set(), newJSCode = [], scriptElement = document.querySelector(`script[type=module]${assetsSrcSelector}`), scriptName = scriptElement ? cutPrefix(scriptElement.src, config.base) : "", compressHeadElements = [];
 		let oldSize = Buffer.byteLength(oldHTML);
 		if (scriptElement) {
 			scriptElement.remove();
@@ -209,16 +203,18 @@ async function generateBundle(bundle, config, options) {
 			if (cssSource) {
 				oldSize += Buffer.byteLength(cssSource);
 				for (const name of bundleAssetsNames) if (cssSource.includes(name.slice(assetsDir.length))) globalDoNotDelete.add(name);
-				allCSS += cssSource.replace(/\s*(\/\*[^*]*\*\/)?\s*$/, "");
+				allCSS += cssSource.replace(/(\s*\/\*([^*]|\*(?!\/))*\*\/)*\s*$/, "");
 			}
 			if (options.enableCompress) element.remove();
 		}
-		if (allCSS) if (options.enableCompress) newJSCode.push(template.css(allCSS));
-		else {
+		if (allCSS) {
 			const e = document.createElement("style");
 			e.innerHTML = allCSS;
-			linkStylesheet[0].before(e);
-			for (const e of linkStylesheet) e.remove();
+			if (options.enableCompress) compressHeadElements.push(e);
+			else {
+				linkStylesheet[0].before(e);
+				for (const e of linkStylesheet) e.remove();
+			}
 		}
 		const assetsDataURL = {};
 		if (options.tryInlineHtmlAssets) for (const element of document.querySelectorAll(assetsSrcSelector)) {
@@ -243,44 +239,74 @@ async function generateBundle(bundle, config, options) {
 			}
 			if (options.enableCompress) element.src = `data:${name}`;
 		}
-		if (options.tryInlineHtmlPublicIcon) {
-			let needInline = true;
-			let iconName = "favicon.ico";
-			const element = document.querySelector(`link[rel=icon][href^="${config.base}"], link[rel="shortcut icon"][href^="${config.base}"]`);
-			if (element) {
-				iconName = cutPrefix(element.href, config.base);
-				if (bundleAssetsNames.includes(iconName)) needInline = false;
-				else {
-					element.rel = "icon";
-					element.href = "data:";
+		const createIconElement = (href) => {
+			const e = document.createElement("link");
+			e.rel = "icon";
+			if (href != null) e.href = href;
+			return e;
+		};
+		const getPublicIcon = (faviconName) => {
+			if (Object.prototype.hasOwnProperty.call(globalPublicFilesCache, faviconName)) return globalPublicFilesCache[faviconName];
+			let _path = path.join(config.build.outDir, faviconName);
+			if (fs.existsSync(_path)) globalRemoveDistFileNames.add(faviconName);
+			else {
+				_path = path.join(config.publicDir, faviconName);
+				if (!fs.existsSync(_path)) return null;
+			}
+			const b = fs.readFileSync(_path);
+			return globalPublicFilesCache[faviconName] = {
+				buffer: b,
+				dataURL: bufferToDataURL(faviconName, b),
+				size: b.length
+			};
+		};
+		const linkFaviconAll = document.querySelectorAll(`link[rel=icon][href]:not([href=""]),link[rel="shortcut icon"][href]:not([href=""])`);
+		if (linkFaviconAll.length == 0) {
+			if (options.tryInlineHtmlPublicIcon) {
+				const fileCache = getPublicIcon("favicon.ico");
+				if (fileCache) {
+					oldSize += fileCache.size;
+					const e = createIconElement(fileCache.dataURL);
+					if (options.enableCompressInlinedIcon) compressHeadElements.push(e);
+					else document.head.appendChild(e);
 				}
 			}
-			if (needInline) try {
-				if (!Object.prototype.hasOwnProperty.call(globalPublicFilesCache, iconName)) {
-					let Path = path.join(config.build.outDir, iconName);
-					if (fs.existsSync(Path)) globalRemoveDistFileNames.add(iconName);
-					else Path = path.join(config.publicDir, iconName);
-					const b = fs.readFileSync(Path);
-					globalPublicFilesCache[iconName] = {
-						dataURL: bufferToDataURL(iconName, b),
-						size: b.length
-					};
+		} else for (const linkFavicon of linkFaviconAll) {
+			let faviconName = linkFavicon.href;
+			const faviconIsDataURL = /^data:/i.test(faviconName);
+			if (!faviconIsDataURL) faviconName = cutPrefix(faviconName, config.base);
+			const setFaviconDataURL = (dataURL) => {
+				if (options.enableCompressInlinedIcon) if (linkFavicon) {
+					linkFavicon.remove();
+					linkFavicon.href = dataURL;
+					compressHeadElements.push(linkFavicon);
+				} else compressHeadElements.push(createIconElement(dataURL));
+				else if (linkFavicon) linkFavicon.href = dataURL;
+				else document.head.appendChild(createIconElement(dataURL));
+			};
+			if (faviconIsDataURL) {
+				if (options.enableCompressInlinedIcon) {
+					linkFavicon.remove();
+					compressHeadElements.push(linkFavicon);
 				}
-				const { dataURL, size } = globalPublicFilesCache[iconName];
-				oldSize += size;
-				if (options.enableCompress) {
-					newJSCode.push(template.icon(dataURL));
-					if (!element) document.head.insertAdjacentHTML("beforeend", "<link rel=\"icon\" href=\"data:\">");
-				} else if (element) element.href = dataURL;
-				else {
-					const e = document.head.appendChild(document.createElement("link"));
-					e.rel = "icon";
-					e.href = dataURL;
+			} else if (bundleAssetsNames.includes(faviconName)) {
+				const asset = bundle[faviconName];
+				if (asset) {
+					setFaviconDataURL(bufferToDataURL(faviconName, Buffer.from(asset.source)));
+					thisDel.add(faviconName);
+				}
+			} else if (options.tryInlineHtmlPublicIcon) {
+				const fileCache = getPublicIcon(faviconName);
+				if (fileCache) {
+					oldSize += fileCache.size;
+					setFaviconDataURL(fileCache.dataURL);
 				}
-			} catch (e) {
-				if (element) console.error(e);
 			}
 		}
+		if (compressHeadElements.length) {
+			const html = compressHeadElements.map((v) => v.outerHTML).join("");
+			newJSCode.push(`document.head.insertAdjacentHTML("beforeend",${JSON.stringify(html)})`);
+		}
 		htmlChunk.source = dom.serialize();
 		if (options.htmlMinifierTerser) htmlChunk.source = await minify(htmlChunk.source, options.htmlMinifierTerser);
 		function inlineHtmlAssets() {
@@ -293,13 +319,10 @@ async function generateBundle(bundle, config, options) {
 			thisDel.add(scriptName);
 			let { code } = bundle[scriptName];
 			oldSize += Buffer.byteLength(code);
-			code = code.replace(/;?\n?$/, "");
+			code = code.replace(/;?\s*$/, "");
 			for (const name of bundleAssetsNames) {
 				const assetName = name.slice(assetsDir.length);
-				if (code.includes(assetName)) {
-					globalDoNotDelete.add(name);
-					delete assetsDataURL[assetName];
-				}
+				if (code.includes(assetName)) globalDoNotDelete.add(name);
 			}
 			inlineHtmlAssets();
 			if (options.useImportMetaPolyfill) newJSCode.push(template.importmeta(scriptName));
@@ -316,10 +339,15 @@ async function generateBundle(bundle, config, options) {
 	if (options.removeInlinedAssetFiles) {
 		for (const name of globalDelete) if (!globalDoNotDelete.has(name)) delete bundle[name];
 	}
-	if (options.removeInlinedPublicIconFiles) for (const name of globalRemoveDistFileNames) try {
-		fs.rmSync(path.join(config.build.outDir, name), { force: true });
-	} catch (e) {
-		console.error(e);
+	if (options.removeInlinedPublicIconFiles) {
+		const { outDir } = config.build;
+		const mustStartsWith = path.resolve(outDir) + path.sep;
+		for (const name of globalRemoveDistFileNames) try {
+			const _path = path.resolve(outDir, name);
+			if (_path.startsWith(mustStartsWith)) fs.rmSync(_path, { force: true });
+		} catch (e) {
+			console.error(e);
+		}
 	}
 	console.log(pc.green("Finish.") + pc.reset("\n"));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-singlefile-compression",
-  "version": "2.3.3",
+  "version": "2.4.1",
   "author": "bddjr",
   "license": "MIT",
   "description": "Compress all assets and embeds them into dist/index.html, making it convenient to share as a single HTML file.",
@@ -14,7 +14,7 @@
     "build": "tsc && node build.js && tsc _dist/templateRaw.ts --ignoreConfig --noEmit && cd test && node --run build",
     "prepublishOnly": "node --run build"
   },
-  "homepage": "https://bddjr.github.io/vite-plugin-singlefile-compression/",
+  "homepage": "https://bddjr.github.io/vite-plugin-singlefile-compression/#/",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/bddjr/vite-plugin-singlefile-compression.git"
@@ -90,7 +90,7 @@
   },
   "dependencies": {
     "@types/html-minifier-terser": ">=7.0.2",
-    "base128-ascii": ">=4.0.1",
+    "base128-ascii": ">=5.0.0",
     "html-minifier-terser": ">=7.2.0",
     "jsdom": ">=29.0.2",
     "mini-svg-data-uri": ">=1.4.4",
@@ -101,10 +101,10 @@
     "@bddjr/types-rollupoptions-4.43.0": "4.43.0",
     "@types/jsdom": ">=28.0.1",
     "@types/node": "^24.12.2",
-    "rolldown": ">=1.0.0-rc.15",
+    "rolldown": ">=1.0.0-rc.17",
     "rolldown-plugin-dts": ">=0.23.2",
-    "terser": ">=5.46.1",
-    "typescript": ">=6.0.2",
-    "vite": ">=8.0.8"
+    "terser": ">=5.46.2",
+    "typescript": ">=6.0.3",
+    "vite": ">=8.0.10"
   }
 }