@vizejs/vite-plugin-musea 0.327.0 → 0.332.0

package/dist/index.mjs

@@ -1102,6 +1102,108 @@ function resolveComponentSourcePath(art, artPath, sourceRoots) {
 	return componentPath ? resolveInsideAny(sourceRoots, componentPath, "component path") : null;
 }
 //#endregion
+//#region src/art-module-vue2.ts
+/**
+* Legacy Vue 2 variant emission.
+*
+* Vue 2 has no `openBlock`/`createElementBlock` runtime, so the compiled Vue 3
+* render functions the SFC pipeline produces cannot load there. Vue 2 galleries
+* keep the runtime-compiled `template:` string they always had — the TypeScript
+* fix in #3857 applies to Vue 3, which is what `.art.vue` with
+* `<script setup lang="ts">` targets.
+*/
+function escapeTemplateLiteral(str) {
+	return str.replace(/\\/g, "\\\\").replace(/`/g, "\\`").replace(/\$/g, "\\$");
+}
+function emitLegacyVariant(context) {
+	const { variantComponentName, variantName, template, componentTagName, componentBindingName, scriptSetup, hasSetup, isolatedSetup, setupReturn, importDeclaresName } = context;
+	const escapedTemplate = escapeTemplateLiteral(template);
+	const fullTemplate = `<div data-variant="${escapeTemplateLiteral(escapeHtml(variantName))}">${escapedTemplate}</div>`;
+	const componentNames = /* @__PURE__ */ new Map();
+	if (componentTagName) componentNames.set(componentTagName, componentBindingName);
+	if (scriptSetup) {
+		for (const name of scriptSetup.returnNames) if (/^[A-Z]/.test(name) && scriptSetup.imports.some((imp) => importDeclaresName(imp, name))) componentNames.set(name, name);
+	}
+	const components = componentNames.size > 0 ? `  components: { ${[...componentNames].map(([name, value]) => `${JSON.stringify(name)}: ${value}`).join(", ")} },\n` : "";
+	if (scriptSetup && hasSetup && isolatedSetup) return `
+export const ${variantComponentName} = __museaDefineComponent({
+  name: '${variantComponentName}',
+${components}  setup() {
+${scriptSetup.setupBody.join("\n")}
+    return ${setupReturn};
+  },
+  template: \`${fullTemplate}\`,
+});
+`;
+	if (scriptSetup && hasSetup) return `
+export const ${variantComponentName} = __museaDefineComponent({
+  name: '${variantComponentName}',
+${components}  setup() {
+    return __museaSharedSetup;
+  },
+  template: \`${fullTemplate}\`,
+});
+`;
+	return `
+export const ${variantComponentName} = {
+  name: '${variantComponentName}',
+${components}  template: \`${fullTemplate}\`,
+};
+`;
+}
+//#endregion
+//#region src/art-component.ts
+/**
+* Resolve which component an art file demonstrates, and under what tag.
+*
+* Shared by the art module and by the per-variant SFC compiler (#3857) so both
+* agree on the import path, the tag `<Self>` expands to, and the binding name.
+* The parsed `<script setup>` is passed in rather than parsed here, so this
+* module does not have to import back from `art-module.ts`.
+*/
+function componentNameFromSource$1(source) {
+	const withoutQuery = source.split(/[?#]/, 1)[0] || source;
+	const filename = path.basename(withoutQuery);
+	const extension = path.extname(filename);
+	const name = toPascalCase(extension ? filename.slice(0, -extension.length) : filename);
+	return name === "Variant" ? "MuseaComponent" : name;
+}
+function resolveArtComponent(art, filePath, scriptSetup, options = {}) {
+	let componentImportPath;
+	let componentTagName;
+	let componentBindingName = "__MuseaComponent";
+	const defineArtComponentName = scriptSetup?.defineArtComponentName;
+	const defineArtComponentSource = scriptSetup?.defineArtComponentSource;
+	if (art.isInline && art.componentPath) {
+		componentImportPath = options.root ? resolveComponentSourcePath(art, filePath, allowedSourceRoots(options.root, options.scanRoots ?? [])) ?? void 0 : art.componentPath;
+		componentTagName = "MuseaComponent";
+	} else if (defineArtComponentSource || art.metadata.component) {
+		const componentSource = defineArtComponentSource ?? art.metadata.component;
+		if (componentSource) {
+			const sourceArt = componentSource === art.metadata.component ? art : {
+				...art,
+				metadata: {
+					...art.metadata,
+					component: componentSource
+				}
+			};
+			componentImportPath = options.root ? resolveComponentSourcePath(sourceArt, filePath, allowedSourceRoots(options.root, options.scanRoots ?? [])) ?? void 0 : path.isAbsolute(componentSource) ? componentSource : path.resolve(path.dirname(filePath), componentSource);
+		}
+		componentTagName = defineArtComponentName ?? (art.metadata.component ? componentNameFromSource$1(art.metadata.component) : "MuseaComponent");
+		componentBindingName = componentTagName;
+	}
+	return {
+		componentImportPath,
+		componentTagName,
+		componentBindingName
+	};
+}
+/** Expand `<Self>` in a variant template to the resolved component tag. */
+function expandSelfTag(template, componentTagName) {
+	if (!componentTagName) return template;
+	return template.replace(/<Self(?=[\s/>])/g, `<${componentTagName}`).replace(/<\/Self\s*>/g, `</${componentTagName}>`);
+}
+//#endregion
 //#region src/art-module.ts
 /**
 * Art module generation for Musea.
@@ -1128,9 +1230,6 @@ function resolveRelativeSpecifier(specifier, artDir) {
 function rewriteRelativeImportStatement(statement, artDir) {
 	return statement.replace(/\bfrom\s+(['"])([^'"]+)\1/g, (_match, quote, specifier) => `from ${quote}${resolveRelativeSpecifier(specifier, artDir)}${quote}`).replace(/^(\s*import\s+)(['"])([^'"]+)\2(\s*;?\s*)$/s, (_match, prefix, quote, specifier, suffix) => `${prefix}${quote}${resolveRelativeSpecifier(specifier, artDir)}${quote}${suffix}`);
 }
-function escapeTemplateLiteral(str) {
-	return str.replace(/\\/g, "\\\\").replace(/`/g, "\\`").replace(/\$/g, "\\$");
-}
 function countCharBalance(source, openChar, closeChar) {
 	let balance = 0;
 	for (const char of source) if (char === openChar) balance++;
@@ -1360,10 +1459,12 @@ function generateArtModule(art, filePath, options = {}) {
 		componentTagName = defineArtComponentName ?? (art.metadata.component ? componentNameFromSource(art.metadata.component) : "MuseaComponent");
 		componentBindingName = componentTagName;
 	}
+	const hasSetupBody = scriptSetup?.setupBody.some((line) => line.trim().length > 0) ?? false;
+	const hasSetup = !!scriptSetup && (hasSetupBody || scriptSetup.returnNames.length > 0);
 	let code = `
 // Auto-generated module for: ${path.basename(filePath)}
-import { defineComponent as __museaDefineComponent } from 'vue';
 `;
+	if (options.vueVersion === 2 && hasSetup) code += `import { defineComponent as __museaDefineComponent } from 'vue';\n`;
 	if (scriptSetup) {
 		const artDir = path.dirname(filePath);
 		for (const imp of scriptSetup.imports) {
@@ -1380,8 +1481,6 @@ export const metadata = ${JSON.stringify(art.metadata)};
 export const variants = ${JSON.stringify(art.variants)};
 export const __styles__ = ${JSON.stringify(art.styleBlocks ?? [])};
 `;
-	const hasSetupBody = scriptSetup?.setupBody.some((line) => line.trim().length > 0) ?? false;
-	const hasSetup = !!scriptSetup && (hasSetupBody || scriptSetup.returnNames.length > 0);
 	const setupReturn = `{ ${scriptSetup?.returnNames.join(", ") ?? ""} }`;
 	const isolatedSetup = art.scriptSetupIsolated !== false;
 	if (scriptSetup && hasSetup && !isolatedSetup) code += `
@@ -1392,46 +1491,26 @@ ${scriptSetup.setupBody.join("\n")}
 `;
 	for (const variant of art.variants) {
 		const variantComponentName = toPascalCase(variant.name);
-		let template = variant.template;
-		if (componentTagName) template = template.replace(/<Self/g, `<${componentTagName}`).replace(/<\/Self>/g, `</${componentTagName}>`);
-		const escapedTemplate = escapeTemplateLiteral(template);
-		const fullTemplate = `<div data-variant="${escapeTemplateLiteral(escapeHtml(variant.name))}">${escapedTemplate}</div>`;
-		const componentNames = /* @__PURE__ */ new Map();
-		if (componentTagName) componentNames.set(componentTagName, componentBindingName);
-		if (scriptSetup) {
-			for (const name of scriptSetup.returnNames) if (/^[A-Z]/.test(name) && scriptSetup.imports.some((imp) => importDeclaresName(imp, name))) componentNames.set(name, name);
-		}
-		const components = componentNames.size > 0 ? `  components: { ${[...componentNames].map(([name, value]) => `${JSON.stringify(name)}: ${value}`).join(", ")} },\n` : "";
-		if (scriptSetup && hasSetup && isolatedSetup) code += `
-export const ${variantComponentName} = __museaDefineComponent({
-  name: '${variantComponentName}',
-${components}  setup() {
-${scriptSetup.setupBody.join("\n")}
-    return ${setupReturn};
-  },
-  template: \`${fullTemplate}\`,
-});
-`;
-		else if (scriptSetup && hasSetup) code += `
-export const ${variantComponentName} = __museaDefineComponent({
-  name: '${variantComponentName}',
-${components}  setup() {
-    return __museaSharedSetup;
-  },
-  template: \`${fullTemplate}\`,
-});
-`;
-		else if (componentTagName) code += `
-export const ${variantComponentName} = {
-  name: '${variantComponentName}',
-${components}  template: \`${fullTemplate}\`,
-};
-`;
-		else code += `
-export const ${variantComponentName} = {
-  name: '${variantComponentName}',
-  template: \`${fullTemplate}\`,
-};
+		const template = expandSelfTag(variant.template, componentTagName);
+		if (options.vueVersion === 2) {
+			code += emitLegacyVariant({
+				variantComponentName,
+				variantName: variant.name,
+				template,
+				componentTagName,
+				componentBindingName,
+				scriptSetup,
+				hasSetup,
+				isolatedSetup,
+				setupReturn,
+				importDeclaresName
+			});
+			continue;
+		}
+		const variantModuleId = `virtual:musea-variant:${filePath}:${encodeURIComponent(variant.name)}`;
+		code += `
+import ${variantComponentName} from ${JSON.stringify(variantModuleId)};
+export { ${variantComponentName} };
 `;
 	}
 	const defaultVariant = art.variants.find((v) => v.isDefault) || art.variants[0];
@@ -3173,6 +3252,123 @@ function generateManifestModule(artFiles) {
 	return `export const arts = ${JSON.stringify(arts, null, 2)};`;
 }
 //#endregion
+//#region src/art-variant-sfc.ts
+/**
+* Compile an `<art>` variant through the SFC pipeline.
+*
+* Variants used to be emitted as `template:` strings for Vue's runtime
+* compiler, which never sees the SFC pipeline. Any template expression relying
+* on SFC-time compilation therefore failed at render time — most importantly
+* TypeScript, even though `.art.vue` files are authored with
+* `<script setup lang="ts">` (#3857).
+*
+* Compiling the raw template with the template compiler is not enough: it
+* leaves TypeScript in place *and* its identifier prefixer gives up on TS
+* syntax, so `items[0]!.isValid` stays unprefixed and throws at runtime. Only
+* the SFC pipeline handles both, which is what the issue asks for — the variant
+* is compiled the same way the enclosing SFC is:
+*
+*     :disabled="items[0]!.isValid"   ->   disabled: items.value[0].isValid
+*     @u="(f: File | null) => …"      ->   onU: (f) => file.value = f
+*/
+/**
+* Rebase the art file's `<script setup>` for a virtual module.
+*
+* A variant compiles into a virtual module, and a relative specifier cannot be
+* resolved from one — the art module rebases its own imports for exactly this
+* reason, and the variant needs the same treatment or every relative import in
+* an art file fails to resolve.
+*/
+function rebaseScriptSetup(scriptSetup, artDir) {
+	if (!scriptSetup.trim()) return "";
+	const parsed = parseScriptSetupForArt(scriptSetup);
+	return [...parsed.imports.map((statement) => rewriteRelativeImportStatement(statement, artDir)), ...parsed.setupBody].join("\n").trim();
+}
+/**
+* Build the synthetic SFC source for one variant.
+*
+* The art file's own `<script setup>` becomes the variant's setup block, so
+* bindings resolve exactly as they do in the authored file, and `lang="ts"` is
+* carried over so the pipeline strips TypeScript from template expressions.
+*/
+function buildVariantSfcSource(art, variantTemplate, variantName, options = {}) {
+	if (options.sharedBindings && options.sharedBindings.names.length > 0) {
+		const { moduleId, names } = options.sharedBindings;
+		const escapedShared = variantName.replace(/"/g, "&quot;");
+		return `<script setup lang="ts">\n` + (options.componentImportPath && options.componentBindingName && !names.includes(options.componentBindingName) ? `import ${options.componentBindingName} from ${JSON.stringify(options.componentImportPath)}\n` : "") + `import { ${names.join(", ")} } from ${JSON.stringify(moduleId)}\n<\/script>\n<template><div data-variant="${escapedShared}">${variantTemplate}</div></template>\n`;
+	}
+	const scriptSetup = rebaseScriptSetup(options.scriptSetup ?? art.scriptSetupContent ?? "", path.dirname(options.artFilePath ?? art.path));
+	return `${`<script setup lang="ts">\n${`${options.componentImportPath && options.componentBindingName ? `import ${options.componentBindingName} from ${JSON.stringify(options.componentImportPath)}\n` : ""}${scriptSetup.trim()}`.trim()}\n<\/script>\n`}<template><div data-variant="${variantName.replace(/"/g, "&quot;")}">${variantTemplate}</div></template>\n`;
+}
+/**
+* Compile a variant to a self-contained ES module exporting the component.
+*
+* Each variant compiles to its own module because `compileSfc` emits a complete
+* module with its own `export default` and imports; concatenating several into
+* one art module would redeclare bindings and collide on the default export.
+*/
+function compileVariantSfc(art, variantTemplate, variantName, filename, options = {}) {
+	const component = resolveArtComponent(art, filename, options.parsedScriptSetup ?? null, {
+		root: options.root,
+		scanRoots: options.scanRoots
+	});
+	const source = buildVariantSfcSource(art, expandSelfTag(variantTemplate, component.componentTagName), variantName, {
+		scriptSetup: options.scriptSetup,
+		componentImportPath: component.componentImportPath,
+		componentBindingName: component.componentBindingName,
+		artFilePath: filename,
+		sharedBindings: options.sharedBindings
+	});
+	const result = loadNative().compileSfc(source, { filename });
+	return {
+		code: result.code ?? "",
+		errors: (result.errors ?? []).map((error) => typeof error === "string" ? error : error.message ?? JSON.stringify(error))
+	};
+}
+//#endregion
+//#region src/art-shared-setup.ts
+/**
+* One shared `<script setup>` instance for an art file's variants.
+*
+* `scriptSetupIsolated: false` opts an art file out of per-variant isolation:
+* every variant sees the same setup instance, so state written in one variant is
+* visible in the next. Compiling each variant as its own SFC (#3857) would give
+* each one its own setup and silently drop that, so the shared case hoists the
+* setup into this module and the variants import its bindings instead of
+* declaring them.
+*
+* A dedicated module rather than the art module itself, because the art module
+* imports the variants — routing the shared state through it would make that a
+* cycle.
+*/
+/**
+* The binding names a variant SFC should import from the shared module.
+*
+* `<script setup>` resolves template identifiers from its own bindings, and an
+* import is a binding, so importing each name by hand is what makes the shared
+* state reachable from the variant's template.
+*/
+function sharedBindingNames(parsed) {
+	return [...new Set(parsed.returnNames)].filter((name) => /^[A-Za-z_$][\w$]*$/.test(name));
+}
+function generateSharedSetupModule(art, filePath) {
+	const parsed = parseSharedScriptSetup(art);
+	if (!parsed) return "export {};\n";
+	const artDir = path.dirname(filePath);
+	const imports = parsed.imports.map((statement) => rewriteRelativeImportStatement(statement, artDir)).join("\n");
+	const names = sharedBindingNames(parsed);
+	return [
+		imports,
+		parsed.setupBody.join("\n"),
+		names.length > 0 ? `export { ${names.join(", ")} };` : "export {};",
+		""
+	].join("\n");
+}
+function parseSharedScriptSetup(art) {
+	if (!art.scriptSetupContent) return null;
+	return parseScriptSetupForArt(art.scriptSetupContent);
+}
+//#endregion
 //#region src/plugin/virtual.ts
 /**
 * Virtual module handling for the Musea Vite plugin.
@@ -3183,12 +3379,28 @@ function generateManifestModule(artFiles) {
 const VIRTUAL_MUSEA_PREFIX = "\0musea:";
 const VIRTUAL_GALLERY = "\0musea-gallery";
 const VIRTUAL_MANIFEST = "\0musea-manifest";
+/**
+* Recover a variant name from a virtual module id.
+*
+* `generateArtModule` percent-encodes it, so a hand-written import with an
+* invalid escape still falls back to the raw text instead of throwing a
+* `URIError` out of `load`.
+*/
+function decodeVariantName(encoded) {
+	try {
+		return decodeURIComponent(encoded);
+	} catch {
+		return encoded;
+	}
+}
 function createResolveId(state) {
 	return function resolveId(id) {
 		const root = state.getConfigRoot();
 		if (id === "\0musea-gallery") return VIRTUAL_GALLERY;
 		if (id === "\0musea-manifest") return VIRTUAL_MANIFEST;
 		if (id.startsWith("virtual:musea-preview:")) return "\0musea-preview:" + id.slice(22);
+		if (id.startsWith("virtual:musea-variant:")) return "\0musea-variant:" + id.slice(22) + "?musea-virtual";
+		if (id.startsWith("virtual:musea-shared:")) return "\0musea-shared:" + id.slice(21) + "?musea-virtual";
 		if (id.startsWith("virtual:musea-art:")) {
 			const artPath = id.slice(18);
 			if (state.artFiles.has(artPath)) return "\0musea-art:" + artPath + "?musea-virtual";
@@ -3218,12 +3430,45 @@ function createLoad(state) {
 				if (art) return generatePreviewModule(art, toPascalCase(variantName), variantName, state.resolvedPreviewCss, state.resolvedPreviewSetup, state.getVueVersion());
 			}
 		}
+		if (id.startsWith("\0musea-shared:")) {
+			const artPath = id.slice(14).replace(/\?musea-virtual$/, "");
+			const art = state.artFiles.get(artPath);
+			if (art) return generateSharedSetupModule(art, artPath);
+		}
+		if (id.startsWith("\0musea-variant:")) {
+			const rest = id.slice(15).replace(/\?musea-virtual$/, "");
+			const lastColonIndex = rest.lastIndexOf(":");
+			if (lastColonIndex !== -1) {
+				const artPath = rest.slice(0, lastColonIndex);
+				const variantName = decodeVariantName(rest.slice(lastColonIndex + 1));
+				const art = state.artFiles.get(artPath);
+				const variant = art?.variants.find((candidate) => candidate.name === variantName);
+				if (art && variant) {
+					const parsedScriptSetup = art.scriptSetupContent ? parseScriptSetupForArt(art.scriptSetupContent) : null;
+					const shared = art.scriptSetupIsolated === false && parsedScriptSetup ? {
+						moduleId: `virtual:musea-shared:${artPath}`,
+						names: sharedBindingNames(parsedScriptSetup)
+					} : void 0;
+					const compiled = compileVariantSfc(art, variant.template, variant.name, artPath, {
+						scriptSetup: art.scriptSetupContent,
+						parsedScriptSetup,
+						root: state.getConfigRoot(),
+						scanRoots: state.getScanRoots(),
+						sharedBindings: shared
+					});
+					if (compiled.errors.length > 0) throw new Error(`Failed to compile <art> variant "${variantName}" in ${artPath}:\n${compiled.errors.join("\n")}`);
+					if (!compiled.code) throw new Error(`The compiler produced no code for <art> variant "${variantName}" in ${artPath}.`);
+					return compiled.code;
+				}
+			}
+		}
 		if (id.startsWith("\0musea-art:")) {
 			const artPath = id.slice(11).replace(/\?musea-virtual$/, "");
 			const art = state.artFiles.get(artPath);
 			if (art) return generateArtModule(art, artPath, {
 				root: state.getConfigRoot(),
-				scanRoots: state.getScanRoots()
+				scanRoots: state.getScanRoots(),
+				vueVersion: state.getVueVersion()
 			});
 		}
 		if (id.startsWith("\0musea:")) {
@@ -3231,7 +3476,8 @@ function createLoad(state) {
 			const art = state.artFiles.get(realPath);
 			if (art) return generateArtModule(art, realPath, {
 				root: state.getConfigRoot(),
-				scanRoots: state.getScanRoots()
+				scanRoots: state.getScanRoots(),
+				vueVersion: state.getVueVersion()
 			});
 		}
 		return null;