@onexapis/cli 1.1.1 → 1.1.3

package/dist/preview/preview-app.tsx

@@ -3,6 +3,7 @@
 import React, { useState, useEffect, useRef, useCallback } from "react";
 import { createRoot } from "react-dom/client";
 import * as jsxRuntime from "react/jsx-runtime";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
 // 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)
@@ -11,6 +12,8 @@ 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";
+import * as coreCommerce from "@onexapis/core/commerce";
+import * as coreCommerceHooks from "@onexapis/core/commerce/hooks";
 
 // Set React globals
 (globalThis as any).__ONEX_REACT__ = React;
@@ -26,8 +29,40 @@ import * as coreRegistry from "@onexapis/core/registry";
   contexts: coreContexts,
   components: coreComponents,
   registry: coreRegistry,
+  commerce: coreCommerce,
+  "commerce/hooks": coreCommerceHooks,
 };
 
+// Initialize CommerceClient for preview
+// If .env has NEXT_PUBLIC_API_URL + NEXT_PUBLIC_COMPANY_ID, use real API data.
+// Otherwise, use a stub that returns empty data.
+try {
+  const { CommerceClient, setCommerceClient } = coreCommerce as any;
+  const apiUrl = process.env.NEXT_PUBLIC_API_URL;
+  const companyId = process.env.NEXT_PUBLIC_COMPANY_ID;
+
+  if (apiUrl && companyId && CommerceClient && setCommerceClient) {
+    // Real API connection — preview will show actual products/blogs
+    setCommerceClient(new CommerceClient({ apiUrl, companyId }));
+  } else if (setCommerceClient) {
+    // No API config — use stub that returns empty data
+    const emptyPagination = { total: 0, page: 1, limit: 10, totalPages: 0, hasNext: false, hasPrev: false };
+    const emptyList = { data: [], pagination: emptyPagination };
+    setCommerceClient({
+      getProducts: () => Promise.resolve(emptyList),
+      getProductBySlug: () => Promise.resolve(null),
+      getProductById: () => Promise.resolve(null),
+      getProductCategories: () => Promise.resolve([]),
+      getBlogs: () => Promise.resolve(emptyList),
+      getBlogBySlug: () => Promise.resolve(null),
+      getBlogById: () => Promise.resolve(null),
+      getBlogCategories: () => Promise.resolve([]),
+      getSettings: () => Promise.resolve({}),
+    });
+  }
+} catch {
+  // CommerceClient not available — safe to ignore
+}
 
 // ===== 2. THEME LOADING =====
 
