@webiny/website-builder-sdk 0.0.0-unstable.6f45466a1d → 0.0.0-unstable.7be00a75a9

package/ElementFactory.js

@@ -3,181 +3,142 @@ import { DocumentOperations } from "./documentOperations/index.js";
 import { ComponentManifestToAstConverter } from "./ComponentManifestToAstConverter.js";
 import { ComponentInputTraverser } from "./ComponentInputTraverser.js";
 const defaultStyles = {
-  display: "flex",
-  flexDirection: "column"
-};
-const withDefaultStyles = styles => {
-  return {
-    ...defaultStyles,
-    ...styles
-  };
+    display: "flex",
+    flexDirection: "column"
 };
+const withDefaultStyles = (styles)=>({
+        ...defaultStyles,
+        ...styles
+    });
 const defaultOperations = {
-  addElement: element => {
-    return new DocumentOperations.AddElement(element);
-  },
-  addToParent: (element, index) => {
-    return new DocumentOperations.AddToParent(element, index);
-  },
-  setInputBinding: (elementId, bindingPath, binding) => {
-    return new DocumentOperations.SetGlobalInputBinding(elementId, bindingPath, binding);
-  },
-  setStyleBinding: (elementId, bindingPath, binding) => {
-    return new DocumentOperations.SetGlobalStyleBinding(elementId, bindingPath, binding);
-  }
+    addElement: (element)=>new DocumentOperations.AddElement(element),
+    addToParent: (element, index)=>new DocumentOperations.AddToParent(element, index),
+    setInputBinding: (elementId, bindingPath, binding)=>new DocumentOperations.SetGlobalInputBinding(elementId, bindingPath, binding),
+    setStyleBinding: (elementId, bindingPath, binding)=>new DocumentOperations.SetGlobalStyleBinding(elementId, bindingPath, binding)
 };
