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

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

@@ -0,0 +1,394 @@
+import { ComponentDiffType, diff, } from '../diff';
+describe('diff', () => {
+    it('should report removed event when slot component is removed', () => {
+        const existingComposition = {
+            _id: 'root',
+            _name: 'root',
+            type: 'root',
+            slots: {
+                content: [
+                    {
+                        _id: 'child',
+                        type: 'child',
+                    },
+                    {
+                        _id: 'child2',
+                        type: 'child',
+                    },
+                ],
+            },
+        };
+        const composition = {
+            _id: 'root',
+            _name: 'root',
+            type: 'root',
+            slots: {
+                content: [
+                    {
+                        _id: 'child2',
+                        type: 'child',
+                    },
+                ],
+            },
+        };
+        const [result] = diff(existingComposition, composition);
+        expect(result).toEqual({
+            type: ComponentDiffType.ComponentRemoved,
+            id: 'child',
+        });
+    });
+    it('should report added event when slot component is added', () => {
+        const existingComposition = {
+            _id: 'root',
+            _name: 'root',
+            type: 'root',
+            slots: {
+                content: [],
+            },
+        };
+        const composition = {
+            _id: 'root',
+            _name: 'root',
+            type: 'root',
+            slots: {
+                content: [
+                    {
+                        _id: 'child',
+                        type: 'child',
+                    },
+                ],
+            },
+        };
+        const [result] = diff(existingComposition, composition);
+        expect(result).toEqual({
+            type: ComponentDiffType.ComponentAdded,
+            parentId: 'root',
+            slot: 'content',
+            slotIndex: 0,
+            id: 'child',
+            component: {
+                _id: 'child',
+                type: 'child',
+            },
+        });
+    });
+    it('should report when existing component has moved within the same slot', () => {
+        const existingComposition = {
+            _id: 'root',
+            _name: 'root',
+            type: 'root',
+            slots: {
+                content: [
+                    {
+                        _id: 'child2',
+                        type: 'child',
+                    },
+                    {
+                        _id: 'child1',
+                        type: 'child',
+                    },
+                    {
+                        _id: 'child3',
+                        type: 'child',
+                    },
+                ],
+            },
+        };
+        const composition = {
+            _id: 'root',
+            _name: 'root',
+            type: 'root',
+            slots: {
+                content: [
+                    {
+                        _id: 'child1',
+                        type: 'child',
+                    },
+                    {
+                        _id: 'child2',
+                        type: 'child',
+                    },
+                    {
+                        _id: 'child3',
+                        type: 'child',
+                    },
+                ],
+            },
+        };
+        const [firstResult, secondResult] = diff(existingComposition, composition);
+        expect(firstResult).toEqual({
+            type: ComponentDiffType.ComponentMoved,
+            id: 'child1',
+            parentId: undefined,
+            slot: undefined,
+            slotIndex: 0,
+        });
+        expect(secondResult).toEqual({
+            type: ComponentDiffType.ComponentMoved,
+            id: 'child2',
+            parentId: undefined,
+            slot: undefined,
+            slotIndex: 1,
+        });
+    });
+    it('should report when existing component has a new parent', () => {
+        const existingComposition = {
+            _id: 'root',
+            _name: 'root',
+            type: 'root',
+            slots: {
+                content: [
+                    {
+                        _id: 'child2',
+                        type: 'child',
+                    },
+                    {
+                        _id: 'child1',
+                        type: 'child',
+                    },
+                    {
+                        _id: 'child3',
+                        type: 'child',
+                    },
+                ],
+            },
+        };
+        const composition = {
+            _id: 'root',
+            _name: 'root',
+            type: 'root',
+            slots: {
+                content: [
+                    {
+                        _id: 'child1',
+                        type: 'child',
+                        slots: {
+                            cool: [
+                                {
+                                    _id: 'child2',
+                                    type: 'child',
+                                },
+                            ],
+                        },
+                    },
+                    {
+                        _id: 'child3',
+                        type: 'child',
+                    },
+                ],
+            },
+        };
+        const [firstResult] = diff(existingComposition, composition);
+        expect(firstResult).toEqual({
+            type: ComponentDiffType.ComponentMoved,
+            id: 'child2',
+            parentId: 'child1',
+            slot: 'cool',
+            slotIndex: undefined,
+        });
+    });
+    it('should report when a parameter has changed', () => {
+        const existingComposition = {
+            _id: 'root',
+            _name: 'root',
+            type: 'root',
+            parameters: {
+                title: {
+                    type: 'text',
+                    value: 'Hello',
+                },
+            },
+        };
+        const composition = {
+            _id: 'root',
+            _name: 'root',
+            type: 'root',
+            parameters: {
+                title: {
+                    type: 'text',
+                    value: 'Hello to you',
+                },
+            },
+        };
+        const [result] = diff(existingComposition, composition);
+        expect(result).toEqual({
+            type: ComponentDiffType.ParameterChanged,
+            componentId: 'root',
+            parameterName: 'title',
+            value: 'Hello to you',
+        });
+    });
+    it('should report when a parameter has been added', () => {
+        const existingComposition = {
+            _id: 'root',
+            _name: 'root',
+            type: 'root',
+        };
+        const composition = {
+            _id: 'root',
+            _name: 'root',
+            type: 'root',
+            parameters: {
+                title: {
+                    type: 'text',
+                    value: 'Hello to you',
+                },
+            },
+        };
+        const [result] = diff(existingComposition, composition);
+        expect(result).toEqual({
+            type: ComponentDiffType.ParameterChanged,
+            componentId: 'root',
+            parameterName: 'title',
+            value: 'Hello to you',
+        });
+    });
+    it('should report when a parameter has been removed', () => {
+        const existingComposition = {
+            _id: 'root',
+            _name: 'root',
+            type: 'root',
+            parameters: {
+                title: {
+                    type: 'text',
+                    value: 'Hello to you',
+                },
+            },
+        };
+        const composition = {
+            _id: 'root',
+            _name: 'root',
+            type: 'root',
+        };
+        const [result] = diff(existingComposition, composition);
+        expect(result).toEqual({
+            componentId: 'root',
+            parameterName: 'title',
+            type: ComponentDiffType.ParameterRemoved,
+        });
+    });
+    it('should only report a move when it matters', () => {
+        const existingComposition = {
+            _id: 'root',
+            _name: 'root',
+            type: 'root',
+            slots: {
+                content: [
+                    {
+                        _id: 'child1',
+                        type: 'child',
+                    },
+                    {
+                        _id: 'child2',
+                        type: 'child',
+                    },
+                    {
+                        _id: 'child3',
+                        type: 'child',
+                    },
+                ],
+                other: [],
+            },
+        };
+        const composition = {
+            _id: 'root',
+            _name: 'root',
+            type: 'root',
+            slots: {
+                content: [
+                    {
+                        _id: 'child1',
+                        type: 'child',
+                    },
+                    {
+                        _id: 'child3',
+                        type: 'child',
+                    },
+                ],
+                other: [
+                    {
+                        _id: 'child2',
+                        type: 'child',
+                    },
+                ],
+            },
+        };
+        const [result, ...rest] = diff(existingComposition, composition);
+        expect(result).toEqual({
+            type: ComponentDiffType.ComponentMoved,
+            id: 'child2',
+            parentId: undefined,
+            slot: 'other',
+            slotIndex: 0,
+        });
+        expect(rest.length).toBe(0);
+    });
+    it('should not nest slots in a component add diff entry', () => {
+        const existingComposition = {
+            _id: 'root',
+            _name: 'root',
+            type: 'root',
+            slots: {
+                content: [],
+            },
+        };
+        const composition = {
+            _id: 'root',
+            _name: 'root',
+            type: 'root',
+            slots: {
+                content: [
+                    {
+                        _id: 'p13n',
+                        type: 'p13n',
+                        parameters: {
+                            name: {
+                                type: 'text',
+                                value: 'Hero',
+                            },
+                        },
+                        slots: {
+                            pz: [
+                                {
+                                    _id: 'hero',
+                                    type: 'hero',
+                                },
+                            ],
+                        },
+                    },
+                ],
+            },
+        };
+        const result = diff(existingComposition, composition);
+        expect(result).toEqual([
+            {
+                type: ComponentDiffType.ComponentAdded,
+                id: 'p13n',
+                parentId: 'root',
+                slot: 'content',
+                slotIndex: 0,
+                component: {
+                    _id: 'p13n',
+                    type: 'p13n',
+                    parameters: {
+                        name: {
+                            type: 'text',
+                            value: 'Hero',
+                        },
+                    },
+                },
+            },
+            {
+                type: ComponentDiffType.ComponentAdded,
+                id: 'hero',
+                parentId: 'p13n',
+                slot: 'pz',
+                slotIndex: 0,
+                component: {
+                    _id: 'hero',
+                    type: 'hero',
+                },
+            },
+        ]);
+    });
+});

