@athoscommerce/snap-preact 1.0.0

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

@@ -0,0 +1,300 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { render } from 'preact';
+import deepmerge from 'deepmerge';
+import { AppMode, DomTargeter, getContext } from '@athoscommerce/snap-toolbox';
+import { Client } from '@athoscommerce/snap-client';
+import { Logger } from '@athoscommerce/snap-logger';
+import { Tracker } from '@athoscommerce/snap-tracker';
+const DEFAULT_BRANCH = 'production';
+export class RecommendationInstantiator {
+    constructor(config, services, context) {
+        this.mode = AppMode.production;
+        this.controller = {};
+        this.uses = [];
+        this.plugins = [];
+        this.middleware = [];
+        this.config = config;
+        if (!this.config) {
+            throw new Error(`Recommendation Instantiator config is required`);
+        }
+        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`);
+        }
+        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(AppMode).includes(this.config.mode)) {
+            this.mode = this.config.mode;
+            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 = deepmerge(context || {}, config.context || {});
+        this.client = services?.client || new Client(this.config.client.globals, this.config.client.config);
+        this.tracker = services?.tracker || new Tracker(this.config.client.globals);
+        this.logger = services?.logger || new Logger({ prefix: 'RecommendationInstantiator ', mode: this.mode });
+        const profileCount = {};
+        this.targeter = new DomTargeter([
+            {
+                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,
+                inject: {
+                    action: 'before',
+                    element: (target, origElement) => {
+                        const profile = origElement.getAttribute('profile') || '';
+                        const recsContainer = document.createElement('div');
+                        recsContainer.setAttribute('searchspring-recommend', profile);
+                        return recsContainer;
+                    },
+                },
+            },
+            {
+                selector: 'script[type="searchspring/recommendations"], script[type="athos/recommendations"]',
+                autoRetarget: true,
+                clickRetarget: true,
+                emptyTarget: false,
+            },
+        ], async (target, elem, originalElem) => {
+            const elemContext = getContext([
+                'shopperId',
+                'shopper',
+                'product',
+                'products',
+                'seed',
+                'cart',
+                'filters',
+                'blockedItems',
+                'options',
+                'profile',
+                'custom',
+                'profiles',
+                'globals',
+            ], (originalElem || elem));
+            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.random(),
+                    }),
+                };
+                const targetsArr = [];
+                // build out the targets array for each profile
+                scriptContextProfiles.forEach((profile) => {
+                    if (profile.selector) {
+                        const targetObj = {
+                            selector: profile.selector,
+                            autoRetarget: true,
+                            clickRetarget: true,
+                            profile,
+                        };
+                        targetsArr.push(targetObj);
+                    }
+                });
+                new DomTargeter(targetsArr, async (target, elem, originalElem) => {
+                    if (target.profile?.profile || target.profile?.tag) {
+                        const profileRequestGlobals = {
+                            ...requestGlobals,
+                            profile: target.profile?.options,
+                            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 = deepmerge(this.context, defined({ globals: scriptContextGlobals, profile: target.profile }));
+                        if (elemContext.custom) {
+                            profileContext.custom = deepmerge(profileContext.custom, elemContext.custom);
+                        }
+                        readyTheController(this, services || {}, elem, profileContext, profileCount, originalElem, profileRequestGlobals, target);
+                    }
+                });
+            }
+            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,
+                    }),
+                };
+                readyTheController(this, services || {}, elem, deepmerge(this.context, elemContext), profileCount, originalElem, profileRequestGlobals, target);
+            }
+        });
+    }
+    plugin(func, ...args) {
+        this.plugins.push({ func, args });
+    }
+    on(event, ...func) {
+        this.middleware.push({ event, func });
+    }
+    use(attachments) {
+        this.uses.push(attachments);
+    }
+}
+async function readyTheController(instance, services, injectedElem, context, profileCount, elem, controllerGlobals, target) {
+    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`, elem);
+        return;
+    }
+    if (Array.isArray(cart)) {
+        instance.tracker.cookies.cart.set(cart);
+    }
+    profileCount[tag] = profileCount[tag] + 1 || 1;
+    const globals = deepmerge.all([
+        instance.config.client?.globals || {},
+        instance.config.config?.globals || {},
+        controllerGlobals,
+    ]);
+    const controllerConfig = {
+        id: `recommend_${tag}_${profileCount[tag] - 1}`,
+        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,
+        settings: {
+            variants: instance.config.config?.variants,
+        },
+        globals,
+    };
+    if (profile?.branch) {
+        controllerConfig.branch = profile?.branch;
+    }
+    // try to find an existing controller by similar configuration
+    let controller = Object.keys(instance.controller)
+        .map((id) => instance.controller[id])
+        .filter((controller) => {
+        return (JSON.stringify({
+            batched: controller.config.batched,
+            branch: controller.config.branch,
+            globals: controller.config.globals,
+            tag: controller.config.tag,
+            realtime: controller.config.realtime,
+        }) ==
+            JSON.stringify({
+                batched: controllerConfig.batched,
+                branch: controllerConfig.branch,
+                globals: controllerConfig.globals,
+                tag: controllerConfig.tag,
+                realtime: controllerConfig.realtime,
+            }));
+    })[0];
+    if (!controller) {
+        // no existing controller found of same configuration - creating a new controller
+        const createRecommendationController = (await import('../create/createRecommendationController')).default;
+        controller = createRecommendationController({
+            url: instance.config.url,
+            controller: controllerConfig,
+            context,
+            mode: instance.config.mode,
+        }, { client: instance.client, tracker: instance.tracker });
+        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));
+    }
+    // run a search on the controller if it is not currently
+    if (!controller.store.loading) {
+        await controller.search();
+    }
+    controller.addTargeter(instance.targeter);
+    instance.controller[controller.config.id] = controller;
+    window.athos.controller = window.athos.controller || {};
+    window.athos.controller[controller.config.id] = controller;
+    const profileVars = controller.store.profile.display?.templateParameters;
+    const component = controller.store.profile.display?.template?.component;
+    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${elem?.outerHTML}`);
+        return;
+    }
+    if (!profileVars) {
+        instance.logger.error(`profile '${tag}' found on the following element is missing templateParameters!\n${elem?.outerHTML}`);
+        return;
+    }
+    if (!component) {
+        instance.logger.error(`profile '${tag}' found on the following element is missing a component!\n${elem?.outerHTML}`);
+        return;
+    }
+    let props = {};
+    let RecommendationsComponent = undefined;
+    props.className = `ss__recommendation-${component.toLowerCase()}`;
+    injectedElem?.setAttribute('id', `${controllerConfig.id}`);
+    instance.config.components[component]?.onTarget?.(target, elem, injectedElem, 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${elem?.outerHTML}`);
+        return;
+    }
+    setTimeout(() => {
+        if (injectedElem && RecommendationsComponent) {
+            render(_jsx(RecommendationsComponent, { controller: controller, snap: services?.snap, ...props }), injectedElem);
+        }
+    });
+}
+function getArrayFunc(arrayOrFunc) {
+    if (typeof arrayOrFunc === 'function') {
+        try {
+            const funcContents = arrayOrFunc();
+            if (Array.isArray(funcContents)) {
+                return funcContents;
+            }
+        }
+        catch (e) {
+            // function didn't return an array
+        }
+    }
+    else if (Array.isArray(arrayOrFunc)) {
+        return arrayOrFunc;
+    }
+    return [];
+}
+export function defined(properties) {
+    const definedProps = {};
+    Object.keys(properties).map((key) => {
+        if (properties[key] !== undefined) {
+            definedProps[key] = properties[key];
+        }
+    });
+    return definedProps;
+}