-export class ElementFactory {
-  constructor(components) {
-    this.components = components;
-  }
-  createElementFromComponent({
-    componentName,
-    parentId,
-    slot,
-    index,
-    bindings
-  }) {
-    const {
-      element,
-      componentManifest,
-      inputsAst
-    } = this.createElement(componentName, parentId, slot);
-    const documentOps = [defaultOperations.addElement(element), defaultOperations.addToParent(element, index)];
-    documentOps.push(...this.generateOperations({
-      element,
-      inputsAst,
-      bindings: {
-        inputs: bindings?.inputs ?? componentManifest.defaults?.inputs ?? {},
-        styles: withDefaultStyles(bindings?.styles ?? componentManifest.defaults?.styles ?? {}),
-        overrides: bindings?.overrides ?? {}
-      },
-      operations: defaultOperations
-    }));
-    return {
-      element,
-      operations: documentOps
-    };
-  }
-  generateOperations({
-    element,
-    inputsAst,
-    bindings,
-    operations
-  }) {
-    const ops = this.generateOperationsFromBindings({
-      elementId: element.id,
-      inputsAst,
-      bindings,
-      operations,
-      ignoreDefaultValues: false
-    });
-    if (bindings.overrides) {
-      for (const [breakpoint, overrides] of Object.entries(bindings.overrides)) {
-        ops.push(...this.generateOperationsFromBindings({
-          elementId: element.id,
-          inputsAst,
-          bindings: {
-            inputs: overrides.inputs ?? {},
-            styles: overrides.styles ?? {}
-          },
-          operations: {
-            ...operations,
-            setInputBinding: (elementId, bindingPath, binding) => {
-              return new DocumentOperations.SetInputBindingOverride(elementId, bindingPath, binding, breakpoint);
+class ElementFactory {
+    constructor(components){
+        this.components = components;
+    }
+    createElementFromComponent({ componentName, parentId, slot, index, bindings }) {
+        const { element, componentManifest, inputsAst } = this.createElement(componentName, parentId, slot);
+        const documentOps = [
+            defaultOperations.addElement(element),
+            defaultOperations.addToParent(element, index)
+        ];
+        documentOps.push(...this.generateOperations({
+            element,
+            inputsAst,
+            bindings: {
+                inputs: bindings?.inputs ?? componentManifest.defaults?.inputs ?? {},
+                styles: withDefaultStyles(bindings?.styles ?? componentManifest.defaults?.styles ?? {}),
+                overrides: bindings?.overrides ?? {}
             },
-            setStyleBinding: (elementId, bindingPath, binding) => {
-              return new DocumentOperations.SetStyleBindingOverride(elementId, bindingPath, binding, breakpoint);
-            }
-          },
-          ignoreDefaultValues: true
+            operations: defaultOperations
         }));
-      }
+        return {
+            element,
+            operations: documentOps
+        };
     }
-    return ops;
-  }
-  generateOperationsFromBindings({
-    elementId,
-    inputsAst,
-    bindings,
-    operations,
-    ignoreDefaultValues
-  }) {
-    const inputData = bindings.inputs;
-    const traverser = new ComponentInputTraverser(inputsAst);
-    const ops = [];
-    traverser.traverse(inputData, (node, path, value) => {
-      const isCreateElement = value?.action === "CreateElement";
-      const isList = node.list;
-      const isObject = node.type === "object";
-      if (isCreateElement) {
-        const factory = new ElementFactory(this.components);
-        const newElement = factory.createElementFromComponent({
-          componentName: value.params.component,
-          index: isList ? this.extractIndex(path) : 0,
-          slot: path,
-          parentId: elementId,
-          bindings: value.params
+    generateOperations({ element, inputsAst, bindings, operations }) {
+        const ops = this.generateOperationsFromBindings({
+            elementId: element.id,
+            inputsAst,
+            bindings,
+            operations,
+            ignoreDefaultValues: false
         });
-        const newElementId = newElement.element.id;
-        ops.push(...newElement.operations, operations.setInputBinding(elementId, path, {
-          id: generateElementId(),
-          static: node.list ? [newElementId] : newElementId,
-          type: node.type,
-          translatable: node.input.translatable,
-          list: node.list
+        if (bindings.overrides) for (const [breakpoint, overrides] of Object.entries(bindings.overrides))ops.push(...this.generateOperationsFromBindings({
+            elementId: element.id,
+            inputsAst,
+            bindings: {
+                inputs: overrides.inputs ?? {},
+                styles: overrides.styles ?? {}
+            },
+            operations: {
+                ...operations,
+                setInputBinding: (elementId, bindingPath, binding)=>new DocumentOperations.SetInputBindingOverride(elementId, bindingPath, binding, breakpoint),
+                setStyleBinding: (elementId, bindingPath, binding)=>new DocumentOperations.SetStyleBindingOverride(elementId, bindingPath, binding, breakpoint)
+            },
+            ignoreDefaultValues: true
         }));
-      } else if (isObject && isList) {
-        return;
-      } else {
-        ops.push(operations.setInputBinding(elementId, path, {
-          id: generateElementId(),
-          static: ignoreDefaultValues ? undefined : value ?? node.input.defaultValue,
-          type: node.type,
-          list: node.list,
-          translatable: node.input.translatable
+        return ops;
+    }
+    generateOperationsFromBindings({ elementId, inputsAst, bindings, operations, ignoreDefaultValues }) {
+        const inputData = bindings.inputs;
+        const traverser = new ComponentInputTraverser(inputsAst);
+        const ops = [];
+        traverser.traverse(inputData, (node, path, value)=>{
+            const isCreateElement = value?.action === "CreateElement";
+            const isList = node.list;
+            const isObject = "object" === node.type;
+            if (isCreateElement) {
+                const factory = new ElementFactory(this.components);
+                const newElement = factory.createElementFromComponent({
+                    componentName: value.params.component,
+                    index: isList ? void 0 : 0,
+                    slot: path,
+                    parentId: elementId,
+                    bindings: value.params
+                });
+                const newElementId = newElement.element.id;
+                ops.push(...newElement.operations);
+                if (isList) ops.push(operations.setInputBinding(elementId, path, {
+                    id: generateElementId(),
+                    type: node.type,
+                    translatable: node.input.translatable,
+                    list: node.list
+                }));
+                else ops.push(operations.setInputBinding(elementId, path, {
+                    id: generateElementId(),
+                    static: newElementId,
+                    type: node.type,
+                    translatable: node.input.translatable,
+                    list: node.list
+                }));
+            } else {
+                if (isObject && isList) return;
+                ops.push(operations.setInputBinding(elementId, path, {
+                    id: generateElementId(),
+                    static: ignoreDefaultValues ? void 0 : value ?? node.input.defaultValue,
+                    type: node.type,
+                    list: node.list,
+                    translatable: node.input.translatable
+                }));
+            }
+        });
+        for(const key in bindings.styles)ops.push(operations.setStyleBinding(elementId, key, {
+            static: bindings.styles[key]
         }));
-      }
-    });
-
-    // Process styles
-    for (const key in bindings.styles) {
-      ops.push(operations.setStyleBinding(elementId, key, {
-        static: bindings.styles[key]
-      }));
+        return ops;
     }
-    return ops;
-  }
-  getComponentManifest(componentName) {
-    const manifest = this.components[componentName];
-    if (!manifest) {
-      throw new Error(`Component "${componentName}" not registered.`);
+    getComponentManifest(componentName) {
+        const manifest = this.components[componentName];
+        if (!manifest) throw new Error(`Component "${componentName}" not registered.`);
+        return manifest;
+    }
+    createElement(componentName, parentId, slot) {
+        const element = {
+            type: "Webiny/Element",
+            id: generateElementId(),
+            parent: {
+                id: parentId,
+                slot
+            },
+            component: {
+                name: componentName
+            }
+        };
+        const componentManifest = this.getComponentManifest(componentName);
+        const inputsAst = ComponentManifestToAstConverter.convert(componentManifest.inputs ?? []);
+        return {
+            element,
+            inputsAst,
+            componentManifest
+        };
     }
-    return manifest;
-  }
-  extractIndex(path) {
-    const match = path.match(/\/(\d+)\//);
-    return match ? parseInt(match[1], 10) : 0;
-  }
-  createElement(componentName, parentId, slot) {
-    const element = {
-      type: "Webiny/Element",
-      id: generateElementId(),
-      parent: {
-        id: parentId,
-        slot
-      },
-      component: {
-        name: componentName
-      }
-    };
-    const componentManifest = this.getComponentManifest(componentName);
-    const inputsAst = ComponentManifestToAstConverter.convert(componentManifest.inputs ?? []);
-    return {
-      element,
-      inputsAst,
-      componentManifest
-    };
-  }
 }
+export { ElementFactory };
 
 //# sourceMappingURL=ElementFactory.js.map

package/ElementFactory.js.map

@@ -1 +1 @@
-{"version":3,"names":["generateElementId","DocumentOperations","ComponentManifestToAstConverter","ComponentInputTraverser","defaultStyles","display","flexDirection","withDefaultStyles","styles","defaultOperations","addElement","element","AddElement","addToParent","index","AddToParent","setInputBinding","elementId","bindingPath","binding","SetGlobalInputBinding","setStyleBinding","SetGlobalStyleBinding","ElementFactory","constructor","components","createElementFromComponent","componentName","parentId","slot","bindings","componentManifest","inputsAst","createElement","documentOps","push","generateOperations","inputs","defaults","overrides","operations","ops","generateOperationsFromBindings","id","ignoreDefaultValues","breakpoint","Object","entries","SetInputBindingOverride","SetStyleBindingOverride","inputData","traverser","traverse","node","path","value","isCreateElement","action","isList","list","isObject","type","factory","newElement","params","component","extractIndex","newElementId","static","translatable","input","undefined","defaultValue","key","getComponentManifest","manifest","Error","match","parseInt","parent","name","convert"],"sources":["ElementFactory.ts"],"sourcesContent":["import { generateElementId } from \"./generateElementId.js\";\nimport type {\n    DocumentElement,\n    ComponentManifest,\n    InputValueBinding,\n    StyleValueBinding,\n    CssProperties\n} from \"~/types.js\";\nimport { type IDocumentOperation, DocumentOperations } from \"./documentOperations/index.js\";\nimport {\n    ComponentManifestToAstConverter,\n    type InputAstNode\n} from \"./ComponentManifestToAstConverter.js\";\nimport { ComponentInputTraverser } from \"./ComponentInputTraverser.js\";\n\nconst defaultStyles = {\n    display: \"flex\",\n    flexDirection: \"column\"\n};\n\nconst withDefaultStyles = (styles: CssProperties) => {\n    return { ...defaultStyles, ...styles };\n};\n\nexport interface ElementFactoryCreateElementParams {\n    componentName: string;\n    parentId: string;\n    slot: string;\n    index: number;\n    bindings?: {\n        inputs?: Record<string, any>;\n        styles?: Record<string, any>;\n        overrides?: {\n            [breakpoint: string]: {\n                inputs?: Record<string, any>;\n                styles?: Record<string, any>;\n            };\n        };\n    };\n}\n\ninterface GenerateOperationsParams {\n    element: DocumentElement;\n    inputsAst: InputAstNode[];\n    operations: ElementFactoryOperations;\n    bindings: {\n        inputs: Record<string, any>;\n        styles: Record<string, any>;\n        overrides: {\n            [breakpoint: string]: {\n                inputs?: Record<string, any>;\n                styles?: Record<string, any>;\n            };\n        };\n    };\n}\n\ninterface GenerateOperationsFromBindingsParams {\n    elementId: string;\n    inputsAst: InputAstNode[];\n    bindings: {\n        inputs: Record<string, any>;\n        styles: Record<string, any>;\n    };\n    operations: ElementFactoryOperations;\n    ignoreDefaultValues: boolean;\n}\n\ntype ElementFactoryOperations = {\n    addElement: (element: DocumentElement) => IDocumentOperation;\n    addToParent: (element: DocumentElement, index: number) => IDocumentOperation;\n    setInputBinding: (\n        elementId: string,\n        bindingPath: string,\n        binding: InputValueBinding\n    ) => IDocumentOperation;\n    setStyleBinding: (\n        elementId: string,\n        bindingPath: string,\n        binding: StyleValueBinding\n    ) => IDocumentOperation;\n};\n\nconst defaultOperations: ElementFactoryOperations = {\n    addElement: (element: DocumentElement) => {\n        return new DocumentOperations.AddElement(element);\n    },\n    addToParent: (element: DocumentElement, index: number) => {\n        return new DocumentOperations.AddToParent(element, index);\n    },\n    setInputBinding: (elementId, bindingPath, binding) => {\n        return new DocumentOperations.SetGlobalInputBinding(elementId, bindingPath, binding);\n    },\n    setStyleBinding: (elementId, bindingPath, binding) => {\n        return new DocumentOperations.SetGlobalStyleBinding(elementId, bindingPath, binding);\n    }\n};\n\nexport class ElementFactory {\n    constructor(private components: Record<string, ComponentManifest>) {}\n\n    public createElementFromComponent({\n        componentName,\n        parentId,\n        slot,\n        index,\n        bindings\n    }: ElementFactoryCreateElementParams) {\n        const { element, componentManifest, inputsAst } = this.createElement(\n            componentName,\n            parentId,\n            slot\n        );\n\n        const documentOps: IDocumentOperation[] = [\n            defaultOperations.addElement(element),\n            defaultOperations.addToParent(element, index)\n        ];\n\n        documentOps.push(\n            ...this.generateOperations({\n                element,\n                inputsAst,\n                bindings: {\n                    inputs: bindings?.inputs ?? componentManifest.defaults?.inputs ?? {},\n                    styles: withDefaultStyles(\n                        bindings?.styles ?? componentManifest.defaults?.styles ?? {}\n                    ),\n                    overrides: bindings?.overrides ?? {}\n                },\n                operations: defaultOperations\n            })\n        );\n\n        return { element, operations: documentOps };\n    }\n\n    public generateOperations({\n        element,\n        inputsAst,\n        bindings,\n        operations\n    }: GenerateOperationsParams): IDocumentOperation[] {\n        const ops = this.generateOperationsFromBindings({\n            elementId: element.id,\n            inputsAst,\n            bindings,\n            operations,\n            ignoreDefaultValues: false\n        });\n\n        if (bindings.overrides) {\n            for (const [breakpoint, overrides] of Object.entries(bindings.overrides)) {\n                ops.push(\n                    ...this.generateOperationsFromBindings({\n                        elementId: element.id,\n                        inputsAst,\n                        bindings: {\n                            inputs: overrides.inputs ?? {},\n                            styles: overrides.styles ?? {}\n                        },\n                        operations: {\n                            ...operations,\n                            setInputBinding: (elementId, bindingPath, binding) => {\n                                return new DocumentOperations.SetInputBindingOverride(\n                                    elementId,\n                                    bindingPath,\n                                    binding,\n                                    breakpoint\n                                );\n                            },\n                            setStyleBinding: (elementId, bindingPath, binding) => {\n                                return new DocumentOperations.SetStyleBindingOverride(\n                                    elementId,\n                                    bindingPath,\n                                    binding,\n                                    breakpoint\n                                );\n                            }\n                        },\n                        ignoreDefaultValues: true\n                    })\n                );\n            }\n        }\n\n        return ops;\n    }\n\n    private generateOperationsFromBindings({\n        elementId,\n        inputsAst,\n        bindings,\n        operations,\n        ignoreDefaultValues\n    }: GenerateOperationsFromBindingsParams): IDocumentOperation[] {\n        const inputData = bindings.inputs;\n        const traverser = new ComponentInputTraverser(inputsAst);\n\n        const ops: IDocumentOperation[] = [];\n\n        traverser.traverse(inputData, (node, path, value) => {\n            const isCreateElement = value?.action === \"CreateElement\";\n            const isList = node.list;\n            const isObject = node.type === \"object\";\n\n            if (isCreateElement) {\n                const factory = new ElementFactory(this.components);\n                const newElement = factory.createElementFromComponent({\n                    componentName: value.params.component,\n                    index: isList ? this.extractIndex(path) : 0,\n                    slot: path,\n                    parentId: elementId,\n                    bindings: value.params\n                });\n\n                const newElementId = newElement.element.id;\n\n                ops.push(\n                    ...newElement.operations,\n                    operations.setInputBinding(elementId, path, {\n                        id: generateElementId(),\n                        static: node.list ? [newElementId] : newElementId,\n                        type: node.type,\n                        translatable: node.input.translatable,\n                        list: node.list\n                    })\n                );\n            } else if (isObject && isList) {\n                return;\n            } else {\n                ops.push(\n                    operations.setInputBinding(elementId, path, {\n                        id: generateElementId(),\n                        static: ignoreDefaultValues\n                            ? undefined\n                            : (value ?? node.input.defaultValue),\n                        type: node.type,\n                        list: node.list,\n                        translatable: node.input.translatable\n                    })\n                );\n            }\n        });\n\n        // Process styles\n        for (const key in bindings.styles) {\n            ops.push(\n                operations.setStyleBinding(elementId, key, {\n                    static: bindings.styles[key]\n                })\n            );\n        }\n\n        return ops;\n    }\n\n    private getComponentManifest(componentName: string): ComponentManifest {\n        const manifest = this.components[componentName];\n        if (!manifest) {\n            throw new Error(`Component \"${componentName}\" not registered.`);\n        }\n\n        return manifest;\n    }\n\n    private extractIndex(path: string): number {\n        const match = path.match(/\\/(\\d+)\\//);\n        return match ? parseInt(match[1], 10) : 0;\n    }\n\n    private createElement(componentName: string, parentId: string, slot: string) {\n        const element: DocumentElement = {\n            type: \"Webiny/Element\",\n            id: generateElementId(),\n            parent: { id: parentId, slot },\n            component: { name: componentName }\n        };\n\n        const componentManifest = this.getComponentManifest(componentName);\n        const inputsAst = ComponentManifestToAstConverter.convert(componentManifest.inputs ?? []);\n\n        return {\n            element,\n            inputsAst,\n            componentManifest\n        };\n    }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ElementFactory.js","sources":["../src/ElementFactory.ts"],"sourcesContent":["import { generateElementId } from \"./generateElementId.js\";\nimport type {\n    DocumentElement,\n    ComponentManifest,\n    InputValueBinding,\n    StyleValueBinding,\n    CssProperties\n} from \"~/types.js\";\nimport { type IDocumentOperation, DocumentOperations } from \"./documentOperations/index.js\";\nimport {\n    ComponentManifestToAstConverter,\n    type InputAstNode\n} from \"./ComponentManifestToAstConverter.js\";\nimport { ComponentInputTraverser } from \"./ComponentInputTraverser.js\";\n\nconst defaultStyles = {\n    display: \"flex\",\n    flexDirection: \"column\"\n};\n\nconst withDefaultStyles = (styles: CssProperties) => {\n    return { ...defaultStyles, ...styles };\n};\n\nexport interface ElementFactoryCreateElementParams {\n    componentName: string;\n    parentId: string;\n    slot: string;\n    index?: number;\n    bindings?: {\n        inputs?: Record<string, any>;\n        styles?: Record<string, any>;\n        overrides?: {\n            [breakpoint: string]: {\n                inputs?: Record<string, any>;\n                styles?: Record<string, any>;\n            };\n        };\n    };\n}\n\ninterface GenerateOperationsParams {\n    element: DocumentElement;\n    inputsAst: InputAstNode[];\n    operations: ElementFactoryOperations;\n    bindings: {\n        inputs: Record<string, any>;\n        styles: Record<string, any>;\n        overrides: {\n            [breakpoint: string]: {\n                inputs?: Record<string, any>;\n                styles?: Record<string, any>;\n            };\n        };\n    };\n}\n\ninterface GenerateOperationsFromBindingsParams {\n    elementId: string;\n    inputsAst: InputAstNode[];\n    bindings: {\n        inputs: Record<string, any>;\n        styles: Record<string, any>;\n    };\n    operations: ElementFactoryOperations;\n    ignoreDefaultValues: boolean;\n}\n\ntype ElementFactoryOperations = {\n    addElement: (element: DocumentElement) => IDocumentOperation;\n    addToParent: (element: DocumentElement, index?: number) => IDocumentOperation;\n    setInputBinding: (\n        elementId: string,\n        bindingPath: string,\n        binding: InputValueBinding\n    ) => IDocumentOperation;\n    setStyleBinding: (\n        elementId: string,\n        bindingPath: string,\n        binding: StyleValueBinding\n    ) => IDocumentOperation;\n};\n\nconst defaultOperations: ElementFactoryOperations = {\n    addElement: (element: DocumentElement) => {\n        return new DocumentOperations.AddElement(element);\n    },\n    addToParent: (element: DocumentElement, index?: number) => {\n        return new DocumentOperations.AddToParent(element, index);\n    },\n    setInputBinding: (elementId, bindingPath, binding) => {\n        return new DocumentOperations.SetGlobalInputBinding(elementId, bindingPath, binding);\n    },\n    setStyleBinding: (elementId, bindingPath, binding) => {\n        return new DocumentOperations.SetGlobalStyleBinding(elementId, bindingPath, binding);\n    }\n};\n\nexport class ElementFactory {\n    constructor(private components: Record<string, ComponentManifest>) {}\n\n    public createElementFromComponent({\n        componentName,\n        parentId,\n        slot,\n        index,\n        bindings\n    }: ElementFactoryCreateElementParams) {\n        const { element, componentManifest, inputsAst } = this.createElement(\n            componentName,\n            parentId,\n            slot\n        );\n\n        const documentOps: IDocumentOperation[] = [\n            defaultOperations.addElement(element),\n            defaultOperations.addToParent(element, index)\n        ];\n\n        documentOps.push(\n            ...this.generateOperations({\n                element,\n                inputsAst,\n                bindings: {\n                    inputs: bindings?.inputs ?? componentManifest.defaults?.inputs ?? {},\n                    styles: withDefaultStyles(\n                        bindings?.styles ?? componentManifest.defaults?.styles ?? {}\n                    ),\n                    overrides: bindings?.overrides ?? {}\n                },\n                operations: defaultOperations\n            })\n        );\n\n        return { element, operations: documentOps };\n    }\n\n    public generateOperations({\n        element,\n        inputsAst,\n        bindings,\n        operations\n    }: GenerateOperationsParams): IDocumentOperation[] {\n        const ops = this.generateOperationsFromBindings({\n            elementId: element.id,\n            inputsAst,\n            bindings,\n            operations,\n            ignoreDefaultValues: false\n        });\n\n        if (bindings.overrides) {\n            for (const [breakpoint, overrides] of Object.entries(bindings.overrides)) {\n                ops.push(\n                    ...this.generateOperationsFromBindings({\n                        elementId: element.id,\n                        inputsAst,\n                        bindings: {\n                            inputs: overrides.inputs ?? {},\n                            styles: overrides.styles ?? {}\n                        },\n                        operations: {\n                            ...operations,\n                            setInputBinding: (elementId, bindingPath, binding) => {\n                                return new DocumentOperations.SetInputBindingOverride(\n                                    elementId,\n                                    bindingPath,\n                                    binding,\n                                    breakpoint\n                                );\n                            },\n                            setStyleBinding: (elementId, bindingPath, binding) => {\n                                return new DocumentOperations.SetStyleBindingOverride(\n                                    elementId,\n                                    bindingPath,\n                                    binding,\n                                    breakpoint\n                                );\n                            }\n                        },\n                        ignoreDefaultValues: true\n                    })\n                );\n            }\n        }\n\n        return ops;\n    }\n\n    private generateOperationsFromBindings({\n        elementId,\n        inputsAst,\n        bindings,\n        operations,\n        ignoreDefaultValues\n    }: GenerateOperationsFromBindingsParams): IDocumentOperation[] {\n        const inputData = bindings.inputs;\n        const traverser = new ComponentInputTraverser(inputsAst);\n\n        const ops: IDocumentOperation[] = [];\n\n        traverser.traverse(inputData, (node, path, value) => {\n            const isCreateElement = value?.action === \"CreateElement\";\n            const isList = node.list;\n            const isObject = node.type === \"object\";\n\n            if (isCreateElement) {\n                const factory = new ElementFactory(this.components);\n                const newElement = factory.createElementFromComponent({\n                    componentName: value.params.component,\n                    // undefined index = append to end of the slot array\n                    index: isList ? undefined : 0,\n                    slot: path,\n                    parentId: elementId,\n                    bindings: value.params\n                });\n\n                const newElementId = newElement.element.id;\n\n                ops.push(...newElement.operations);\n\n                if (isList) {\n                    // For list slots, AddToParent already manages the static array.\n                    // We only set metadata here.\n                    ops.push(\n                        operations.setInputBinding(elementId, path, {\n                            id: generateElementId(),\n                            type: node.type,\n                            translatable: node.input.translatable,\n                            list: node.list\n                        })\n                    );\n                } else {\n                    ops.push(\n                        operations.setInputBinding(elementId, path, {\n                            id: generateElementId(),\n                            static: newElementId,\n                            type: node.type,\n                            translatable: node.input.translatable,\n                            list: node.list\n                        })\n                    );\n                }\n            } else if (isObject && isList) {\n                return;\n            } else {\n                ops.push(\n                    operations.setInputBinding(elementId, path, {\n                        id: generateElementId(),\n                        static: ignoreDefaultValues\n                            ? undefined\n                            : (value ?? node.input.defaultValue),\n                        type: node.type,\n                        list: node.list,\n                        translatable: node.input.translatable\n                    })\n                );\n            }\n        });\n\n        // Process styles\n        for (const key in bindings.styles) {\n            ops.push(\n                operations.setStyleBinding(elementId, key, {\n                    static: bindings.styles[key]\n                })\n            );\n        }\n\n        return ops;\n    }\n\n    private getComponentManifest(componentName: string): ComponentManifest {\n        const manifest = this.components[componentName];\n        if (!manifest) {\n            throw new Error(`Component \"${componentName}\" not registered.`);\n        }\n\n        return manifest;\n    }\n\n    private createElement(componentName: string, parentId: string, slot: string) {\n        const element: DocumentElement = {\n            type: \"Webiny/Element\",\n            id: generateElementId(),\n            parent: { id: parentId, slot },\n            component: { name: componentName }\n        };\n\n        const componentManifest = this.getComponentManifest(componentName);\n        const inputsAst = ComponentManifestToAstConverter.convert(componentManifest.inputs ?? []);\n\n        return {\n            element,\n            inputsAst,\n            componentManifest\n        };\n    }\n}\n"],"names":["defaultStyles","withDefaultStyles","styles","defaultOperations","element","DocumentOperations","index","elementId","bindingPath","binding","ElementFactory","components","componentName","parentId","slot","bindings","componentManifest","inputsAst","documentOps","operations","ops","breakpoint","overrides","Object","ignoreDefaultValues","inputData","traverser","ComponentInputTraverser","node","path","value","isCreateElement","isList","isObject","factory","newElement","undefined","newElementId","generateElementId","key","manifest","Error","ComponentManifestToAstConverter"],"mappings":";;;;AAeA,MAAMA,gBAAgB;IAClB,SAAS;IACT,eAAe;AACnB;AAEA,MAAMC,oBAAoB,CAACC,SAChB;QAAE,GAAGF,aAAa;QAAE,GAAGE,MAAM;IAAC;AA8DzC,MAAMC,oBAA8C;IAChD,YAAY,CAACC,UACF,IAAIC,mBAAmB,UAAU,CAACD;IAE7C,aAAa,CAACA,SAA0BE,QAC7B,IAAID,mBAAmB,WAAW,CAACD,SAASE;IAEvD,iBAAiB,CAACC,WAAWC,aAAaC,UAC/B,IAAIJ,mBAAmB,qBAAqB,CAACE,WAAWC,aAAaC;IAEhF,iBAAiB,CAACF,WAAWC,aAAaC,UAC/B,IAAIJ,mBAAmB,qBAAqB,CAACE,WAAWC,aAAaC;AAEpF;AAEO,MAAMC;IACT,YAAoBC,UAA6C,CAAE;aAA/CA,UAAU,GAAVA;IAAgD;IAE7D,2BAA2B,EAC9BC,aAAa,EACbC,QAAQ,EACRC,IAAI,EACJR,KAAK,EACLS,QAAQ,EACwB,EAAE;QAClC,MAAM,EAAEX,OAAO,EAAEY,iBAAiB,EAAEC,SAAS,EAAE,GAAG,IAAI,CAAC,aAAa,CAChEL,eACAC,UACAC;QAGJ,MAAMI,cAAoC;YACtCf,kBAAkB,UAAU,CAACC;YAC7BD,kBAAkB,WAAW,CAACC,SAASE;SAC1C;QAEDY,YAAY,IAAI,IACT,IAAI,CAAC,kBAAkB,CAAC;YACvBd;YACAa;YACA,UAAU;gBACN,QAAQF,UAAU,UAAUC,kBAAkB,QAAQ,EAAE,UAAU,CAAC;gBACnE,QAAQf,kBACJc,UAAU,UAAUC,kBAAkB,QAAQ,EAAE,UAAU,CAAC;gBAE/D,WAAWD,UAAU,aAAa,CAAC;YACvC;YACA,YAAYZ;QAChB;QAGJ,OAAO;YAAEC;YAAS,YAAYc;QAAY;IAC9C;IAEO,mBAAmB,EACtBd,OAAO,EACPa,SAAS,EACTF,QAAQ,EACRI,UAAU,EACa,EAAwB;QAC/C,MAAMC,MAAM,IAAI,CAAC,8BAA8B,CAAC;YAC5C,WAAWhB,QAAQ,EAAE;YACrBa;YACAF;YACAI;YACA,qBAAqB;QACzB;QAEA,IAAIJ,SAAS,SAAS,EAClB,KAAK,MAAM,CAACM,YAAYC,UAAU,IAAIC,OAAO,OAAO,CAACR,SAAS,SAAS,EACnEK,IAAI,IAAI,IACD,IAAI,CAAC,8BAA8B,CAAC;YACnC,WAAWhB,QAAQ,EAAE;YACrBa;YACA,UAAU;gBACN,QAAQK,UAAU,MAAM,IAAI,CAAC;gBAC7B,QAAQA,UAAU,MAAM,IAAI,CAAC;YACjC;YACA,YAAY;gBACR,GAAGH,UAAU;gBACb,iBAAiB,CAACZ,WAAWC,aAAaC,UAC/B,IAAIJ,mBAAmB,uBAAuB,CACjDE,WACAC,aACAC,SACAY;gBAGR,iBAAiB,CAACd,WAAWC,aAAaC,UAC/B,IAAIJ,mBAAmB,uBAAuB,CACjDE,WACAC,aACAC,SACAY;YAGZ;YACA,qBAAqB;QACzB;QAKZ,OAAOD;IACX;IAEQ,+BAA+B,EACnCb,SAAS,EACTU,SAAS,EACTF,QAAQ,EACRI,UAAU,EACVK,mBAAmB,EACgB,EAAwB;QAC3D,MAAMC,YAAYV,SAAS,MAAM;QACjC,MAAMW,YAAY,IAAIC,wBAAwBV;QAE9C,MAAMG,MAA4B,EAAE;QAEpCM,UAAU,QAAQ,CAACD,WAAW,CAACG,MAAMC,MAAMC;YACvC,MAAMC,kBAAkBD,OAAO,WAAW;YAC1C,MAAME,SAASJ,KAAK,IAAI;YACxB,MAAMK,WAAWL,AAAc,aAAdA,KAAK,IAAI;YAE1B,IAAIG,iBAAiB;gBACjB,MAAMG,UAAU,IAAIxB,eAAe,IAAI,CAAC,UAAU;gBAClD,MAAMyB,aAAaD,QAAQ,0BAA0B,CAAC;oBAClD,eAAeJ,MAAM,MAAM,CAAC,SAAS;oBAErC,OAAOE,SAASI,SAAY;oBAC5B,MAAMP;oBACN,UAAUtB;oBACV,UAAUuB,MAAM,MAAM;gBAC1B;gBAEA,MAAMO,eAAeF,WAAW,OAAO,CAAC,EAAE;gBAE1Cf,IAAI,IAAI,IAAIe,WAAW,UAAU;gBAEjC,IAAIH,QAGAZ,IAAI,IAAI,CACJD,WAAW,eAAe,CAACZ,WAAWsB,MAAM;oBACxC,IAAIS;oBACJ,MAAMV,KAAK,IAAI;oBACf,cAAcA,KAAK,KAAK,CAAC,YAAY;oBACrC,MAAMA,KAAK,IAAI;gBACnB;qBAGJR,IAAI,IAAI,CACJD,WAAW,eAAe,CAACZ,WAAWsB,MAAM;oBACxC,IAAIS;oBACJ,QAAQD;oBACR,MAAMT,KAAK,IAAI;oBACf,cAAcA,KAAK,KAAK,CAAC,YAAY;oBACrC,MAAMA,KAAK,IAAI;gBACnB;YAGZ;gBAAO,IAAIK,YAAYD,QACnB;gBAEAZ,IAAI,IAAI,CACJD,WAAW,eAAe,CAACZ,WAAWsB,MAAM;oBACxC,IAAIS;oBACJ,QAAQd,sBACFY,SACCN,SAASF,KAAK,KAAK,CAAC,YAAY;oBACvC,MAAMA,KAAK,IAAI;oBACf,MAAMA,KAAK,IAAI;oBACf,cAAcA,KAAK,KAAK,CAAC,YAAY;gBACzC;;QAGZ;QAGA,IAAK,MAAMW,OAAOxB,SAAS,MAAM,CAC7BK,IAAI,IAAI,CACJD,WAAW,eAAe,CAACZ,WAAWgC,KAAK;YACvC,QAAQxB,SAAS,MAAM,CAACwB,IAAI;QAChC;QAIR,OAAOnB;IACX;IAEQ,qBAAqBR,aAAqB,EAAqB;QACnE,MAAM4B,WAAW,IAAI,CAAC,UAAU,CAAC5B,cAAc;QAC/C,IAAI,CAAC4B,UACD,MAAM,IAAIC,MAAM,CAAC,WAAW,EAAE7B,cAAc,iBAAiB,CAAC;QAGlE,OAAO4B;IACX;IAEQ,cAAc5B,aAAqB,EAAEC,QAAgB,EAAEC,IAAY,EAAE;QACzE,MAAMV,UAA2B;YAC7B,MAAM;YACN,IAAIkC;YACJ,QAAQ;gBAAE,IAAIzB;gBAAUC;YAAK;YAC7B,WAAW;gBAAE,MAAMF;YAAc;QACrC;QAEA,MAAMI,oBAAoB,IAAI,CAAC,oBAAoB,CAACJ;QACpD,MAAMK,YAAYyB,gCAAgC,OAAO,CAAC1B,kBAAkB,MAAM,IAAI,EAAE;QAExF,OAAO;YACHZ;YACAa;YACAD;QACJ;IACJ;AACJ"}

package/ElementFactory.test.d.ts

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

package/ElementFactory.test.js

@@ -0,0 +1,251 @@
+import { describe, expect, it } from "vitest";
+import { ElementFactory } from "./ElementFactory.js";
+import { DocumentOperations } from "./documentOperations/index.js";
+const components = {
+    "Webiny/Root": {
+        name: "Webiny/Root",
+        label: "Main Content",
+        tags: [],
+        inputs: [
+            {
+                type: "slot",
+                list: true,
+                renderer: "Webiny/Slot",
+                defaultValue: [],
+                name: "children"
+            }
+        ]
+    },
+    "FunnelBuilder/Funnel": {
+        name: "FunnelBuilder/Funnel",
+        label: "Funnel",
+        tags: [],
+        inputs: [
+            {
+                type: "object",
+                renderer: "Webiny/Object",
+                name: "fields",
+                list: true,
+                fields: [],
+                defaultValue: []
+            },
+            {
+                type: "number",
+                renderer: "Webiny/Number",
+                name: "activeStep",
+                label: "Active Step",
+                defaultValue: 0
+            },
+            {
+                type: "slot",
+                list: true,
+                renderer: "Webiny/Slot",
+                defaultValue: [],
+                name: "steps"
+            },
+            {
+                type: "object",
+                renderer: "FunnelBuilder/ConditionRulesRenderer",
+                name: "conditionRules",
+                list: true,
+                fields: []
+            }
+        ]
+    },
+    "FunnelBuilder/Step": {
+        name: "FunnelBuilder/Step",
+        label: "Funnel Step",
+        tags: [],
+        inputs: [
+            {
+                type: "text",
+                renderer: "Webiny/Input",
+                name: "label",
+                label: "Label"
+            },
+            {
+                type: "slot",
+                list: true,
+                renderer: "Webiny/Slot",
+                defaultValue: [],
+                name: "children"
+            }
+        ]
+    }
+};
+function serializeOp(op) {
+    if (op instanceof DocumentOperations.AddElement) return {
+        type: "AddElement",
+        element: op["element"]
+    };
+    if (op instanceof DocumentOperations.AddToParent) return {
+        type: "AddToParent",
+        element: op["element"],
+        index: op["index"]
+    };
+    if (op instanceof DocumentOperations.SetGlobalInputBinding) return {
+        type: "SetGlobalInputBinding",
+        elementId: op["elementId"],
+        bindingPath: op["bindingPath"],
+        binding: op["binding"]
+    };
+    if (op instanceof DocumentOperations.SetGlobalStyleBinding) return {
+        type: "SetGlobalStyleBinding",
+        elementId: op["elementId"],
+        bindingPath: op["bindingPath"],
+        binding: op["binding"]
+    };
+    return op;
+}
+describe("ElementFactory", ()=>{
+    it("should produce correct operation sequence for a Funnel with two Steps", ()=>{
+        const factory = new ElementFactory(components);
+        const result = factory.createElementFromComponent({
+            componentName: "FunnelBuilder/Funnel",
+            parentId: "root",
+            slot: "children",
+            index: 0,
+            bindings: {
+                inputs: {
+                    fields: [],
+                    activeStep: 0,
+                    steps: [
+                        {
+                            action: "CreateElement",
+                            params: {
+                                component: "FunnelBuilder/Step",
+                                inputs: {
+                                    label: "Step 1",
+                                    children: []
+                                }
+                            }
+                        },
+                        {
+                            action: "CreateElement",
+                            params: {
+                                component: "FunnelBuilder/Step",
+                                inputs: {
+                                    label: "Final Step",
+                                    children: []
+                                }
+                            }
+                        }
+                    ]
+                }
+            }
+        });
+        const ops = result.operations.map(serializeOp);
+        const funnelId = result.element.id;
+        expect(ops[0].type).toBe("AddElement");
+        expect(ops[0].element.component.name).toBe("FunnelBuilder/Funnel");
+        expect(ops[1].type).toBe("AddToParent");
+        expect(ops[1].element.id).toBe(funnelId);
+        expect(ops[1].index).toBe(0);
+        expect(ops[2].type).toBe("SetGlobalInputBinding");
+        expect(ops[2].elementId).toBe(funnelId);
+        expect(ops[2].bindingPath).toBe("activeStep");
+        expect(ops[2].binding.static).toBe(0);
+        const step1Id = ops[3].element.id;
+        expect(ops[3].type).toBe("AddElement");
+        expect(ops[3].element.component.name).toBe("FunnelBuilder/Step");
+        expect(ops[3].element.parent).toEqual({
+            id: funnelId,
+            slot: "steps"
+        });
+        expect(ops[4].type).toBe("AddToParent");
+        expect(ops[4].element.id).toBe(step1Id);
+        expect(ops[4].index).toBeUndefined();
+        expect(ops[5].bindingPath).toBe("label");
+        expect(ops[5].binding.static).toBe("Step 1");
+        expect(ops[6].bindingPath).toBe("children");
+        expect(ops[6].binding.static).toEqual([]);
+        expect(ops[7].bindingPath).toBe("display");
+        expect(ops[8].bindingPath).toBe("flexDirection");
+        expect(ops[9].type).toBe("SetGlobalInputBinding");
+        expect(ops[9].elementId).toBe(funnelId);
+        expect(ops[9].bindingPath).toBe("steps");
+        expect(ops[9].binding.static).toBeUndefined();
+        expect(ops[9].binding.type).toBe("slot");
+        expect(ops[9].binding.list).toBe(true);
+        expect(ops[10].element.component.name).toBe("FunnelBuilder/Step");
+        expect(ops[11].index).toBeUndefined();
+        expect(ops[12].binding.static).toBe("Final Step");
+        expect(ops[13].binding.static).toEqual([]);
+        expect(ops[16].type).toBe("SetGlobalInputBinding");
+        expect(ops[16].elementId).toBe(funnelId);
+        expect(ops[16].bindingPath).toBe("steps");
+        expect(ops[16].binding.static).toBeUndefined();
+        expect(ops[17].bindingPath).toBe("display");
+        expect(ops[18].bindingPath).toBe("flexDirection");
+        expect(ops).toHaveLength(19);
+    });
+    it("should produce correct document after applying all operations", ()=>{
+        const factory = new ElementFactory(components);
+        const result = factory.createElementFromComponent({
+            componentName: "FunnelBuilder/Funnel",
+            parentId: "root",
+            slot: "children",
+            index: 0,
+            bindings: {
+                inputs: {
+                    fields: [],
+                    activeStep: 0,
+                    steps: [
+                        {
+                            action: "CreateElement",
+                            params: {
+                                component: "FunnelBuilder/Step",
+                                inputs: {
+                                    label: "Step 1",
+                                    children: []
+                                }
+                            }
+                        },
+                        {
+                            action: "CreateElement",
+                            params: {
+                                component: "FunnelBuilder/Step",
+                                inputs: {
+                                    label: "Final Step",
+                                    children: []
+                                }
+                            }
+                        }
+                    ]
+                }
+            }
+        });
+        const document = {
+            state: {},
+            elements: {
+                root: {
+                    type: "Webiny/Element",
+                    id: "root",
+                    component: {
+                        name: "Webiny/Root"
+                    }
+                }
+            },
+            bindings: {}
+        };
+        for (const op of result.operations)op.apply(document);
+        const funnelId = result.element.id;
+        const stepElements = Object.values(document.elements).filter((el)=>"FunnelBuilder/Step" === el.component.name);
+        expect(stepElements).toHaveLength(2);
+        const labels = stepElements.map((el)=>document.bindings[el.id]?.inputs?.label?.static);
+        expect(labels).toContain("Step 1");
+        expect(labels).toContain("Final Step");
+        const stepsBinding = document.bindings[funnelId]?.inputs?.steps;
+        expect(stepsBinding?.list).toBe(true);
+        expect(stepsBinding?.type).toBe("slot");
+        expect(stepsBinding?.static).toHaveLength(2);
+        const step1 = stepElements.find((el)=>document.bindings[el.id]?.inputs?.label?.static === "Step 1");
+        const step2 = stepElements.find((el)=>document.bindings[el.id]?.inputs?.label?.static === "Final Step");
+        expect(stepsBinding?.static).toEqual([
+            step1.id,
+            step2.id
+        ]);
+    });
+});
+
+//# sourceMappingURL=ElementFactory.test.js.map