@webiny/website-builder-react 6.0.0-alpha.0

package/components/LiveElementRenderer.js

@@ -0,0 +1,78 @@
+"use client";
+
+import React, { useCallback, useEffect, useState } from "react";
+import { observer } from "mobx-react-lite";
+import { contentSdk } from "@webiny/app-website-builder/sdk";
+import { ElementSlot } from "./ElementSlot";
+import { useViewport } from "./useViewportInfo";
+import { useBindingsForElement } from "./useBindingsForElement";
+import { useDocumentState } from "./useDocumentState";
+export const LiveElementRenderer = observer(({
+  element
+}) => {
+  const viewport = useViewport();
+
+  // 1. Start breakpoint as "desktop" on both server and initial client render.
+  const [breakpoint, setBreakpoint] = useState("desktop");
+
+  // 2. Update breakpoint on the client after mount, using real viewport value.
+  useEffect(() => {
+    if (viewport.breakpoint && viewport.breakpoint !== breakpoint) {
+      setBreakpoint(viewport.breakpoint);
+    }
+  }, [viewport.breakpoint, breakpoint]);
+
+  // Bindings for current breakpoint
+  const elementBindings = useBindingsForElement(element.id, breakpoint); // pass breakpoint explicitly if possible
+  const state = useDocumentState();
+  const onResolved = useCallback((value, input) => {
+    if (input.type === "slot") {
+      return /*#__PURE__*/React.createElement(ElementSlot, {
+        key: element.id,
+        parentId: element.id,
+        slot: input.name,
+        elements: input.list ? value : [value]
+      });
+    }
+    return value;
+  }, [element.id]);
+  if (!element || !element.component) {
+    return null;
+  }
+  const instances = contentSdk.resolveElement({
+    element,
+    state,
+    elementBindings,
+    onResolved
+  });
+  if (!instances) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, instances.map((resolvedElement, index) => {
+    const {
+      component: Component,
+      inputs,
+      styles,
+      manifest
+    } = resolvedElement;
+    const props = {
+      inputs,
+      styles,
+      element,
+      breakpoint: viewport.breakpoint
+    };
+    const autoApplyStyles = manifest.autoApplyStyles !== false;
+    const userElement = /*#__PURE__*/React.createElement(Component, Object.assign({
+      key: element.id
+    }, props));
+    if (!autoApplyStyles) {
+      return userElement;
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      key: index,
+      style: styles
+    }, userElement);
+  }));
+});
+
+//# sourceMappingURL=LiveElementRenderer.js.map

