xmlui 0.12.7 → 0.12.10

package/dist/bin/index.cjs

@@ -8467,11 +8467,19 @@ function nodeToComponentDef(node, originalGetText, fileId, preResolvedImports) {
 						reportError(DIAGS_TRANSFORM.globalNotAllowedInNested);
 						return;
 					}
-					collectElementHelper(usesStack$1, comp, child, (name$49) => isComponent(comp) ? comp.globalVars?.[name$49] : void 0, (name$49, value$2) => {
-						if (!isComponent(comp)) return;
-						comp.globalVars ??= {};
-						comp.globalVars[name$49] = value$2;
-					});
+					{
+						const attrs = getAttributes(child).map(segmentAttr);
+						const storageKey = attrs.find((a$4) => a$4.name === "storageKey")?.value;
+						const persistAttr = attrs.find((a$4) => a$4.name === "persist")?.value;
+						const shouldPersist = persistAttr === "true" || persistAttr === "{true}" || persistAttr === "1";
+						collectElementHelper(usesStack$1, comp, child, (name$49) => isComponent(comp) ? comp.globalVars?.[name$49] : void 0, (name$49, value$2) => {
+							if (!isComponent(comp)) return;
+							comp.globalVars ??= {};
+							comp.globalVars[name$49] = value$2;
+							const effectiveStorageKey = storageKey ?? (shouldPersist ? name$49 : void 0);
+							if (effectiveStorageKey) comp.globalVars[`__storageKey_${name$49}`] = effectiveStorageKey;
+						}, void 0, ["storageKey", "persist"]);
+					}
 					return;
 				case "loaders":
 					collectLoadersElements(usesStack$1, comp, child);
@@ -8594,14 +8602,15 @@ function nodeToComponentDef(node, originalGetText, fileId, preResolvedImports) {
 		});
 		return result;
 	}