@@ -39,11 +74,12 @@ interface ThemeExports {
 
 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}`);
+  const module = await import(
+    /* @vite-ignore */ `/bundle-entry.js${cacheBust}`
+  );
   return module;
 }
 
-
 // ===== 3. SECTION RESOLUTION (adapted from storefront section-renderer.tsx) =====
 
 function getSectionComponent(
@@ -62,12 +98,18 @@ function getSectionComponent(
   const componentKey = toPascalCase(baseName) + toPascalCase(template);
   const schemaKey = toCamelCase(baseName) + "Schema";
 
-  const Component = themeExports[componentKey] as React.ComponentType<any> | undefined;
+  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) } };
+  return {
+    Component,
+    schema,
+    template: { id: template, name: capitalize(template) },
+  };
 }
 
 function capitalize(str: string): string {
@@ -79,10 +121,12 @@ function toCamelCase(str: string): string {
 }
 
 function toPascalCase(str: string): string {
-  return str.split("-").map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join("");
+  return str
+    .split("-")
+    .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+    .join("");
 }
 
-
 // ===== 4. SECTION DATA ENRICHMENT =====
 
 /**
@@ -111,7 +155,6 @@ function enrichSectionWithDefaults(section: any, schema: any): any {
   };
 }
 
-
 // ===== 5. PAGE CONFIG DISCOVERY =====
 
 function discoverPageConfigs(
@@ -144,12 +187,31 @@ function discoverPageConfigs(
   return pages;
 }
 
-
 // ===== 6. PREVIEW APP COMPONENT =====
 
+/**
+ * Match URL pathname to a page index.
+ * "/" or "/home" → home page, "/showcase" → showcase page, etc.
+ */
+function getInitialPageFromURL(
+  pages: Array<{ key: string; label: string; config: any }>
+): number {
+  const pathname = window.location.pathname
+    .replace(/^\/+|\/+$/g, "")
+    .toLowerCase();
+  if (!pathname || pathname === "home") return 0; // home is always first after sorting
+
+  const idx = pages.findIndex((p) => {
+    const pageSlug = p.label.toLowerCase().replace(/\s+/g, "-");
+    const pageKey = p.key.replace("PageConfig", "").toLowerCase();
+    return pageSlug === pathname || pageKey === pathname;
+  });
+  return idx >= 0 ? idx : -2; // -2 = page not found
+}
+
 function PreviewApp() {
   const [themeExports, setThemeExports] = useState<ThemeExports | null>(null);
-  const [selectedPage, setSelectedPage] = useState(0);
+  const [selectedPage, setSelectedPage] = useState(-1); // -1 = not yet resolved from URL
   const [wsStatus, setWsStatus] = useState<
     "connected" | "disconnected" | "rebuilding"
   >("disconnected");
@@ -173,6 +235,16 @@ function PreviewApp() {
     loadTheme();
   }, [loadTheme]);
 
+  // Handle browser back/forward navigation
+  useEffect(() => {
+    const handlePopState = () => {
+      // Reset to -1 to re-resolve from URL
+      setSelectedPage(-1);
+    };
+    window.addEventListener("popstate", handlePopState);
+    return () => window.removeEventListener("popstate", handlePopState);
+  }, []);
+
   // WebSocket connection for hot reload
   useEffect(() => {
     function connect() {
@@ -232,7 +304,9 @@ function PreviewApp() {
 
   if (!themeExports) {
     return (
-      <div style={{ padding: 40, textAlign: "center", fontFamily: "system-ui" }}>
+      <div
+        style={{ padding: 40, textAlign: "center", fontFamily: "system-ui" }}
+      >
         <p>Loading theme...</p>
       </div>
     );
@@ -242,14 +316,81 @@ function PreviewApp() {
   const pages = discoverPageConfigs(themeExports);
   const themeId = themeExports.themeConfig?.id || "";
   const themePrefix = themeId ? `${themeId}-` : "";
-  const currentPage = pages[selectedPage] || pages[0];
+
+  // Resolve initial page from URL path (once pages are discovered)
+  const resolvedPage =
+    selectedPage === -1 ? getInitialPageFromURL(pages) : selectedPage;
+
+  // Page not found (-2)
+  if (resolvedPage === -2) {
+    const pathname = window.location.pathname;
+    return (
+      <div
+        style={{
+          padding: "80px 40px",
+          textAlign: "center",
+          fontFamily: "system-ui",
+        }}
+      >
+        <h1 style={{ fontSize: "4rem", margin: 0, color: "#E11D48" }}>404</h1>
+        <p style={{ fontSize: "1.25rem", color: "#333", marginTop: 12 }}>
+          Page not found:{" "}
+          <code
+            style={{
+              background: "#f1f5f9",
+              padding: "2px 8px",
+              borderRadius: 4,
+            }}
+          >
+            {pathname}
+          </code>
+        </p>
+        <p style={{ color: "#888", marginTop: 8 }}>Available pages:</p>
+        <div
+          style={{
+            display: "flex",
+            gap: 8,
+            justifyContent: "center",
+            marginTop: 12,
+          }}
+        >
+          {pages.map((page) => {
+            const pageSlug = page.key.replace("PageConfig", "").toLowerCase();
+            const pagePath = pageSlug === "home" ? "/" : `/${pageSlug}`;
+            return (
+              <a
+                key={page.key}
+                href={pagePath}
+                style={{
+                  padding: "6px 16px",
+                  borderRadius: 6,
+                  background: "#E11D48",
+                  color: "white",
+                  textDecoration: "none",
+                  fontSize: 14,
+                  fontWeight: 500,
+                }}
+              >
+                {page.label}
+              </a>
+            );
+          })}
+        </div>
+      </div>
+    );
+  }
+
+  const currentPage = pages[resolvedPage] || pages[0];
 
   if (!currentPage) {
     return (
-      <div style={{ padding: 40, textAlign: "center", fontFamily: "system-ui" }}>
+      <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).
+          Ensure your bundle-entry.ts exports page configs (e.g.,
+          homePageConfig).
         </p>
       </div>
     );
@@ -290,28 +431,33 @@ function PreviewApp() {
             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>
-          ))}
+          {pages.map((page, i) => {
+            const pageSlug = page.key.replace("PageConfig", "").toLowerCase();
+            const pagePath = pageSlug === "home" ? "/" : `/${pageSlug}`;
+            return (
+              <button
+                key={page.key}
+                onClick={() => {
+                  setSelectedPage(i);
+                  window.history.pushState(null, "", pagePath);
+                  const el = document.getElementById("page-indicator");
+                  if (el) el.textContent = page.label;
+                }}
+                style={{
+                  padding: "4px 12px",
+                  border: "none",
+                  borderRadius: 4,
+                  cursor: "pointer",
+                  background: i === resolvedPage ? "#E11D48" : "transparent",
+                  color: i === resolvedPage ? "white" : "#333",
+                  fontSize: 12,
+                  fontWeight: 500,
+                }}
+              >
+                {page.label}
+              </button>
+            );
+          })}
         </div>
       )}
 
@@ -361,8 +507,20 @@ function updateToolbar(status: string, label: string) {
   }
 }
 
-
 // ===== 7. MOUNT =====
 
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+      refetchOnWindowFocus: false,
+    },
+  },
+});
+
 const root = createRoot(document.getElementById("onex-preview-root")!);
-root.render(<PreviewApp />);
+root.render(
+  <QueryClientProvider client={queryClient}>
+    <PreviewApp />
+  </QueryClientProvider>
+);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onexapis/cli",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "description": "CLI tool for OneX theme development - scaffolds themes using @onexapis/core",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -48,20 +48,23 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
+    "@onexapis/core": "workspace:*",
+    "@tanstack/react-query": "^5.90.16",
     "@aws-sdk/client-s3": "^3.470.0",
     "adm-zip": "^0.5.16",
     "archiver": "^7.0.1",
     "chalk": "^5.3.0",
+    "chokidar": "^4.0.0",
     "commander": "^12.1.0",
     "dotenv": "^17.3.1",
     "ejs": "^3.1.10",
+    "esbuild": "^0.25.0",
     "form-data": "^4.0.5",
     "fs-extra": "^11.2.0",
     "glob": "^10.3.10",
     "inquirer": "^9.2.12",
+    "jiti": "^2.6.1",
     "node-fetch": "^3.3.2",
-    "chokidar": "^4.0.0",
-    "esbuild": "^0.25.0",
     "open": "^10.1.0",
     "ora": "^8.0.1",
     "ws": "^8.18.0"

package/templates/default/.env.example

@@ -0,0 +1,4 @@
+# API Configuration (optional — enables real data in preview)
+# Get your Company ID from the OneX dashboard
+NEXT_PUBLIC_API_URL=https://api-dev.onexeos.com
+NEXT_PUBLIC_COMPANY_ID=

package/templates/default/package.json.ejs

@@ -14,7 +14,8 @@
   "author": "<%= author %>",
   "license": "MIT",
   "dependencies": {
-    "@onexapis/core": "^1.0.0"
+    "@onexapis/core": "^1.0.2",
+    "@tanstack/react-query": "^5.90.16"
   },
   "devDependencies": {
     "@types/react": "^19",