@vizejs/unplugin 0.58.0 → 0.60.0

package/README.md

@@ -16,8 +16,10 @@ Rspack intentionally uses the dedicated `@vizejs/rspack-plugin` path instead of
 
 ## Installation
 
+Install `vp` once from the [Vite+ install guide](https://viteplus.dev/guide/install), then add the package:
+
 ```bash
-npm install @vizejs/unplugin
+vp install @vizejs/unplugin
 ```
 
 ## Usage

package/dist/esbuild.d.mts

@@ -0,0 +1,7 @@
+import { t as VizeUnpluginOptions } from "./types-o6z7QlYN.mjs";
+import * as _$unplugin from "unplugin";
+
+//#region src/esbuild.d.ts
+declare const _default: (options?: VizeUnpluginOptions | undefined) => _$unplugin.EsbuildPlugin;
+//#endregion
+export { _default as default };

package/dist/esbuild.mjs

@@ -0,0 +1,5 @@
+import { t as vizeUnplugin } from "./unplugin-8tCaeF-H.mjs";
+//#region src/esbuild.ts
+var esbuild_default = vizeUnplugin.esbuild;
+//#endregion
+export { esbuild_default as default };

package/dist/index.d.mts

@@ -0,0 +1,7 @@
+import { t as VizeUnpluginOptions } from "./types-o6z7QlYN.mjs";
+import * as _$unplugin from "unplugin";
+
+//#region src/unplugin.d.ts
+declare const vizeUnplugin: _$unplugin.UnpluginInstance<VizeUnpluginOptions | undefined, boolean>;
+//#endregion
+export { type VizeUnpluginOptions, vizeUnplugin as default, vizeUnplugin };

package/dist/index.mjs

@@ -0,0 +1,2 @@
+import { t as vizeUnplugin } from "./unplugin-8tCaeF-H.mjs";
+export { vizeUnplugin as default, vizeUnplugin };

package/dist/rollup.d.mts

@@ -0,0 +1,7 @@
+import { t as VizeUnpluginOptions } from "./types-o6z7QlYN.mjs";
+import * as _$unplugin from "unplugin";
+
+//#region src/rollup.d.ts
+declare const _default: (options?: VizeUnpluginOptions | undefined) => _$unplugin.RollupPlugin<any> | _$unplugin.RollupPlugin<any>[];
+//#endregion
+export { _default as default };

package/dist/rollup.mjs

@@ -0,0 +1,5 @@
+import { t as vizeUnplugin } from "./unplugin-8tCaeF-H.mjs";
+//#region src/rollup.ts
+var rollup_default = vizeUnplugin.rollup;
+//#endregion
+export { rollup_default as default };

package/dist/types-o6z7QlYN.d.mts

@@ -0,0 +1,14 @@
+//#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;
+  customRenderer?: boolean;
+  root?: string;
+  debug?: boolean;
+}
+//#endregion
+export { VizeUnpluginOptions as t };

package/dist/unplugin-8tCaeF-H.mjs

@@ -0,0 +1,383 @@
+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(?:=["']([^"']+)["'])?/);
+		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;";
+	}
+	if (hasDelegatedStyles(compiled) && filePath) {
+		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)) output = `
+export const __vize_css__ = ${JSON.stringify(compiled.css)};
+const __vize_css_id__ = ${JSON.stringify(`vize-style-${compiled.scopeId}`)};
+(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);
+	}
+	return `${hoisted.length > 0 ? `${hoisted.join("\n")}\n\n` : ""}[${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.customRenderer ? "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,
+		customRenderer: options.customRenderer,
+		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, rawQuery = ""] = id.split("?", 2);
+	const params = new URLSearchParams(rawQuery);
+	const filename = params.get("vize-file") ?? path;
+	const moduleValue = params.has("module") ? params.get("module") || true : false;
+	const indexValue = params.get("index");
+	return {
+		filename,
+		path,
+		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")
+		}
+	};
+}
+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 = 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,
+		customRenderer: rawOptions.customRenderer ?? 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 = /* @__PURE__ */ new Set();
+	for (const plugin of compiler.options.plugins ?? []) {
+		const definitions = plugin.definitions;
+		if (!definitions) continue;
+		for (const key of Object.keys(definitions)) 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 = /* @__PURE__ */ 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 transformed = await stripTypeScript(id, generateOutput(compiled, {
+				isProduction: options.isProduction,
+				isDev: false,
+				filePath: id
+			}), 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 as t };

package/dist/webpack.d.mts

@@ -0,0 +1,6 @@
+import { t as VizeUnpluginOptions } from "./types-o6z7QlYN.mjs";
+
+//#region src/webpack.d.ts
+declare const _default: (options?: VizeUnpluginOptions | undefined) => undefined;
+//#endregion
+export { _default as default };

package/dist/webpack.mjs

@@ -0,0 +1,5 @@
+import { t as vizeUnplugin } from "./unplugin-8tCaeF-H.mjs";
+//#region src/webpack.ts
+var webpack_default = vizeUnplugin.webpack;
+//#endregion
+export { webpack_default as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vizejs/unplugin",
-  "version": "0.58.0",
+  "version": "0.60.0",
   "description": "Experimental unplugin-based Vue SFC integration for rollup, webpack, and esbuild powered by Vize",
   "keywords": [
     "compiler",
@@ -51,7 +51,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@vizejs/native": "0.58.0",
+    "@vizejs/native": "0.60.0",
     "oxc-transform": "0.56.5",
     "unplugin": "3.0.0"
   },