Implemented hmr path

Updating People works but updating stateNavigator doesn't quite work. The update lags behind, so update 1 is only processed after update 2 - think it's because the rsc stream update happens before the updated state navigator loads in. With Person it's a server component so doesn't need loading - the rsc update contains the update

Author: grahammendick

packages/plugin-rsc/examples/navigation/src/HmrProvider.tsx

@@ -6,8 +6,7 @@ const HmrProvider = ({ children }: any) => {
   const { setRoot, deserialize } = useContext(BundlerContext)
   const { stateNavigator } = useNavigationEvent()
   useEffect(() => {
-    const onHmrReload = (e: any) => {
-      e.preventDefault()
+    const onHmrReload = () => {
       const {
         stateContext: {
           state,
@@ -34,8 +33,8 @@ const HmrProvider = ({ children }: any) => {
       stateNavigator.historyManager.stop()
       setRoot(root)
     }
-    window.addEventListener('parcelhmrreload', onHmrReload)
-    return () => window.removeEventListener('parcelhmrreload', onHmrReload)
+    import.meta.hot?.on("rsc:update", onHmrReload);
+    return () => import.meta.hot?.off("rsc:update", onHmrReload);
   })
   return children
 }

packages/plugin-rsc/examples/navigation/src/client.tsx

@@ -12,11 +12,11 @@ import { BundlerContext } from 'navigation-react';
 async function hydrate() {
     const initialPayload = await createFromReadableStream(rscStream);
     function Shell() {
-        const [payload, setPayload] = useState(initialPayload);
+        const [payload, setPayload] = useState(initialPayload.root);
         const bundler = useMemo(() => ({setRoot: setPayload, deserialize: fetchRSC}), []);
         return (
             <BundlerContext.Provider value={bundler}>
-                {payload.root}
+                {payload}
             </BundlerContext.Provider>
         );
     }

packages/plugin-rsc/examples/navigation/src/server.tsx

@@ -5,24 +5,35 @@ import stateNavigator from './stateNavigator.ts'
 export default async function handler(request: Request): Promise<Response> {
   let url: string;
   let view: any;
+  const { NavigationHandler } = await import('navigation-react');
+  const serverNavigator = new StateNavigator(stateNavigator);
   if (request.method === 'PUT') {
     const sceneViews: any = {
       people: await import('./People.tsx'),
       person: await import('./Person.tsx'),
       friends: await import('./Friends.tsx')
     };
-    const {url: reqUrl, sceneViewKey} = await request.json();
-    url = reqUrl;
-    const SceneView = sceneViews[sceneViewKey].default;
-    view = <SceneView />;
+    const {url: reqUrl, sceneViewKey, state, data, crumbs} = await request.json();
+    if (reqUrl) {
+      url = reqUrl;
+      const SceneView = sceneViews[sceneViewKey].default;
+      view = <SceneView />;
+    } else {
+      let fluentNavigator = serverNavigator.fluent();
+      for (let i = 0; i < crumbs.length; i++) {
+        fluentNavigator = fluentNavigator.navigate(crumbs[i].state, crumbs[i].data);
+      }
+      fluentNavigator = fluentNavigator.navigate(state, data);
+      url = fluentNavigator.url;
+      const App = (await import('./App.tsx')).default;
+      view = <App url={url} />;
+    }
   } else {    
     let reqUrl = new URL(request.url);
     url = `${reqUrl.pathname}${reqUrl.search}`;
     const App = (await import('./App.tsx')).default;
     view = <App url={url} />;
   }
-  const { NavigationHandler } = await import('navigation-react');
-  const serverNavigator = new StateNavigator(stateNavigator);
   serverNavigator.navigateLink(url)
   const root = (
     <>