@pack/react 0.0.9 → 0.0.11

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.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-customizer-shell.d.ts","sourceRoot":"","sources":["../src/use-customizer-shell.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,kBAAkB,mFAM5B,GAAG;;;CAkHL,CAAC"}
+{"version":3,"file":"use-customizer-shell.d.ts","sourceRoot":"","sources":["../src/use-customizer-shell.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,kBAAkB,mFAM5B,GAAG;;;CAoHL,CAAC"}

package/dist/use-customizer-shell.js

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { connectToParent, ErrorCode } from "penpal";
 export const useCustomizerShell = ({ environment = "production", isPreview, sectionComponents, data = {}, storefrontSettingsSchema, }) => {
     const [location, setLocation] = useState();
@@ -94,5 +94,7 @@ export const useCustomizerShell = ({ environment = "production", isPreview, sect
             storefrontSettings: data.settings?.settings,
         };
     }
-    return { content, storefrontSettings };
+    return useMemo(() => {
+        return { content, storefrontSettings };
+    }, [content, storefrontSettings]);
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pack/react",
   "description": "React",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "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"
   }
 }