@pack/react 4.3.0 → 4.3.2

package/README.md

@@ -15,26 +15,17 @@ npm install @pack/react
 - `registerSection`
 - `registerStorefrontSettingsSchema`
 - `usePackContext`, `useSiteSettings`, `useLocale`
-- `PackErrorBoundary`
 
 ## Usage
 
 ```tsx
-import { PackProvider, RenderSections } from '@pack/react';
-
-export function App({
-  sections,
-  siteSettings,
-  packSessionId,
-  isPreviewModeEnabled,
-  packErrorTracking,
-}: Props) {
+import { PackProvider, RenderSections } from "@pack/react";
+
+export function App({ sections, siteSettings, isPreviewModeEnabled }: Props) {
   return (
     <PackProvider
       siteSettings={siteSettings}
-      packSessionId={packSessionId}
       isPreviewModeEnabled={isPreviewModeEnabled}
-      packErrorTracking={packErrorTracking}
     >
       <RenderSections sections={sections} />
     </PackProvider>
@@ -42,8 +33,6 @@ export function App({
 }
 ```
 
-`packSessionId` and `packErrorTracking` can be passed from `...pack.getPackContextData()` when using `@pack/hydrogen`.
-
 ## Development
 
 ```bash

package/dist/index.d.ts

@@ -1,12 +1,10 @@
 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";
 import { useSiteSettings } from "./use-site-settings";
 import { useLocale } from "./use-locale";
 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, RenderSection, RenderSections, registerSection, registerStorefrontSettingsSchema, useLocale, useOverlayScript, usePackContext, useSections, useSiteSettings, };
+export { 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,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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EACb,cAAc,EACd,WAAW,EACZ,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACpE,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,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,OAAO,EACL,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,10 +1,9 @@
-import { RenderSection, 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";
 import { useSiteSettings } from "./use-site-settings";
 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, RenderSection, RenderSections, registerSection, registerStorefrontSettingsSchema, useLocale, useOverlayScript, usePackContext, useSections, useSiteSettings, };
+export { PackProvider, PreviewProvider, RenderSection, RenderSections, registerSection, registerStorefrontSettingsSchema, useLocale, useOverlayScript, usePackContext, useSections, useSiteSettings, };

package/dist/pack/pack-context.d.ts

@@ -1,5 +1,4 @@
 import React, { type ReactNode } from "react";
-import { type ErrorTrackingOptions } from "@pack/errors-react";
 import "./pack-debug";
 type PackContextValue = {
     isPreview: boolean;
@@ -36,7 +35,6 @@ export declare const usePackContext: () => PackContextValue;
 interface PackContentProps {
     children: ReactNode;
     siteSettings: any;
-    packSessionId?: string;
     isPreviewModeEnabled?: boolean;
     customizerMeta?: PackContextValue["customizerMeta"];
     contentEnvironment?: string;
@@ -45,9 +43,8 @@ interface PackContentProps {
         country: string;
     } | null;
     liveContent?: any;
-    packErrorTracking?: ErrorTrackingOptions;
 }
-export declare function PackProvider({ children, packSessionId, isPreviewModeEnabled, siteSettings: previewStorefrontSettings, customizerMeta, contentEnvironment, locale: previewLocale, packErrorTracking, }: PackContentProps): React.JSX.Element;
+export declare function PackProvider({ children, isPreviewModeEnabled, siteSettings: previewStorefrontSettings, customizerMeta, contentEnvironment, locale: previewLocale, }: PackContentProps): React.JSX.Element;
 export declare const PreviewProvider: typeof PackProvider;
 export {};
 //# sourceMappingURL=pack-context.d.ts.map

package/dist/pack/pack-context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pack-context.d.ts","sourceRoot":"","sources":["../../src/pack/pack-context.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAKZ,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAEf,OAAO,EAGL,KAAK,oBAAoB,EAC1B,MAAM,oBAAoB,CAAC;AAI5B,OAAO,cAAc,CAAC;AAEtB,KAAK,gBAAgB,GAAG;IACtB,SAAS,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE;QACf,OAAO,CAAC,EAAE;YACR,GAAG,CAAC,EAAE,MAAM,CAAC;YACb,OAAO,CAAC,EAAE,MAAM,CAAC;SAClB,CAAC;QACF,cAAc,CAAC,EAAE;YACf,MAAM,CAAC,EAAE,MAAM,CAAC;YAChB,SAAS,CAAC,EAAE,MAAM,CAAC;YACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;YAC3B,UAAU,CAAC,EAAE,MAAM,CAAC;YACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;SAC5B,CAAC;QACF,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;KACpB,CAAC;IACF,YAAY,EAAE,GAAG,CAAC;IAClB,eAAe,EAAE,CAAC,YAAY,EAAE,GAAG,KAAK,IAAI,CAAC;IAC7C,WAAW,EAAE,GAAG,CAAC;IACjB,cAAc,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;IACvC,kBAAkB,EAAE,MAAM,CAAC;IAC3B,MAAM,EAAE;QACN,QAAQ,EAAE,MAAM,CAAC;QACjB,OAAO,EAAE,MAAM,CAAC;KACjB,GAAG,IAAI,CAAC;IACT,SAAS,EAAE,CAAC,MAAM,EAAE;QAClB,QAAQ,EAAE,MAAM,CAAC;QACjB,OAAO,EAAE,MAAM,CAAC;KACjB,GAAG,IAAI,KAAK,IAAI,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,WAAW,iCAUtB,CAAC;AAEH,eAAO,MAAM,cAAc,wBAAgC,CAAC;AAE5D,UAAU,gBAAgB;IACxB,QAAQ,EAAE,SAAS,CAAC;IACpB,YAAY,EAAE,GAAG,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACpD,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,MAAM,CAAC,EAAE;QACP,QAAQ,EAAE,MAAM,CAAC;QACjB,OAAO,EAAE,MAAM,CAAC;KACjB,GAAG,IAAI,CAAC;IACT,WAAW,CAAC,EAAE,GAAG,CAAC;IAClB,iBAAiB,CAAC,EAAE,oBAAoB,CAAC;CAC1C;AAUD,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,aAAa,EACb,oBAA4B,EAC5B,YAAY,EAAE,yBAAyB,EACvC,cAAc,EACd,kBAAuB,EACvB,MAAM,EAAE,aAAoB,EAC5B,iBAAiB,GAClB,EAAE,gBAAgB,qBA6DlB;AAED,eAAO,MAAM,eAAe,qBAAe,CAAC"}
+{"version":3,"file":"pack-context.d.ts","sourceRoot":"","sources":["../../src/pack/pack-context.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAKZ,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAKf,OAAO,cAAc,CAAC;AAEtB,KAAK,gBAAgB,GAAG;IACtB,SAAS,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE;QACf,OAAO,CAAC,EAAE;YACR,GAAG,CAAC,EAAE,MAAM,CAAC;YACb,OAAO,CAAC,EAAE,MAAM,CAAC;SAClB,CAAC;QACF,cAAc,CAAC,EAAE;YACf,MAAM,CAAC,EAAE,MAAM,CAAC;YAChB,SAAS,CAAC,EAAE,MAAM,CAAC;YACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;YAC3B,UAAU,CAAC,EAAE,MAAM,CAAC;YACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;SAC5B,CAAC;QACF,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;KACpB,CAAC;IACF,YAAY,EAAE,GAAG,CAAC;IAClB,eAAe,EAAE,CAAC,YAAY,EAAE,GAAG,KAAK,IAAI,CAAC;IAC7C,WAAW,EAAE,GAAG,CAAC;IACjB,cAAc,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;IACvC,kBAAkB,EAAE,MAAM,CAAC;IAC3B,MAAM,EAAE;QACN,QAAQ,EAAE,MAAM,CAAC;QACjB,OAAO,EAAE,MAAM,CAAC;KACjB,GAAG,IAAI,CAAC;IACT,SAAS,EAAE,CACT,MAAM,EAAE;QACN,QAAQ,EAAE,MAAM,CAAC;QACjB,OAAO,EAAE,MAAM,CAAC;KACjB,GAAG,IAAI,KACL,IAAI,CAAC;CACX,CAAC;AAEF,eAAO,MAAM,WAAW,iCAUtB,CAAC;AAEH,eAAO,MAAM,cAAc,wBAAgC,CAAC;AAE5D,UAAU,gBAAgB;IACxB,QAAQ,EAAE,SAAS,CAAC;IACpB,YAAY,EAAE,GAAG,CAAC;IAClB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACpD,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,MAAM,CAAC,EAAE;QACP,QAAQ,EAAE,MAAM,CAAC;QACjB,OAAO,EAAE,MAAM,CAAC;KACjB,GAAG,IAAI,CAAC;IACT,WAAW,CAAC,EAAE,GAAG,CAAC;CACnB;AAUD,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,oBAA4B,EAC5B,YAAY,EAAE,yBAAyB,EACvC,cAAc,EACd,kBAAuB,EACvB,MAAM,EAAE,aAAoB,GAC7B,EAAE,gBAAgB,qBAuDlB;AAED,eAAO,MAAM,eAAe,qBAAe,CAAC"}

package/dist/pack/pack-context.js

@@ -1,6 +1,5 @@
 import React, { createContext, useContext, useState, useMemo, useEffect, } from "react";
 import { usePackTrack } from "./pack-analytics";
-import { usePackErrorTrack, PackErrorBoundary, } from "@pack/errors-react";
 import { PreviewToast } from "./preview-toast";
 import { useOverlayScript } from "../use-overlay-script";
 import { useCustomizerShell } from "../use-customizer-shell";
@@ -24,7 +23,7 @@ const CustomizerShell = () => {
     useOverlayScript();
     return null;
 };
-export function PackProvider({ children, packSessionId, isPreviewModeEnabled = false, siteSettings: previewStorefrontSettings, customizerMeta, contentEnvironment = "", locale: previewLocale = null, packErrorTracking, }) {
+export function PackProvider({ children, isPreviewModeEnabled = false, siteSettings: previewStorefrontSettings, customizerMeta, contentEnvironment = "", locale: previewLocale = null, }) {
     const [liveContent, setLiveContent] = useState(null);
     const [siteSettings, setSiteSettings] = useState(previewStorefrontSettings);
     const [locale, setLocale] = useState(previewLocale);
@@ -54,10 +53,9 @@ export function PackProvider({ children, packSessionId, isPreviewModeEnabled = f
         setSiteSettings(previewStorefrontSettings);
     }, [previewStorefrontSettings]);
     usePackTrack();
-    usePackErrorTrack(!!isPreviewModeEnabled, packErrorTracking, packSessionId);
     return (React.createElement(PackContext.Provider, { value: value },
         React.createElement(CustomizerShell, null),
-        React.createElement(PackErrorBoundary, { errorTracking: packErrorTracking, sessionId: packSessionId }, children),
+        children,
         React.createElement(PreviewToast, { isPreviewModeEnabled: !!isPreviewModeEnabled, environment: value.contentEnvironment, previewContext: customizerMeta?.previewContext })));
 }
 export const PreviewProvider = PackProvider;

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

@@ -8,10 +8,11 @@ interface RenderSectionProps {
  * Use for nested-section blocks; for full-page rendering, use `RenderSections`.
  */
 export declare function RenderSection({ section }: RenderSectionProps): React.JSX.Element | null;
+export declare function renderSectionContent(sections: any[]): (React.JSX.Element | null)[] | 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;
+export declare function useSections(props: RenderSectionsProps): (React.JSX.Element | null)[] | 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;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"}
+{"version":3,"file":"render-sections.d.ts","sourceRoot":"","sources":["../../src/pack/render-sections.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgD,MAAM,OAAO,CAAC;AAMrE,UAAU,kBAAkB;IAC1B,sDAAsD;IACtD,OAAO,EAAE,GAAG,CAAC;CACd;AAuCD;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAAE,OAAO,EAAE,EAAE,kBAAkB,4BAG5D;AAGD,wBAAgB,oBAAoB,CAAC,QAAQ,EAAE,GAAG,EAAE,uCAYnD;AAUD,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"}

package/dist/pack/render-sections.js

@@ -2,11 +2,14 @@ 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 }) {
+// Builds the [<style>, <section>] element pair for one section, or null if the
+// section is unregistered/hidden. Hookless, so it can be called directly from
+// both RenderSection and renderSectionContent. Returning the pair (rather than a
+// wrapping element) keeps useSections' element tree flat — consumers that walk
+// fragment.props.children to find the `data-comp` <section> depend on that shape.
+// The explicit ReactElement[] return type makes any future wrapping element
+// (the regression this guards against) a compile error rather than only a test failure.
+function buildSectionElements(section) {
     if (!section)
         return null;
     const key = section.id || section.clientId;
@@ -20,21 +23,31 @@ export function RenderSection({ section }) {
     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: {
+    return [
+        React.createElement("style", { key: `section-styles-${key}`, 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 }))));
+        React.createElement("section", { key: `section-${key}`, "data-comp": schemaKey, "data-comp-id": key },
+            React.createElement(Component, { "comp-name": schemaKey, cms: data })),
+    ];
+}
+/**
+ * Renders one section against the registry populated by `registerSection`.
+ * Use for nested-section blocks; for full-page rendering, use `RenderSections`.
+ */
+export function RenderSection({ section }) {
+    const elements = buildSectionElements(section);
+    return elements ? React.createElement(React.Fragment, null, elements) : null;
 }
-function renderSectionContent(sections) {
+// Exported for unit tests only — not re-exported from the package entry (index.ts).
+export function renderSectionContent(sections) {
     if (!sections)
         return null;
     return sections
         .map((section) => {
         const key = section.id || section.clientId;
-        return (React.createElement(React.Fragment, { key: key },
-            React.createElement(RenderSection, { section: section })));
+        const elements = buildSectionElements(section);
+        return elements ? (React.createElement(React.Fragment, { key: key }, elements)) : null;
     })
         .filter(Boolean);
 }

package/dist/version.js

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

package/package.json

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