@uniformdev/canvas-next-rsc 20.31.1-alpha.1 → 20.31.1-alpha.185

package/dist/components/convertComponentToProps.js

@@ -0,0 +1,22 @@
+/**
+ * Extracts parameters from a component instance and returns them as a props object.
+ *
+ * @param component The component instance to extract parameters from.
+ *
+ * @returns The parameters as a props object.
+ *
+ */
+export function convertComponentToProps({ component, context, }) {
+    var _a;
+    const parameters = (_a = component.parameters) !== null && _a !== void 0 ? _a : {};
+    const renderComponentProps = {
+        ...Object.keys(parameters).reduce((acc, cur) => {
+            acc[cur] = parameters[cur].value;
+            return acc;
+        }, {}),
+        ...component.data,
+        component,
+        context,
+    };
+    return renderComponentProps;
+}

package/dist/components/evaluateComposition.d.ts

@@ -0,0 +1,32 @@
+import { RootComponentInstance, RouteGetResponseComposition } from '@uniformdev/canvas';
+import { ContextState } from '@uniformdev/context';
+
+import { UniformServerConfig } from '../config';
+import { SeenUniformComponent } from '../models';
+export declare const evaluateComposition: ({
+  root,
+  params,
+  searchParams,
+  dynamicInputs,
+  headers,
+  cookies,
+  update,
+  config,
+}: {
+  root: RootComponentInstance;
+  params: {
+    slug: string | string[];
+  };
+  searchParams: {
+    [key: string]: string | undefined;
+  };
+  dynamicInputs: RouteGetResponseComposition['dynamicInputs'];
+  headers: Headers;
+  cookies: Record<string, string>;
+  update: Partial<ContextState> | undefined;
+  config?: UniformServerConfig | undefined;
+}) => Promise<{
+  composition: RootComponentInstance;
+  cookieValue: string | undefined;
+  seenComponents: SeenUniformComponent[];
+}>;

package/dist/components/evaluateComposition.js

