Merge pull request #876 from grahammendick/function-deps

grahammendick · web-flow · commit 34f648bde4af · 2025-06-11T16:43:19.000+01:00
diff --git a/NavigationReact/sample/rsc-parcel/src/App.tsx b/NavigationReact/sample/rsc-parcel/src/App.tsx
@@ -18,7 +18,7 @@ const App = async ({url}: any) => {
             <SceneView active="people">
               <People />
             </SceneView>
-            <SceneView active="person" dataKeyDeps={['id']}>
+            <SceneView active="person" refetch={['id']}>
               <Person />
             </SceneView>
           </HmrProvider>
diff --git a/NavigationReact/sample/rsc-parcel/src/Filter.tsx b/NavigationReact/sample/rsc-parcel/src/Filter.tsx
@@ -1,7 +1,6 @@
 'use client'
-import { startTransition } from 'react';
+import { startTransition, useOptimistic } from 'react';
 import { RefreshLink, useNavigationEvent } from 'navigation-react';
-import { useOptimistic } from 'react';
 
 const Filter = () => {
     const {data, stateNavigator} = useNavigationEvent();
diff --git a/NavigationReact/sample/rsc-parcel/src/Person.tsx b/NavigationReact/sample/rsc-parcel/src/Person.tsx
@@ -1,7 +1,7 @@
 'use server-entry'
-import { getPerson } from './data';
 import { SceneView, NavigationBackLink, useNavigationEvent } from 'navigation-react';
-import Friends from "./Friends";
+import { getPerson } from './data';
+import Friends from './Friends';
 
 const Person = async () => {
   const {data} = useNavigationEvent();
diff --git a/NavigationReact/sample/rsc-webpack/src/App.js b/NavigationReact/sample/rsc-webpack/src/App.js
@@ -17,7 +17,7 @@ const App = async ({url}) => {
             <SceneView active="people">
               <People />
             </SceneView>
-            <SceneView active="person" dataKeyDeps={['id']}>
+            <SceneView active="person" refetch={['id']}>
               <Person />
             </SceneView>
           </HmrProvider>
diff --git a/NavigationReact/sample/rsc-webpack/src/Filter.js b/NavigationReact/sample/rsc-webpack/src/Filter.js
@@ -1,8 +1,7 @@
 'use client'
 import * as React from 'react';
-import { startTransition } from 'react';
+import { startTransition, useOptimistic } from 'react';
 import { RefreshLink, useNavigationEvent } from 'navigation-react';
-import { useOptimistic } from 'react';
 
 const Filter = () => {
     const {data, stateNavigator} = useNavigationEvent();
diff --git a/NavigationReact/sample/rsc-webpack/src/Person.js b/NavigationReact/sample/rsc-webpack/src/Person.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { SceneView, NavigationBackLink, useNavigationEvent } from 'navigation-react';
 import { getPerson } from './data.js';
-import Friends from "./Friends.js";
+import Friends from './Friends.js';
 
 const Person = async () => {
   const {data} = useNavigationEvent();
diff --git a/NavigationReact/src/ErrorBoundary.tsx b/NavigationReact/src/ErrorBoundary.tsx
@@ -1,4 +1,4 @@
-import React, { Component, ReactNode, cloneElement, createElement } from 'react';
+import { Component, ReactNode, cloneElement, createElement } from 'react';
 import { StateContext, StateNavigator } from 'navigation';
 import withStateNavigator from './withStateNavigator.js';
 
diff --git a/NavigationReact/src/NavigationReact.ts b/NavigationReact/src/NavigationReact.ts
@@ -7,5 +7,6 @@ import RefreshLink from './RefreshLink.js';
 import FluentLink from './FluentLink.js';
 import SceneView from './SceneView.js';
 import useNavigationEvent from './useNavigationEvent.js';
+import useRefetch from './useRefetch.js';
 
-export { NavigationContext, BundlerContext, NavigationHandler, NavigationBackLink, NavigationLink, RefreshLink, FluentLink, SceneView, useNavigationEvent };
+export { NavigationContext, BundlerContext, NavigationHandler, NavigationBackLink, NavigationLink, RefreshLink, FluentLink, SceneView, useNavigationEvent, useRefetch };
diff --git a/NavigationReact/src/Props.ts b/NavigationReact/src/Props.ts
@@ -34,7 +34,7 @@ interface FluentLinkProps extends LinkProps {
 
 interface SceneViewProps {
     active: string | string[] | ((stateContext: StateContext) => boolean);
-    dataKeyDeps: string[];
+    refetch: string[] | ((stateContext: StateContext) => boolean);
     name: string;
     errorFallback: ReactNode;
     children: any;
diff --git a/NavigationReact/src/RSCContext.ts b/NavigationReact/src/RSCContext.ts
@@ -0,0 +1,4 @@
+import { createContext } from 'react';
+import { StateContext } from 'navigation';
+
+export default createContext<{fetching: boolean, setRefetch: (refetch?: string[] | ((stateContext: StateContext) => boolean)) => void}>({fetching: false, setRefetch: null});
diff --git a/NavigationReact/src/SceneRSCView.tsx b/NavigationReact/src/SceneRSCView.tsx
@@ -1,22 +1,23 @@
 'use client'
-import React, { createContext, use, useContext, useEffect, useRef } from 'react';
+import React, { use, useContext, useEffect, useRef, useMemo } from 'react';
 import { SceneViewProps } from './Props.js';
 import useNavigationEvent from './useNavigationEvent.js';
 import BundlerContext from './BundlerContext.js';
+import RSCContext from './RSCContext.js';
 import ErrorBoundary from './ErrorBoundary.js';
 
 const rscCache: Map<any, Record<string, any>> = new Map();
 const historyCache = {};
-const RSCContext = createContext(false);
 
 const SceneViewInner = ({children}) => children?.then ? use(children) : children;
 
-const SceneRSCView = ({active, name, dataKeyDeps, errorFallback, children}: SceneViewProps & {active: string | string[]}) => {
+const SceneRSCView = ({active, name, refetch: serverRefetch, errorFallback, children}: SceneViewProps & {active: string | string[]}) => {
     const navigationEvent = useNavigationEvent();
+    const refetchRef = useRef(serverRefetch);
     const {state, oldState, data, stateNavigator: {stateContext, historyManager}} = navigationEvent;
     const {crumbs, nextCrumb: {crumblessUrl: url}, oldUrl, oldData, history, historyAction} = stateContext;
     const {deserialize} = useContext(BundlerContext);
-    const ancestorFetching = useContext(RSCContext);
+    const {fetching: ancestorFetching} = useContext(RSCContext);
     const sceneViewKey = name || (typeof active === 'string' ? active : active[0]);
     const getShow = (stateKey: string) => (
         active != null && state && (
@@ -29,28 +30,42 @@ const SceneRSCView = ({active, name, dataKeyDeps, errorFallback, children}: Scen
     if (!rscCache.get(navigationEvent)) rscCache.set(navigationEvent, {});
     const cachedSceneViews = rscCache.get(navigationEvent);
     const renderedSceneView = useRef({sceneView: undefined, navigationEvent: undefined});
-    let fetchedSceneView = cachedSceneViews[sceneViewKey];
-    const dataChanged = () => {
-        if (!getShow(oldState?.key) || !dataKeyDeps || ignoreCache) return true;
+    const fetching = (() => {
+        const refetch = refetchRef.current;
+        if (!show) return false;
+        if (!getShow(oldState?.key) || !refetch || ignoreCache) return true;
         if (oldUrl && oldUrl.split('crumb=').length - 1 !== crumbs.length) return true;
-        for(let i = 0; i < dataKeyDeps.length; i++) {
-            if (data[dataKeyDeps[i]] !== oldData[dataKeyDeps[i]])
-                return true;
+        if (typeof refetch === 'function') return refetch(stateContext);
+        for(let i = 0; i < refetch.length; i++) {
+            if (data[refetch[i]] !== oldData[refetch[i]]) return true;
         }
         return false;
-    };
+    })();
     const firstScene = !oldUrl && !ignoreCache;
-    const getSceneView = () => {
+    const oldSceneCount = (typeof window !== 'undefined' && window.history.state?.sceneCount) || 0;
+    useEffect(() => {
+        return () => {
+            delete cachedSceneViews[sceneViewKey];
+            if (Object.keys(cachedSceneViews).length <= 1) rscCache.delete(navigationEvent);
+        };
+    }, [])
+    if (!cachedSceneViews[sceneViewKey] && !cachedHistory && !firstScene && !ancestorFetching && fetching) {
+        cachedSceneViews[sceneViewKey] = deserialize(historyManager.getHref(url), {
+            method: 'post',
+            headers: {'Content-Type': 'application/json'},
+            body: {url, sceneViewKey}
+        });
+    }
+    const sceneView = (() => {
         if (!show) return null;
         if (cachedHistory) return historyCache[url][sceneViewKey];
         if (firstScene || ancestorFetching) return children;
-        if (dataChanged()) return fetchedSceneView;
+        if (fetching) return cachedSceneViews[sceneViewKey];
         return renderedSceneView.current.sceneView;
-    }
-    const oldSceneCount = (typeof window !== 'undefined' && window.history.state?.sceneCount) || 0;
+    })();
     useEffect(() => {
         const {navigationEvent: oldNavigationEvent} = renderedSceneView.current;
-        renderedSceneView.current = {sceneView: getSceneView(), navigationEvent};
+        renderedSceneView.current = {sceneView, navigationEvent};
         if (oldNavigationEvent !== navigationEvent) rscCache.delete(oldNavigationEvent);
         if (!cachedSceneViews.__committed) {
             cachedSceneViews.__committed = true;
@@ -77,24 +92,14 @@ const SceneRSCView = ({active, name, dataKeyDeps, errorFallback, children}: Scen
         window.addEventListener('popstate', cacheHistory);
         return () => window.removeEventListener('popstate', cacheHistory);
     });
-    useEffect(() => {
-        return () => {
-            delete cachedSceneViews[sceneViewKey];
-            if (Object.keys(cachedSceneViews).length <= 1) rscCache.delete(navigationEvent);
-        };
-    }, [])
-    if (!fetchedSceneView && !cachedHistory && !firstScene && show && !ancestorFetching && dataChanged()) {
-        cachedSceneViews[sceneViewKey] = deserialize(historyManager.getHref(url), {
-            method: 'post',
-            headers: {'Content-Type': 'application/json'},
-            body: {url, sceneViewKey}
-        });
-        fetchedSceneView = cachedSceneViews[sceneViewKey];
-    }
+    const rscContextVal = useMemo(() => ({
+        fetching: ancestorFetching || fetching,
+        setRefetch: (refetch: any) => refetchRef.current = refetch !== undefined ? refetch : serverRefetch
+    }), [ancestorFetching || fetching]);
     return (
         <ErrorBoundary errorFallback={errorFallback}>
-            <RSCContext.Provider value={ancestorFetching || dataChanged()}>
-                <SceneViewInner>{getSceneView()}</SceneViewInner>
+            <RSCContext.Provider value={rscContextVal}>
+                <SceneViewInner>{sceneView}</SceneViewInner>
             </RSCContext.Provider>
         </ErrorBoundary>
     );
diff --git a/NavigationReact/src/useRefetch.ts b/NavigationReact/src/useRefetch.ts
@@ -0,0 +1,9 @@
+import { useContext } from 'react';
+import { StateContext } from 'navigation';
+import RSCContext from './RSCContext.js';
+
+const useRefetch = (refetch?: string[] | ((stateContext: StateContext) => boolean) | null) => {
+    const {setRefetch} = useContext(RSCContext);
+    setRefetch(refetch);
+}
+export default useRefetch;
diff --git a/NavigationReactMobile/sample/rsc/src/App.tsx b/NavigationReactMobile/sample/rsc/src/App.tsx
@@ -22,7 +22,7 @@ const App = async ({url}: any) => {
                 <Scene stateKey="people">
                   <People />
                 </Scene>
-                <Scene stateKey="person" dataKeyDeps={['id']}>
+                <Scene stateKey="person" refetch={['id']}>
                   <Person />
                 </Scene>
             </NavigationStack>
diff --git a/NavigationReactMobile/sample/rsc/src/Filter.tsx b/NavigationReactMobile/sample/rsc/src/Filter.tsx
@@ -1,7 +1,6 @@
 'use client'
-import { startTransition } from 'react';
+import { startTransition, useOptimistic } from 'react';
 import { RefreshLink, useNavigationEvent } from 'navigation-react';
-import { useOptimistic } from 'react';
 
 const Filter = () => {
     const {data, stateNavigator} = useNavigationEvent();
diff --git a/NavigationReactMobile/sample/rsc/src/Person.tsx b/NavigationReactMobile/sample/rsc/src/Person.tsx
@@ -1,7 +1,7 @@
 'use server-entry'
 import { getPerson } from './data';
 import { SceneView, NavigationBackLink, useNavigationEvent } from 'navigation-react';
-import Friends from "./Friends";
+import Friends from './Friends';
 
 const Person = async () => {
   const {data} = useNavigationEvent();
diff --git a/build/npm/navigation-react-mobile/navigation.react.mobile.d.ts b/build/npm/navigation-react-mobile/navigation.react.mobile.d.ts
@@ -176,7 +176,7 @@ export interface NavigationStackProps {
     /**
      * The NavigationData keys that determine when to refetch the RSC Scene
      */
-    dataKeyDeps?: string[];
+    refetch?: string[];
     /**
      * The content to show when the Scene errors
      */
diff --git a/build/npm/navigation-react/navigation.react.d.ts b/build/npm/navigation-react/navigation.react.d.ts
@@ -1,5 +1,5 @@
 import { State, StateNavigator, FluentNavigator, StateContext } from 'navigation';
-import { Component, Context, AnchorHTMLAttributes, DetailedHTMLProps, MouseEvent, ReactNode, ComponentType, Dispatch, SetStateAction } from 'react';
+import { Component, Context, AnchorHTMLAttributes, DetailedHTMLProps, MouseEvent, ReactNode, ComponentType } from 'react';
 
 /**
  * Navigation event data
@@ -43,14 +43,19 @@ export var BundlerContext: Context<{
     /**
      * Updates the root RSC content
      */
-    setRoot: Dispatch<SetStateAction<Promise<any>>>;
+    setRoot: (root: any) => void;
 }>;
 
 /**
  * The hook that provides the current navigation event data
  */
 export function useNavigationEvent<NavigationInfo extends { [index: string]: any } = any, Key extends keyof NavigationInfo = string>() : NavigationEvent<NavigationInfo, Key>;
 
+/**
+ * The hook that determines when to refetch the RSC View
+ */
+export function useRefetch(refetch?: string[] | ((stateContext: StateContext) => boolean) | null) : void;
+
 /**
  * Defines the Navigation Handler Props contract
  */
@@ -189,9 +194,9 @@ export interface SceneViewProps<NavigationInfo extends { [index: string]: any }
      */
     name?: string;
     /**
-     * The NavigationData keys that determine when to refetch the RSC View
+     * A function or the data keys that determine when to refetch the RSC View
      */
-    dataKeyDeps?: string[];
+    refetch?: string[];
     /**
      * The content to show when the View errors
      */
diff --git a/types/navigation-react-mobile.d.ts b/types/navigation-react-mobile.d.ts
@@ -176,7 +176,7 @@ export interface NavigationStackProps {
     /**
      * The NavigationData keys that determine when to refetch the RSC Scene
      */
-    dataKeyDeps?: string[];
+    refetch?: string[];
     /**
      * The content to show when the Scene errors
      */
diff --git a/types/navigation-react.d.ts b/types/navigation-react.d.ts
@@ -1,5 +1,5 @@
 import { State, StateNavigator, FluentNavigator, StateContext } from 'navigation';
-import { Component, Context, AnchorHTMLAttributes, DetailedHTMLProps, MouseEvent, ReactNode, ComponentType, Dispatch, SetStateAction } from 'react';
+import { Component, Context, AnchorHTMLAttributes, DetailedHTMLProps, MouseEvent, ReactNode, ComponentType } from 'react';
 
 /**
  * Navigation event data
@@ -43,14 +43,19 @@ export var BundlerContext: Context<{
     /**
      * Updates the root RSC content
      */
-    setRoot: Dispatch<SetStateAction<Promise<any>>>;
+    setRoot: (root: any) => void;
 }>;
 
 /**
  * The hook that provides the current navigation event data
  */
 export function useNavigationEvent<NavigationInfo extends { [index: string]: any } = any, Key extends keyof NavigationInfo = string>() : NavigationEvent<NavigationInfo, Key>;
 
+/**
+ * The hook that determines when to refetch the RSC View
+ */
+export function useRefetch(refetch?: string[] | ((stateContext: StateContext) => boolean) | null) : void;
+
 /**
  * Defines the Navigation Handler Props contract
  */
@@ -189,9 +194,9 @@ export interface SceneViewProps<NavigationInfo extends { [index: string]: any }
      */
     name?: string;
     /**
-     * The NavigationData keys that determine when to refetch the RSC View
+     * A function or the data keys that determine when to refetch the RSC View
      */
-    dataKeyDeps?: string[];
+    refetch?: string[];
     /**
      * The content to show when the View errors
      */

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import React, { Component, ReactNode, cloneElement, createElement } from 'react';`
	`1`	`+import { Component, ReactNode, cloneElement, createElement } from 'react';`
`2`	`2`	`import { StateContext, StateNavigator } from 'navigation';`
`3`	`3`	`import withStateNavigator from './withStateNavigator.js';`
`4`	`4`