package/dist/esm/src/Snap.d.ts

@@ -0,0 +1,95 @@
+import { Client } from '@athoscommerce/snap-client';
+import { Logger } from '@athoscommerce/snap-logger';
+import { Tracker } from '@athoscommerce/snap-tracker';
+import { AppMode } from '@athoscommerce/snap-toolbox';
+import { ControllerTypes } from '@athoscommerce/snap-controller';
+import { EventManager } from '@athoscommerce/snap-event-manager';
+import type { ClientConfig, ClientGlobals } from '@athoscommerce/snap-client';
+import type { Controllers, AbstractController, SearchControllerConfig, AutocompleteControllerConfig, FinderControllerConfig, RecommendationControllerConfig, ControllerConfigs, ContextVariables } from '@athoscommerce/snap-controller';
+import type { TrackerConfig, TrackerGlobals } from '@athoscommerce/snap-tracker';
+import type { Target, OnTarget } from '@athoscommerce/snap-toolbox';
+import type { UrlTranslatorConfig } from '@athoscommerce/snap-url-manager';
+import { RecommendationInstantiator, RecommendationInstantiatorConfig } from './Instantiators/RecommendationInstantiator';
+import type { SnapControllerServices, InitialUrlConfig, SnapFeatures } from './types';
+import type { TemplatesStore } from './Templates/Stores/TemplateStore';
+export declare const BRANCH_COOKIE = "athosBranch";
+export declare const BRANCH_PARAM = "athos-preview";
+export declare const DEV_COOKIE = "athos-Dev";
+export declare const STYLESHEET_CLASSNAME = "athos-snap-bundle-styles";
+export type ExtendedTarget = Target & {
+    name?: string;
+    controller?: AbstractController;
+    component?: () => Promise<any> | any;
+    skeleton?: () => Promise<any> | any;
+    props?: {
+        [propName: string]: any;
+    };
+    onTarget?: OnTarget;
+    prefetch?: boolean;
+    renderAfterSearch?: boolean;
+};
+export type SnapConfigControllerDefinition<ControllerConfig> = {
+    config: ControllerConfig;
+    targeters?: ExtendedTarget[];
+    services?: SnapControllerServices;
+    url?: UrlTranslatorConfig & {
+        initial?: InitialUrlConfig;
+    };
+    context?: ContextVariables;
+};
+export type SnapConfig = {
+    features?: SnapFeatures;
+    mode?: keyof typeof AppMode | AppMode;
+    context?: ContextVariables;
+    url?: UrlTranslatorConfig;
+    client?: {
+        globals?: Partial<ClientGlobals>;
+        config?: ClientConfig;
+    };
+    tracker?: {
+        globals?: TrackerGlobals;
+        config?: TrackerConfig;
+    };
+    instantiators?: {
+        recommendation?: RecommendationInstantiatorConfig;
+    };
+    controllers?: {
+        search?: SnapConfigControllerDefinition<SearchControllerConfig>[];
+        autocomplete?: SnapConfigControllerDefinition<AutocompleteControllerConfig>[];
+        finder?: SnapConfigControllerDefinition<FinderControllerConfig>[];
+        recommendation?: SnapConfigControllerDefinition<RecommendationControllerConfig>[];
+    };
+};
+type SnapServices = {
+    client?: Client;
+    tracker?: Tracker;
+    logger?: Logger;
+    templatesStore?: TemplatesStore;
+};
+export declare class Snap {
+    private mode;
+    private config;
+    private _instantiatorPromises;
+    private _controllerPromises;
+    logger: Logger;
+    client: Client;
+    tracker: Tracker;
+    context: ContextVariables;
+    controllers: {
+        [controllerConfigId: string]: Controllers;
+    };
+    eventManager: EventManager;
+    templates?: TemplatesStore;
+    getInstantiator: (id: string) => Promise<RecommendationInstantiator>;
+    getController: (id: string) => Promise<Controllers>;
+    getControllers: (...controllerIds: string[]) => Promise<Controllers[]>;
+    createController: (type: keyof typeof ControllerTypes, config: ControllerConfigs, services?: SnapControllerServices, urlConfig?: UrlTranslatorConfig, context?: ContextVariables, callback?: (value?: Controllers | PromiseLike<Controllers>) => void | Promise<void>) => Promise<Controllers>;
+    private _createController;
+    handlers: {
+        attributes: (event: MouseEvent) => void;
+        error: (event: ErrorEvent) => void;
+    };
+    constructor(config: SnapConfig, services?: SnapServices);
+}
+export {};
+//# sourceMappingURL=Snap.d.ts.map

package/dist/esm/src/Snap.d.ts.map

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