@pack/react 4.1.0 → 4.2.1

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

@@ -1,5 +1,6 @@
 import React, { type ReactNode } from "react";
 import { type ErrorTrackingOptions } from "@pack/errors-react";
+import "./pack-debug";
 type PackContextValue = {
     isPreview: boolean;
     customizerMeta?: {

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;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"}
+{"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

@@ -4,6 +4,7 @@ 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: () => { },

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/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.1.0";
+export const VERSION = "4.2.1";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pack/react",
   "description": "React",
-  "version": "4.1.0",
+  "version": "4.2.1",
   "exports": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "engines": {