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

package/dist/models/index.d.ts

@@ -0,0 +1,30 @@
+import { ComponentInstance, ComponentParameter } from '@uniformdev/canvas';
+export interface TestComponent {
+  slots?: {
+    test?: ComponentInstance[];
+  };
+  parameters: {
+    test?: ComponentParameter<string | undefined>;
+  };
+}
+export interface PersonalizeComponent {
+  slots?: {
+    pz?: ComponentInstance[];
+  };
+  parameters: {
+    trackingEventName?: ComponentParameter<string>;
+    count?: ComponentParameter<string | number>;
+  };
+}
+export type SeenUniformComponent = SeenPersonalizationComponent | SeenTestComponent;
+export interface SeenPersonalizationComponent {
+  id: string;
+  type: 'personalization';
+  variants: string[];
+  control: boolean;
+}
+export interface SeenTestComponent {
+  id: string;
+  type: 'test';
+  variant: string | undefined;
+}

package/dist/models/index.js

@@ -0,0 +1 @@
+export {};

package/dist/register/componentStore.d.ts

@@ -0,0 +1 @@
+export declare const componentStore: import('./createComponentStore').ComponentStore;

package/dist/register/componentStore.js

@@ -0,0 +1,2 @@
+import { createComponentStore } from './createComponentStore';
+export const componentStore = createComponentStore();

package/dist/register/componentStoreResolver.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const componentStoreResolver: (
+  component: import('@uniformdev/canvas').ComponentInstance
+) => import('react').ComponentType<any> | null;

package/dist/register/componentStoreResolver.js

@@ -0,0 +1,5 @@
+import { componentStore } from './componentStore';
+import { createComponentStoreResolver } from './createComponentStoreResolver';
+export const componentStoreResolver = createComponentStoreResolver({
+    store: componentStore,
+});

package/dist/register/createComponentStore.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { ComponentProps } from '../components/UniformComponent';
+export declare const NOT_IMPLEMENTED_COMPONENT = '__not_implemented__';
+export declare const createComponentStore: () => ComponentStore;
+export type ComponentStore = {
+  register: (options: {
+    type: string;
+    variantId?: string;
+    component: React.ComponentType<ComponentProps<any>>;
+  }) => void;
+  get: (type: string, variantId?: string) => React.ComponentType<ComponentProps<any>> | undefined;
+};

package/dist/register/createComponentStore.js

@@ -0,0 +1,13 @@
+import { getTypeWithVariant } from './getTypeWithVariant';
+export const NOT_IMPLEMENTED_COMPONENT = '__not_implemented__';
+export const createComponentStore = () => {
+    const components = new Map();
+    return {
+        register: ({ type, component, variantId }) => {
+            components.set(getTypeWithVariant(type, variantId), component);
+        },
+        get: (type, variantId) => {
+            return components.get(getTypeWithVariant(type, variantId));
+        },
+    };
+};

package/dist/register/createComponentStoreResolver.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { type ComponentInstance } from '@uniformdev/canvas';
+
+import { ComponentProps } from '../components/UniformComponent';
+import { ComponentStore } from './createComponentStore';
+type RenderComponentResolver = (
+  component: ComponentInstance
+) => React.ComponentType<ComponentProps<any>> | null;
+export declare const createComponentStoreResolver: (options: {
+  store: ComponentStore;
+}) => RenderComponentResolver;
+export {};

package/dist/register/createComponentStoreResolver.js

@@ -0,0 +1,9 @@
+import { DefaultNotImplementedComponent } from '../components/DefaultNotImplementedComponent';
+import { getTypeWithVariant } from './getTypeWithVariant';
+export const createComponentStoreResolver = ({ store }) => {
+    return (component) => {
+        var _a;
+        const resolved = (_a = store.get(getTypeWithVariant(component.type, component.variant))) !== null && _a !== void 0 ? _a : store.get(getTypeWithVariant(component.type));
+        return resolved || DefaultNotImplementedComponent;
+    };
+};

