@vizejs/unplugin 0.24.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 ubugeeei
+
+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,63 @@
+# @vizejs/unplugin
+
+Experimental unplugin-based Vue SFC integration powered by [Vize](https://github.com/ubugeeei/vize).
+
+> [!WARNING]
+> `@vizejs/unplugin` is still unstable.
+> `@vizejs/vite-plugin` remains the recommended and best-tested bundler integration today.
+
+`@vizejs/unplugin` provides experimental support for:
+
+- `rollup`
+- `webpack`
+- `esbuild`
+
+Rspack intentionally uses the dedicated `@vizejs/rspack-plugin` path instead of an `unplugin` export because its loader chain, `experiments.css`, and HMR behavior need Rspack-specific handling.
+
+## Installation
+
+```bash
+npm install @vizejs/unplugin
+```
+
+## Usage
+
+### rollup
+
+```javascript
+import vize from "@vizejs/unplugin/rollup";
+
+export default {
+  plugins: [vize()],
+};
+```
+
+### webpack
+
+```javascript
+import Vize from "@vizejs/unplugin/webpack";
+
+export default {
+  plugins: [Vize()],
+};
+```
+
+### esbuild
+
+```javascript
+import { build } from "esbuild";
+import vize from "@vizejs/unplugin/esbuild";
+
+await build({
+  entryPoints: ["src/main.ts"],
+  bundle: true,
+  plugins: [vize()],
+});
+```
+
+## Caveats
+
+- Vite is still the recommended integration if you need the most complete behavior today.
+- CSS Modules and preprocessors depend on the host bundler CSS pipeline and are more likely to change than the Vite path.
+- If your bundler inlines the Vue runtime, configure the usual Vue compile-time feature flags for that bundler.
+- Test carefully before depending on this package in production.

package/dist/esbuild.d.ts

@@ -0,0 +1,8 @@
+import { VizeUnpluginOptions } from "./types-K4_NiprT.js";
+import * as esbuild3 from "esbuild";
+
+//#region src/esbuild.d.ts
+declare const _default: (options?: VizeUnpluginOptions | undefined) => esbuild3.Plugin;
+
+//#endregion
+export { _default as default };

package/dist/esbuild.js

@@ -0,0 +1,7 @@
+import { vizeUnplugin } from "./unplugin-uEvVDDGd.js";
+
+//#region src/esbuild.ts
+var esbuild_default = vizeUnplugin.esbuild;
+
+//#endregion
+export { esbuild_default as default };

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+import { VizeUnpluginOptions } from "./types-K4_NiprT.js";
+import * as unplugin7 from "unplugin";
+
+//#region src/unplugin.d.ts
+declare const vizeUnplugin: unplugin7.UnpluginInstance<VizeUnpluginOptions | undefined, boolean>;
+
+//#endregion
+export { VizeUnpluginOptions, vizeUnplugin as default, vizeUnplugin };

package/dist/index.js

@@ -0,0 +1,3 @@
+import { vizeUnplugin } from "./unplugin-uEvVDDGd.js";
+
+export { vizeUnplugin as default, vizeUnplugin };

package/dist/rollup.d.ts

@@ -0,0 +1,9 @@
+import { VizeUnpluginOptions } from "./types-K4_NiprT.js";
+import * as rollup5 from "rollup";
+import * as rollup6 from "rollup";
+
+//#region src/rollup.d.ts
+declare const _default: (options?: VizeUnpluginOptions | undefined) => rollup5.Plugin<any> | rollup6.Plugin<any>[];
+
+//#endregion
+export { _default as default };

package/dist/rollup.js

@@ -0,0 +1,7 @@
+import { vizeUnplugin } from "./unplugin-uEvVDDGd.js";
+
+//#region src/rollup.ts
+var rollup_default = vizeUnplugin.rollup;
+
+//#endregion
+export { rollup_default as default };

package/dist/types-K4_NiprT.d.ts

@@ -0,0 +1,13 @@
+//#region src/types.d.ts
+
+interface VizeUnpluginOptions {
+  include?: string | RegExp | Array<string | RegExp>;
+  exclude?: string | RegExp | Array<string | RegExp>;
+  isProduction?: boolean;
+  ssr?: boolean;
+  sourceMap?: boolean;
+  vapor?: boolean;
+  root?: string;
+  debug?: boolean;
+} //#endregion
+export { VizeUnpluginOptions };

package/dist/unplugin-uEvVDDGd.js

@@ -0,0 +1,395 @@
+import fs from "node:fs";
+import { createUnplugin } from "unplugin";
+import { createHash } from "node:crypto";
+import * as native from "@vizejs/native";
+import path from "node:path";
+import { transform } from "oxc-transform";
+
+//#region src/filter.ts
+function createFilter(include, exclude) {
+	const includePatterns = include ? Array.isArray(include) ? include : [include] : [/\.vue$/];
+	const excludePatterns = exclude ? Array.isArray(exclude) ? exclude : [exclude] : [/node_modules/];
+	return (id) => {
+		const matchInclude = includePatterns.some((pattern) => typeof pattern === "string" ? id.includes(pattern) : pattern.test(id));
+		const matchExclude = excludePatterns.some((pattern) => typeof pattern === "string" ? id.includes(pattern) : pattern.test(id));
+		return matchInclude && !matchExclude;
+	};
+}
+
+//#endregion
+//#region src/style.ts
+const PREPROCESSOR_LANGS = new Set([
+	"scss",
+	"sass",
+	"less",
+	"stylus",
+	"styl"
+]);
+function needsPreprocessor(block) {
+	return block.lang !== null && PREPROCESSOR_LANGS.has(block.lang);
+}
+function isCssModule(block) {
+	return block.module !== false;
+}
+function hasDelegatedStyles(compiled) {
+	return compiled.styles.some((style) => needsPreprocessor(style) || isCssModule(style));
+}
+function generateScopeId(filename, root, isProduction, source) {
+	const relative = path.relative(root, filename).replace(/^(\.\.[/\\])+/, "").replace(/\\/g, "/");
+	const input = isProduction ? `${relative}\n${source.replace(/\r\n/g, "\n")}` : relative;
+	return createHash("sha256").update(input).digest("hex").slice(0, 8);
+}
+function extractStyleBlocks(source) {
+	const blocks = [];
+	const styleRegex = /<style([^>]*)>([\s\S]*?)<\/style>/gi;
+	let match = null;
+	let index = 0;
+	while ((match = styleRegex.exec(source)) !== null) {
+		const attrs = match[1];
+		const content = match[2];
+		const src = attrs.match(/\bsrc=["']([^"']+)["']/)?.[1] ?? null;
+		const lang = attrs.match(/\blang=["']([^"']+)["']/)?.[1] ?? null;
+		const scoped = /\bscoped\b/.test(attrs);
+		const moduleMatch = attrs.match(/\bmodule(?:=["']([^"']+)["'])?\b/);
+		const moduleValue = moduleMatch ? moduleMatch[1] || true : false;
+		blocks.push({
+			content,
+			src,
+			lang,
+			scoped,
+			module: moduleValue,
+			index
+		});
+		index++;
+	}
+	return blocks;
+}
+function supportsTemplateOnlyHmr(output) {
+	return /(?:^|\n)(?:_sfc_main|__sfc__)\.render\s*=\s*render\b/m.test(output);
+}
+function generateOutput(compiled, options) {
+	const { isProduction, isDev, extractCss, filePath } = options;
+	let output = compiled.code;
+	const exportDefaultRegex = /^export default /m;
+	const hasExportDefault = exportDefaultRegex.test(output);
+	const hasNamedRenderExport = /^export function render\b/m.test(output);
+	const hasSfcMainDefined = /\bconst\s+_sfc_main\s*=/.test(output);
+	if (hasExportDefault && !hasSfcMainDefined) {
+		output = output.replace(exportDefaultRegex, "const _sfc_main = ");
+		if (compiled.hasScoped) output += `\n_sfc_main.__scopeId = "data-v-${compiled.scopeId}";`;
+		output += "\nexport default _sfc_main;";
+	} else if (hasExportDefault && hasSfcMainDefined && compiled.hasScoped) output = output.replace(/^export default _sfc_main/m, `_sfc_main.__scopeId = "data-v-${compiled.scopeId}";\nexport default _sfc_main`);
+	else if (!hasExportDefault && !hasSfcMainDefined && hasNamedRenderExport) {
+		output += "\nconst _sfc_main = {};";
+		if (compiled.hasScoped) output += `\n_sfc_main.__scopeId = "data-v-${compiled.scopeId}";`;
+		output += "\n_sfc_main.render = render;";
+		output += "\nexport default _sfc_main;";
+	}
+	const useDelegatedStyles = hasDelegatedStyles(compiled) && filePath;
+	if (useDelegatedStyles) {
+		const styleImports = [];
+		const cssModuleImports = [];
+		for (const block of compiled.styles) {
+			const lang = block.lang ?? "css";
+			const params = new URLSearchParams();
+			params.set("vue", "");
+			params.set("type", "style");
+			params.set("index", String(block.index));
+			params.set("lang", lang);
+			if (block.scoped) params.set("scoped", `data-v-${compiled.scopeId}`);
+			const importUrl = `${filePath}?${params.toString()}`;
+			if (isCssModule(block)) {
+				const bindingName = typeof block.module === "string" ? block.module : "$style";
+				const moduleParams = new URLSearchParams(params);
+				moduleParams.set("module", typeof block.module === "string" ? block.module : "");
+				cssModuleImports.push(`import ${bindingName} from ${JSON.stringify(`${filePath}?${moduleParams.toString()}`)};`);
+			} else styleImports.push(`import ${JSON.stringify(importUrl)};`);
+		}
+		const allImports = [...styleImports, ...cssModuleImports].join("\n");
+		if (allImports) output = `${allImports}\n${output}`;
+		if (cssModuleImports.length > 0) {
+			const cssModuleSetup = compiled.styles.filter((block) => isCssModule(block)).map((block) => {
+				const bindingName = typeof block.module === "string" ? block.module : "$style";
+				return `_sfc_main.__cssModules = _sfc_main.__cssModules || {};\n_sfc_main.__cssModules[${JSON.stringify(bindingName)}] = ${bindingName};`;
+			}).join("\n");
+			output = output.replace(/^export default _sfc_main;/m, `${cssModuleSetup}\nexport default _sfc_main;`);
+		}
+	} else if (compiled.css && !(isProduction && extractCss)) {
+		const cssCode = JSON.stringify(compiled.css);
+		const cssId = JSON.stringify(`vize-style-${compiled.scopeId}`);
+		output = `
+export const __vize_css__ = ${cssCode};
+const __vize_css_id__ = ${cssId};
+(function() {
+  if (typeof document !== "undefined") {
+    let style = document.getElementById(__vize_css_id__);
+    if (!style) {
+      style = document.createElement("style");
+      style.id = __vize_css_id__;
+      style.textContent = __vize_css__;
+      document.head.appendChild(style);
+    } else {
+      style.textContent = __vize_css__;
+    }
+  }
+})();
+${output}`;
+	}
+	if (!isProduction && isDev && hasExportDefault && supportsTemplateOnlyHmr(output)) output += "";
+	return output;
+}
+function wrapScopedPreprocessorStyle(content, scoped, lang) {
+	if (!scoped || !lang || lang === "css") return content;
+	const lines = content.split("\n");
+	const hoisted = [];
+	const body = [];
+	for (const line of lines) {
+		const trimmed = line.trimStart();
+		if (trimmed.startsWith("@use ") || trimmed.startsWith("@forward ") || trimmed.startsWith("@import ")) {
+			hoisted.push(line);
+			continue;
+		}
+		body.push(line);
+	}
+	const hoistedContent = hoisted.length > 0 ? `${hoisted.join("\n")}\n\n` : "";
+	return `${hoistedContent}[${scoped}] {\n${body.join("\n")}\n}`;
+}
+
+//#endregion
+//#region src/compiler.ts
+const { compileSfc } = native;
+function buildSignature(options) {
+	return [
+		options.isProduction ? "1" : "0",
+		options.ssr ? "1" : "0",
+		options.vapor ? "1" : "0",
+		options.sourceMap ? "1" : "0",
+		options.root
+	].join(":");
+}
+function buildSourceHash(source) {
+	return createHash("sha256").update(source).digest("hex");
+}
+function compileVueModule(filePath, source, options, cache) {
+	const sourceHash = buildSourceHash(source);
+	const signature = buildSignature(options);
+	const cached = cache.get(filePath);
+	if (cached && cached.sourceHash === sourceHash && cached.signature === signature) return {
+		compiled: cached.compiled,
+		warnings: []
+	};
+	const scopeId = generateScopeId(filePath, options.root, options.isProduction, source);
+	const hasScoped = /<style[^>]*\bscoped\b/.test(source);
+	const result = compileSfc(source, {
+		filename: filePath,
+		sourceMap: options.sourceMap,
+		ssr: options.ssr,
+		vapor: options.vapor,
+		scopeId: hasScoped ? `data-v-${scopeId}` : void 0
+	});
+	if (result.errors.length > 0) throw new Error(result.errors.join("\n"));
+	const compiled = {
+		code: result.code,
+		css: result.css,
+		scopeId,
+		hasScoped,
+		templateHash: result.templateHash,
+		styleHash: result.styleHash,
+		scriptHash: result.scriptHash,
+		styles: extractStyleBlocks(source)
+	};
+	cache.set(filePath, {
+		compiled,
+		sourceHash,
+		signature
+	});
+	return {
+		compiled,
+		warnings: result.warnings
+	};
+}
+
+//#endregion
+//#region src/request.ts
+const STYLE_MARKER = ".__vize_style_";
+function isVueFile(id) {
+	return id.endsWith(".vue");
+}
+function isVueStyleRequest(id) {
+	const { query } = parseVueRequest(id);
+	return query.vue && query.type === "style";
+}
+function isVirtualStyleId(id) {
+	return id.includes(STYLE_MARKER);
+}
+function parseVueRequest(id) {
+	const [path$1, rawQuery = ""] = id.split("?", 2);
+	const params = new URLSearchParams(rawQuery);
+	const filename = params.get("vize-file") ?? path$1;
+	const moduleValue = params.has("module") ? params.get("module") || true : false;
+	const indexValue = params.get("index");
+	const query = {
+		vue: params.has("vue"),
+		type: params.get("type"),
+		index: indexValue === null ? null : Number.parseInt(indexValue, 10),
+		lang: params.get("lang"),
+		module: moduleValue,
+		scoped: params.get("scoped"),
+		vizeFile: params.get("vize-file")
+	};
+	return {
+		filename,
+		path: path$1,
+		query
+	};
+}
+function createVirtualStyleId(id) {
+	const { filename, query } = parseVueRequest(id);
+	const index = query.index ?? 0;
+	const lang = query.lang ?? "css";
+	const suffix = query.module !== false ? `.module.${lang}` : `.${lang}`;
+	const params = new URLSearchParams();
+	params.set("vue", "");
+	params.set("type", "style");
+	params.set("index", String(index));
+	params.set("lang", lang);
+	params.set("vize-file", filename);
+	if (query.scoped) params.set("scoped", query.scoped);
+	if (query.module !== false) params.set("module", typeof query.module === "string" ? query.module : "");
+	return `${filename}${STYLE_MARKER}${index}${suffix}?${params.toString()}`;
+}
+
+//#endregion
+//#region src/strip-types.ts
+function formatErrorMessage(error) {
+	const parts = [error.message];
+	if (error.helpMessage) parts.push(error.helpMessage);
+	if (error.codeframe) parts.push(error.codeframe);
+	return parts.join("\n");
+}
+async function stripTypeScript(filePath, code, sourceMap) {
+	const result = await transform(filePath, code, {
+		lang: "ts",
+		sourcemap: sourceMap,
+		sourceType: "module"
+	});
+	if (result.errors.length > 0) throw new Error(result.errors.map(formatErrorMessage).join("\n\n"));
+	return {
+		code: result.code,
+		map: result.map ?? null
+	};
+}
+
+//#endregion
+//#region src/unplugin.ts
+function normalizeOptions(rawOptions = {}) {
+	const isProduction = rawOptions.isProduction ?? process.env.NODE_ENV === "production";
+	return {
+		include: rawOptions.include,
+		exclude: rawOptions.exclude,
+		isProduction,
+		ssr: rawOptions.ssr ?? false,
+		sourceMap: rawOptions.sourceMap ?? !isProduction,
+		vapor: rawOptions.vapor ?? false,
+		root: rawOptions.root ?? process.cwd(),
+		debug: rawOptions.debug ?? false
+	};
+}
+function createVueDefineMap(isProduction) {
+	return {
+		__VUE_OPTIONS_API__: JSON.stringify(true),
+		__VUE_PROD_DEVTOOLS__: JSON.stringify(!isProduction),
+		__VUE_PROD_HYDRATION_MISMATCH_DETAILS__: JSON.stringify(!isProduction)
+	};
+}
+function injectWebpackVueDefines(compiler, isProduction) {
+	const { DefinePlugin } = compiler.webpack;
+	const existingDefines = new Set();
+	for (const plugin of compiler.options.plugins ?? []) {
+		const definitions$1 = plugin.definitions;
+		if (!definitions$1) continue;
+		for (const key of Object.keys(definitions$1)) existingDefines.add(key);
+	}
+	const definitions = createVueDefineMap(isProduction);
+	const missingDefinitions = {};
+	for (const [key, value] of Object.entries(definitions)) if (!existingDefines.has(key)) missingDefinitions[key] = value;
+	if (Object.keys(missingDefinitions).length > 0) new DefinePlugin(missingDefinitions).apply(compiler);
+}
+async function loadStyleBlock(id, options, cache) {
+	const request = parseVueRequest(id);
+	const index = request.query.index ?? -1;
+	if (index < 0) return "";
+	let compiled = cache.get(request.filename)?.compiled;
+	if (!compiled && fs.existsSync(request.filename)) {
+		const source = fs.readFileSync(request.filename, "utf8");
+		compiled = compileVueModule(request.filename, source, options, cache).compiled;
+	}
+	const block = compiled?.styles[index];
+	if (!block) return "";
+	return wrapScopedPreprocessorStyle(block.content, request.query.scoped, block.lang);
+}
+const vizeUnplugin = createUnplugin((rawOptions = {}) => {
+	const options = normalizeOptions(rawOptions);
+	const filter = createFilter(options.include, options.exclude);
+	const cache = new Map();
+	return {
+		name: "unplugin-vize",
+		resolveId(id) {
+			if (isVueStyleRequest(id)) return createVirtualStyleId(id);
+			return null;
+		},
+		loadInclude(id) {
+			return isVirtualStyleId(id);
+		},
+		async load(id) {
+			if (!isVirtualStyleId(id)) return null;
+			return {
+				code: await loadStyleBlock(id, options, cache),
+				map: null
+			};
+		},
+		transformInclude(id) {
+			const request = parseVueRequest(id);
+			return !request.query.vue && isVueFile(request.filename) && filter(request.filename);
+		},
+		async transform(code, id) {
+			if (!isVueFile(id) || !filter(id)) return null;
+			const { compiled, warnings } = compileVueModule(id, code, options, cache);
+			for (const warning of warnings) this.warn(`[vize] ${warning}`);
+			const generated = generateOutput(compiled, {
+				isProduction: options.isProduction,
+				isDev: false,
+				filePath: id
+			});
+			const transformed = await stripTypeScript(id, generated, options.sourceMap);
+			return {
+				code: transformed.code,
+				map: transformed.map
+			};
+		},
+		watchChange(id) {
+			if (isVueFile(id)) cache.delete(id);
+		},
+		webpack(compiler) {
+			injectWebpackVueDefines(compiler, options.isProduction);
+		},
+		esbuild: {
+			onResolveFilter: /\.vue(?:$|\?)/,
+			onLoadFilter: /\.vue(?:$|\?)/,
+			loader(_code, id) {
+				const request = parseVueRequest(id);
+				if (request.query.type === "style") return request.query.module !== false ? "local-css" : "css";
+				return "js";
+			},
+			config(buildOptions) {
+				buildOptions.define = {
+					...createVueDefineMap(options.isProduction),
+					...buildOptions.define
+				};
+			}
+		}
+	};
+});
+
+//#endregion
+export { vizeUnplugin };

package/dist/webpack.d.ts

@@ -0,0 +1,8 @@
+import { VizeUnpluginOptions } from "./types-K4_NiprT.js";
+import * as webpack1 from "webpack";
+
+//#region src/webpack.d.ts
+declare const _default: (options?: VizeUnpluginOptions | undefined) => webpack1.WebpackPluginInstance;
+
+//#endregion
+export { _default as default };

package/dist/webpack.js

@@ -0,0 +1,7 @@
+import { vizeUnplugin } from "./unplugin-uEvVDDGd.js";
+
+//#region src/webpack.ts
+var webpack_default = vizeUnplugin.webpack;
+
+//#endregion
+export { webpack_default as default };

package/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "@vizejs/unplugin",
+  "version": "0.24.0",
+  "description": "Experimental unplugin-based Vue SFC integration for rollup, webpack, and esbuild powered by Vize",
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./esbuild": {
+      "types": "./dist/esbuild.d.ts",
+      "import": "./dist/esbuild.js",
+      "default": "./dist/esbuild.js"
+    },
+    "./rollup": {
+      "types": "./dist/rollup.d.ts",
+      "import": "./dist/rollup.js",
+      "default": "./dist/rollup.js"
+    },
+    "./webpack": {
+      "types": "./dist/webpack.d.ts",
+      "import": "./dist/webpack.js",
+      "default": "./dist/webpack.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "unplugin",
+    "rollup",
+    "webpack",
+    "esbuild",
+    "vue",
+    "plugin",
+    "compiler",
+    "native",
+    "fast"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ubugeeei/vize",
+    "directory": "npm/unplugin-vize"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "oxc-transform": "^0.116.0",
+    "unplugin": "^3.0.0",
+    "@vizejs/native": "0.24.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "esbuild": "^0.25.11",
+    "rollup": "^4.52.4",
+    "tsdown": "^0.9.0",
+    "tsx": "^4.21.0",
+    "typescript": "~5.6.0",
+    "vue": "3.6.0-beta.1",
+    "webpack": "^5.101.3"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "dev": "tsdown --watch",
+    "lint": "oxlint --deny-warnings --type-aware --tsconfig tsconfig.json",
+    "lint:fix": "oxlint --type-aware --tsconfig tsconfig.json --fix",
+    "fmt": "oxfmt --write src tsdown.config.ts",
+    "fmt:check": "oxfmt src tsdown.config.ts",
+    "test": "node --import tsx --test src/*.test.ts src/**/*.test.ts",
+    "test:update": "node --import tsx --test --test-update-snapshots src/*.test.ts src/**/*.test.ts"
+  }
+}