From 6b3bad44869bc933ebd466b587281509d437fa09 Mon Sep 17 00:00:00 2001
From: Simon Knott <info@simonknott.de>
Date: Wed, 11 Dec 2024 15:33:51 +0100
Subject: [PATCH] refactor to not subscribe

---
 packages/html-reporter/src/links.tsx | 42 ++++++++++------------------
 1 file changed, 14 insertions(+), 28 deletions(-)

diff --git a/packages/html-reporter/src/links.tsx b/packages/html-reporter/src/links.tsx
index 24b548cc1b..16278e586b 100644
--- a/packages/html-reporter/src/links.tsx
+++ b/packages/html-reporter/src/links.tsx
@@ -117,7 +117,20 @@ const kMissingContentType = 'x-playwright/missing';
 
 export type AnchorID = string | string[] | ((id: string) => boolean) | undefined;
 
-function matchesAnchor(id: AnchorID, anchor: string): boolean {
+export function useAnchor(id: AnchorID, onReveal: () => void) {
+  const searchParams = React.useContext(SearchParamsContext);
+  const isAnchored = useIsAnchored(id);
+  React.useEffect(() => {
+    if (isAnchored)
+      onReveal();
+  }, [isAnchored, onReveal, searchParams]);
+}
+
+export function useIsAnchored(id: AnchorID) {
+  const searchParams = React.useContext(SearchParamsContext);
+  const anchor = searchParams.get('anchor');
+  if (anchor === null)
+    return false;
   if (typeof id === 'undefined')
     return false;
   if (typeof id === 'string')
@@ -127,33 +140,6 @@ function matchesAnchor(id: AnchorID, anchor: string): boolean {
   return id(anchor);
 }
 
-export function useAnchor(id: AnchorID, onReveal: () => void) {
-  React.useEffect(() => {
-    if (typeof id === 'undefined')
-      return;
-
-    const listener = () => {
-      const params = new URLSearchParams(window.location.hash.slice(1));
-      if (params.has('anchor') && matchesAnchor(id, params.get('anchor')!))
-        onReveal();
-    };
-    window.addEventListener('popstate', listener);
-
-    // check if we're already on the anchor. required to make it work on page load.
-    listener();
-
-    return () => window.removeEventListener('popstate', listener);
-  }, [id, onReveal]);
-}
-
-export function useIsAnchored(id: AnchorID) {
-  const searchParams = React.useContext(SearchParamsContext);
-  if (!searchParams.has('anchor'))
-    return false;
-  const anchor = searchParams.get('anchor');
-  return matchesAnchor(id, anchor!);
-}
-
 export function Anchor({ id, children }: React.PropsWithChildren<{ id: AnchorID }>) {
   const ref = React.useRef<HTMLDivElement>(null);
   const onAnchorReveal = React.useCallback(() => {