package/dist/utils/apply.d.ts

@@ -0,0 +1,10 @@
+import { RootComponentInstance } from '@uniformdev/canvas';
+
+import { ComponentDiff } from './diff';
+export declare const applyDiff: ({
+  composition,
+  diff,
+}: {
+  composition: RootComponentInstance;
+  diff: ComponentDiff[];
+}) => RootComponentInstance;

package/dist/utils/apply.js

@@ -0,0 +1,124 @@
+import { getAllComponents, getSlotComponents } from './comp';
+import { ComponentDiffType } from './diff';
+export const applyDiff = ({ composition, diff, }) => {
+    const existingComponents = getAllComponents(composition);
+    const movedComponents = [];
+    diff.forEach((item) => {
+        var _a, _b, _c;
+        if (item.type === ComponentDiffType.ComponentRemoved) {
+            // remove item from existing components
+            delete existingComponents[item.id];
+        }
+        else if (item.type === ComponentDiffType.ComponentAdded) {
+            existingComponents[item.id] = item;
+            movedComponents.push(item.id);
+        }
+        else if (item.type === ComponentDiffType.ComponentMoved) {
+            const component = existingComponents[item.id];
+            if (component) {
+                if (item.parentId) {
+                    component.parentId = item.parentId;
+                }
+                if (item.slot) {
+                    component.slot = item.slot;
+                }
+                if (typeof item.slotIndex === 'number') {
+                    component.slotIndex = item.slotIndex;
+                }
+                movedComponents.push(item.id);
+            }
+        }
+        else if (item.type === ComponentDiffType.ParameterChanged) {
+            existingComponents[item.componentId].component.parameters = {
+                ...existingComponents[item.componentId].component.parameters,
+                [item.parameterName]: {
+                    ...(((_a = existingComponents[item.componentId].component.parameters) === null || _a === void 0 ? void 0 : _a[item.parameterName]) || {
+                        type: 'text',
+                    }),
+                    value: item.value,
+                },
+            };
+        }
+        else if (item.type === ComponentDiffType.ParameterRemoved) {
+            if ((_b = existingComponents[item.componentId].component.parameters) === null || _b === void 0 ? void 0 : _b[item.parameterName]) {
+                (_c = existingComponents[item.componentId].component.parameters) === null || _c === void 0 ? true : delete _c[item.parameterName];
+            }
+        }
+    });
+    // moving components will insert conflicting ids, so we need to do a little
+    // conflict resolution
+    movedComponents.forEach((movedComponentId) => {
+        const movedComponent = existingComponents[movedComponentId];
+        const slotComponents = getSlotComponents({
+            slot: movedComponent.slot,
+            components: existingComponents,
+            parentId: movedComponent.parentId,
+        });
+        for (let i = 0; i < slotComponents.length; i++) {
+            const currentComponent = slotComponents[i];
+            const nextComponent = slotComponents[i + 1];
+            const currentIsMoved = movedComponents.indexOf(currentComponent.id) > -1;
+            if (currentComponent.slotIndex === (nextComponent === null || nextComponent === void 0 ? void 0 : nextComponent.slotIndex) && !currentIsMoved) {
+                slotComponents[i] = nextComponent;
+                slotComponents[i + 1] = currentComponent;
+            }
+        }
+        for (let i = 0; i < slotComponents.length; i++) {
+            const c = slotComponents[i];
+            existingComponents[c.id].slotIndex = i;
+        }
+    });
+    const processedRoot = processNode({
+        id: composition._id,
+        components: existingComponents,
+        source: composition,
+    });
+    const { slots, ...rest } = composition;
+    const root = {
+        ...rest,
+        ...processedRoot,
+    };
+    return root;
+};
+const processNode = ({ id, components, source, }) => {
+    const componentReference = components[id];
+    if (!componentReference) {
+        return undefined;
+    }
+    const { component } = componentReference;
+    const { slots, ...rest } = component;
+    const instance = {
+        ...rest,
+    };
+    const slotNames = Object.keys(slots || {});
+    Object.keys(components).forEach((cid) => {
+        if (components[cid].slot &&
+            components[cid].parentId === id &&
+            !slotNames.includes(components[cid].slot)) {
+            slotNames.push(components[cid].slot);
+        }
+    });
+    slotNames.forEach((slotName) => {
+        const slotComponents = getSlotComponents({
+            slot: slotName,
+            components,
+            parentId: id,
+        });
+        const processedSlotComponents = [];
+        slotComponents.forEach((slotComponent) => {
+            const processedSlotComponent = processNode({
+                id: slotComponent.id,
+                components,
+                source,
+            });
+            if (processedSlotComponent) {
+                processedSlotComponents.push(processedSlotComponent);
+            }
+        });
+        if (processedSlotComponents.length || (slots && slots[slotName])) {
+            instance.slots = instance.slots || {};
+            instance.slots[slotName] = processedSlotComponents;
+        }
+    });
+    return instance;
+};

