@athoscommerce/snap-preact 1.0.0

package/dist/cjs/src/Templates/SnapTemplates.d.ts

@@ -0,0 +1,76 @@
+import { Snap } from '../Snap';
+import { TemplatesStore } from './Stores/TemplateStore';
+import { type SearchStoreConfigSettings, type AutocompleteStoreConfigSettings } from '@athoscommerce/snap-store-mobx';
+import type { UrlTranslatorConfig } from '@athoscommerce/snap-url-manager';
+import type { RecommendationInstantiatorConfigSettings, RecommendationComponentObject } from '../Instantiators/RecommendationInstantiator';
+import type { SnapFeatures } from '../types';
+import type { SnapConfig, ExtendedTarget } from '../Snap';
+import type { PluginsConfigs, TemplateStoreConfigConfig } from './Stores/TemplateStore';
+import { LibraryImports } from './Stores/LibraryStore';
+export declare const TEMPLATE_EDIT_COOKIE = "athosEditor";
+export type SearchTargetConfig = {
+    selector: string;
+    component: keyof LibraryImports['component']['search'];
+    resultComponent?: keyof LibraryImports['component']['result'] | (string & NonNullable<unknown>);
+};
+export type AutocompleteTargetConfig = {
+    selector: string;
+    inputSelector?: string;
+    component: keyof LibraryImports['component']['autocomplete'];
+    resultComponent?: keyof LibraryImports['component']['result'] | (string & NonNullable<unknown>);
+};
+export type RecommendationDefaultTargetConfig = {
+    component: keyof LibraryImports['component']['recommendation']['default'];
+    resultComponent?: keyof LibraryImports['component']['result'] | (string & NonNullable<unknown>);
+};
+export type RecommendationEmailTargetConfig = {
+    component: keyof LibraryImports['component']['recommendation']['email'];
+    resultComponent?: keyof LibraryImports['component']['result'] | (string & NonNullable<unknown>);
+};
+export type RecommendationBundleTargetConfig = {
+    component: keyof LibraryImports['component']['recommendation']['bundle'];
+    resultComponent?: keyof LibraryImports['component']['result'] | (string & NonNullable<unknown>);
+};
+export type SnapTemplatesConfig = TemplateStoreConfigConfig & {
+    url?: UrlTranslatorConfig;
+    features?: SnapFeatures;
+    search?: {
+        targets: SearchTargetConfig[];
+        settings?: SearchStoreConfigSettings;
+        plugins?: PluginsConfigs;
+    };
+    autocomplete?: {
+        targets: AutocompleteTargetConfig[];
+        settings?: AutocompleteStoreConfigSettings;
+        plugins?: PluginsConfigs;
+    };
+    recommendation?: {
+        email?: {
+            [profileComponentName: string]: RecommendationEmailTargetConfig;
+        };
+        default?: {
+            [profileComponentName: string]: RecommendationDefaultTargetConfig;
+        };
+        bundle?: {
+            [profileComponentName: string]: RecommendationBundleTargetConfig;
+        };
+        settings?: RecommendationInstantiatorConfigSettings;
+        plugins?: PluginsConfigs;
+    };
+};
+export declare const DEFAULT_FEATURES: SnapFeatures;
+export declare const DEFAULT_AUTOCOMPLETE_CONTROLLER_SETTINGS: AutocompleteStoreConfigSettings;
+export declare class SnapTemplates extends Snap {
+    templates: TemplatesStore;
+    constructor(config: SnapTemplatesConfig);
+}
+export declare function mapBreakpoints<ControllerConfigSettings>(breakpointsKeys: number[], breakpointSettings: ControllerConfigSettings[]): {
+    [key: string]: ControllerConfigSettings | Record<string, never>;
+};
+export declare const createSearchTargeters: (templateConfig: SnapTemplatesConfig, templatesStore: TemplatesStore) => ExtendedTarget[];
+export declare function createAutocompleteTargeters(templateConfig: SnapTemplatesConfig, templatesStore: TemplatesStore): ExtendedTarget[];
+export declare function createRecommendationComponentMapping(templateConfig: SnapTemplatesConfig, templatesStore: TemplatesStore): {
+    [name: string]: RecommendationComponentObject;
+};
+export declare function createSnapConfig(templateConfig: SnapTemplatesConfig, templatesStore: TemplatesStore): SnapConfig;
+//# sourceMappingURL=SnapTemplates.d.ts.map

