@athoscommerce/snap-preact 1.12.1-beta.152 → 1.13.0

package/dist/cjs/src/Templates/Stores/ThemeStore.js

@@ -16,26 +16,41 @@ class ThemeStore {
         const { config, dependencies, settings } = params;
         this.dependencies = dependencies;
         this.editMode = settings.editMode;
-        const { name, style, type, base, overrides, editorOverrides, variables, currency, language, languageOverrides, innerWidth } = config;
-        // add prefixes to base theme components and responsive components
-        base.components = prefixComponentKeys('*', base.components);
+        const { name, style, type, base, overrides, editorOverrides, variables, currency, currencyOverrides, language, languageOverrides, innerWidth } = config;
+        // Prefix base + normalize override selector keys into ThemeStore-OWNED copies. `base` is a
+        // shared library theme object (the same instance is reused to build multiple ThemeStores),
+        // so it must NOT be mutated in place — build fresh objects instead. prefixComponentKeys /
+        // normalizeCommaSeparatedKeys already return new objects; here we just avoid reassigning
+        // onto the shared inputs.
+        const prefixedBase = { ...base };
+        prefixedBase.components = prefixComponentKeys('*', flattenCascadingOverrides(base.components));
         if (base.responsive) {
-            base.responsive.mobile = prefixComponentKeys('*(M)', base.responsive?.mobile);
-            base.responsive.tablet = prefixComponentKeys('*(T)', base.responsive?.tablet);
-            base.responsive.desktop = prefixComponentKeys('*(D)', base.responsive?.desktop);
+            prefixedBase.responsive = {
+                mobile: prefixComponentKeys('*(M)', flattenCascadingOverrides(base.responsive.mobile)),
+                tablet: prefixComponentKeys('*(T)', flattenCascadingOverrides(base.responsive.tablet)),
+                desktop: prefixComponentKeys('*(D)', flattenCascadingOverrides(base.responsive.desktop)),
+            };
         }
+        const prefixedOverrides = { ...(overrides || {}) };
         if (overrides?.responsive) {
-            overrides.responsive.mobile = prefixComponentKeys('(M)', overrides.responsive?.mobile);
-            overrides.responsive.tablet = prefixComponentKeys('(T)', overrides.responsive?.tablet);
-            overrides.responsive.desktop = prefixComponentKeys('(D)', overrides.responsive?.desktop);
+            prefixedOverrides.responsive = {
+                mobile: prefixComponentKeys('(M)', flattenCascadingOverrides(overrides.responsive.mobile)),
+                tablet: prefixComponentKeys('(T)', flattenCascadingOverrides(overrides.responsive.tablet)),
+                desktop: prefixComponentKeys('(D)', flattenCascadingOverrides(overrides.responsive.desktop)),
+            };
+        }
+        // Normalize comma-separated selectors in override default components (no prefix needed, but commas need normalizing)
+        if (overrides?.components) {
+            prefixedOverrides.components = normalizeCommaSeparatedKeys(flattenCascadingOverrides(overrides.components));
         }
         this.name = name;
         this.type = type;
-        this.base = base;
-        this.overrides = overrides || {};
+        this.base = prefixedBase;
+        this.overrides = prefixedOverrides;
         this.editorOverrides = editorOverrides || {};
         this.variables = variables || {};
         this.currency = currency;
+        this.currencyOverrides = currencyOverrides || {};
         this.language = language;
         this.languageOverrides = languageOverrides;
         this.innerWidth = innerWidth;
@@ -44,47 +59,64 @@ class ThemeStore {
             name: mobx_1.observable,
             variables: mobx_1.observable,
             currency: mobx_1.observable,
+            currencyOverrides: mobx_1.observable,
             language: mobx_1.observable,
+            languageOverrides: mobx_1.observable,
             editorOverrides: mobx_1.observable,
             innerWidth: mobx_1.observable,
+            // memoized breakpoint band. `theme` depends on THIS computed, not on `innerWidth`
+            // directly, so a resize that stays within the same band (a common case) recomputes
+            // this cheap primitive to the same value and does NOT invalidate the expensive theme
+            // merge below.
+            activeBreakpoint: mobx_1.computed,
             theme: mobx_1.computed, // make theme getter a computed property (memoized)
         });
     }
