@athoscommerce/snap-preact 1.9.1 → 1.10.0

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

@@ -1,98 +1,4 @@
 "use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -103,15 +9,15 @@ exports.createAutocompleteTargeters = createAutocompleteTargeters;
 exports.createRecommendationComponentMapping = createRecommendationComponentMapping;
 exports.createSnapConfig = createSnapConfig;
 exports.createPlugins = createPlugins;
-var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-var preact_1 = require("preact");
-var deepmerge_1 = __importDefault(require("deepmerge"));
-var Snap_1 = require("../Snap");
-var TemplateSelect_1 = require("../../components/src/components/Atoms/TemplateSelect");
-var snap_toolbox_1 = require("@athoscommerce/snap-toolbox");
-var TemplateStore_1 = require("./Stores/TemplateStore");
-var shopify_1 = require("@athoscommerce/snap-platforms/shopify");
-var utils_1 = require("../utils");
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const preact_1 = require("preact");
+const deepmerge_1 = __importDefault(require("deepmerge"));
+const Snap_1 = require("../Snap");
+const TemplateSelect_1 = require("../../components/src/components/Atoms/TemplateSelect");
+const snap_toolbox_1 = require("@athoscommerce/snap-toolbox");
+const TemplateStore_1 = require("./Stores/TemplateStore");
+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';
 exports.DEFAULT_FEATURES = {};
@@ -120,46 +26,44 @@ exports.DEFAULT_AUTOCOMPLETE_CONTROLLER_SETTINGS = {
         limit: 5,
     },
 };