@@ -0,0 +1,183 @@
+import { CANVAS_PERSONALIZATION_PARAM, CANVAS_PERSONALIZE_TYPE, CANVAS_TEST_TYPE, localize, mapSlotToPersonalizedVariations, mapSlotToTestVariations, walkNodeTree, } from '@uniformdev/canvas';
+import { UNIFORM_DEFAULT_COOKIE_NAME } from '@uniformdev/context';
+import { getServerConfig } from '../config/helpers';
+import { serializeCookie } from '../score';
+import { isIncontextEditingEnabled } from '../utils/draft';
+import { getBaseUrl } from '../utils/url';
+import { getEnrichmentTags } from './getEnrichmentTags';
+import { getUniformContext } from './getUniformContext';
+import { resolvePath } from './resolvePath';
+export const evaluateComposition = async ({ root, params, searchParams, dynamicInputs, headers, cookies, update, config = getServerConfig(), }) => {
+    // resolve the path from route params
+    const path = resolvePath({
+        params,
+    });
+    const context = await getUniformContext({
+        searchParams,
+        cookieValue: cookies[UNIFORM_DEFAULT_COOKIE_NAME] || undefined,
+    });
+    // generate the current URL for the request
+    const url = new URL(`${getBaseUrl()}${path}`);
+    for (const [key, value] of Object.entries(searchParams)) {
+        if (value) {
+            url.searchParams.set(key, value);
+        }
+    }
+    const missingQuirkValue = 'unknown';
+    const { cookies: updateCookies, quirks: updateQuirks, ...restOfUpdate } = update || {};
+    // update context to update scores
+    await context.update({
+        cookies: {
+            ...cookies,
+            ...(updateCookies || {}),
+        },
+        url,
+        quirks: {
+            'vc-country': headers.get('x-vercel-ip-country') || missingQuirkValue,
+            'vc-region': headers.get('x-vercel-ip-country-region') || missingQuirkValue,
+            'vc-city': headers.get('x-vercel-ip-city') || missingQuirkValue,
+            ...(updateQuirks || {}),
+        },
+        ...restOfUpdate,
+    });
+    const composition = root;
+    const resolvedLocaleKey = Object.keys(dynamicInputs || {}).find((key) => {
+        var _a, _b;
+        return (_b = (_a = config.experimental) === null || _a === void 0 ? void 0 : _a.localeDynamicInputs) === null || _b === void 0 ? void 0 : _b.includes(key);
+    });
+    const resolvedLocale = resolvedLocaleKey
+        ? dynamicInputs[resolvedLocaleKey]
+        : undefined;
+    if (typeof resolvedLocale !== 'undefined') {
+        localize({
+            composition,
+            locale: resolvedLocale,
+        });
+    }
+    const enrichmentTags = [];
+    const seenComponents = [];
+    walkNodeTree(composition, ({ type, node: component, actions }) => {
+        var _a, _b, _c, _d, _e, _f;
+        if (type !== 'component') {
+            // we ignore blocks for now
+            actions.stopProcessingDescendants();
+            return;
+        }
+        let replacementComponents;
+        // evaluate personalization components
+        if (component.type === CANVAS_PERSONALIZE_TYPE) {
+            const pzComponent = component;
+            // extract the personalized variations from the pz component slot
+            const processedVariants = mapSlotToPersonalizedVariations((_a = pzComponent === null || pzComponent === void 0 ? void 0 : pzComponent.slots) === null || _a === void 0 ? void 0 : _a.pz);
+            // extract the number of variations to take from the pz component, defaulting to 1
+            const take = Number((_b = pzComponent.parameters.count) === null || _b === void 0 ? void 0 : _b.value) || 1;
+            // determine the personalization name
+            const personalizationName = ((_c = pzComponent.parameters.trackingEventName) === null || _c === void 0 ? void 0 : _c.value) || 'Unknown';
+            // personalize the component
+            const { variations: personalized } = context.personalize({
+                name: personalizationName,
+                variations: processedVariants,
+                take,
+            });
+            // if personalized variations were returned, remove the the criteria parameter
+            if (personalized) {
+                for (let i = 0; i < personalized.length; i++) {
+                    (_d = personalized[i].parameters) === null || _d === void 0 ? true : delete _d[CANVAS_PERSONALIZATION_PARAM];
+                }
+            }
+            // record that we have selected these variations for this personalization
+            seenComponents.push({
+                id: personalizationName,
+                type: 'personalization',
+                variants: personalized.map((p) => p.id),
+                control: context.storage.data.controlGroup || false,
+            });
+            // set the replacement components to the personalized variations
+            replacementComponents = personalized;
+        }
+        // evaluate test component
+        if (component.type === CANVAS_TEST_TYPE) {
+            const testComponent = component;
+            // extract the test variations from the test component slot
+            const processedVariants = mapSlotToTestVariations((_e = testComponent === null || testComponent === void 0 ? void 0 : testComponent.slots) === null || _e === void 0 ? void 0 : _e.test);
+            const testName = ((_f = testComponent.parameters.test) === null || _f === void 0 ? void 0 : _f.value) || 'Unknown';
+            // evaluate the test
+            const testResult = context.test({
+                name: testName,
+                variations: processedVariants,
+            });
+            // record that we have selected this variation for this test
+            seenComponents.push({
+                id: testName,
+                type: 'test',
+                variant: testResult.result ? testResult.result.id : undefined,
+            });
+            // set the replacement components to the test variation
+            if (testResult.result) {
+                replacementComponents = [testResult.result];
+            }
+            else {
+                replacementComponents = [];
+            }
+        }
+        // if we replacement components is defined, process replacements
+        if (typeof replacementComponents !== 'undefined') {
+            // if no variants were selected, just remove the current component. no matches.
+            if (replacementComponents.length === 0) {
+                actions.remove();
+            }
+            else {
+                const [first, ...rest] = replacementComponents;
+                // replace the first component
+                actions.replace(first);
+                // if there are other components, insert them after the first
+                if (rest.length) {
+                    actions.insertAfter(rest);
+                }
+            }
+        }
+        else {
+            // check to see if this component has any enrichment tags assigned
+            const tags = getEnrichmentTags(component);
+            // if so, add them to the enrichment tags
+            if (tags === null || tags === void 0 ? void 0 : tags.length) {
+                enrichmentTags.push(...tags);
+            }
+        }
+    });
+    // when we post compositions to CANVAS_EDITOR_STATE, we have to remove all
+    // contextual editing objects that have been attached to parameters in order
+    // to pass API validation. walk the composition and add them back in, assume
+    // everything is editable.
+    if (isIncontextEditingEnabled({ searchParams })) {
+        walkNodeTree(composition, ({ node: component, actions, type }) => {
+            if (type !== 'component') {
+                actions.stopProcessingDescendants();
+                return;
+            }
+            if (component.parameters) {
+                const params = Object.keys(component.parameters);
+                params.forEach((key) => {
+                    const param = component.parameters[key];
+                    if (param.type === 'text' && typeof param._contextualEditing === 'undefined') {
+                        param._contextualEditing = {
+                            isEditable: true,
+                        };
+                    }
+                });
+            }
+        });
+    }
+    // if we've seen any enrichment tags, update the context with them
+    if (enrichmentTags.length) {
+        await context.update({
+            enrichments: enrichmentTags,
+        });
+    }
+    // return the updated cookie value and any seen components
+    return {
+        cookieValue: context.storage.data.consent ? serializeCookie(context.storage.data) : undefined,
+        composition,
+        seenComponents,
+    };
+};

