@pack/react 4.2.0 → 4.3.0

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { RenderSections, useSections } from "./pack/render-sections";
+import { RenderSection, RenderSections, useSections } from "./pack/render-sections";
 import { PackProvider, PreviewProvider } from "./pack/pack-context";
 import { usePackContext } from "./pack/pack-context";
 import { PackErrorBoundary } from "@pack/errors-react";
@@ -8,5 +8,5 @@ import { useOverlayScript } from "./use-overlay-script";
 import { registerSection } from "./register-section";
 import { registerStorefrontSettingsSchema } from "./register-storefront-settings-schema";
 export type { ErrorTrackingOptions, PackErrorBoundaryFallbackRenderArgs, } from "@pack/errors-react";
-export { PackErrorBoundary, PackProvider, PreviewProvider, RenderSections, registerSection, registerStorefrontSettingsSchema, useLocale, useOverlayScript, usePackContext, useSections, useSiteSettings, };
+export { PackErrorBoundary, PackProvider, PreviewProvider, RenderSection, RenderSections, registerSection, registerStorefrontSettingsSchema, useLocale, useOverlayScript, usePackContext, useSections, useSiteSettings, };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrE,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACpE,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,gCAAgC,EAAE,MAAM,uCAAuC,CAAC;AAEzF,YAAY,EACV,oBAAoB,EACpB,mCAAmC,GACpC,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EACL,iBAAiB,EACjB,YAAY,EACZ,eAAe,EACf,cAAc,EACd,eAAe,EACf,gCAAgC,EAChC,SAAS,EACT,gBAAgB,EAChB,cAAc,EACd,WAAW,EACX,eAAe,GAChB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACpF,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACpE,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,gCAAgC,EAAE,MAAM,uCAAuC,CAAC;AAEzF,YAAY,EACV,oBAAoB,EACpB,mCAAmC,GACpC,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EACL,iBAAiB,EACjB,YAAY,EACZ,eAAe,EACf,aAAa,EACb,cAAc,EACd,eAAe,EACf,gCAAgC,EAChC,SAAS,EACT,gBAAgB,EAChB,cAAc,EACd,WAAW,EACX,eAAe,GAChB,CAAC"}

package/dist/index.js

@@ -1,4 +1,4 @@
-import { RenderSections, useSections } from "./pack/render-sections";
+import { RenderSection, RenderSections, useSections } from "./pack/render-sections";
 import { PackProvider, PreviewProvider } from "./pack/pack-context";
 import { usePackContext } from "./pack/pack-context";
 import { PackErrorBoundary } from "@pack/errors-react";
@@ -7,4 +7,4 @@ import { useLocale } from "./use-locale";
 import { useOverlayScript } from "./use-overlay-script";
 import { registerSection } from "./register-section";
 import { registerStorefrontSettingsSchema } from "./register-storefront-settings-schema";
-export { PackErrorBoundary, PackProvider, PreviewProvider, RenderSections, registerSection, registerStorefrontSettingsSchema, useLocale, useOverlayScript, usePackContext, useSections, useSiteSettings, };
+export { PackErrorBoundary, PackProvider, PreviewProvider, RenderSection, RenderSections, registerSection, registerStorefrontSettingsSchema, useLocale, useOverlayScript, usePackContext, useSections, useSiteSettings, };

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

@@ -1,8 +1,17 @@
 import React from "react";
+interface RenderSectionProps {
+    /** Section node. Must carry an `id` or `clientId`. */
+    section: any;
+}
+/**
+ * Renders one section against the registry populated by `registerSection`.
+ * Use for nested-section blocks; for full-page rendering, use `RenderSections`.
+ */
+export declare function RenderSection({ section }: RenderSectionProps): React.JSX.Element | null;
 interface RenderSectionsProps {
     content?: any;
 }
 export declare function RenderSections(props: RenderSectionsProps): React.JSX.Element | null;
-export declare function useSections(props: RenderSectionsProps): (React.JSX.Element | null)[] | null;
+export declare function useSections(props: RenderSectionsProps): React.JSX.Element[] | null;
 export {};
 //# sourceMappingURL=render-sections.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"render-sections.d.ts","sourceRoot":"","sources":["../../src/pack/render-sections.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAiDlD,UAAU,mBAAmB;IAC3B,OAAO,CAAC,EAAE,GAAG,CAAC;CACf;AA8BD,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,4BAKxD;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,mBAAmB,uCAOrD"}
