@sudajs/cli 0.18.9 → 0.18.10

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 import { ThemeModule, ThemeStarterPage } from '@sudajs/theme-engine';
-import { ThemeRender, extractLayoutChrome, resolveAssetPath } from '@sudajs/theme-engine/server';
+import { ThemeRender, extractLayoutChrome, resolveAssetPath, ThemePreviewLocaleMessages } from '@sudajs/theme-engine/server';
 import { Command } from 'commander';
 import { createElement } from 'react';
 import { renderToString } from 'react-dom/server';
@@ -1816,6 +1816,7 @@ declare const __testUtils: {
     performUpdateThemeSettings: typeof performUpdateThemeSettings;
     getRemoteThemeSettings: typeof getRemoteThemeSettings;
     renderDevStarterPageHtml: typeof renderDevStarterPageHtml;
+    writeVitePreviewEntries: typeof writeVitePreviewEntries;
     resolveDevStarterSlug: typeof resolveDevStarterSlug;
     resolveScreenshotOptions: typeof resolveScreenshotOptions;
     slugifyThemeName: typeof slugifyThemeName;
@@ -1831,6 +1832,7 @@ declare const __testUtils: {
     updateRemotePageDraft: typeof updateRemotePageDraft;
 };
 declare function watchTheme(root: string, port: number): Promise<void>;
+declare function writeVitePreviewEntries(root: string): Promise<void>;
 declare function withSerializedVitePreviewLocaleLoad<Result>(server: object, load: () => Promise<Result>): Promise<Result>;
 declare function resolveDevStarterSlug(pathname: string): string | null | undefined;
 declare function resolveThemePreviewLocale(params: {
@@ -1856,7 +1858,7 @@ interface ThemeRenderer {
     renderToString: typeof renderToString;
 }
 declare function loadThemeScopedRenderer(themeRoot: string): Promise<ThemeRenderer>;
-declare function renderDevStarterPageHtml(theme: ValidatedTheme, page: ThemeStarterPage, renderer: ThemeRenderer, locale?: string, preserveLang?: boolean): string;
+declare function renderDevStarterPageHtml(theme: ValidatedTheme, page: ThemeStarterPage, renderer: ThemeRenderer, locale?: string, preserveLang?: boolean, previewLocaleMessages?: ThemePreviewLocaleMessages): string;
 interface ScreenshotOptions extends ThemeRootOptions {
     device?: string[] | string;
     output?: string;

package/dist/index.js

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 import { createHash } from 'crypto';
 import { existsSync } from 'fs';
-import fs, { readFile, writeFile, stat, readdir, mkdir, copyFile, rm } from 'fs/promises';
+import fs, { readFile, mkdir, writeFile, stat, readdir, copyFile, rm } from 'fs/promises';
 import { createRequire } from 'module';
 import path2 from 'path';
 import { createInterface } from 'readline/promises';
@@ -12,6 +12,9 @@ import { themeDesignSystemSchema, createThemeDesignCssVariables, createThemeAgen
 import { themeManifestSchema, runWithThemePreviewLocale } from '@sudajs/theme-engine/server';
 import { Command } from 'commander';
 import { build } from 'esbuild';
+import { CircleCheck } from 'lucide-react';
+import { createElement } from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
 import { z } from 'zod';
 import os from 'os';
 import pc from 'picocolors';
@@ -1520,26 +1523,7 @@ async function buildClientRuntime(root, minify) {
   await mkdir(path2.dirname(generatedEntry), { recursive: true });
   await writeFile(
     generatedEntry,
-    [
-      '"use client";',
-      'import type { ThemeClientHooks, ThemeClientRuntime, ThemeRenderModule } from "@sudajs/theme-engine/runtime";',
-      'import * as themeConfig from "../src/config.js";',
-      clientHooksImport,
-      "const theme: ThemeRenderModule = {",
-      "  pageConfig: themeConfig.pageConfig,",
-      "  layoutConfig: themeConfig.layoutConfig,",
-      "};",
-      'if ("rendering" in themeConfig && themeConfig.rendering !== undefined) {',
-      "  theme.rendering = themeConfig.rendering;",
-      "}",
-      "const hooks: ThemeClientHooks = clientHooks;",
-      "const runtime: ThemeClientRuntime = { theme };",
-      "if (hooks.initialize !== undefined) {",
-      "  runtime.initialize = hooks.initialize;",
-      "}",
-      "export default runtime;",
-      ""
-    ].join("\n"),
+    createClientRuntimeSource(clientHooksImport, true),
     "utf8"
   );
   await mkdir(path2.join(root, "dist"), { recursive: true });
@@ -1754,6 +1738,7 @@ var __testUtils = {
   performUpdateThemeSettings,
   getRemoteThemeSettings,
   renderDevStarterPageHtml,
+  writeVitePreviewEntries,
   resolveDevStarterSlug,
   resolveScreenshotOptions,
   slugifyThemeName,
@@ -1825,13 +1810,17 @@ async function watchTheme(root, port) {
 async function startViteDevPreviewServer(root, port) {
   const viteConfig = await findViteConfig(root);
   const vite = await loadThemeVite(root);
+  await writeVitePreviewEntries(root);
   const host = "127.0.0.1";
   const server = await vite.createServer({
     root,
     configFile: viteConfig,
     configLoader: "runner",
-    cacheDir: path2.join(root, ".suda-build", "vite-cache"),
+    cacheDir: path2.join(root, ".suda-build", "node_modules", ".vite"),
     appType: "custom",
+    optimizeDeps: {
+      entries: [".suda-build/preview-client.ts"]
+    },
     server: { host, port },
     plugins: [createSudaPreviewVitePlugin(root)]
   });
@@ -1843,6 +1832,55 @@ async function startViteDevPreviewServer(root, port) {
     close: () => server.close()
   };
 }
+async function writeVitePreviewEntries(root) {
+  const clientHooksPath = path2.join(root, "src", "client.ts");
+  const clientHooksImport = existsSync(clientHooksPath) ? 'import { clientHooks } from "../src/client.js";' : "const clientHooks = {};";
+  const buildDir = path2.join(root, ".suda-build");
+  await mkdir(buildDir, { recursive: true });
+  await writeFile(
+    path2.join(buildDir, "runtime.dev.ts"),
+    createClientRuntimeSource(clientHooksImport, false),
+    "utf8"
+  );
+  await writeFile(
+    path2.join(buildDir, "preview-client.ts"),
+    [
+      'import { hydrateThemePage, loadThemeRuntime } from "@sudajs/theme-engine/client";',
+      'import { installThemePreviewLocale, resolveAssetPath } from "@sudajs/theme-engine/site-runtime";',
+      'const payloadElement=document.querySelector("#suda-theme-hydration-data");',
+      'if(!payloadElement){throw new Error("Missing Suda theme hydration payload.")}',
+      "const payload=JSON.parse(payloadElement.textContent ?? '{}');",
+      "if(payload.previewLocaleMessages){installThemePreviewLocale(payload.previewLocaleMessages)}",
+      'const runtime=(await loadThemeRuntime("/.suda-build/runtime.dev.ts")).default;',
+      'const metadata={contactForm:payload.contactForm,resolveAssetUrl:(value: string | undefined)=>resolveAssetPath(value,{legacyResolve:(key)=>key.startsWith("themes/")?`/api/themes/${key.slice("themes/".length)}`:undefined})};',
+      'await hydrateThemePage({container:document.querySelector("[data-theme-hydration-root]")!,runtime,pageData:payload.pageData,layoutData:payload.layoutData,metadata,onRecoverableError:(error)=>console.error("[theme-dev] theme hydration recovered from an error",error)});',
+      ""
+    ].join("\n"),
+    "utf8"
+  );
+}
+function createClientRuntimeSource(clientHooksImport, useClientDirective) {
+  return [
+    ...useClientDirective ? ['"use client";'] : [],
+    'import type { ThemeClientHooks, ThemeClientRuntime, ThemeRenderModule } from "@sudajs/theme-engine/runtime";',
+    'import * as themeConfig from "../src/config.js";',
+    clientHooksImport,
+    "const theme: ThemeRenderModule = {",
+    "  pageConfig: themeConfig.pageConfig,",
+    "  layoutConfig: themeConfig.layoutConfig,",
+    "};",
+    'if ("rendering" in themeConfig && themeConfig.rendering !== undefined) {',
+    "  theme.rendering = themeConfig.rendering;",
+    "}",
+    "const hooks: ThemeClientHooks = clientHooks;",
+    "const runtime: ThemeClientRuntime = { theme };",
+    "if (hooks.initialize !== undefined) {",
+    "  runtime.initialize = hooks.initialize;",
+    "}",
+    "export default runtime;",
+    ""
+  ].join("\n");
+}
 function createSudaPreviewVitePlugin(root) {
   return {
     name: "suda-theme-preview",
@@ -1865,54 +1903,31 @@ function createSudaPreviewVitePlugin(root) {
             const acceptLanguageHeader = request.headers["accept-language"];
             const acceptLanguage = Array.isArray(acceptLanguageHeader) ? acceptLanguageHeader.join(",") : acceptLanguageHeader;
             const explicitLang = url.searchParams.get("lang");
-            const { theme, locale } = await loadLocalizedViteDevTheme(
+            const localized = await loadLocalizedViteDevTheme(
               root,
               server,
               explicitLang,
               acceptLanguage
             );
             const renderer = await loadThemeScopedRenderer(root);
-            if (slug === null) {
-              const homeSlug = pickStarterSlug(theme);
-              if (!homeSlug) {
-                response.writeHead(404, { "Content-Type": "text/plain; charset=utf-8" });
-                response.end("No starter pages declared by this theme.");
-                return;
-              }
-              const starter2 = findStarterPage(theme, homeSlug);
-              if (!starter2) {
-                response.writeHead(404, { "Content-Type": "text/plain; charset=utf-8" });
-                response.end(`Unknown starter page: ${homeSlug}`);
-                return;
-              }
-              const html2 = await server.transformIndexHtml(
-                url.pathname,
-                renderDevStarterPageHtml(
-                  theme,
-                  starter2,
-                  renderer,
-                  locale,
-                  canonicalLocale(explicitLang) !== null
-                )
-              );
-              response.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
-              response.end(html2);
-              return;
-            }
-            const starter = findStarterPage(theme, slug);
+            const starterSlug = slug ?? pickStarterSlug(localized.theme);
+            const starter = starterSlug ? findStarterPage(localized.theme, starterSlug) : null;
             if (!starter) {
               response.writeHead(404, { "Content-Type": "text/plain; charset=utf-8" });
-              response.end(`Unknown starter page: ${slug}`);
+              response.end(
+                starterSlug ? `Unknown starter page: ${starterSlug}` : "No starter pages declared by this theme."
+              );
               return;
             }
             const html = await server.transformIndexHtml(
               url.pathname,
               renderDevStarterPageHtml(
-                theme,
+                localized.theme,
                 starter,
                 renderer,
-                locale,
-                canonicalLocale(explicitLang) !== null
+                localized.locale,
+                canonicalLocale(explicitLang) !== null,
+                localized.previewLocaleMessages
               )
             );
             response.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
@@ -1940,13 +1955,13 @@ async function loadLocalizedViteDevTheme(root, server, explicitLang, acceptLangu
     if (!baseTheme.module.manifest.previewLocales) {
       return { theme: baseTheme, locale };
     }
-    const messages = await readDevPreviewLocaleMessages(root, locale);
+    const previewLocaleMessages = await readDevPreviewLocaleMessages(root, locale);
     server.moduleGraph.invalidateAll();
     const theme = await runWithThemePreviewLocale(
-      messages,
+      previewLocaleMessages,
       () => loadViteDevTheme(root, server)
     );
-    return { theme, locale };
+    return { theme, locale, previewLocaleMessages };
   });
 }
 var vitePreviewLocaleLoadTails = /* @__PURE__ */ new WeakMap();
@@ -1998,6 +2013,9 @@ function resolveDevStarterSlug(pathname) {
   if (pathname === "/") {
     return null;
   }
+  if (pathname.startsWith("/@")) {
+    return void 0;
+  }
   const normalized = pathname.replace(/^\/+/, "").replace(/\/+$/, "");
   if (!normalized || normalized.includes("/")) {
     return void 0;
@@ -2104,7 +2122,7 @@ async function loadThemeScopedRenderer(themeRoot) {
     renderToString: reactDomServerModule.renderToString
   };
 }
-function renderDevStarterPageHtml(theme, page, renderer, locale = "en", preserveLang = false) {
+function renderDevStarterPageHtml(theme, page, renderer, locale = "en", preserveLang = false, previewLocaleMessages) {
   const chrome = renderer.extractLayoutChrome(theme.module.defaultLayout);
   const metadata = {
     resolveAssetUrl: createPreviewAssetResolver(renderer.resolveAssetPath),
@@ -2122,6 +2140,16 @@ function renderDevStarterPageHtml(theme, page, renderer, locale = "en", preserve
   const customHead = chrome.customHeadCode ?? "";
   const customBody = chrome.customBodyCode ?? "";
   const designPalette = renderDevDesignPalette(theme.module.manifest.designSystem);
+  const hydrationPayload = serializeInlineScriptValue({
+    pageData: page.data,
+    layoutData: theme.module.defaultLayout,
+    contactForm: PREVIEW_CONTACT_FORM,
+    previewLocaleMessages
+  });
+  const hydrationScript = [
+    `<script id="suda-theme-hydration-data" type="application/json">${hydrationPayload}</script>`,
+    '<script type="module">void import("/.suda-build/preview-client.ts").catch((error)=>console.error("[theme-dev] theme client failed to load",error))</script>'
+  ].join("");
   return [
     "<!doctype html>",
     `<html lang="${escapeHtml(locale)}">`,
@@ -2134,9 +2162,10 @@ function renderDevStarterPageHtml(theme, page, renderer, locale = "en", preserve
     customHead,
     "</head>",
     `<body${cssVarStyle ? ` style="${cssVarStyle}"` : ""}>`,
-    body,
+    `<div data-theme-hydration-root="" style="display:contents">${body}</div>`,
     designPalette.html,
     customBody,
+    hydrationScript,
     ...preserveLang ? [
       '<script>for(const a of document.querySelectorAll("a[href]")){try{const u=new URL(a.href,location.href);if(u.origin===location.origin){u.searchParams.set("lang",new URL(location.href).searchParams.get("lang"));a.href=u.pathname+u.search+u.hash}}catch{}}</script>'
     ] : [],
@@ -2155,19 +2184,28 @@ function renderDevDesignPalette(designSystem) {
     id: preset.id,
     variables: createThemeDesignCssVariables(preset.tokens)
   }));
+  const selectedIcon = renderToStaticMarkup(
+    createElement(CircleCheck, {
+      className: "suda-dev-preset-selected-icon",
+      width: 32,
+      height: 32,
+      "aria-hidden": true,
+      focusable: false
+    })
+  );
   const buttons = designSystem.presets.map(
     (preset) => `<button type="button" data-suda-dev-preset="${escapeHtml(preset.id)}" title="${escapeHtml(
       preset.description ? `${preset.label} \u2014 ${preset.description}` : preset.label
     )}" aria-label="${escapeHtml(preset.label)}"><span style="background:${escapeHtml(
       preset.tokens.colors.primary
-    )}"></span></button>`
+    )}"></span>${selectedIcon}</button>`
   ).join("");
   const config = serializeInlineScriptValue({
     defaultPresetId: designSystem.defaultPresetId,
     presets
   });
   return {
-    style: '<style data-suda-dev-palette-style>\n#suda-dev-palette{all:initial;position:fixed;z-index:2147483000;top:50%;right:16px;width:64px;max-height:calc(100svh - 32px);padding:8px 9px;overflow-x:hidden;overflow-y:auto;box-sizing:border-box;background:#fff;border:1px solid #d1d5db;border-radius:999px;box-shadow:0 8px 24px rgb(15 23 42 / 12%);transform:translateY(-50%);color-scheme:light;scrollbar-width:none;-ms-overflow-style:none}\n#suda-dev-palette::-webkit-scrollbar{display:none}\n#suda-dev-palette button{all:initial;position:relative;display:grid;width:44px;height:44px;box-sizing:border-box;cursor:pointer;border-radius:999px;place-items:center}\n#suda-dev-palette button span{display:block;width:32px;height:32px;border-radius:999px;transition:transform 120ms ease}\n#suda-dev-palette button:hover span{transform:scale(1.08)}\n#suda-dev-palette button[aria-pressed="true"] span{visibility:hidden}\n#suda-dev-palette button[aria-pressed="true"]::after{position:absolute;display:grid;width:32px;height:32px;color:var(--suda-dev-preset-primary);font:700 22px/1 ui-sans-serif,system-ui,sans-serif;content:"\u2713";place-items:center}\n#suda-dev-palette button:focus-visible{outline:2px solid #94a3b8;outline-offset:2px}\n@media(max-width:640px){#suda-dev-palette{right:8px;max-height:calc(100svh - 16px)}}\n@media(prefers-reduced-motion:reduce){#suda-dev-palette button span{transition:none}}\n</style>',
+    style: '<style data-suda-dev-palette-style>\n#suda-dev-palette{all:initial;position:fixed;z-index:2147483000;top:50%;right:16px;width:64px;max-height:calc(100svh - 32px);padding:8px 9px;overflow-x:hidden;overflow-y:auto;box-sizing:border-box;background:#fff;border:1px solid #d1d5db;border-radius:999px;box-shadow:0 8px 24px rgb(15 23 42 / 12%);transform:translateY(-50%);color-scheme:light;scrollbar-width:none;-ms-overflow-style:none}\n#suda-dev-palette::-webkit-scrollbar{display:none}\n#suda-dev-palette button{all:initial;position:relative;display:grid;width:44px;height:44px;box-sizing:border-box;cursor:pointer;border-radius:999px;place-items:center}\n#suda-dev-palette button span{display:block;width:32px;height:32px;border-radius:999px;transition:transform 120ms ease}\n#suda-dev-palette button:hover span{transform:scale(1.08)}\n#suda-dev-palette button[aria-pressed="true"] span{visibility:hidden}\n#suda-dev-palette .suda-dev-preset-selected-icon{position:absolute;display:block;width:32px;height:32px;color:var(--suda-dev-preset-primary);visibility:hidden;opacity:0;transform:scale(.85);transition:opacity 120ms ease,transform 120ms ease}\n#suda-dev-palette button[aria-pressed="true"] .suda-dev-preset-selected-icon{visibility:visible;opacity:1;transform:scale(1)}\n#suda-dev-palette button:focus-visible{outline:2px solid #94a3b8;outline-offset:2px}\n@media(max-width:640px){#suda-dev-palette{right:8px;max-height:calc(100svh - 16px)}}\n@media(prefers-reduced-motion:reduce){#suda-dev-palette button span,#suda-dev-palette .suda-dev-preset-selected-icon{transition:none}}\n</style>',
     html: `<aside id="suda-dev-palette" aria-label="Design presets">${buttons}</aside><script data-suda-dev-palette-script>(function(){const config=${config};const palette=document.getElementById("suda-dev-palette");if(!palette)return;const byId=new Map(config.presets.map((preset)=>[preset.id,preset]));const params=new URL(location.href).searchParams;const requested=params.get("designPreset");const selected=byId.has(requested)?requested:config.defaultPresetId;function apply(id,updateUrl){const preset=byId.get(id);if(!preset)return;const properties=Object.keys(preset.variables);const targets=[document.documentElement,document.body,...document.querySelectorAll("[style]")].filter((element,index,items)=>items.indexOf(element)===index&&(element===document.documentElement||element===document.body||properties.some((property)=>element.style.getPropertyValue(property)!=="")));for(const target of targets){for(const [property,value] of Object.entries(preset.variables))target.style.setProperty(property,value)}for(const button of palette.querySelectorAll("[data-suda-dev-preset]")){const active=button.dataset.sudaDevPreset===id;button.setAttribute("aria-pressed",String(active));button.style.setProperty("--suda-dev-preset-primary",byId.get(button.dataset.sudaDevPreset).variables["--suda-color-primary"])}if(updateUrl){const url=new URL(location.href);url.searchParams.set("designPreset",id);history.replaceState(history.state,"",url)}}if(requested&&byId.has(requested))apply(selected,false);else for(const button of palette.querySelectorAll("[data-suda-dev-preset]")){button.setAttribute("aria-pressed",String(button.dataset.sudaDevPreset===selected));button.style.setProperty("--suda-dev-preset-primary",byId.get(button.dataset.sudaDevPreset).variables["--suda-color-primary"])}palette.addEventListener("click",(event)=>{const button=event.target.closest("[data-suda-dev-preset]");if(button)apply(button.dataset.sudaDevPreset,true)})})();</script>`
   };
 }