package/components/LiveElementRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","useEffect","useState","observer","contentSdk","ElementSlot","useViewport","useBindingsForElement","useDocumentState","LiveElementRenderer","element","viewport","breakpoint","setBreakpoint","elementBindings","id","state","onResolved","value","input","type","createElement","key","parentId","slot","name","elements","list","component","instances","resolveElement","Fragment","map","resolvedElement","index","Component","inputs","styles","manifest","props","autoApplyStyles","userElement","Object","assign","style"],"sources":["LiveElementRenderer.tsx"],"sourcesContent":["\"use client\";\nimport React, { useCallback, useEffect, useState } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport type {\n    DocumentElement,\n    DocumentElementBindings,\n    OnResolved\n} from \"@webiny/app-website-builder/sdk\";\nimport { contentSdk } from \"@webiny/app-website-builder/sdk\";\nimport { ElementSlot } from \"./ElementSlot\";\nimport { useViewport } from \"./useViewportInfo\";\nimport { useBindingsForElement } from \"./useBindingsForElement\";\nimport { useDocumentState } from \"./useDocumentState\";\n\ninterface LiveElementRendererProps {\n    element: DocumentElement;\n    bindings?: DocumentElementBindings;\n}\n\nexport const LiveElementRenderer = observer(({ element }: LiveElementRendererProps) => {\n    const viewport = useViewport();\n\n    // 1. Start breakpoint as \"desktop\" on both server and initial client render.\n    const [breakpoint, setBreakpoint] = useState<\"desktop\" | string>(\"desktop\");\n\n    // 2. Update breakpoint on the client after mount, using real viewport value.\n    useEffect(() => {\n        if (viewport.breakpoint && viewport.breakpoint !== breakpoint) {\n            setBreakpoint(viewport.breakpoint);\n        }\n    }, [viewport.breakpoint, breakpoint]);\n\n    // Bindings for current breakpoint\n    const elementBindings = useBindingsForElement(element.id, breakpoint); // pass breakpoint explicitly if possible\n    const state = useDocumentState();\n\n    const onResolved = useCallback(\n        ((value, input) => {\n            if (input.type === \"slot\") {\n                return (\n                    <ElementSlot\n                        key={element.id}\n                        parentId={element.id}\n                        slot={input.name}\n                        elements={input.list ? value : [value]}\n                    />\n                );\n            }\n            return value;\n        }) as OnResolved,\n        [element.id]\n    );\n\n    if (!element || !element.component) {\n        return null;\n    }\n\n    const instances = contentSdk.resolveElement({\n        element,\n        state,\n        elementBindings,\n        onResolved\n    });\n\n    if (!instances) {\n        return null;\n    }\n\n    return (\n        <>\n            {instances.map((resolvedElement, index) => {\n                const { component: Component, inputs, styles, manifest } = resolvedElement;\n                const props = { inputs, styles, element, breakpoint: viewport.breakpoint };\n                const autoApplyStyles = manifest.autoApplyStyles !== false;\n\n                const userElement = <Component key={element.id} {...props} />;\n\n                if (!autoApplyStyles) {\n                    return userElement;\n                }\n\n                return (\n                    <div key={index} style={styles}>\n                        {userElement}\n                    </div>\n                );\n            })}\n        </>\n    );\n});\n"],"mappings":"AAAA,YAAY;;AACZ,OAAOA,KAAK,IAAIC,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAC/D,SAASC,QAAQ,QAAQ,iBAAiB;AAM1C,SAASC,UAAU,QAAQ,iCAAiC;AAC5D,SAASC,WAAW;AACpB,SAASC,WAAW;AACpB,SAASC,qBAAqB;AAC9B,SAASC,gBAAgB;AAOzB,OAAO,MAAMC,mBAAmB,GAAGN,QAAQ,CAAC,CAAC;EAAEO;AAAkC,CAAC,KAAK;EACnF,MAAMC,QAAQ,GAAGL,WAAW,CAAC,CAAC;;EAE9B;EACA,MAAM,CAACM,UAAU,EAAEC,aAAa,CAAC,GAAGX,QAAQ,CAAqB,SAAS,CAAC;;EAE3E;EACAD,SAAS,CAAC,MAAM;IACZ,IAAIU,QAAQ,CAACC,UAAU,IAAID,QAAQ,CAACC,UAAU,KAAKA,UAAU,EAAE;MAC3DC,aAAa,CAACF,QAAQ,CAACC,UAAU,CAAC;IACtC;EACJ,CAAC,EAAE,CAACD,QAAQ,CAACC,UAAU,EAAEA,UAAU,CAAC,CAAC;;EAErC;EACA,MAAME,eAAe,GAAGP,qBAAqB,CAACG,OAAO,CAACK,EAAE,EAAEH,UAAU,CAAC,CAAC,CAAC;EACvE,MAAMI,KAAK,GAAGR,gBAAgB,CAAC,CAAC;EAEhC,MAAMS,UAAU,GAAGjB,WAAW,CACzB,CAACkB,KAAK,EAAEC,KAAK,KAAK;IACf,IAAIA,KAAK,CAACC,IAAI,KAAK,MAAM,EAAE;MACvB,oBACIrB,KAAA,CAAAsB,aAAA,CAAChB,WAAW;QACRiB,GAAG,EAAEZ,OAAO,CAACK,EAAG;QAChBQ,QAAQ,EAAEb,OAAO,CAACK,EAAG;QACrBS,IAAI,EAAEL,KAAK,CAACM,IAAK;QACjBC,QAAQ,EAAEP,KAAK,CAACQ,IAAI,GAAGT,KAAK,GAAG,CAACA,KAAK;MAAE,CAC1C,CAAC;IAEV;IACA,OAAOA,KAAK;EAChB,CAAC,EACD,CAACR,OAAO,CAACK,EAAE,CACf,CAAC;EAED,IAAI,CAACL,OAAO,IAAI,CAACA,OAAO,CAACkB,SAAS,EAAE;IAChC,OAAO,IAAI;EACf;EAEA,MAAMC,SAAS,GAAGzB,UAAU,CAAC0B,cAAc,CAAC;IACxCpB,OAAO;IACPM,KAAK;IACLF,eAAe;IACfG;EACJ,CAAC,CAAC;EAEF,IAAI,CAACY,SAAS,EAAE;IACZ,OAAO,IAAI;EACf;EAEA,oBACI9B,KAAA,CAAAsB,aAAA,CAAAtB,KAAA,CAAAgC,QAAA,QACKF,SAAS,CAACG,GAAG,CAAC,CAACC,eAAe,EAAEC,KAAK,KAAK;IACvC,MAAM;MAAEN,SAAS,EAAEO,SAAS;MAAEC,MAAM;MAAEC,MAAM;MAAEC;IAAS,CAAC,GAAGL,eAAe;IAC1E,MAAMM,KAAK,GAAG;MAAEH,MAAM;MAAEC,MAAM;MAAE3B,OAAO;MAAEE,UAAU,EAAED,QAAQ,CAACC;IAAW,CAAC;IAC1E,MAAM4B,eAAe,GAAGF,QAAQ,CAACE,eAAe,KAAK,KAAK;IAE1D,MAAMC,WAAW,gBAAG1C,KAAA,CAAAsB,aAAA,CAACc,SAAS,EAAAO,MAAA,CAAAC,MAAA;MAACrB,GAAG,EAAEZ,OAAO,CAACK;IAAG,GAAKwB,KAAK,CAAG,CAAC;IAE7D,IAAI,CAACC,eAAe,EAAE;MAClB,OAAOC,WAAW;IACtB;IAEA,oBACI1C,KAAA,CAAAsB,aAAA;MAAKC,GAAG,EAAEY,KAAM;MAACU,KAAK,EAAEP;IAAO,GAC1BI,WACA,CAAC;EAEd,CAAC,CACH,CAAC;AAEX,CAAC,CAAC","ignoreList":[]}

