Applied rsc structure to mobile rsc sample

grahammendick · grahammendick · commit 08e2d385637b · 2025-05-31T16:49:37.000+01:00
Moved the NavigationStack back into App because for readability. Only need to move it out if configure function props - would rather explain that in the docs than have that as the default in the sample
diff --git a/NavigationReactMobile/sample/rsc/src/App.tsx b/NavigationReactMobile/sample/rsc/src/App.tsx
@@ -1,7 +1,8 @@
 'use server-entry';
 import './client';
-import { Scene } from 'navigation-react-mobile';
-import RootProvider from './RootProvider';
+import { NavigationStack, Scene } from 'navigation-react-mobile';
+import NavigationProvider from './NavigationProvider';
+import HmrProvider from './HmrProvider';
 import People from './People';
 import Person from './Person';
 
@@ -12,14 +13,21 @@ const App = async ({url}: any) => {
         <title>Navigation React Mobile</title>
       </head>
       <body>
-        <RootProvider url={url}>
-          <Scene stateKey="people">
-            <People />
-          </Scene>
-          <Scene stateKey="person" dataKeyDeps={['id']}>
-            <Person />
-          </Scene>
-        </RootProvider>
+        <NavigationProvider url={url}>
+          <HmrProvider>
+            <NavigationStack
+              unmountStyle={[{transform: 'translateX(100%)'}, {transform: 'translateX(0)'}]}
+              crumbStyle={[{transform: 'translateX(5%) scale(0.9)', opacity: 0},{transform: 'translateX(0) scale(1)', opacity: 1}]}
+              style={{position: 'fixed', left: '0', right: '0', top: '0', bottom: '0', overflow: 'auto', backgroundColor: '#fff', margin: '8px'}}>
+                <Scene stateKey="people">
+                  <People />
+                </Scene>
+                <Scene stateKey="person" dataKeyDeps={['id']}>
+                  <Person />
+                </Scene>
+            </NavigationStack>
+          </HmrProvider>
+        </NavigationProvider>
       </body>
     </html>
   );
diff --git a/NavigationReactMobile/sample/rsc/src/HmrContext.ts b/NavigationReactMobile/sample/rsc/src/HmrContext.ts
diff --git a/NavigationReactMobile/sample/rsc/src/HmrProvider.tsx b/NavigationReactMobile/sample/rsc/src/HmrProvider.tsx
@@ -0,0 +1,30 @@
+'use client'
+import { useContext, useEffect } from 'react';
+import { BundlerContext, useNavigationEvent } from 'navigation-react';
+
+const HmrProvider = ({children}: any) => {
+  const {setRoot, deserialize} = useContext(BundlerContext);
+  const {stateNavigator} = useNavigationEvent();
+  useEffect(() => {
+    const onHmrReload = (e: any) => {
+      e.preventDefault();
+      const {stateContext: {state, data, crumbs, nextCrumb: {crumblessUrl}}} = stateNavigator;
+      const root = deserialize(stateNavigator.historyManager.getHref(crumblessUrl), {
+          method: 'put',
+          headers: {'Content-Type': 'application/json'},
+          body: {
+              crumbs: crumbs.map(({state, data}) => ({state: state.key, data})),
+              state: state.key,
+              data
+          }
+      });
+      stateNavigator.historyManager.stop();
+      setRoot(root);
+    }
+    window.addEventListener('parcelhmrreload', onHmrReload);
+    return () => window.removeEventListener('parcelhmrreload', onHmrReload);
+  });
+  return children;
+}
+
+export default HmrProvider;
diff --git a/NavigationReactMobile/sample/rsc/src/NavigationProvider.tsx b/NavigationReactMobile/sample/rsc/src/NavigationProvider.tsx
@@ -0,0 +1,28 @@
+'use client'
+import { useMemo } from 'react';
+import { StateNavigator } from 'navigation';
+import { NavigationHandler } from 'navigation-react';
+import { MobileHistoryManager } from 'navigation-react-mobile';
+import stateNavigator from './stateNavigator';
+
+const historyManager = new MobileHistoryManager(null, '');
+
+const NavigationProvider = ({url, children}: any) => {
+  const clientNavigator = useMemo(() => {
+    historyManager.stop();
+    const clientNavigator = new StateNavigator(stateNavigator, historyManager);
+    var {state, data} = clientNavigator.parseLink<any>(url);
+    const link = clientNavigator.fluent()
+        .navigate('people')
+        .navigate(state.key, data).url;
+    clientNavigator.navigateLink(link);
+    return clientNavigator;
+  }, []);
+  return (
+    <NavigationHandler stateNavigator={clientNavigator}>
+      {children}
+    </NavigationHandler>
+  )
+}
+
+export default NavigationProvider;
diff --git a/NavigationReactMobile/sample/rsc/src/RootProvider.tsx b/NavigationReactMobile/sample/rsc/src/RootProvider.tsx
diff --git a/NavigationReactMobile/sample/rsc/src/client.tsx b/NavigationReactMobile/sample/rsc/src/client.tsx
@@ -1,16 +1,18 @@
 'use client-entry';
-import { useState, startTransition } from 'react';
+import { useState, useMemo, startTransition } from 'react';
 import ReactDOM from 'react-dom/client';
 import { createFromReadableStream } from 'react-server-dom-parcel/client';
 import { rscStream } from 'rsc-html-stream/client';
-import HmrContext from './HmrContext';
+import { fetchRSC } from '@parcel/rsc/client';
+import { BundlerContext } from 'navigation-react';
 
 function Shell() {
-    let [root, setRoot] = useState(() => createFromReadableStream(rscStream));
+    const [root, setRoot] = useState(() => createFromReadableStream(rscStream));
+    const bundler = useMemo(() => ({setRoot, deserialize: fetchRSC}), []);
     return (
-        <HmrContext.Provider value={setRoot}>
+        <BundlerContext.Provider value={bundler}>
             {root}
-        </HmrContext.Provider>
+        </BundlerContext.Provider>
     );
 }
 
