@bddjr/vite-plugin-singlefile 3.0.0

package/LICENSE.txt

@@ -0,0 +1,8 @@
+The MIT License (MIT)
+Copyright © 2026 bddjr
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,109 @@
+# vite plugin singlefile compression
+
+Embed all assets into `dist/index.html`
+
+Preview: https://bddjr.github.io/vite-plugin-singlefile/
+
+> [!TIP]  
+> You may need: [vite-plugin-singlefile-compression](https://github.com/bddjr/vite-plugin-singlefile-compression)  
+
+## Setup
+
+```
+npm i @bddjr/vite-plugin-singlefile@latest -D
+```
+
+Then modify `vite.config.ts`, like [test/vite.config.ts](test/vite.config.ts)
+
+```diff
++ import singleFile from '@bddjr/vite-plugin-singlefile'
+
+  export default defineConfig({
+    plugins: [
+      vue(),
+      vueDevTools(),
++     singleFile(),
+    ],
+```
+
+Then use hash history, like [test/src/router/index.ts](test/src/router/index.ts)
+
+```diff
+  const router = createRouter({
+-   history: createWebHistory(),
++   history: createWebHashHistory(),
+```
+
+## Options
+
+Example:
+
+```ts
+singleFileCompression({
+  rename: 'example.html'
+}),
+```
+
+### rename
+
+Rename index.html
+
+type: `string`
+
+### tryInlineHtmlAssets
+
+Try inline html used assets, if inlined or not used in JS.
+
+default: `true`
+
+type: `boolean`
+
+### removeInlinedAssetFiles
+
+Remove inlined asset files.
+
+default: `true`
+
+type: `boolean`
+
+### tryInlineHtmlPublicIcon
+
+Try inline html icon, if icon is in public dir.
+
+default: `true`
+
+type: `boolean`
+
+### removeInlinedPublicIconFiles
+
+Remove inlined html icon files.
+
+default: `true`
+
+type: `boolean`
+
+
+## Effect
+
+Preview: https://bddjr.github.io/vite-plugin-singlefile/
+
+```
+vite v8.0.3 building client environment for production...
+✓ 43 modules transformed.
+computing gzip size...
+dist/index.html  123.51 kB │ gzip: 43.22 kB
+
+✓ built in 379ms
+```
+
+## Clone
+
+```
+git clone https://github.com/bddjr/vite-plugin-singlefile
+cd vite-plugin-singlefile
+npm i
+cd test
+npm i
+cd ..
+npm run build
+```

package/dist/index.d.ts

@@ -0,0 +1,34 @@
+import { PluginOption } from "vite";
+
+//#region src/options.d.ts
+interface Options {
+  /**
+   * Rename index.html
+   */
+  rename?: string;
+  /**
+   * Try inline html used assets, if inlined or not used in JS.
+   * @default true
+   */
+  tryInlineHtmlAssets?: boolean;
+  /**
+   * Remove inlined asset files.
+   * @default true
+   */
+  removeInlinedAssetFiles?: boolean;
+  /**
+   * Try inline html icon, if icon is in public dir.
+   * @default true
+   */
+  tryInlineHtmlPublicIcon?: boolean;
+  /**
+   * Remove inlined html icon files.
+   * @default true
+   */
+  removeInlinedPublicIconFiles?: boolean;
+}
+//#endregion
+//#region src/index.d.ts
+declare function singleFile(opt?: Options): PluginOption;
+//#endregion
+export { Options, singleFile as default, singleFile };

package/dist/index.js

@@ -0,0 +1,169 @@
+import { JSDOM } from "jsdom";
+import path from "path";
+import fs from "fs";
+import svgToTinyDataUri from "mini-svg-data-uri";
+import mime from "mime";
+//#region src/dataurl.ts
+function bufferToDataURL(name, b) {
+	return /\.svg$/i.test(name) ? svgToTinyDataUri(b.toString()) : `data:${mime.getType(name)};base64,${b.toString("base64")}`;
+}
+//#endregion
+//#region src/options.ts
+function getInnerOptions(opt) {
+	opt ||= {};
+	return {
+		rename: opt.rename == null ? void 0 : String(opt.rename),
+		tryInlineHtmlAssets: opt.tryInlineHtmlAssets ?? true,
+		removeInlinedAssetFiles: opt.removeInlinedAssetFiles ?? true,
+		tryInlineHtmlPublicIcon: opt.tryInlineHtmlPublicIcon ?? true,
+		removeInlinedPublicIconFiles: opt.removeInlinedPublicIconFiles ?? true
+	};
+}
+//#endregion
+//#region src/cutPrefix.ts
+function cutPrefix(str, prefix) {
+	return str.startsWith(prefix) ? str.slice(prefix.length) : str;
+}
+//#endregion
+//#region src/index.ts
+function singleFile(opt) {
+	let conf;
+	const innerOptions = getInnerOptions(opt);
+	return {
+		name: "@bddjr/vite-plugin-singlefile",
+		enforce: "post",
+		config(...args) {
+			return setConfig.call(this, innerOptions, ...args);
+		},
+		configResolved(c) {
+			conf = c;
+		},
+		generateBundle(outputOptions, bundle, isWrite) {
+			return generateBundle.call(this, bundle, conf, innerOptions);
+		}
+	};
+}
+function setConfig(opt, config, env) {
+	config.base ??= "./";
+	const build = config.build ??= {};
+	build.cssCodeSplit ??= false;
+	build.assetsInlineLimit ??= () => true;
+	build.modulePreload ?? build.polyfillModulePreload ?? (build.modulePreload = { polyfill: false });
+	if (this.meta.rolldownVersion) {
+		const rolldownOptions = build.rolldownOptions ?? build.rollupOptions ?? (build.rolldownOptions = {});
+		for (const output of [rolldownOptions.output ??= {}].flat(1)) output.codeSplitting ?? output.inlineDynamicImports ?? (output.codeSplitting = false);
+	} else {
+		const rollupOptions = build.rollupOptions ??= {};
+		for (const output of [rollupOptions.output ??= {}].flat(1)) output.inlineDynamicImports ??= true;
+	}
+}
+async function generateBundle(bundle, config, options) {
+	if (options.rename && options.rename != "index.html" && Object.prototype.hasOwnProperty.call(bundle, "index.html") && !Object.prototype.hasOwnProperty.call(bundle, options.rename)) {
+		bundle[options.rename] = bundle["index.html"];
+		bundle[options.rename].fileName = options.rename;
+		delete bundle["index.html"];
+	}
+	const assetsDir = path.posix.join(config.build.assetsDir, "/"), assetsDirWithBase = config.base + assetsDir, assetsHrefSelector = `[href^="${assetsDirWithBase}"]`, assetsSrcSelector = `[src^="${assetsDirWithBase}"]`, 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) {
+		const htmlChunk = bundle[htmlFileName], oldHTML = htmlChunk.source, dom = new JSDOM(oldHTML), document = dom.window.document, scriptElement = document.querySelector(`script[type=module]${assetsSrcSelector}`);
+		if (!scriptElement) continue;
+		const scriptName = scriptElement ? cutPrefix(scriptElement.src, config.base) : "", thisDel = /* @__PURE__ */ new Set();
+		scriptElement.remove();
+		scriptElement.removeAttribute("src");
+		scriptElement.removeAttribute("crossorigin");
+		document.body.appendChild(scriptElement);
+		let allCSS = "";
+		const linkStylesheet = document.querySelectorAll(`link[rel=stylesheet]${assetsHrefSelector}`);
+		for (const element of linkStylesheet) {
+			const name = cutPrefix(element.href, config.base);
+			thisDel.add(name);
+			const cssSource = bundle[name].source;
+			if (cssSource) {
+				for (const name of bundleAssetsNames) if (cssSource.includes(name.slice(assetsDir.length))) globalDoNotDelete.add(name);
+				allCSS += cssSource.replace(/\s*(\/\*[^*]*\*\/)?\s*$/, "");
+			}
+		}
+		if (allCSS) {
+			const e = document.createElement("style");
+			e.innerHTML = allCSS;
+			linkStylesheet[0].before(e);
+			for (const e of linkStylesheet) e.remove();
+		}
+		const assetsDataURL = {};
+		if (options.tryInlineHtmlAssets) for (const element of document.querySelectorAll(assetsSrcSelector)) {
+			const name = cutPrefix(element.src, assetsDirWithBase);
+			if (/\.js$/i.test(name)) continue;
+			if (!Object.prototype.hasOwnProperty.call(assetsDataURL, name)) {
+				const bundleName = assetsDir + name;
+				const a = bundle[bundleName];
+				if (!a) continue;
+				thisDel.add(bundleName);
+				let dataURL;
+				if (Object.prototype.hasOwnProperty.call(globalAssetsDataURL, name)) dataURL = globalAssetsDataURL[name];
+				else globalAssetsDataURL[name] = dataURL = bufferToDataURL(name, Buffer.from(a.source));
+				element.src = dataURL;
+			}
+		}
+		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:";
+				}
+			}
+			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
+					};
+				}
+				const { dataURL, size } = globalPublicFilesCache[iconName];
+				if (element) element.href = dataURL;
+				else {
+					const e = document.head.appendChild(document.createElement("link"));
+					e.rel = "icon";
+					e.href = dataURL;
+				}
+			} catch (e) {
+				if (element) console.error(e);
+			}
+		}
+		thisDel.add(scriptName);
+		let { code } = bundle[scriptName];
+		code = code.replace(/;?\n?$/, "");
+		for (const name of bundleAssetsNames) {
+			const assetName = name.slice(assetsDir.length);
+			if (code.includes(assetName)) {
+				globalDoNotDelete.add(name);
+				delete assetsDataURL[assetName];
+			}
+		}
+		let outputScript = code.replaceAll("<\/script", "<\\/script");
+		if (/\b__VITE_PRELOAD__\b/.test(code)) outputScript = "var __VITE_PRELOAD__;" + outputScript;
+		scriptElement.innerHTML = outputScript;
+		htmlChunk.source = dom.serialize();
+		for (const name of thisDel) globalDelete.add(name);
+	}
+	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);
+	}
+}
+//#endregion
+export { singleFile as default, singleFile };

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@bddjr/vite-plugin-singlefile",
+  "version": "3.0.0",
+  "author": "bddjr",
+  "license": "MIT",
+  "description": "Embed all assets into dist/index.html",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "scripts": {
+    "build": "rimraf dist && tsc && node build.js && cd test && node --run build",
+    "prepublishOnly": "node --run build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/bddjr/vite-plugin-singlefile.git"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "keywords": [
+    "vite-plugin",
+    "vite",
+    "plugin",
+    "SFA",
+    "single-file",
+    "singlefile",
+    "single",
+    "gzip",
+    "inline",
+    "frontend",
+    "front-end",
+    "js",
+    "javascript",
+    "css",
+    "class",
+    "rolldown",
+    "rolldown-vite",
+    "rollup",
+    "vite-plugin-singlefile"
+  ],
+  "dependencies": {
+    "@types/node": "*",
+    "jsdom": ">=28.1.0",
+    "mime": ">=4.1.0",
+    "mini-svg-data-uri": ">=1.4.4",
+    "vite": ">=3.0.0"
+  },
+  "devDependencies": {
+    "@bddjr/rimraf": "^0.1.0",
+    "@types/jsdom": ">=28.0.1",
+    "@types/node": "^22.19.15",
+    "rolldown": ">=1.0.0-rc.12",
+    "rolldown-plugin-dts": "^0.23.2",
+    "rollup": ">=4.60.0",
+    "typescript": ">=6.0.2",
+    "vite": ">=8.0.0"
+  }
+}