+{"version":3,"file":"render-sections.d.ts","sourceRoot":"","sources":["../../src/pack/render-sections.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAMlD,UAAU,kBAAkB;IAC1B,sDAAsD;IACtD,OAAO,EAAE,GAAG,CAAC;CACd;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAAE,OAAO,EAAE,EAAE,kBAAkB,4BA6B5D;AAyBD,UAAU,mBAAmB;IAC3B,OAAO,CAAC,EAAE,GAAG,CAAC;CACf;AA8BD,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,4BAKxD;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,mBAAmB,8BAOrD"}

package/dist/pack/render-sections.js

@@ -2,26 +2,39 @@ import React, { useMemo, useEffect } from "react";
 import { usePackContext } from "./pack-context";
 import { sectionMap } from "../register-section";
 import { generateSectionStylesheet } from "../lib/style-utils";
+/**
+ * Renders one section against the registry populated by `registerSection`.
+ * Use for nested-section blocks; for full-page rendering, use `RenderSections`.
+ */
+export function RenderSection({ section }) {
+    if (!section)
+        return null;
+    const key = section.id || section.clientId;
+    const data = section.data || section;
+    const elementStyles = section.styles?.elements || [];
+    data.dataSource = section.dataSource;
+    const schemaKey = data._template;
+    const Component = sectionMap.get(schemaKey);
+    if (!Component)
+        return null;
+    if (data?.sectionVisibility === "hidden")
+        return null;
+    const stylesheet = generateSectionStylesheet(key, elementStyles);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("style", { id: `section-styles-${key}`, dangerouslySetInnerHTML: {
+                __html: stylesheet,
+            } }),
+        React.createElement("section", { "data-comp": schemaKey, "data-comp-id": key },
+            React.createElement(Component, { "comp-name": schemaKey, cms: data }))));
+}
 function renderSectionContent(sections) {
     if (!sections)
         return null;
     return sections
         .map((section) => {
         const key = section.id || section.clientId;
-        const data = section.data || section;
-        const elementStyles = section.styles?.elements || [];
-        data.dataSource = section.dataSource;
-        const schemaKey = data._template;
-        const Component = sectionMap.get(schemaKey);
-        if (!Component)
-            return null;
-        const stylesheet = generateSectionStylesheet(key, elementStyles);
-        return data?.sectionVisibility === "hidden" ? null : (React.createElement(React.Fragment, { key: key },
-            React.createElement("style", { id: `section-styles-${key}`, dangerouslySetInnerHTML: {
-                    __html: stylesheet,
-                } }),
-            React.createElement("section", { "data-comp": schemaKey, "data-comp-id": key },
-                React.createElement(Component, { "comp-name": schemaKey, cms: data }))));
+        return (React.createElement(React.Fragment, { key: key },
+            React.createElement(RenderSection, { section: section })));
     })
         .filter(Boolean);
 }

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":"AAeA,eAAO,MAAM,kBAAkB,YA2R9B,CAAC"}
+{"version":3,"file":"use-customizer-shell.d.ts","sourceRoot":"","sources":["../src/use-customizer-shell.tsx"],"names":[],"mappings":"AAeA,eAAO,MAAM,kBAAkB,YAiT9B,CAAC"}

package/dist/use-customizer-shell.js

@@ -13,8 +13,8 @@ export const useCustomizerShell = () => {
         description: liveContent?.description,
     };
     const [hasInit, setHasInit] = useState(false);
+    const [currentPath, setCurrentPath] = useState(undefined);
     const pendingMessagesRef = useRef(new Map());
-    const currentPathRef = useRef(undefined);
     const parentLocaleIdRef = useRef(null);
     const sendToParent = useCallback(async (type, data) => {
         const messageId = crypto.randomUUID();
@@ -179,28 +179,46 @@ export const useCustomizerShell = () => {
         return;
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [data.handle, sendToParent, storefrontSettingsSchema]);
-    // Update the ref whenever pathname changes
+    // Track all pathname changes (client-side routing, popstate, hard navs)
+    // so SET_CURRENT_ROUTE fires even between pages that both lack CMS content.
     useEffect(() => {
-        currentPathRef.current = window.location.pathname;
-    }, [data.handle]);
+        setCurrentPath(window.location.pathname);
+        const updatePath = () => setCurrentPath(window.location.pathname);
+        // Intercept pushState/replaceState for client-side routing (e.g. React Router)
+        const originalPushState = history.pushState.bind(history);
+        const originalReplaceState = history.replaceState.bind(history);
+        history.pushState = (...args) => {
+            originalPushState(...args);
+            updatePath();
+        };
+        history.replaceState = (...args) => {
+            originalReplaceState(...args);
+            updatePath();
+        };
+        // Handle back/forward navigation
+        window.addEventListener("popstate", updatePath);
+        return () => {
+            window.removeEventListener("popstate", updatePath);
+            history.pushState = originalPushState;
+            history.replaceState = originalReplaceState;
+        };
+    }, []);
     // Tell the parent window about the current route
     useEffect(() => {
         const { template, templateType, handle, title, description } = data;
-        if (!hasInit ||
-            !currentPathRef.current ||
-            (!template && !templateType && !handle && !title && !description)) {
+        if (!hasInit || !currentPath) {
             return;
         }
         sendToParent("SET_CURRENT_ROUTE", {
             environment: environment || "",
-            currentPath: currentPathRef.current,
-            template,
-            templateType,
-            handle,
-            title,
-            description,
+            currentPath,
+            template: template || null,
+            templateType: templateType || null,
+            handle: handle || null,
+            title: title || null,
+            description: description || null,
         });
-    }, [hasInit, environment, data.handle, sendToParent]);
+    }, [hasInit, environment, currentPath, data.handle, sendToParent]);
     // Notify parent when locale changes (but not when it came from parent)
     useEffect(() => {
         if (!hasInit)

package/dist/version.js

@@ -1 +1 @@
-export const VERSION = "4.2.0";
+export const VERSION = "4.3.0";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pack/react",
   "description": "React",
-  "version": "4.2.0",
+  "version": "4.3.0",
   "exports": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "engines": {
@@ -23,7 +23,7 @@
   ],
   "dependencies": {
     "@pack/errors-react": "^0.1.1",
-    "@pack/types": "^0.1.4"
+    "@pack/types": "^0.2.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.20",