@athoscommerce/snap-preact 1.12.0 → 1.13.0

package/dist/cjs/src/Snap.js

@@ -284,7 +284,7 @@ class Snap {
                 3. override via query param / cookie
             */
             // node env
-            if (process.env.NODE_ENV && Object.values(snap_toolbox_1.AppMode).includes(process.env.NODE_ENV)) {
+            if (typeof process !== 'undefined' && process.env.NODE_ENV && Object.values(snap_toolbox_1.AppMode).includes(process.env.NODE_ENV)) {
                 this.mode = process.env.NODE_ENV;
             }
             // config

package/dist/cjs/src/Templates/SnapTemplates.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createSearchTargeters = exports.SnapTemplates = exports.applyAutomaticThemeOverrides = exports.TAB_PREFIXED_PARAMS = exports.DEFAULT_AUTOCOMPLETE_CONTROLLER_SETTINGS = exports.DEFAULT_FEATURES = exports.TEMPLATE_EDITOR_UI_PARAM = exports.TEMPLATE_EDITOR_COOKIE = void 0;
+exports.createSearchTargeters = exports.SnapTemplates = exports.TAB_PREFIXED_PARAMS = exports.DEFAULT_AUTOCOMPLETE_CONTROLLER_SETTINGS = exports.DEFAULT_FEATURES = exports.TEMPLATE_EDITOR_UI_PARAM = exports.TEMPLATE_EDITOR_COOKIE = void 0;
 exports.validateTemplatesConfig = validateTemplatesConfig;
 exports.validateTemplatesConfigUnlocked = validateTemplatesConfigUnlocked;
 exports.mapBreakpoints = mapBreakpoints;
@@ -24,14 +24,17 @@ const TargetStore_1 = require("./Stores/TargetStore");
 const TabManagerStore_1 = require("./Stores/TabManagerStore");
 const snap_client_1 = require("@athoscommerce/snap-client");
 const snap_tracker_1 = require("@athoscommerce/snap-tracker");
-const shopify_1 = require("@athoscommerce/snap-platforms/shopify");
 const utils_1 = require("../utils");
 exports.TEMPLATE_EDITOR_COOKIE = 'athosEditor';
 exports.TEMPLATE_EDITOR_UI_PARAM = 'athos-editor';
+// prettier-ignore
 function validateTemplatesConfig(config) {
+    // the return type is a compile-time verdict; at runtime the config passes straight through
     return config;
 }
+// prettier-ignore
 function validateTemplatesConfigUnlocked(config) {
+    // the return type is a compile-time verdict; at runtime the config passes straight through
     return config;
 }
 exports.DEFAULT_FEATURES = {};
@@ -42,54 +45,8 @@ exports.DEFAULT_AUTOCOMPLETE_CONTROLLER_SETTINGS = {
 };
 // tabs namespace their catalog specific url state - the query is shared so a single search spans every tab
 exports.TAB_PREFIXED_PARAMS = ['filter', 'sort', 'pageSize', 'rq', 'page'];
-const hasShopifyMarketsPluginConfig = (templateConfig) => {
-    const pluginConfigs = [
-        templateConfig.plugins?.shopify?.markets,
-        templateConfig.search?.plugins?.shopify?.markets,
-        templateConfig.autocomplete?.plugins?.shopify?.markets,
-        templateConfig.recommendation?.plugins?.shopify?.markets,
-    ];
-    return pluginConfigs.some((pluginConfig) => {
-        return typeof pluginConfig?.token === 'string' && pluginConfig.token.length > 0;
-    });
-};
-const applyAutomaticThemeOverrides = (templateConfig) => {
-    if (templateConfig.config?.platform !== 'shopify') {
-        return templateConfig;
-    }
-    if (!hasShopifyMarketsPluginConfig(templateConfig)) {
-        return templateConfig;
-    }
-    const defaultOverrides = templateConfig.theme?.overrides?.default;
-    const priceOverride = defaultOverrides?.price;
-    if (typeof priceOverride?.format !== 'undefined') {
-        return templateConfig;
-    }
-    let context;
-    try {
-        context = (0, snap_toolbox_1.getContext)(['format']);
-    }
-    catch {
-        context = undefined;
-    }
-    const currencyFormat = context?.format || '${{amount}}';
-    // todo: consider moving this inside of the plugin if possible. seems odd to have this happen outside of it.
-    return (0, deepmerge_1.default)(templateConfig, {
-        theme: {
-            overrides: {
-                default: {
-                    price: {
-                        format: (number) => (0, shopify_1.shopifyMarketsPriceFormat)(number, currencyFormat),
-                    },
-                },
-            },
-        },
-    });
-};
-exports.applyAutomaticThemeOverrides = applyAutomaticThemeOverrides;
 class SnapTemplates extends Snap_1.Snap {
     constructor(config) {
-        const modifiedConfig = (0, exports.applyAutomaticThemeOverrides)(config);
         let context = {};
         try {
             context = (0, snap_toolbox_1.getContext)(['editor']);
@@ -103,11 +60,11 @@ class SnapTemplates extends Snap_1.Snap {
         const editUIMode = Boolean((urlParams?.params?.query && exports.TEMPLATE_EDITOR_UI_PARAM in urlParams.params.query) || editorCookieValue === 'ui' || editor?.mode === 'ui');
         const editMode = Boolean(editorCookieValue) || editUIMode || Boolean(editor?.mode === 'headless');
         // handle "global" result component configuration
-        if (modifiedConfig.theme.globalResultComponent) {
-            modifiedConfig.theme.overrides = (0, deepmerge_1.default)({ default: { result: { customComponent: modifiedConfig.theme.globalResultComponent } } }, modifiedConfig.theme.overrides || {});
+        if (config.theme.globalResultComponent) {
+            config.theme.overrides = (0, deepmerge_1.default)({ default: { result: { customComponent: config.theme.globalResultComponent } } }, config.theme.overrides || {});
         }
-        const templatesStore = new TemplateStore_1.TemplatesStore({ config: modifiedConfig, settings: { editMode } });
-        const snapConfig = createSnapConfig(modifiedConfig, templatesStore);
+        const templatesStore = new TemplateStore_1.TemplatesStore({ config: config, settings: { editMode } });
+        const snapConfig = createSnapConfig(config, templatesStore);
         super(snapConfig, { templatesStore });
         this.templates = templatesStore;
         setTimeout(async () => {
@@ -597,9 +554,16 @@ function createPlugins(templateConfig, templatesStore, controllerType) {
             ]);
             const marketsConfig = (0, deepmerge_1.default)(templateConfig.plugins?.shopify?.markets || {}, controllerConfig?.plugins?.shopify?.markets || {});
             //only push if token is defined and non-empty
-            if (typeof marketsConfig?.token === 'string' && marketsConfig.token.length > 0) {
+            const marketsEnabled = typeof marketsConfig?.token === 'string' && marketsConfig.token.length > 0;
+            if (marketsEnabled) {
                 plugins.push([templatesStore.library.import.plugins.shopify.markets, marketsConfig]);
             }
+            // markets plugin enables the currency plugin unless it has been explicitly disabled
+            const currencyConfig = (0, deepmerge_1.default)(templateConfig.plugins?.shopify?.currency || {}, controllerConfig?.plugins?.shopify?.currency || {});
+            if (currencyConfig?.enabled === true || (marketsEnabled && currencyConfig?.enabled !== false)) {
+                // `enabled` is resolved onto the config so the plugin survives the tab plugin filter below
+                plugins.push([templatesStore.library.import.plugins.shopify.currency, { ...currencyConfig, enabled: true }, templatesStore]);
+            }
             break;
         case 'bigCommerce':
             plugins.push([

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

@@ -7,6 +7,7 @@ const pluginBackgroundFilters_1 = require("./library/plugins/shopify/pluginBackg
 const pluginMutateResults_1 = require("./library/plugins/shopify/pluginMutateResults");
 const pluginAddToCart_1 = require("./library/plugins/shopify/pluginAddToCart");
 const pluginMarkets_1 = require("./library/plugins/shopify/pluginMarkets");
+const pluginCurrency_1 = require("./library/plugins/shopify/pluginCurrency");
 const pluginAddToCart_2 = require("./library/plugins/bigCommerce/pluginAddToCart");
 const pluginAddToCart_3 = require("./library/plugins/magento2/pluginAddToCart");
 const pluginAddToCart_4 = require("./library/plugins/common/pluginAddToCart");
@@ -133,6 +134,7 @@ class LibraryStore {
                     mutateResults: pluginMutateResults_1.pluginMutateResults,
                     addToCart: pluginAddToCart_1.pluginAddToCart,
                     markets: pluginMarkets_1.pluginMarkets,
+                    currency: pluginCurrency_1.pluginCurrency,
                 },
                 bigcommerce: {
                     backgroundFilters: pluginBackgroundFilters_2.pluginBackgroundFilters,

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

@@ -1,7 +1,14 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TemplatesStore = exports.TEMPLATE_STORE_KEY = void 0;
+exports.resolveCurrencyOverridesTheme = resolveCurrencyOverridesTheme;
+exports.withCurrencyCode = withCurrencyCode;
 exports.transformTranslationsToTheme = transformTranslationsToTheme;
+exports.resolveTranslationsOverridesTheme = resolveTranslationsOverridesTheme;
+const deepmerge_1 = __importDefault(require("deepmerge"));
 const mobx_1 = require("mobx");
 const snap_toolbox_1 = require("@athoscommerce/snap-toolbox");
 const ThemeStore_1 = require("./ThemeStore");
@@ -79,9 +86,10 @@ class TemplatesStore {
             const base = this.library.themes[themeConfiguration.extends];
             const overrides = themeConfiguration.overrides || {};
             const variables = themeConfiguration.variables || {};
-            const currency = this.library.locales.currencies[this.currency] || {};
+            const currency = withCurrencyCode(this.currency, this.library.locales.currencies[this.currency] || {});
+            const currencyOverrides = resolveCurrencyOverridesTheme(this.config.currencies, this.currency);
             const language = this.library.locales.languages[this.language] || {};
-            const languageOverrides = transformTranslationsToTheme((this.config.translations && this.config.translations[this.language]) || {});
+            const languageOverrides = resolveTranslationsOverridesTheme(this.config.translations, this.language);
             const translatedOverrides = {
                 components: overrides.default,
                 responsive: {
@@ -98,6 +106,7 @@ class TemplatesStore {
                 overrides: translatedOverrides,
                 variables,
                 currency,
+                currencyOverrides,
                 language,
                 languageOverrides,
                 innerWidth: this.window.innerWidth,
@@ -189,13 +198,15 @@ class TemplatesStore {
             if (currency) {
                 this.currency = code;
                 this.storage.set('overrides.config.currency', this.currency);
+                const currencyLayer = withCurrencyCode(code, currency);
+                const currencyOverrides = resolveCurrencyOverridesTheme(this.config.currencies, code);
                 for (const themeName in this.themes.local) {
                     const theme = this.themes.local[themeName];
-                    theme.setCurrency(currency);
+                    theme.setCurrency(currencyLayer, currencyOverrides);
                 }
                 for (const themeName in this.themes.library) {
                     const theme = this.themes.library[themeName];
-                    theme.setCurrency(currency);
+                    theme.setCurrency(currencyLayer, currencyOverrides);
                 }
             }
         }
@@ -211,13 +222,14 @@ class TemplatesStore {
             if (language) {
                 this.language = code;
                 this.storage.set('overrides.config.language', this.language);
+                const languageOverrides = resolveTranslationsOverridesTheme(this.config.translations, code);
                 for (const themeName in this.themes.local) {
                     const theme = this.themes.local[themeName];
-                    theme.setLanguage(language);
+                    theme.setLanguage(language, languageOverrides);
                 }
                 for (const themeName in this.themes.library) {
                     const theme = this.themes.library[themeName];
-                    theme.setLanguage(language);
+                    theme.setLanguage(language, languageOverrides);
                 }
             }
         }
@@ -238,8 +250,9 @@ class TemplatesStore {
                 type: 'library',
                 base: theme,
                 language: this.library.locales.languages[this.language] || {},
-                languageOverrides: transformTranslationsToTheme((this.config.translations && this.config.translations[this.language]) || {}),
-                currency: this.library.locales.currencies[this.currency] || {},
+                languageOverrides: resolveTranslationsOverridesTheme(this.config.translations, this.language),
+                currency: withCurrencyCode(this.currency, this.library.locales.currencies[this.currency] || {}),
+                currencyOverrides: resolveCurrencyOverridesTheme(this.config.currencies, this.currency),
                 innerWidth: this.window.innerWidth,
             };
             if (this.settings.editMode) {
@@ -262,6 +275,18 @@ function getTargetArray(targets, type) {
     }
     return undefined;
 }
+/*
+    Resolves the configured component overrides for a currency into a theme layer.
+*/
+function resolveCurrencyOverridesTheme(currencies, code) {
+    const overrides = currencies?.[code] || currencies?.[code.toUpperCase()];
+    return overrides ? { components: overrides } : {};
+}
+// the ISO code is not stored in the locale data - it is derived from the active currency so the `Price`
+// component can render it after the amount when `showCode` is enabled
+function withCurrencyCode(code, currency) {
+    return (0, deepmerge_1.default)(currency, { components: { price: { code: code.toUpperCase() } } });
+}
 function transformTranslationsToTheme(translations) {
     const components = {};
     Object.keys(translations).forEach((component) => {
@@ -274,6 +299,10 @@ function transformTranslationsToTheme(translations) {
         components,
     };
 }
+function resolveTranslationsOverridesTheme(translations, code) {
+    const overrides = translations?.[code] || translations?.[code.toUpperCase()];
+    return transformTranslationsToTheme(overrides || {});
+}
 class Deferred {
     constructor() {
         this.promise = new Promise((resolve, reject) => {

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;
+}