@pack/react 4.0.0 → 4.2.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,6 @@
 import React, { type ReactNode } from "react";
+import { type ErrorTrackingOptions } from "@pack/errors-react";
+import "./pack-debug";
 type PackContextValue = {
     isPreview: boolean;
     customizerMeta?: {
@@ -34,6 +36,7 @@ export declare const usePackContext: () => PackContextValue;
 interface PackContentProps {
     children: ReactNode;
     siteSettings: any;
+    packSessionId?: string;
     isPreviewModeEnabled?: boolean;
     customizerMeta?: PackContextValue["customizerMeta"];
     contentEnvironment?: string;
@@ -42,8 +45,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;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"}

package/dist/pack/pack-context.js

@@ -1,8 +1,10 @@
 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";
+import "./pack-debug";
 export const PackContext = createContext({
     isPreview: false,
     setSiteSettings: () => { },
@@ -22,7 +24,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 +54,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/pack/pack-debug.d.ts

@@ -0,0 +1,22 @@
+interface StorefrontTestInfo {
+    test: string;
+    variant: string;
+    expiresAt: string | null;
+}
+interface StorefrontTestRulesCacheInfo {
+    rulesCount: number;
+    cachedAt: string;
+    ageSeconds: number;
+    isFresh: boolean;
+}
+interface PackDebugHelpers {
+    getTestInfo(): StorefrontTestInfo | null;
+    getTestRulesCacheInfo(): StorefrontTestRulesCacheInfo | null;
+}
+declare global {
+    interface Window {
+        packDebug?: PackDebugHelpers;
+    }
+}
+export {};
+//# sourceMappingURL=pack-debug.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pack-debug.d.ts","sourceRoot":"","sources":["../../src/pack/pack-debug.ts"],"names":[],"mappings":"AAmBA,UAAU,kBAAkB;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;CAC1B;AAED,UAAU,4BAA4B;IACpC,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,UAAU,gBAAgB;IACxB,WAAW,IAAI,kBAAkB,GAAG,IAAI,CAAC;IACzC,qBAAqB,IAAI,4BAA4B,GAAG,IAAI,CAAC;CAC9D;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,SAAS,CAAC,EAAE,gBAAgB,CAAC;KAC9B;CACF;AA0HD,OAAO,EAAE,CAAC"}

package/dist/pack/pack-debug.js

@@ -0,0 +1,105 @@
+// Must mirror @pack/hydrogen/src/constants.ts (PACK_TEST_COOKIE_ID).
+const PACK_TEST_COOKIE_ID = "__pack_test";
+// Must mirror @pack/hydrogen/src/tests/test.ts cacheStrategy.maxAge (1 hour).
+// Keep this in sync with @pack/hydrogen/src/session/test-session.ts default cacheDurationMs.
+const TEST_RULES_CACHE_TTL_SECONDS = 3600;
+function getCookieValue(cookieHeader, name) {
+    const prefix = `${name}=`;
+    const values = cookieHeader.split(";");
+    for (const value of values) {
+        const cookie = value.trim();
+        if (cookie.startsWith(prefix)) {
+            return cookie.slice(prefix.length);
+        }
+    }
+    return null;
+}
+function decodeCookieValue(value) {
+    try {
+        return decodeURIComponent(value);
+    }
+    catch {
+        return value;
+    }
+}
+function decodeBase64Value(value) {
+    try {
+        const binary = atob(value);
+        const bytes = Uint8Array.from(binary, (char) => char.charCodeAt(0));
+        return new TextDecoder().decode(bytes);
+    }
+    catch {
+        return null;
+    }
+}
+function parseTestSessionCookie(cookieHeader) {
+    const rawValue = getCookieValue(cookieHeader, PACK_TEST_COOKIE_ID);
+    if (!rawValue) {
+        return null;
+    }
+    const decodedValue = decodeCookieValue(rawValue);
+    const signatureDelimiterIndex = decodedValue.lastIndexOf(".");
+    const unsignedValue = signatureDelimiterIndex === -1
+        ? decodedValue
+        : decodedValue.slice(0, signatureDelimiterIndex);
+    const payload = decodeBase64Value(unsignedValue);
+    if (!payload) {
+        return null;
+    }
+    try {
+        const parsed = JSON.parse(payload);
+        if (parsed && typeof parsed === "object" && !Array.isArray(parsed)) {
+            return parsed;
+        }
+    }
+    catch {
+        return null;
+    }
+    return null;
+}
+function getStorefrontTestInfo() {
+    const payload = parseTestSessionCookie(document.cookie || "");
+    const test = payload?.test_data?.handle;
+    const variant = payload?.test_data?.testVariant?.handle;
+    if (!test || !variant) {
+        return null;
+    }
+    return {
+        test,
+        variant,
+        expiresAt: payload?.test_expire_at || null,
+    };
+}
+function getStorefrontTestRulesCacheInfo() {
+    const payload = parseTestSessionCookie(document.cookie || "");
+    const timestamp = payload?.test_rules_cache_timestamp;
+    if (typeof timestamp !== "number" || Number.isNaN(timestamp)) {
+        return null;
+    }
+    const cachedAtDate = new Date(timestamp);
+    if (Number.isNaN(cachedAtDate.getTime())) {
+        return null;
+    }
+    const ageSeconds = Math.max(0, Math.floor((Date.now() - timestamp) / 1000));
+    const rulesCount = Array.isArray(payload?.test_rules_cache)
+        ? payload.test_rules_cache.length
+        : 0;
+    return {
+        rulesCount,
+        cachedAt: cachedAtDate.toISOString(),
+        ageSeconds,
+        isFresh: ageSeconds < TEST_RULES_CACHE_TTL_SECONDS,
+    };
+}
+function initializePackDebugHelpers() {
+    if (typeof window === "undefined" || typeof document === "undefined") {
+        return;
+    }
+    window.packDebug = {
+        ...window.packDebug,
+        getTestInfo: getStorefrontTestInfo,
+        getTestRulesCacheInfo: getStorefrontTestRulesCacheInfo,
+    };
+}
+initializePackDebugHelpers();
+export {};

package/dist/version.js

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pack/react",
   "description": "React",
-  "version": "4.0.0",
+  "version": "4.2.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": {