@athoscommerce/snap-preact 1.0.0

package/dist/esm/src/Snap.js

@@ -0,0 +1,734 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { render } from 'preact';
+import deepmerge from 'deepmerge';
+import { isPlainObject } from 'is-plain-object';
+import { configure as configureMobx } from 'mobx';
+import { Client } from '@athoscommerce/snap-client';
+import { Logger } from '@athoscommerce/snap-logger';
+import { Tracker } from '@athoscommerce/snap-tracker';
+import { AppMode, version, getContext, DomTargeter, url, cookies, featureFlags } from '@athoscommerce/snap-toolbox';
+import { ControllerTypes } from '@athoscommerce/snap-controller';
+import { getInitialUrlState } from './getInitialUrlState/getInitialUrlState';
+import { default as createSearchController } from './create/createSearchController';
+import { configureSnapFeatures } from './utils';
+import { setupEvents } from './setupEvents';
+// configure MobX
+configureMobx({ useProxies: 'never', isolateGlobalState: true, enforceActions: 'never' });
+export const BRANCH_COOKIE = 'athosBranch';
+export const BRANCH_PARAM = 'athos-preview';
+export const DEV_COOKIE = 'athos-Dev';
+export const STYLESHEET_CLASSNAME = 'athos-snap-bundle-styles';
+const MAX_PARENT_LEVELS = 3;
+const COMPONENT_ERROR = `Uncaught Error - Invalid value passed as the component.
+This usually happens when you pass a JSX Element, and not a function that returns the component, in the snap config. 
+		
+		instead of - 
+
+	targeters: [
+		{
+			selector: '#athos-content',
+			hideTarget: true,
+			component: <Content/>,
+		},
+	]
+
+		or - 
+
+	targeters: [
+		{
+			selector: '#athos-content',
+			hideTarget: true,
+			component: Content,
+		},
+	]
+
+		please try - 
+
+	targeters: [
+		{
+			selector: '#athos-content',
+			hideTarget: true,
+			component: () => Content
+		},
+	]
+
+The error above happened in the following targeter in the Snap Config`;
+export class Snap {
+    constructor(config, services) {
+        this.mode = AppMode.production;
+        this._instantiatorPromises = {};
+        this._controllerPromises = {};
+        this.controllers = {};
+        this.getInstantiator = (id) => {
+            return this._instantiatorPromises[id] || Promise.reject(`getInstantiator could not find instantiator with id: ${id}`);
+        };
+        this.getController = (id) => {
+            return this._controllerPromises[id] || Promise.reject(`getController could not find controller with id: ${id}`);
+        };
+        this.getControllers = (...controllerIds) => {
+            const getControllerPromises = [];
+            controllerIds.forEach((id) => getControllerPromises.push(this.getController(id)));
+            return Promise.all(getControllerPromises);
+        };
+        // exposed method used for creating controllers dynamically - calls _createController()
+        this.createController = async (type, config, services, urlConfig, context, callback) => {
+            if (typeof this._controllerPromises[config.id] != 'undefined') {
+                throw new Error(`Controller with id '${config.id}' is already defined`);
+            }
+            this._controllerPromises[config.id] = new Promise((resolve) => this._createController(type, config, services, urlConfig, context, async (cntrlr) => {
+                if (typeof callback == 'function')
+                    await callback(cntrlr);
+                resolve(cntrlr);
+            }));
+            return this._controllerPromises[config.id];
+        };
+        // internal use method that creates controllers without verifying if id is in use first
+        this._createController = async (type, config, services, urlConfig, context, callback) => {
+            let importPromise;
+            switch (type) {
+                case ControllerTypes.autocomplete:
+                    importPromise = import('./create/createAutocompleteController');
+                    break;
+                case ControllerTypes.finder:
+                    importPromise = import('./create/createFinderController');
+                    break;
+                case ControllerTypes.recommendation:
+                    importPromise = import('./create/createRecommendationController');
+                    break;
+                case ControllerTypes.search:
+                default:
+                    importPromise = import('./create/createSearchController');
+                    break;
+            }
+            // @ts-ignore - we know the config is correct, but complicated typing
+            const creationFunc = (await importPromise).default;
+            if (!this.controllers[config.id]) {
+                window.athos.controller = window.athos.controller || {};
+                window.athos.controller[config.id] = this.controllers[config.id] = creationFunc({
+                    mode: this.mode,
+                    url: deepmerge(this.config.url || {}, urlConfig || {}),
+                    controller: config,
+                    context: deepmerge(this.context || {}, context || {}),
+                }, {
+                    client: services?.client || this.client,
+                    store: services?.store,
+                    urlManager: services?.urlManager,
+                    eventManager: services?.eventManager,
+                    profiler: services?.profiler,
+                    logger: services?.logger,
+                    tracker: services?.tracker || this.tracker,
+                });
+            }
+            if (callback) {
+                await callback(this.controllers[config.id]);
+            }
+            return this.controllers[config.id];
+        };
+        this.handlers = {
+            attributes: (event) => {
+                const trackerId = this.tracker.config.id;
+                const attributeList = [
+                    `ss-${trackerId}-cart-add`,
+                    `ss-${trackerId}-cart-remove`,
+                    `ss-${trackerId}-cart-clear`,
+                    `ss-${trackerId}-cart-view`,
+                    `ss-${trackerId}-intellisuggest`,
+                    `ss-${trackerId}-intellisuggest-signature`,
+                    `href`,
+                ];
+                const attributes = {};
+                let levels = 0;
+                let elem = null;
+                elem = event && event.target;
+                while (Object.keys(attributes).length == 0 && elem !== null && levels <= MAX_PARENT_LEVELS) {
+                    Object.values(elem.attributes).forEach((attr) => {
+                        const attrName = attr.nodeName;
+                        if (attributeList.indexOf(attrName) != -1) {
+                            attributes[attrName] = elem && elem.getAttribute(attrName);
+                        }
+                    });
+                    elem = elem.parentElement;
+                    levels++;
+                }
+                if (attributes[`ss-${trackerId}-cart-add`]) {
+                    // add skus to cart
+                    const skus = attributes[`ss-${trackerId}-cart-add`].split(',');
+                    this.tracker.cookies.cart.add(skus);
+                    this.eventManager.fire('controller/recommendation/update');
+                }
+                else if (attributes[`ss-${trackerId}-cart-remove`]) {
+                    // remove skus from cart
+                    const skus = attributes[`ss-${trackerId}-cart-remove`].split(',');
+                    this.tracker.cookies.cart.remove(skus);
+                    this.eventManager.fire('controller/recommendation/update');
+                }
+                else if (`ss-${trackerId}-cart-clear` in attributes) {
+                    // clear all from cart
+                    this.tracker.cookies.cart.clear();
+                    this.eventManager.fire('controller/recommendation/update');
+                }
+                else if (`ss-${trackerId}-cart-view` in attributes) {
+                    // update recs
+                    this.eventManager.fire('controller/recommendation/update');
+                }
+                else if (attributes[`ss-${trackerId}-intellisuggest`] && attributes[`ss-${trackerId}-intellisuggest-signature`]) {
+                    // product click is deprecated
+                    this.tracker.track.product.click();
+                }
+            },
+            error: (event) => {
+                try {
+                    const { filename } = event;
+                    if ((filename.includes('snapui.searchspring.io') || filename.includes('snapui.athoscommerce.io')) &&
+                        filename.endsWith('.js') &&
+                        this.tracker.track.error) {
+                        const { colno, lineno, error: { stack }, message, timeStamp, } = event;
+                        const href = window.location.href;
+                        const beaconPayload = {
+                            href,
+                            filename,
+                            stack,
+                            message,
+                            colno,
+                            lineno,
+                            errortimestamp: timeStamp,
+                        };
+                        this.tracker.track.error(beaconPayload);
+                    }
+                }
+                catch (e) {
+                    // prevent error metrics from breaking the app
+                }
+            },
+        };
+        window.removeEventListener('error', this.handlers.error);
+        window.addEventListener('error', this.handlers.error);
+        document.removeEventListener('click', this.handlers.attributes);
+        document.addEventListener('click', this.handlers.attributes);
+        this.config = config;
+        let globalContext = {};
+        try {
+            // get global context
+            globalContext = getContext(['shopper', 'config', 'custom', 'merchandising', 'siteId', 'currency', 'page']);
+        }
+        catch (err) {
+            console.error('Snap failed to find global context');
+        }
+        // merge configs - but only merge plain objects
+        this.config = deepmerge(this.config || {}, globalContext.config || {}, {
+            isMergeableObject: isPlainObject,
+        });
+        this.context = deepmerge(this.config.context || {}, globalContext || {}, {
+            isMergeableObject: isPlainObject,
+        });
+        if (!this.config?.client?.globals?.siteId && this.context.siteId) {
+            const defaultClientConfig = {
+                globals: {
+                    siteId: this.context.siteId,
+                },
+            };
+            this.config.client = deepmerge(defaultClientConfig, this.config.client || {});
+        }
+        if ((!services?.client || !services?.tracker) && !this.config?.client?.globals?.siteId) {
+            //error msg should change depending if this is a snap templates site or not.
+            if (services?.templatesStore) {
+                throw new Error(`SnapTemplates: config provided must contain a valid config.siteId value`);
+            }
+            else {
+                throw new Error(`Snap: config provided must contain a valid config.client.globals.siteId value`);
+            }
+        }
+        // segmented merchandising context -> client globals
+        if (this.config.client?.globals && this.context.merchandising?.segments) {
+            if (this.config.client.globals?.merchandising) {
+                this.config.client.globals.merchandising.segments = deepmerge(this.config.client.globals.merchandising.segments, this.context.merchandising.segments);
+            }
+            else {
+                this.config.client.globals.merchandising = {
+                    segments: this.context.merchandising.segments,
+                };
+            }
+        }
+        if (services?.templatesStore) {
+            this.templates = services.templatesStore;
+        }
+        try {
+            const urlParams = url(window.location.href);
+            const branchOverride = urlParams?.params?.query[BRANCH_PARAM] || cookies.get(BRANCH_COOKIE);
+            const cookieDomain = (typeof window !== 'undefined' && window.location.hostname && '.' + window.location.hostname.replace(/^www\./, '')) || undefined;
+            /* app mode priority:
+                1. node env
+                2. config
+                3. override via query param / cookie
+            */
+            // node env
+            if (process.env.NODE_ENV && Object.values(AppMode).includes(process.env.NODE_ENV)) {
+                this.mode = process.env.NODE_ENV;
+            }
+            // config
+            if (this.config.mode && Object.values(AppMode).includes(this.config.mode)) {
+                this.mode = this.config.mode;
+            }
+            // query param / cookie override
+            if ((urlParams?.params?.query && 'dev' in urlParams.params.query) || !!cookies.get(DEV_COOKIE)) {
+                if (urlParams?.params.query?.dev == 'false' || urlParams?.params.query?.dev == '0') {
+                    cookies.unset(DEV_COOKIE, cookieDomain);
+                    this.mode = AppMode.production;
+                }
+                else {
+                    cookies.set(DEV_COOKIE, '1', 'Lax', 0, cookieDomain);
+                    this.mode = AppMode.development;
+                }
+            }
+            // client mode uses client config over snap config
+            if (this.config.client) {
+                this.config.client.config = this.config.client.config || {};
+                this.config.client.config.initiator = `snap/preact/${version}`;
+                this.config.client.config.mode = this.config.client.config.mode || this.mode;
+            }
+            // feature check block
+            configureSnapFeatures(this.config);
+            this.client = services?.client || new Client(this.config.client.globals, this.config.client.config);
+            this.logger = services?.logger || new Logger({ prefix: 'Snap Preact ', mode: this.mode });
+            // create tracker
+            let trackerGlobals = this.config.tracker?.globals || this.config.client.globals;
+            if (this.context.currency?.code) {
+                trackerGlobals = deepmerge(trackerGlobals || {}, {
+                    currency: this.context.currency,
+                });
+            }
+            if (this.context.shopper?.cart) {
+                trackerGlobals = deepmerge(trackerGlobals || {}, {
+                    cart: this.context.shopper.cart,
+                });
+            }
+            const initiatorPrefix = window?.athos?.managed ? `managed/` : '';
+            const trackerConfig = deepmerge(this.config.tracker?.config || {}, { framework: `${initiatorPrefix}snap/preact`, mode: this.mode });
+            this.tracker = services?.tracker || new Tracker(trackerGlobals, trackerConfig);
+            // log version
+            this.logger.imageText({
+                url: 'https://snapui.athoscommerce.io/favicon.svg',
+                text: `[${version}]`,
+                style: `color: ${this.logger.colors.indigo}; font-weight: bold;`,
+            });
+            // handle branch override
+            if (branchOverride && !document.querySelector(`script[${BRANCH_COOKIE}]`)) {
+                this.logger.warn(`:: loading branch override ~ '${branchOverride}' ...`);
+                // set a cookie with branch
+                if (featureFlags.cookies) {
+                    cookies.set(BRANCH_COOKIE, branchOverride, 'Lax', 3600000, cookieDomain); // 1 hour
+                }
+                else {
+                    this.logger.warn('Cookies are not supported/enabled by this browser, branch overrides will not persist!');
+                }
+                // get the path and siteId from the current bundle script in case its not the same as the client config
+                let path = `https://snapui.athoscommerce.io/${this.config.client?.globals?.siteId}/`;
+                const script = document.querySelector('script[src*="//snapui.searchspring.io"], script[src*="//snapui.athoscommerce.io"]');
+                if (script) {
+                    let scriptRoot = script.getAttribute('src').match(/\/\/snapui.searchspring.io\/[a-zA-Z0-9]{6}\//);
+                    if (scriptRoot) {
+                        path = scriptRoot.toString();
+                    }
+                    else {
+                        scriptRoot = script.getAttribute('src').match(/\/\/snapui.athoscommerce.io\/[a-zA-Z0-9]{6}\//);
+                        if (scriptRoot) {
+                            path = scriptRoot.toString();
+                        }
+                    }
+                }
+                // append script with new branch in path
+                const branchScript = document.createElement('script');
+                const src = `${path}${branchOverride}/bundle.js`;
+                branchScript.src = src;
+                branchScript.setAttribute(BRANCH_COOKIE, branchOverride);
+                new DomTargeter([
+                    {
+                        selector: 'body',
+                        inject: {
+                            action: 'append', // before, after, append, prepend
+                            element: () => {
+                                const branchContainer = document.createElement('div');
+                                branchContainer.id = 'athos-branch-override';
+                                return branchContainer;
+                            },
+                        },
+                    },
+                ], async (target, elem) => {
+                    const props = {};
+                    try {
+                        const getBundleDetails = (await import('./getBundleDetails/getBundleDetails')).getBundleDetails;
+                        props.details = await getBundleDetails(src);
+                    }
+                    catch (err) {
+                        props.error = err;
+                    }
+                    const BranchOverride = (await import('../components/src/components/Organisms/BranchOverride')).BranchOverride;
+                    render(_jsx(BranchOverride, { ...props, branch: branchOverride, onRemoveClick: () => {
+                            cookies.unset(BRANCH_COOKIE, cookieDomain);
+                            const urlState = url(window.location.href);
+                            delete urlState?.params.query[BRANCH_PARAM];
+                            const newUrl = urlState?.url();
+                            if (newUrl && newUrl != window.location.href) {
+                                window.location.href = newUrl;
+                            }
+                            else {
+                                window.location.reload();
+                            }
+                        } }), elem);
+                    // reset the global athos object
+                    try {
+                        delete window.athos;
+                    }
+                    catch (e) {
+                        window.athos = undefined;
+                    }
+                    document.head.appendChild(branchScript);
+                });
+                // remove snap bundle styles
+                document.querySelectorAll(`.${STYLESHEET_CLASSNAME}`).forEach((el) => el.remove());
+                // prevent further instantiation of config
+                throw 'branch override';
+            }
+        }
+        catch (e) {
+            if (e == 'branch override') {
+                throw `${this.logger.emoji.bang} Snap instantiation halted - using branch override.`;
+            }
+            this.logger.error(e);
+        }
+        // bind to window global
+        window.athos = window.athos || {};
+        window.athos.build = window.athos.build || 'modern';
+        window.athos.context = this.context;
+        if (this.client)
+            window.athos.client = this.client;
+        if (services?.templatesStore)
+            window.athos.templates = this.templates;
+        this.eventManager = setupEvents();
+        if (this.eventManager) {
+            window.athos.on = (event, ...func) => {
+                this.eventManager.on(event, ...func);
+            };
+            window.athos.fire = (event, ...func) => {
+                this.eventManager.fire(event, ...func);
+            };
+        }
+        // autotrack shopper id from the context
+        if (this.context?.shopper?.id) {
+            this.tracker.track.shopper.login({
+                id: this.context.shopper.id,
+            });
+        }
+        // create controllers
+        Object.keys(this.config?.controllers || {}).forEach((type) => {
+            switch (type) {
+                case 'search': {
+                    this.config.controllers[type].forEach((controller, index) => {
+                        try {
+                            if (typeof this._controllerPromises[controller.config.id] != 'undefined') {
+                                this.logger.error(`Controller with id '${controller.config.id}' is already defined`);
+                                return;
+                            }
+                            const cntrlr = createSearchController({
+                                mode: this.mode,
+                                url: deepmerge(this.config.url || {}, controller.url || {}),
+                                controller: controller.config,
+                                context: deepmerge(this.context || {}, controller.context || {}),
+                            }, {
+                                client: controller.services?.client || this.client,
+                                store: controller.services?.store,
+                                urlManager: controller.services?.urlManager,
+                                eventManager: controller.services?.eventManager,
+                                profiler: controller.services?.profiler,
+                                logger: controller.services?.logger,
+                                tracker: controller.services?.tracker || this.tracker,
+                            });
+                            window.athos.controller = window.athos.controller || {};
+                            window.athos.controller[cntrlr.config.id] = this.controllers[cntrlr.config.id] = cntrlr;
+                            this._controllerPromises[cntrlr.config.id] = new Promise((resolve) => resolve(cntrlr));
+                            let searchPromise = null;
+                            const runSearch = async () => {
+                                if (!searchPromise) {
+                                    // handle custom initial UrlManager state
+                                    if (controller.url?.initial) {
+                                        getInitialUrlState(controller.url.initial, cntrlr.urlManager).go({ history: 'replace' });
+                                    }
+                                    searchPromise = this.controllers[controller.config.id].search();
+                                }
+                                return searchPromise;
+                            };
+                            const targetFunction = async (target, elem, originalElem) => {
+                                const targetFunctionPromises = [];
+                                if (target.renderAfterSearch) {
+                                    targetFunctionPromises.push(runSearch());
+                                }
+                                else {
+                                    targetFunctionPromises.push(Promise.resolve());
+                                    runSearch();
+                                }
+                                const onTarget = target.onTarget;
+                                onTarget && (await onTarget(target, elem, originalElem));
+                                try {
+                                    targetFunctionPromises.push(target.component());
+                                    const [_, Component] = await Promise.all(targetFunctionPromises);
+                                    setTimeout(() => {
+                                        render(_jsx(Component, { controller: this.controllers[controller.config.id], snap: this, ...target.props }), elem);
+                                    });
+                                }
+                                catch (err) {
+                                    this.logger.error(err);
+                                    this.logger.error(COMPONENT_ERROR, target);
+                                }
+                            };
+                            controller?.targeters?.forEach((target, target_index) => {
+                                if (!target.selector) {
+                                    throw new Error(`Targets at index ${target_index} missing selector value (string).`);
+                                }
+                                if (!target.component) {
+                                    throw new Error(`Targets at index ${target_index} missing component value (Component).`);
+                                }
+                                const contextPage = this.context.pageType && `${this.context.pageType}`.toLowerCase().trim();
+                                if (target.prefetch || ['search', 'category'].includes(contextPage)) {
+                                    runSearch();
+                                    target.component();
+                                }
+                                cntrlr.createTargeter({ controller: cntrlr, ...target }, async (target, elem, originalElem) => {
+                                    if (target && target.skeleton && elem) {
+                                        const Skeleton = await target.skeleton();
+                                        setTimeout(() => {
+                                            render(_jsx(Skeleton, {}), elem);
+                                        });
+                                    }
+                                    await targetFunction(target, elem, originalElem);
+                                });
+                            });
+                        }
+                        catch (err) {
+                            this.logger.error(`Failed to instantiate ${type} controller at index ${index}.`, err);
+                        }
+                    });
+                    break;
+                }
+                case 'autocomplete': {
+                    this.config.controllers[type].forEach((controller, index) => {
+                        if (typeof this._controllerPromises[controller.config.id] != 'undefined') {
+                            this.logger.error(`Controller with id '${controller.config.id}' is already defined`);
+                            return;
+                        }
+                        this._controllerPromises[controller.config.id] = new Promise(async (resolve) => {
+                            try {
+                                let bound = false;
+                                const runBind = () => {
+                                    if (!bound) {
+                                        bound = true;
+                                        setTimeout(() => {
+                                            this.controllers[controller.config.id].bind();
+                                        });
+                                    }
+                                };
+                                const targetFunction = async (target, elem, originalElem) => {
+                                    const onTarget = target.onTarget;
+                                    onTarget && (await onTarget(target, elem, originalElem));
+                                    try {
+                                        const importPromises = [];
+                                        // dynamically import the component
+                                        importPromises.push(target.component());
+                                        const importResolutions = await Promise.all(importPromises);
+                                        const Component = importResolutions[0];
+                                        setTimeout(() => {
+                                            render(_jsx(Component, { controller: this.controllers[controller.config.id], input: originalElem, snap: this, ...target.props }), elem);
+                                        });
+                                    }
+                                    catch (err) {
+                                        this.logger.error(err);
+                                        this.logger.error(COMPONENT_ERROR, target);
+                                    }
+                                };
+                                if (!controller?.targeters || controller?.targeters.length === 0) {
+                                    await this._createController(ControllerTypes.autocomplete, controller.config, controller.services, controller.url, controller.context, (cntrlr) => {
+                                        if (cntrlr)
+                                            resolve(cntrlr);
+                                    });
+                                    runBind();
+                                }
+                                controller?.targeters?.forEach((target, target_index) => {
+                                    if (!target.selector) {
+                                        throw new Error(`Targets at index ${target_index} missing selector value (string).`);
+                                    }
+                                    if (!target.component) {
+                                        throw new Error(`Targets at index ${target_index} missing component value (Component).`);
+                                    }
+                                    const targeter = new DomTargeter([
+                                        {
+                                            inject: {
+                                                action: 'after', // before, after, append, prepend
+                                                element: () => {
+                                                    const acContainer = document.createElement('div');
+                                                    acContainer.className = 'ss__autocomplete--target';
+                                                    acContainer.addEventListener('click', (e) => {
+                                                        e.stopPropagation();
+                                                    });
+                                                    return acContainer;
+                                                },
+                                            },
+                                            ...target,
+                                        },
+                                    ], async (target, elem, originalElem) => {
+                                        const cntrlr = await this._createController(ControllerTypes.autocomplete, controller.config, controller.services, controller.url, controller.context, (cntrlr) => {
+                                            if (cntrlr)
+                                                resolve(cntrlr);
+                                        });
+                                        runBind();
+                                        targetFunction({ controller: cntrlr, ...target }, elem, originalElem);
+                                        cntrlr.addTargeter(targeter);
+                                    });
+                                });
+                            }
+                            catch (err) {
+                                this.logger.error(`Failed to instantiate ${type} controller at index ${index}.`, err);
+                            }
+                        });
+                    });
+                    break;
+                }
+                case 'finder': {
+                    this.config.controllers[type].forEach((controller, index) => {
+                        if (typeof this._controllerPromises[controller.config.id] != 'undefined') {
+                            this.logger.error(`Controller with id '${controller.config.id}' is already defined`);
+                            return;
+                        }
+                        this._controllerPromises[controller.config.id] = new Promise((resolve) => {
+                            try {
+                                let searched = false;
+                                const runSearch = () => {
+                                    if (!searched) {
+                                        this.controllers[controller.config.id].search();
+                                        searched = true;
+                                    }
+                                };
+                                const targetFunction = async (target, elem, originalElem) => {
+                                    const onTarget = target.onTarget;
+                                    onTarget && (await onTarget(target, elem, originalElem));
+                                    try {
+                                        const Component = await target.component();
+                                        setTimeout(() => {
+                                            render(_jsx(Component, { controller: this.controllers[controller.config.id], snap: this, ...target.props }), elem);
+                                        });
+                                    }
+                                    catch (err) {
+                                        this.logger.error(err);
+                                        this.logger.error(COMPONENT_ERROR, target);
+                                    }
+                                };
+                                if (!controller?.targeters || controller?.targeters.length === 0) {
+                                    this._createController(ControllerTypes.finder, controller.config, controller.services, controller.url, controller.context, (cntrlr) => {
+                                        if (cntrlr)
+                                            resolve(cntrlr);
+                                    });
+                                }
+                                controller?.targeters?.forEach((target, target_index) => {
+                                    if (!target.selector) {
+                                        throw new Error(`Targets at index ${target_index} missing selector value (string).`);
+                                    }
+                                    if (!target.component) {
+                                        throw new Error(`Targets at index ${target_index} missing component value (Component).`);
+                                    }
+                                    const targeter = new DomTargeter([{ ...target }], async (target, elem, originalElem) => {
+                                        const cntrlr = await this._createController(ControllerTypes.finder, controller.config, controller.services, controller.url, controller.context, (cntrlr) => {
+                                            if (cntrlr)
+                                                resolve(cntrlr);
+                                        });
+                                        runSearch();
+                                        targetFunction({ controller: cntrlr, ...target }, elem, originalElem);
+                                        cntrlr.addTargeter(targeter);
+                                    });
+                                });
+                            }
+                            catch (err) {
+                                this.logger.error(`Failed to instantiate ${type} controller at index ${index}.`, err);
+                            }
+                        });
+                    });
+                    break;
+                }
+                case 'recommendation': {
+                    this.config.controllers[type].forEach((controller, index) => {
+                        if (typeof this._controllerPromises[controller.config.id] != 'undefined') {
+                            this.logger.error(`Controller with id '${controller.config.id}' is already defined`);
+                            return;
+                        }
+                        this._controllerPromises[controller.config.id] = new Promise((resolve) => {
+                            try {
+                                let searched = false;
+                                const runSearch = () => {
+                                    if (!searched) {
+                                        this.controllers[controller.config.id].search();
+                                        searched = true;
+                                    }
+                                };
+                                const targetFunction = async (target, elem, originalElem) => {
+                                    const onTarget = target.onTarget;
+                                    onTarget && (await onTarget(target, elem, originalElem));
+                                    try {
+                                        const Component = await target.component();
+                                        setTimeout(() => {
+                                            render(_jsx(Component, { controller: this.controllers[controller.config.id], snap: this, ...target.props }), elem);
+                                        });
+                                    }
+                                    catch (err) {
+                                        this.logger.error(err);
+                                        this.logger.error(COMPONENT_ERROR, target);
+                                    }
+                                };
+                                if (!controller?.targeters || controller?.targeters.length === 0) {
+                                    this._createController(ControllerTypes.recommendation, controller.config, controller.services, controller.url, controller.context, (cntrlr) => {
+                                        if (cntrlr)
+                                            resolve(cntrlr);
+                                    });
+                                }
+                                controller?.targeters?.forEach((target, target_index) => {
+                                    if (!target.selector) {
+                                        throw new Error(`Targets at index ${target_index} missing selector value (string).`);
+                                    }
+                                    if (!target.component) {
+                                        throw new Error(`Targets at index ${target_index} missing component value (Component).`);
+                                    }
+                                    const targeter = new DomTargeter([{ ...target }], async (target, elem, originalElem) => {
+                                        const cntrlr = await this._createController(ControllerTypes.recommendation, controller.config, controller.services, controller.url, controller.context, (cntrlr) => {
+                                            if (cntrlr)
+                                                resolve(cntrlr);
+                                        });
+                                        runSearch();
+                                        targetFunction({ controller: cntrlr, ...target }, elem, originalElem);
+                                        cntrlr.addTargeter(targeter);
+                                    });
+                                });
+                            }
+                            catch (err) {
+                                this.logger.error(`Failed to instantiate ${type} controller at index ${index}.`, err);
+                            }
+                        });
+                    });
+                    break;
+                }
+            }
+        });
+        // create instantiators
+        if (this.config?.instantiators?.recommendation) {
+            try {
+                this._instantiatorPromises.recommendation = import('./Instantiators/RecommendationInstantiator').then(({ RecommendationInstantiator }) => {
+                    this.config.instantiators.recommendation.mode = this.config.instantiators.recommendation.mode || this.mode;
+                    return new RecommendationInstantiator(this.config.instantiators.recommendation, {
+                        client: this.client,
+                        tracker: this.tracker,
+                        logger: this.logger,
+                        snap: this,
+                    }, this.context);
+                });
+            }
+            catch (err) {
+                this.logger.error(`Failed to create Recommendations Instantiator.`, err);
+            }
+        }
+    }
+}