@onexapis/cli 1.0.4 → 1.1.0

package/dist/preview/preview-app.tsx

@@ -0,0 +1,368 @@
+// ===== 1. SET UP GLOBALS (must happen before theme bundle loads) =====
+
+import React, { useState, useEffect, useRef, useCallback } from "react";
+import { createRoot } from "react-dom/client";
+import * as jsxRuntime from "react/jsx-runtime";
+
+// Core subpath imports — MUST match what setup-theme-globals.ts sets
+// Only import browser-safe subpaths (NOT the root @onexapis/core which pulls server code)
+import * as coreRenderers from "@onexapis/core/renderers";
+import * as coreUtils from "@onexapis/core/utils";
+import * as coreContexts from "@onexapis/core/contexts";
+import * as coreComponents from "@onexapis/core/components";
+import * as coreRegistry from "@onexapis/core/registry";
+
+// Set React globals
+(globalThis as any).__ONEX_REACT__ = React;
+(globalThis as any).__ONEX_REACT_DOM__ = { createRoot };
+(globalThis as any).__ONEX_JSX_RUNTIME__ = jsxRuntime;
+
+// Set core globals with subpath modules
+// Theme bundle accesses: globalThis.__ONEX_CORE__["renderers"], globalThis.__ONEX_CORE__["utils"]
+// This matches the pattern in: apps/storefront/lib/setup-theme-globals.ts
+(globalThis as any).__ONEX_CORE__ = {
+  renderers: coreRenderers,
+  utils: coreUtils,
+  contexts: coreContexts,
+  components: coreComponents,
+  registry: coreRegistry,
+};
+
+
+// ===== 2. THEME LOADING =====
+
+interface ThemeExports {
+  themeConfig?: any;
+  layoutConfig?: any;
+  [key: string]: any;
+}
+
+async function loadThemeBundle(timestamp?: number): Promise<ThemeExports> {
+  const cacheBust = timestamp ? `?t=${timestamp}` : `?t=${Date.now()}`;
+  const module = await import(/* @vite-ignore */ `/bundle-entry.js${cacheBust}`);
+  return module;
+}
+
+
+// ===== 3. SECTION RESOLUTION (adapted from storefront section-renderer.tsx) =====
+
+function getSectionComponent(
+  themeExports: ThemeExports,
+  themePrefix: string,
+  sectionType: string,
+  template: string = "default"
+) {
+  // Strip theme prefix: "cool-store-hero" -> "hero"
+  let baseName = sectionType;
+  if (themePrefix && baseName.startsWith(themePrefix)) {
+    baseName = baseName.substring(themePrefix.length);
+  }
+
+  // Derive export names: "hero" + "default" -> "HeroDefault" + "heroSchema"
+  const componentKey = toPascalCase(baseName) + toPascalCase(template);
+  const schemaKey = toCamelCase(baseName) + "Schema";
+
+  const Component = themeExports[componentKey] as React.ComponentType<any> | undefined;
+  const schema = themeExports[schemaKey] as any | undefined;
+
+  if (!Component) return null;
+
+  return { Component, schema, template: { id: template, name: capitalize(template) } };
+}
+
+function capitalize(str: string): string {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}
+
+function toCamelCase(str: string): string {
+  return str.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+}
+
+function toPascalCase(str: string): string {
+  return str.split("-").map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join("");
+}
+
+
+// ===== 4. SECTION DATA ENRICHMENT =====
+
+/**
+ * Merge schema defaults into section instances from page config.
+ * Page configs have components: [] and blocks: [] — sections would render
+ * with settings-only fallbacks. By merging schema.defaults, we get the full
+ * component/block structure for a richer preview.
+ */
+function enrichSectionWithDefaults(section: any, schema: any): any {
+  if (!schema?.defaults) return section;
+
+  return {
+    ...section,
+    components:
+      section.components?.length > 0
+        ? section.components
+        : schema.defaults.components || [],
+    blocks:
+      section.blocks?.length > 0
+        ? section.blocks
+        : schema.defaults.blocks || [],
+    settings: {
+      ...(schema.defaults.settings || {}),
+      ...section.settings,
+    },
+  };
+}
+
+
+// ===== 5. PAGE CONFIG DISCOVERY =====
+
+function discoverPageConfigs(
+  themeExports: ThemeExports
+): Array<{ key: string; label: string; config: any }> {
+  const pages: Array<{ key: string; label: string; config: any }> = [];
+
+  for (const [key, value] of Object.entries(themeExports)) {
+    if (
+      key.endsWith("PageConfig") &&
+      value &&
+      typeof value === "object" &&
+      "sections" in value
+    ) {
+      const label = key.replace("PageConfig", "");
+      const displayLabel =
+        label.charAt(0).toUpperCase() +
+        label.slice(1).replace(/([A-Z])/g, " $1");
+      pages.push({ key, label: displayLabel, config: value });
+    }
+  }
+
+  // Sort: "home" page first
+  pages.sort((a, b) => {
+    if (a.config.type === "home") return -1;
+    if (b.config.type === "home") return 1;
+    return a.label.localeCompare(b.label);
+  });
+
+  return pages;
+}
+
+
+// ===== 6. PREVIEW APP COMPONENT =====
+
+function PreviewApp() {
+  const [themeExports, setThemeExports] = useState<ThemeExports | null>(null);
+  const [selectedPage, setSelectedPage] = useState(0);
+  const [wsStatus, setWsStatus] = useState<
+    "connected" | "disconnected" | "rebuilding"
+  >("disconnected");
+  const [error, setError] = useState<string | null>(null);
+  const wsRef = useRef<WebSocket | null>(null);
+
+  // Load theme bundle
+  const loadTheme = useCallback(async (timestamp?: number) => {
+    try {
+      setError(null);
+      const exports = await loadThemeBundle(timestamp);
+      setThemeExports(exports);
+    } catch (err) {
+      setError(`Failed to load theme: ${err}`);
+      console.error("[OneX Dev] Theme load error:", err);
+    }
+  }, []);
+
+  // Initial load
+  useEffect(() => {
+    loadTheme();
+  }, [loadTheme]);
+
+  // WebSocket connection for hot reload
+  useEffect(() => {
+    function connect() {
+      const ws = new WebSocket(`ws://${window.location.host}`);
+      wsRef.current = ws;
+
+      ws.onopen = () => {
+        setWsStatus("connected");
+        updateToolbar("connected", "Connected");
+      };
+
+      ws.onmessage = (event) => {
+        const msg = JSON.parse(event.data);
+        if (msg.type === "reload") {
+          setWsStatus("rebuilding");
+          updateToolbar("rebuilding", "Reloading...");
+          loadTheme(msg.timestamp).then(() => {
+            setWsStatus("connected");
+            updateToolbar("connected", "Connected");
+          });
+        } else if (msg.type === "error") {
+          setError(msg.message);
+          updateToolbar("disconnected", "Build Error");
+        }
+      };
+
+      ws.onclose = () => {
+        setWsStatus("disconnected");
+        updateToolbar("disconnected", "Disconnected");
+        // Auto-reconnect after 2s
+        setTimeout(connect, 2000);
+      };
+    }
+
+    connect();
+    return () => {
+      wsRef.current?.close();
+    };
+  }, [loadTheme]);
+
+  if (error) {
+    return (
+      <div
+        style={{
+          padding: 40,
+          fontFamily: "monospace",
+          color: "#ff4444",
+          background: "#1a1a2e",
+          minHeight: "100vh",
+        }}
+      >
+        <h2>Build Error</h2>
+        <pre style={{ whiteSpace: "pre-wrap", marginTop: 16 }}>{error}</pre>
+      </div>
+    );
+  }
+
+  if (!themeExports) {
+    return (
+      <div style={{ padding: 40, textAlign: "center", fontFamily: "system-ui" }}>
+        <p>Loading theme...</p>
+      </div>
+    );
+  }
+
+  // Discover pages and get themeId
+  const pages = discoverPageConfigs(themeExports);
+  const themeId = themeExports.themeConfig?.id || "";
+  const themePrefix = themeId ? `${themeId}-` : "";
+  const currentPage = pages[selectedPage] || pages[0];
+
+  if (!currentPage) {
+    return (
+      <div style={{ padding: 40, textAlign: "center", fontFamily: "system-ui" }}>
+        <p>No page configs found in theme exports.</p>
+        <p style={{ color: "#888", marginTop: 8 }}>
+          Ensure your bundle-entry.ts exports page configs (e.g., homePageConfig).
+        </p>
+      </div>
+    );
+  }
+
+  // Get sections for current page, enriched with schema defaults
+  const sections = (currentPage.config.sections || [])
+    .filter((s: any) => s.enabled !== false)
+    .sort((a: any, b: any) => a.order - b.order)
+    .map((section: any) => {
+      const reg = getSectionComponent(
+        themeExports,
+        themePrefix,
+        section.type,
+        section.template || "default"
+      );
+      const enriched = reg?.schema
+        ? enrichSectionWithDefaults(section, reg.schema)
+        : section;
+      return { section: enriched, registration: reg };
+    });
+
+  return (
+    <>
+      {/* Page selector (if multiple pages) */}
+      {pages.length > 1 && (
+        <div
+          style={{
+            position: "fixed",
+            top: 40,
+            right: 16,
+            zIndex: 9998,
+            background: "white",
+            borderRadius: 8,
+            boxShadow: "0 2px 8px rgba(0,0,0,0.15)",
+            padding: "4px 8px",
+            display: "flex",
+            gap: 4,
+          }}
+        >
+          {pages.map((page, i) => (
+            <button
+              key={page.key}
+              onClick={() => {
+                setSelectedPage(i);
+                const el = document.getElementById("page-indicator");
+                if (el) el.textContent = page.label;
+              }}
+              style={{
+                padding: "4px 12px",
+                border: "none",
+                borderRadius: 4,
+                cursor: "pointer",
+                background: i === selectedPage ? "#E11D48" : "transparent",
+                color: i === selectedPage ? "white" : "#333",
+                fontSize: 12,
+                fontWeight: 500,
+              }}
+            >
+              {page.label}
+            </button>
+          ))}
+        </div>
+      )}
+
+      {/* Render sections */}
+      {sections.map(({ section, registration }: any) => {
+        if (!registration) {
+          return (
+            <div
+              key={section.id}
+              style={{
+                padding: "2rem",
+                border: "2px dashed #f59e0b",
+                margin: "1rem 0",
+                background: "#fffbeb",
+              }}
+            >
+              <h3 style={{ margin: 0, fontSize: "1.2rem", color: "#d97706" }}>
+                Section Not Found: {section.type}
+              </h3>
+            </div>
+          );
+        }
+        const { Component, schema, template } = registration;
+        return (
+          <Component
+            key={section.id}
+            section={section}
+            schema={schema}
+            template={template}
+            isEditing={false}
+            data={{}}
+          />
+        );
+      })}
+    </>
+  );
+}
+
+function updateToolbar(status: string, label: string) {
+  const statusEl = document.getElementById("ws-status");
+  const labelEl = document.getElementById("ws-label");
+  if (statusEl) {
+    statusEl.className = `status ${status}`;
+  }
+  if (labelEl) {
+    labelEl.textContent = label;
+  }
+}
+
+
+// ===== 7. MOUNT =====
+
+const root = createRoot(document.getElementById("onex-preview-root")!);
+root.render(<PreviewApp />);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onexapis/cli",
-  "version": "1.0.4",
+  "version": "1.1.0",
   "description": "CLI tool for OneX theme development - scaffolds themes using @onexapis/core",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -60,7 +60,11 @@
     "glob": "^10.3.10",
     "inquirer": "^9.2.12",
     "node-fetch": "^3.3.2",
-    "ora": "^8.0.1"
+    "chokidar": "^4.0.0",
+    "esbuild": "^0.25.0",
+    "open": "^10.1.0",
+    "ora": "^8.0.1",
+    "ws": "^8.18.0"
   },
   "devDependencies": {
     "@types/adm-zip": "^0.5.7",
@@ -69,6 +73,7 @@
     "@types/fs-extra": "^11.0.4",
     "@types/inquirer": "^9.0.7",
     "@types/node-fetch": "^2.6.13",
+    "@types/ws": "^8.5.0",
     "tsup": "^8.5.1",
     "typescript": "^5.9.3"
   },