@onexapis/cli 1.1.30 → 1.1.32

package/dist/preview/preview-app.tsx

@@ -20,27 +20,16 @@ import * as coreProducts from "@onexapis/core/products";
 import * as coreOrders from "@onexapis/core/orders";
 import * as coreBlog from "@onexapis/core/blog";
 import * as coreFinance from "@onexapis/core/finance";
+import { initializeOnex } from "@onexapis/core";
+import * as coreHooksAll from "@onexapis/core/hooks";
 import * as coreInternal from "@onexapis/core/internal";
 import * as coreTypes from "@onexapis/core/types";
 import { CartProvider, FlyToCartProvider } from "@onexapis/core/contexts";
 import { LocaleProvider } from "@onexapis/core/contexts";
 
-// Compose @onexapis/core/hooks from published subpaths
-// Only include use* hook functions — spreading entire modules includes
-// Zustand stores and React providers that cause "selector is not a function" errors.
-const coreHooks = {
-  ...coreCommerceHooks,
-};
-// Add context/state hooks individually (avoid spreading full modules)
-for (const mod of [coreContexts, coreAuth, coreOrders, coreCart] as any[]) {
-  if (mod && typeof mod === "object") {
-    for (const [k, v] of Object.entries(mod)) {
-      if (typeof v === "function" && k.startsWith("use") && !(k in coreHooks)) {
-        (coreHooks as any)[k] = v;
-      }
-    }
-  }
-}
+// @onexapis/core/hooks is the single source of truth — no manual composition.
+// coreHooksAll re-exports all hooks (commerce, cart, auth, checkout, payment, etc.)
+const coreHooks = coreHooksAll;
 
 // Set React globals
 (globalThis as any).__ONEX_REACT__ = React;