package/dist/components/getEnrichmentTags.d.ts

@@ -0,0 +1,5 @@
+import { ComponentInstance } from '@uniformdev/canvas';
+import { EnrichmentData } from '@uniformdev/context';
+export declare const getEnrichmentTags: (
+  targets: ComponentInstance | ComponentInstance[]
+) => EnrichmentData[];

package/dist/components/getEnrichmentTags.js

@@ -0,0 +1,13 @@
+import { CANVAS_ENRICHMENT_TAG_PARAM } from '@uniformdev/canvas';
+export const getEnrichmentTags = (targets) => {
+    const targetsArray = Array.isArray(targets) ? targets : [targets];
+    const tags = [];
+    targetsArray.forEach((target) => {
+        var _a, _b;
+        const enrichmentTags = (_b = (_a = target.parameters) === null || _a === void 0 ? void 0 : _a[CANVAS_ENRICHMENT_TAG_PARAM]) === null || _b === void 0 ? void 0 : _b.value;
+        if (enrichmentTags) {
+            tags.push(...enrichmentTags);
+        }
+    });
+    return tags;
+};

package/dist/components/getUniformContext.d.ts

@@ -0,0 +1,10 @@
+import { Context } from '@uniformdev/context';
+
+import { UniformCompositionProps } from './UniformComposition';
+export declare const getUniformContext: ({
+  searchParams,
+  cookieValue,
+}: {
+  searchParams?: UniformCompositionProps['searchParams'];
+  cookieValue: string | undefined;
+}) => Promise<Context>;

package/dist/components/getUniformContext.js

@@ -0,0 +1,17 @@
+import { Context, CookieTransitionDataStore } from '@uniformdev/context';
+import { getManifestFromApi } from '../client/manifestClient';
+import { getServerConfig } from '../config/helpers';
+export const getUniformContext = async ({ searchParams, cookieValue, }) => {
+    const manifest = await getManifestFromApi({
+        searchParams,
+    });
+    const config = getServerConfig();
+    const context = new Context({
+        manifest,
+        defaultConsent: config.defaultConsent,
+        transitionStore: new CookieTransitionDataStore({
+            serverCookieValue: cookieValue,
+        }),
+    });
+    return context;
+};

package/dist/components/nodes/HeadingRichTextNode.d.ts

@@ -0,0 +1,2 @@
+import { RichTextRendererComponent } from '../types';
+export declare const HeadingRichTextNode: RichTextRendererComponent;

package/dist/components/nodes/HeadingRichTextNode.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const HeadingRichTextNode = ({ children, node }) => {
+    const { tag } = node;
+    const HTag = (tag !== null && tag !== void 0 ? tag : 'h1');
+    return _jsx(HTag, { children: children });
+};

package/dist/components/nodes/LinebreakRichTextNode.d.ts

@@ -0,0 +1,2 @@
+import { RichTextRendererComponent } from '../types';
+export declare const LinebreakRichTextNode: RichTextRendererComponent;

package/dist/components/nodes/LinebreakRichTextNode.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const LinebreakRichTextNode = () => {
+    return _jsx("br", {});
+};

package/dist/components/nodes/LinkRichTextNode.d.ts

@@ -0,0 +1,2 @@
+import { RichTextRendererComponent } from '../types';
+export declare const LinkRichTextNode: RichTextRendererComponent;

package/dist/components/nodes/LinkRichTextNode.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { linkParamValueToHref } from '@uniformdev/richtext';
+export const LinkRichTextNode = ({ children, node }) => {
+    const { link } = node;
+    return _jsx("a", { href: linkParamValueToHref(link), children: children });
+};

package/dist/components/nodes/ListItemRichTextNode.d.ts

@@ -0,0 +1,2 @@
+import { RichTextRendererComponent } from '../types';
+export declare const ListItemRichTextNode: RichTextRendererComponent;

package/dist/components/nodes/ListItemRichTextNode.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const ListItemRichTextNode = ({ children, node }) => {
+    const { value } = node;
+    return _jsx("li", { value: Number.isFinite(value) && value > 0 ? value : undefined, children: children });
+};