package/components/LiveElementSlot.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { ElementSlotProps } from "./ElementSlot";
+export declare const LiveElementSlot: ({ elements }: Pick<ElementSlotProps, "elements">) => React.JSX.Element;

package/components/LiveElementSlot.js

@@ -0,0 +1,21 @@
+"use client";
+
+import React from "react";
+import { ElementRenderer } from "./ElementRenderer";
+import { ElementSlotDepthProvider, useElementSlotDepth } from "./ElementSlotDepthProvider";
+import { ElementIndexProvider } from "./ElementIndexProvider";
+export const LiveElementSlot = ({
+  elements = []
+}) => {
+  const depth = useElementSlotDepth();
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ElementSlotDepthProvider, {
+    depth: depth + 1
+  }, elements.map((id, index) => /*#__PURE__*/React.createElement(ElementIndexProvider, {
+    key: id,
+    index: index
+  }, /*#__PURE__*/React.createElement(ElementRenderer, {
+    id: id
+  })))));
+};
+
+//# sourceMappingURL=LiveElementSlot.js.map

package/components/LiveElementSlot.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","ElementRenderer","ElementSlotDepthProvider","useElementSlotDepth","ElementIndexProvider","LiveElementSlot","elements","depth","createElement","Fragment","map","id","index","key"],"sources":["LiveElementSlot.tsx"],"sourcesContent":["\"use client\";\nimport React from \"react\";\nimport { ElementRenderer } from \"./ElementRenderer\";\nimport { ElementSlotProps } from \"./ElementSlot\";\nimport { ElementSlotDepthProvider, useElementSlotDepth } from \"./ElementSlotDepthProvider\";\nimport { ElementIndexProvider } from \"./ElementIndexProvider\";\n\nexport const LiveElementSlot = ({ elements = [] }: Pick<ElementSlotProps, \"elements\">) => {\n    const depth = useElementSlotDepth();\n    return (\n        <>\n            <ElementSlotDepthProvider depth={depth + 1}>\n                {elements.map((id, index) => (\n                    <ElementIndexProvider key={id} index={index}>\n                        <ElementRenderer id={id} />\n                    </ElementIndexProvider>\n                ))}\n            </ElementSlotDepthProvider>\n        </>\n    );\n};\n"],"mappings":"AAAA,YAAY;;AACZ,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,eAAe;AAExB,SAASC,wBAAwB,EAAEC,mBAAmB;AACtD,SAASC,oBAAoB;AAE7B,OAAO,MAAMC,eAAe,GAAGA,CAAC;EAAEC,QAAQ,GAAG;AAAuC,CAAC,KAAK;EACtF,MAAMC,KAAK,GAAGJ,mBAAmB,CAAC,CAAC;EACnC,oBACIH,KAAA,CAAAQ,aAAA,CAAAR,KAAA,CAAAS,QAAA,qBACIT,KAAA,CAAAQ,aAAA,CAACN,wBAAwB;IAACK,KAAK,EAAEA,KAAK,GAAG;EAAE,GACtCD,QAAQ,CAACI,GAAG,CAAC,CAACC,EAAE,EAAEC,KAAK,kBACpBZ,KAAA,CAAAQ,aAAA,CAACJ,oBAAoB;IAACS,GAAG,EAAEF,EAAG;IAACC,KAAK,EAAEA;EAAM,gBACxCZ,KAAA,CAAAQ,aAAA,CAACP,eAAe;IAACU,EAAE,EAAEA;EAAG,CAAE,CACR,CACzB,CACqB,CAC5B,CAAC;AAEX,CAAC","ignoreList":[]}

