@ecopages/react-router 0.2.0-alpha.5 → 0.2.0-alpha.51

package/src/router.js

@@ -1,5 +1,6 @@
 import {
   useEffect,
+  useEffectEvent,
   useState,
   useCallback,
   useMemo,
@@ -11,11 +12,24 @@ import {
 } from "react";
 import { DEFAULT_OPTIONS } from "./types.js";
 import { RouterContext } from "./context.js";
-import { getInterceptDecision, loadPageModule, shouldInterceptClick } from "./navigation.js";
+import {
+  fetchPageDocument,
+  getInterceptDecision,
+  isSamePageHashNavigationHref,
+  loadPageModuleFromDocument,
+  shouldInterceptClick
+} from "./navigation.js";
 import { morphHead } from "./head-morpher.js";
 import { applyViewTransitionNames } from "./view-transition-utils.js";
 import { manageScroll } from "./manage-scroll.js";
 import { saveScrollPositions, restoreScrollPositions } from "./scroll-persist.js";
+import {
+  getEcoNavigationRuntime
+} from "@ecopages/core/router/navigation-coordinator";
+import {
+  getAnchorFromNavigationEvent,
+  recoverPendingNavigationHref
+} from "@ecopages/core/router/link-intent";
 const PageContext = createContext(null);
 const PersistLayoutsContext = createContext(false);
 function getLayoutFromPage(Page) {
@@ -54,9 +68,10 @@ const PageContent = () => {
     }
     return null;
   }
-  const { Component: Page, props } = pageContext;
+  const { Component: Page, props, refreshPersistedLayout } = pageContext;
   const Layout = getLayoutFromPage(Page);
   const pageElement = createElement(Page, props);
+  const layoutProps = props?.locals ? { locals: props.locals } : null;
   if (!Layout) {
     return pageElement;
   }
@@ -65,13 +80,13 @@ const PageContent = () => {
     const layoutConfig = Layout.config;
     const layoutKeyRaw = layoutConfig?.__eco?.id || Layout.displayName || Layout.name || "layout";
     const layoutKey = normalizeLayoutKey(layoutKeyRaw);
-    if (!layoutCache.has(layoutKey)) {
+    if (!layoutCache.has(layoutKey) || refreshPersistedLayout && layoutCache.get(layoutKey) !== Layout) {
       layoutCache.set(layoutKey, Layout);
     }
     const CachedLayout = layoutCache.get(layoutKey);
-    return createElement(CachedLayout, { key: layoutKey }, pageElement);
+    return createElement(CachedLayout, { key: layoutKey, ...layoutProps ?? {} }, pageElement);
   }
-  return createElement(Layout, null, pageElement);
+  return createElement(Layout, layoutProps, pageElement);
 };
 function createDeferred() {
   let resolve;
@@ -80,46 +95,86 @@ function createDeferred() {
   });
   return { promise, resolve };
 }