package/dist/components/nodes/ListRichTextNode.d.ts

@@ -0,0 +1,2 @@
+import { RichTextRendererComponent } from '../types';
+export declare const ListRichTextNode: RichTextRendererComponent;

package/dist/components/nodes/ListRichTextNode.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const ListRichTextNode = ({ children, node }) => {
+    const { tag, start } = node;
+    const ListTag = (tag !== null && tag !== void 0 ? tag : 'ul');
+    return _jsx(ListTag, { start: Number.isFinite(start) && start > 0 ? start : undefined, children: children });
+};

package/dist/components/nodes/ParagraphRichTextNode.d.ts

@@ -0,0 +1,2 @@
+import { RichTextRendererComponent } from '../types';
+export declare const ParagraphRichTextNode: RichTextRendererComponent;

package/dist/components/nodes/ParagraphRichTextNode.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isPureDirection, isPureTextAlign } from '@uniformdev/richtext';
+export const ParagraphRichTextNode = ({ children, node }) => {
+    const { format, direction } = node;
+    return (_jsx("p", { dir: isPureDirection(direction) ? direction : undefined, style: isPureTextAlign(format) ? { textAlign: format } : undefined, children: children }));
+};

package/dist/components/nodes/TabRichTextNode.d.ts

@@ -0,0 +1,2 @@
+import { RichTextRendererComponent } from '../types';
+export declare const TabRichTextNode: RichTextRendererComponent;

package/dist/components/nodes/TabRichTextNode.js

@@ -0,0 +1,4 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+export const TabRichTextNode = () => {
+    return _jsx(_Fragment, { children: '\t' });
+};

package/dist/components/nodes/TextRichTextNode.d.ts

@@ -0,0 +1,2 @@
+import { RichTextRendererComponent } from '../types';
+export declare const TextRichTextNode: RichTextRendererComponent;

package/dist/components/nodes/TextRichTextNode.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { getRichTextTagsFromTextFormat } from '@uniformdev/richtext';
+export const TextRichTextNode = ({ node }) => {
+    const { text, format } = node;
+    const tags = getRichTextTagsFromTextFormat(format);
+    return (_jsx(_Fragment, { children: tags.length > 0
+            ? tags.reduceRight((children, Tag) => _jsx(Tag, { children: children }), text)
+            : text }));
+};

package/dist/components/renderComponent.d.ts

@@ -0,0 +1,26 @@
+import { ComponentInstance } from '@uniformdev/canvas';
+import { SystemRenderConfig, UniformSlotProps } from '@uniformdev/canvas-react';
+import { Key } from 'react';
+
+import { CompositionContext } from './UniformComponent';
+export declare function renderComponent({
+  component,
+  context,
+  resolveSystem,
+  key,
+  indexInSlot,
+  slotName,
+  parentComponent,
+  slotChildrenCount,
+  emptyPlaceholder,
+}: {
+  component: ComponentInstance;
+  context: CompositionContext;
+  resolveSystem: SystemRenderConfig;
+  key?: Key;
+  indexInSlot?: number;
+  slotName?: string;
+  parentComponent?: ComponentInstance;
+  slotChildrenCount?: number;
+  emptyPlaceholder?: UniformSlotProps<any>['emptyPlaceholder'];
+}): JSX.Element | null;

