@zalify/storefront-kit 0.1.6 → 0.1.8

package/LICENSE.md

@@ -11,7 +11,7 @@ and applications that you build and operate for yourself or for your
 clients.
 
 Code scaffolded into your project by Zalify tooling (for example by
-`create-zalify-theme`) may be modified without restriction and remains
+`@zalify/theme-templates`) may be modified without restriction and remains
 governed by this license as part of your project.
 
 ## Limitations

package/README.md

@@ -2,7 +2,7 @@
 
 The Zalify storefront SDK: everything shared between Zalify storefronts,
 shipped as one versioned package. Scaffold a storefront with
-[`create-zalify-theme`](https://www.npmjs.com/package/create-zalify-theme)
+[`npx zalify theme create`](https://www.npmjs.com/package/@zalify/cli)
 and upgrade this package to pull in new engine features, sections, and
 blocks — your customizations live in your project, not in a fork
 (the same model as the Shopify Hydrogen SDK).

package/dist/commerce/google-fonts.js

@@ -22,7 +22,7 @@ export function parseFontHandle(handle) {
     const match = /^(.*)_([nib])(\d)$/.exec(handle);
     if (!match)
         return fallback;
-    const family = match[1]
+    const family = (match[1] ?? '')
         .split('_')
         .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
         .join(' ');
@@ -53,7 +53,7 @@ export function googleFontsHrefsFromSettings(settings) {
     const monoGoogle = str('type_mono_google');
     hrefs.push(googleFontsHref(bodyGoogle || parseFontHandle(str('type_body_font') || undefined).family));
     const heading = headingGoogle || parseFontHandle(str('type_heading_font') || undefined).family;
-    if (!hrefs[0].includes(heading.replace(/ /g, '+'))) {
+    if (!hrefs[0]?.includes(heading.replace(/ /g, '+'))) {
         hrefs.push(googleFontsHref(heading, 'wght@400;500;600;700'));
     }
     if (monoGoogle)
@@ -106,8 +106,10 @@ async function fetchGoogleCss(href) {
         const latinUrls = [];
         const facePattern = /\/\*\s*latin\s*\*\/\s*@font-face\s*\{[^}]*?url\((https:[^)\s]+\.woff2)\)/g;
         let match;
-        while ((match = facePattern.exec(css)))
-            latinUrls.push(match[1]);
+        while ((match = facePattern.exec(css))) {
+            if (match[1])
+                latinUrls.push(match[1]);
+        }
         return { css, latinUrls };
     }
     catch {

package/dist/react/engine/settings.js

@@ -4,11 +4,13 @@
  * preset (or flat values) in config/settings_data.json — both provided
  * at installTheme() time.
  */
-import { getThemeStore } from './store';
+import { getThemeStore, getThemeStoreVersion } from './store';
+// Keyed to the install counter: multi-tenant apps call installTheme()
+// again with another store's schema, which must recompute this.
 let cache = null;
 function resolve() {
-    if (cache)
-        return cache;
+    if (cache && cache.version === getThemeStoreVersion())
+        return cache.resolved;
     const store = getThemeStore();
     const { settingsSchema, settingsData } = store.schema;
     const defaults = {};
@@ -46,8 +48,9 @@ function resolve() {
         const schemeSettings = Object.fromEntries(definition.map((d) => [d.id, d.default ?? '#000000']));
         schemes = [{ id: 'scheme-1', settings: schemeSettings }];
     }
-    cache = { settings, schemes };
-    return cache;
+    const resolved = { settings, schemes };
+    cache = { version: getThemeStoreVersion(), resolved };
+    return resolved;
 }
 /**
  * Global theme settings. A lazy proxy so call sites can keep reading

package/dist/react/engine/store.d.ts

@@ -50,6 +50,8 @@ export interface InstallThemeOptions {
 interface ThemeStore extends InstallThemeOptions {
 }
 export declare function installTheme(options: InstallThemeOptions): void;
+/** Monotonic install counter — lets derived caches detect re-installs. */
+export declare function getThemeStoreVersion(): number;
 export declare function getThemeStore(): ThemeStore;
 /** Look up a page template ("index", "product", "customers/login"…). */
 export declare function getTemplate(name: string): TemplateData;

package/dist/react/engine/store.js

@@ -1,6 +1,14 @@
 let store = null;
+let version = 0;
 export function installTheme(options) {
     store = options;
+    // Bump so derived caches (resolved settings) recompute — multi-tenant
+    // apps re-install per store from one module graph.
+    version++;
+}
+/** Monotonic install counter — lets derived caches detect re-installs. */
+export function getThemeStoreVersion() {
+    return version;
 }
 export function getThemeStore() {
     if (!store) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zalify/storefront-kit",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "type": "module",
   "description": "The Zalify storefront SDK: framework-agnostic commerce logic (/commerce), the theme contract types and validators (/schemas), the canvas-editor bridge (/editor), and the React theme engine + shared components (/ui, /react/server). Consumed as TypeScript source inside the zalify-storefronts monorepo; published as compiled ESM + d.ts.",
   "license": "SEE LICENSE IN LICENSE.md",

package/src/commerce/google-fonts.ts

@@ -27,7 +27,7 @@ export function parseFontHandle(handle: string | undefined): ResolvedFont {
   if (!handle) return fallback;
   const match = /^(.*)_([nib])(\d)$/.exec(handle);
   if (!match) return fallback;
-  const family = match[1]
+  const family = (match[1] ?? '')
     .split('_')
     .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
     .join(' ');
@@ -71,7 +71,7 @@ export function googleFontsHrefsFromSettings(
   );
   const heading =
     headingGoogle || parseFontHandle(str('type_heading_font') || undefined).family;
-  if (!hrefs[0].includes(heading.replace(/ /g, '+'))) {
+  if (!hrefs[0]?.includes(heading.replace(/ /g, '+'))) {
     hrefs.push(googleFontsHref(heading, 'wght@400;500;600;700'));
   }
   if (monoGoogle) hrefs.push(googleFontsHref(monoGoogle, 'wght@400;500'));
@@ -149,7 +149,9 @@ async function fetchGoogleCss(href: string): Promise<FetchedCss | null> {
     const facePattern =
       /\/\*\s*latin\s*\*\/\s*@font-face\s*\{[^}]*?url\((https:[^)\s]+\.woff2)\)/g;
     let match: RegExpExecArray | null;
-    while ((match = facePattern.exec(css))) latinUrls.push(match[1]);
+    while ((match = facePattern.exec(css))) {
+      if (match[1]) latinUrls.push(match[1]);
+    }
     return {css, latinUrls};
   } catch {
     return null;

package/src/react/engine/settings.ts

@@ -4,7 +4,7 @@
  * preset (or flat values) in config/settings_data.json — both provided
  * at installTheme() time.
  */
-import {getThemeStore} from './store';
+import {getThemeStore, getThemeStoreVersion} from './store';
 import type {ColorScheme, ThemeSettings} from './types';
 
 interface Resolved {
@@ -12,10 +12,12 @@ interface Resolved {
   schemes: ColorScheme[];
 }
 
-let cache: Resolved | null = null;
+// Keyed to the install counter: multi-tenant apps call installTheme()
+// again with another store's schema, which must recompute this.
+let cache: {version: number; resolved: Resolved} | null = null;
 
 function resolve(): Resolved {
-  if (cache) return cache;
+  if (cache && cache.version === getThemeStoreVersion()) return cache.resolved;
   const store = getThemeStore();
   const {settingsSchema, settingsData} = store.schema;
 
@@ -63,8 +65,9 @@ function resolve(): Resolved {
     schemes = [{id: 'scheme-1', settings: schemeSettings}];
   }
 
-  cache = {settings, schemes};
-  return cache;
+  const resolved = {settings, schemes};
+  cache = {version: getThemeStoreVersion(), resolved};
+  return resolved;
 }
 
 /**

package/src/react/engine/store.ts

@@ -56,9 +56,18 @@ export interface InstallThemeOptions {
 interface ThemeStore extends InstallThemeOptions {}
 
 let store: ThemeStore | null = null;
+let version = 0;
 
 export function installTheme(options: InstallThemeOptions): void {
   store = options;
+  // Bump so derived caches (resolved settings) recompute — multi-tenant
+  // apps re-install per store from one module graph.
+  version++;
+}
+
+/** Monotonic install counter — lets derived caches detect re-installs. */
+export function getThemeStoreVersion(): number {
+  return version;
 }
 
 export function getThemeStore(): ThemeStore {