@vizejs/vite-plugin-musea 0.238.0 → 0.240.0

package/dist/index.mjs

@@ -7,6 +7,7 @@ import { transformWithEsbuild } from "vite";
 import fs from "node:fs";
 import path from "node:path";
 import { vizeConfigStore } from "@vizejs/vite-plugin";
+import crypto from "node:crypto";
 import { fileURLToPath } from "node:url";
 //#region src/native-loader.ts
 /**
@@ -808,7 +809,8 @@ function __museaInitAddons(container, variantName, extraCaptureEvents = []) {
             // Dynamically load axe-core from local vendor route if not already loaded
             if (!window.axe) {
               const script = document.createElement('script');
-              const _basePath = location.pathname.replace(/\\/preview$/, '');
+              const _basePath = window.__MUSEA_BASE_PATH__
+                || location.pathname.replace(/\\/preview(?:\\/[^/]+\\.html)?$/, '');
               script.src = _basePath + '/vendor/axe-core.min.js';
               await new Promise((resolve, reject) => {
                 script.onload = resolve;
@@ -1217,7 +1219,7 @@ mount();
 }
 //#endregion
 //#region src/server-middleware.ts
-const moduleDir = path.dirname(fileURLToPath(import.meta.url));
+const moduleDir$1 = path.dirname(fileURLToPath(import.meta.url));
 const galleryAssetMimeTypes = {
 	".js": "application/javascript",
 	".css": "text/css",
@@ -1227,11 +1229,11 @@ const galleryAssetMimeTypes = {
 	".woff2": "font/woff2",
 	".woff": "font/woff"
 };
-function resolveGalleryDistDir() {
-	return path.resolve(moduleDir, "gallery");
+function resolveGalleryDistDir$1() {
+	return path.resolve(moduleDir$1, "gallery");
 }
 function resolveGallerySourceDir() {
-	return path.resolve(moduleDir, "../gallery");
+	return path.resolve(moduleDir$1, "../gallery");
 }
 function toViteFsPath(filePath) {
 	return encodeURI(`/@fs${filePath.split(path.sep).join("/")}`);
@@ -1293,7 +1295,7 @@ function registerMiddleware(devServer, ctx) {
 	devServer.middlewares.use(basePath, async (req, res, next) => {
 		const url = req.url || "/";
 		if (url === "/" || url === "/index.html" || url.startsWith("/tokens") || url.startsWith("/component/") || url.startsWith("/tests")) {
-			const galleryDistDir = resolveGalleryDistDir();
+			const galleryDistDir = resolveGalleryDistDir$1();
 			const indexHtmlPath = path.join(galleryDistDir, "index.html");
 			try {
 				await fs.promises.access(indexHtmlPath);
@@ -1316,7 +1318,7 @@ function registerMiddleware(devServer, ctx) {
 			}
 		}
 		if (url.startsWith("/assets/")) {
-			if (await serveGalleryAsset(resolveGalleryDistDir(), url, res)) return;
+			if (await serveGalleryAsset(resolveGalleryDistDir$1(), url, res)) return;
 		}
 		next();
 	});
@@ -2892,7 +2894,319 @@ function watchMuseaArtFiles(watcher, files) {
 	watcher.add(targets);
 }
 //#endregion
+//#region src/static-data.ts
+function staticPreviewId(artPath, variantName) {
+	return crypto.createHash("sha256").update(artPath).update("\0").update(variantName).digest("hex").slice(0, 20);
+}
+function joinUrlPath(basePath, ...segments) {
+	return `${basePath === "/" ? "" : basePath.replace(/\/+$/, "")}/${segments.map((segment) => segment.replace(/^\/+|\/+$/g, "")).filter(Boolean).join("/")}`;
+}
+async function createStaticGalleryPayload(ctx) {
+	const apiCtx = createApiContext(ctx);
+	const arts = Array.from(ctx.artFiles.values());
+	const previews = {};
+	const details = {};
+	for (const art of arts) {
+		previews[art.path] = {};
+		const a11y = {};
+		for (const variant of art.variants) {
+			const id = staticPreviewId(art.path, variant.name);
+			previews[art.path][variant.name] = joinUrlPath(ctx.basePath, "preview", `${id}.html`);
+			a11y[variant.name] = await captureJson((sendJson, sendError) => {
+				handleArtA11y(apiCtx, artVariantMatch(art.path, variant.name), sendJson, sendError);
+			}, emptyA11y());
+		}
+		details[art.path] = {
+			source: await captureJson((sendJson, sendError) => {
+				return handleArtSource(apiCtx, artMatch(art.path), sendJson, sendError);
+			}, {
+				source: "",
+				path: art.path
+			}),
+			palette: await captureJson((sendJson, sendError) => {
+				return handleArtPalette(apiCtx, artMatch(art.path), sendJson, sendError);
+			}, emptyPalette(art)),
+			analysis: await captureJson((sendJson, sendError) => {
+				return handleArtAnalysis(apiCtx, artMatch(art.path), sendJson, sendError);
+			}, {
+				props: [],
+				emits: []
+			}),
+			docs: await captureJson((sendJson, sendError) => {
+				return handleArtDocs(apiCtx, artMatch(art.path), sendJson, sendError);
+			}, emptyDocs(art)),
+			a11y
+		};
+	}
+	return {
+		arts,
+		previews,
+		details,
+		tokens: await captureJson((sendJson) => handleTokensGet(apiCtx, sendJson), emptyTokens()),
+		tokenUsage: await captureJson((sendJson) => handleTokensUsage(apiCtx, sendJson), {})
+	};
+}
+function createApiContext(ctx) {
+	return {
+		config: ctx.config,
+		artFiles: ctx.artFiles,
+		scanRoots: ctx.scanRoots,
+		tokensPath: ctx.tokensPath,
+		basePath: ctx.basePath,
+		resolvedPreviewCss: ctx.resolvedPreviewCss,
+		resolvedPreviewSetup: ctx.resolvedPreviewSetup,
+		devSessionToken: ctx.devSessionToken,
+		processArtFile: async (filePath) => {
+			await fs.promises.access(filePath);
+		},
+		getDevServerPort: () => 5173
+	};
+}
+async function captureJson(run, fallback) {
+	let captured = fallback;
+	const sendJson = (data) => {
+		captured = data;
+	};
+	const sendError = (message, status = 500) => {
+		captured = {
+			error: message,
+			status
+		};
+	};
+	await run(sendJson, sendError);
+	return captured;
+}
+function artMatch(artPath) {
+	return ["", encodeURIComponent(artPath)];
+}
+function artVariantMatch(artPath, variantName) {
+	return [
+		"",
+		encodeURIComponent(artPath),
+		encodeURIComponent(variantName)
+	];
+}
+function emptyPalette(art) {
+	return {
+		title: art.metadata.title,
+		controls: [],
+		groups: [],
+		json: "{}",
+		typescript: ""
+	};
+}
+function emptyDocs(art) {
+	return {
+		markdown: "",
+		title: art.metadata.title,
+		variant_count: art.variants.length
+	};
+}
+function emptyA11y() {
+	return {
+		violations: [],
+		passes: 0,
+		incomplete: 0
+	};
+}
+function emptyTokens() {
+	return {
+		categories: [],
+		tokenMap: {},
+		meta: {
+			filePath: "",
+			tokenCount: 0,
+			primitiveCount: 0,
+			semanticCount: 0
+		}
+	};
+}
+//#endregion
+//#region src/static-export.ts
+const MUSEA_STATIC_BUILD_ENV = "VIZE_MUSEA_STATIC_BUILD";
+const VIRTUAL_STATIC_RUNTIME = "virtual:musea-static-runtime";
+const RESOLVED_STATIC_RUNTIME = "\0musea-static-runtime";
+const moduleDir = path.dirname(fileURLToPath(import.meta.url));
+function isMuseaStaticBuild() {
+	return process.env[MUSEA_STATIC_BUILD_ENV] === "1";
+}
+function museaStaticBuildConfig() {
+	return { build: { rollupOptions: { input: { "musea-static-runtime": VIRTUAL_STATIC_RUNTIME } } } };
+}
+function resolveStaticRuntimeId(id) {
+	return id === "virtual:musea-static-runtime" ? RESOLVED_STATIC_RUNTIME : null;
+}
+function loadStaticRuntimeModule(id, artFiles) {
+	if (id !== RESOLVED_STATIC_RUNTIME) return null;
+	return `
+const loaders = { ${Array.from(artFiles.values()).flatMap((art) => art.variants.map((variant) => {
+		const key = staticPreviewId(art.path, variant.name);
+		const moduleId = `virtual:musea-preview:${art.path}:${variant.name}`;
+		return `${JSON.stringify(key)}: () => import(${JSON.stringify(moduleId)})`;
+	})).join(",\n")} };
+
+export async function loadMuseaPreview(id) {
+  const load = loaders[id];
+  if (!load) throw new Error("Musea preview not found: " + id);
+  await load();
+}
+
+if (typeof window !== "undefined") {
+  window.__MUSEA_LOAD_PREVIEW__ = loadMuseaPreview;
+}
+`;
+}
+async function emitStaticGallery(emitFile, bundle, ctx) {
+	const runtimeFileName = findRuntimeFileName(bundle);
+	if (!runtimeFileName) throw new Error("musea static build could not find its generated runtime entry");
+	const payload = await createStaticGalleryPayload(ctx);
+	const staticRoot = staticRootFromBasePath(ctx.basePath);
+	await emitGalleryShell(emitFile, staticRoot, ctx, payload);
+	emitFile({
+		type: "asset",
+		fileName: joinFileName(staticRoot, "api", "static.json"),
+		source: JSON.stringify(payload, null, 2)
+	});
+	emitFile({
+		type: "asset",
+		fileName: joinFileName(staticRoot, "api", "arts"),
+		source: JSON.stringify(payload.arts, null, 2)
+	});
+	await emitAxeVendor(emitFile, staticRoot);
+	emitPreviewHtml(emitFile, staticRoot, runtimeFileName, ctx.basePath, payload, ctx.artFiles);
+	emitRootRedirect(emitFile, staticRoot, ctx.basePath);
+}
+function findRuntimeFileName(bundle) {
+	for (const item of Object.values(bundle)) if (item.type === "chunk" && item.name === "musea-static-runtime") return item.fileName;
+	return null;
+}
+async function emitGalleryShell(emitFile, staticRoot, ctx, payload) {
+	const galleryDir = resolveGalleryDistDir();
+	if (!galleryDir) {
+		const { generateGalleryHtml } = await import("./gallery-kaxHo2Kt.mjs").then((n) => n.t);
+		const html = injectStaticGlobals(generateGalleryHtml(ctx.basePath, "", ctx.themeConfig), ctx, payload);
+		emitFile({
+			type: "asset",
+			fileName: joinFileName(staticRoot, "index.html"),
+			source: html
+		});
+		return;
+	}
+	for (const filePath of await collectFiles(galleryDir)) {
+		const relative = path.relative(galleryDir, filePath).split(path.sep).join("/");
+		const target = joinFileName(staticRoot, relative);
+		const content = await fs.promises.readFile(filePath);
+		if (relative === "index.html") emitFile({
+			type: "asset",
+			fileName: target,
+			source: rewriteGalleryBase(injectStaticGlobals(content.toString("utf-8"), ctx, payload), ctx.basePath)
+		});
+		else emitFile({
+			type: "asset",
+			fileName: target,
+			source: content
+		});
+	}
+	if (payload.arts.length === 0) return;
+}
+function emitPreviewHtml(emitFile, staticRoot, runtimeFileName, basePath, payload, artFiles) {
+	const previewDir = joinFileName(staticRoot, "preview");
+	const runtimeUrl = relativeUrl(previewDir, runtimeFileName);
+	for (const art of artFiles.values()) for (const variant of art.variants) {
+		const id = staticPreviewId(art.path, variant.name);
+		const html = generateStaticPreviewHtml(art, variant.name, id, basePath, runtimeUrl);
+		emitFile({
+			type: "asset",
+			fileName: joinFileName(previewDir, `${id}.html`),
+			source: html
+		});
+	}
+}
+function generateStaticPreviewHtml(art, variantName, previewId, basePath, runtimeUrl) {
+	return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${escapeHtml(art.metadata.title)} - ${escapeHtml(variantName)}</title>
+  <script>window.__MUSEA_BASE_PATH__=${serializeScriptValue(basePath)};<\/script>
+  <style>html,body{width:100%;height:100%;margin:0}body{font-family:system-ui,sans-serif;background:#fff;padding:1rem;overflow:auto;box-sizing:border-box}.musea-variant{min-height:calc(100vh - 2rem)}.musea-error{color:#dc2626;background:#fef2f2;border:1px solid #fecaca;border-radius:8px;padding:1rem;font-size:.875rem}.musea-loading{color:#6b7280;font-size:.875rem}.musea-bg-checkerboard{background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%)!important;background-size:20px 20px!important;background-position:0 0,0 10px,10px -10px,-10px 0!important}</style>
+</head>
+<body>
+  <div id="app" class="musea-variant" data-art="${escapeHtml(art.path)}" data-variant="${escapeHtml(variantName)}">
+    <div class="musea-loading">Loading component...</div>
+  </div>
+  <script type="module">
+    import { loadMuseaPreview } from ${JSON.stringify(runtimeUrl)};
+    loadMuseaPreview(${JSON.stringify(previewId)}).catch((error) => {
+      const el = document.getElementById("app");
+      if (el) el.textContent = error instanceof Error ? error.message : String(error);
+    });
+  <\/script>
+</body>
+</html>`;
+}
+function injectStaticGlobals(html, ctx, payload) {
+	const themeScript = ctx.themeConfig ? `window.__MUSEA_THEME_CONFIG__=${serializeScriptValue(ctx.themeConfig)};` : "";
+	const script = `<script>window.__MUSEA_BASE_PATH__=${serializeScriptValue(ctx.basePath)};window.__MUSEA_STATIC__=true;window.__MUSEA_STATIC_PREVIEWS__=${serializeScriptValue(payload.previews)};${themeScript}<\/script>`;
+	return html.includes("</head>") ? html.replace("</head>", `${script}</head>`) : `${script}${html}`;
+}
+function rewriteGalleryBase(html, basePath) {
+	return html.replaceAll("/__musea__/", `${basePath.replace(/\/?$/, "/")}`);
+}
+function emitRootRedirect(emitFile, staticRoot, basePath) {
+	if (!staticRoot) return;
+	const target = joinUrlPath(basePath, "");
+	emitFile({
+		type: "asset",
+		fileName: "index.html",
+		source: `<!doctype html><meta charset="utf-8"><meta http-equiv="refresh" content="0; url=${target}"><script>location.replace(${JSON.stringify(target)}+location.search+location.hash)<\/script>`
+	});
+}
+async function emitAxeVendor(emitFile, staticRoot) {
+	try {
+		const axePath = createRequire(import.meta.url).resolve("axe-core/axe.min.js");
+		const source = await fs.promises.readFile(axePath);
+		emitFile({
+			type: "asset",
+			fileName: joinFileName(staticRoot, "vendor/axe-core.min.js"),
+			source
+		});
+	} catch {}
+}
+function resolveGalleryDistDir() {
+	return [path.join(moduleDir, "gallery"), path.resolve(moduleDir, "../dist/gallery")].find((candidate) => fs.existsSync(path.join(candidate, "index.html"))) ?? null;
+}
+async function collectFiles(dir) {
+	const entries = await fs.promises.readdir(dir, { withFileTypes: true });
+	const files = [];
+	for (const entry of entries) {
+		const filePath = path.join(dir, entry.name);
+		if (entry.isDirectory()) files.push(...await collectFiles(filePath));
+		else files.push(filePath);
+	}
+	return files;
+}
+function staticRootFromBasePath(basePath) {
+	return basePath.replace(/^\/+|\/+$/g, "");
+}
+function joinFileName(...parts) {
+	return parts.filter(Boolean).join("/");
+}
+function relativeUrl(fromDir, toFile) {
+	const relative = path.posix.relative(fromDir || ".", toFile);
+	return relative.startsWith(".") ? relative : `./${relative}`;
+}
+//#endregion
 //#region src/plugin/index.ts
+const require = createRequire(import.meta.url);
+function resolveVueRuntimeCompiler() {
+	try {
+		return require.resolve("vue/dist/vue.esm-bundler.js");
+	} catch {
+		return "vue/dist/vue.esm-bundler.js";
+	}
+}
 function extractArtTagAttributes(source) {
 	const artTagMatch = source.match(/<art\b([\s\S]*?)>/i);
 	if (!artTagMatch) return {};
@@ -2928,9 +3242,6 @@ function extractStyleBlocks(source) {
 	}
 	return styles;
 }
-/**
-* Create Musea Vite plugin.
-*/
 function musea(options = {}) {
 	let include = options.include ?? ["**/*.art.vue"];
 	let exclude = options.exclude ?? ["node_modules/**", "dist/**"];
@@ -2962,6 +3273,8 @@ function musea(options = {}) {
 		getServer: () => server,
 		processArtFile
 	};
+	const virtualResolveId = createResolveId(virtualState);
+	const virtualLoad = createLoad(virtualState);
 	const mainPlugin = {
 		name: "vite-plugin-musea",
 		enforce: "pre",
@@ -2969,7 +3282,10 @@ function musea(options = {}) {
 			return shouldApplyMuseaPlugin(env);
 		},
 		config() {
-			return { resolve: { alias: { vue: "vue/dist/vue.esm-bundler.js" } } };
+			return {
+				resolve: { alias: { vue: resolveVueRuntimeCompiler() } },
+				...isMuseaStaticBuild() ? museaStaticBuildConfig() : {}
+			};
 		},
 		configResolved(resolvedConfig) {
 			config = resolvedConfig;
@@ -3067,8 +3383,26 @@ function musea(options = {}) {
 			for (const file of files) await processArtFile(file);
 			if (storybookCompat) await generateStorybookFiles(artFiles, config.root, storybookOutDir);
 		},
-		resolveId: createResolveId(virtualState),
-		load: createLoad(virtualState),
+		resolveId(id) {
+			return resolveStaticRuntimeId(id) ?? virtualResolveId(id);
+		},
+		load(id) {
+			return loadStaticRuntimeModule(id, artFiles) ?? virtualLoad(id);
+		},
+		async generateBundle(_options, bundle) {
+			if (!isMuseaStaticBuild()) return;
+			await emitStaticGallery((asset) => void this.emitFile(asset), bundle, {
+				config,
+				artFiles,
+				scanRoots,
+				tokensPath,
+				basePath,
+				resolvedPreviewCss,
+				resolvedPreviewSetup,
+				devSessionToken,
+				themeConfig
+			});
+		},
 		async transform(code, id) {
 			if (!id.includes("?musea-virtual")) return null;
 			if (!id.includes("musea-art:") && !id.includes("\0musea:")) return null;