-function useHmrReload(navigate) {
+function useNavigationCoordinator(navigate, activeNavigationRef, isNavigatingRef, runtimeActiveRef) {
+  const handleCoordinatorNavigate = useEffectEvent(async (request) => {
+    await navigate(request.href, {
+      isPopState: request.direction === "back",
+      pushHistory: request.direction === "forward",
+      skipViewTransition: request.source === "browser-router"
+    });
+    return true;
+  });
+  const handleCoordinatorReload = useEffectEvent(async (request) => {
+    if (activeNavigationRef.current || isNavigatingRef.current) {
+      return;
+    }
+    if (request?.clearCache) {
+      clearLayoutCache();
+    }
+    const currentUrl = window.location.pathname + window.location.search;
+    await navigate(currentUrl, { moduleUrlOverride: request?.moduleUrl });
+  });
+  const handleCleanupBeforeHandoff = useEffectEvent(async () => {
+    runtimeActiveRef.current = false;
+    window.__ECO_PAGES__?.react?.cleanupPageRoot?.();
+  });
   useEffect(() => {
-    if (typeof window === "undefined") return;
-    if (import.meta.env?.MODE === "production" || import.meta.env?.PROD) return;
-    const windowWithHmr = window;
-    windowWithHmr.__ecopages_reload_current_page__ = async (options) => {
-      if (options?.clearCache) {
-        clearLayoutCache();
+    const navigationRuntime = getEcoNavigationRuntime(window);
+    let unregisterRuntime = null;
+    const unregister = navigationRuntime.register({
+      owner: "react-router",
+      navigate: handleCoordinatorNavigate,
+      reloadCurrentPage: handleCoordinatorReload,
+      cleanupBeforeHandoff: async () => {
+        unregisterRuntime?.();
+        unregisterRuntime = null;
+        await handleCleanupBeforeHandoff();
       }
-      const currentUrl = window.location.pathname + window.location.search;
-      await navigate(currentUrl);
-    };
+    });
+    unregisterRuntime = unregister;
+    navigationRuntime.claimOwnership("react-router");
+    runtimeActiveRef.current = true;
     return () => {
-      windowWithHmr.__ecopages_reload_current_page__ = void 0;
+      runtimeActiveRef.current = false;
+      navigationRuntime.releaseOwnership("react-router");
+      unregisterRuntime?.();
+      unregisterRuntime = null;
     };
-  }, [navigate]);
+  }, [runtimeActiveRef]);
 }
 const EcoRouter = ({ page, pageProps, options: userOptions, children }) => {
   const options = useMemo(() => ({ ...DEFAULT_OPTIONS, ...userOptions }), [userOptions]);
-  const [currentPage, setCurrentPage] = useState({ Component: page, props: pageProps });
+  const [currentPage, setCurrentPage] = useState({
+    Component: page,
+    props: pageProps,
+    refreshPersistedLayout: false
+  });
   const [isNavigating, setIsNavigating] = useState(false);
-  const [pendingPage, setPendingPage] = useState(null);
-  const renderDfd = useRef(null);
-  const pendingScrollRestoreRef = useRef(null);
+  const pendingRenderRef = useRef(null);
+  const activeNavigationRef = useRef(null);
+  const isNavigatingRef = useRef(false);
+  const runtimeActiveRef = useRef(true);
+  const pendingPointerNavigationRef = useRef(null);
+  const pendingHoverNavigationRef = useRef(null);
+  const queuedNavigationHrefRef = useRef(null);
+  const committedPathRef = useRef(
+    typeof window !== "undefined" ? window.location.pathname + window.location.search : ""
+  );
   const previousUrlRef = useRef(typeof window !== "undefined" ? window.location.href : "");
   useEffect(() => {
-    setCurrentPage({ Component: page, props: pageProps });
+    isNavigatingRef.current = isNavigating;
+  }, [isNavigating]);
+  useEffect(() => {
+    setCurrentPage({ Component: page, props: pageProps, refreshPersistedLayout: true });
   }, [page, pageProps]);
   useEffect(() => {
+    committedPathRef.current = window.location.pathname + window.location.search;
     applyViewTransitionNames();
-  }, [currentPage]);
-  useEffect(() => {
-    if (pendingPage && currentPage.Component === pendingPage.Component && renderDfd.current) {
-      renderDfd.current.resolve();
-      renderDfd.current = null;
-      setPendingPage(null);
+    const pendingRender = pendingRenderRef.current;
+    if (pendingRender && currentPage.Component === pendingRender.page.Component && currentPage.props === pendingRender.page.props) {
+      pendingRender.resolve();
+      pendingRenderRef.current = null;
     }
-  }, [currentPage, pendingPage]);
-  useEffect(() => {
-    if (typeof window === "undefined") return;
     const url = new URL(window.location.href);
     const previousUrl = new URL(previousUrlRef.current);
     if (url.href !== previousUrl.href) {
@@ -129,85 +184,313 @@ const EcoRouter = ({ page, pageProps, options: userOptions, children }) => {
       });
       previousUrlRef.current = url.href;
     }
-    if (pendingScrollRestoreRef.current) {
-      const { url: targetUrl, isPopState } = pendingScrollRestoreRef.current;
-      restoreScrollPositions(targetUrl, isPopState);
-      pendingScrollRestoreRef.current = null;
-    }
   }, [currentPage, options.scrollBehavior, options.smoothScroll]);
+  useEffect(() => {
+    return () => {
+      activeNavigationRef.current?.cancel();
+      pendingRenderRef.current?.resolve();
+      pendingRenderRef.current = null;
+      queuedNavigationHrefRef.current = null;
+    };
+  }, []);
   const navigate = useCallback(
-    async (url, isPopState = false) => {
-      setIsNavigating(true);
-      const result = await loadPageModule(url);
-      if (result) {
-        const { Component, props, doc, finalPath } = result;
-        const nextPage = { Component, props };
-        const cleanupHead = await morphHead(doc);
-        applyViewTransitionNames();
-        if (finalPath !== url) {
-          window.history.replaceState(null, "", finalPath);
+    async (url, navigationOptions = {}) => {
+      const {
+        isPopState = false,
+        pushHistory = false,
+        skipViewTransition = false,
+        moduleUrlOverride
+      } = navigationOptions;
+      const navigationRuntime = getEcoNavigationRuntime(window);
+      const navigation = navigationRuntime.beginNavigationTransaction();
+      activeNavigationRef.current = navigation;
+      const navigationId = navigation.id;
+      const isStale = () => !navigation.isCurrent();
+      const commitPageData = (moduleUrl, props) => {
+        window.__ECO_PAGES__ = window.__ECO_PAGES__ || {};
+        window.__ECO_PAGES__.page = {
+          module: moduleUrl,
+          props
+        };
+      };
+      const preparePendingRender = (nextPage) => {
+        pendingRenderRef.current?.resolve();
+        const renderDfd = createDeferred();
+        pendingRenderRef.current = {
+          navigationId,
+          page: nextPage,
+          resolve: renderDfd.resolve
+        };
+        return renderDfd.promise;
+      };
+      let navigationCommitPromise = null;
+      try {
+        setIsNavigating(true);
+        const fetchedPage = await fetchPageDocument(url, { signal: navigation.signal });
+        if (isStale()) return;
+        if (!fetchedPage) {
+          window.location.href = url;
+          return;
         }
-        saveScrollPositions();
-        pendingScrollRestoreRef.current = { url, isPopState };
-        if (options.viewTransitions && document.startViewTransition) {
-          renderDfd.current = createDeferred();
-          setPendingPage(nextPage);
-          document.startViewTransition(async () => {
-            startTransition(() => {
-              setCurrentPage(nextPage);
-            });
-            await renderDfd.current?.promise;
+        const result = await loadPageModuleFromDocument(fetchedPage.doc, fetchedPage.finalPath, {
+          moduleUrlOverride
+        });
+        if (isStale()) return;
+        if (result) {
+          const { Component, props, doc, finalPath, moduleUrl } = result;
+          const nextPage = { Component, props, refreshPersistedLayout: Boolean(moduleUrlOverride) };
+          const { cleanup: cleanupHead, flushRerunScripts } = await morphHead(doc);
+          const finalizeCommittedNavigation = () => {
+            committedPathRef.current = finalPath;
+            flushRerunScripts();
             cleanupHead();
             applyViewTransitionNames();
-          });
-        } else {
-          setCurrentPage(nextPage);
-          cleanupHead();
+            restoreScrollPositions(finalPath, isPopState);
+          };
+          const commitNextPage = () => {
+            commitPageData(moduleUrl, props);
+            setCurrentPage(nextPage);
+          };
+          if (isStale()) {
+            cleanupHead();
+            return;
+          }
           applyViewTransitionNames();
+          saveScrollPositions();
+          if (pushHistory) {
+            window.history.pushState(null, "", finalPath);
+          } else if (finalPath !== url) {
+            window.history.replaceState(null, "", finalPath);
+          }
+          if (!skipViewTransition && options.viewTransitions && document.startViewTransition) {
+            const renderPromise = preparePendingRender(nextPage);
+            navigationCommitPromise = new Promise((resolve) => {
+              document.startViewTransition(async () => {
+                try {
+                  if (isStale()) {
+                    if (pendingRenderRef.current?.navigationId === navigationId) {
+                      pendingRenderRef.current.resolve();
+                      pendingRenderRef.current = null;
+                    }
+                    cleanupHead();
+                    return;
+                  }
+                  startTransition(() => {
+                    commitNextPage();
+                  });
+                  await renderPromise;
+                  if (isStale()) {
+                    return;
+                  }
+                  finalizeCommittedNavigation();
+                } finally {
+                  resolve();
+                }
+              });
+            });
+            await navigationCommitPromise;
+          } else {
+            const renderPromise = preparePendingRender(nextPage);
+            commitNextPage();
+            await renderPromise;
+            if (isStale()) {
+              cleanupHead();
+              return;
+            }
+            finalizeCommittedNavigation();
+          }
+        } else {
+          if (isStale()) return;
+          const handled = await navigationRuntime.requestHandoff({
+            href: url,
+            finalHref: fetchedPage.finalPath,
+            direction: isPopState ? "back" : pushHistory ? "forward" : "replace",
+            source: "react-router",
+            targetOwner: "browser-router",
+            document: fetchedPage.doc,
+            html: fetchedPage.html,
+            isStaleSourceNavigation: isStale
+          });
+          if (!handled) {
+            window.location.assign(fetchedPage.finalPath);
+          }
+        }
+        if (!isStale()) {
+          setIsNavigating(false);
         }
-      } else {
-        if (options.debug) {
-          console.error("[EcoRouter] Falling back to full page navigation:", url);
+      } finally {
+        const shouldReplayQueuedNavigation = activeNavigationRef.current?.id === navigationId;
+        const queuedNavigationHref = shouldReplayQueuedNavigation ? queuedNavigationHrefRef.current : null;
+        const queuedNavigationPath = queuedNavigationHref ? new URL(queuedNavigationHref, window.location.origin).pathname + new URL(queuedNavigationHref, window.location.origin).search : null;
+        navigation.complete();
+        if (activeNavigationRef.current?.id === navigationId) {
+          activeNavigationRef.current = null;
+        }
+        if (queuedNavigationHref && queuedNavigationPath !== committedPathRef.current) {
+          queuedNavigationHrefRef.current = null;
+          if (runtimeActiveRef.current) {
+            void navigate(queuedNavigationHref, { pushHistory: true });
+          } else {
+            void navigationRuntime.requestNavigation({
+              href: queuedNavigationHref,
+              direction: "forward",
+              source: "react-router"
+            }).then((handled) => {
+              if (!handled) {
+                window.location.assign(queuedNavigationHref);
+              }
+            });
+          }
         }
-        window.location.href = url;
       }
-      setIsNavigating(false);
     },
-    [options.viewTransitions, options.debug]
+    [options.viewTransitions]
   );
-  useEffect(() => {
-    const handleClick = (event) => {
-      const link = event.target.closest(options.linkSelector);
-      if (!link) return;
-      if (!shouldInterceptClick(event, link, options)) {
-        if (options.debug) {
-          const decision = getInterceptDecision(event, link, options);
-          if (!decision.shouldIntercept) {
-            console.debug("[EcoRouter] Not intercepting link click:", decision.reason, link.href);
-          }
-        }
+  const getLinkFromEvent = useEffectEvent(
+    (event) => getAnchorFromNavigationEvent(event, options.linkSelector)
+  );
+  const getRecoveredPointerHref = useEffectEvent(() => {
+    const href = recoverPendingNavigationHref(
+      pendingPointerNavigationRef.current,
+      !!activeNavigationRef.current || isNavigatingRef.current,
+      performance.now()
+    );
+    if (!href) {
+      pendingPointerNavigationRef.current = null;
+    }
+    return href;
+  });
+  const getRecoveredHoverHref = useEffectEvent(() => {
+    const href = recoverPendingNavigationHref(
+      pendingHoverNavigationRef.current,
+      !!activeNavigationRef.current || isNavigatingRef.current,
+      performance.now()
+    );
+    if (!href) {
+      pendingHoverNavigationRef.current = null;
+    }
+    return href;
+  });
+  const handleHoverIntent = useEffectEvent((event) => {
+    if (!runtimeActiveRef.current) {
+      return;
+    }
+    const link = getLinkFromEvent(event);
+    if (!link) {
+      return;
+    }
+    const decision = getInterceptDecision(event, link, options);
+    if (!decision.shouldIntercept) {
+      return;
+    }
+    pendingHoverNavigationRef.current = {
+      href: link.getAttribute("href"),
+      timestamp: performance.now()
+    };
+    queuedNavigationHrefRef.current = link.getAttribute("href");
+  });
+  const handlePointerDown = useEffectEvent((event) => {
+    if (!runtimeActiveRef.current) {
+      pendingPointerNavigationRef.current = null;
+      return;
+    }
+    const link = getLinkFromEvent(event);
+    if (!link) {
+      pendingPointerNavigationRef.current = null;
+      return;
+    }
+    const decision = getInterceptDecision(event, link, options);
+    pendingPointerNavigationRef.current = decision.shouldIntercept ? {
+      href: link.getAttribute("href"),
+      timestamp: performance.now()
+    } : null;
+    if (decision.shouldIntercept && (activeNavigationRef.current || isNavigatingRef.current)) {
+      queuedNavigationHrefRef.current = link.getAttribute("href");
+    }
+  });
+  const handleClick = useEffectEvent((event) => {
+    if (!runtimeActiveRef.current) {
+      pendingPointerNavigationRef.current = null;
+      pendingHoverNavigationRef.current = null;
+      return;
+    }
+    const link = getLinkFromEvent(event);
+    if (!link) {
+      const recoveredHref = getRecoveredPointerHref() ?? getRecoveredHoverHref();
+      pendingPointerNavigationRef.current = null;
+      pendingHoverNavigationRef.current = null;
+      if (!recoveredHref) {
+        return;
+      }
+      if (isSamePageHashNavigationHref(recoveredHref)) {
+        queuedNavigationHrefRef.current = null;
         return;
       }
       event.preventDefault();
-      const href = link.getAttribute("href");
-      const url = new URL(href, window.location.origin);
+      queuedNavigationHrefRef.current = null;
+      const recoveredUrl = new URL(recoveredHref, window.location.href);
+      navigate(recoveredUrl.pathname + recoveredUrl.search, { pushHistory: true });
+      return;
+    }
+    if (!shouldInterceptClick(event, link, options)) {
       if (options.debug) {
-        console.debug("[EcoRouter] Intercepting navigation:", url.pathname + url.search);
+        const decision = getInterceptDecision(event, link, options);
+        if (!decision.shouldIntercept) {
+          console.debug("[EcoRouter] Not intercepting link click:", decision.reason, link.href);
+        }
       }
-      window.history.pushState(null, "", url.href);
-      navigate(url.pathname + url.search);
+      pendingPointerNavigationRef.current = null;
+      pendingHoverNavigationRef.current = null;
+      return;
+    }
+    pendingPointerNavigationRef.current = null;
+    pendingHoverNavigationRef.current = null;
+    event.preventDefault();
+    queuedNavigationHrefRef.current = null;
+    const href = link.getAttribute("href");
+    const url = new URL(href, window.location.origin);
+    if (options.debug) {
+      console.debug("[EcoRouter] Intercepting navigation:", url.pathname + url.search);
+    }
+    navigate(url.pathname + url.search, { pushHistory: true });
+  });
+  const handlePopState = useEffectEvent(() => {
+    if (!runtimeActiveRef.current) {
+      return;
+    }
+    navigate(window.location.pathname + window.location.search, { isPopState: true });
+  });
+  useEffect(() => {
+    const onHoverIntent = (event) => {
+      handleHoverIntent(event);
+    };
+    const onPointerDown = (event) => {
+      handlePointerDown(event);
+    };
+    const onClick = (event) => {
+      handleClick(event);
     };
-    const handlePopState = () => {
-      navigate(window.location.pathname + window.location.search, true);
+    const onPopState = () => {
+      handlePopState();
     };
-    document.addEventListener("click", handleClick);
-    window.addEventListener("popstate", handlePopState);
+    document.addEventListener("mouseover", onHoverIntent, true);
+    document.addEventListener("pointerover", onHoverIntent, true);
+    document.addEventListener("mousemove", onHoverIntent, true);
+    document.addEventListener("pointermove", onHoverIntent, true);
+    document.addEventListener("pointerdown", onPointerDown, true);
+    document.addEventListener("click", onClick, true);
+    window.addEventListener("popstate", onPopState);
     return () => {
-      document.removeEventListener("click", handleClick);
-      window.removeEventListener("popstate", handlePopState);
+      document.removeEventListener("mouseover", onHoverIntent, true);
+      document.removeEventListener("pointerover", onHoverIntent, true);
+      document.removeEventListener("mousemove", onHoverIntent, true);
+      document.removeEventListener("pointermove", onHoverIntent, true);
+      document.removeEventListener("pointerdown", onPointerDown, true);
+      document.removeEventListener("click", onClick, true);
+      window.removeEventListener("popstate", onPopState);
     };
-  }, [navigate, options]);
-  useHmrReload(navigate);
+  }, []);
+  useNavigationCoordinator(navigate, activeNavigationRef, isNavigatingRef, runtimeActiveRef);
   return createElement(
     RouterContext.Provider,
     { value: { navigate, isNavigating } },

package/src/scroll-persist.js

@@ -28,19 +28,27 @@ function restoreScrollPositions(targetUrl, isPopState) {
     currentScrollSnapshot = null;
     return;
   }
-  requestAnimationFrame(() => {
+  const restore = (remainingAttempts) => {
     requestAnimationFrame(() => {
+      const restoredKeys = /* @__PURE__ */ new Set();
       document.querySelectorAll(PERSIST_SELECTOR).forEach((el) => {
         const key = getElementKey(el);
-        if (key && positions.has(key)) {
-          const pos = positions.get(key);
-          el.scrollTop = pos.top;
-          el.scrollLeft = pos.left;
+        if (!key || !positions.has(key)) {
+          return;
         }
+        const pos = positions.get(key);
+        el.scrollTop = pos.top;
+        el.scrollLeft = pos.left;
+        restoredKeys.add(key);
       });
-      currentScrollSnapshot = null;
+      if (restoredKeys.size === positions.size || remainingAttempts <= 1) {
+        currentScrollSnapshot = null;
+        return;
+      }
+      setTimeout(() => restore(remainingAttempts - 1), 50);
     });
-  });
+  };
+  restore(20);
 }
 function getScrollPositions(url) {
   return urlScrollStore.get(url);

package/CHANGELOG.md

@@ -1,12 +0,0 @@
-# Changelog
-
-All notable changes to `@ecopages/react-router` are documented here.
-
-> **Note:** Changelog tracking begins at version `0.2.0`. Changes prior to this release are not recorded here but are available in the git history.
-
-## [UNRELEASED] — TBD
-
-### Refactoring
-
-- Updated `package.json` dependencies to align with the new core adapter and esbuild build adapter versions.
-- Internal peer dependency declarations updated for React 18+ and the new `@ecopages/core` API surface.

package/browser.ts

@@ -1,17 +0,0 @@
-/**
- * Browser entry point for @ecopages/react-router.
- * This file exports only the client-side components needed for hydration.
- * @module
- */
-
-export { EcoRouter, PageContent } from './src/router.ts';
-export type { EcoRouterProps } from './src/router.ts';
-
-export { useRouter } from './src/context.ts';
-export type { RouterContextValue } from './src/context.ts';
-export { EcoPropsScript } from './src/props-script.ts';
-export type { EcoPropsScriptProps } from './src/props-script.ts';
-
-export { morphHead } from './src/head-morpher.ts';
-
-export type { PageState } from './src/navigation.ts';

package/src/adapter.ts

@@ -1,48 +0,0 @@
-/**
- * Router adapter for React integration.
- * @module
- */
-
-import type { ReactRouterAdapter } from '@ecopages/react/router-adapter';
-import type { EcoRouterOptions } from './types.ts';
-
-/**
- * Creates a ReactRouterAdapter for EcoPages React Router.
- * Use this with the React plugin to enable SPA navigation.
- *
- * @param options - Router configuration options
- * @example
- * ```ts
- * import { reactPlugin } from '@ecopages/react';
- * import { ecoRouter } from '@ecopages/react-router';
- *
- * export default {
- *   integrations: [reactPlugin({ router: ecoRouter() })],
- * };
- * ```
- *
- * @example
- * ```ts
- * // Disable view transitions
- * reactPlugin({ router: ecoRouter({ viewTransitions: false }) })
- * ```
- */
-export function ecoRouter(options?: EcoRouterOptions): ReactRouterAdapter {
-	return {
-		name: 'eco-router',
-		bundle: {
-			importPath: '@ecopages/react-router/browser.ts',
-			outputName: 'react-router-esm',
-			externals: ['react', 'react-dom', 'react/jsx-runtime', 'react/jsx-dev-runtime'],
-		},
-		importMapKey: '@ecopages/react-router',
-		components: {
-			router: 'EcoRouter',
-			pageContent: 'PageContent',
-		},
-		getRouterProps(page: string, props: string): string {
-			const optionsStr = options ? `, options: ${JSON.stringify(options)}` : '';
-			return `{ page: ${page}, pageProps: ${props}${optionsStr} }`;
-		},
-	};
-}