@vizejs/vite-plugin-musea 0.291.0 → 0.303.0

package/dist/index.mjs

@@ -637,6 +637,19 @@ function __museaInitAddons(container, variantName, extraCaptureEvents = []) {
                 script.onerror = reject;
                 document.head.appendChild(script);
               });
+              // A load event is not proof the vendor script exists. axe-core is
+              // an optional peer, so a static export can ship without it, and a
+              // static host is free to answer the missing asset with an SPA
+              // fallback: 200 plus HTML. The script tag then "loads" fine and
+              // window.axe is still undefined, which surfaced downstream as an
+              // opaque "cannot read properties of undefined" instead of the real
+              // cause.
+              if (!window.axe) {
+                throw new Error(
+                  'axe-core did not load from ' + script.src +
+                  ' - install axe-core so the gallery can ship it, and check that the path is served as JavaScript rather than an SPA fallback'
+                );
+              }
             }
             // Run axe-core on the .musea-variant container only (not the full document)
             const context = document.querySelector('.musea-variant') || document;
@@ -2913,19 +2926,6 @@ async function handleArtDocs(ctx, match, sendJson, sendError) {
 	}
 }
 /** GET /api/arts/:path/variants/:name/a11y */
-function handleArtA11y(ctx, match, sendJson, sendError) {
-	const artPath = decodeUrlComponent(match[1], "art path");
-	decodeUrlComponent(match[2], "variant name");
-	if (!ctx.artFiles.get(artPath)) {
-		sendError("Art not found", 404);
-		return;
-	}
-	sendJson({
-		violations: [],
-		passes: 0,
-		incomplete: 0
-	});
-}
 //#endregion
 //#region src/api-routes/post-handlers.ts
 /** POST /api/preview-with-props */
