@creopse/react 0.0.12 → 0.0.14

package/dist/index.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
-const index = require("./index-hI__ihu3.cjs");
+const content = require("./content-WeAhwlM_.cjs");
 require("@inertiajs/react");
 const reactDom = require("react-dom");
 function _interopNamespaceDefault(e) {
@@ -424,7 +424,7 @@ const AsyncImg = ({
 };
 const Image = (props) => {
   const { src, alt = "", width, height, title, loading, style, size = "original", sync = false } = props;
-  const { getImage } = index.useHelper();
+  const { getImage } = content.useHelper();
   const filteredProps = {
     alt,
     width,
@@ -454,9 +454,9 @@ function addUniqueItem(arr, item) {
     arr.push(item);
 }
 function removeItem(arr, item) {
-  const index2 = arr.indexOf(item);
-  if (index2 > -1)
-    arr.splice(index2, 1);
+  const index = arr.indexOf(item);
+  if (index > -1)
+    arr.splice(index, 1);
 }
 const clamp = (min, max, v) => {
   if (v > max)
@@ -1535,8 +1535,8 @@ const isNotNull$1 = (value) => value !== null;
 function getFinalKeyframe$1(keyframes2, { repeat, repeatType = "loop" }, finalKeyframe, speed = 1) {
   const resolvedKeyframes = keyframes2.filter(isNotNull$1);
   const useFirstKeyframe = speed < 0 || repeat && repeatType !== "loop" && repeat % 2 === 1;
-  const index2 = useFirstKeyframe ? 0 : resolvedKeyframes.length - 1;
-  return !index2 || finalKeyframe === void 0 ? resolvedKeyframes[index2] : finalKeyframe;
+  const index = useFirstKeyframe ? 0 : resolvedKeyframes.length - 1;
+  return !index || finalKeyframe === void 0 ? resolvedKeyframes[index] : finalKeyframe;
 }
 const transitionTypeMap = {
   decay: inertia,
@@ -3921,8 +3921,8 @@ function makeLatestValues(props, context, presenceContext, scrapeMotionValues) {
         for (const key in target) {
           let valueTarget = target[key];
           if (Array.isArray(valueTarget)) {
-            const index2 = isInitialAnimationBlocked ? valueTarget.length - 1 : 0;
-            valueTarget = valueTarget[index2];
+            const index = isInitialAnimationBlocked ? valueTarget.length - 1 : 0;
+            valueTarget = valueTarget[index];
           }
           if (valueTarget !== null) {
             values[key] = valueTarget;
@@ -4875,8 +4875,8 @@ function getOptimisedAppearId(visualElement) {
 const isNotNull = (value) => value !== null;
 function getFinalKeyframe(keyframes2, { repeat, repeatType = "loop" }, finalKeyframe) {
   const resolvedKeyframes = keyframes2.filter(isNotNull);
-  const index2 = repeat && repeatType !== "loop" && repeat % 2 === 1 ? 0 : resolvedKeyframes.length - 1;
-  return resolvedKeyframes[index2];
+  const index = repeat && repeatType !== "loop" && repeat % 2 === 1 ? 0 : resolvedKeyframes.length - 1;
+  return resolvedKeyframes[index];
 }
 const underDampedSpring = {
   type: "spring",
@@ -8087,26 +8087,131 @@ const StickyTop = ({
     }
   );
 };
-const RootContainer = ({
-  page,
-  sections = [],
-  components = {}
-}) => {
+const byteToHex = [];
+for (let i = 0; i < 256; ++i) {
+  byteToHex.push((i + 256).toString(16).slice(1));
+}
+function unsafeStringify(arr, offset = 0) {
+  return (byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + "-" + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + "-" + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + "-" + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + "-" + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]]).toLowerCase();
+}
+let getRandomValues;
+const rnds8 = new Uint8Array(16);
+function rng() {
+  if (!getRandomValues) {
+    if (typeof crypto === "undefined" || !crypto.getRandomValues) {
+      throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");
+    }
+    getRandomValues = crypto.getRandomValues.bind(crypto);
+  }
+  return getRandomValues(rnds8);
+}
+const randomUUID = typeof crypto !== "undefined" && crypto.randomUUID && crypto.randomUUID.bind(crypto);
+const native = { randomUUID };
+function _v4(options, buf, offset) {
+  options = options || {};
+  const rnds = options.random ?? options.rng?.() ?? rng();
+  if (rnds.length < 16) {
+    throw new Error("Random bytes length must be >= 16");
+  }
+  rnds[6] = rnds[6] & 15 | 64;
+  rnds[8] = rnds[8] & 63 | 128;
+  return unsafeStringify(rnds);
+}
+function v4(options, buf, offset) {
+  if (native.randomUUID && true && !options) {
+    return native.randomUUID();
+  }
+  return _v4(options);
+}
+const useSetup = () => {
+  const getComponents = React.useCallback(
+    (resolveSections) => {
+      const components = {};
+      if (!resolveSections) {
+        throw new Error("[@creopse/react] resolveSections is required");
+      }
+      const files = resolveSections();
+      for (const [key, value] of Object.entries(files)) {
+        const componentName = key.replace(/^\.\/(.*)\.\w+$/, "$1");
+        const parts = componentName.split("/");
+        const name = parts[parts.length - 1]?.split(".")[0];
+        components[name] = value.default;
+      }
+      return components;
+    },
+    []
+  );
+  const getSectionsInOrder = React.useCallback(
+    (props) => {
+      const sections = props.pageData?.sections;
+      const sectionsOrder = props.pageData?.sectionsOrder;
+      const sectionsOrdered = [];
+      if (Array.isArray(sections) && Array.isArray(sectionsOrder)) {
+        for (const section of sectionsOrder) {
+          if (section) {
+            const item = sections.find(
+              (value) => `${value.slug}__${value.pivot?.linkId}` === section
+            );
+            if (item) {
+              sectionsOrdered.push(item);
+            }
+          }
+        }
+      }
+      return sectionsOrdered.length ? sectionsOrdered : sections || [];
+    },
+    []
+  );
+  const getFinalPageSections = React.useCallback(
+    (props) => {
+      const sections = getSectionsInOrder(props);
+      const sectionsDisabled = props.pageData?.sectionsDisabled;
+      return sections.filter((section) => {
+        return !sectionsDisabled?.includes(
+          `${section.slug}__${section.pivot?.linkId}`
+        );
+      });
+    },
+    [getSectionsInOrder]
+  );
+  return {
+    getComponents,
+    getSectionsInOrder,
+    getFinalPageSections
+  };
+};
+const RootContainer = () => {
+  const { page } = content.useContent();
+  const props = content.useProps();
+  const manager = React.useContext(content.PropsContext);
+  const resolveSections = React.useContext(content.ResolveSectionsContext);
+  const { getComponents, getFinalPageSections } = useSetup();
+  const [sections, setSections] = React.useState(
+    () => getFinalPageSections(props)
+  );
+  const [components] = React.useState(() => getComponents(resolveSections));
+  const [sectionsWrapperKey, setSectionsWrapperKey] = React.useState(v4());
+  const [sectionKeys, setSectionKeys] = React.useState({});
+  const sectionsStateRef = React.useRef({});
+  const pagePropsCopyRef = React.useRef(content.cloneDeep(props));
   React.useEffect(() => {
-    const timeout = setTimeout(() => {
-      const sectionData = page.props?.sectionData;
+    const keys = {};
+    sections.forEach((section) => {
+      keys[`${section.slug}__${section.pivot?.linkId}-key`] = v4();
+    });
+    setSectionKeys(keys);
+  }, [sections]);
+  React.useEffect(() => {
+    const timer = setTimeout(() => {
+      const sectionData = page.props.sectionData;
       if (sectionData && sections.find(
         (section) => section.slug === sectionData.slug && section.pivot?.linkId === sectionData.pivot?.linkId
       )) {
-        index.slideToId(`${sectionData.slug}__${sectionData.pivot?.linkId}-container`);
+        content.slideToId(`${sectionData.slug}__${sectionData.pivot?.linkId}-container`);
       }
     }, 1e3);
-    return () => clearTimeout(timeout);
-  }, [page, sections]);
-  const sectionsStateRef = React.useRef({});
-  const sectionsRef = React.useRef(sections);
-  const pageProps = index.useProps();
-  console.log(pageProps);
+    return () => clearTimeout(timer);
+  }, [page.props.sectionData, sections]);
   React.useEffect(() => {
     const deselectAllSections = () => {
       Object.keys(sectionsStateRef.current).forEach((key) => {
@@ -8120,16 +8225,16 @@ const RootContainer = ({
     };
     const handleMessage = (event) => {
       switch (event.data?.type) {
-        case index.EditorMessageType.RELOAD:
+        case content.EditorMessageType.RELOAD:
           sessionStorage.setItem("shouldNotifyReload", "1");
           sessionStorage.setItem("replyOrigin", event.origin);
           window.location.reload();
           break;
-        case index.EditorMessageType.ENABLE_EDITION_MODE: {
+        case content.EditorMessageType.ENABLE_EDITION_MODE: {
           const primaryColor = event.data?.primaryColor ?? "blue";
           sessionStorage.setItem("replyOrigin", event.origin);
           sessionStorage.setItem("primaryColor", primaryColor);
-          sectionsRef.current?.forEach((section) => {
+          sections?.forEach((section) => {
             if (section.slug && section.pivot?.linkId) {
               const sectionElementId = `${section.slug}__${section.pivot?.linkId}-container`;
               const sectionElement = document.getElementById(sectionElementId);
@@ -8147,7 +8252,7 @@ const RootContainer = ({
                   this.style.boxShadow = `0 0 10px ${primaryColor}`;
                   window.parent.postMessage(
                     {
-                      type: index.EditorMessageType.SELECT_PREVIEW_SECTION,
+                      type: content.EditorMessageType.SELECT_PREVIEW_SECTION,
                       slug: section.slug,
                       linkId: section.pivot?.linkId
                     },
@@ -8162,15 +8267,15 @@ const RootContainer = ({
           });
           break;
         }
-        case index.EditorMessageType.DESELECT_ALL_SECTIONS:
+        case content.EditorMessageType.DESELECT_ALL_SECTIONS:
           deselectAllSections();
           break;
-        case index.EditorMessageType.SELECT_SIDEBAR_SECTION: {
+        case content.EditorMessageType.SELECT_SIDEBAR_SECTION: {
           setTimeout(() => {
-            if (sectionsRef.current?.find(
+            if (sections.find(
               (section) => section.slug === event.data?.slug && section.pivot?.linkId === event.data?.linkId
             )) {
-              index.slideToId(`${event.data?.slug}__${event.data?.linkId}-container`);
+              content.slideToId(`${event.data?.slug}__${event.data?.linkId}-container`);
             }
           }, 1e3);
           const elementId = `${event.data?.slug}__${event.data?.linkId}-container`;
@@ -8184,38 +8289,72 @@ const RootContainer = ({
           }
           break;
         }
-        case index.EditorMessageType.SEND_BASE_SECTION_SETTINGS:
-          {
-            console.log(event.data);
+        case content.EditorMessageType.SEND_BASE_SECTION_SETTINGS:
+        case content.EditorMessageType.SEND_SECTION_SETTINGS: {
+          const sectionIndex = pagePropsCopyRef.current.pageData?.sections?.findIndex(
+            (section) => section.slug === event.data?.slug && section.pivot?.linkId === event.data?.linkId
+          );
+          if (typeof sectionIndex !== "number" || sectionIndex === -1) {
+            return;
           }
-          break;
-        case index.EditorMessageType.SEND_BASE_SECTION_DATA:
-          {
-            console.log(event.data);
+          if (pagePropsCopyRef.current.pageData?.sections && pagePropsCopyRef.current.pageData?.sections[sectionIndex].pivot?.settings) {
+            pagePropsCopyRef.current.pageData.sections[sectionIndex].pivot.settings = event.data?.settings;
+            manager?.sync(pagePropsCopyRef.current);
+            setSectionKeys((prev) => ({
+              ...prev,
+              [`${event.data?.slug}__${event.data?.linkId}-key`]: v4()
+            }));
           }
           break;
-        case index.EditorMessageType.SEND_SECTION_SETTINGS:
-          {
-            console.log(event.data);
+        }
+        case content.EditorMessageType.SEND_BASE_SECTION_DATA:
+        case content.EditorMessageType.SEND_SECTION_DATA: {
+          const sectionIndex = pagePropsCopyRef.current.pageData?.sections?.findIndex(
+            (section) => section.slug === event.data?.slug && section.pivot?.linkId === event.data?.linkId
+          );
+          if (typeof sectionIndex !== "number" || sectionIndex === -1) {
+            return;
           }
-          break;
-        case index.EditorMessageType.SEND_SECTION_DATA:
-          {
-            console.log(event.data);
+          if (pagePropsCopyRef.current.pageData?.sections && pagePropsCopyRef.current.pageData?.sections[sectionIndex].pivot?.data) {
+            pagePropsCopyRef.current.pageData.sections[sectionIndex].pivot.data = event.data?.data;
+            manager?.sync(pagePropsCopyRef.current);
+            setSectionKeys((prev) => ({
+              ...prev,
+              [`${event.data?.slug}__${event.data?.linkId}-key`]: v4()
+            }));
           }
           break;
-        case index.EditorMessageType.SEND_PAGE_SECTIONS:
-          {
-            console.log(event.data);
-          }
+        }
+        case content.EditorMessageType.SEND_PAGE_SECTIONS: {
+          if (!pagePropsCopyRef.current.pageData) return;
+          pagePropsCopyRef.current.pageData.sectionsOrder = event.data?.sectionsOrder;
+          pagePropsCopyRef.current.pageData.sectionsDisabled = event.data?.sectionsDisabled;
+          const currentSections = content.cloneDeep(
+            pagePropsCopyRef.current.pageData.sections || []
+          );
+          pagePropsCopyRef.current.pageData.sections = event.data?.sectionsList || [];
+          currentSections.forEach((currentSection) => {
+            const sectionIndex = pagePropsCopyRef.current.pageData?.sections?.findIndex(
+              (newSection) => newSection.slug === currentSection?.slug && newSection.pivot?.linkId === currentSection.pivot?.linkId
+            );
+            if (typeof sectionIndex === "number" && sectionIndex > -1 && pagePropsCopyRef.current.pageData?.sections?.[sectionIndex].pivot) {
+              pagePropsCopyRef.current.pageData.sections[sectionIndex].pivot.data = currentSection.pivot?.data;
+              pagePropsCopyRef.current.pageData.sections[sectionIndex].pivot.settings = currentSection.pivot?.settings;
+            }
+          });
+          manager?.sync(pagePropsCopyRef.current);
+          const newProps = manager?.getState().props;
+          setSections(getFinalPageSections(newProps));
+          setSectionsWrapperKey(v4());
           break;
+        }
       }
     };
     window.addEventListener("message", handleMessage);
     if (sessionStorage.getItem("shouldNotifyReload") === "1") {
       const origin = sessionStorage.getItem("replyOrigin") || "*";
       window.parent.postMessage(
-        { type: index.EditorMessageType.RELOAD_COMPLETE },
+        { type: content.EditorMessageType.RELOAD_COMPLETE },
         origin
       );
       sessionStorage.removeItem("shouldNotifyReload");
@@ -8224,21 +8363,26 @@ const RootContainer = ({
     return () => {
       window.removeEventListener("message", handleMessage);
     };
-  }, []);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: sections.map((section, i) => {
+  }, [sections, manager, getFinalPageSections]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { all: "unset" }, children: sections.map((section) => {
     const Component = components[section.name];
-    if (!Component) return null;
+    const staticKey = `${section.slug}__${section.pivot?.linkId}`;
+    const dynamicKey = sectionKeys[`${staticKey}-key`];
+    if (!Component) {
+      console.warn(`[@creopse/react] Component not found: ${section.name}`);
+      return null;
+    }
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       "section",
       {
-        id: `${section.slug}__${section.pivot?.linkId}-container`,
-        className: "reset-styles",
+        id: `${staticKey}-container`,
+        style: { all: "unset" },
         children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           Component,
           {
             data: section.pivot?.data,
             settings: section.pivot?.settings,
-            sectionKey: `${section.slug}__${section.pivot?.linkId}`,
+            sectionKey: staticKey,
             metadata: {
               slug: section.slug,
               name: section.name,
@@ -8247,12 +8391,13 @@ const RootContainer = ({
               createdAt: section.createdAt,
               updatedAt: section.updatedAt
             }
-          }
+          },
+          dynamicKey
         )
       },
-      `section-${i}`
+      staticKey
     );
-  }) });
+  }) }, sectionsWrapperKey);
 };
 function CreopseProvider({ children, options }) {
   if (!options?.initialProps) {
@@ -8275,7 +8420,7 @@ function CreopseProvider({ children, options }) {
       console.warn("[@creopse/react] No router - props won't sync");
     }
   }, [options.router, manager]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(index.RouterContext.Provider, { value: options.router || null, children: /* @__PURE__ */ jsxRuntimeExports.jsx(index.ConfigContext.Provider, { value: options.config, children: /* @__PURE__ */ jsxRuntimeExports.jsx(index.ResolveSectionsContext.Provider, { value: options.resolveSections, children: /* @__PURE__ */ jsxRuntimeExports.jsx(index.PropsContext.Provider, { value: manager, children }) }) }) });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(content.RouterContext.Provider, { value: options.router || null, children: /* @__PURE__ */ jsxRuntimeExports.jsx(content.ConfigContext.Provider, { value: options.config, children: /* @__PURE__ */ jsxRuntimeExports.jsx(content.ResolveSectionsContext.Provider, { value: options.resolveSections, children: /* @__PURE__ */ jsxRuntimeExports.jsx(content.PropsContext.Provider, { value: manager, children }) }) }) });
 }
 exports.AsyncImg = AsyncImg;
 exports.CreopseProvider = CreopseProvider;