-var hasShopifyMarketsPluginConfig = function (templateConfig) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-    var pluginConfigs = [
-        (_b = (_a = templateConfig.plugins) === null || _a === void 0 ? void 0 : _a.shopify) === null || _b === void 0 ? void 0 : _b.markets,
-        (_e = (_d = (_c = templateConfig.search) === null || _c === void 0 ? void 0 : _c.plugins) === null || _d === void 0 ? void 0 : _d.shopify) === null || _e === void 0 ? void 0 : _e.markets,
-        (_h = (_g = (_f = templateConfig.autocomplete) === null || _f === void 0 ? void 0 : _f.plugins) === null || _g === void 0 ? void 0 : _g.shopify) === null || _h === void 0 ? void 0 : _h.markets,
-        (_l = (_k = (_j = templateConfig.recommendation) === null || _j === void 0 ? void 0 : _j.plugins) === null || _k === void 0 ? void 0 : _k.shopify) === null || _l === void 0 ? void 0 : _l.markets,
+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(function (pluginConfig) {
-        return typeof (pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.token) === 'string' && pluginConfig.token.length > 0;
+    return pluginConfigs.some((pluginConfig) => {
+        return typeof pluginConfig?.token === 'string' && pluginConfig.token.length > 0;
     });
 };
-var applyAutomaticThemeOverrides = function (templateConfig) {
-    var _a, _b, _c;
-    if (((_a = templateConfig.config) === null || _a === void 0 ? void 0 : _a.platform) !== 'shopify') {
+const applyAutomaticThemeOverrides = (templateConfig) => {
+    if (templateConfig.config?.platform !== 'shopify') {
         return templateConfig;
     }
     if (!hasShopifyMarketsPluginConfig(templateConfig)) {
         return templateConfig;
     }
-    var defaultOverrides = (_c = (_b = templateConfig.theme) === null || _b === void 0 ? void 0 : _b.overrides) === null || _c === void 0 ? void 0 : _c.default;
-    var priceOverride = defaultOverrides === null || defaultOverrides === void 0 ? void 0 : defaultOverrides.price;
-    if (typeof (priceOverride === null || priceOverride === void 0 ? void 0 : priceOverride.format) !== 'undefined') {
+    const defaultOverrides = templateConfig.theme?.overrides?.default;
+    const priceOverride = defaultOverrides?.price;
+    if (typeof priceOverride?.format !== 'undefined') {
         return templateConfig;
     }
-    var context;
+    let context;
     try {
         context = (0, snap_toolbox_1.getContext)(['format']);
     }
-    catch (_d) {
+    catch {
         context = undefined;
     }
-    var currencyFormat = (context === null || context === void 0 ? void 0 : context.format) || '${{amount}}';
+    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: function (number) { return (0, shopify_1.shopifyMarketsPriceFormat)(number, currencyFormat); },
+                        format: (number) => (0, shopify_1.shopifyMarketsPriceFormat)(number, currencyFormat),
                     },
                 },
             },
@@ -167,199 +71,157 @@ var applyAutomaticThemeOverrides = function (templateConfig) {
     });
 };
 exports.applyAutomaticThemeOverrides = applyAutomaticThemeOverrides;
-var SnapTemplates = /** @class */ (function (_super) {
-    __extends(SnapTemplates, _super);
-    function SnapTemplates(config) {
-        var _this = this;
-        var _a;
-        var modifiedConfig = (0, exports.applyAutomaticThemeOverrides)(config);
-        var context = {};
+class SnapTemplates extends Snap_1.Snap {
+    constructor(config) {
+        const modifiedConfig = (0, exports.applyAutomaticThemeOverrides)(config);
+        let context = {};
         try {
             context = (0, snap_toolbox_1.getContext)(['editor']);
         }
-        catch (_b) {
+        catch {
             context = {};
         }
-        var editor = context.editor;
-        var urlParams = (0, snap_toolbox_1.url)(window.location.href);
-        var editorCookieValue = snap_toolbox_1.cookies.get(exports.TEMPLATE_EDITOR_COOKIE);
-        var editUIMode = Boolean((((_a = urlParams === null || urlParams === void 0 ? void 0 : urlParams.params) === null || _a === void 0 ? void 0 : _a.query) && exports.TEMPLATE_EDITOR_UI_PARAM in urlParams.params.query) || editorCookieValue === 'ui' || (editor === null || editor === void 0 ? void 0 : editor.mode) === 'ui');
-        var editMode = Boolean(editorCookieValue) || editUIMode || Boolean((editor === null || editor === void 0 ? void 0 : editor.mode) === 'headless');
+        const { editor } = context;
+        const urlParams = (0, snap_toolbox_1.url)(window.location.href);
+        const editorCookieValue = snap_toolbox_1.cookies.get(exports.TEMPLATE_EDITOR_COOKIE);
+        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 || {});
         }
-        var templatesStore = new TemplateStore_1.TemplatesStore({ config: modifiedConfig, settings: { editMode: editMode } });
-        var snapConfig = createSnapConfig(modifiedConfig, templatesStore);
-        _this = _super.call(this, snapConfig, { templatesStore: templatesStore }) || this;
-        _this.templates = templatesStore;
-        setTimeout(function () { return __awaiter(_this, void 0, void 0, function () {
-            var TemplateEditorStore, templateEditorStore_1, searchController, autocompleteController;
-            var _this = this;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        if (!editMode) return [3 /*break*/, 3];
-                        // create templateditor store
-                        // preload the library
-                        return [4 /*yield*/, templatesStore.preLoad()];
-                    case 1:
-                        // create templateditor store
-                        // preload the library
-                        _a.sent();
-                        return [4 /*yield*/, Promise.resolve().then(function () { return __importStar(require('./Stores/TemplateEditor/TemplateEditorStore')); })];
-                    case 2:
-                        TemplateEditorStore = (_a.sent()).TemplateEditorStore;
-                        templateEditorStore_1 = new TemplateEditorStore({ templatesStore: templatesStore });
-                        // attach to the window object
-                        window.athos = window.athos || {};
-                        window.athos.editor = templateEditorStore_1;
-                        searchController = this.controllers['search'];
-                        autocompleteController = this.controllers['autocomplete'];
-                        if (searchController) {
-                            templateEditorStore_1.registerController(searchController);
-                        }
-                        if (autocompleteController) {
-                            templateEditorStore_1.registerController(autocompleteController);
-                        }
-                        // render ui editor
-                        if (editUIMode) {
-                            snap_toolbox_1.cookies.set(exports.TEMPLATE_EDITOR_COOKIE, 'ui');
-                            new snap_toolbox_1.DomTargeter([
-                                {
-                                    selector: 'body',
-                                    inject: {
-                                        action: 'append',
-                                        element: function () {
-                                            var themeEditContainer = document.createElement('div');
-                                            themeEditContainer.id = 'athos-template-editor';
-                                            return themeEditContainer;
-                                        },
-                                    },
+        const templatesStore = new TemplateStore_1.TemplatesStore({ config: modifiedConfig, settings: { editMode } });
+        const snapConfig = createSnapConfig(modifiedConfig, templatesStore);
+        super(snapConfig, { templatesStore });
+        this.templates = templatesStore;
+        setTimeout(async () => {
+            if (editMode) {
+                // create templateditor store
+                // preload the library
+                await templatesStore.preLoad();
+                // create editor store and register controllers
+                const TemplateEditorStore = (await import('./Stores/TemplateEditor/TemplateEditorStore')).TemplateEditorStore;
+                const templateEditorStore = new TemplateEditorStore({ templatesStore });
+                // attach to the window object
+                window.athos = window.athos || {};
+                window.athos.editor = templateEditorStore;
+                const searchController = this.controllers['search'];
+                const autocompleteController = this.controllers['autocomplete'];
+                if (searchController) {
+                    templateEditorStore.registerController(searchController);
+                }
+                if (autocompleteController) {
+                    templateEditorStore.registerController(autocompleteController);
+                }
+                // render ui editor
+                if (editUIMode) {
+                    snap_toolbox_1.cookies.set(exports.TEMPLATE_EDITOR_COOKIE, 'ui');
+                    new snap_toolbox_1.DomTargeter([
+                        {
+                            selector: 'body',
+                            inject: {
+                                action: 'append',
+                                element: () => {
+                                    const themeEditContainer = document.createElement('div');
+                                    themeEditContainer.id = 'athos-template-editor';
+                                    return themeEditContainer;
                                 },
-                            ], function (target, elem) { return __awaiter(_this, void 0, void 0, function () {
-                                var TemplateEditor, error_1;
-                                return __generator(this, function (_a) {
-                                    switch (_a.label) {
-                                        case 0:
-                                            _a.trys.push([0, 2, , 3]);
-                                            return [4 /*yield*/, Promise.resolve().then(function () { return __importStar(require('../../components/src')); })];
-                                        case 1:
-                                            TemplateEditor = (_a.sent()).TemplatesEditor;
-                                            (0, preact_1.render)((0, jsx_runtime_1.jsx)(TemplateEditor, { templatesStore: templatesStore, editorStore: templateEditorStore_1, snap: this, onRemoveClick: function () {
-                                                    snap_toolbox_1.cookies.unset(exports.TEMPLATE_EDITOR_COOKIE);
-                                                    var urlState = (0, snap_toolbox_1.url)(window.location.href);
-                                                    urlState === null || urlState === void 0 ? true : delete urlState.params.query[exports.TEMPLATE_EDITOR_UI_PARAM];
-                                                    var newUrl = urlState === null || urlState === void 0 ? void 0 : urlState.url();
-                                                    if (newUrl && newUrl != window.location.href) {
-                                                        window.location.href = newUrl;
-                                                    }
-                                                    else {
-                                                        window.location.reload();
-                                                    }
-                                                } }), elem);
-                                            return [3 /*break*/, 3];
-                                        case 2:
-                                            error_1 = _a.sent();
-                                            console.error('Error rendering TemplateEditor:', error_1);
-                                            return [3 /*break*/, 3];
-                                        case 3: return [2 /*return*/];
+                            },
+                        },
+                    ], async (target, elem) => {
+                        try {
+                            const TemplateEditor = (await import('../../components/src')).TemplatesEditor;
+                            (0, preact_1.render)((0, jsx_runtime_1.jsx)(TemplateEditor, { templatesStore: templatesStore, editorStore: templateEditorStore, snap: this, onRemoveClick: () => {
+                                    snap_toolbox_1.cookies.unset(exports.TEMPLATE_EDITOR_COOKIE);
+                                    const urlState = (0, snap_toolbox_1.url)(window.location.href);
+                                    delete urlState?.params.query[exports.TEMPLATE_EDITOR_UI_PARAM];
+                                    const newUrl = urlState?.url();
+                                    if (newUrl && newUrl != window.location.href) {
+                                        window.location.href = newUrl;
+                                    }
+                                    else {
+                                        window.location.reload();
                                     }
-                                });
-                            }); });
+                                } }), elem);
                         }
-                        _a.label = 3;
-                    case 3: return [2 /*return*/];
+                        catch (error) {
+                            console.error('Error rendering TemplateEditor:', error);
+                        }
+                    });
                 }
-            });
-        }); });
-        return _this;
+            }
+        });
     }
-    return SnapTemplates;
-}(Snap_1.Snap));
+}
 exports.SnapTemplates = SnapTemplates;
 function mapBreakpoints(breakpointsKeys, breakpointSettings) {
-    return breakpointsKeys.reduce(function (mapping, width, index) {
+    return breakpointsKeys.reduce((mapping, width, index) => {
         mapping[width.toString()] = breakpointSettings[index] || {};
         return mapping;
     }, {});
 }
-var createSearchTargeters = function (templateConfig, templatesStore) {
-    var _a;
+const createSearchTargeters = (templateConfig, templatesStore) => {
     // initial target configs
-    var targetConfigs = ((_a = templateConfig.search) === null || _a === void 0 ? void 0 : _a.targets) || [];
-    var mergedConfigs;
+    const targetConfigs = templateConfig.search?.targets || [];
+    let mergedConfigs;
     if (templatesStore.settings.editMode) {
-        var overrideConfigs = (templatesStore.storage.get('overrides.targets.search') || []);
+        const overrideConfigs = (templatesStore.storage.get('overrides.targets.search') || []);
         mergedConfigs = (0, deepmerge_1.default)(targetConfigs, overrideConfigs, { arrayMerge: utils_1.combineMerge });
     }
     else {
         mergedConfigs = targetConfigs;
     }
     // loop through mergedConfigs ---
-    return mergedConfigs.map(function (targetConfig) {
-        var target = templatesStore.addTarget(__assign(__assign({}, targetConfig), { type: 'search' }));
+    return mergedConfigs.map((targetConfig) => {
+        const target = templatesStore.addTarget({ ...targetConfig, type: 'search' });
         // const overrideTemplateStoreTarget = templatesStore.getTarget('search', target.index);
         // console.log("templatesStore", templatesStore)
         // console.log('selector', targetConfig.selector);
         // console.log('overrideTemplateStoreTarget', overrideTemplateStoreTarget);
-        var targeter = {
+        const targeter = {
             selector: targetConfig.selector,
             autoRetarget: true,
             hideTarget: true,
-            component: function () { return __awaiter(void 0, void 0, void 0, function () {
-                var componentImportPromises;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0:
-                            componentImportPromises = [];
-                            componentImportPromises.push(templatesStore.library.import.component.search[targetConfig.component]());
-                            return [4 /*yield*/, Promise.all(componentImportPromises)];
-                        case 1:
-                            _a.sent();
-                            return [2 /*return*/, TemplateSelect_1.TemplateSelect];
-                    }
-                });
-            }); },
-            props: { target: target, templatesStore: templatesStore },
+            component: async () => {
+                const componentImportPromises = [];
+                componentImportPromises.push(templatesStore.library.import.component.search[targetConfig.component]());
+                await Promise.all(componentImportPromises);
+                return TemplateSelect_1.TemplateSelect;
+            },
+            props: { target, templatesStore },
         };
         return targeter;
     });
 };
 exports.createSearchTargeters = createSearchTargeters;
 function createAutocompleteTargeters(templateConfig, templatesStore) {
-    var _this = this;
-    var _a;
     // initial target configs
-    var targetConfigs = ((_a = templateConfig.autocomplete) === null || _a === void 0 ? void 0 : _a.targets) || [];
-    var mergedConfigs;
+    const targetConfigs = templateConfig.autocomplete?.targets || [];
+    let mergedConfigs;
     if (templatesStore.settings.editMode) {
-        var overrideConfigs = (templatesStore.storage.get('overrides.targets.autocomplete') || []);
+        const overrideConfigs = (templatesStore.storage.get('overrides.targets.autocomplete') || []);
         mergedConfigs = (0, deepmerge_1.default)(targetConfigs, overrideConfigs, { arrayMerge: utils_1.combineMerge });
     }
     else {
         mergedConfigs = targetConfigs;
     }
     // load target override from localstorage OR from the editorStore (would be better);
-    return mergedConfigs.map(function (targetConfig) {
-        var target = templatesStore.addTarget(__assign(__assign({}, targetConfig), { type: 'autocomplete', selector: targetConfig.selector || targetConfig.inputSelector }));
-        var targeter = {
+    return mergedConfigs.map((targetConfig) => {
+        const target = templatesStore.addTarget({ ...targetConfig, type: 'autocomplete', selector: targetConfig.selector || targetConfig.inputSelector });
+        const targeter = {
             selector: targetConfig.selector || targetConfig.inputSelector,
-            component: function () { return __awaiter(_this, void 0, void 0, function () {
-                var componentImportPromises;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0:
-                            componentImportPromises = [];
-                            componentImportPromises.push(templatesStore.library.import.component.autocomplete[targetConfig.component]());
-                            return [4 /*yield*/, Promise.all(componentImportPromises)];
-                        case 1:
-                            _a.sent();
-                            return [2 /*return*/, TemplateSelect_1.TemplateSelect];
-                    }
-                });
-            }); },
-            props: __assign({ target: target, templatesStore: templatesStore }, (targetConfig.selector && targetConfig.selector !== targetConfig.inputSelector ? { input: targetConfig.inputSelector } : {})),
+            component: async () => {
+                const componentImportPromises = [];
+                componentImportPromises.push(templatesStore.library.import.component.autocomplete[targetConfig.component]());
+                await Promise.all(componentImportPromises);
+                return TemplateSelect_1.TemplateSelect;
+            },
+            props: {
+                target,
+                templatesStore,
+                //only set input if selector and inputSelector are different. else bind to orinalElem
+                ...(targetConfig.selector && targetConfig.selector !== targetConfig.inputSelector ? { input: targetConfig.inputSelector } : {}),
+            },
             autoRetarget: true,
             hideTarget: true,
             createControllerBeforeTargeting: templatesStore.settings.editMode,
@@ -368,49 +230,44 @@ function createAutocompleteTargeters(templateConfig, templatesStore) {
     });
 }
 function createRecommendationComponentMapping(templateConfig, templatesStore) {
-    var _this = this;
     // TODO: throw a warning if keys match inside each recommendation type
     return Object.keys(templateConfig.recommendation || {})
-        .filter(function (key) { return ['default', 'email', 'bundle'].includes(key); })
-        .reduce(function (mapping, type) {
-        var recsType = type;
-        Object.keys(templateConfig.recommendation[recsType] || {}).forEach(function (targetName, index) {
-            var type = "recommendation/".concat(recsType);
-            var targetConfig = __assign(__assign({}, templateConfig.recommendation[recsType][targetName]), { index: index, type: type });
-            var mappedConfig = {
-                component: function () { return __awaiter(_this, void 0, void 0, function () {
-                    var componentImportPromises, importLocation, importLocation, importLocation;
-                    return __generator(this, function (_a) {
-                        switch (_a.label) {
-                            case 0:
-                                componentImportPromises = [];
-                                switch (recsType) {
-                                    case 'default': {
-                                        importLocation = templatesStore.library.import.component.recommendation.default;
-                                        componentImportPromises.push(importLocation[targetConfig.component]());
-                                        break;
-                                    }
-                                    case 'bundle': {
-                                        importLocation = templatesStore.library.import.component.recommendation.bundle;
-                                        componentImportPromises.push(importLocation[targetConfig.component]());
-                                        break;
-                                    }
-                                    case 'email': {
-                                        importLocation = templatesStore.library.import.component.recommendation.email;
-                                        componentImportPromises.push(importLocation[targetConfig.component]());
-                                        break;
-                                    }
-                                }
-                                return [4 /*yield*/, Promise.all(componentImportPromises)];
-                            case 1:
-                                _a.sent();
-                                return [2 /*return*/, TemplateSelect_1.TemplateSelect];
+        .filter((key) => ['default', 'email', 'bundle'].includes(key))
+        .reduce((mapping, type) => {
+        const recsType = type;
+        Object.keys(templateConfig.recommendation[recsType] || {}).forEach((targetName, index) => {
+            const type = `recommendation/${recsType}`;
+            const targetConfig = {
+                ...templateConfig.recommendation[recsType][targetName],
+                index,
+                type,
+            };
+            const mappedConfig = {
+                component: async () => {
+                    const componentImportPromises = [];
+                    switch (recsType) {
+                        case 'default': {
+                            const importLocation = templatesStore.library.import.component.recommendation.default;
+                            componentImportPromises.push(importLocation[targetConfig.component]());
+                            break;
                         }
-                    });
-                }); },
-                props: { templatesStore: templatesStore },
+                        case 'bundle': {
+                            const importLocation = templatesStore.library.import.component.recommendation.bundle;
+                            componentImportPromises.push(importLocation[targetConfig.component]());
+                            break;
+                        }
+                        case 'email': {
+                            const importLocation = templatesStore.library.import.component.recommendation.email;
+                            componentImportPromises.push(importLocation[targetConfig.component]());
+                            break;
+                        }
+                    }
+                    await Promise.all(componentImportPromises);
+                    return TemplateSelect_1.TemplateSelect;
+                },
+                props: { templatesStore },
                 onTarget: function (domTarget, elem, injectedElem, controller) {
-                    targetConfig.selector = "#".concat(controller.id);
+                    targetConfig.selector = `#${controller.id}`;
                     this.props = this.props || {};
                     this.props.target = templatesStore.addTarget(targetConfig);
                 },
@@ -421,17 +278,19 @@ function createRecommendationComponentMapping(templateConfig, templatesStore) {
     }, {});
 }
 function createSnapConfig(templateConfig, templatesStore) {
-    var _a, _b, _c, _d, _e;
-    var initiatorPrefix = ((_a = window === null || window === void 0 ? void 0 : window.athos) === null || _a === void 0 ? void 0 : _a.managed) ? "managed/" : '';
-    var snapConfig = {
+    const initiatorPrefix = window?.athos?.managed ? `managed/` : '';
+    const snapConfig = {
         features: templateConfig.features || exports.DEFAULT_FEATURES,
         client: {
             globals: {},
-            config: __assign(__assign({}, (((_b = templateConfig.config) === null || _b === void 0 ? void 0 : _b.client) || {})), { initiator: "athos/".concat(initiatorPrefix, "snap/preact/templates/").concat(snap_toolbox_1.version) }),
+            config: {
+                ...(templateConfig.config?.client || {}),
+                initiator: `athos/${initiatorPrefix}snap/preact/templates/${snap_toolbox_1.version}`,
+            },
         },
         tracker: {
             config: {
-                initiator: "athos/".concat(initiatorPrefix, "snap/preact/templates/").concat(snap_toolbox_1.version),
+                initiator: `athos/${initiatorPrefix}snap/preact/templates/${snap_toolbox_1.version}`,
                 framework: 'snap/templates',
             },
         },
@@ -439,7 +298,7 @@ function createSnapConfig(templateConfig, templatesStore) {
         controllers: {},
     };
     // add siteId if specified
-    if (((_c = templateConfig.config) === null || _c === void 0 ? void 0 : _c.siteId) && ((_d = snapConfig.client) === null || _d === void 0 ? void 0 : _d.globals)) {
+    if (templateConfig.config?.siteId && snapConfig.client?.globals) {
         snapConfig.client.globals.siteId = templateConfig.config.siteId;
     }
     // add url configuration if specified
@@ -448,7 +307,7 @@ function createSnapConfig(templateConfig, templatesStore) {
     }
     /* SEARCH CONTROLLER */
     if (templateConfig.search && snapConfig.controllers) {
-        var searchControllerConfig = {
+        const searchControllerConfig = {
             config: {
                 id: 'search',
                 plugins: createPlugins(templateConfig, templatesStore, 'search'),
@@ -467,12 +326,12 @@ function createSnapConfig(templateConfig, templatesStore) {
     }
     /* AUTOCOMPLETE CONTROLLER */
     if (templateConfig.autocomplete && snapConfig.controllers) {
-        var autocompleteControllerSettings = (0, deepmerge_1.default)(exports.DEFAULT_AUTOCOMPLETE_CONTROLLER_SETTINGS, templateConfig.autocomplete.settings || {});
-        var autocompleteControllerConfig = {
+        const autocompleteControllerSettings = (0, deepmerge_1.default)(exports.DEFAULT_AUTOCOMPLETE_CONTROLLER_SETTINGS, templateConfig.autocomplete.settings || {});
+        const autocompleteControllerConfig = {
             config: {
                 id: 'autocomplete',
                 plugins: createPlugins(templateConfig, templatesStore, 'autocomplete'),
-                selector: templateConfig.autocomplete.targets.map(function (target) { return target.inputSelector; }).join(', '),
+                selector: templateConfig.autocomplete.targets.map((target) => target.inputSelector).join(', '),
                 action: templateConfig.autocomplete.action || '',
                 globals: templateConfig.autocomplete.globals || {},
                 settings: autocompleteControllerSettings,
@@ -491,7 +350,7 @@ function createSnapConfig(templateConfig, templatesStore) {
         snapConfig.controllers.autocomplete = [autocompleteControllerConfig];
     }
     /* RECOMMENDATION INSTANTIATOR */
-    var originalRecsConfig = templateConfig.recommendation || {};
+    const originalRecsConfig = templateConfig.recommendation || {};
     templateConfig.recommendation = (0, deepmerge_1.default)({
         settings: {
             branch: 'production',
@@ -525,9 +384,12 @@ function createSnapConfig(templateConfig, templatesStore) {
         },
     }, originalRecsConfig);
     if (templateConfig.recommendation && snapConfig.instantiators) {
-        var recommendationInstantiatorConfig = {
+        const recommendationInstantiatorConfig = {
             components: createRecommendationComponentMapping(templateConfig, templatesStore),
-            config: __assign({ plugins: createPlugins(templateConfig, templatesStore, 'recommendation') }, (_e = templateConfig.recommendation) === null || _e === void 0 ? void 0 : _e.settings),
+            config: {
+                plugins: createPlugins(templateConfig, templatesStore, 'recommendation'),
+                ...templateConfig.recommendation?.settings,
+            },
         };
         // merge the responsive settings if there are any
         // if (templateConfig.config.theme.variables?.breakpoints && templateConfig.recommendation.breakpointSettings) {
@@ -543,86 +405,85 @@ function createSnapConfig(templateConfig, templatesStore) {
     return snapConfig;
 }
 function createPlugins(templateConfig, templatesStore, controllerType) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33;
-    var plugins = [];
-    var controllerConfig;
+    const plugins = [];
+    let controllerConfig;
     if (controllerType) {
         controllerConfig = templateConfig[controllerType] || {};
     }
     plugins.push([
         templatesStore.library.import.plugins.common.backgroundFilters,
-        (0, deepmerge_1.default)(((_b = (_a = templateConfig.plugins) === null || _a === void 0 ? void 0 : _a.common) === null || _b === void 0 ? void 0 : _b.backgroundFilters) || {}, ((_d = (_c = controllerConfig === null || controllerConfig === void 0 ? void 0 : controllerConfig.plugins) === null || _c === void 0 ? void 0 : _c.common) === null || _d === void 0 ? void 0 : _d.backgroundFilters) || {}),
+        (0, deepmerge_1.default)(templateConfig.plugins?.common?.backgroundFilters || {}, controllerConfig?.plugins?.common?.backgroundFilters || {}),
     ]);
     plugins.push([
         templatesStore.library.import.plugins.common.scrollToTop,
-        (0, deepmerge_1.default)(((_f = (_e = templateConfig.plugins) === null || _e === void 0 ? void 0 : _e.common) === null || _f === void 0 ? void 0 : _f.scrollToTop) || {}, ((_h = (_g = controllerConfig === null || controllerConfig === void 0 ? void 0 : controllerConfig.plugins) === null || _g === void 0 ? void 0 : _g.common) === null || _h === void 0 ? void 0 : _h.scrollToTop) || {}),
+        (0, deepmerge_1.default)(templateConfig.plugins?.common?.scrollToTop || {}, controllerConfig?.plugins?.common?.scrollToTop || {}),
     ]);
     plugins.push([
         templatesStore.library.import.plugins.common.logger,
-        (0, deepmerge_1.default)(((_k = (_j = templateConfig.plugins) === null || _j === void 0 ? void 0 : _j.common) === null || _k === void 0 ? void 0 : _k.logger) || {}, ((_m = (_l = controllerConfig === null || controllerConfig === void 0 ? void 0 : controllerConfig.plugins) === null || _l === void 0 ? void 0 : _l.common) === null || _m === void 0 ? void 0 : _m.logger) || {}),
+        (0, deepmerge_1.default)(templateConfig.plugins?.common?.logger || {}, controllerConfig?.plugins?.common?.logger || {}),
     ]);
-    var klaviyoEventsConfig = (0, deepmerge_1.default)(((_p = (_o = templateConfig.plugins) === null || _o === void 0 ? void 0 : _o.common) === null || _p === void 0 ? void 0 : _p.klaviyoEvents) || {}, ((_r = (_q = controllerConfig === null || controllerConfig === void 0 ? void 0 : controllerConfig.plugins) === null || _q === void 0 ? void 0 : _q.common) === null || _r === void 0 ? void 0 : _r.klaviyoEvents) || {});
-    if ((klaviyoEventsConfig === null || klaviyoEventsConfig === void 0 ? void 0 : klaviyoEventsConfig.enabled) === true) {
+    const klaviyoEventsConfig = (0, deepmerge_1.default)(templateConfig.plugins?.common?.klaviyoEvents || {}, controllerConfig?.plugins?.common?.klaviyoEvents || {});
+    if (klaviyoEventsConfig?.enabled === true) {
         plugins.push([templatesStore.library.import.plugins.common.klaviyoEvents, klaviyoEventsConfig]);
     }
     switch (templatesStore.platform) {
         case 'shopify':
             plugins.push([
                 templatesStore.library.import.plugins.shopify.backgroundFilters,
-                (0, deepmerge_1.default)(((_t = (_s = templateConfig.plugins) === null || _s === void 0 ? void 0 : _s.shopify) === null || _t === void 0 ? void 0 : _t.backgroundFilters) || {}, ((_v = (_u = controllerConfig === null || controllerConfig === void 0 ? void 0 : controllerConfig.plugins) === null || _u === void 0 ? void 0 : _u.shopify) === null || _v === void 0 ? void 0 : _v.backgroundFilters) || {}),
+                (0, deepmerge_1.default)(templateConfig.plugins?.shopify?.backgroundFilters || {}, controllerConfig?.plugins?.shopify?.backgroundFilters || {}),
             ]);
             plugins.push([
                 templatesStore.library.import.plugins.shopify.mutateResults,
-                (0, deepmerge_1.default)(((_x = (_w = templateConfig.plugins) === null || _w === void 0 ? void 0 : _w.shopify) === null || _x === void 0 ? void 0 : _x.mutateResults) || {}, ((_z = (_y = controllerConfig === null || controllerConfig === void 0 ? void 0 : controllerConfig.plugins) === null || _y === void 0 ? void 0 : _y.shopify) === null || _z === void 0 ? void 0 : _z.mutateResults) || {}),
+                (0, deepmerge_1.default)(templateConfig.plugins?.shopify?.mutateResults || {}, controllerConfig?.plugins?.shopify?.mutateResults || {}),
             ]);
             plugins.push([
                 templatesStore.library.import.plugins.shopify.addToCart,
-                (0, deepmerge_1.default)(((_1 = (_0 = templateConfig.plugins) === null || _0 === void 0 ? void 0 : _0.shopify) === null || _1 === void 0 ? void 0 : _1.addToCart) || {}, ((_3 = (_2 = controllerConfig === null || controllerConfig === void 0 ? void 0 : controllerConfig.plugins) === null || _2 === void 0 ? void 0 : _2.shopify) === null || _3 === void 0 ? void 0 : _3.addToCart) || {}),
+                (0, deepmerge_1.default)(templateConfig.plugins?.shopify?.addToCart || {}, controllerConfig?.plugins?.shopify?.addToCart || {}),
             ]);
-            var marketsConfig = (0, deepmerge_1.default)(((_5 = (_4 = templateConfig.plugins) === null || _4 === void 0 ? void 0 : _4.shopify) === null || _5 === void 0 ? void 0 : _5.markets) || {}, ((_7 = (_6 = controllerConfig === null || controllerConfig === void 0 ? void 0 : controllerConfig.plugins) === null || _6 === void 0 ? void 0 : _6.shopify) === null || _7 === void 0 ? void 0 : _7.markets) || {});
+            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 === null || marketsConfig === void 0 ? void 0 : marketsConfig.token) === 'string' && marketsConfig.token.length > 0) {
+            if (typeof marketsConfig?.token === 'string' && marketsConfig.token.length > 0) {
                 plugins.push([templatesStore.library.import.plugins.shopify.markets, marketsConfig]);
             }
             break;
         case 'bigCommerce':
             plugins.push([
                 templatesStore.library.import.plugins.bigcommerce.backgroundFilters,
-                (0, deepmerge_1.default)(((_9 = (_8 = templateConfig.plugins) === null || _8 === void 0 ? void 0 : _8.bigCommerce) === null || _9 === void 0 ? void 0 : _9.backgroundFilters) || {}, ((_11 = (_10 = controllerConfig === null || controllerConfig === void 0 ? void 0 : controllerConfig.plugins) === null || _10 === void 0 ? void 0 : _10.bigCommerce) === null || _11 === void 0 ? void 0 : _11.backgroundFilters) || {}),
+                (0, deepmerge_1.default)(templateConfig.plugins?.bigCommerce?.backgroundFilters || {}, controllerConfig?.plugins?.bigCommerce?.backgroundFilters || {}),
             ]);
             plugins.push([
                 templatesStore.library.import.plugins.bigcommerce.addToCart,
-                (0, deepmerge_1.default)(((_13 = (_12 = templateConfig.plugins) === null || _12 === void 0 ? void 0 : _12.bigCommerce) === null || _13 === void 0 ? void 0 : _13.addToCart) || {}, ((_15 = (_14 = controllerConfig === null || controllerConfig === void 0 ? void 0 : controllerConfig.plugins) === null || _14 === void 0 ? void 0 : _14.bigCommerce) === null || _15 === void 0 ? void 0 : _15.addToCart) || {}),
+                (0, deepmerge_1.default)(templateConfig.plugins?.bigCommerce?.addToCart || {}, controllerConfig?.plugins?.bigCommerce?.addToCart || {}),
             ]);
             break;
         case 'magento2':
             plugins.push([
                 templatesStore.library.import.plugins.magento2.base,
-                (0, deepmerge_1.default)(((_17 = (_16 = templateConfig.plugins) === null || _16 === void 0 ? void 0 : _16.magento2) === null || _17 === void 0 ? void 0 : _17.base) || {}, ((_19 = (_18 = controllerConfig === null || controllerConfig === void 0 ? void 0 : controllerConfig.plugins) === null || _18 === void 0 ? void 0 : _18.magento2) === null || _19 === void 0 ? void 0 : _19.base) || {}),
+                (0, deepmerge_1.default)(templateConfig.plugins?.magento2?.base || {}, controllerConfig?.plugins?.magento2?.base || {}),
             ]);
             plugins.push([
                 templatesStore.library.import.plugins.magento2.backgroundFilters,
-                (0, deepmerge_1.default)(((_21 = (_20 = templateConfig.plugins) === null || _20 === void 0 ? void 0 : _20.magento2) === null || _21 === void 0 ? void 0 : _21.backgroundFilters) || {}, ((_23 = (_22 = controllerConfig === null || controllerConfig === void 0 ? void 0 : controllerConfig.plugins) === null || _22 === void 0 ? void 0 : _22.magento2) === null || _23 === void 0 ? void 0 : _23.backgroundFilters) || {}),
+                (0, deepmerge_1.default)(templateConfig.plugins?.magento2?.backgroundFilters || {}, controllerConfig?.plugins?.magento2?.backgroundFilters || {}),
             ]);
             plugins.push([
                 templatesStore.library.import.plugins.magento2.addToCart,
-                (0, deepmerge_1.default)(((_25 = (_24 = templateConfig.plugins) === null || _24 === void 0 ? void 0 : _24.magento2) === null || _25 === void 0 ? void 0 : _25.addToCart) || {}, ((_27 = (_26 = controllerConfig === null || controllerConfig === void 0 ? void 0 : controllerConfig.plugins) === null || _26 === void 0 ? void 0 : _26.magento2) === null || _27 === void 0 ? void 0 : _27.addToCart) || {}),
+                (0, deepmerge_1.default)(templateConfig.plugins?.magento2?.addToCart || {}, controllerConfig?.plugins?.magento2?.addToCart || {}),
             ]);
             break;
         case 'other':
             plugins.push([
                 templatesStore.library.import.plugins.common.addToCart,
-                (0, deepmerge_1.default)(((_29 = (_28 = templateConfig.plugins) === null || _28 === void 0 ? void 0 : _28.common) === null || _29 === void 0 ? void 0 : _29.addToCart) || {}, ((_31 = (_30 = controllerConfig === null || controllerConfig === void 0 ? void 0 : controllerConfig.plugins) === null || _30 === void 0 ? void 0 : _30.common) === null || _31 === void 0 ? void 0 : _31.addToCart) || {}),
+                (0, deepmerge_1.default)(templateConfig.plugins?.common?.addToCart || {}, controllerConfig?.plugins?.common?.addToCart || {}),
             ]);
         default:
             break;
     }
     // Handle custom plugins (only available when unlocked: true)
-    var customPlugins = (0, deepmerge_1.default)(((_32 = templateConfig.plugins) === null || _32 === void 0 ? void 0 : _32.custom) || {}, ((_33 = controllerConfig === null || controllerConfig === void 0 ? void 0 : controllerConfig.plugins) === null || _33 === void 0 ? void 0 : _33.custom) || {});
-    Object.keys(customPlugins).forEach(function (pluginName) {
-        var customPlugin = customPlugins[pluginName];
-        if (customPlugin === null || customPlugin === void 0 ? void 0 : customPlugin.function) {
-            plugins.push(__spreadArray([customPlugin.function], (customPlugin.args || []), true));
+    const customPlugins = (0, deepmerge_1.default)(templateConfig.plugins?.custom || {}, controllerConfig?.plugins?.custom || {});
+    Object.keys(customPlugins).forEach((pluginName) => {
+        const customPlugin = customPlugins[pluginName];
+        if (customPlugin?.function) {
+            plugins.push([customPlugin.function, ...(customPlugin.args || [])]);
         }
     });
     return plugins;