package/dist/utils/comp.d.ts

@@ -0,0 +1,25 @@
+import { ComponentInstance, RootComponentInstance } from '@uniformdev/canvas';
+export type ComponentReference = {
+  parentId: string | undefined;
+  slot: string | undefined;
+  slotIndex: number | undefined;
+  component: ComponentInstance;
+};
+export declare const getAllComponents: (
+  composition: RootComponentInstance
+) => Record<string, ComponentReference>;
+export declare const getComponent: (
+  composition: RootComponentInstance,
+  id: string
+) => ComponentInstance | undefined;
+export declare const getSlotComponents: ({
+  components,
+  slot,
+  parentId,
+}: {
+  components: Record<string, ComponentReference>;
+  slot: string | undefined;
+  parentId: string | undefined;
+}) => (ComponentReference & {
+  id: string;
+})[];

package/dist/utils/comp.js

@@ -0,0 +1,65 @@
+import { walkNodeTree } from '@uniformdev/canvas';
+export const getAllComponents = (composition) => {
+    const ids = {};
+    walkNodeTree(composition, ({ type, actions, node, ancestorsAndSelf }) => {
+        if (type !== 'component') {
+            // don't want blocks here
+            actions.stopProcessingDescendants();
+            return;
+        }
+        if (node._id) {
+            const [self, parent] = ancestorsAndSelf;
+            if (self.type === 'block') {
+                // just to make TS happy, we already know this is true due to the preceding type-prop check
+                return;
+            }
+            const slotIndex = self.type === 'root' ? undefined : self.parentSlotIndex;
+            const slot = self.type === 'root' ? undefined : self.parentSlot;
+            ids[node._id] = {
+                parentId: parent === null || parent === void 0 ? void 0 : parent.node._id,
+                slot,
+                slotIndex,
+                component: node,
+            };
+        }
+    });
+    return ids;
+};
+export const getComponent = (composition, id) => {
+    let result;
+    walkNodeTree(composition, ({ type, node, actions }) => {
+        // note: does not work on blocks because it didn't before - so leaving that for back compat
+        // no technical reason I know of why we can't let it find blocks by ID
+        if (type !== 'component') {
+            actions.stopProcessingDescendants();
+            return;
+        }
+        if (node._id === id) {
+            result = node;
+            actions.stopProcessingDescendants();
+        }
+    });
+    return result;
+};
+export const getSlotComponents = ({ components, slot, parentId, }) => {
+    const slotComponents = [];
+    Object.keys(components).forEach((cid) => {
+        if (components[cid].parentId === parentId && components[cid].slot === slot) {
+            slotComponents.push({
+                ...components[cid],
+                id: cid,
+            });
+        }
+    });
+    // sort by slot index
+    slotComponents.sort((a, b) => {
+        if (a.slotIndex === b.slotIndex) {
+            return 0;
+        }
+        if (typeof a.slotIndex === 'number' && typeof b.slotIndex === 'number') {
+            return a.slotIndex - b.slotIndex;
+        }
+        return 0;
+    });
+    return slotComponents;
+};

