@feeef.dev/cli 0.2.0 → 0.2.1

package/vendor/template-kit/lib/smoke.mjs

@@ -0,0 +1,258 @@
+/**
+ * Theme smoke: evaluate every custom `App` from built TemplateData (react-live style).
+ *
+ * Does not need the storefront — uses React SSR like cli/tests/compile-e2e.test.ts.
+ */
+
+import { createRequire } from "node:module";
+import { pathToFileURL } from "node:url";
+import path from "node:path";
+import fs from "node:fs";
+import { fileURLToPath } from "node:url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+/**
+ * Resolve react / react-dom from the nearest package that has it
+ * (CLI when vendored, storefront when running kit from monorepo).
+ */
+function createCliRequire() {
+  const candidates = [
+    path.resolve(__dirname, "../../.."), // cli/vendor/template-kit/lib → cli
+    path.resolve(__dirname, "../.."), // storefront/template-kit/lib → storefront
+    path.resolve(__dirname, ".."),
+  ];
+  for (const root of candidates) {
+    const pkgJson = path.join(root, "package.json");
+    if (!fs.existsSync(pkgJson)) continue;
+    try {
+      const req = createRequire(pkgJson);
+      req.resolve("react");
+      req.resolve("react-dom/server");
+      req.resolve("esbuild");
+      return req;
+    } catch {
+      /* try next */
+    }
+  }
+  return createRequire(import.meta.url);
+}
+
+const require = createCliRequire();
+
+/**
+ * Recursively collect custom components with compiled `code`.
+ * @param {any} node
+ * @param {string} loc
+ * @param {Array<{ loc: string, instanceId?: string, title?: string, sourcePath?: string, type: string, code: string, props: Record<string, unknown> }>} out
+ */
+export function walkCustomComponents(node, loc, out) {
+  if (!node || typeof node !== "object") return;
+
+  if (Array.isArray(node)) {
+    node.forEach((child, i) => walkCustomComponents(child, `${loc}[${i}]`, out));
+    return;
+  }
+
+  const type = node.type;
+  const code = typeof node.code === "string" ? node.code.trim() : "";
+  if (type === "custom" && code) {
+    out.push({
+      loc,
+      instanceId: node.instanceId ?? undefined,
+      title: node.title ?? undefined,
+      sourcePath: node.sourcePath ?? undefined,
+      type,
+      code,
+      props:
+        node.props && typeof node.props === "object" && !Array.isArray(node.props)
+          ? node.props
+          : {},
+    });
+  }
+
+  if (Array.isArray(node.children)) {
+    walkCustomComponents(node.children, `${loc}/children`, out);
+  }
+  if (node.slots && typeof node.slots === "object") {
+    for (const [slotId, list] of Object.entries(node.slots)) {
+      walkCustomComponents(list, `${loc}/slots/${slotId}`, out);
+    }
+  }
+  if (node.pages && typeof node.pages === "object") {
+    for (const [pageId, page] of Object.entries(node.pages)) {
+      walkCustomComponents(page, `pages.${pageId}`, out);
+    }
+  }
+  if (node.sections && typeof node.sections === "object") {
+    for (const [sectionId, section] of Object.entries(node.sections)) {
+      walkCustomComponents(section, `${loc}/sections.${sectionId}`, out);
+    }
+  }
+  if (Array.isArray(node.components)) {
+    walkCustomComponents(node.components, `${loc}/components`, out);
+  }
+}
+
+/**
+ * Minimal react-live-like stubs for SSR smoke (no Next router / store).
+ * @param {Record<string, unknown>} props
+ */
+function buildSmokeScope(props) {
+  const React = require("react");
+  const noop = () => null;
+  const emptyHooks = () => null;
+  return {
+    React,
+    props,
+    useState: React.useState,
+    useEffect: React.useEffect,
+    useLayoutEffect: React.useLayoutEffect,
+    useRef: React.useRef,
+    useMemo: React.useMemo,
+    useCallback: React.useCallback,
+    useCurrentProduct: emptyHooks,
+    useFeeefCart: emptyHooks,
+    useFeeef: emptyHooks,
+    useStore: emptyHooks,
+    useTheme: () => ({
+      theme: "light",
+      setTheme: noop,
+      resolvedTheme: "light",
+      systemTheme: "light",
+    }),
+    useTemplate: () => ({ template: null }),
+    useFeeefT: () => (key) => key,
+    useFeeefLocale: () => "en",
+    getFeeefLocale: () => "en",
+    getFeeefDir: () => "ltr",
+    t: (key) => key,
+    useRouter: () => ({ push: noop, replace: noop, back: noop, prefetch: noop }),
+    usePathname: () => "/",
+    useSearchParams: () => new URLSearchParams(),
+    Link: ({ children, href, ...rest }) =>
+      React.createElement("a", { href: href ?? "#", ...rest }, children),
+    RouterNav: ({ children, ...rest }) =>
+      React.createElement("div", { role: "link", ...rest }, children),
+    SlotsLayout: ({ children }) => React.createElement(React.Fragment, null, children),
+    SlotContextBridge: ({ children }) =>
+      React.createElement(React.Fragment, null, children),
+    useSlotContext: () => ({}),
+    dartColorToCssColor: () => undefined,
+    convertDartColorToCssNumber: () => 0,
+    cssColorToHslString: () => undefined,
+  };
+}
+
+/**
+ * Transpile preserved JSX (build uses jsx:preserve for react-live) → createElement.
+ * Mirrors what react-live/Sucrase does in the browser.
+ * @param {string} code
+ */
+function transpileJsxForSmoke(code) {
+  let esbuild;
+  try {
+    esbuild = require("esbuild");
+  } catch {
+    throw new Error(
+      "esbuild is required for feeef template smoke (install @feeef.dev/cli deps)",
+    );
+  }
+  const result = esbuild.transformSync(code, {
+    loader: "tsx",
+    jsx: "transform",
+    jsxFactory: "React.createElement",
+    jsxFragment: "React.Fragment",
+    format: "cjs",
+    target: "es2018",
+  });
+  return result.code;
+}
+
+/**
+ * Evaluate one custom App with React SSR.
+ * @param {{ code: string, props?: Record<string, unknown>, sourcePath?: string, loc?: string, instanceId?: string }} item
+ * @returns {{ ok: true, html: string } | { ok: false, error: Error }}
+ */
+export function evalCustomApp(item) {
+  const React = require("react");
+  const { renderToStaticMarkup } = require("react-dom/server");
+  const props = item.props ?? {};
+  const scope = buildSmokeScope(props);
+  const keys = Object.keys(scope);
+  const values = keys.map((k) => scope[k]);
+
+  try {
+    const js = transpileJsxForSmoke(item.code);
+    const factory = new Function(
+      ...keys,
+      `${js}\n; if (typeof App !== "function") throw new Error("Missing function App()"); return App;`,
+    );
+    const App = factory(...values);
+    const html = renderToStaticMarkup(React.createElement(App, null));
+    return { ok: true, html };
+  } catch (e) {
+    const err = e instanceof Error ? e : new Error(String(e));
+    const label =
+      item.sourcePath ||
+      item.instanceId ||
+      item.loc ||
+      "unknown-component";
+    err.message = `[smoke] ${label}: ${err.message}`;
+    return { ok: false, error: err };
+  }
+}
+
+/**
+ * Build (optional) + smoke-render every custom component.
+ *
+ * @param {object} opts
+ * @param {string} opts.srcDir
+ * @param {string} [opts.dataPath]
+ * @param {boolean} [opts.build=true]
+ * @returns {Promise<{ passed: number, failed: Array<{ item: any, error: Error }>, total: number, items: any[] }>}
+ */
+export async function smokeTheme({ srcDir, dataPath, build = true }) {
+  const resolvedSrc = path.resolve(srcDir);
+  const outPath = dataPath
+    ? path.resolve(dataPath)
+    : path.join(resolvedSrc, "dist", "data.json");
+
+  if (build) {
+    const { buildTemplate } = await import(
+      pathToFileURL(path.join(__dirname, "build.mjs")).href
+    );
+    buildTemplate({ srcDir: resolvedSrc, outPath, write: true });
+  }
+
+  if (!fs.existsSync(outPath)) {
+    throw new Error(`Missing ${outPath}`);
+  }
+
+  const data = JSON.parse(fs.readFileSync(outPath, "utf8"));
+  const items = [];
+  walkCustomComponents(data, "data", items);
+
+  const libraryPath = path.join(path.dirname(outPath), "schema.library.json");
+  if (fs.existsSync(libraryPath)) {
+    try {
+      const lib = JSON.parse(fs.readFileSync(libraryPath, "utf8"));
+      const list = Array.isArray(lib.components) ? lib.components : [];
+      list.forEach((c, i) =>
+        walkCustomComponents(c, `library[${i}]`, items),
+      );
+    } catch {
+      /* ignore bad library */
+    }
+  }
+
+  const failed = [];
+  let passed = 0;
+  for (const item of items) {
+    const result = evalCustomApp(item);
+    if (result.ok) passed += 1;
+    else failed.push({ item, error: result.error });
+  }
+
+  return { passed, failed, total: items.length, items };
+}