package/dist/register/getTypeWithVariant.d.ts

@@ -0,0 +1 @@
+export declare const getTypeWithVariant: (type: string, variantId?: string) => string;

package/dist/register/getTypeWithVariant.js

@@ -0,0 +1 @@
+export const getTypeWithVariant = (type, variantId) => `${type}${variantId ? `__${variantId}` : ''}`;

package/dist/register/registerUniformComponent.d.ts

@@ -0,0 +1,10 @@
+import { ComponentProps } from '../components/UniformComponent';
+export declare const registerUniformComponent: ({
+  type,
+  variantId,
+  component,
+}: {
+  type: string;
+  variantId?: string | undefined;
+  component: React.ComponentType<ComponentProps<any>>;
+}) => void;

package/dist/register/registerUniformComponent.js

@@ -0,0 +1,8 @@
+import { componentStore } from './componentStore';
+export const registerUniformComponent = ({ type, variantId, component, }) => {
+    componentStore.register({
+        type,
+        variantId,
+        component,
+    });
+};

package/dist/resolve/resolveChildren.d.ts

@@ -0,0 +1,17 @@
+import { RenderComponentResolver } from '@uniformdev/canvas-react';
+import { ReactNode } from 'react';
+
+import { CompositionContext, UniformComponentProps } from '../components/UniformComponent';
+export declare function resolveChildren<TRenderProps = unknown>({
+  children,
+  data,
+  context,
+  hasParentLayout,
+  resolveRenderer,
+}: {
+  children: UniformComponentProps<TRenderProps>['children'];
+  data: Required<UniformComponentProps<TRenderProps>>['data'];
+  context: CompositionContext;
+  hasParentLayout: boolean;
+  resolveRenderer: RenderComponentResolver;
+}): ReactNode;

package/dist/resolve/resolveChildren.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement } from 'react';
+import { convertComponentToProps } from '../components/convertComponentToProps';
+import { UniformSlot } from '../components/UniformSlot';
+export function resolveChildren({ children, data, context, hasParentLayout, resolveRenderer, }) {
+    // attempt to resolve the top level component if we're at the root and children were not provided
+    if (!children && !hasParentLayout) {
+        const topLevelComponent = resolveRenderer({ type: data.type });
+        if (topLevelComponent) {
+            children = createElement(topLevelComponent, convertComponentToProps({ component: data, context }));
+        }
+        else {
+            children = Object.keys(data.slots || {}).map((slotName) => (_jsx(UniformSlot, { name: slotName, data: data, context: context }, slotName)));
+        }
+    }
+    const renderChildren = typeof children === 'function'
+        ? children(convertComponentToProps({ component: data, context }))
+        : children;
+    return renderChildren;
+}

package/dist/score/index.d.ts

@@ -0,0 +1,3 @@
+import { VisitorData } from '@uniformdev/context';
+export declare function parseScoreCookie(cookieValue: string | undefined): Partial<VisitorData> | undefined;
+export declare function serializeCookie(data: VisitorData): string;

package/dist/score/index.js

