@numueg/theme-sdk 0.3.2 → 0.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +404 -0
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.mts +5 -221
- package/dist/index.d.ts +5 -221
- package/dist/index.mjs +395 -1
- package/dist/index.mjs.map +1 -1
- package/dist/mount-BN2mz_wx.d.ts +225 -0
- package/dist/mount-DH9dz3dq.d.mts +225 -0
- package/dist/validation.cjs +408 -0
- package/dist/validation.cjs.map +1 -0
- package/dist/validation.d.mts +89 -0
- package/dist/validation.d.ts +89 -0
- package/dist/validation.mjs +397 -0
- package/dist/validation.mjs.map +1 -0
- package/dist/verify.cjs +200 -0
- package/dist/verify.cjs.map +1 -0
- package/dist/verify.d.mts +65 -0
- package/dist/verify.d.ts +65 -0
- package/dist/verify.mjs +191 -0
- package/dist/verify.mjs.map +1 -0
- package/package.json +11 -1
package/dist/index.d.mts
CHANGED
|
@@ -2,8 +2,11 @@ import { i as Store, e as Product, b as Collection, C as Cart, c as Customer, P
|
|
|
2
2
|
export { A as Address, a as CartItem, O as Order, d as OrderItem, f as ProductImage, j as ProductOption, h as SizeChartMode } from './entities-6MGANln7.mjs';
|
|
3
3
|
import { T as ThemeSettingsV3, c as SectionInstance, M as MountResult, B as BlockInstance, b as BlockSchema, a as BlockProps$1, f as SectionSchema, e as SectionProps$1 } from './theme-D0QybTQS.mjs';
|
|
4
4
|
export { E as ExternalThemeMetadata, h as MAX_BLOCK_DEPTH, P as PageTemplate, i as PresetBlock, S as SectionGroup, d as SectionPreset, g as SettingDefinition } from './theme-D0QybTQS.mjs';
|
|
5
|
+
export { KNOWN_SETTING_TYPES, KNOWN_TEMPLATES, REQUIRED_TEMPLATES, SDK_VERSION, THEME_CONTRACT_VERSION, ValidationIssue, ValidationResult, mergeResults, validateBuiltManifest, validateManifest, validateSectionSchema, validateSettingsAgainstSchema } from './validation.mjs';
|
|
6
|
+
import { L as LocalizationState, T as ThemeMountContext, a as ThemeRenderArgs, M as MenuItemData } from './mount-DH9dz3dq.mjs';
|
|
7
|
+
export { C as CartContext, b as CollectionContext, c as CustomerContext, d as LocalizationContext, N as NavigationContext, P as PageContext, e as ProductContext, S as ShopContext, f as ThemeMountPage, g as ThemeSettingsContext, h as buildThemeElement, m as mountTheme } from './mount-DH9dz3dq.mjs';
|
|
5
8
|
import * as react from 'react';
|
|
6
|
-
import {
|
|
9
|
+
import { ReactElement, ReactNode, ElementType, CSSProperties, ImgHTMLAttributes, AnchorHTMLAttributes, ButtonHTMLAttributes, HTMLAttributes, FormHTMLAttributes, ComponentType } from 'react';
|
|
7
10
|
export { resolveThemeSettings } from './normalize.mjs';
|
|
8
11
|
|
|
9
12
|
/**
|
|
@@ -82,90 +85,6 @@ declare function useThemeSettings(): ThemeSettingsV3;
|
|
|
82
85
|
*/
|
|
83
86
|
declare function useCurrentTemplate(): string;
|
|
84
87
|
|
|
85
|
-
interface LocalizationState {
|
|
86
|
-
locale: string;
|
|
87
|
-
direction: "ltr" | "rtl";
|
|
88
|
-
translations: Record<string, string>;
|
|
89
|
-
formatMoney: (amount: number, currency?: string) => string;
|
|
90
|
-
formatDate: (date: string | Date) => string;
|
|
91
|
-
/**
|
|
92
|
-
* Phase 3.7 — locale-aware number formatter. Routes to either
|
|
93
|
-
* Western (1234) or Arab-Indic (١٢٣٤) digits depending on
|
|
94
|
-
* `store.settings.numerals`. Themes calling formatMoney get the
|
|
95
|
-
* same digit choice automatically; this is for raw counts ("12 items").
|
|
96
|
-
*/
|
|
97
|
-
formatNumber: (n: number, options?: Intl.NumberFormatOptions) => string;
|
|
98
|
-
/**
|
|
99
|
-
* Phase 3.6 — switch the active locale.
|
|
100
|
-
*
|
|
101
|
-
* Sets the `numu_locale` cookie and triggers a full page reload so
|
|
102
|
-
* the server-rendered layout picks up the new locale (the storefront
|
|
103
|
-
* resolves locale at SSR time from cookie/query). Returns once the
|
|
104
|
-
* cookie is written; the page navigation cancels any pending React
|
|
105
|
-
* work so callers don't need to await.
|
|
106
|
-
*/
|
|
107
|
-
setLocale: (next: string) => void;
|
|
108
|
-
/**
|
|
109
|
-
* Phase 3.6 — list of locales the store advertises. Empty when the
|
|
110
|
-
* store hasn't configured a multi-locale catalog. Themes use this
|
|
111
|
-
* to decide whether to render the LocaleSwitcher at all.
|
|
112
|
-
*/
|
|
113
|
-
availableLocales: string[];
|
|
114
|
-
}
|
|
115
|
-
declare const ShopContext: react.Context<Store | null>;
|
|
116
|
-
declare const ProductContext: react.Context<Product | null>;
|
|
117
|
-
declare const CollectionContext: react.Context<Collection | null>;
|
|
118
|
-
declare const CartContext: react.Context<{
|
|
119
|
-
cart: Cart;
|
|
120
|
-
addItem: (productId: string, variantId?: string, quantity?: number) => Promise<void>;
|
|
121
|
-
removeItem: (itemId: string) => Promise<void>;
|
|
122
|
-
updateQuantity: (itemId: string, quantity: number) => Promise<void>;
|
|
123
|
-
applyDiscount: (code: string) => Promise<void>;
|
|
124
|
-
removeDiscount: () => Promise<void>;
|
|
125
|
-
updateNote: (note: string) => Promise<void>;
|
|
126
|
-
clearCart: () => Promise<void>;
|
|
127
|
-
loading: boolean;
|
|
128
|
-
} | null>;
|
|
129
|
-
declare const CustomerContext: react.Context<Customer | null>;
|
|
130
|
-
declare const ThemeSettingsContext: react.Context<ThemeSettingsV3 | null>;
|
|
131
|
-
declare const LocalizationContext: react.Context<LocalizationState | null>;
|
|
132
|
-
declare const PageContext: react.Context<Page | null>;
|
|
133
|
-
/**
|
|
134
|
-
* A merchant-managed navigation menu item, exactly as the storefront
|
|
135
|
-
* menus resolver returns it (`GET /storefront/store/{id}/menus`):
|
|
136
|
-
* bilingual `label`, a pre-resolved `url`, and nested `children`.
|
|
137
|
-
*
|
|
138
|
-
* This is the RAW shape the host injects via `NuMuProvider`'s
|
|
139
|
-
* `navigation` prop. `useNavigation(handle)` localizes it to the
|
|
140
|
-
* display-ready `NavigationItem` (a single `title` string for the
|
|
141
|
-
* active locale).
|
|
142
|
-
*/
|
|
143
|
-
interface MenuItemData {
|
|
144
|
-
id: string;
|
|
145
|
-
label: Record<string, string>;
|
|
146
|
-
url: string;
|
|
147
|
-
type?: string | null;
|
|
148
|
-
resource_id?: string | null;
|
|
149
|
-
/**
|
|
150
|
-
* §5 hide-page → hide-nav-link. `false` when the item targets a CMS page
|
|
151
|
-
* (`/pages/<handle>`) that is currently unpublished or deleted. The backend
|
|
152
|
-
* menus resolver annotates it; absent/`true` means visible (back-compat).
|
|
153
|
-
*/
|
|
154
|
-
target_visible?: boolean;
|
|
155
|
-
children?: MenuItemData[];
|
|
156
|
-
}
|
|
157
|
-
/**
|
|
158
|
-
* Phase 2.4 — navigation menus keyed by handle (`main-menu`, `footer`,
|
|
159
|
-
* plus custom), injected by the host from the storefront resolver so a
|
|
160
|
-
* theme's `useNavigation(handle)` resolves without a client round-trip.
|
|
161
|
-
*
|
|
162
|
-
* Defaults to `{}` — an empty map signals "host provided no menus", at
|
|
163
|
-
* which point `useNavigation` falls back to its own fetch / a theme's
|
|
164
|
-
* `DEFAULT_NAV`. A present-but-handle-absent map means the menu simply
|
|
165
|
-
* doesn't exist (render nothing / fallback), no fetch attempted.
|
|
166
|
-
*/
|
|
167
|
-
declare const NavigationContext: react.Context<Record<string, MenuItemData[]>>;
|
|
168
|
-
|
|
169
88
|
declare function useLocalization(): LocalizationState;
|
|
170
89
|
declare function useDirection(): "ltr" | "rtl";
|
|
171
90
|
declare function useLocale(): string;
|
|
@@ -1112,141 +1031,6 @@ interface UseShippingRatesState {
|
|
|
1112
1031
|
}
|
|
1113
1032
|
declare function useShippingRates({ address, location_id, enabled, }?: UseShippingRatesOptions): UseShippingRatesState;
|
|
1114
1033
|
|
|
1115
|
-
/**
|
|
1116
|
-
* `mountTheme(el, ctx, renderApp)` — the canonical V3 bundle entry helper.
|
|
1117
|
-
*
|
|
1118
|
-
* ## Why this exists
|
|
1119
|
-
*
|
|
1120
|
-
* Every theme bundle exports `mount(el, ctx): MountResult`. Historically each
|
|
1121
|
-
* theme hand-wrote that function, and the wiring it needs is non-trivial and
|
|
1122
|
-
* easy to get wrong:
|
|
1123
|
-
*
|
|
1124
|
-
* 1. **Forward the real catalog.** The host ships the page's products /
|
|
1125
|
-
* collections in `ctx.page.data` (home + listing routes) and the product
|
|
1126
|
-
* in `ctx.page.data.product` (PDP). A theme that doesn't pass these into
|
|
1127
|
-
* `NuMuProvider` (+ wrap the PDP in `<ProductProvider>`) sees
|
|
1128
|
-
* `useProducts()` / `useProductOptional()` return empty on a REAL store —
|
|
1129
|
-
* so product sections render "No products yet" or fall back to demo data
|
|
1130
|
-
* on a stocked merchant. This was the single most common BYOT bug:
|
|
1131
|
-
* only bon-younes wired it; the other 13 themes dropped the catalog.
|
|
1132
|
-
*
|
|
1133
|
-
* 2. **Apply global style tokens.** Merchant-chosen colors/fonts live in
|
|
1134
|
-
* `themeSettings.global_settings`; they only paint if the bundle calls
|
|
1135
|
-
* `applyGlobalStyleTokens` on its mount root (and resolves font tokens
|
|
1136
|
-
* to real stacks + injects the webfont link). Themes that skipped this
|
|
1137
|
-
* ignored every color/font picker.
|
|
1138
|
-
*
|
|
1139
|
-
* 3. **Forward navigation.** `useNavigation(handle)` only resolves the
|
|
1140
|
-
* header/footer menus the host pre-resolved if the bundle passes
|
|
1141
|
-
* `ctx.navigation` into `NuMuProvider`.
|
|
1142
|
-
*
|
|
1143
|
-
* 4. **Live-preview + lifecycle.** The customizer streams draft settings via
|
|
1144
|
-
* the host's `applyDraft`; the bundle must hold them in state and re-paint
|
|
1145
|
-
* the style tokens on every draft. And it must return a `MountResult`
|
|
1146
|
-
* (`cleanup` + `applyDraft`) the host's `ByotThemeBoundary` understands.
|
|
1147
|
-
*
|
|
1148
|
-
* `mountTheme` does all of that once, so a theme's `main.tsx` collapses to:
|
|
1149
|
-
*
|
|
1150
|
-
* ```tsx
|
|
1151
|
-
* import { mountTheme } from "@numueg/theme-sdk";
|
|
1152
|
-
* export function mount(el, ctx) {
|
|
1153
|
-
* return mountTheme(el, ctx, ({ currentTemplate }) =>
|
|
1154
|
-
* <ThemeApp currentTemplate={currentTemplate} />,
|
|
1155
|
-
* );
|
|
1156
|
-
* }
|
|
1157
|
-
* ```
|
|
1158
|
-
*
|
|
1159
|
-
* The theme owns only its section list (`ThemeApp`). Everything in the list
|
|
1160
|
-
* above is handled here — fix it once, every theme benefits.
|
|
1161
|
-
*
|
|
1162
|
-
* ## Both ctx shapes
|
|
1163
|
-
*
|
|
1164
|
-
* The host (numu-storefront `ByotThemeBoundary`) passes
|
|
1165
|
-
* `{ themeSettings, storeData, page, locale, demo, navigation }`. Older / dev
|
|
1166
|
-
* contexts used `{ store, currentTemplate }`. We normalise both so a bundle
|
|
1167
|
-
* built against this helper works regardless of which host calls it.
|
|
1168
|
-
*/
|
|
1169
|
-
|
|
1170
|
-
/** Minimal page descriptor the host forwards in the mount context. */
|
|
1171
|
-
interface ThemeMountPage {
|
|
1172
|
-
type?: string;
|
|
1173
|
-
handle?: string;
|
|
1174
|
-
title?: string;
|
|
1175
|
-
data?: Record<string, unknown>;
|
|
1176
|
-
}
|
|
1177
|
-
/**
|
|
1178
|
-
* The mount context a host (or dev harness) passes to a bundle's `mount`.
|
|
1179
|
-
* Accepts both the current storefront shape (`storeData`/`page`) and the
|
|
1180
|
-
* legacy/dev shape (`store`/`currentTemplate`); `mountTheme` normalises them.
|
|
1181
|
-
*/
|
|
1182
|
-
interface ThemeMountContext {
|
|
1183
|
-
storeData?: Store;
|
|
1184
|
-
page?: ThemeMountPage;
|
|
1185
|
-
store?: Store;
|
|
1186
|
-
currentTemplate?: string;
|
|
1187
|
-
themeSettings: ThemeSettingsV3;
|
|
1188
|
-
initialCart?: Cart;
|
|
1189
|
-
customer?: Customer | null;
|
|
1190
|
-
locale?: string;
|
|
1191
|
-
translations?: Record<string, string>;
|
|
1192
|
-
/** AUTHORITATIVE marketplace-preview flag from the host (true only for the
|
|
1193
|
-
* catalog "Try theme" preview). Themes with demo-image fallbacks gate on
|
|
1194
|
-
* it so a real installed store never shows demo imagery. */
|
|
1195
|
-
demo?: boolean;
|
|
1196
|
-
/** Store navigation menus keyed by handle, resolved server-side. */
|
|
1197
|
-
navigation?: Record<string, MenuItemData[]>;
|
|
1198
|
-
/**
|
|
1199
|
-
* Host signal that the container already holds server-rendered HTML for
|
|
1200
|
-
* this exact ctx (produced via `createApp` from `defineThemeEntry`).
|
|
1201
|
-
* `mountTheme` then adopts it with `hydrateRoot` instead of re-rendering
|
|
1202
|
-
* from scratch. Ignored when the container is empty, so a host can pass
|
|
1203
|
-
* it optimistically and still get a plain client mount on SSR failure.
|
|
1204
|
-
*/
|
|
1205
|
-
hydrate?: boolean;
|
|
1206
|
-
[extra: string]: unknown;
|
|
1207
|
-
}
|
|
1208
|
-
/** Arguments handed to a theme's render callback on every (re)render. */
|
|
1209
|
-
interface ThemeRenderArgs {
|
|
1210
|
-
/** Active template key — "home" | "product" | "collection" | "cart" | … */
|
|
1211
|
-
currentTemplate: string;
|
|
1212
|
-
/** Marketplace-preview flag (see ThemeMountContext.demo). */
|
|
1213
|
-
demo: boolean;
|
|
1214
|
-
/** The raw host page descriptor (type/handle/data), or null. */
|
|
1215
|
-
page: ThemeMountPage | null;
|
|
1216
|
-
/** Normalised store record (never undefined). */
|
|
1217
|
-
store: Store;
|
|
1218
|
-
/** Live theme settings (reflects customizer drafts via applyDraft). */
|
|
1219
|
-
themeSettings: ThemeSettingsV3;
|
|
1220
|
-
}
|
|
1221
|
-
interface DraftHandle {
|
|
1222
|
-
applyDraft: (next: ThemeSettingsV3) => void;
|
|
1223
|
-
}
|
|
1224
|
-
/**
|
|
1225
|
-
* Build the canonical theme element tree for a ctx. BOTH render paths go
|
|
1226
|
-
* through here — `mountTheme` (client mount/hydrate) and `createApp`
|
|
1227
|
-
* (host-side `renderToString`) — so the server markup and the hydration
|
|
1228
|
-
* tree are the same React tree by construction. `mountEl` is a prop, not
|
|
1229
|
-
* DOM output, so it differing between server (null) and client (the
|
|
1230
|
-
* container) cannot cause a hydration mismatch.
|
|
1231
|
-
*/
|
|
1232
|
-
declare function buildThemeElement(ctx: ThemeMountContext, mountEl: HTMLElement | null, renderApp: (args: ThemeRenderArgs) => ReactNode, ref?: (h: DraftHandle | null) => void): ReactElement;
|
|
1233
|
-
/**
|
|
1234
|
-
* Mount a V3 theme. Owns the React root, the provider stack (catalog + nav +
|
|
1235
|
-
* style tokens), and the live-preview draft cycle. Returns the host-contract
|
|
1236
|
-
* `MountResult` (`cleanup` + `applyDraft`).
|
|
1237
|
-
*
|
|
1238
|
-
* When the host passes `ctx.hydrate === true` and the container already
|
|
1239
|
-
* holds server-rendered HTML (produced by this theme's `createApp` with the
|
|
1240
|
-
* identical ctx), the tree is adopted via `hydrateRoot` — no re-render, no
|
|
1241
|
-
* flash. An empty container downgrades to a plain client mount so hosts can
|
|
1242
|
-
* pass the flag optimistically.
|
|
1243
|
-
*
|
|
1244
|
-
* @param el the host-supplied container element
|
|
1245
|
-
* @param ctx the mount context (either host or legacy/dev shape)
|
|
1246
|
-
* @param renderApp returns the theme's section tree for the current args
|
|
1247
|
-
*/
|
|
1248
|
-
declare function mountTheme(el: HTMLElement, ctx: ThemeMountContext, renderApp: (args: ThemeRenderArgs) => ReactNode): MountResult;
|
|
1249
|
-
|
|
1250
1034
|
/**
|
|
1251
1035
|
* `defineThemeEntry(renderApp)` — one-call theme entry that yields BOTH
|
|
1252
1036
|
* halves of the V3 contract from a single component:
|
|
@@ -2325,4 +2109,4 @@ declare function pickTranslations(bundle: LocaleBundle, locale: string): LocaleM
|
|
|
2325
2109
|
*/
|
|
2326
2110
|
declare function buildLocaleBundle<T extends Record<string, unknown>>(modules: T): LocaleBundle;
|
|
2327
2111
|
|
|
2328
|
-
export { AddToCartButton, type AddressInput, type AnalyticsApi, type AnalyticsPayload, type AppManifestBlock, type AppPayload, type AppState, Block, BlockInstance, BlockProps$1 as BlockProps, BlockSchema, Cart,
|
|
2112
|
+
export { AddToCartButton, type AddressInput, type AnalyticsApi, type AnalyticsPayload, type AppManifestBlock, type AppPayload, type AppState, Block, BlockInstance, BlockProps$1 as BlockProps, BlockSchema, Cart, type CheckoutAddress, type CheckoutApi, type CheckoutSessionState, type CheckoutStep, Collection, CollectionCard, type CollectionCardProps, type CollectionCardSlots, CollectionProvider, type ComputedStyleTokens, type CurrencyConfig, type CurrencyState, CurrencySwitcher, type CurrencySwitcherProps, Customer, type CustomerAddress, type CustomerAddressesState, type DefineBlockInput, type DefineSectionInput, type DefinedBlock, type DefinedSection, type DynamicResolveContext, type DynamicSourceRef, EditableImage, type EditableImageProps, EditableText, type EditableTextProps, type FocalSrcOptions, Form, type GiftCardBalance, ICON_NAMES, Icon, IconMap, type IconProps, Image, type ImageTransform, Link, type LocaleBundle, type LocaleMessages, LocaleSwitcher, type LocaleSwitcherProps, MenuItemData, Money, MountResult, type NavigationItem, type NavigationState, NuMuProvider, type OrderDetail, type OrderListEntry, type OrderListState, type OrderState, Page, type PlaceOrderResult, Product, ProductCard, type ProductCardProps, type ProductCardSlots, ProductProvider, ProductVariant, type RelatedProductsState, type ReorderResult, type ReorderSkipReason, type ReorderSkippedItem, RichText, type RichTextProps, type SearchResults, type SearchState, Section, SectionContext, SectionInstance, SectionProps$1 as SectionProps, SectionSchema, type ShippingRateOption, type ShopWithHelpers, SizeChart, Store, type ThemeEntry, ThemeMountContext, ThemeRenderArgs, ThemeSettingsV3, type UseGiftCardBalance, type UseReorder, type UseSearchOptions, type UseShippingRatesOptions, type UseShippingRatesState, type UseVariantSelection, type WishlistItem, type WishlistState, applyGlobalStyleTokens, applyImageTransform, asImageTransform, assetUrl, availableValues, buildLocaleBundle, clearSdkSingleton, collectBlocks, collectSections, computeGlobalStyleTokens, defaultVariant, defineBlock, defineSection, defineThemeEntry, dynamicSource, findVariantByOptions, flattenMessages, focalSrc, getReactSingleton, getSdkSingleton, isDefinedBlock, isDefinedSection, isDynamicSource, isSdkAvailable, pickTranslations, registerReactSingleton, registerSdkSingleton, resolveDynamicValue, resolveFontStack, resolveSettingsMap, resolveSizeChart, resolveSourcePath, sanitizeHtml, useAnalytics, useApp, useCart, useCheckout, useCollection, useCollectionOptional, useCollections, useCurrency, useCurrentTemplate, useCustomer, useCustomerActions, useCustomerAddresses, useDirection, useFieldTranslation, useGiftCardBalance, useImage, useLocale, useLocalization, useMoney, useNavigation, useNumberFormat, useOrder, useOrders, usePage, useProduct, useProductOptional, useProductSizeChart, useProducts, useRelatedProducts, useReorder, useResolvedSettings, useSearch, useSection, useSectionOptional, useShippingRates, useShop, useThemeSettings, useTranslation, useVariantSelection, useWishlist };
|
package/dist/index.d.ts
CHANGED
|
@@ -2,8 +2,11 @@ import { i as Store, e as Product, b as Collection, C as Cart, c as Customer, P
|
|
|
2
2
|
export { A as Address, a as CartItem, O as Order, d as OrderItem, f as ProductImage, j as ProductOption, h as SizeChartMode } from './entities-6MGANln7.js';
|
|
3
3
|
import { T as ThemeSettingsV3, c as SectionInstance, M as MountResult, B as BlockInstance, b as BlockSchema, a as BlockProps$1, f as SectionSchema, e as SectionProps$1 } from './theme-D0QybTQS.js';
|
|
4
4
|
export { E as ExternalThemeMetadata, h as MAX_BLOCK_DEPTH, P as PageTemplate, i as PresetBlock, S as SectionGroup, d as SectionPreset, g as SettingDefinition } from './theme-D0QybTQS.js';
|
|
5
|
+
export { KNOWN_SETTING_TYPES, KNOWN_TEMPLATES, REQUIRED_TEMPLATES, SDK_VERSION, THEME_CONTRACT_VERSION, ValidationIssue, ValidationResult, mergeResults, validateBuiltManifest, validateManifest, validateSectionSchema, validateSettingsAgainstSchema } from './validation.js';
|
|
6
|
+
import { L as LocalizationState, T as ThemeMountContext, a as ThemeRenderArgs, M as MenuItemData } from './mount-BN2mz_wx.js';
|
|
7
|
+
export { C as CartContext, b as CollectionContext, c as CustomerContext, d as LocalizationContext, N as NavigationContext, P as PageContext, e as ProductContext, S as ShopContext, f as ThemeMountPage, g as ThemeSettingsContext, h as buildThemeElement, m as mountTheme } from './mount-BN2mz_wx.js';
|
|
5
8
|
import * as react from 'react';
|
|
6
|
-
import {
|
|
9
|
+
import { ReactElement, ReactNode, ElementType, CSSProperties, ImgHTMLAttributes, AnchorHTMLAttributes, ButtonHTMLAttributes, HTMLAttributes, FormHTMLAttributes, ComponentType } from 'react';
|
|
7
10
|
export { resolveThemeSettings } from './normalize.js';
|
|
8
11
|
|
|
9
12
|
/**
|
|
@@ -82,90 +85,6 @@ declare function useThemeSettings(): ThemeSettingsV3;
|
|
|
82
85
|
*/
|
|
83
86
|
declare function useCurrentTemplate(): string;
|
|
84
87
|
|
|
85
|
-
interface LocalizationState {
|
|
86
|
-
locale: string;
|
|
87
|
-
direction: "ltr" | "rtl";
|
|
88
|
-
translations: Record<string, string>;
|
|
89
|
-
formatMoney: (amount: number, currency?: string) => string;
|
|
90
|
-
formatDate: (date: string | Date) => string;
|
|
91
|
-
/**
|
|
92
|
-
* Phase 3.7 — locale-aware number formatter. Routes to either
|
|
93
|
-
* Western (1234) or Arab-Indic (١٢٣٤) digits depending on
|
|
94
|
-
* `store.settings.numerals`. Themes calling formatMoney get the
|
|
95
|
-
* same digit choice automatically; this is for raw counts ("12 items").
|
|
96
|
-
*/
|
|
97
|
-
formatNumber: (n: number, options?: Intl.NumberFormatOptions) => string;
|
|
98
|
-
/**
|
|
99
|
-
* Phase 3.6 — switch the active locale.
|
|
100
|
-
*
|
|
101
|
-
* Sets the `numu_locale` cookie and triggers a full page reload so
|
|
102
|
-
* the server-rendered layout picks up the new locale (the storefront
|
|
103
|
-
* resolves locale at SSR time from cookie/query). Returns once the
|
|
104
|
-
* cookie is written; the page navigation cancels any pending React
|
|
105
|
-
* work so callers don't need to await.
|
|
106
|
-
*/
|
|
107
|
-
setLocale: (next: string) => void;
|
|
108
|
-
/**
|
|
109
|
-
* Phase 3.6 — list of locales the store advertises. Empty when the
|
|
110
|
-
* store hasn't configured a multi-locale catalog. Themes use this
|
|
111
|
-
* to decide whether to render the LocaleSwitcher at all.
|
|
112
|
-
*/
|
|
113
|
-
availableLocales: string[];
|
|
114
|
-
}
|
|
115
|
-
declare const ShopContext: react.Context<Store | null>;
|
|
116
|
-
declare const ProductContext: react.Context<Product | null>;
|
|
117
|
-
declare const CollectionContext: react.Context<Collection | null>;
|
|
118
|
-
declare const CartContext: react.Context<{
|
|
119
|
-
cart: Cart;
|
|
120
|
-
addItem: (productId: string, variantId?: string, quantity?: number) => Promise<void>;
|
|
121
|
-
removeItem: (itemId: string) => Promise<void>;
|
|
122
|
-
updateQuantity: (itemId: string, quantity: number) => Promise<void>;
|
|
123
|
-
applyDiscount: (code: string) => Promise<void>;
|
|
124
|
-
removeDiscount: () => Promise<void>;
|
|
125
|
-
updateNote: (note: string) => Promise<void>;
|
|
126
|
-
clearCart: () => Promise<void>;
|
|
127
|
-
loading: boolean;
|
|
128
|
-
} | null>;
|
|
129
|
-
declare const CustomerContext: react.Context<Customer | null>;
|
|
130
|
-
declare const ThemeSettingsContext: react.Context<ThemeSettingsV3 | null>;
|
|
131
|
-
declare const LocalizationContext: react.Context<LocalizationState | null>;
|
|
132
|
-
declare const PageContext: react.Context<Page | null>;
|
|
133
|
-
/**
|
|
134
|
-
* A merchant-managed navigation menu item, exactly as the storefront
|
|
135
|
-
* menus resolver returns it (`GET /storefront/store/{id}/menus`):
|
|
136
|
-
* bilingual `label`, a pre-resolved `url`, and nested `children`.
|
|
137
|
-
*
|
|
138
|
-
* This is the RAW shape the host injects via `NuMuProvider`'s
|
|
139
|
-
* `navigation` prop. `useNavigation(handle)` localizes it to the
|
|
140
|
-
* display-ready `NavigationItem` (a single `title` string for the
|
|
141
|
-
* active locale).
|
|
142
|
-
*/
|
|
143
|
-
interface MenuItemData {
|
|
144
|
-
id: string;
|
|
145
|
-
label: Record<string, string>;
|
|
146
|
-
url: string;
|
|
147
|
-
type?: string | null;
|
|
148
|
-
resource_id?: string | null;
|
|
149
|
-
/**
|
|
150
|
-
* §5 hide-page → hide-nav-link. `false` when the item targets a CMS page
|
|
151
|
-
* (`/pages/<handle>`) that is currently unpublished or deleted. The backend
|
|
152
|
-
* menus resolver annotates it; absent/`true` means visible (back-compat).
|
|
153
|
-
*/
|
|
154
|
-
target_visible?: boolean;
|
|
155
|
-
children?: MenuItemData[];
|
|
156
|
-
}
|
|
157
|
-
/**
|
|
158
|
-
* Phase 2.4 — navigation menus keyed by handle (`main-menu`, `footer`,
|
|
159
|
-
* plus custom), injected by the host from the storefront resolver so a
|
|
160
|
-
* theme's `useNavigation(handle)` resolves without a client round-trip.
|
|
161
|
-
*
|
|
162
|
-
* Defaults to `{}` — an empty map signals "host provided no menus", at
|
|
163
|
-
* which point `useNavigation` falls back to its own fetch / a theme's
|
|
164
|
-
* `DEFAULT_NAV`. A present-but-handle-absent map means the menu simply
|
|
165
|
-
* doesn't exist (render nothing / fallback), no fetch attempted.
|
|
166
|
-
*/
|
|
167
|
-
declare const NavigationContext: react.Context<Record<string, MenuItemData[]>>;
|
|
168
|
-
|
|
169
88
|
declare function useLocalization(): LocalizationState;
|
|
170
89
|
declare function useDirection(): "ltr" | "rtl";
|
|
171
90
|
declare function useLocale(): string;
|
|
@@ -1112,141 +1031,6 @@ interface UseShippingRatesState {
|
|
|
1112
1031
|
}
|
|
1113
1032
|
declare function useShippingRates({ address, location_id, enabled, }?: UseShippingRatesOptions): UseShippingRatesState;
|
|
1114
1033
|
|
|
1115
|
-
/**
|
|
1116
|
-
* `mountTheme(el, ctx, renderApp)` — the canonical V3 bundle entry helper.
|
|
1117
|
-
*
|
|
1118
|
-
* ## Why this exists
|
|
1119
|
-
*
|
|
1120
|
-
* Every theme bundle exports `mount(el, ctx): MountResult`. Historically each
|
|
1121
|
-
* theme hand-wrote that function, and the wiring it needs is non-trivial and
|
|
1122
|
-
* easy to get wrong:
|
|
1123
|
-
*
|
|
1124
|
-
* 1. **Forward the real catalog.** The host ships the page's products /
|
|
1125
|
-
* collections in `ctx.page.data` (home + listing routes) and the product
|
|
1126
|
-
* in `ctx.page.data.product` (PDP). A theme that doesn't pass these into
|
|
1127
|
-
* `NuMuProvider` (+ wrap the PDP in `<ProductProvider>`) sees
|
|
1128
|
-
* `useProducts()` / `useProductOptional()` return empty on a REAL store —
|
|
1129
|
-
* so product sections render "No products yet" or fall back to demo data
|
|
1130
|
-
* on a stocked merchant. This was the single most common BYOT bug:
|
|
1131
|
-
* only bon-younes wired it; the other 13 themes dropped the catalog.
|
|
1132
|
-
*
|
|
1133
|
-
* 2. **Apply global style tokens.** Merchant-chosen colors/fonts live in
|
|
1134
|
-
* `themeSettings.global_settings`; they only paint if the bundle calls
|
|
1135
|
-
* `applyGlobalStyleTokens` on its mount root (and resolves font tokens
|
|
1136
|
-
* to real stacks + injects the webfont link). Themes that skipped this
|
|
1137
|
-
* ignored every color/font picker.
|
|
1138
|
-
*
|
|
1139
|
-
* 3. **Forward navigation.** `useNavigation(handle)` only resolves the
|
|
1140
|
-
* header/footer menus the host pre-resolved if the bundle passes
|
|
1141
|
-
* `ctx.navigation` into `NuMuProvider`.
|
|
1142
|
-
*
|
|
1143
|
-
* 4. **Live-preview + lifecycle.** The customizer streams draft settings via
|
|
1144
|
-
* the host's `applyDraft`; the bundle must hold them in state and re-paint
|
|
1145
|
-
* the style tokens on every draft. And it must return a `MountResult`
|
|
1146
|
-
* (`cleanup` + `applyDraft`) the host's `ByotThemeBoundary` understands.
|
|
1147
|
-
*
|
|
1148
|
-
* `mountTheme` does all of that once, so a theme's `main.tsx` collapses to:
|
|
1149
|
-
*
|
|
1150
|
-
* ```tsx
|
|
1151
|
-
* import { mountTheme } from "@numueg/theme-sdk";
|
|
1152
|
-
* export function mount(el, ctx) {
|
|
1153
|
-
* return mountTheme(el, ctx, ({ currentTemplate }) =>
|
|
1154
|
-
* <ThemeApp currentTemplate={currentTemplate} />,
|
|
1155
|
-
* );
|
|
1156
|
-
* }
|
|
1157
|
-
* ```
|
|
1158
|
-
*
|
|
1159
|
-
* The theme owns only its section list (`ThemeApp`). Everything in the list
|
|
1160
|
-
* above is handled here — fix it once, every theme benefits.
|
|
1161
|
-
*
|
|
1162
|
-
* ## Both ctx shapes
|
|
1163
|
-
*
|
|
1164
|
-
* The host (numu-storefront `ByotThemeBoundary`) passes
|
|
1165
|
-
* `{ themeSettings, storeData, page, locale, demo, navigation }`. Older / dev
|
|
1166
|
-
* contexts used `{ store, currentTemplate }`. We normalise both so a bundle
|
|
1167
|
-
* built against this helper works regardless of which host calls it.
|
|
1168
|
-
*/
|
|
1169
|
-
|
|
1170
|
-
/** Minimal page descriptor the host forwards in the mount context. */
|
|
1171
|
-
interface ThemeMountPage {
|
|
1172
|
-
type?: string;
|
|
1173
|
-
handle?: string;
|
|
1174
|
-
title?: string;
|
|
1175
|
-
data?: Record<string, unknown>;
|
|
1176
|
-
}
|
|
1177
|
-
/**
|
|
1178
|
-
* The mount context a host (or dev harness) passes to a bundle's `mount`.
|
|
1179
|
-
* Accepts both the current storefront shape (`storeData`/`page`) and the
|
|
1180
|
-
* legacy/dev shape (`store`/`currentTemplate`); `mountTheme` normalises them.
|
|
1181
|
-
*/
|
|
1182
|
-
interface ThemeMountContext {
|
|
1183
|
-
storeData?: Store;
|
|
1184
|
-
page?: ThemeMountPage;
|
|
1185
|
-
store?: Store;
|
|
1186
|
-
currentTemplate?: string;
|
|
1187
|
-
themeSettings: ThemeSettingsV3;
|
|
1188
|
-
initialCart?: Cart;
|
|
1189
|
-
customer?: Customer | null;
|
|
1190
|
-
locale?: string;
|
|
1191
|
-
translations?: Record<string, string>;
|
|
1192
|
-
/** AUTHORITATIVE marketplace-preview flag from the host (true only for the
|
|
1193
|
-
* catalog "Try theme" preview). Themes with demo-image fallbacks gate on
|
|
1194
|
-
* it so a real installed store never shows demo imagery. */
|
|
1195
|
-
demo?: boolean;
|
|
1196
|
-
/** Store navigation menus keyed by handle, resolved server-side. */
|
|
1197
|
-
navigation?: Record<string, MenuItemData[]>;
|
|
1198
|
-
/**
|
|
1199
|
-
* Host signal that the container already holds server-rendered HTML for
|
|
1200
|
-
* this exact ctx (produced via `createApp` from `defineThemeEntry`).
|
|
1201
|
-
* `mountTheme` then adopts it with `hydrateRoot` instead of re-rendering
|
|
1202
|
-
* from scratch. Ignored when the container is empty, so a host can pass
|
|
1203
|
-
* it optimistically and still get a plain client mount on SSR failure.
|
|
1204
|
-
*/
|
|
1205
|
-
hydrate?: boolean;
|
|
1206
|
-
[extra: string]: unknown;
|
|
1207
|
-
}
|
|
1208
|
-
/** Arguments handed to a theme's render callback on every (re)render. */
|
|
1209
|
-
interface ThemeRenderArgs {
|
|
1210
|
-
/** Active template key — "home" | "product" | "collection" | "cart" | … */
|
|
1211
|
-
currentTemplate: string;
|
|
1212
|
-
/** Marketplace-preview flag (see ThemeMountContext.demo). */
|
|
1213
|
-
demo: boolean;
|
|
1214
|
-
/** The raw host page descriptor (type/handle/data), or null. */
|
|
1215
|
-
page: ThemeMountPage | null;
|
|
1216
|
-
/** Normalised store record (never undefined). */
|
|
1217
|
-
store: Store;
|
|
1218
|
-
/** Live theme settings (reflects customizer drafts via applyDraft). */
|
|
1219
|
-
themeSettings: ThemeSettingsV3;
|
|
1220
|
-
}
|
|
1221
|
-
interface DraftHandle {
|
|
1222
|
-
applyDraft: (next: ThemeSettingsV3) => void;
|
|
1223
|
-
}
|
|
1224
|
-
/**
|
|
1225
|
-
* Build the canonical theme element tree for a ctx. BOTH render paths go
|
|
1226
|
-
* through here — `mountTheme` (client mount/hydrate) and `createApp`
|
|
1227
|
-
* (host-side `renderToString`) — so the server markup and the hydration
|
|
1228
|
-
* tree are the same React tree by construction. `mountEl` is a prop, not
|
|
1229
|
-
* DOM output, so it differing between server (null) and client (the
|
|
1230
|
-
* container) cannot cause a hydration mismatch.
|
|
1231
|
-
*/
|
|
1232
|
-
declare function buildThemeElement(ctx: ThemeMountContext, mountEl: HTMLElement | null, renderApp: (args: ThemeRenderArgs) => ReactNode, ref?: (h: DraftHandle | null) => void): ReactElement;
|
|
1233
|
-
/**
|
|
1234
|
-
* Mount a V3 theme. Owns the React root, the provider stack (catalog + nav +
|
|
1235
|
-
* style tokens), and the live-preview draft cycle. Returns the host-contract
|
|
1236
|
-
* `MountResult` (`cleanup` + `applyDraft`).
|
|
1237
|
-
*
|
|
1238
|
-
* When the host passes `ctx.hydrate === true` and the container already
|
|
1239
|
-
* holds server-rendered HTML (produced by this theme's `createApp` with the
|
|
1240
|
-
* identical ctx), the tree is adopted via `hydrateRoot` — no re-render, no
|
|
1241
|
-
* flash. An empty container downgrades to a plain client mount so hosts can
|
|
1242
|
-
* pass the flag optimistically.
|
|
1243
|
-
*
|
|
1244
|
-
* @param el the host-supplied container element
|
|
1245
|
-
* @param ctx the mount context (either host or legacy/dev shape)
|
|
1246
|
-
* @param renderApp returns the theme's section tree for the current args
|
|
1247
|
-
*/
|
|
1248
|
-
declare function mountTheme(el: HTMLElement, ctx: ThemeMountContext, renderApp: (args: ThemeRenderArgs) => ReactNode): MountResult;
|
|
1249
|
-
|
|
1250
1034
|
/**
|
|
1251
1035
|
* `defineThemeEntry(renderApp)` — one-call theme entry that yields BOTH
|
|
1252
1036
|
* halves of the V3 contract from a single component:
|
|
@@ -2325,4 +2109,4 @@ declare function pickTranslations(bundle: LocaleBundle, locale: string): LocaleM
|
|
|
2325
2109
|
*/
|
|
2326
2110
|
declare function buildLocaleBundle<T extends Record<string, unknown>>(modules: T): LocaleBundle;
|
|
2327
2111
|
|
|
2328
|
-
export { AddToCartButton, type AddressInput, type AnalyticsApi, type AnalyticsPayload, type AppManifestBlock, type AppPayload, type AppState, Block, BlockInstance, BlockProps$1 as BlockProps, BlockSchema, Cart,
|
|
2112
|
+
export { AddToCartButton, type AddressInput, type AnalyticsApi, type AnalyticsPayload, type AppManifestBlock, type AppPayload, type AppState, Block, BlockInstance, BlockProps$1 as BlockProps, BlockSchema, Cart, type CheckoutAddress, type CheckoutApi, type CheckoutSessionState, type CheckoutStep, Collection, CollectionCard, type CollectionCardProps, type CollectionCardSlots, CollectionProvider, type ComputedStyleTokens, type CurrencyConfig, type CurrencyState, CurrencySwitcher, type CurrencySwitcherProps, Customer, type CustomerAddress, type CustomerAddressesState, type DefineBlockInput, type DefineSectionInput, type DefinedBlock, type DefinedSection, type DynamicResolveContext, type DynamicSourceRef, EditableImage, type EditableImageProps, EditableText, type EditableTextProps, type FocalSrcOptions, Form, type GiftCardBalance, ICON_NAMES, Icon, IconMap, type IconProps, Image, type ImageTransform, Link, type LocaleBundle, type LocaleMessages, LocaleSwitcher, type LocaleSwitcherProps, MenuItemData, Money, MountResult, type NavigationItem, type NavigationState, NuMuProvider, type OrderDetail, type OrderListEntry, type OrderListState, type OrderState, Page, type PlaceOrderResult, Product, ProductCard, type ProductCardProps, type ProductCardSlots, ProductProvider, ProductVariant, type RelatedProductsState, type ReorderResult, type ReorderSkipReason, type ReorderSkippedItem, RichText, type RichTextProps, type SearchResults, type SearchState, Section, SectionContext, SectionInstance, SectionProps$1 as SectionProps, SectionSchema, type ShippingRateOption, type ShopWithHelpers, SizeChart, Store, type ThemeEntry, ThemeMountContext, ThemeRenderArgs, ThemeSettingsV3, type UseGiftCardBalance, type UseReorder, type UseSearchOptions, type UseShippingRatesOptions, type UseShippingRatesState, type UseVariantSelection, type WishlistItem, type WishlistState, applyGlobalStyleTokens, applyImageTransform, asImageTransform, assetUrl, availableValues, buildLocaleBundle, clearSdkSingleton, collectBlocks, collectSections, computeGlobalStyleTokens, defaultVariant, defineBlock, defineSection, defineThemeEntry, dynamicSource, findVariantByOptions, flattenMessages, focalSrc, getReactSingleton, getSdkSingleton, isDefinedBlock, isDefinedSection, isDynamicSource, isSdkAvailable, pickTranslations, registerReactSingleton, registerSdkSingleton, resolveDynamicValue, resolveFontStack, resolveSettingsMap, resolveSizeChart, resolveSourcePath, sanitizeHtml, useAnalytics, useApp, useCart, useCheckout, useCollection, useCollectionOptional, useCollections, useCurrency, useCurrentTemplate, useCustomer, useCustomerActions, useCustomerAddresses, useDirection, useFieldTranslation, useGiftCardBalance, useImage, useLocale, useLocalization, useMoney, useNavigation, useNumberFormat, useOrder, useOrders, usePage, useProduct, useProductOptional, useProductSizeChart, useProducts, useRelatedProducts, useReorder, useResolvedSettings, useSearch, useSection, useSectionOptional, useShippingRates, useShop, useThemeSettings, useTranslation, useVariantSelection, useWishlist };
|