@athoscommerce/snap-preact 1.9.0 → 1.10.0

package/dist/cjs/src/Instantiators/RecommendationInstantiator.js

@@ -1,79 +1,21 @@
 "use strict";
-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 __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 };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RecommendationInstantiator = void 0;
 exports.defined = defined;
-var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-var preact_1 = require("preact");
-var deepmerge_1 = __importDefault(require("deepmerge"));
-var snap_toolbox_1 = require("@athoscommerce/snap-toolbox");
-var snap_client_1 = require("@athoscommerce/snap-client");
-var snap_logger_1 = require("@athoscommerce/snap-logger");
-var snap_tracker_1 = require("@athoscommerce/snap-tracker");
-var create_1 = require("../create");
-var DEFAULT_BRANCH = 'production';
-var RecommendationInstantiator = /** @class */ (function () {
-    function RecommendationInstantiator(config, services, context) {
-        var _this = this;
-        var _a, _b, _c, _d, _e, _f, _g;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const preact_1 = require("preact");
+const deepmerge_1 = __importDefault(require("deepmerge"));
+const snap_toolbox_1 = require("@athoscommerce/snap-toolbox");
+const snap_client_1 = require("@athoscommerce/snap-client");
+const snap_logger_1 = require("@athoscommerce/snap-logger");
+const snap_tracker_1 = require("@athoscommerce/snap-tracker");
+const create_1 = require("../create");
+const DEFAULT_BRANCH = 'production';
+class RecommendationInstantiator {
+    constructor(config, services, context) {
         this.mode = snap_toolbox_1.AppMode.production;
         this.controller = {};
         this.uses = [];
@@ -81,36 +23,36 @@ var RecommendationInstantiator = /** @class */ (function () {
         this.middleware = [];
         this.config = config;
         if (!this.config) {
-            throw new Error("Recommendation Instantiator config is required");
+            throw new Error(`Recommendation Instantiator config is required`);
         }
-        if (!((_a = this.config.config) === null || _a === void 0 ? void 0 : _a.branch)) {
+        if (!this.config.config?.branch) {
             this.config.config = this.config.config || {};
             this.config.config.branch = DEFAULT_BRANCH;
         }
         if (!this.config.components || typeof this.config.components != 'object' || !Object.keys(this.config.components).length) {
-            throw new Error("Recommendation Instantiator config must contain 'components' mapping property");
+            throw new Error(`Recommendation Instantiator config must contain 'components' mapping property`);
         }
-        if ((!(services === null || services === void 0 ? void 0 : services.client) || !(services === null || services === void 0 ? void 0 : services.tracker)) && !((_d = (_c = (_b = this.config) === null || _b === void 0 ? void 0 : _b.client) === null || _c === void 0 ? void 0 : _c.globals) === null || _d === void 0 ? void 0 : _d.siteId)) {
-            throw new Error("Recommendation Instantiator config must contain a valid config.client.globals.siteId value");
+        if ((!services?.client || !services?.tracker) && !this.config?.client?.globals?.siteId) {
+            throw new Error(`Recommendation Instantiator config must contain a valid config.client.globals.siteId value`);
         }
         if (this.config.mode && Object.values(snap_toolbox_1.AppMode).includes(this.config.mode)) {
             this.mode = this.config.mode;
-            if ((_g = (_f = (_e = this.config) === null || _e === void 0 ? void 0 : _e.client) === null || _f === void 0 ? void 0 : _f.globals) === null || _g === void 0 ? void 0 : _g.siteId) {
+            if (this.config?.client?.globals?.siteId) {
                 this.config.client.config = this.config.client.config || {};
                 this.config.client.config.mode = this.config.client.config.mode || this.mode;
             }
         }
         window.athos = window.athos || {};
         this.context = (0, deepmerge_1.default)(context || {}, config.context || {});
-        this.client = (services === null || services === void 0 ? void 0 : services.client) || new snap_client_1.Client(this.config.client.globals, this.config.client.config);
-        this.tracker = (services === null || services === void 0 ? void 0 : services.tracker) || new snap_tracker_1.Tracker(this.config.client.globals);
-        this.logger = (services === null || services === void 0 ? void 0 : services.logger) || new snap_logger_1.Logger({ prefix: 'RecommendationInstantiator ', mode: this.mode });
-        var profileCount = {};
+        this.client = services?.client || new snap_client_1.Client(this.config.client.globals, this.config.client.config);
+        this.tracker = services?.tracker || new snap_tracker_1.Tracker(this.config.client.globals);
+        this.logger = services?.logger || new snap_logger_1.Logger({ prefix: 'RecommendationInstantiator ', mode: this.mode });
+        const profileCount = {};
         // script block targeter for "grouped" and "legacy" blocks
         this.targeter = new snap_toolbox_1.DomTargeter([
             {
-                selector: "".concat(this.config.selector ||
-                    'script[type="searchspring/recommend"], script[type="searchspring/personalized-recommendations"], script[type="athos/recommend"], script[type="athos/personalized-recommendations"]', ", script[type=\"searchspring/recommend\"][profile=\"email\"], script[type=\"athos/recommend\"][profile=\"email\"]"),
+                selector: `${this.config.selector ||
+                    'script[type="searchspring/recommend"], script[type="searchspring/personalized-recommendations"], script[type="athos/recommend"], script[type="athos/personalized-recommendations"]'}, script[type="searchspring/recommend"][profile="email"], script[type="athos/recommend"][profile="email"]`,
                 autoRetarget: true,
                 clickRetarget: true,
                 navigationRetarget: true,
@@ -123,312 +65,271 @@ var RecommendationInstantiator = /** @class */ (function () {
                 navigationRetarget: true,
                 emptyTarget: false,
             },
-        ], function (target, elem) { return __awaiter(_this, void 0, void 0, function () {
-            var scriptElement, elemContext, scriptContextProfiles, scriptContextGlobals_1, requestGlobals_1, profile, products, product, seed, filters, blockedItems, options, shopper, shopperId, combinedProducts, shopperIdentifier, profileRequestGlobals_1, profileAttr, recsContainer, legacyContext_1;
-            var _this = this;
-            var _a;
-            return __generator(this, function (_b) {
-                this.cleanupStaleControllers();
-                scriptElement = elem;
-                elemContext = (0, snap_toolbox_1.getContext)([
-                    'shopperId',
-                    'shopper',
-                    'product',
-                    'products',
-                    'seed',
-                    'cart',
-                    'filters',
-                    'blockedItems',
-                    'options',
-                    'profile',
-                    'custom',
-                    'profiles',
-                    'globals',
-                ], scriptElement);
-                if (elemContext.profiles && elemContext.profiles.length) {
-                    scriptContextProfiles = elemContext.profiles;
-                    scriptContextGlobals_1 = elemContext.globals;
-                    requestGlobals_1 = __assign({}, defined({
-                        blockedItems: scriptContextGlobals_1 === null || scriptContextGlobals_1 === void 0 ? void 0 : scriptContextGlobals_1.blockedItems,
-                        filters: scriptContextGlobals_1 === null || scriptContextGlobals_1 === void 0 ? void 0 : scriptContextGlobals_1.filters,
-                        cart: (scriptContextGlobals_1 === null || scriptContextGlobals_1 === void 0 ? void 0 : scriptContextGlobals_1.cart) && getArrayFunc(scriptContextGlobals_1.cart),
-                        products: scriptContextGlobals_1 === null || scriptContextGlobals_1 === void 0 ? void 0 : scriptContextGlobals_1.products,
-                        shopper: (_a = scriptContextGlobals_1 === null || scriptContextGlobals_1 === void 0 ? void 0 : scriptContextGlobals_1.shopper) === null || _a === void 0 ? void 0 : _a.id,
+        ], async (target, elem) => {
+            this.cleanupStaleControllers();
+            const scriptElement = elem;
+            const elemContext = (0, snap_toolbox_1.getContext)([
+                'shopperId',
+                'shopper',
+                'product',
+                'products',
+                'seed',
+                'cart',
+                'filters',
+                'blockedItems',
+                'options',
+                'profile',
+                'custom',
+                'profiles',
+                'globals',
+            ], scriptElement);
+            if (elemContext.profiles && elemContext.profiles.length) {
+                // using the "grouped block" integration structure
+                // type the new profile specific integration context variables
+                const scriptContextProfiles = elemContext.profiles;
+                const scriptContextGlobals = elemContext.globals;
+                // grab from globals
+                const requestGlobals = {
+                    ...defined({
+                        blockedItems: scriptContextGlobals?.blockedItems,
+                        filters: scriptContextGlobals?.filters,
+                        cart: scriptContextGlobals?.cart && getArrayFunc(scriptContextGlobals.cart),
+                        products: scriptContextGlobals?.products,
+                        shopper: scriptContextGlobals?.shopper?.id,
                         batchId: Math.floor(Math.random() * Number.MAX_SAFE_INTEGER),
-                    }));
-                    // create a per-profile DomTargeter for each profile so each controller
-                    // gets its own targeter tracking its specific element
-                    scriptContextProfiles.forEach(function (profile, index) {
-                        if (profile.selector) {
-                            var profileTarget = {
-                                selector: profile.selector,
-                                autoRetarget: true,
-                                profile: profile,
-                                order: index,
-                            };
-                            // track the controller for this profile so multiple matched elements share it
-                            var profileControllerPromise_1;
-                            new snap_toolbox_1.DomTargeter([profileTarget], function (target, targetElem, _originalElem, targeter) { return __awaiter(_this, void 0, void 0, function () {
-                                var profileRequestGlobals, profileContext, controller;
-                                var _a, _b, _c;
-                                return __generator(this, function (_d) {
-                                    switch (_d.label) {
-                                        case 0:
-                                            // skip retarget if the source script element was removed and release the current target
-                                            if (scriptElement.isConnected === false) {
-                                                if (targetElem) {
-                                                    targeter === null || targeter === void 0 ? void 0 : targeter.releaseTargets([targetElem]);
-                                                }
-                                                return [2 /*return*/];
-                                            }
-                                            if (!(((_a = target.profile) === null || _a === void 0 ? void 0 : _a.profile) || ((_b = target.profile) === null || _b === void 0 ? void 0 : _b.tag))) return [3 /*break*/, 3];
-                                            profileRequestGlobals = __assign(__assign({}, requestGlobals_1), { profile: __assign(__assign({}, (_c = target.profile) === null || _c === void 0 ? void 0 : _c.options), { order: target.order }), tag: target.profile.tag || target.profile.profile });
-                                            profileContext = (0, deepmerge_1.default)(this.context, defined({ globals: scriptContextGlobals_1, profile: target.profile }));
-                                            if (elemContext.custom) {
-                                                profileContext.custom = (0, deepmerge_1.default)(profileContext.custom, elemContext.custom);
-                                            }
-                                            if (!!profileControllerPromise_1) return [3 /*break*/, 1];
-                                            // first element match — create the controller
-                                            profileControllerPromise_1 = readyTheController(this, services || {}, targetElem, profileContext, profileCount, scriptElement, profileRequestGlobals, target, targeter);
-                                            return [3 /*break*/, 3];
-                                        case 1: return [4 /*yield*/, profileControllerPromise_1];
-                                        case 2:
-                                            controller = _d.sent();
-                                            if (controller && targetElem) {
-                                                renderController(this, services || {}, controller, targetElem, scriptElement, target);
-                                            }
-                                            _d.label = 3;
-                                        case 3: return [2 /*return*/];
-                                    }
-                                });
-                            }); });
-                        }
-                    });
-                }
-                else {
-                    profile = elemContext.profile, products = elemContext.products, product = elemContext.product, seed = elemContext.seed, filters = elemContext.filters, blockedItems = elemContext.blockedItems, options = elemContext.options, shopper = elemContext.shopper, shopperId = elemContext.shopperId;
-                    combinedProducts = [].concat(products || product || seed || []);
-                    shopperIdentifier = [shopper, shopper === null || shopper === void 0 ? void 0 : shopper.id, shopperId, shopperId === null || shopperId === void 0 ? void 0 : shopperId.id].filter(function (val) { return val && typeof val === 'string'; }).pop();
-                    profileRequestGlobals_1 = __assign({ tag: profile }, defined({
-                        products: combinedProducts.length ? combinedProducts : undefined,
-                        cart: elemContext.cart && getArrayFunc(elemContext.cart),
-                        shopper: shopperIdentifier,
-                        filters: filters,
-                        blockedItems: blockedItems,
-                        profile: options,
-                    }));
-                    profileAttr = scriptElement.getAttribute('profile') || '';
-                    recsContainer = scriptElement.ownerDocument.createElement('div');
-                    recsContainer.setAttribute('searchspring-recommend', profileAttr);
-                    scriptElement.before(recsContainer);
-                    legacyContext_1 = (0, deepmerge_1.default)(this.context, elemContext);
-                    // create a per-element DomTargeter for the injected div (mirrors grouped block pattern)
-                    new snap_toolbox_1.DomTargeter([{ selector: "[searchspring-recommend=\"".concat(profileAttr, "\"]"), name: "legacy_".concat(profile, "_").concat(profileCount[profile || ''] || 0) }], function (_target, targetElem, _originalElem, targeter) { return __awaiter(_this, void 0, void 0, function () {
-                        return __generator(this, function (_a) {
+                    }),
+                };
+                // create a per-profile DomTargeter for each profile so each controller
+                // gets its own targeter tracking its specific element
+                scriptContextProfiles.forEach((profile, index) => {
+                    if (profile.selector) {
+                        const profileTarget = {
+                            selector: profile.selector,
+                            autoRetarget: true,
+                            profile,
+                            order: index,
+                        };
+                        // track the controller for this profile so multiple matched elements share it
+                        let profileControllerPromise;
+                        new snap_toolbox_1.DomTargeter([profileTarget], async (target, targetElem, _originalElem, targeter) => {
                             // skip retarget if the source script element was removed and release the current target
                             if (scriptElement.isConnected === false) {
                                 if (targetElem) {
-                                    targeter === null || targeter === void 0 ? void 0 : targeter.releaseTargets([targetElem]);
+                                    targeter?.releaseTargets([targetElem]);
+                                }
+                                return;
+                            }
+                            if (target.profile?.profile || target.profile?.tag) {
+                                const profileRequestGlobals = {
+                                    ...requestGlobals,
+                                    profile: { ...target.profile?.options, order: target.order },
+                                    tag: target.profile.tag || target.profile.profile, // have to support both tag and profile due to having profile at release, but will favor tag
+                                };
+                                const profileContext = (0, deepmerge_1.default)(this.context, defined({ globals: scriptContextGlobals, profile: target.profile }));
+                                if (elemContext.custom) {
+                                    profileContext.custom = (0, deepmerge_1.default)(profileContext.custom, elemContext.custom);
+                                }
+                                if (!profileControllerPromise) {
+                                    // first element match — create the controller
+                                    profileControllerPromise = readyTheController(this, services || {}, targetElem, profileContext, profileCount, scriptElement, profileRequestGlobals, target, targeter);
+                                }
+                                else {
+                                    // subsequent element matches — reuse the existing controller and just render
+                                    const controller = await profileControllerPromise;
+                                    if (controller && targetElem) {
+                                        renderController(this, services || {}, controller, targetElem, scriptElement, target);
+                                    }
                                 }
-                                return [2 /*return*/];
                             }
-                            readyTheController(this, services || {}, targetElem, legacyContext_1, profileCount, scriptElement, profileRequestGlobals_1, target, targeter);
-                            return [2 /*return*/];
                         });
-                    }); });
-                }
-                return [2 /*return*/];
-            });
-        }); });
+                    }
+                });
+            }
+            else {
+                // using the "legacy" integration structure
+                const { profile, products, product, seed, filters, blockedItems, options, shopper, shopperId } = elemContext;
+                const combinedProducts = [].concat(products || product || seed || []);
+                const shopperIdentifier = [shopper, shopper?.id, shopperId, shopperId?.id].filter((val) => val && typeof val === 'string').pop();
+                const profileRequestGlobals = {
+                    tag: profile,
+                    ...defined({
+                        products: combinedProducts.length ? combinedProducts : undefined,
+                        cart: elemContext.cart && getArrayFunc(elemContext.cart),
+                        shopper: shopperIdentifier,
+                        filters,
+                        blockedItems,
+                        profile: options,
+                    }),
+                };
+                // inject a render container before the script element
+                const profileAttr = scriptElement.getAttribute('profile') || '';
+                const recsContainer = scriptElement.ownerDocument.createElement('div');
+                recsContainer.setAttribute('searchspring-recommend', profileAttr);
+                scriptElement.before(recsContainer);
+                const legacyContext = (0, deepmerge_1.default)(this.context, elemContext);
+                // create a per-element DomTargeter for the injected div (mirrors grouped block pattern)
+                new snap_toolbox_1.DomTargeter([{ selector: `[searchspring-recommend="${profileAttr}"]`, name: `legacy_${profile}_${profileCount[profile || ''] || 0}` }], async (_target, targetElem, _originalElem, targeter) => {
+                    // skip retarget if the source script element was removed and release the current target
+                    if (scriptElement.isConnected === false) {
+                        if (targetElem) {
+                            targeter?.releaseTargets([targetElem]);
+                        }
+                        return;
+                    }
+                    readyTheController(this, services || {}, targetElem, legacyContext, profileCount, scriptElement, profileRequestGlobals, target, targeter);
+                });
+            }
+        });
     }
-    RecommendationInstantiator.prototype.plugin = function (func) {
-        var args = [];
-        for (var _i = 1; _i < arguments.length; _i++) {
-            args[_i - 1] = arguments[_i];
-        }
-        this.plugins.push({ func: func, args: args });
-    };
-    RecommendationInstantiator.prototype.on = function (event) {
-        var func = [];
-        for (var _i = 1; _i < arguments.length; _i++) {
-            func[_i - 1] = arguments[_i];
-        }
-        this.middleware.push({ event: event, func: func });
-    };
-    RecommendationInstantiator.prototype.use = function (attachments) {
+    plugin(func, ...args) {
+        this.plugins.push({ func, args });
+    }
+    on(event, ...func) {
+        this.middleware.push({ event, func });
+    }
+    use(attachments) {
         this.uses.push(attachments);
-    };
+    }
     // cleanup to ensure we release controllers no longer rendering in the DOM (memory leak prevention for SPA's)
-    RecommendationInstantiator.prototype.cleanupStaleControllers = function () {
-        var _this = this;
-        Object.keys(this.controller).forEach(function (id) {
-            var _a;
-            var controller = _this.controller[id];
-            var targeters = Object.values(controller.targeters);
-            var hasConnectedTarget = targeters.some(function (targeter) {
-                return targeter.getTargetedElems().some(function (elem) {
-                    var attr = elem.isConnected !== false && elem.getAttribute('ss-controller-id');
-                    return attr === id;
-                });
-            });
+    cleanupStaleControllers() {
+        Object.keys(this.controller).forEach((id) => {
+            const controller = this.controller[id];
+            const targeters = Object.values(controller.targeters);
+            const hasConnectedTarget = targeters.some((targeter) => targeter.getTargetedElems().some((elem) => {
+                const attr = elem.isConnected !== false && elem.getAttribute('ss-controller-id');
+                return attr === id;
+            }));
             if (!hasConnectedTarget) {
-                Object.keys(controller.targeters).forEach(function (targeterId) { return controller.targeters[targeterId].destroy(); });
+                Object.keys(controller.targeters).forEach((targeterId) => controller.targeters[targeterId].destroy());
                 controller.targeters = {};
-                delete _this.controller[id];
-                if ((_a = window.athos) === null || _a === void 0 ? void 0 : _a.controller) {
+                delete this.controller[id];
+                if (window.athos?.controller) {
                     delete window.athos.controller[id];
                 }
             }
         });
-    };
-    return RecommendationInstantiator;
-}());
+    }
+}
 exports.RecommendationInstantiator = RecommendationInstantiator;
-function readyTheController(instance, services, targetElem, context, profileCount, scriptElem, controllerGlobals, target, targeter) {
-    return __awaiter(this, void 0, void 0, function () {
-        var profile, batchId, cart, tag, batched, globals, controllerConfigBase, controllerConfig, controller, profileVars;
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
-        return __generator(this, function (_t) {
-            switch (_t.label) {
-                case 0:
-                    profile = controllerGlobals.profile, batchId = controllerGlobals.batchId, cart = controllerGlobals.cart, tag = controllerGlobals.tag;
-                    batched = (_b = (_a = profile === null || profile === void 0 ? void 0 : profile.batched) !== null && _a !== void 0 ? _a : controllerGlobals.batched) !== null && _b !== void 0 ? _b : true;
-                    if (!tag) {
-                        // FEEDBACK: change message depending on script integration type (profile vs. legacy)
-                        instance.logger.warn("'tag' is missing from <script> tag, skipping this profile", scriptElem);
-                        return [2 /*return*/];
-                    }
-                    if (Array.isArray(cart)) {
-                        instance.tracker.cookies.cart.set(cart);
-                    }
-                    globals = deepmerge_1.default.all([
-                        ((_c = instance.config.client) === null || _c === void 0 ? void 0 : _c.globals) || {},
-                        ((_d = instance.config.config) === null || _d === void 0 ? void 0 : _d.globals) || {},
-                        controllerGlobals,
-                    ]);
-                    controllerConfigBase = {
-                        tag: tag,
-                        batched: (_f = batched !== null && batched !== void 0 ? batched : (_e = instance.config.config) === null || _e === void 0 ? void 0 : _e.batched) !== null && _f !== void 0 ? _f : true,
-                        realtime: Boolean((_l = (_h = (_g = context.options) === null || _g === void 0 ? void 0 : _g.realtime) !== null && _h !== void 0 ? _h : (_k = (_j = context.profile) === null || _j === void 0 ? void 0 : _j.options) === null || _k === void 0 ? void 0 : _k.realtime) !== null && _l !== void 0 ? _l : (_m = instance.config.config) === null || _m === void 0 ? void 0 : _m.realtime),
-                        batchId: batchId,
-                        middleware: instance.config.config.middleware,
-                        plugins: instance.config.config.plugins,
-                        branch: ((_o = instance.config.config) === null || _o === void 0 ? void 0 : _o.branch) || 'production',
-                        limit: (_p = instance.config.config) === null || _p === void 0 ? void 0 : _p.limit,
-                        beacon: ((_q = instance.config.config) === null || _q === void 0 ? void 0 : _q.beacon) || { enabled: true },
-                        settings: {
-                            variants: (_r = instance.config.config) === null || _r === void 0 ? void 0 : _r.variants,
-                        },
-                        globals: globals,
-                    };
-                    if (profile === null || profile === void 0 ? void 0 : profile.branch) {
-                        controllerConfigBase.branch = profile === null || profile === void 0 ? void 0 : profile.branch;
-                    }
-                    profileCount[tag] = profileCount[tag] + 1 || 1;
-                    controllerConfig = __assign({ id: "recommend_".concat(tag, "_").concat(profileCount[tag] - 1) }, controllerConfigBase);
-                    controller = (0, create_1.createRecommendationController)({
-                        url: instance.config.url,
-                        controller: controllerConfig,
-                        context: context,
-                        mode: instance.config.mode,
-                    }, { client: instance.client, tracker: instance.tracker });
-                    // mark element with controller id so cleanupStaleControllers knows it's active
-                    if (targetElem) {
-                        targetElem.setAttribute('ss-controller-id', controller.id);
-                    }
-                    instance.uses.forEach(function (attachements) { return controller.use(attachements); });
-                    instance.plugins.forEach(function (plugin) { return controller.plugin.apply(controller, __spreadArray([plugin.func], plugin.args, false)); });
-                    instance.middleware.forEach(function (middleware) { return controller.on.apply(controller, __spreadArray([middleware.event], middleware.func, false)); });
-                    // add controller to instantiator and global namespace
-                    instance.controller[controller.config.id] = controller;
-                    window.athos.controller = window.athos.controller || {};
-                    window.athos.controller[controller.config.id] = controller;
-                    // register targeter on the controller for element tracking
-                    controller.addTargeter(targeter);
-                    if (!!controller.store.loading) return [3 /*break*/, 2];
-                    return [4 /*yield*/, controller.search()];
-                case 1:
-                    _t.sent();
-                    _t.label = 2;
-                case 2:
-                    profileVars = (_s = controller.store.profile.display) === null || _s === void 0 ? void 0 : _s.templateParameters;
-                    if (controller.store.error) {
-                        //something went wrong
-                        //err was already logged - nothing to do.
-                        return [2 /*return*/];
-                    }
-                    if (!controller.store.profile.display.template) {
-                        instance.logger.error("profile '".concat(tag, "' found on the following element is missing a template!\n").concat(scriptElem === null || scriptElem === void 0 ? void 0 : scriptElem.outerHTML));
-                        return [2 /*return*/];
-                    }
-                    if (!profileVars) {
-                        instance.logger.error("profile '".concat(tag, "' found on the following element is missing templateParameters!\n").concat(scriptElem === null || scriptElem === void 0 ? void 0 : scriptElem.outerHTML));
-                        return [2 /*return*/];
-                    }
-                    if (!targetElem) return [3 /*break*/, 4];
-                    return [4 /*yield*/, renderController(instance, services, controller, targetElem, scriptElem, target)];
-                case 3:
-                    _t.sent();
-                    _t.label = 4;
-                case 4: return [2 /*return*/, controller];
-            }
-        });
-    });
+async function readyTheController(instance, services, targetElem, context, profileCount, scriptElem, controllerGlobals, target, targeter) {
+    const { profile, batchId, cart, tag } = controllerGlobals;
+    const batched = profile?.batched ?? controllerGlobals.batched ?? true;
+    if (!tag) {
+        // FEEDBACK: change message depending on script integration type (profile vs. legacy)
+        instance.logger.warn(`'tag' is missing from <script> tag, skipping this profile`, scriptElem);
+        return;
+    }
+    if (Array.isArray(cart)) {
+        instance.tracker.cookies.cart.set(cart);
+    }
+    const globals = deepmerge_1.default.all([
+        instance.config.client?.globals || {},
+        instance.config.config?.globals || {},
+        controllerGlobals,
+    ]);
+    const controllerConfigBase = {
+        tag,
+        batched: batched ?? instance.config.config?.batched ?? true,
+        realtime: Boolean(context.options?.realtime ?? context.profile?.options?.realtime ?? instance.config.config?.realtime),
+        batchId: batchId,
+        middleware: instance.config.config.middleware,
+        plugins: instance.config.config.plugins,
+        branch: instance.config.config?.branch || 'production',
+        limit: instance.config.config?.limit,
+        beacon: instance.config.config?.beacon || { enabled: true },
+        settings: {
+            variants: instance.config.config?.variants,
+        },
+        globals,
+    };
+    if (profile?.branch) {
+        controllerConfigBase.branch = profile?.branch;
+    }
+    profileCount[tag] = profileCount[tag] + 1 || 1;
+    const controllerConfig = {
+        id: `recommend_${tag}_${profileCount[tag] - 1}`,
+        ...controllerConfigBase,
+    };
+    const controller = (0, create_1.createRecommendationController)({
+        url: instance.config.url,
+        controller: controllerConfig,
+        context,
+        mode: instance.config.mode,
+    }, { client: instance.client, tracker: instance.tracker });
+    // mark element with controller id so cleanupStaleControllers knows it's active
+    if (targetElem) {
+        targetElem.setAttribute('ss-controller-id', controller.id);
+    }
+    instance.uses.forEach((attachements) => controller.use(attachements));
+    instance.plugins.forEach((plugin) => controller.plugin(plugin.func, ...plugin.args));
+    instance.middleware.forEach((middleware) => controller.on(middleware.event, ...middleware.func));
+    // add controller to instantiator and global namespace
+    instance.controller[controller.config.id] = controller;
+    window.athos.controller = window.athos.controller || {};
+    window.athos.controller[controller.config.id] = controller;
+    // register targeter on the controller for element tracking
+    controller.addTargeter(targeter);
+    // run a search on the controller if it is not currently
+    if (!controller.store.loading) {
+        await controller.search();
+    }
+    const profileVars = controller.store.profile.display?.templateParameters;
+    if (controller.store.error) {
+        //something went wrong
+        //err was already logged - nothing to do.
+        return;
+    }
+    if (!controller.store.profile.display.template) {
+        instance.logger.error(`profile '${tag}' found on the following element is missing a template!\n${scriptElem?.outerHTML}`);
+        return;
+    }
+    if (!profileVars) {
+        instance.logger.error(`profile '${tag}' found on the following element is missing templateParameters!\n${scriptElem?.outerHTML}`);
+        return;
+    }
+    if (targetElem) {
+        await renderController(instance, services, controller, targetElem, scriptElem, target);
+    }
+    return controller;
 }
-function renderController(instance, services, controller, targetElem, scriptElem, target) {
-    return __awaiter(this, void 0, void 0, function () {
-        var tag, component, props, RecommendationsComponent, importPromises, importResolutions;
-        var _a, _b, _c, _d;
-        return __generator(this, function (_e) {
-            switch (_e.label) {
-                case 0:
-                    // update the element with the controller id
-                    if (targetElem) {
-                        targetElem.setAttribute('ss-controller-id', controller.id);
-                    }
-                    tag = controller.config.tag;
-                    component = (_b = (_a = controller.store.profile.display) === null || _a === void 0 ? void 0 : _a.template) === null || _b === void 0 ? void 0 : _b.component;
-                    if (!component) {
-                        instance.logger.error("profile '".concat(tag, "' found on the following element is missing a component!\n").concat(scriptElem === null || scriptElem === void 0 ? void 0 : scriptElem.outerHTML));
-                        return [2 /*return*/];
-                    }
-                    props = {};
-                    RecommendationsComponent = undefined;
-                    props.className = "ss__recommendation-".concat(component.toLowerCase());
-                    (_d = (_c = instance.config.components[component]) === null || _c === void 0 ? void 0 : _c.onTarget) === null || _d === void 0 ? void 0 : _d.call(_c, target, scriptElem, targetElem, controller);
-                    if (!(instance.config.components[component] && typeof instance.config.components[component] == 'function')) return [3 /*break*/, 2];
-                    return [4 /*yield*/, instance.config.components[component]()];
-                case 1:
-                    RecommendationsComponent = _e.sent();
-                    return [3 /*break*/, 4];
-                case 2:
-                    if (!(instance.config.components[component] && typeof instance.config.components[component] == 'object')) return [3 /*break*/, 4];
-                    props = instance.config.components[component].props || {};
-                    importPromises = [];
-                    // dynamically import the component
-                    importPromises.push(instance.config.components[component].component());
-                    return [4 /*yield*/, Promise.all(importPromises)];
-                case 3:
-                    importResolutions = _e.sent();
-                    RecommendationsComponent = importResolutions[0];
-                    _e.label = 4;
-                case 4:
-                    if (!RecommendationsComponent) {
-                        instance.logger.error("profile '".concat(tag, "' found on the following element is expecting component mapping for '").concat(component, "' - verify instantiator config.\n").concat(scriptElem === null || scriptElem === void 0 ? void 0 : scriptElem.outerHTML));
-                        return [2 /*return*/];
-                    }
-                    setTimeout(function () {
-                        (0, preact_1.render)((0, jsx_runtime_1.jsx)(RecommendationsComponent, __assign({ controller: controller, snap: services === null || services === void 0 ? void 0 : services.snap }, props)), targetElem);
-                    });
-                    return [2 /*return*/];
-            }
-        });
+async function renderController(instance, services, controller, targetElem, scriptElem, target) {
+    // update the element with the controller id
+    if (targetElem) {
+        targetElem.setAttribute('ss-controller-id', controller.id);
+    }
+    const tag = controller.config.tag;
+    const component = controller.store.profile.display?.template?.component;
+    if (!component) {
+        instance.logger.error(`profile '${tag}' found on the following element is missing a component!\n${scriptElem?.outerHTML}`);
+        return;
+    }
+    let props = {};
+    let RecommendationsComponent = undefined;
+    props.className = `ss__recommendation-${component.toLowerCase()}`;
+    instance.config.components[component]?.onTarget?.(target, scriptElem, targetElem, controller);
+    if (instance.config.components[component] && typeof instance.config.components[component] == 'function') {
+        RecommendationsComponent = await instance.config.components[component]();
+    }
+    else if (instance.config.components[component] && typeof instance.config.components[component] == 'object') {
+        props = instance.config.components[component].props || {};
+        const importPromises = [];
+        // dynamically import the component
+        importPromises.push(instance.config.components[component].component());
+        const importResolutions = await Promise.all(importPromises);
+        RecommendationsComponent = importResolutions[0];
+    }
+    if (!RecommendationsComponent) {
+        instance.logger.error(`profile '${tag}' found on the following element is expecting component mapping for '${component}' - verify instantiator config.\n${scriptElem?.outerHTML}`);
+        return;
+    }
+    setTimeout(() => {
+        (0, preact_1.render)((0, jsx_runtime_1.jsx)(RecommendationsComponent, { controller: controller, snap: services?.snap, ...props }), targetElem);
     });
 }
 function getArrayFunc(arrayOrFunc) {
     if (typeof arrayOrFunc === 'function') {
         try {
-            var funcContents = arrayOrFunc();
+            const funcContents = arrayOrFunc();
             if (Array.isArray(funcContents)) {
                 return funcContents;
             }
@@ -443,8 +344,8 @@ function getArrayFunc(arrayOrFunc) {
     return [];
 }
 function defined(properties) {
-    var definedProps = {};
-    Object.keys(properties).map(function (key) {
+    const definedProps = {};
+    Object.keys(properties).map((key) => {
         if (properties[key] !== undefined) {
             definedProps[key] = properties[key];
         }