@pack/react 4.0.0 → 4.1.0

package/README.md

@@ -1 +1,53 @@
-# react
+# `@pack/react`
+
+React UI primitives for rendering Pack content and storefront configuration.
+
+## Install
+
+```bash
+npm install @pack/react
+```
+
+## Main exports
+
+- `PackProvider` / `PreviewProvider`
+- `RenderSections`, `useSections`
+- `registerSection`
+- `registerStorefrontSettingsSchema`
+- `usePackContext`, `useSiteSettings`, `useLocale`
+- `PackErrorBoundary`
+
+## Usage
+
+```tsx
+import { PackProvider, RenderSections } from '@pack/react';
+
+export function App({
+  sections,
+  siteSettings,
+  packSessionId,
+  isPreviewModeEnabled,
+  packErrorTracking,
+}: Props) {
+  return (
+    <PackProvider
+      siteSettings={siteSettings}
+      packSessionId={packSessionId}
+      isPreviewModeEnabled={isPreviewModeEnabled}
+      packErrorTracking={packErrorTracking}
+    >
+      <RenderSections sections={sections} />
+    </PackProvider>
+  );
+}
+```
+
+`packSessionId` and `packErrorTracking` can be passed from `...pack.getPackContextData()` when using `@pack/hydrogen`.
+
+## Development
+
+```bash
+yarn
+yarn build
+yarn test
+```

package/dist/index.d.ts

@@ -1,10 +1,12 @@
 import { 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 { PackProvider, PreviewProvider, RenderSections, registerSection, registerStorefrontSettingsSchema, useLocale, useOverlayScript, usePackContext, useSections, useSiteSettings, };
+export type { ErrorTrackingOptions, PackErrorBoundaryFallbackRenderArgs, } from "@pack/errors-react";
+export { PackErrorBoundary, PackProvider, PreviewProvider, 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,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,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,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"}

package/dist/index.js

@@ -1,9 +1,10 @@
 import { 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 { PackProvider, PreviewProvider, RenderSections, registerSection, registerStorefrontSettingsSchema, useLocale, useOverlayScript, usePackContext, useSections, useSiteSettings, };
+export { PackErrorBoundary, PackProvider, PreviewProvider, RenderSections, registerSection, registerStorefrontSettingsSchema, useLocale, useOverlayScript, usePackContext, useSections, useSiteSettings, };

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

@@ -1,4 +1,5 @@
 import React, { type ReactNode } from "react";
+import { type ErrorTrackingOptions } from "@pack/errors-react";
 type PackContextValue = {
     isPreview: boolean;
     customizerMeta?: {
@@ -34,6 +35,7 @@ export declare const usePackContext: () => PackContextValue;
 interface PackContentProps {
     children: ReactNode;
     siteSettings: any;
+    packSessionId?: string;
     isPreviewModeEnabled?: boolean;
     customizerMeta?: PackContextValue["customizerMeta"];
     contentEnvironment?: string;
@@ -42,8 +44,9 @@ interface PackContentProps {
         country: string;
     } | null;
     liveContent?: any;
+    packErrorTracking?: ErrorTrackingOptions;
 }
-export declare function PackProvider({ children, isPreviewModeEnabled, siteSettings: previewStorefrontSettings, customizerMeta, contentEnvironment, locale: previewLocale, }: PackContentProps): React.JSX.Element;
+export declare function PackProvider({ children, packSessionId, isPreviewModeEnabled, siteSettings: previewStorefrontSettings, customizerMeta, contentEnvironment, locale: previewLocale, packErrorTracking, }: 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;AAMf,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,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"}
+{"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;AAK5B,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"}

package/dist/pack/pack-context.js

@@ -1,5 +1,6 @@
 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";
@@ -22,7 +23,7 @@ const CustomizerShell = () => {
     useOverlayScript();
     return null;
 };
-export function PackProvider({ children, isPreviewModeEnabled = false, siteSettings: previewStorefrontSettings, customizerMeta, contentEnvironment = "", locale: previewLocale = null, }) {
+export function PackProvider({ children, packSessionId, isPreviewModeEnabled = false, siteSettings: previewStorefrontSettings, customizerMeta, contentEnvironment = "", locale: previewLocale = null, packErrorTracking, }) {
     const [liveContent, setLiveContent] = useState(null);
     const [siteSettings, setSiteSettings] = useState(previewStorefrontSettings);
     const [locale, setLocale] = useState(previewLocale);
@@ -52,9 +53,10 @@ export function PackProvider({ children, isPreviewModeEnabled = false, siteSetti
         setSiteSettings(previewStorefrontSettings);
     }, [previewStorefrontSettings]);
     usePackTrack();
+    usePackErrorTrack(!!isPreviewModeEnabled, packErrorTracking, packSessionId);
     return (React.createElement(PackContext.Provider, { value: value },
         React.createElement(CustomizerShell, null),
-        children,
+        React.createElement(PackErrorBoundary, { errorTracking: packErrorTracking, sessionId: packSessionId }, children),
         React.createElement(PreviewToast, { isPreviewModeEnabled: !!isPreviewModeEnabled, environment: value.contentEnvironment, previewContext: customizerMeta?.previewContext })));
 }
 export const PreviewProvider = PackProvider;

package/dist/version.js

@@ -1 +1 @@
-export const VERSION = "4.0.0";
+export const VERSION = "4.1.0";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pack/react",
   "description": "React",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "exports": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "engines": {
@@ -22,6 +22,7 @@
     "dist"
   ],
   "dependencies": {
+    "@pack/errors-react": "^0.1.1",
     "@pack/types": "^0.1.4"
   },
   "devDependencies": {