package/dist/cjs/src/Templates/SnapTemplates.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SnapTemplates.d.ts","sourceRoot":"","sources":["../../../../src/Templates/SnapTemplates.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,536 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createSearchTargeters = exports.SnapTemplates = exports.DEFAULT_AUTOCOMPLETE_CONTROLLER_SETTINGS = exports.DEFAULT_FEATURES = exports.TEMPLATE_EDIT_COOKIE = void 0;
+exports.mapBreakpoints = mapBreakpoints;
+exports.createAutocompleteTargeters = createAutocompleteTargeters;
+exports.createRecommendationComponentMapping = createRecommendationComponentMapping;
+exports.createSnapConfig = createSnapConfig;
+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");
+exports.TEMPLATE_EDIT_COOKIE = 'athosEditor';
+var TEMPLATE_EDITOR_PARAM = 'athos-editor';
+exports.DEFAULT_FEATURES = {};
+exports.DEFAULT_AUTOCOMPLETE_CONTROLLER_SETTINGS = {
+    trending: {
+        limit: 5,
+    },
+};
+var SnapTemplates = /** @class */ (function (_super) {
+    __extends(SnapTemplates, _super);
+    function SnapTemplates(config) {
+        var _this = this;
+        var _a;
+        var urlParams = (0, snap_toolbox_1.url)(window.location.href);
+        var editMode = Boolean((((_a = urlParams === null || urlParams === void 0 ? void 0 : urlParams.params) === null || _a === void 0 ? void 0 : _a.query) && TEMPLATE_EDITOR_PARAM in urlParams.params.query) || snap_toolbox_1.cookies.get(exports.TEMPLATE_EDIT_COOKIE));
+        var templatesStore = new TemplateStore_1.TemplatesStore({ config: config, settings: { editMode: editMode } });
+        var snapConfig = createSnapConfig(config, templatesStore);
+        // get more context (all the things needed for the platform of choice as well as generic backgroundFilters)
+        var contextParams = ['backgroundFilters'];
+        switch (templatesStore.platform) {
+            case 'shopify':
+                contextParams = contextParams.concat(['collection', 'tags']);
+                break;
+            case 'bigCommerce':
+                contextParams = contextParams.concat(['category', 'brand']);
+                break;
+            case 'magento2':
+                contextParams = contextParams.concat(['category']);
+                break;
+            default:
+                break;
+        }
+        snapConfig.context = (0, snap_toolbox_1.getContext)(contextParams);
+        _this = _super.call(this, snapConfig, { templatesStore: templatesStore }) || this;
+        _this.templates = templatesStore;
+        if (editMode) {
+            snap_toolbox_1.cookies.set(exports.TEMPLATE_EDIT_COOKIE, 'true');
+            setTimeout(function () { return __awaiter(_this, void 0, void 0, function () {
+                var _this = this;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: 
+                        // preload the library
+                        return [4 /*yield*/, templatesStore.preLoad()];
+                        case 1:
+                            // preload the library
+                            _a.sent();
+                            new snap_toolbox_1.DomTargeter([
+                                {
+                                    selector: 'body',
+                                    inject: {
+                                        action: 'append',
+                                        element: function () {
+                                            var themeEditContainer = document.createElement('div');
+                                            themeEditContainer.id = 'athos-template-editor';
+                                            return themeEditContainer;
+                                        },
+                                    },
+                                },
+                            ], function (target, elem) { return __awaiter(_this, void 0, void 0, function () {
+                                var TemplateEditor, TemplateEditorStore, templateEditorStore, searchController, autocompleteController, error_1;
+                                return __generator(this, function (_a) {
+                                    switch (_a.label) {
+                                        case 0:
+                                            _a.trys.push([0, 3, , 4]);
+                                            return [4 /*yield*/, Promise.resolve().then(function () { return __importStar(require('../../components/src')); })];
+                                        case 1:
+                                            TemplateEditor = (_a.sent()).TemplatesEditor;
+                                            return [4 /*yield*/, Promise.resolve().then(function () { return __importStar(require('./Stores/TemplateEditor/TemplateEditorStore')); })];
+                                        case 2:
+                                            TemplateEditorStore = (_a.sent()).TemplateEditorStore;
+                                            templateEditorStore = new TemplateEditorStore({ templatesStore: templatesStore });
+                                            searchController = this.controllers['search'];
+                                            autocompleteController = this.controllers['autocomplete'];
+                                            if (searchController) {
+                                                templateEditorStore.registerController(searchController);
+                                            }
+                                            if (autocompleteController) {
+                                                templateEditorStore.registerController(autocompleteController);
+                                            }
+                                            (0, preact_1.render)((0, jsx_runtime_1.jsx)(TemplateEditor, { templatesStore: templatesStore, editorStore: templateEditorStore, snap: this, onRemoveClick: function () {
+                                                    snap_toolbox_1.cookies.unset(exports.TEMPLATE_EDIT_COOKIE);
+                                                    var urlState = (0, snap_toolbox_1.url)(window.location.href);
+                                                    urlState === null || urlState === void 0 ? true : delete urlState.params.query[TEMPLATE_EDITOR_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*/, 4];
+                                        case 3:
+                                            error_1 = _a.sent();
+                                            console.error('Error rendering TemplateEditor:', error_1);
+                                            return [3 /*break*/, 4];
+                                        case 4: return [2 /*return*/];
+                                    }
+                                });
+                            }); });
+                            return [2 /*return*/];
+                    }
+                });
+            }); });
+        }
+        return _this;
+    }
+    return SnapTemplates;
+}(Snap_1.Snap));
+exports.SnapTemplates = SnapTemplates;
+function mapBreakpoints(breakpointsKeys, breakpointSettings) {
+    return breakpointsKeys.reduce(function (mapping, width, index) {
+        mapping[width.toString()] = breakpointSettings[index] || {};
+        return mapping;
+    }, {});
+}
+var createSearchTargeters = function (templateConfig, templatesStore) {
+    var _a;
+    var targets = ((_a = templateConfig.search) === null || _a === void 0 ? void 0 : _a.targets) || [];
+    return targets.map(function (target) {
+        // use theme provided resultComponent if specified
+        if (!target.resultComponent && templateConfig.theme.resultComponent) {
+            target.resultComponent = templateConfig.theme.resultComponent;
+        }
+        var targetId = templatesStore.addTarget('search', target);
+        var targeter = {
+            selector: target.selector,
+            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[target.component]());
+                            if (target.resultComponent && templatesStore.library.import.component.result[target.resultComponent]) {
+                                componentImportPromises.push(templatesStore.library.import.component.result[target.resultComponent]());
+                            }
+                            return [4 /*yield*/, Promise.all(componentImportPromises)];
+                        case 1:
+                            _a.sent();
+                            return [2 /*return*/, TemplateSelect_1.TemplateSelect];
+                    }
+                });
+            }); },
+            props: { type: 'search', templatesStore: templatesStore, targetId: targetId },
+        };
+        return targeter;
+    });
+};
+exports.createSearchTargeters = createSearchTargeters;
+function createAutocompleteTargeters(templateConfig, templatesStore) {
+    var _this = this;
+    var _a;
+    var targets = ((_a = templateConfig.autocomplete) === null || _a === void 0 ? void 0 : _a.targets) || [];
+    return targets.map(function (target) {
+        // use theme provided resultComponent if specified
+        if (!target.resultComponent && templateConfig.theme.resultComponent) {
+            target.resultComponent = templateConfig.theme.resultComponent;
+        }
+        var targetId = templatesStore.addTarget('autocomplete', target);
+        var targeter = {
+            selector: target.selector,
+            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[target.component]());
+                            if (target.resultComponent && templatesStore.library.import.component.result[target.resultComponent]) {
+                                componentImportPromises.push(templatesStore.library.import.component.result[target.resultComponent]());
+                            }
+                            return [4 /*yield*/, Promise.all(componentImportPromises)];
+                        case 1:
+                            _a.sent();
+                            return [2 /*return*/, TemplateSelect_1.TemplateSelect];
+                    }
+                });
+            }); },
+            props: { type: 'autocomplete', templatesStore: templatesStore, targetId: targetId },
+            hideTarget: true,
+        };
+        if (target.inputSelector)
+            targeter.props.input = target.inputSelector;
+        return targeter;
+    });
+}
+function createRecommendationComponentMapping(templateConfig, templatesStore) {
+    // TODO: throw a warning if keys match inside each recommendation type
+    var _this = this;
+    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) {
+            var type = "recommendation/".concat(recsType);
+            var target = templateConfig.recommendation[recsType][targetName];
+            // use theme provided resultComponent if specified
+            if (!target.resultComponent && templateConfig.theme.resultComponent) {
+                target.resultComponent = templateConfig.theme.resultComponent;
+            }
+            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[target.component]());
+                                        break;
+                                    }
+                                    case 'bundle': {
+                                        importLocation = templatesStore.library.import.component.recommendation.bundle;
+                                        componentImportPromises.push(importLocation[target.component]());
+                                        break;
+                                    }
+                                    case 'email': {
+                                        importLocation = templatesStore.library.import.component.recommendation.email;
+                                        componentImportPromises.push(importLocation[target.component]());
+                                        break;
+                                    }
+                                }
+                                if (target.resultComponent && templatesStore.library.import.component.result[target.resultComponent]) {
+                                    componentImportPromises.push(templatesStore.library.import.component.result[target.resultComponent]());
+                                }
+                                return [4 /*yield*/, Promise.all(componentImportPromises)];
+                            case 1:
+                                _a.sent();
+                                return [2 /*return*/, TemplateSelect_1.TemplateSelect];
+                        }
+                    });
+                }); },
+                props: { type: type, templatesStore: templatesStore },
+                onTarget: function (domTarget, elem, injectedElem, controller) {
+                    target.selector = "#".concat(controller.id);
+                    var targetId = templatesStore.addTarget(type, target);
+                    this.props = this.props || {};
+                    this.props.targetId = targetId;
+                },
+            };
+            mapping[targetName] = mappedConfig;
+        });
+        return mapping;
+    }, {});
+}
+function createSnapConfig(templateConfig, templatesStore) {
+    var _a, _b, _c;
+    var snapConfig = {
+        features: templateConfig.features || exports.DEFAULT_FEATURES,
+        client: {
+            globals: {
+                siteId: (_a = templateConfig.config) === null || _a === void 0 ? void 0 : _a.siteId,
+            },
+            config: __assign(__assign({}, (((_b = templateConfig.config) === null || _b === void 0 ? void 0 : _b.client) || {})), { initiator: "snap/templates/".concat(snap_toolbox_1.version) }),
+        },
+        tracker: {
+            config: {
+                framework: 'snap/templates',
+            },
+        },
+        instantiators: {},
+        controllers: {},
+    };
+    // add url configuration if specified
+    if (templateConfig.url) {
+        snapConfig.url = templateConfig.url;
+    }
+    /* SEARCH CONTROLLER */
+    if (templateConfig.search && snapConfig.controllers) {
+        var searchControllerConfig = {
+            config: {
+                id: 'search',
+                plugins: createPlugins(templateConfig, templatesStore, 'search'),
+                settings: templateConfig.search.settings || {},
+            },
+            targeters: (0, exports.createSearchTargeters)(templateConfig, templatesStore),
+        };
+        // merge the responsive settings if there are any
+        // if (templateConfig.config.theme.variables?.breakpoints && templateConfig.search.breakpointSettings) {
+        // 	const mappedBreakpoints = mapBreakpoints(templateConfig.config.theme.variables.breakpoints, templateConfig.search.breakpointSettings || []);
+        // 	const breakpointSettings = getDisplaySettings(mappedBreakpoints) as SearchStoreConfigSettings;
+        // 	searchControllerConfig.config.settings = deepmerge(searchControllerConfig.config.settings, breakpointSettings);
+        // }
+        snapConfig.controllers.search = [searchControllerConfig];
+    }
+    /* AUTOCOMPLETE CONTROLLER */
+    if (templateConfig.autocomplete && snapConfig.controllers) {
+        var autocompleteControllerSettings = (0, deepmerge_1.default)(exports.DEFAULT_AUTOCOMPLETE_CONTROLLER_SETTINGS, templateConfig.autocomplete.settings || {});
+        var autocompleteControllerConfig = {
+            config: {
+                id: 'autocomplete',
+                plugins: createPlugins(templateConfig, templatesStore, 'autocomplete'),
+                selector: templateConfig.autocomplete.targets.map(function (target) { return target.inputSelector || target.selector; }).join(', '),
+                settings: autocompleteControllerSettings,
+            },
+            targeters: createAutocompleteTargeters(templateConfig, templatesStore),
+        };
+        // merge the responsive settings if there are any
+        // if (templateConfig.config.theme.variables?.breakpoints && templateConfig.autocomplete.breakpointSettings) {
+        // 	const mappedBreakpoints = mapBreakpoints(
+        // 		templateConfig.config.theme.variables.breakpoints,
+        // 		templateConfig.autocomplete.breakpointSettings || []
+        // 	);
+        // 	const breakpointSettings = getDisplaySettings(mappedBreakpoints) as AutocompleteStoreConfigSettings;
+        // 	autocompleteControllerConfig.config.settings = deepmerge(autocompleteControllerConfig.config.settings, breakpointSettings);
+        // }
+        snapConfig.controllers.autocomplete = [autocompleteControllerConfig];
+    }
+    /* RECOMMENDATION INSTANTIATOR */
+    var originalRecsConfig = templateConfig.recommendation || {};
+    templateConfig.recommendation = (0, deepmerge_1.default)({
+        settings: {
+            branch: 'production',
+        },
+        bundle: {
+            SnapTemplatesBundleDefault: {
+                component: 'RecommendationBundle',
+            },
+            SnapTemplatesBundleEasyAdd: {
+                component: 'RecommendationBundleEasyAdd',
+            },
+            SnapTemplatesBundleList: {
+                component: 'RecommendationBundleList',
+            },
+            SnapTemplatesBundleVertical: {
+                component: 'RecommendationBundleVertical',
+            },
+        },
+        default: {
+            SnapTemplatesRecommendationCarousel: {
+                component: 'Recommendation',
+            },
+            SnapTemplatesRecommendationGrid: {
+                component: 'RecommendationGrid',
+            },
+        },
+        email: {
+            SnapTemplatesEmailDefault: {
+                component: 'RecommendationEmail',
+            },
+        },
+    }, originalRecsConfig);
+    if (templateConfig.recommendation && snapConfig.instantiators) {
+        var recommendationInstantiatorConfig = {
+            components: createRecommendationComponentMapping(templateConfig, templatesStore),
+            config: __assign({ plugins: createPlugins(templateConfig, templatesStore, 'recommendation') }, (_c = templateConfig.recommendation) === null || _c === void 0 ? void 0 : _c.settings),
+        };
+        // merge the responsive settings if there are any
+        // if (templateConfig.config.theme.variables?.breakpoints && templateConfig.recommendation.breakpointSettings) {
+        // 	const mappedBreakpoints = mapBreakpoints(
+        // 		templateConfig.config.theme.variables.breakpoints,
+        // 		templateConfig.recommendation.breakpointSettings || []
+        // 	);
+        // 	const breakpointSettings = getDisplaySettings(mappedBreakpoints);
+        // 	recommendationInstantiatorConfig.config = deepmerge(recommendationInstantiatorConfig.config, breakpointSettings);
+        // }
+        snapConfig.instantiators.recommendation = recommendationInstantiatorConfig;
+    }
+    return snapConfig;
+}
+// TODO: DRY up and support dynamic imports
+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;
+    var plugins = [];
+    var 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) || {}),
+    ]);
+    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) || {}),
+    ]);
+    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) || {}),
+    ]);
+    switch (templatesStore.platform) {
+        case 'shopify':
+            plugins.push([
+                templatesStore.library.import.plugins.shopify.backgroundFilters,
+                (0, deepmerge_1.default)(((_p = (_o = templateConfig.plugins) === null || _o === void 0 ? void 0 : _o.shopify) === null || _p === void 0 ? void 0 : _p.backgroundFilters) || {}, ((_r = (_q = controllerConfig === null || controllerConfig === void 0 ? void 0 : controllerConfig.plugins) === null || _q === void 0 ? void 0 : _q.shopify) === null || _r === void 0 ? void 0 : _r.backgroundFilters) || {}),
+            ]);
+            plugins.push([
+                templatesStore.library.import.plugins.shopify.mutateResults,
+                (0, deepmerge_1.default)(((_t = (_s = templateConfig.plugins) === null || _s === void 0 ? void 0 : _s.shopify) === null || _t === void 0 ? void 0 : _t.mutateResults) || {}, ((_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.mutateResults) || {}),
+            ]);
+            plugins.push([
+                templatesStore.library.import.plugins.shopify.addToCart,
+                (0, deepmerge_1.default)(((_x = (_w = templateConfig.plugins) === null || _w === void 0 ? void 0 : _w.shopify) === null || _x === void 0 ? void 0 : _x.addToCart) || {}, ((_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.addToCart) || {}),
+            ]);
+            break;
+        case 'bigCommerce':
+            plugins.push([
+                templatesStore.library.import.plugins.bigcommerce.backgroundFilters,
+                (0, deepmerge_1.default)(((_1 = (_0 = templateConfig.plugins) === null || _0 === void 0 ? void 0 : _0.bigCommerce) === null || _1 === void 0 ? void 0 : _1.backgroundFilters) || {}, ((_3 = (_2 = controllerConfig === null || controllerConfig === void 0 ? void 0 : controllerConfig.plugins) === null || _2 === void 0 ? void 0 : _2.bigCommerce) === null || _3 === void 0 ? void 0 : _3.backgroundFilters) || {}),
+            ]);
+            plugins.push([
+                templatesStore.library.import.plugins.bigcommerce.addToCart,
+                (0, deepmerge_1.default)(((_5 = (_4 = templateConfig.plugins) === null || _4 === void 0 ? void 0 : _4.bigCommerce) === null || _5 === void 0 ? void 0 : _5.addToCart) || {}, ((_7 = (_6 = controllerConfig === null || controllerConfig === void 0 ? void 0 : controllerConfig.plugins) === null || _6 === void 0 ? void 0 : _6.bigCommerce) === null || _7 === void 0 ? void 0 : _7.addToCart) || {}),
+            ]);
+            break;
+        case 'magento2':
+            plugins.push([
+                templatesStore.library.import.plugins.magento2.base,
+                (0, deepmerge_1.default)(((_9 = (_8 = templateConfig.plugins) === null || _8 === void 0 ? void 0 : _8.magento2) === null || _9 === void 0 ? void 0 : _9.base) || {}, ((_11 = (_10 = controllerConfig === null || controllerConfig === void 0 ? void 0 : controllerConfig.plugins) === null || _10 === void 0 ? void 0 : _10.magento2) === null || _11 === void 0 ? void 0 : _11.base) || {}),
+            ]);
+            plugins.push([
+                templatesStore.library.import.plugins.magento2.backgroundFilters,
+                (0, deepmerge_1.default)(((_13 = (_12 = templateConfig.plugins) === null || _12 === void 0 ? void 0 : _12.magento2) === null || _13 === void 0 ? void 0 : _13.backgroundFilters) || {}, ((_15 = (_14 = controllerConfig === null || controllerConfig === void 0 ? void 0 : controllerConfig.plugins) === null || _14 === void 0 ? void 0 : _14.magento2) === null || _15 === void 0 ? void 0 : _15.backgroundFilters) || {}),
+            ]);
+            plugins.push([
+                templatesStore.library.import.plugins.magento2.addToCart,
+                (0, deepmerge_1.default)(((_17 = (_16 = templateConfig.plugins) === null || _16 === void 0 ? void 0 : _16.magento2) === null || _17 === void 0 ? void 0 : _17.addToCart) || {}, ((_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.addToCart) || {}),
+            ]);
+            break;
+        case 'other':
+            plugins.push([
+                templatesStore.library.import.plugins.common.addToCart,
+                (0, deepmerge_1.default)(((_21 = (_20 = templateConfig.plugins) === null || _20 === void 0 ? void 0 : _20.common) === null || _21 === void 0 ? void 0 : _21.addToCart) || {}, ((_23 = (_22 = controllerConfig === null || controllerConfig === void 0 ? void 0 : controllerConfig.plugins) === null || _22 === void 0 ? void 0 : _22.common) === null || _23 === void 0 ? void 0 : _23.addToCart) || {}),
+            ]);
+        default:
+            break;
+    }
+    return plugins;
+}