package/dist/components/renderComponent.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { CANVAS_LOCALE_TAG_PARAM, CANVAS_PERSONALIZE_SLOT, CANVAS_PERSONALIZE_TYPE, CANVAS_TEST_SLOT, CANVAS_TEST_TYPE, IN_CONTEXT_EDITOR_COMPONENT_START_ROLE, isComponentPlaceholderId, } from '@uniformdev/canvas';
+import { componentStoreResolver } from '../register/componentStoreResolver';
+import { isIncontextEditingEnabled } from '../utils/draft';
+import { convertComponentToProps } from './convertComponentToProps';
+import { UniformComponent } from './UniformComponent';
+export function renderComponent({ component, context, resolveSystem, key = 0, indexInSlot, slotName, parentComponent, slotChildrenCount, emptyPlaceholder, }) {
+    var _a, _b, _c, _d;
+    const RenderComponent = componentStoreResolver(component);
+    // custom handling for tests and personalizes
+    if (component.type === CANVAS_TEST_TYPE) {
+        return resolveSystem.test(component, key, (variantComponent, key) => {
+            var _a, _b;
+            return renderComponent({
+                component: variantComponent,
+                context,
+                resolveSystem,
+                key,
+                parentComponent: component,
+                slotName: CANVAS_TEST_SLOT,
+                slotChildrenCount: (_a = component === null || component === void 0 ? void 0 : component.slots) === null || _a === void 0 ? void 0 : _a[CANVAS_TEST_SLOT].length,
+                indexInSlot: (_b = component === null || component === void 0 ? void 0 : component.slots) === null || _b === void 0 ? void 0 : _b[CANVAS_TEST_SLOT].findIndex(({ _id }) => variantComponent._id === _id),
+            });
+        });
+    }
+    else if (component.type === CANVAS_PERSONALIZE_TYPE) {
+        return resolveSystem.personalization(component, key, (variantComponent, key) => {
+            var _a, _b;
+            return renderComponent({
+                component: variantComponent,
+                context,
+                resolveSystem,
+                key,
+                parentComponent: component,
+                slotName: CANVAS_PERSONALIZE_SLOT,
+                slotChildrenCount: (_a = component === null || component === void 0 ? void 0 : component.slots) === null || _a === void 0 ? void 0 : _a[CANVAS_PERSONALIZE_SLOT].length,
+                indexInSlot: (_b = component === null || component === void 0 ? void 0 : component.slots) === null || _b === void 0 ? void 0 : _b[CANVAS_PERSONALIZE_SLOT].findIndex(({ _id }) => variantComponent._id === _id),
+            });
+        });
+    }
+    else if (RenderComponent) {
+        const props = convertComponentToProps({
+            component,
+            context,
+        });
+        const shouldRenderContextualEditingTags = Boolean(component._id) && isIncontextEditingEnabled(context);
+        const isPlaceholder = isComponentPlaceholderId(component._id);
+        const isReadOnly = false;
+        return (_jsx(UniformComponent, { data: component, context: context, children: _jsxs(_Fragment, { children: [!shouldRenderContextualEditingTags ? null : (_jsx("script", { "data-role": IN_CONTEXT_EDITOR_COMPONENT_START_ROLE, "data-parent-id": parentComponent === null || parentComponent === void 0 ? void 0 : parentComponent._id, "data-parent-type": parentComponent === null || parentComponent === void 0 ? void 0 : parentComponent.type, "data-component-id": component._id, "data-slot-name": slotName !== null && slotName !== void 0 ? slotName : '', "data-component-index": indexInSlot !== null && indexInSlot !== void 0 ? indexInSlot : '', "data-total-components": slotChildrenCount !== null && slotChildrenCount !== void 0 ? slotChildrenCount : '', "data-component-name": component.type, "data-is-placeholder": isPlaceholder ? 'true' : undefined, "data-is-localized": ((_a = component.parameters) === null || _a === void 0 ? void 0 : _a[CANVAS_LOCALE_TAG_PARAM]) ? 'true' : undefined, "data-component-title": (_d = (_c = (_b = component.parameters) === null || _b === void 0 ? void 0 : _b.title) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : '', "data-is-readonly": isReadOnly }, key)), isPlaceholder && emptyPlaceholder !== undefined ? (emptyPlaceholder) : (_jsx(RenderComponent, { ...props })), !shouldRenderContextualEditingTags ? null : _jsx("script", { "data-role": "component-end" })] }) }, key));
+    }
+    return null;
+}

package/dist/components/resolvePath.d.ts

@@ -0,0 +1,5 @@
+export declare const resolvePath: (options: {
+  params: {
+    slug: string | string[];
+  };
+}) => string;

package/dist/components/resolvePath.js

@@ -0,0 +1,34 @@
+const resolveSlugFromString = (originalSlug) => {
+    if (!originalSlug) {
+        return [''];
+    }
+    const slug = decodeURIComponent(originalSlug);
+    if (slug.includes('/')) {
+        return slug.split('/');
+    }
+    return [slug || ''];
+};
+const resolveSlugFromArray = (slug) => {
+    const slugPieces = [];
+    for (let i = 0; i < slug.length; i++) {
+        const decoded = decodeURIComponent(slug[i]);
+        if (decoded.includes('/')) {
+            slugPieces.push(...decoded.split('/'));
+        }
+        else {
+            slugPieces.push(decoded);
+        }
+    }
+    return slugPieces;
+};
+export const resolvePath = (options) => {
+    const { params: { slug }, } = options;
+    const definedSlug = !Array.isArray(slug)
+        ? resolveSlugFromString(slug)
+        : resolveSlugFromArray(slug);
+    let joined = `/${Array.isArray(definedSlug) ? definedSlug.join('/') : definedSlug}`;
+    if (joined === '/index') {
+        joined = '/';
+    }
+    return joined;
+};