+    // Current breakpoint band derived from innerWidth. Kept as its own computed so that
+    // within-band resizes (which return the same string) do not invalidate the `theme` computed.
+    get activeBreakpoint() {
+        // const breakpoints = this.variables.breakpoints || this.base.variables?.breakpoints;
+        const breakpoints = deepmerge_1.default.all([
+            this.base.variables.breakpoints,
+            this.variables.breakpoints || {},
+            (this.editMode && this.editorOverrides?.variables?.breakpoints) || {},
+        ]);
+        return getActiveBreakpoint(this.innerWidth, breakpoints);
+    }
     get theme() {
         /*
             Themes consist of layers which are deep merged together in order (last merge has highest priority)
                 1. base theme
                 2. base theme responsive breakpoints
                 3. currency
-                4. language
-                5. language translation overrides
-                6. theme overrides
-                7. theme overrides at responsive breakpoints
-                8. altered theme variables
-                9. stored theme editor overrides
-                10. stored theme editor overrides at responsive breakpoints
+                4. per currency component overrides
+                5. language
+                6. language translation overrides
+                7. theme overrides
+                8. theme overrides at responsive breakpoints
+                9. altered theme variables
+                10. stored theme editor overrides
+                11. stored theme editor overrides at responsive breakpoints
         */
-        // const breakpoints = this.variables.breakpoints || this.base.variables?.breakpoints;
-        const breakpoints = deepmerge_1.default.all([
-            this.base.variables.breakpoints,
-            this.variables.breakpoints || {},
-            (this.editMode && this.editorOverrides?.variables?.breakpoints) || {},
-        ]);
-        const activeBreakpoint = getActiveBreakpoint(this.innerWidth, breakpoints);
+        const activeBreakpoint = this.activeBreakpoint;
         // overrides breakpoint is index file responsive overrides that match current breakpoint
         const overrideBreakpoint = getOverridesAtActiveBreakpoint(activeBreakpoint, this.overrides);
         // currently selected theme layer for current breakpoint
         const baseBreakpoint = getOverridesAtActiveBreakpoint(activeBreakpoint, this.base);
-        // currently selected theme
-        const base = { ...this.base };
         // overrides is index file default overrides
         const overrides = { ...this.overrides };
         const themeOverrides = mergeThemeLayers(overrides, overrideBreakpoint, {
             variables: (0, mobx_1.toJS)(this.variables),
         });
-        let theme = mergeThemeLayers(base, baseBreakpoint, this.currency, this.language, this.languageOverrides, themeOverrides, {
+        // PERF: deepmerge.all deep-clones its accumulator on EVERY layer, so passing the large base
+        // theme as the first of 7 layers re-clones it ~6x per rebuild. Instead, merge the small
+        // (non-base) layers together first, then do a SINGLE merge with base — base is deep-cloned
+        // once. Output is identical: last-wins deep object/array merge is associative for these
+        // layers (verified by the theme-getter tests below, which pin full theme output).
+        const overlay = mergeThemeLayers(baseBreakpoint, this.currency, this.currencyOverrides, this.language, this.languageOverrides, themeOverrides, {
             activeBreakpoint: activeBreakpoint,
         });
+        let theme = mergeThemeLayers(this.base, overlay);
         /*
             Ensure 'theme' prop has overrides applied to it
             - separate the "base" theme from "overrides"
@@ -112,9 +144,11 @@ class ThemeStore {
         }
         // TemplateEditor overrides
         if (this.editMode) {
-            theme = mergeThemeLayers(theme, this.editorOverrides);
+            // PERF: same single-clone pattern — pre-merge the small editor layers, then one merge
+            // with the (large) theme instead of cloning the theme twice.
             const editorOverrideBreakpoint = getOverridesAtActiveBreakpoint(activeBreakpoint, this.editorOverrides);
-            theme = mergeThemeLayers(theme, editorOverrideBreakpoint);
+            const editorOverlay = mergeThemeLayers(this.editorOverrides, editorOverrideBreakpoint);
+            theme = mergeThemeLayers(theme, editorOverlay);
         }
         const activeStyleFns = [this.base.globalStyle, this.style].filter(Boolean);
         if (activeStyleFns.length > 0) {
@@ -127,11 +161,13 @@ class ThemeStore {
     setInnerWidth(innerWidth) {
         this.innerWidth = innerWidth;
     }
-    setCurrency(currency) {
+    setCurrency(currency, currencyOverrides = {}) {
         this.currency = currency;
+        this.currencyOverrides = currencyOverrides;
     }
-    setLanguage(language) {
+    setLanguage(language, languageOverrides = {}) {
         this.language = language;
+        this.languageOverrides = languageOverrides;
     }
     setEditorOverrides(overrides) {
         this.editorOverrides = overrides;
@@ -177,11 +213,55 @@ const arrayMerge = (target, source, options) => {
     });
     return destination;
 };
+function flattenCascadingOverrides(components) {
+    if (!components)
+        return {};
+    const flattened = {};
+    Object.keys(components).forEach((key) => {
+        //grab the $children property and remove it from the component props so it doesn't get merged into the flattened component
+        const { $children, ...ownProps } = components[key] || {};
+        flattened[key] = { ...flattened[key], ...ownProps };
+        // if there are $children, flatten them and prefix the parent key to each child key
+        if ($children) {
+            const flatChildren = flattenCascadingOverrides($children);
+            const parentParts = key.split(/\s*,\s*/);
+            Object.keys(flatChildren).forEach((childKey) => {
+                const childParts = childKey.split(/\s*,\s*/);
+                const prefixedParts = [];
+                parentParts.forEach((parentPart) => {
+                    childParts.forEach((childPart) => {
+                        // rebuild the treepath with the parent key and the child key.
+                        // so that merge props takes these flattened overrides and applied them like normal
+                        prefixedParts.push(`${parentPart} ${childPart}`);
+                    });
+                });
+                const prefixedKey = prefixedParts.join(', ');
+                flattened[prefixedKey] = { ...flattened[prefixedKey], ...flatChildren[childKey] };
+            });
+        }
+    });
+    return flattened;
+}
 function prefixComponentKeys(prefix, components) {
     // TODO: remove any?
     const newComponents = {};
     if (components) {
         Object.keys(components).forEach((key) => {
+            // Handle comma-separated selectors by prefixing each individual selector
+            // Split on comma with optional surrounding whitespace, normalize to ', '
+            if (key.includes(',')) {
+                const prefixedKey = key
+                    .split(/\s*,\s*/)
+                    .map((part) => {
+                    // does the part already have the prefix?
+                    if (part.indexOf(prefix) === 0)
+                        return part;
+                    return `${prefix}${part}`;
+                })
+                    .join(', ');
+                newComponents[prefixedKey] = components[key];
+                return;
+            }
             //does the key already have the prefix? - this is needed when using the editor.
             if (key.indexOf(prefix) === 0) {
                 newComponents[key] = components[key];
@@ -193,3 +273,16 @@ function prefixComponentKeys(prefix, components) {
     }
     return newComponents;
 }
+function normalizeCommaSeparatedKeys(components) {
+    const newComponents = {};
+    Object.keys(components).forEach((key) => {
+        if (key.includes(',')) {
+            const normalized = key.split(/\s*,\s*/).join(', ');
+            newComponents[normalized] = components[key];
+        }
+        else {
+            newComponents[key] = components[key];
+        }
+    });
+    return newComponents;
+}

package/dist/cjs/src/Templates/Stores/library/currencies/currencies.js

@@ -1,10 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.currencies = void 0;
-// Currencies supported by Snap Templates — matches the list of currencies supported by Shopify (ISO 4217).
-// Symbols, decimal places and separators are sourced from CLDR — decimalPlaces is only set when not 2, and
-// separators are only set when the currency has a single dominant convention that differs from the component
-// defaults (multi-locale currencies like EUR/USD/CHF/CAD keep the defaults and can be overridden per site).
 exports.currencies = {
     // United Arab Emirates Dirham
     aed: {
@@ -38,9 +34,10 @@ exports.currencies = {
     amd: {
         components: {
             price: {
-                symbol: '֏',
+                symbol: '\u00A0֏',
                 thousandsSeparator: '\u00A0',
                 decimalSeparator: ',',
+                symbolAfter: true,
             },
         },
     },
@@ -58,9 +55,10 @@ exports.currencies = {
     aoa: {
         components: {
             price: {
-                symbol: 'Kz',
+                symbol: '\u00A0Kz',
                 thousandsSeparator: '\u00A0',
                 decimalSeparator: ',',
+                symbolAfter: true,
             },
         },
     },
@@ -96,9 +94,10 @@ exports.currencies = {
     azn: {
         components: {
             price: {
-                symbol: '₼',
+                symbol: '\u00A0₼',
                 thousandsSeparator: '.',
                 decimalSeparator: ',',
+                symbolAfter: true,
             },
         },
     },
@@ -106,9 +105,10 @@ exports.currencies = {
     bam: {
         components: {
             price: {
-                symbol: 'KM',
+                symbol: '\u00A0KM',
                 thousandsSeparator: '.',
                 decimalSeparator: ',',
+                symbolAfter: true,
             },
         },
     },
@@ -125,6 +125,7 @@ exports.currencies = {
         components: {
             price: {
                 symbol: '৳',
+                symbolAfter: true,
             },
         },
     },
@@ -318,9 +319,10 @@ exports.currencies = {
     czk: {
         components: {
             price: {
-                symbol: 'Kč',
+                symbol: '\u00A0Kč',
                 thousandsSeparator: '\u00A0',
                 decimalSeparator: ',',
+                symbolAfter: true,
             },
         },
     },
@@ -339,9 +341,10 @@ exports.currencies = {
     dkk: {
         components: {
             price: {
-                symbol: 'kr',
+                symbol: '\u00A0kr',
                 thousandsSeparator: '.',
                 decimalSeparator: ',',
+                symbolAfter: true,
             },
         },
     },
@@ -423,9 +426,10 @@ exports.currencies = {
     gel: {
         components: {
             price: {
-                symbol: '₾',
+                symbol: '\u00A0₾',
                 thousandsSeparator: '\u00A0',
                 decimalSeparator: ',',
+                symbolAfter: true,
             },
         },
     },
@@ -457,10 +461,11 @@ exports.currencies = {
     gnf: {
         components: {
             price: {
-                symbol: 'FG',
+                symbol: '\u00A0FG',
                 decimalPlaces: 0,
                 thousandsSeparator: '\u00A0',
                 decimalSeparator: ',',
+                symbolAfter: true,
             },
         },
     },
@@ -500,9 +505,10 @@ exports.currencies = {
     hrk: {
         components: {
             price: {
-                symbol: 'kn',
+                symbol: '\u00A0kn',
                 thousandsSeparator: '.',
                 decimalSeparator: ',',
+                symbolAfter: true,
             },
         },
     },
@@ -520,10 +526,11 @@ exports.currencies = {
     huf: {
         components: {
             price: {
-                symbol: 'Ft',
+                symbol: '\u00A0Ft',
                 decimalPlaces: 0,
                 thousandsSeparator: '\u00A0',
                 decimalSeparator: ',',
+                symbolAfter: true,
             },
         },
     },
@@ -542,7 +549,8 @@ exports.currencies = {
     ils: {
         components: {
             price: {
-                symbol: '₪',
+                symbol: '\u00A0₪',
+                symbolAfter: true,
             },
         },
     },
@@ -576,10 +584,11 @@ exports.currencies = {
     isk: {
         components: {
             price: {
-                symbol: 'kr',
+                symbol: '\u00A0kr',
                 decimalPlaces: 0,
                 thousandsSeparator: '.',
                 decimalSeparator: ',',
+                symbolAfter: true,
             },
         },
     },
@@ -640,6 +649,7 @@ exports.currencies = {
         components: {
             price: {
                 symbol: '៛',
+                symbolAfter: true,
             },
         },
     },
@@ -655,10 +665,11 @@ exports.currencies = {
     kmf: {
         components: {
             price: {
-                symbol: 'CF',
+                symbol: '\u00A0CF',
                 decimalPlaces: 0,
                 thousandsSeparator: '\u00A0',
                 decimalSeparator: ',',
+                symbolAfter: true,
             },
         },
     },
@@ -692,9 +703,10 @@ exports.currencies = {
     kzt: {
         components: {
             price: {
-                symbol: '₸',
+                symbol: '\u00A0₸',
                 thousandsSeparator: '\u00A0',
                 decimalSeparator: ',',
+                symbolAfter: true,
             },
         },
     },
@@ -758,9 +770,10 @@ exports.currencies = {
     lvl: {
         components: {
             price: {
-                symbol: 'Ls',
+                symbol: '\u00A0Ls',
                 thousandsSeparator: '\u00A0',
                 decimalSeparator: ',',
+                symbolAfter: true,
             },
         },
     },
@@ -820,8 +833,9 @@ exports.currencies = {
     mmk: {
         components: {
             price: {
-                symbol: 'K',
+                symbol: '\u00A0K',
                 decimalPlaces: 0,
+                symbolAfter: true,
             },
         },
     },
@@ -855,7 +869,8 @@ exports.currencies = {
     mur: {
         components: {
             price: {
-                symbol: 'Rs',
+                symbol: '\u00A0Rs',
+                symbolAfter: true,
             },
         },
     },
@@ -929,9 +944,10 @@ exports.currencies = {
     nok: {
         components: {
             price: {
-                symbol: 'kr',
+                symbol: '\u00A0kr',
                 thousandsSeparator: '\u00A0',
                 decimalSeparator: ',',
+                symbolAfter: true,
             },
         },
     },
@@ -1005,9 +1021,10 @@ exports.currencies = {
     pln: {
         components: {
             price: {
-                symbol: 'zł',
+                symbol: '\u00A0zł',
                 thousandsSeparator: '\u00A0',
                 decimalSeparator: ',',
+                symbolAfter: true,
             },
         },
     },
@@ -1054,9 +1071,10 @@ exports.currencies = {
     rub: {
         components: {
             price: {
-                symbol: '₽',
+                symbol: '\u00A0₽',
                 thousandsSeparator: '\u00A0',
                 decimalSeparator: ',',
+                symbolAfter: true,
             },
         },
     },
@@ -1107,9 +1125,10 @@ exports.currencies = {
     sek: {
         components: {
             price: {
-                symbol: 'kr',
+                symbol: '\u00A0kr',
                 thousandsSeparator: '\u00A0',
                 decimalSeparator: ',',
+                symbolAfter: true,
             },
         },
     },
@@ -1161,7 +1180,8 @@ exports.currencies = {
     ssp: {
         components: {
             price: {
-                symbol: '£',
+                symbol: '\u00A0£',
+                symbolAfter: true,
             },
         },
     },
@@ -1169,9 +1189,10 @@ exports.currencies = {
     stn: {
         components: {
             price: {
-                symbol: 'Db',
+                symbol: '\u00A0Db',
                 thousandsSeparator: '\u00A0',
                 decimalSeparator: ',',
+                symbolAfter: true,
             },
         },
     },
@@ -1277,9 +1298,10 @@ exports.currencies = {
     uah: {
         components: {
             price: {
-                symbol: '₴',
+                symbol: '\u00A0₴',
                 thousandsSeparator: '\u00A0',
                 decimalSeparator: ',',
+                symbolAfter: true,
             },
         },
     },
@@ -1344,10 +1366,11 @@ exports.currencies = {
     vnd: {
         components: {
             price: {
-                symbol: '₫',
+                symbol: '\u00A0₫',
                 decimalPlaces: 0,
                 thousandsSeparator: '.',
                 decimalSeparator: ',',
+                symbolAfter: true,
             },
         },
     },