@pack/react 0.0.8 → 0.0.10

package/dist/render-sections.d.ts

@@ -1,3 +1,3 @@
-import React from 'react';
+import React from "react";
 export declare function RenderSections({ content }: any): React.JSX.Element | null;
 //# sourceMappingURL=render-sections.d.ts.map

package/dist/render-sections.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"render-sections.d.ts","sourceRoot":"","sources":["../src/render-sections.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAmCvC,wBAAgB,cAAc,CAAC,EAAC,OAAO,EAAC,EAAE,GAAG,4BA4B5C"}
+{"version":3,"file":"render-sections.d.ts","sourceRoot":"","sources":["../src/render-sections.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAqClD,wBAAgB,cAAc,CAAC,EAAE,OAAO,EAAE,EAAE,GAAG,4BA8B9C"}

package/dist/render-sections.js

@@ -1,29 +1,31 @@
-import React, { useEffect } from 'react';
-import { v4 as uuidv4 } from 'uuid';
-import { useCustomizerShell } from './use-customizer-shell';
-import { usePreviewContext } from './preview/preview-content';
-import { sectionMap } from './register-section';
-import { storefrontSettingsSchema } from './register-storefront-settings-schema';
-function Sections({ content, sections }) {
-    const renderedSections = sections
-        .map((section) => {
-        // TODO: Return a consistent data structure from the API and the customizer
-        // Normalize section data
-        const data = section.data || section;
-        const schemaKey = data._template;
-        const Component = sectionMap.get(schemaKey);
-        if (!Component)
-            return null;
-        return (React.createElement("section", { key: uuidv4(), "data-comp": schemaKey, "data-comp-id": section?.id, hidden: data?.sectionVisibility === 'hidden' },
-            React.createElement(Component, { "comp-name": schemaKey, cms: data })));
-    })
-        .filter(Boolean);
+import React, { useEffect, useMemo } from "react";
+import { useCustomizerShell } from "./use-customizer-shell";
+import { usePreviewContext } from "./preview/preview-content";
+import { sectionMap } from "./register-section";
+import { storefrontSettingsSchema } from "./register-storefront-settings-schema";
+function Sections({ sections }) {
+    const renderedSections = useMemo(() => {
+        return sections
+            .map((section) => {
+            // TODO: Return a consistent data structure from the API and the customizer
+            // Normalize section data
+            const key = section.id || section.clientId;
+            const data = section.data || section;
+            const schemaKey = data._template;
+            const Component = sectionMap.get(schemaKey);
+            if (!Component)
+                return null;
+            return (React.createElement("section", { key: key, "data-comp": schemaKey, "data-comp-id": key, hidden: data?.sectionVisibility === "hidden" },
+                React.createElement(Component, { "comp-name": schemaKey, cms: data })));
+        })
+            .filter(Boolean);
+    }, [sections]);
     return React.createElement(React.Fragment, null, renderedSections);
 }
 export function RenderSections({ content }) {
     const { isPreview, setPreviewStorefrontSettings } = usePreviewContext();
     const { content: liveContent, storefrontSettings } = useCustomizerShell({
-        environment: 'production',
+        environment: "production",
         isPreview,
         sectionComponents: sectionMap,
         data: {
@@ -40,8 +42,10 @@ export function RenderSections({ content }) {
         storefrontSettings &&
             setPreviewStorefrontSettings({ settings: storefrontSettings });
     }, [setPreviewStorefrontSettings, storefrontSettings]);
-    const sections = liveContent?.sections?.nodes || liveContent?.sections;
+    const sections = useMemo(() => {
+        return liveContent?.sections?.nodes || liveContent?.sections;
+    }, [liveContent?.sections]);
     if (!sections)
         return null;
-    return React.createElement(Sections, { content: liveContent, sections: sections });
+    return React.createElement(Sections, { sections: sections });
 }

package/dist/use-customizer-shell.js

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useState } from "react";
-import { connectToParent } from "penpal";
+import { connectToParent, ErrorCode } from "penpal";
 export const useCustomizerShell = ({ environment = "production", isPreview, sectionComponents, data = {}, storefrontSettingsSchema, }) => {
     const [location, setLocation] = useState();
     const [content, setContent] = useState(data.content);
@@ -10,7 +10,7 @@ export const useCustomizerShell = ({ environment = "production", isPreview, sect
     };
     useEffect(() => {
         setLocation(window.location);
-    }, []);
+    }, [data.handle]);
     const refreshSections = useCallback(() => {
         if (!sectionComponents || !parentConnection)
             return [];
@@ -22,13 +22,15 @@ export const useCustomizerShell = ({ environment = "production", isPreview, sect
         })
             .filter(Boolean);
         try {
-            parentConnection.setSectionsSchemas(JSON.stringify(sectionSchemas));
+            parentConnection?.setSectionsSchemas(JSON.stringify(sectionSchemas));
         }
         catch (error) {
-            parentConnection.displayError("Something went wrong parsing sections");
+            if (error.code !== ErrorCode.ConnectionDestroyed) {
+                parentConnection?.displayError("Something went wrong parsing sections");
+            }
         }
         return;
-    }, [data, parentConnection, sectionComponents]);
+    }, [data.handle, parentConnection, sectionComponents]);
     const refreshStorefrontSettingsSchema = useCallback(() => {
         if (!storefrontSettingsSchema || !parentConnection || !sectionComponents) {
             return [];
@@ -36,9 +38,9 @@ export const useCustomizerShell = ({ environment = "production", isPreview, sect
         parentConnection.setStorefrontSettingsSchema(JSON.stringify(storefrontSettingsSchema));
         return;
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [data, parentConnection, storefrontSettingsSchema]);
+    }, [data.handle, parentConnection, storefrontSettingsSchema]);
     useEffect(() => {
-        if (!isPreview || !location)
+        if (!isPreview || !location?.pathname)
             return;
         const connection = connectToParent({
             methods: {
@@ -72,17 +74,15 @@ export const useCustomizerShell = ({ environment = "production", isPreview, sect
             });
             setParentConnection(parent);
         });
-        return () => {
-            connection.destroy();
-        };
-    }, [location]);
+        return () => connection.destroy();
+    }, [location?.pathname]);
     useEffect(() => {
         if (!isPreview)
             return;
         refreshSections();
         refreshStorefrontSettingsSchema();
     }, [
-        data,
+        data.handle,
         isPreview,
         refreshSections,
         refreshStorefrontSettingsSchema,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pack/react",
   "description": "React",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "exports": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "engines": {
@@ -24,7 +24,6 @@
   "devDependencies": {
     "@shopify/remix-oxygen": "^1.1.3",
     "@types/react": "^18.2.20",
-    "@types/uuid": "^9.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
@@ -33,7 +32,6 @@
     "react-dom": "^18.0.0"
   },
   "dependencies": {
-    "penpal": "^6.2.2",
-    "uuid": "^9.0.1"
+    "penpal": "^6.2.2"
   }
 }