package/components/PreviewElementSlot.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+interface ElementSlotProps {
+    parentId: string;
+    slot: string;
+    elements: string[];
+}
+export declare const PreviewElementSlot: ({ parentId, slot, elements }: ElementSlotProps) => React.JSX.Element;
+export {};

package/components/PreviewElementSlot.js

@@ -0,0 +1,30 @@
+"use client";
+
+import React from "react";
+import { LiveElementSlot } from "./LiveElementSlot";
+import { useElementSlotDepth } from "./ElementSlotDepthProvider";
+export const PreviewElementSlot = ({
+  parentId,
+  slot,
+  elements = []
+}) => {
+  const depth = useElementSlotDepth();
+  if (!elements.length) {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        height: 100,
+        width: "100% !important"
+      },
+      "data-role": "element-slot",
+      "data-parent-id": parentId,
+      "data-parent-slot": slot,
+      "data-depth": depth,
+      "data-empty": true
+    });
+  }
+  return /*#__PURE__*/React.createElement(LiveElementSlot, {
+    elements: elements
+  });
+};
+
+//# sourceMappingURL=PreviewElementSlot.js.map

package/components/PreviewElementSlot.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","LiveElementSlot","useElementSlotDepth","PreviewElementSlot","parentId","slot","elements","depth","length","createElement","style","height","width"],"sources":["PreviewElementSlot.tsx"],"sourcesContent":["\"use client\";\nimport React from \"react\";\nimport { LiveElementSlot } from \"./LiveElementSlot\";\nimport { useElementSlotDepth } from \"./ElementSlotDepthProvider\";\n\ninterface ElementSlotProps {\n    // Element that contains this slot.\n    parentId: string;\n    // Path to the array of elements within the element's data structure.\n    slot: string;\n    // IDs of the elements to render.\n    elements: string[];\n}\n\nexport const PreviewElementSlot = ({ parentId, slot, elements = [] }: ElementSlotProps) => {\n    const depth = useElementSlotDepth();\n\n    if (!elements.length) {\n        return (\n            <div\n                style={{ height: 100, width: \"100% !important\" }}\n                data-role={\"element-slot\"}\n                data-parent-id={parentId}\n                data-parent-slot={slot}\n                data-depth={depth}\n                data-empty={true}\n            />\n        );\n    }\n\n    return <LiveElementSlot elements={elements} />;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,eAAe;AACxB,SAASC,mBAAmB;AAW5B,OAAO,MAAMC,kBAAkB,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,IAAI;EAAEC,QAAQ,GAAG;AAAqB,CAAC,KAAK;EACvF,MAAMC,KAAK,GAAGL,mBAAmB,CAAC,CAAC;EAEnC,IAAI,CAACI,QAAQ,CAACE,MAAM,EAAE;IAClB,oBACIR,KAAA,CAAAS,aAAA;MACIC,KAAK,EAAE;QAAEC,MAAM,EAAE,GAAG;QAAEC,KAAK,EAAE;MAAkB,CAAE;MACjD,aAAW,cAAe;MAC1B,kBAAgBR,QAAS;MACzB,oBAAkBC,IAAK;MACvB,cAAYE,KAAM;MAClB,cAAY;IAAK,CACpB,CAAC;EAEV;EAEA,oBAAOP,KAAA,CAAAS,aAAA,CAACR,eAAe;IAACK,QAAQ,EAAEA;EAAS,CAAE,CAAC;AAClD,CAAC","ignoreList":[]}

package/components/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./DocumentRenderer.js";
+export * from "./DocumentFragment.js";
+export * from "./ElementSlot.js";
+export * from "./DocumentStoreProvider.js";

package/components/index.js

@@ -0,0 +1,6 @@
+export * from "./DocumentRenderer.js";
+export * from "./DocumentFragment.js";
+export * from "./ElementSlot.js";
+export * from "./DocumentStoreProvider.js";
+
+//# sourceMappingURL=index.js.map

package/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./DocumentRenderer.js\";\nexport * from \"./DocumentFragment.js\";\nexport * from \"./ElementSlot.js\";\nexport * from \"./DocumentStoreProvider.js\";\n"],"mappings":"AAAA;AACA;AACA;AACA","ignoreList":[]}