@@ -0,0 +1,114 @@
+const TYPE_SEP = '~';
+const PAIR_SEP = '!';
+const KV_SEP = '-';
+// the cookie format is thus:
+// <ab-test-data>~<session-scores>~<visitor-scores>
+// where each type is subdivided into key-value pairs:
+// <k>-<v>!<k>-<v>!...
+// score data is further encoded into base64, so the scores themselves are compressed
+// example:
+// mytest-var1!mytest2-var2~ses1-x!ses2-1~vis1-fa~vis2-10
+// means:
+// mytest test: var1 variant
+// mytest2 test: var2 variant
+// ses1 session signal: bton(x) score
+// ses2 session signal: bton(1) score
+// vis1 visitor signal: bton(fa) score
+// vis2 visitor signal: bton(10) score;
+export function parseScoreCookie(cookieValue) {
+    if (!cookieValue)
+        return;
+    const types = cookieValue.split(TYPE_SEP);
+    if (types.length > 3)
+        return;
+    const [abTestData, sessionScores, visitorScores] = types;
+    return {
+        // this is true since we're reading a cookie, which wouldn't exist if consent wasn't given
+        consent: true,
+        sessionScores: decodeCookieType(parseCookieType(sessionScores)),
+        scores: decodeCookieType(parseCookieType(visitorScores)),
+        tests: parseCookieType(abTestData),
+    };
+}
+function parseCookieType(type) {
+    if (!type) {
+        return {};
+    }
+    const pairs = type.split(PAIR_SEP).map((pair) => pair.split(KV_SEP));
+    return pairs.reduce((acc, cur) => {
+        if (cur.length < 2)
+            return acc;
+        // join handles the case when there is a pair separator in the value,
+        // i.e. testname-testid-with-hyphens
+        acc[cur[0]] = cur.slice(1).join('-');
+        return acc;
+    }, {});
+}
+function decodeCookieType(type) {
+    return Object.entries(type).reduce((acc, [key, value]) => {
+        acc[key] = bton(value);
+        return acc;
+    }, {});
+}
+export function serializeCookie(data) {
+    return [
+        serializeCookieType(data.tests),
+        serializeCookieType(encodeCookieType(data.sessionScores)),
+        serializeCookieType(encodeCookieType(data.scores)),
+    ].join(TYPE_SEP);
+}
+function encodeCookieType(type) {
+    return Object.entries(type).reduce((acc, [key, value]) => {
+        acc[key] = ntob(value);
+        return acc;
+    }, {});
+}
+function serializeCookieType(type) {
+    return Object.entries(type)
+        .map((kv) => kv.join(KV_SEP))
+        .join(PAIR_SEP);
+}
+const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
+// binary to string lookup table
+const b2s = alphabet.split('');
+// string to binary lookup table
+// 123 == 'z'.charCodeAt(0) + 1
+const s2b = new Array(123);
+for (let i = 0; i < alphabet.length; i++) {
+    s2b[alphabet.charCodeAt(i)] = i;
+}
+/**
+ * Converts a number to a base64 string of its representation.
+ * Compresses the number if it is to be transferred in a string representation.
+ */
+const ntob = (number) => {
+    if (number < 0)
+        return `-${ntob(-number)}`;
+    let lo = number >>> 0;
+    let hi = (number / 4294967296) >>> 0;
+    let right = '';
+    while (hi > 0) {
+        right = b2s[0x3f & lo] + right;
+        lo >>>= 6;
+        lo |= (0x3f & hi) << 26;
+        hi >>>= 6;
+    }
+    let left = '';
+    do {
+        left = b2s[0x3f & lo] + left;
+        lo >>>= 6;
+    } while (lo > 0);
+    return left + right;
+};
+/**
+ * Converts a base64 string to an equivalent number _represented as a string in base64_.
+ * Decompresses a number from the compressed base64 string.
+ */
+const bton = (base64) => {
+    let number = 0;
+    const sign = base64.charAt(0) === '-' ? 1 : 0;
+    for (let i = sign; i < base64.length; i++) {
+        number = number * 64 + s2b[base64.charCodeAt(i)];
+    }
+    return sign ? -number : number;
+};

package/dist/utils/__tests__/apply.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/utils/__tests__/apply.spec.js