@@ -3116,7 +3116,6 @@ function createApiMiddleware(ctx) {
 				const paletteMatch = rest.match(/^(.+)\/palette$/);
 				const analysisMatch = rest.match(/^(.+)\/analysis$/);
 				const docsMatch = rest.match(/^(.+)\/docs$/);
-				const a11yMatch = rest.match(/^(.+)\/variants\/([^/]+)\/a11y$/);
 				if (sourceMatch) {
 					await handleArtSource(ctx, sourceMatch, sendJson, sendError);
 					return;
@@ -3133,10 +3132,6 @@ function createApiMiddleware(ctx) {
 					await handleArtDocs(ctx, docsMatch, sendJson, sendError);
 					return;
 				}
-				if (a11yMatch) {
-					handleArtA11y(ctx, a11yMatch, sendJson, sendError);
-					return;
-				}
 				const artPath = decodeUrlComponent(rest, "art path");
 				const art = ctx.artFiles.get(artPath);
 				if (art) sendJson(art);
@@ -3364,13 +3359,9 @@ async function createStaticGalleryPayload(ctx) {
 	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) => {
@@ -3390,8 +3381,7 @@ async function createStaticGalleryPayload(ctx) {
 			}),
 			docs: await captureJson((sendJson, sendError) => {
 				return handleArtDocs(apiCtx, artMatch(art.path), sendJson, sendError);
-			}, emptyDocs(art)),
-			a11y
+			}, emptyDocs(art))
 		};
 	}
 	return {
@@ -3436,13 +3426,6 @@ async function captureJson(run, fallback) {
 function artMatch(artPath) {
 	return ["", encodeURIComponent(artPath)];
 }
-function artVariantMatch(artPath, variantName) {
-	return [
-		"",
-		encodeURIComponent(artPath),
-		encodeURIComponent(variantName)
-	];
-}
 function emptyPalette(art) {
 	return {
 		title: art.metadata.title,
@@ -3459,13 +3442,6 @@ function emptyDocs(art) {
 		variant_count: art.variants.length
 	};
 }
-function emptyA11y() {
-	return {
-		violations: [],
-		passes: 0,
-		incomplete: 0
-	};
-}
 function emptyTokens() {
 	return {
 		categories: [],
@@ -3492,13 +3468,82 @@ function publicBasePathFromViteBase(viteBase, basePath) {
 	return viteBase && viteBase !== "/" && viteBase !== "./" ? joinUrlPath(viteBase, basePath) : basePath;
 }
 //#endregion
+//#region src/static-gallery-shell.ts
+const moduleDir = path.dirname(fileURLToPath(import.meta.url));
+function joinFileName(...parts) {
+	return parts.filter(Boolean).join("/");
+}
+async function emitGalleryShell(emitFile, staticRoot, ctx, payload, galleryDistDir = resolveGalleryDistDir()) {
+	if (!galleryDistDir) {
+		const html = injectStaticGlobals(generateStaticFallbackGalleryHtml(ctx.basePath), ctx, payload);
+		emitFile({
+			type: "asset",
+			fileName: joinFileName(staticRoot, "index.html"),
+			source: html
+		});
+		return;
+	}
+	for (const filePath of await collectFiles(galleryDistDir)) {
+		const relative = path.relative(galleryDistDir, 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: injectStaticGlobals(rewriteGalleryBase(content.toString("utf-8"), ctx.basePath), ctx, payload)
+		});
+		else emitFile({
+			type: "asset",
+			fileName: target,
+			source: rewriteGalleryTextAssetBase(content, relative, ctx.basePath)
+		});
+	}
+}
+function injectStaticGlobals(html, ctx, payload) {
+	const script = `<script>${generateGalleryGlobalsScript({
+		basePath: ctx.basePath,
+		staticPreviews: payload.previews,
+		themeConfig: ctx.themeConfig,
+		tokenPreviewConfig: ctx.tokenPreviewConfig
+	})}<\/script>`;
+	return html.includes("</head>") ? html.replace("</head>", `${script}</head>`) : `${script}${html}`;
+}
+function generateStaticFallbackGalleryHtml(basePath) {
+	return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Musea - Component Gallery</title>
+  <style>html,body{min-height:100%;margin:0}body{font-family:system-ui,sans-serif}</style>
+</head>
+<body>${generateGalleryBody(basePath)}
+
+  <script type="module">${generateGalleryScript(basePath)}
+  <\/script>
+</body>
+</html>`;
+}
+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;
+}
+//#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 STATIC_RUNTIME_INPUT_NAME = "musea-static-runtime";
 const STATIC_USER_INPUT_NAME = "musea-static-entry";
-const moduleDir = path.dirname(fileURLToPath(import.meta.url));
 function isMuseaStaticBuild() {
 	return process.env[MUSEA_STATIC_BUILD_ENV] === "1";
 }
@@ -3579,49 +3624,6 @@ 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 html = injectStaticGlobals(generateStaticFallbackGalleryHtml(ctx.basePath), 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: rewriteGalleryTextAssetBase(content, relative, ctx.basePath)
-		});
-	}
-}
-function generateStaticFallbackGalleryHtml(basePath) {
-	return `<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Musea - Component Gallery</title>
-  <style>html,body{min-height:100%;margin:0}body{font-family:system-ui,sans-serif}</style>
-</head>
-<body>${generateGalleryBody(basePath)}
-
-  <script type="module">${generateGalleryScript(basePath)}
-  <\/script>
-</body>
-</html>`;
-}
 function emitPreviewHtml(emitFile, staticRoot, runtimeFileName, basePath, artFiles) {
 	const previewDir = joinFileName(staticRoot, "preview");
 	const runtimeUrl = relativeUrl(previewDir, runtimeFileName);
@@ -3665,15 +3667,6 @@ function generateStaticPreviewHtml(art, variantName, previewId, basePath, runtim
 </body>
 </html>`;
 }
-function injectStaticGlobals(html, ctx, payload) {
-	const script = `<script>${generateGalleryGlobalsScript({
-		basePath: ctx.basePath,
-		staticPreviews: payload.previews,
-		themeConfig: ctx.themeConfig,
-		tokenPreviewConfig: ctx.tokenPreviewConfig
-	})}<\/script>`;
-	return html.includes("</head>") ? html.replace("</head>", `${script}</head>`) : `${script}${html}`;
-}
 function emitRootRedirect(emitFile, staticRoot, basePath) {
 	if (!staticRoot) return;
 	const target = joinUrlPath(basePath, "");
@@ -3692,27 +3685,13 @@ async function emitAxeVendor(emitFile, staticRoot) {
 			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);
+	} catch {
+		console.warn("[musea] axe-core is not installed, so the exported gallery cannot run accessibility checks.\n        Install it to enable the A11y panel in the static build: vp install -D axe-core");
 	}
-	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}`;