@@ -100,6 +89,12 @@ try {
   if (apiUrl && companyId && CommerceClient && setCommerceClient) {
     // Real API connection — preview will show actual products/blogs
     setCommerceClient(new CommerceClient({ apiUrl, companyId }));
+    // Initialize all services (orders, finance, auth, etc.) so checkout/payment hooks work
+    try {
+      initializeOnex({ apiUrl, companyId });
+    } catch {
+      // May fail if already initialized — safe to ignore
+    }
   } else if (setCommerceClient) {
     // No API config — use stub that returns empty data
     const emptyPagination = {
@@ -342,9 +337,12 @@ function discoverPageConfigs(
   }
 
   // Sort: "home" page first
+  // Sort: home page first (by handle, not type — multiple pages can have type "home")
   pages.sort((a, b) => {
-    if (a.config.type === "home") return -1;
-    if (b.config.type === "home") return 1;
+    const aIsHome = a.config.handle === "home" || a.key === "homePageConfig";
+    const bIsHome = b.config.handle === "home" || b.key === "homePageConfig";
+    if (aIsHome && !bIsHome) return -1;
+    if (bIsHome && !aIsHome) return 1;
     return a.label.localeCompare(b.label);
   });
 
@@ -384,7 +382,10 @@ const PREVIEW_SUPPORTED_LOCALES = ["vi", "en"];
  * "/vi/san-pham/slug" → { locale: "vi", rest: "/san-pham/slug" }
  * "/products/slug" → { locale: "en", rest: "/products/slug" }
  */
-function extractLocaleFromUrl(pathname: string): { locale: string; rest: string } {
+function extractLocaleFromUrl(pathname: string): {
+  locale: string;
+  rest: string;
+} {
   const parts = pathname.replace(/^\/+/, "").split("/");
   if (parts[0] && PREVIEW_SUPPORTED_LOCALES.includes(parts[0])) {
     return { locale: parts[0], rest: "/" + parts.slice(1).join("/") };
@@ -427,7 +428,9 @@ function getInitialPageFromURL(
     if (!effectivePath) continue;
 
     // Static locale path match (e.g., /gioi-thieu matches localizedPaths.vi: "/gioi-thieu")
-    const normalizedEffective = effectivePath.replace(/^\/+|\/+$/g, "").toLowerCase();
+    const normalizedEffective = effectivePath
+      .replace(/^\/+|\/+$/g, "")
+      .toLowerCase();
     if (normalizedEffective === pathname) return i;
 
     // Dynamic locale path match (e.g., /san-pham/my-slug matches localizedPaths.vi: "/san-pham/[slug]")

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onexapis/cli",
-  "version": "1.1.30",
+  "version": "1.1.32",
   "description": "CLI tool for OneX theme development - scaffolds themes using @onexapis/core",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -50,7 +50,7 @@
   },
   "dependencies": {
     "@aws-sdk/client-s3": "^3.470.0",
-    "@onexapis/core": "^1.0.3",
+    "@onexapis/core": "^1.0.5",
     "@tanstack/react-query": "^5.90.16",
     "adm-zip": "^0.5.16",
     "archiver": "^7.0.1",

package/templates/default/CLAUDE.md

@@ -605,12 +605,15 @@ Dynamic pages use URL parameters like `/products/[slug]` to render detail views.
 // pages/product-detail.ts
 import type { PageConfig } from "@onexapis/core/types";
 
-export const productDetailPageConfig: Omit<PageConfig, "id" | "createdAt" | "updatedAt"> = {
+export const productDetailPageConfig: Omit<
+  PageConfig,
+  "id" | "createdAt" | "updatedAt"
+> = {
   title: "Product Detail",
   handle: "product-detail",
-  path: "/products/[slug]",       // Dynamic segment in brackets
-  isDynamic: true,                // Flag as dynamic
-  dynamicSegments: ["slug"],      // Parameter names
+  path: "/products/[slug]", // Dynamic segment in brackets
+  isDynamic: true, // Flag as dynamic
+  dynamicSegments: ["slug"], // Parameter names
   type: "product",
   renderMode: "sections",
   themeId: "my-theme",
@@ -633,6 +636,7 @@ export default productDetailPageConfig;
 ```
 
 Export in `bundle-entry.ts`:
+
 ```typescript
 export { default as productDetailPageConfig } from "./pages/product-detail";
 ```
@@ -642,9 +646,14 @@ export { default as productDetailPageConfig } from "./pages/product-detail";
 Sections receive `data.routeParams` with the extracted URL parameters:
 
 ```tsx
-export function ProductDetail({ section, schema, isEditing, data }: SectionComponentProps) {
+export function ProductDetail({
+  section,
+  schema,
+  isEditing,
+  data,
+}: SectionComponentProps) {
   const routeParams = (data?.routeParams || {}) as Record<string, string>;
-  const slug = routeParams.slug || "";  // "blue-shirt" from /products/blue-shirt
+  const slug = routeParams.slug || ""; // "blue-shirt" from /products/blue-shirt
 
   const { data: product, isLoading } = useProductBySlug(slug, !!slug);
   // ...
@@ -658,12 +667,13 @@ Use `localizedPaths` to define different URL slugs per locale:
 ```typescript
 export const productDetailPageConfig = {
   handle: "product-detail",
-  path: "/products/[slug]",           // Default/fallback
+  path: "/products/[slug]", // Default/fallback
   isDynamic: true,
   dynamicSegments: ["slug"],
-  localizedPaths: {                    // Locale-specific paths (typed by Locale enum)
-    vi: "/san-pham/[slug]",            // /vi/san-pham/blue-shirt
-    en: "/products/[slug]",            // /en/products/blue-shirt
+  localizedPaths: {
+    // Locale-specific paths (typed by Locale enum)
+    vi: "/san-pham/[slug]", // /vi/san-pham/blue-shirt
+    en: "/products/[slug]", // /en/products/blue-shirt
   },
   type: "product",
   // ...
@@ -673,8 +683,9 @@ export const productDetailPageConfig = {
 The `Locale` type (`"vi" | "en"`) is from `@onexapis/core/types` — gives autocomplete.
 
 Sections also receive `data.locale` to know the current locale:
+
 ```tsx
-const locale = data?.locale as string;  // "vi" or "en"
+const locale = data?.locale as string; // "vi" or "en"
 ```
 
 ### Key conventions
@@ -1010,7 +1021,15 @@ The cart system uses `useCart()` for state and a flexible fly-to-cart animation
 ```tsx
 import { useCart } from "@onexapis/core/hooks";
 
-const { items, addItem, removeItem, updateQuantity, clearCart, itemCount, subtotal } = useCart();
+const {
+  items,
+  addItem,
+  removeItem,
+  updateQuantity,
+  clearCart,
+  itemCount,
+  subtotal,
+} = useCart();
 
 // Add to cart
 addItem({
@@ -1033,11 +1052,11 @@ When a user clicks "Add to Cart", the product thumbnail flies from the button to
 <div data-fly-to-cart-target className="my-cart-icon">
   <ShoppingCartIcon />
   <span>{itemCount}</span>
-</div>
+</div>;
 
 // Option B: Use CartIcon convenience component (auto-adds data-fly-to-cart-target)
 import { CartIcon } from "@onexapis/core/components";
-<CartIcon count={itemCount} onClick={() => openCartDrawer()} />
+<CartIcon count={itemCount} onClick={() => openCartDrawer()} />;
 ```
 
 **Step 2: ProductCard triggers animation automatically** — just pass `onAddToCart`:
@@ -1045,7 +1064,14 @@ import { CartIcon } from "@onexapis/core/components";
 ```tsx
 <ProductCard
   product={product}
-  onAddToCart={(p) => addItem({ productId: p.id, name: p.title, image: p.image, price: p.salePrice })}
+  onAddToCart={(p) =>
+    addItem({
+      productId: p.id,
+      name: p.title,
+      image: p.image,
+      price: p.salePrice,
+    })
+  }
 />
 ```
 
@@ -1087,7 +1113,9 @@ import {
 } from "@onexapis/core/server";
 
 // Fetch products (server-side with ISR caching)
-const { data: products, pagination } = await fetchProducts(companyId, { limit: 12 });
+const { data: products, pagination } = await fetchProducts(companyId, {
+  limit: 12,
+});
 
 // Fetch website settings
 const settings = await fetchSettings(companyId);