@@ -0,0 +1,358 @@
+import { applyDiff } from '../apply';
+import { ComponentDiffType } from '../diff';
+describe('apply', () => {
+    it('should leave a composition alone if the diff is blank', () => {
+        const result = applyDiff({
+            composition: {
+                _id: 'root',
+                _name: 'root',
+                type: 'root',
+            },
+            diff: [],
+        });
+        expect(result).toEqual({
+            _id: 'root',
+            _name: 'root',
+            type: 'root',
+        });
+    });
+    it('should add a slot component if diff specifies one', () => {
+        const result = applyDiff({
+            composition: {
+                _id: 'root',
+                _name: 'root',
+                type: 'root',
+                slots: {
+                    content: [],
+                },
+            },
+            diff: [
+                {
+                    type: ComponentDiffType.ComponentAdded,
+                    id: 'child',
+                    parentId: 'root',
+                    slot: 'content',
+                    slotIndex: 0,
+                    component: {
+                        type: 'child',
+                        _id: 'child',
+                    },
+                },
+            ],
+        });
+        expect(result).toEqual({
+            _id: 'root',
+            _name: 'root',
+            type: 'root',
+            slots: {
+                content: [
+                    {
+                        _id: 'child',
+                        type: 'child',
+                    },
+                ],
+            },
+        });
+    });
+    it('should remove a slot component if diff specifies one', () => {
+        const result = applyDiff({
+            composition: {
+                _id: 'root',
+                _name: 'root',
+                type: 'root',
+                slots: {
+                    content: [
+                        {
+                            type: 'child1',
+                            _id: 'child',
+                        },
+                        {
+                            type: 'child',
+                            _id: 'child2',
+                        },
+                    ],
+                },
+            },
+            diff: [
+                {
+                    type: ComponentDiffType.ComponentRemoved,
+                    id: 'child',
+                },
+            ],
+        });
+        expect(result).toEqual({
+            _id: 'root',
+            _name: 'root',
+            type: 'root',
+            slots: {
+                content: [
+                    {
+                        type: 'child',
+                        _id: 'child2',
+                    },
+                ],
+            },
+        });
+    });
+    it('should move a slot component if diff specifies one', () => {
+        const result = applyDiff({
+            composition: {
+                _id: 'root',
+                _name: 'root',
+                type: 'root',
+                slots: {
+                    content: [
+                        {
+                            type: 'child',
+                            _id: 'child1',
+                            slots: {
+                                content: [],
+                            },
+                        },
+                        {
+                            type: 'child',
+                            _id: 'child2',
+                        },
+                    ],
+                },
+            },
+            diff: [
+                {
+                    type: ComponentDiffType.ComponentMoved,
+                    id: 'child2',
+                    parentId: 'child1',
+                    slot: 'content',
+                    slotIndex: 0,
+                },
+            ],
+        });
+        expect(result).toEqual({
+            _id: 'root',
+            _name: 'root',
+            type: 'root',
+            slots: {
+                content: [
+                    {
+                        type: 'child',
+                        _id: 'child1',
+                        slots: {
+                            content: [
+                                {
+                                    type: 'child',
+                                    _id: 'child2',
+                                },
+                            ],
+                        },
+                    },
+                ],
+            },
+        });
+    });
+    it('should move a slot component if diff specifies one, even if target does not define slot', () => {
+        const result = applyDiff({
+            composition: {
+                _id: 'root',
+                _name: 'root',
+                type: 'root',
+                slots: {
+                    content: [
+                        {
+                            type: 'child',
+                            _id: 'child1',
+                        },
+                        {
+                            type: 'child',
+                            _id: 'child2',
+                        },
+                    ],
+                },
+            },
+            diff: [
+                {
+                    type: ComponentDiffType.ComponentMoved,
+                    id: 'child2',
+                    parentId: 'child1',
+                    slot: 'content',
+                    slotIndex: 0,
+                },
+            ],
+        });
+        expect(result).toEqual({
+            _id: 'root',
+            _name: 'root',
+            type: 'root',
+            slots: {
+                content: [
+                    {
+                        type: 'child',
+                        _id: 'child1',
+                        slots: {
+                            content: [
+                                {
+                                    type: 'child',
+                                    _id: 'child2',
+                                },
+                            ],
+                        },
+                    },
+                ],
+            },
+        });
+    });
+    it('should change a parameter if diff specifies one', () => {
+        const result = applyDiff({
+            composition: {
+                _id: 'root',
+                _name: 'root',
+                type: 'root',
+                parameters: {
+                    title: {
+                        type: 'text',
+                        value: 'Hello',
+                    },
+                },
+            },
+            diff: [
+                {
+                    type: ComponentDiffType.ParameterChanged,
+                    componentId: 'root',
+                    parameterName: 'title',
+                    value: 'Goodbye',
+                },
+            ],
+        });
+        expect(result).toEqual({
+            _id: 'root',
+            _name: 'root',
+            type: 'root',
+            parameters: {
+                title: {
+                    type: 'text',
+                    value: 'Goodbye',
+                },
+            },
+        });
+    });
+    it('should delete a parameter if diff specifies one', () => {
+        const result = applyDiff({
+            composition: {
+                _id: 'root',
+                _name: 'root',
+                type: 'root',
+                parameters: {
+                    title: {
+                        type: 'text',
+                        value: 'Hello',
+                    },
+                },
+            },
+            diff: [
+                {
+                    type: ComponentDiffType.ParameterRemoved,
+                    componentId: 'root',
+                    parameterName: 'title',
+                },
+            ],
+        });
+        expect(result).toEqual({
+            _id: 'root',
+            _name: 'root',
+            type: 'root',
+            parameters: {},
+        });
+    });
+    it('should handle a component and move in a slot', () => {
+        const result = applyDiff({
+            composition: {
+                _id: 'root',
+                _name: 'root',
+                type: 'root',
+                slots: {
+                    pageContent: [
+                        {
+                            type: 'hero',
+                            _id: '1f352a25-7acb-4893-a11c-f06bd45f27ab',
+                        },
+                        {
+                            type: 'hero',
+                            _id: '93e9fa20-d86e-4543-9ca7-927ffeab6d54',
+                        },
+                    ],
+                },
+            },
+            diff: [
+                {
+                    type: ComponentDiffType.ComponentRemoved,
+                    id: '1f352a25-7acb-4893-a11c-f06bd45f27ab',
+                },
+                {
+                    type: ComponentDiffType.ComponentMoved,
+                    id: '93e9fa20-d86e-4543-9ca7-927ffeab6d54',
+                    slotIndex: 0,
+                    parentId: undefined,
+                    slot: undefined,
+                },
+            ],
+        });
+        expect(result).toEqual({
+            _id: 'root',
+            _name: 'root',
+            type: 'root',
+            slots: {
+                pageContent: [
+                    {
+                        type: 'hero',
+                        _id: '93e9fa20-d86e-4543-9ca7-927ffeab6d54',
+                    },
+                ],
+            },
+        });
+    });
+    it('should put components back into the correct position', () => {
+        const result = applyDiff({
+            composition: {
+                _id: 'root',
+                _name: 'root',
+                type: 'root',
+                slots: {
+                    content: [
+                        {
+                            type: 'child',
+                            _id: 'existing',
+                        },
+                    ],
+                },
+            },
+            diff: [
+                {
+                    type: ComponentDiffType.ComponentAdded,
+                    id: 'child',
+                    parentId: 'root',
+                    slot: 'content',
+                    slotIndex: 0,
+                    component: {
+                        type: 'child',
+                        _id: 'child',
+                    },
+                },
+            ],
+        });
+        expect(result).toEqual({
+            _id: 'root',
+            _name: 'root',
+            type: 'root',
+            slots: {
+                content: [
+                    {
+                        _id: 'child',
+                        type: 'child',
+                    },
+                    {
+                        type: 'child',
+                        _id: 'existing',
+                    },
+                ],
+            },
+        });
+    });
+});

package/dist/utils/__tests__/diff.spec.d.ts

@@ -0,0 +1 @@
+export {};