@pack/hydrogen 3.1.0 → 3.1.1

package/dist/index.d.ts

@@ -26,10 +26,14 @@ interface TestInput {
 interface Test$1 {
     id: string;
     handle: string;
+    impressionTrigger?: string;
     testVariant: {
         id: string;
         handle: string;
     };
+    impression?: {
+        sectionIds?: string[];
+    };
 }
 
 declare class PackTestSession {
@@ -177,15 +181,23 @@ declare function action({ request, context }: ActionFunctionArgs): Promise<Respo
  */
 declare function loader({ request, context }: LoaderFunctionArgs): Promise<Response>;
 
-declare const PackTestRoute: () => null;
+type PackTestImpressionSelector = string | string[] | ((packTestInfo: Test$1) => string | string[] | undefined);
+type PackTestRouteProps = {
+    impressionSelector?: PackTestImpressionSelector;
+};
+declare const PackTestRoute: ({ impressionSelector, }?: PackTestRouteProps) => null;
 
 interface Test {
     id: string;
     handle: string;
+    impressionTrigger?: string;
     testVariant: {
         id: string;
         handle: string;
     };
+    impression?: {
+        sectionIds?: string[];
+    };
 }
 interface TestExposureCallbackArg extends Test {
     exposureTime: number;

package/dist/index.js

@@ -5027,6 +5027,10 @@ var cookie2 = __toESM(require_cookie(), 1);
 var import_json_rules_engine = __toESM(require_dist(), 1);
 var import_debug2 = __toESM(require_browser(), 1);
 var debug2 = (0, import_debug2.default)("pack:ab-testing:local-resolver");
+function getImpressionSectionIds(testVariant) {
+  const sectionIds = testVariant?.sectionTestVariants?.map((variant) => variant?.section?.id).filter((id) => Boolean(id)) || [];
+  return [...new Set(sectionIds)];
+}
 var LocalTestResolver = class {
   testRules = [];
   constructor() {
@@ -5065,62 +5069,86 @@ var LocalTestResolver = class {
    * Evaluate test rules and assign a variant
    */
   async assignTest(attributes, _sessionId) {
-    debug2("[Pack Test LocalResolver] Starting test assignment:", JSON.stringify({
-      totalRules: this.testRules.length,
-      attributes
-    }));
+    debug2(
+      "[Pack Test LocalResolver] Starting test assignment:",
+      JSON.stringify({
+        totalRules: this.testRules.length,
+        attributes
+      })
+    );
     if (!this.testRules.length) {
       debug2("[Pack Test LocalResolver] No test rules available");
       return null;
     }
     const eligibleTests = await this.evaluateRules(this.testRules, attributes);
-    debug2("[Pack Test LocalResolver] Rule evaluation result:", JSON.stringify({
-      totalTests: this.testRules.length,
-      eligibleTests: eligibleTests.length,
-      eligibleTestIds: eligibleTests.map((t) => ({ id: t.id, handle: t.handle }))
-    }));
+    debug2(
+      "[Pack Test LocalResolver] Rule evaluation result:",
+      JSON.stringify({
+        totalTests: this.testRules.length,
+        eligibleTests: eligibleTests.length,
+        eligibleTestIds: eligibleTests.map((t) => ({
+          id: t.id,
+          handle: t.handle
+        }))
+      })
+    );
     if (!eligibleTests.length) {
       debug2("[Pack Test LocalResolver] No eligible tests found");
       return null;
     }
     const randomTestIndex = this.getRandomNumber(eligibleTests.length - 1);
     const selectedTest = eligibleTests[randomTestIndex];
-    debug2("[Pack Test LocalResolver] Selected test:", JSON.stringify({
-      testId: selectedTest.id,
-      testHandle: selectedTest.handle,
-      randomIndex: randomTestIndex,
-      totalEligible: eligibleTests.length
-    }));
+    debug2(
+      "[Pack Test LocalResolver] Selected test:",
+      JSON.stringify({
+        testId: selectedTest.id,
+        testHandle: selectedTest.handle,
+        randomIndex: randomTestIndex,
+        totalEligible: eligibleTests.length
+      })
+    );
     const randomPercentage = this.getRandomNumber(100, 1);
     let accumulatedPercentage = 0;
-    debug2("[Pack Test LocalResolver] Starting variant assignment:", JSON.stringify({
-      randomPercentage,
-      variants: selectedTest.testVariants.map((v) => ({
-        id: v.id,
-        handle: v.handle,
-        trafficPercentage: v.trafficPercentage
-      }))
-    }));
+    debug2(
+      "[Pack Test LocalResolver] Starting variant assignment:",
+      JSON.stringify({
+        randomPercentage,
+        variants: selectedTest.testVariants.map((v) => ({
+          id: v.id,
+          handle: v.handle,
+          trafficPercentage: v.trafficPercentage
+        }))
+      })
+    );
     for (const variant of selectedTest.testVariants) {
       accumulatedPercentage += variant.trafficPercentage * 100;
-      debug2("[Pack Test LocalResolver] Checking variant:", JSON.stringify({
-        variantId: variant.id,
-        variantHandle: variant.handle,
-        trafficPercentage: variant.trafficPercentage,
-        accumulatedPercentage,
-        randomPercentage,
-        isSelected: accumulatedPercentage >= randomPercentage
-      }));
+      debug2(
+        "[Pack Test LocalResolver] Checking variant:",
+        JSON.stringify({
+          variantId: variant.id,
+          variantHandle: variant.handle,
+          trafficPercentage: variant.trafficPercentage,
+          accumulatedPercentage,
+          randomPercentage,
+          isSelected: accumulatedPercentage >= randomPercentage
+        })
+      );
       if (accumulatedPercentage >= randomPercentage) {
+        const impressionSectionIds = getImpressionSectionIds(variant);
         const result = {
           id: selectedTest.id,
           handle: selectedTest.handle,
+          impressionTrigger: selectedTest.impressionTrigger,
           testVariant: {
             id: variant.id,
             handle: variant.handle
-          }
+          },
+          impression: impressionSectionIds.length > 0 ? { sectionIds: impressionSectionIds } : void 0
         };
-        debug2("[Pack Test LocalResolver] Variant selected:", JSON.stringify(result));
+        debug2(
+          "[Pack Test LocalResolver] Variant selected:",
+          JSON.stringify(result)
+        );
         return result;
       }
     }
@@ -5131,26 +5159,34 @@ var LocalTestResolver = class {
    * Evaluate rules using json-rules-engine (same as tests-service)
    */
   async evaluateRules(tests, attributes) {
-    debug2("[Pack Test LocalResolver] Starting rule evaluation:", JSON.stringify({
-      totalTests: tests.length,
-      attributes,
-      isClientSide: typeof window !== "undefined"
-    }));
+    debug2(
+      "[Pack Test LocalResolver] Starting rule evaluation:",
+      JSON.stringify({
+        totalTests: tests.length,
+        attributes,
+        isClientSide: typeof window !== "undefined"
+      })
+    );
     if (typeof window !== "undefined") {
       debug2("[Pack Test LocalResolver] Client side - returning all tests");
       return tests;
     }
     const engineResultsPromises = tests.map((test, index) => {
       const { rules } = test;
-      debug2(`[Pack Test LocalResolver] Processing test ${index}:`, JSON.stringify({
-        testId: test.id,
-        testHandle: test.handle,
-        rulesCount: rules?.length || 0,
-        rules
-      }));
+      debug2(
+        `[Pack Test LocalResolver] Processing test ${index}:`,
+        JSON.stringify({
+          testId: test.id,
+          testHandle: test.handle,
+          rulesCount: rules?.length || 0,
+          rules
+        })
+      );
       if (rules && Array.isArray(rules)) {
         if (rules.length === 0) {
-          debug2(`[Pack Test LocalResolver] Test ${test.handle} has no rules - targeting all`);
+          debug2(
+            `[Pack Test LocalResolver] Test ${test.handle} has no rules - targeting all`
+          );
           return Promise.resolve({
             events: [{ type: "targeted" }]
           });
@@ -5162,7 +5198,10 @@ var LocalTestResolver = class {
             operator: rule.operator,
             value: rule.value
           }));
-          debug2(`[Pack Test LocalResolver] Test ${test.handle} engine conditions:`, JSON.stringify(engineConditionalProperties));
+          debug2(
+            `[Pack Test LocalResolver] Test ${test.handle} engine conditions:`,
+            JSON.stringify(engineConditionalProperties)
+          );
           const engineRules = [
             new import_json_rules_engine.Rule({
               conditions: {
@@ -5209,29 +5248,46 @@ var LocalTestResolver = class {
             (factValue) => !factValue
           );
           const result = engine.run(attributes);
-          debug2(`[Pack Test LocalResolver] Engine result for test ${test.handle}:`, JSON.stringify(result));
+          debug2(
+            `[Pack Test LocalResolver] Engine result for test ${test.handle}:`,
+            JSON.stringify(result)
+          );
           return result;
         }
       }
-      debug2(`[Pack Test LocalResolver] Test ${test.handle} has invalid rules`);
+      debug2(
+        `[Pack Test LocalResolver] Test ${test.handle} has invalid rules`
+      );
       return void 0;
     });
     const engineResults = await Promise.all(engineResultsPromises);
-    debug2("[Pack Test LocalResolver] All engine results:", JSON.stringify(engineResults));
-    const eligibleTests = tests.filter(
-      (test, index) => {
-        const hasTargetedEvent = !!engineResults?.[index]?.events.find((event) => event.type === "targeted");
-        debug2(`[Pack Test LocalResolver] Test ${test.handle} eligibility:`, JSON.stringify({
+    debug2(
+      "[Pack Test LocalResolver] All engine results:",
+      JSON.stringify(engineResults)
+    );
+    const eligibleTests = tests.filter((test, index) => {
+      const hasTargetedEvent = !!engineResults?.[index]?.events.find(
+        (event) => event.type === "targeted"
+      );
+      debug2(
+        `[Pack Test LocalResolver] Test ${test.handle} eligibility:`,
+        JSON.stringify({
           hasTargetedEvent,
           events: engineResults?.[index]?.events
-        }));
-        return hasTargetedEvent;
-      }
+        })
+      );
+      return hasTargetedEvent;
+    });
+    debug2(
+      "[Pack Test LocalResolver] Final eligible tests:",
+      JSON.stringify({
+        eligibleCount: eligibleTests.length,
+        eligibleTests: eligibleTests.map((t) => ({
+          id: t.id,
+          handle: t.handle
+        }))
+      })
     );
-    debug2("[Pack Test LocalResolver] Final eligible tests:", JSON.stringify({
-      eligibleCount: eligibleTests.length,
-      eligibleTests: eligibleTests.map((t) => ({ id: t.id, handle: t.handle }))
-    }));
     return eligibleTests;
   }
   /**
@@ -5274,16 +5330,26 @@ var QUERY_TESTS_BY_RULES = `#graphql
             operator
             value
           }
+          impressionTrigger
           testVariants {
             id
             handle
             trafficPercentage
+            sectionTestVariants {
+              section {
+                id
+              }
+            }
           }
         }
       }
     }
   }
 `;
+function getImpressionSectionIds2(testVariant) {
+  const sectionIds = testVariant?.sectionTestVariants?.map((variant) => variant?.section?.id).filter((id) => Boolean(id)) || [];
+  return [...new Set(sectionIds)];
+}
 var localTestResolver = new LocalTestResolver();
 function generateTestRulesCacheKey(storeId, contentEnvironment) {
   return `pack-tests:${storeId}:${contentEnvironment || "default"}`;
@@ -5497,13 +5563,16 @@ async function packClientFetchTestByRules(packClient, testTargetAudienceAttribut
                 (v) => v.id === currentTestData.testVariant.id
               );
               if (currentVariant) {
+                const impressionSectionIds = getImpressionSectionIds2(currentVariant);
                 const refreshedTest = {
                   id: freshTestData.id,
                   handle: freshTestData.handle,
+                  impressionTrigger: freshTestData.impressionTrigger,
                   testVariant: {
                     id: currentVariant.id,
                     handle: currentVariant.handle
                   },
+                  impression: impressionSectionIds.length > 0 ? { sectionIds: impressionSectionIds } : void 0,
                   isFirstExposure: void 0
                 };
                 const { isFirstExposure: isFirstExposure2, ...testDataWithoutFlag2 } = refreshedTest;
@@ -5551,13 +5620,16 @@ async function packClientFetchTestByRules(packClient, testTargetAudienceAttribut
           (v) => v.id === exposedTest.testVariant?.id
         );
         if (exposedVariant) {
+          const impressionSectionIds = getImpressionSectionIds2(exposedVariant);
           const result2 = {
             id: freshTestData.id,
             handle: freshTestData.handle,
+            impressionTrigger: freshTestData.impressionTrigger,
             testVariant: {
               id: exposedVariant.id,
               handle: exposedVariant.handle
             },
+            impression: impressionSectionIds.length > 0 ? { sectionIds: impressionSectionIds } : void 0,
             isFirstExposure: void 0
           };
           const { isFirstExposure: isFirstExposure2, ...testDataWithoutFlag2 } = result2;
@@ -6572,8 +6644,35 @@ var PackTestContext = createContext({});
 var usePackTestContext = () => useContext(PackTestContext);
 
 // src/tests/pack-test-route.ts
-var usePackLoaderData = () => {
+function getImpressionSectionSelectors(packTestInfo) {
+  const sectionIds = packTestInfo.impression?.sectionIds || [];
+  return [...new Set(sectionIds)].map(
+    (sectionId) => `section[data-comp-id="${sectionId}"]`
+  );
+}
+function getImpressionSelectors(packTestInfo, impressionSelector) {
+  if (!impressionSelector) {
+    return getImpressionSectionSelectors(packTestInfo);
+  }
+  const resolvedSelector = typeof impressionSelector === "function" ? impressionSelector(packTestInfo) : impressionSelector;
+  if (!resolvedSelector) {
+    return getImpressionSectionSelectors(packTestInfo);
+  }
+  return Array.isArray(resolvedSelector) ? resolvedSelector : [resolvedSelector];
+}
+function serializeExposedTestCookieValue(packTestInfo) {
+  return JSON.stringify({
+    id: packTestInfo.id,
+    handle: packTestInfo.handle,
+    testVariant: {
+      id: packTestInfo.testVariant.id,
+      handle: packTestInfo.testVariant.handle
+    }
+  });
+}
+var usePackLoaderData = (impressionSelector) => {
   const [exposedTestInfo, setExposedTestInfo] = useState();
+  const [triggeredExposure, setTriggeredExposure] = useState();
   let packTestInfo;
   let packIsPreviewMode;
   let revalidator;
@@ -6597,61 +6696,216 @@ var usePackLoaderData = () => {
   } = usePackTestContext();
   const exposedTestCookieString = api.get("exposedTest");
   useEffect2(() => {
-    if (packTestInfo && !packIsPreviewMode && !hasUserConsent2 && exposedTestCookieString && exposedTestInfo) {
-      setPendingExposureQueue?.((prev) => {
-        const newQueue = new Map(prev);
-        newQueue.set(packTestInfo.id, {
-          packTestInfo,
-          exposureTime: Date.now()
+    if (packTestInfo?.id !== triggeredExposure?.packTestInfo.id) {
+      setTriggeredExposure(void 0);
+      return;
+    }
+    if (packTestInfo?.testVariant?.id !== triggeredExposure?.packTestInfo.testVariant.id) {
+      setTriggeredExposure(void 0);
+    }
+  }, [triggeredExposure, packTestInfo]);
+  useEffect2(() => {
+    if (!packTestInfo || !!packIsPreviewMode || !!exposedTestCookieString || !!exposedTestInfo) {
+      return;
+    }
+    if (triggeredExposure?.packTestInfo.id === packTestInfo.id && triggeredExposure.packTestInfo.testVariant.id === packTestInfo.testVariant.id) {
+      return;
+    }
+    if (packTestInfo.impressionTrigger !== "ON_ELEMENT_VIEW" || typeof window === "undefined" || typeof IntersectionObserver === "undefined") {
+      setTriggeredExposure({
+        packTestInfo,
+        exposureTime: Date.now()
+      });
+      return;
+    }
+    const impressionSectionSelectors = getImpressionSelectors(
+      packTestInfo,
+      impressionSelector
+    );
+    if (impressionSectionSelectors.length === 0) {
+      console.warn(
+        `[Pack Test] Test "${packTestInfo.id}" uses ON_ELEMENT_VIEW but has no selectors to observe. Impression will not be tracked.`
+      );
+      return;
+    }
+    let isTriggered = false;
+    const observedElements = /* @__PURE__ */ new Set();
+    let observer;
+    let mutationObserver;
+    let observerTimeoutId;
+    const cleanup = () => {
+      observer?.disconnect();
+      mutationObserver?.disconnect();
+      if (observerTimeoutId) {
+        clearTimeout(observerTimeoutId);
+      }
+    };
+    const triggerImpression = () => {
+      if (isTriggered) return;
+      isTriggered = true;
+      cleanup();
+      setTriggeredExposure({
+        packTestInfo,
+        exposureTime: Date.now()
+      });
+    };
+    const observeMatchingElements = () => {
+      if (!observer || isTriggered) return;
+      impressionSectionSelectors.forEach((selector) => {
+        document.querySelectorAll(selector).forEach((element) => {
+          if (observedElements.has(element)) return;
+          observedElements.add(element);
+          observer?.observe(element);
         });
-        return newQueue;
       });
+      if (observedElements.size > 0) {
+        mutationObserver?.disconnect();
+        mutationObserver = void 0;
+        if (observerTimeoutId) {
+          clearTimeout(observerTimeoutId);
+          observerTimeoutId = void 0;
+        }
+      }
+    };
+    observer = new IntersectionObserver(
+      (entries) => {
+        if (entries.some((entry) => entry.isIntersecting)) {
+          triggerImpression();
+        }
+      },
+      { threshold: 0.1 }
+    );
+    observeMatchingElements();
+    if (!isTriggered && observedElements.size === 0 && typeof MutationObserver !== "undefined") {
+      mutationObserver = new MutationObserver(() => {
+        observeMatchingElements();
+      });
+      mutationObserver.observe(document.body, {
+        childList: true,
+        subtree: true
+      });
+      observerTimeoutId = setTimeout(() => {
+        if (!isTriggered && observedElements.size === 0) {
+          console.warn(
+            `[Pack Test] Impression target not found within 30s for test "${packTestInfo.id}". Stopping observer.`
+          );
+          cleanup();
+        }
+      }, 3e4);
     }
+    return cleanup;
   }, [
-    hasUserConsent2,
+    triggeredExposure,
+    exposedTestCookieString,
+    exposedTestInfo,
+    packIsPreviewMode,
     packTestInfo,
+    impressionSelector
+  ]);
+  useEffect2(() => {
+    if (triggeredExposure && !packIsPreviewMode && !hasUserConsent2 && !exposedTestCookieString) {
+      setPendingExposureQueue?.((prev) => {
+        if (prev.has(triggeredExposure.packTestInfo.id)) return prev;
+        const nextQueue = new Map(prev);
+        nextQueue.set(triggeredExposure.packTestInfo.id, triggeredExposure);
+        return nextQueue;
+      });
+    }
+  }, [
+    triggeredExposure,
+    hasUserConsent2,
     packIsPreviewMode,
     exposedTestCookieString,
-    exposedTestInfo
+    setPendingExposureQueue
   ]);
   useEffect2(() => {
-    if (packTestInfo && hasUserConsent2 && !exposedTestCookieString && !packIsPreviewMode && !exposedTestInfo) {
+    if (triggeredExposure && hasUserConsent2 && !exposedTestCookieString && !packIsPreviewMode && !exposedTestInfo) {
+      const { packTestInfo: activeTestInfo, exposureTime } = triggeredExposure;
       const expires = /* @__PURE__ */ new Date();
       expires.setHours(expires.getHours() + 24);
-      api.set("exposedTest", JSON.stringify(packTestInfo), {
-        expires
-      });
-      setExposedTestInfo(packTestInfo);
+      api.set(
+        "exposedTest",
+        serializeExposedTestCookieValue(activeTestInfo),
+        {
+          expires
+        }
+      );
+      setExposedTestInfo(activeTestInfo);
       pendingExposureQueue?.forEach((data, key) => {
+        if (key === activeTestInfo.id) return;
         try {
           testExposureCallback?.({
             ...data.packTestInfo,
             exposureTime: data.exposureTime
           });
-          setPendingExposureQueue?.((prev) => {
-            const newQueue = new Map(prev);
-            newQueue.delete(key);
-            return newQueue;
-          });
         } catch (error) {
           console.error("Failed to call testExposure after consent:", error);
         }
       });
-      testExposureCallback?.({ ...packTestInfo, exposureTime: Date.now() });
+      testExposureCallback?.({ ...activeTestInfo, exposureTime });
+      setPendingExposureQueue?.(/* @__PURE__ */ new Map());
       setTimeout(() => {
         revalidator?.revalidate();
       }, 750);
     }
   }, [
-    packTestInfo,
+    triggeredExposure,
+    exposedTestCookieString,
+    pendingExposureQueue,
     testExposureCallback,
     exposedTestInfo,
     hasUserConsent2,
-    packIsPreviewMode
+    packIsPreviewMode,
+    setPendingExposureQueue
+  ]);
+  useEffect2(() => {
+    if (!!triggeredExposure || !hasUserConsent2 || !!packIsPreviewMode || !pendingExposureQueue?.size || !!exposedTestCookieString) {
+      return;
+    }
+    let firstQueuedTest;
+    pendingExposureQueue.forEach((data) => {
+      if (!firstQueuedTest) {
+        firstQueuedTest = data.packTestInfo;
+      }
+      try {
+        testExposureCallback?.({
+          ...data.packTestInfo,
+          exposureTime: data.exposureTime
+        });
+      } catch (error) {
+        console.error(
+          "Failed to call queued testExposure after consent:",
+          error
+        );
+      }
+    });
+    if (firstQueuedTest) {
+      const expires = /* @__PURE__ */ new Date();
+      expires.setHours(expires.getHours() + 24);
+      api.set(
+        "exposedTest",
+        serializeExposedTestCookieValue(firstQueuedTest),
+        {
+          expires
+        }
+      );
+      setExposedTestInfo(firstQueuedTest);
+    }
+    setPendingExposureQueue?.(/* @__PURE__ */ new Map());
+  }, [
+    triggeredExposure,
+    exposedTestCookieString,
+    hasUserConsent2,
+    packIsPreviewMode,
+    pendingExposureQueue,
+    setPendingExposureQueue,
+    testExposureCallback
   ]);
 };
-var PackTestRoute = () => {
-  usePackLoaderData();
+var PackTestRoute = ({
+  impressionSelector
+} = {}) => {
+  usePackLoaderData(impressionSelector);
   return null;
 };