-	function collectValue(usesStack$1, element, allowName = true) {
+	function collectValue(usesStack$1, element, allowName = true, extraAllowedAttrs = []) {
 		const elementName = getComponentName(element, getText);
 		const childNodes = getChildNodes(element);
 		const nestedComponents = childNodes.filter((c$4) => c$4.kind === SyntaxKind.ElementNode && UCRegex.test(getComponentName(c$4, getText)));
 		const nestedHelpers = childNodes.filter((c$4) => c$4.kind === SyntaxKind.ElementNode && !UCRegex.test(getComponentName(c$4, getText)));
 		const attrNodes = getAttributes(element);
 		const attrsSegmented = attrNodes.map(segmentAttr);
-		const attrProps = attrsSegmented.filter((attr) => propAttrs.indexOf(attr.name) >= 0);
+		const allAllowedAttrs = extraAllowedAttrs.length > 0 ? [...propAttrs, ...extraAllowedAttrs] : propAttrs;
+		const attrProps = attrsSegmented.filter((attr) => allAllowedAttrs.indexOf(attr.name) >= 0);
 		if (attrsSegmented.length > attrProps.length) {
 			reportError(DIAGS_TRANSFORM.onlyNameValueAttrs(elementName));
 			return null;
@@ -8685,8 +8694,8 @@ function nodeToComponentDef(node, originalGetText, fileId, preResolvedImports) {
 			comp.loaders.push(loaderDef);
 		});
 	}
-	function collectElementHelper(usesStack$1, comp, child, getter, setter, nameValidator) {
-		const valueInfo = collectValue(usesStack$1, child);
+	function collectElementHelper(usesStack$1, comp, child, getter, setter, nameValidator, extraAllowedAttrs = []) {
+		const valueInfo = collectValue(usesStack$1, child, true, extraAllowedAttrs);
 		if (!valueInfo) return;
 		nameValidator?.(valueInfo?.name ?? "");
 		const name$49 = valueInfo.name;
@@ -236874,6 +236883,7 @@ const SEARCH_CATEGORIES = [
 ];
 const SEARCH_DEFAULT_CATEGORY = "other";
 const SEARCH_INDEX_FILE_NAME = "__xmlui-search-index.json";
+const SEARCH_INDEX_STUB_JSON = "[]";
 const SSG_WRITE_CONCURRENCY = 16;
 const EXTENSION_FILE_CANDIDATES = [
 	"extensions.ts",
@@ -236890,6 +236900,13 @@ function getOutputHtmlPath(outDir, routePath) {
 	if (routePath === "/") return node_path.default.join(outDir, "index.html");
 	return node_path.default.join(outDir, routePath.slice(1), "index.html");
 }
+function isHtmlNavigationRequest(url$2, acceptHeader) {
+	if (!acceptHeader?.includes("text/html")) return false;
+	const pathname = new URL(url$2, "http://localhost").pathname;
+	if (pathname === `/${SEARCH_INDEX_FILE_NAME}`) return false;
+	if (pathname.startsWith("/@") || pathname.startsWith("/__vite") || pathname.startsWith("/__id")) return false;
+	return !node_path.default.basename(pathname).includes(".");
+}
 function executeInlineScripts(html) {
 	new import_api.JSDOM(html, { runScripts: "outside-only" }).window.document.querySelectorAll("script:not([src])").forEach((script) => {
 		const content = (script.textContent || "").trim();
@@ -237097,7 +237114,134 @@ async function getWorkspaceExtensionAliases(cwd) {
 	}
 	return aliases;
 }
+function mergeAliases(existingAlias, extensionAliases) {
+	if (Array.isArray(existingAlias)) return [...existingAlias, ...Object.entries(extensionAliases).map(([find$1, replacement]) => ({
+		find: find$1,
+		replacement
+	}))];
+	if (existingAlias && typeof existingAlias === "object") return {
+		...existingAlias,
+		...extensionAliases
+	};
+	return { ...extensionAliases };
+}
+function prioritizeTypeScriptExtensions(extensions) {
+	if (!extensions) return;
+	const priority = new Map([
+		[".ts", 0],
+		[".tsx", 1],
+		[".jsx", 2],
+		[".js", 3]
+	]);
+	return [...extensions].sort((left, right) => {
+		return (priority.get(left) ?? 100) - (priority.get(right) ?? 100);
+	});
+}
+async function runDebugSsgServer() {
+	const cwd = process.cwd();
+	const sourceIndexPath = node_path.default.resolve(cwd, "index.html");
+	const tempEntryPath = node_path.default.resolve(cwd, TEMP_ENTRY_FILE_NAME);
+	log(`starting debug server in ${cwd}`);
+	executeInlineScripts(await (0, node_fs_promises.readFile)(sourceIndexPath, "utf-8"));
+	const extensionImportSpecifiers = await getExtensionImportSpecifiers(cwd);
+	if (extensionImportSpecifiers.length > 0) log(`detected extensions: ${extensionImportSpecifiers.join(", ")}`);
+	log("creating SSR module");
+	await (0, node_fs_promises.writeFile)(tempEntryPath, getSsgEntrySource(extensionImportSpecifiers), "utf-8");
+	process.once("exit", () => {
+		try {
+			(0, node_fs.rmSync)(tempEntryPath, { force: true });
+		} catch {}
+	});
+	const viteConfig = await getViteConfig({});
+	const extensionAliases = await getWorkspaceExtensionAliases(cwd);
+	if (Object.keys(extensionAliases).length > 0) log(`using workspace extension aliases: ${Object.keys(extensionAliases).join(", ")}`);
+	const mergedAlias = mergeAliases(viteConfig.resolve?.alias, extensionAliases);
+	const basePlugins = Array.isArray(viteConfig.plugins) ? viteConfig.plugins : viteConfig.plugins ? [viteConfig.plugins] : [];
+	const ssgDebugPlugin = {
+		name: "xmlui-ssg-debug",
+		configureServer(server$1) {
+			server$1.middlewares.use(async (req$1, res, next) => {
+				const requestUrl = req$1.originalUrl || req$1.url || "/";
+				if (new URL(requestUrl, "http://localhost").pathname === `/${SEARCH_INDEX_FILE_NAME}`) {
+					res.statusCode = 200;
+					res.setHeader("Content-Type", "application/json");
+					res.end(SEARCH_INDEX_STUB_JSON);
+					return;
+				}
+				if (!isHtmlNavigationRequest(requestUrl, req$1.headers.accept)) {
+					next();
+					return;
+				}
+				try {
+					const shellHtml = await (0, node_fs_promises.readFile)(sourceIndexPath, "utf-8");
+					const transformedShell = await server$1.transformIndexHtml(requestUrl, shellHtml, req$1.originalUrl);
+					const renderModule = await server$1.ssrLoadModule(`${(0, node_url.pathToFileURL)(tempEntryPath).href}?t=${Date.now()}`);
+					if (!renderModule?.renderPath) throw new Error("failed to load renderPath from temporary SSG entry module");
+					const finalHtml = applyRenderToShell(transformedShell, renderModule.renderPath(requestUrl));
+					res.statusCode = 200;
+					res.setHeader("Content-Type", "text/html");
+					res.end(finalHtml);
+				} catch (error$2) {
+					const err$1 = error$2;
+					server$1.ssrFixStacktrace(err$1);
+					res.statusCode = 500;
+					res.setHeader("Content-Type", "text/plain");
+					res.end(err$1.stack || err$1.message || String(err$1));
+				}
+			});
+		}
+	};
+	const server = await (0, vite.createServer)({
+		...viteConfig,
+		resolve: {
+			...viteConfig.resolve,
+			alias: mergedAlias,
+			extensions: prioritizeTypeScriptExtensions(viteConfig.resolve?.extensions)
+		},
+		define: {
+			...viteConfig.define,
+			"process.env.VITE_BUILD_MODE": "\"ALL\"",
+			"process.env.VITE_DEV_MODE": true,
+			"process.env.VITE_STANDALONE": process.env.VITE_STANDALONE,
+			"process.env.VITE_MOCK_ENABLED": true,
+			"process.env.VITE_INCLUDE_ALL_COMPONENTS": "\"true\"",
+			"process.env.VITE_USER_COMPONENTS_Inspect": "\"true\""
+		},
+		plugins: [...basePlugins, ssgDebugPlugin]
+	});
+	if (!server.httpServer) throw new Error("HTTP server not available");
+	let cleanedUp = false;
+	const cleanup = async () => {
+		if (cleanedUp) return;
+		cleanedUp = true;
+		await (0, node_fs_promises.rm)(tempEntryPath, { force: true });
+	};
+	const shutdown = async (signal) => {
+		log(`received ${signal}, shutting down debug server`);
+		await server.close();
+		await cleanup();
+		process.exit(0);
+	};
+	process.once("SIGINT", () => {
+		shutdown("SIGINT");
+	});
+	process.once("SIGTERM", () => {
+		shutdown("SIGTERM");
+	});
+	try {
+		await server.listen();
+		server.printUrls();
+		log(`serving search index stub at /${SEARCH_INDEX_FILE_NAME}`);
+	} catch (error$2) {
+		await cleanup();
+		throw error$2;
+	}
+}
 const ssg = async ({ outDir = "dist-ssg", fallbackFile = "200", debug: debug$3 = false, contentDir = "content" } = {}) => {
+	if (debug$3) {
+		await runDebugSsgServer();
+		return;
+	}
 	const cwd = process.cwd();
 	const outPath = node_path.default.resolve(cwd, outDir);
 	const distPath = node_path.default.resolve(cwd, "dist");
@@ -237216,16 +237360,11 @@ const ssg = async ({ outDir = "dist-ssg", fallbackFile = "200", debug: debug$3 =
 		await (0, node_fs_promises.writeFile)(fallbackOutputFile, fallbackHtml, "utf-8");
 		log(`wrote ${fallbackOutputFile}`);
 	} finally {
-		if (debug$3) {
-			log(`debug mode: preserved SSR entry at ${tempEntryPath}`);
-			log(`debug mode: preserved SSR build at ${ssrBuildPath}`);
-		} else {
-			await (0, node_fs_promises.rm)(tempEntryPath, { force: true });
-			await (0, node_fs_promises.rm)(ssrBuildPath, {
-				recursive: true,
-				force: true
-			});
-		}
+		await (0, node_fs_promises.rm)(tempEntryPath, { force: true });
+		await (0, node_fs_promises.rm)(ssrBuildPath, {
+			recursive: true,
+			force: true
+		});
 	}
 	log(`completed. static files are in ${outPath}`);
 };
@@ -237420,7 +237559,7 @@ function getStringArg(arg, defaultValue) {
 		description: "Base name for the fallback HTML file served for unknown routes"
 	}).option("debug", {
 		type: "boolean",
-		description: "Preserve intermediate SSR files for debugging",
+		description: "Run SSG in Vite SSR debug mode",
 		hidden: true
 	}).option("contentDir", {
 		type: "string",

package/dist/bin/index.js

@@ -14,6 +14,7 @@ import * as path$4 from "path";
 import path from "path";
 import { parseRegExpLiteral } from "@eslint-community/regexpp";
 import * as fs$4 from "node:fs";
+import { rmSync } from "node:fs";
 import { fileURLToPath, pathToFileURL } from "node:url";
 import path$1 from "node:path";
 import { cp as cp$1, mkdir as mkdir$1, readFile, readdir, rm as rm$1, stat, writeFile as writeFile$1 } from "node:fs/promises";
@@ -8451,11 +8452,19 @@ function nodeToComponentDef(node, originalGetText, fileId, preResolvedImports) {
 						reportError(DIAGS_TRANSFORM.globalNotAllowedInNested);
 						return;
 					}
-					collectElementHelper(usesStack$1, comp, child, (name$49) => isComponent(comp) ? comp.globalVars?.[name$49] : void 0, (name$49, value$2) => {
-						if (!isComponent(comp)) return;
-						comp.globalVars ??= {};
-						comp.globalVars[name$49] = value$2;
-					});
+					{
+						const attrs = getAttributes(child).map(segmentAttr);
+						const storageKey = attrs.find((a$4) => a$4.name === "storageKey")?.value;
+						const persistAttr = attrs.find((a$4) => a$4.name === "persist")?.value;
+						const shouldPersist = persistAttr === "true" || persistAttr === "{true}" || persistAttr === "1";
+						collectElementHelper(usesStack$1, comp, child, (name$49) => isComponent(comp) ? comp.globalVars?.[name$49] : void 0, (name$49, value$2) => {
+							if (!isComponent(comp)) return;
+							comp.globalVars ??= {};
+							comp.globalVars[name$49] = value$2;
+							const effectiveStorageKey = storageKey ?? (shouldPersist ? name$49 : void 0);
+							if (effectiveStorageKey) comp.globalVars[`__storageKey_${name$49}`] = effectiveStorageKey;
+						}, void 0, ["storageKey", "persist"]);
+					}
 					return;
 				case "loaders":
 					collectLoadersElements(usesStack$1, comp, child);
@@ -8578,14 +8587,15 @@ function nodeToComponentDef(node, originalGetText, fileId, preResolvedImports) {
 		});
 		return result;
 	}
-	function collectValue(usesStack$1, element, allowName = true) {
+	function collectValue(usesStack$1, element, allowName = true, extraAllowedAttrs = []) {
 		const elementName = getComponentName(element, getText);
 		const childNodes = getChildNodes(element);
 		const nestedComponents = childNodes.filter((c$4) => c$4.kind === SyntaxKind.ElementNode && UCRegex.test(getComponentName(c$4, getText)));
 		const nestedHelpers = childNodes.filter((c$4) => c$4.kind === SyntaxKind.ElementNode && !UCRegex.test(getComponentName(c$4, getText)));
 		const attrNodes = getAttributes(element);
 		const attrsSegmented = attrNodes.map(segmentAttr);
-		const attrProps = attrsSegmented.filter((attr) => propAttrs.indexOf(attr.name) >= 0);
+		const allAllowedAttrs = extraAllowedAttrs.length > 0 ? [...propAttrs, ...extraAllowedAttrs] : propAttrs;
+		const attrProps = attrsSegmented.filter((attr) => allAllowedAttrs.indexOf(attr.name) >= 0);
 		if (attrsSegmented.length > attrProps.length) {
 			reportError(DIAGS_TRANSFORM.onlyNameValueAttrs(elementName));
 			return null;
@@ -8669,8 +8679,8 @@ function nodeToComponentDef(node, originalGetText, fileId, preResolvedImports) {
 			comp.loaders.push(loaderDef);
 		});
 	}
-	function collectElementHelper(usesStack$1, comp, child, getter, setter, nameValidator) {
-		const valueInfo = collectValue(usesStack$1, child);
+	function collectElementHelper(usesStack$1, comp, child, getter, setter, nameValidator, extraAllowedAttrs = []) {
+		const valueInfo = collectValue(usesStack$1, child, true, extraAllowedAttrs);
 		if (!valueInfo) return;
 		nameValidator?.(valueInfo?.name ?? "");
 		const name$49 = valueInfo.name;
@@ -236868,6 +236878,7 @@ const SEARCH_CATEGORIES = [
 ];
 const SEARCH_DEFAULT_CATEGORY = "other";
 const SEARCH_INDEX_FILE_NAME = "__xmlui-search-index.json";
+const SEARCH_INDEX_STUB_JSON = "[]";
 const SSG_WRITE_CONCURRENCY = 16;
 const EXTENSION_FILE_CANDIDATES = [
 	"extensions.ts",
@@ -236884,6 +236895,13 @@ function getOutputHtmlPath(outDir, routePath) {
 	if (routePath === "/") return path$1.join(outDir, "index.html");
 	return path$1.join(outDir, routePath.slice(1), "index.html");
 }
+function isHtmlNavigationRequest(url$2, acceptHeader) {
+	if (!acceptHeader?.includes("text/html")) return false;
+	const pathname = new URL(url$2, "http://localhost").pathname;
+	if (pathname === `/${SEARCH_INDEX_FILE_NAME}`) return false;
+	if (pathname.startsWith("/@") || pathname.startsWith("/__vite") || pathname.startsWith("/__id")) return false;
+	return !path$1.basename(pathname).includes(".");
+}
 function executeInlineScripts(html) {
 	new import_api.JSDOM(html, { runScripts: "outside-only" }).window.document.querySelectorAll("script:not([src])").forEach((script) => {
 		const content = (script.textContent || "").trim();
@@ -237091,7 +237109,134 @@ async function getWorkspaceExtensionAliases(cwd) {
 	}
 	return aliases;
 }
+function mergeAliases(existingAlias, extensionAliases) {
+	if (Array.isArray(existingAlias)) return [...existingAlias, ...Object.entries(extensionAliases).map(([find$1, replacement]) => ({
+		find: find$1,
+		replacement
+	}))];
+	if (existingAlias && typeof existingAlias === "object") return {
+		...existingAlias,
+		...extensionAliases
+	};
+	return { ...extensionAliases };
+}
+function prioritizeTypeScriptExtensions(extensions) {
+	if (!extensions) return;
+	const priority = new Map([
+		[".ts", 0],
+		[".tsx", 1],
+		[".jsx", 2],
+		[".js", 3]
+	]);
+	return [...extensions].sort((left, right) => {
+		return (priority.get(left) ?? 100) - (priority.get(right) ?? 100);
+	});
+}
+async function runDebugSsgServer() {
+	const cwd = process.cwd();
+	const sourceIndexPath = path$1.resolve(cwd, "index.html");
+	const tempEntryPath = path$1.resolve(cwd, TEMP_ENTRY_FILE_NAME);
+	log(`starting debug server in ${cwd}`);
+	executeInlineScripts(await readFile(sourceIndexPath, "utf-8"));
+	const extensionImportSpecifiers = await getExtensionImportSpecifiers(cwd);
+	if (extensionImportSpecifiers.length > 0) log(`detected extensions: ${extensionImportSpecifiers.join(", ")}`);
+	log("creating SSR module");
+	await writeFile$1(tempEntryPath, getSsgEntrySource(extensionImportSpecifiers), "utf-8");
+	process.once("exit", () => {
+		try {
+			rmSync(tempEntryPath, { force: true });
+		} catch {}
+	});
+	const viteConfig = await getViteConfig({});
+	const extensionAliases = await getWorkspaceExtensionAliases(cwd);
+	if (Object.keys(extensionAliases).length > 0) log(`using workspace extension aliases: ${Object.keys(extensionAliases).join(", ")}`);
+	const mergedAlias = mergeAliases(viteConfig.resolve?.alias, extensionAliases);
+	const basePlugins = Array.isArray(viteConfig.plugins) ? viteConfig.plugins : viteConfig.plugins ? [viteConfig.plugins] : [];
+	const ssgDebugPlugin = {
+		name: "xmlui-ssg-debug",
+		configureServer(server$1) {
+			server$1.middlewares.use(async (req$1, res, next) => {
+				const requestUrl = req$1.originalUrl || req$1.url || "/";
+				if (new URL(requestUrl, "http://localhost").pathname === `/${SEARCH_INDEX_FILE_NAME}`) {
+					res.statusCode = 200;
+					res.setHeader("Content-Type", "application/json");
+					res.end(SEARCH_INDEX_STUB_JSON);
+					return;
+				}
+				if (!isHtmlNavigationRequest(requestUrl, req$1.headers.accept)) {
+					next();
+					return;
+				}
+				try {
+					const shellHtml = await readFile(sourceIndexPath, "utf-8");
+					const transformedShell = await server$1.transformIndexHtml(requestUrl, shellHtml, req$1.originalUrl);
+					const renderModule = await server$1.ssrLoadModule(`${pathToFileURL(tempEntryPath).href}?t=${Date.now()}`);
+					if (!renderModule?.renderPath) throw new Error("failed to load renderPath from temporary SSG entry module");
+					const finalHtml = applyRenderToShell(transformedShell, renderModule.renderPath(requestUrl));
+					res.statusCode = 200;
+					res.setHeader("Content-Type", "text/html");
+					res.end(finalHtml);
+				} catch (error$2) {
+					const err$1 = error$2;
+					server$1.ssrFixStacktrace(err$1);
+					res.statusCode = 500;
+					res.setHeader("Content-Type", "text/plain");
+					res.end(err$1.stack || err$1.message || String(err$1));
+				}
+			});
+		}
+	};
+	const server = await createServer({
+		...viteConfig,
+		resolve: {
+			...viteConfig.resolve,
+			alias: mergedAlias,
+			extensions: prioritizeTypeScriptExtensions(viteConfig.resolve?.extensions)
+		},
+		define: {
+			...viteConfig.define,
+			"process.env.VITE_BUILD_MODE": "\"ALL\"",
+			"process.env.VITE_DEV_MODE": true,
+			"process.env.VITE_STANDALONE": process.env.VITE_STANDALONE,
+			"process.env.VITE_MOCK_ENABLED": true,
+			"process.env.VITE_INCLUDE_ALL_COMPONENTS": "\"true\"",
+			"process.env.VITE_USER_COMPONENTS_Inspect": "\"true\""
+		},
+		plugins: [...basePlugins, ssgDebugPlugin]
+	});
+	if (!server.httpServer) throw new Error("HTTP server not available");
+	let cleanedUp = false;
+	const cleanup = async () => {
+		if (cleanedUp) return;
+		cleanedUp = true;
+		await rm$1(tempEntryPath, { force: true });
+	};
+	const shutdown = async (signal) => {
+		log(`received ${signal}, shutting down debug server`);
+		await server.close();
+		await cleanup();
+		process.exit(0);
+	};
+	process.once("SIGINT", () => {
+		shutdown("SIGINT");
+	});
+	process.once("SIGTERM", () => {
+		shutdown("SIGTERM");
+	});
+	try {
+		await server.listen();
+		server.printUrls();
+		log(`serving search index stub at /${SEARCH_INDEX_FILE_NAME}`);
+	} catch (error$2) {
+		await cleanup();
+		throw error$2;
+	}
+}
 const ssg = async ({ outDir = "dist-ssg", fallbackFile = "200", debug: debug$3 = false, contentDir = "content" } = {}) => {
+	if (debug$3) {
+		await runDebugSsgServer();
+		return;
+	}
 	const cwd = process.cwd();
 	const outPath = path$1.resolve(cwd, outDir);
 	const distPath = path$1.resolve(cwd, "dist");
@@ -237210,16 +237355,11 @@ const ssg = async ({ outDir = "dist-ssg", fallbackFile = "200", debug: debug$3 =
 		await writeFile$1(fallbackOutputFile, fallbackHtml, "utf-8");
 		log(`wrote ${fallbackOutputFile}`);
 	} finally {
-		if (debug$3) {
-			log(`debug mode: preserved SSR entry at ${tempEntryPath}`);
-			log(`debug mode: preserved SSR build at ${ssrBuildPath}`);
-		} else {
-			await rm$1(tempEntryPath, { force: true });
-			await rm$1(ssrBuildPath, {
-				recursive: true,
-				force: true
-			});
-		}
+		await rm$1(tempEntryPath, { force: true });
+		await rm$1(ssrBuildPath, {
+			recursive: true,
+			force: true
+		});
 	}
 	log(`completed. static files are in ${outPath}`);
 };
@@ -237414,7 +237554,7 @@ yargs(hideBin(process.argv)).command("build", "Build the project", (yargs$1) =>
 		description: "Base name for the fallback HTML file served for unknown routes"
 	}).option("debug", {
 		type: "boolean",
-		description: "Preserve intermediate SSR files for debugging",
+		description: "Run SSG in Vite SSR debug mode",
 		hidden: true
 	}).option("contentDir", {
 		type: "string",

package/dist/for-node/server.cjs

@@ -623,6 +623,19 @@ const layoutOptionKeys = [
 	"overflowX",
 	"overflowY",
 	"zIndex",
+	"scrollSnapType",
+	"scrollSnapAlign",
+	"scrollSnapStop",
+	"scrollPadding",
+	"scrollPaddingTop",
+	"scrollPaddingRight",
+	"scrollPaddingBottom",
+	"scrollPaddingLeft",
+	"scrollMargin",
+	"scrollMarginTop",
+	"scrollMarginRight",
+	"scrollMarginBottom",
+	"scrollMarginLeft",
 	"color",
 	"fontFamily",
 	"fontSize",

package/dist/for-node/server.js

@@ -594,6 +594,19 @@ const layoutOptionKeys = [
 	"overflowX",
 	"overflowY",
 	"zIndex",
+	"scrollSnapType",
+	"scrollSnapAlign",
+	"scrollSnapStop",
+	"scrollPadding",
+	"scrollPaddingTop",
+	"scrollPaddingRight",
+	"scrollPaddingBottom",
+	"scrollPaddingLeft",
+	"scrollMargin",
+	"scrollMarginTop",
+	"scrollMarginRight",
+	"scrollMarginBottom",
+	"scrollMarginLeft",
 	"color",
 	"fontFamily",
 	"fontSize",

package/dist/for-node/vite-xmlui-plugin.cjs

@@ -8425,11 +8425,19 @@ function nodeToComponentDef(node, originalGetText, fileId, preResolvedImports) {
 						reportError(DIAGS_TRANSFORM.globalNotAllowedInNested);
 						return;
 					}
-					collectElementHelper(usesStack$1, comp, child, (name) => isComponent(comp) ? comp.globalVars?.[name] : void 0, (name, value) => {
-						if (!isComponent(comp)) return;
-						comp.globalVars ??= {};
-						comp.globalVars[name] = value;
-					});
+					{
+						const attrs = getAttributes(child).map(segmentAttr);
+						const storageKey = attrs.find((a) => a.name === "storageKey")?.value;
+						const persistAttr = attrs.find((a) => a.name === "persist")?.value;
+						const shouldPersist = persistAttr === "true" || persistAttr === "{true}" || persistAttr === "1";
+						collectElementHelper(usesStack$1, comp, child, (name) => isComponent(comp) ? comp.globalVars?.[name] : void 0, (name, value) => {
+							if (!isComponent(comp)) return;
+							comp.globalVars ??= {};
+							comp.globalVars[name] = value;
+							const effectiveStorageKey = storageKey ?? (shouldPersist ? name : void 0);
+							if (effectiveStorageKey) comp.globalVars[`__storageKey_${name}`] = effectiveStorageKey;
+						}, void 0, ["storageKey", "persist"]);
+					}
 					return;
 				case "loaders":
 					collectLoadersElements(usesStack$1, comp, child);
@@ -8552,14 +8560,15 @@ function nodeToComponentDef(node, originalGetText, fileId, preResolvedImports) {
 		});
 		return result;
 	}
-	function collectValue(usesStack$1, element, allowName = true) {
+	function collectValue(usesStack$1, element, allowName = true, extraAllowedAttrs = []) {
 		const elementName = getComponentName(element, getText);
 		const childNodes = getChildNodes(element);
 		const nestedComponents = childNodes.filter((c) => c.kind === SyntaxKind.ElementNode && UCRegex.test(getComponentName(c, getText)));
 		const nestedHelpers = childNodes.filter((c) => c.kind === SyntaxKind.ElementNode && !UCRegex.test(getComponentName(c, getText)));
 		const attrNodes = getAttributes(element);
 		const attrsSegmented = attrNodes.map(segmentAttr);
-		const attrProps = attrsSegmented.filter((attr) => propAttrs.indexOf(attr.name) >= 0);
+		const allAllowedAttrs = extraAllowedAttrs.length > 0 ? [...propAttrs, ...extraAllowedAttrs] : propAttrs;
+		const attrProps = attrsSegmented.filter((attr) => allAllowedAttrs.indexOf(attr.name) >= 0);
 		if (attrsSegmented.length > attrProps.length) {
 			reportError(DIAGS_TRANSFORM.onlyNameValueAttrs(elementName));
 			return null;
@@ -8643,8 +8652,8 @@ function nodeToComponentDef(node, originalGetText, fileId, preResolvedImports) {
 			comp.loaders.push(loaderDef);
 		});
 	}
-	function collectElementHelper(usesStack$1, comp, child, getter, setter, nameValidator) {
-		const valueInfo = collectValue(usesStack$1, child);
+	function collectElementHelper(usesStack$1, comp, child, getter, setter, nameValidator, extraAllowedAttrs = []) {
+		const valueInfo = collectValue(usesStack$1, child, true, extraAllowedAttrs);
 		if (!valueInfo) return;
 		nameValidator?.(valueInfo?.name ?? "");
 		const name = valueInfo.name;

package/dist/for-node/vite-xmlui-plugin.js

@@ -8425,11 +8425,19 @@ function nodeToComponentDef(node, originalGetText, fileId, preResolvedImports) {
 						reportError(DIAGS_TRANSFORM.globalNotAllowedInNested);
 						return;
 					}
-					collectElementHelper(usesStack$1, comp, child, (name) => isComponent(comp) ? comp.globalVars?.[name] : void 0, (name, value) => {
-						if (!isComponent(comp)) return;
-						comp.globalVars ??= {};
-						comp.globalVars[name] = value;
-					});
+					{
+						const attrs = getAttributes(child).map(segmentAttr);
+						const storageKey = attrs.find((a) => a.name === "storageKey")?.value;
+						const persistAttr = attrs.find((a) => a.name === "persist")?.value;
+						const shouldPersist = persistAttr === "true" || persistAttr === "{true}" || persistAttr === "1";
+						collectElementHelper(usesStack$1, comp, child, (name) => isComponent(comp) ? comp.globalVars?.[name] : void 0, (name, value) => {
+							if (!isComponent(comp)) return;
+							comp.globalVars ??= {};
+							comp.globalVars[name] = value;
+							const effectiveStorageKey = storageKey ?? (shouldPersist ? name : void 0);
+							if (effectiveStorageKey) comp.globalVars[`__storageKey_${name}`] = effectiveStorageKey;
+						}, void 0, ["storageKey", "persist"]);
+					}
 					return;
 				case "loaders":
 					collectLoadersElements(usesStack$1, comp, child);
@@ -8552,14 +8560,15 @@ function nodeToComponentDef(node, originalGetText, fileId, preResolvedImports) {
 		});
 		return result;
 	}
-	function collectValue(usesStack$1, element, allowName = true) {
+	function collectValue(usesStack$1, element, allowName = true, extraAllowedAttrs = []) {
 		const elementName = getComponentName(element, getText);
 		const childNodes = getChildNodes(element);
 		const nestedComponents = childNodes.filter((c) => c.kind === SyntaxKind.ElementNode && UCRegex.test(getComponentName(c, getText)));
 		const nestedHelpers = childNodes.filter((c) => c.kind === SyntaxKind.ElementNode && !UCRegex.test(getComponentName(c, getText)));
 		const attrNodes = getAttributes(element);
 		const attrsSegmented = attrNodes.map(segmentAttr);
-		const attrProps = attrsSegmented.filter((attr) => propAttrs.indexOf(attr.name) >= 0);
+		const allAllowedAttrs = extraAllowedAttrs.length > 0 ? [...propAttrs, ...extraAllowedAttrs] : propAttrs;
+		const attrProps = attrsSegmented.filter((attr) => allAllowedAttrs.indexOf(attr.name) >= 0);
 		if (attrsSegmented.length > attrProps.length) {
 			reportError(DIAGS_TRANSFORM.onlyNameValueAttrs(elementName));
 			return null;
@@ -8643,8 +8652,8 @@ function nodeToComponentDef(node, originalGetText, fileId, preResolvedImports) {
 			comp.loaders.push(loaderDef);
 		});
 	}
-	function collectElementHelper(usesStack$1, comp, child, getter, setter, nameValidator) {
-		const valueInfo = collectValue(usesStack$1, child);
+	function collectElementHelper(usesStack$1, comp, child, getter, setter, nameValidator, extraAllowedAttrs = []) {
+		const valueInfo = collectValue(usesStack$1, child, true, extraAllowedAttrs);
 		if (!valueInfo) return;
 		nameValidator?.(valueInfo?.name ?? "");
 		const name = valueInfo.name;