@onexapis/cli 1.1.20 → 1.1.21

package/dist/preview/preview-app.tsx

@@ -124,34 +124,53 @@ async function loadThemeBundle(timestamp?: number): Promise<ThemeExports> {
   return module;
 }
 
-// ===== 3. SECTION RESOLUTION (adapted from storefront section-renderer.tsx) =====
+// ===== 3. SECTION RESOLUTION — Dynamic registry from schema exports =====
+
+/**
+ * Build a type→component map by scanning all *Schema exports.
+ * No hardcoded prefixes — uses schema.type as the lookup key.
+ */
+function buildSectionRegistry(
+  themeExports: ThemeExports
+): Map<string, { Component: React.ComponentType<any>; schema: any }> {
+  const registry = new Map<
+    string,
+    { Component: React.ComponentType<any>; schema: any }
+  >();
+
+  for (const [exportName, exportValue] of Object.entries(themeExports)) {
+    if (!exportName.endsWith("Schema") || !exportValue) continue;
+    const schema = exportValue as any;
+    const sectionType = schema?.type;
+    if (!sectionType) continue;
+
+    // "heroSchema" → "Hero" → "HeroDefault"
+    const baseName = exportName.replace(/Schema$/, "");
+    const componentName =
+      baseName.charAt(0).toUpperCase() + baseName.slice(1) + "Default";
+    const Component = themeExports[componentName] as
+      | React.ComponentType<any>
+      | undefined;
+
+    if (Component) {
+      registry.set(sectionType, { Component, schema });
+    }
+  }
+
+  return registry;
+}
 
 function getSectionComponent(
-  themeExports: ThemeExports,
-  themePrefix: string,
+  registry: Map<string, { Component: React.ComponentType<any>; schema: any }>,
   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;
+  const reg = registry.get(sectionType);
+  if (!reg) return null;
 
   return {
-    Component,
-    schema,
+    Component: reg.Component,
+    schema: reg.schema,
     template: { id: template, name: capitalize(template) },
   };
 }
@@ -160,17 +179,6 @@ 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. THEME CSS VARIABLE INJECTION =====
 
 const PALETTE_TO_CSS_VAR: Record<string, string> = {
@@ -246,16 +254,14 @@ function buildThemeStyleCSS(themeConfig: any): string | null {
 
 function resolveSections(
   sectionConfigs: any[],
-  themeExports: ThemeExports,
-  themePrefix: string
+  registry: Map<string, { Component: React.ComponentType<any>; schema: any }>
 ) {
   return (sectionConfigs || [])
     .filter((s: any) => s.enabled !== false)
     .sort((a: any, b: any) => a.order - b.order)
     .map((section: any) => {
       const reg = getSectionComponent(
-        themeExports,
-        themePrefix,
+        registry,
         section.type,
         section.template || "default"
       );
@@ -446,10 +452,9 @@ function PreviewApp() {
     );
   }
 
-  // Discover pages and get themeId
+  // Discover pages and build dynamic section registry
   const pages = discoverPageConfigs(themeExports);
-  const themeId = themeExports.themeConfig?.id || "";
-  const themePrefix = themeId ? `${themeId}-` : "";
+  const sectionRegistry = buildSectionRegistry(themeExports);
 
   // Resolve initial page from URL path (once pages are discovered)
   const resolvedPage =
@@ -543,20 +548,17 @@ function PreviewApp() {
   const layoutConfig = themeExports.layoutConfig;
   const headerSections = resolveSections(
     layoutConfig?.headerSections || [],
-    themeExports,
-    themePrefix
+    sectionRegistry
   );
   const footerSections = resolveSections(
     layoutConfig?.footerSections || [],
-    themeExports,
-    themePrefix
+    sectionRegistry
   );
 
   // Resolve page sections
   const pageSections = resolveSections(
     currentPage.config.sections || [],
-    themeExports,
-    themePrefix
+    sectionRegistry
   );
 
   // Build theme CSS (Gap 2)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onexapis/cli",
-  "version": "1.1.20",
+  "version": "1.1.21",
   "description": "CLI tool for OneX theme development - scaffolds themes using @onexapis/core",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -68,7 +68,9 @@
     "node-fetch": "^3.3.2",
     "open": "^10.1.0",
     "ora": "^8.0.1",
-    "ws": "^8.18.0"
+    "ws": "^8.18.0",
+    "tailwindcss": "^3.4.0",
+    "postcss": "^8.4.0"
   },
   "devDependencies": {
     "@types/adm-zip": "^0.5.7",