package/dist/utils/diff.d.ts

@@ -0,0 +1,58 @@
+import { ComponentInstance, RootComponentInstance } from '@uniformdev/canvas';
+
+import { ComponentReference } from './comp';
+export type ComponentDiff =
+  | ComponentRemovedDiff
+  | ComponentAddedDiff
+  | ParameterChangedDiff
+  | ParameterRemovedDiff
+  | ComponentMovedDiff;
+export declare enum ComponentDiffType {
+  ComponentRemoved = 'cr',
+  ComponentAdded = 'ca',
+  ComponentMoved = 'cm',
+  ParameterChanged = 'pc',
+  ParameterRemoved = 'pr',
+}
+export type ComponentRemovedDiff = {
+  type: ComponentDiffType.ComponentRemoved;
+  id: string;
+};
+export type ComponentAddedDiff = ComponentReference & {
+  type: ComponentDiffType.ComponentAdded;
+  id: string;
+  component: ComponentInstance;
+};
+export type ComponentMovedDiff = {
+  type: ComponentDiffType.ComponentMoved;
+  id: string;
+  parentId: string | undefined;
+  slot: string | undefined;
+  slotIndex: number | undefined;
+};
+export type ParameterChangedDiff = {
+  type: ComponentDiffType.ParameterChanged;
+  componentId: string;
+  parameterName: string;
+  value: any;
+};
+export type ParameterRemovedDiff = {
+  type: ComponentDiffType.ParameterRemoved;
+  componentId: string;
+  parameterName: string;
+};
+export declare const diff: (
+  existingComposition: RootComponentInstance,
+  composition: RootComponentInstance
+) => ComponentDiff[];
+export declare const isSlotTheSame: ({
+  existingComposition,
+  components,
+  slot,
+  parentId,
+}: {
+  existingComposition: Record<string, ComponentReference>;
+  components: Record<string, ComponentReference>;
+  slot: string | undefined;
+  parentId: string | undefined;
+}) => boolean;