From fdd056cddb0b741deb8044a3485ddd51db6aba4d Mon Sep 17 00:00:00 2001
From: pipiduck <67134787+pipiduck@users.noreply.github.com>
Date: Tue, 17 May 2022 09:17:57 +0800
Subject: [PATCH 1/2] feat(HMR):update client routes by HMR

---
 framework/react/router.ts | 30 +++++++++++++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

diff --git a/framework/react/router.ts b/framework/react/router.ts
index ea5846f08..3e078f8db 100644
--- a/framework/react/router.ts
+++ b/framework/react/router.ts
@@ -5,7 +5,7 @@ import FetchError from "../core/fetch_error.ts";
 import { redirect } from "../core/redirect.ts";
 import type { Route, RouteMeta, RouteModule, RouteRecord } from "../core/route.ts";
 import { matchRoutes } from "../core/route.ts";
-import { URLPatternCompat } from "../core/url_pattern.ts";
+import { URLPatternCompat, URLPatternInput } from "../core/url_pattern.ts";
 import { ForwardPropsContext, RouterContext, type RouterContextProps } from "./context.ts";
 import { DataProvider, type RouteData } from "./data.ts";
 import { Err, ErrorBoundary } from "./error.ts";
@@ -200,11 +200,39 @@ export const Router: FC<RouterProps> = ({ ssrContext, suspense, createPortal })
     events.emit("routerready", { type: "routerready" });
 
     // todo: update routes by hmr
+    const oncreate = (e: Record<string, unknown>) => {
+      const route: Route = [
+        new URLPatternCompat(e.routePattern as URLPatternInput),
+        {
+          filename: e.specifier as string,
+          pattern: e.routePattern as URLPatternInput,
+        },
+      ];
+      const pathname = (e.routePattern as URLPatternInput).pathname.slice(1);
+      if (pathname == "_app" || pathname == "_404" || pathname == "_error") {
+        routeRecord[pathname] = route;
+      }
+      routeRecord.routes.push(route);
+      onpopstate({ type: "popstate" });
+    };
+    events.on("hmr:create", oncreate);
+
+    const onremove = (e: Record<string, unknown>) => {
+      const route = routeRecord.routes.find((v) => v[1].filename == e.specifier);
+      const pathname = (route?.[1].pattern.pathname)?.slice(1);
+      if (pathname == "_app" || pathname == "_404" || pathname == "_error") {
+        routeRecord[pathname] = undefined;
+      }
+      routeRecord.routes = routeRecord.routes.filter((v) => v[1].filename != e.specifier);
+    };
+    events.on("hmr:remove", onremove);
 
     return () => {
       removeEventListener("popstate", onpopstate as unknown as EventListener);
       events.off("popstate", onpopstate);
       events.off("moduleprefetch", onmoduleprefetch);
+      events.off("hmr:create", oncreate);
+      events.off("hmr:remove", onremove);
     };
   }, []);
 

From b16e1906cf8c67b7debc40c54b8ec7486afe46e2 Mon Sep 17 00:00:00 2001
From: pipiduck <67134787+pipiduck@users.noreply.github.com>
Date: Tue, 17 May 2022 09:38:33 +0800
Subject: [PATCH 2/2] fix(HMR):update

---
 framework/react/router.ts | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/framework/react/router.ts b/framework/react/router.ts
index 3e078f8db..89557c5d8 100644
--- a/framework/react/router.ts
+++ b/framework/react/router.ts
@@ -199,7 +199,6 @@ export const Router: FC<RouterProps> = ({ ssrContext, suspense, createPortal })
     events.on("moduleprefetch", onmoduleprefetch);
     events.emit("routerready", { type: "routerready" });
 
-    // todo: update routes by hmr
     const oncreate = (e: Record<string, unknown>) => {
       const route: Route = [
         new URLPatternCompat(e.routePattern as URLPatternInput),
@@ -209,21 +208,21 @@ export const Router: FC<RouterProps> = ({ ssrContext, suspense, createPortal })
         },
       ];
       const pathname = (e.routePattern as URLPatternInput).pathname.slice(1);
-      if (pathname == "_app" || pathname == "_404" || pathname == "_error") {
+      if (pathname === "_app" || pathname === "_404" || pathname === "_error") {
         routeRecord[pathname] = route;
       }
       routeRecord.routes.push(route);
-      onpopstate({ type: "popstate" });
     };
     events.on("hmr:create", oncreate);
 
     const onremove = (e: Record<string, unknown>) => {
-      const route = routeRecord.routes.find((v) => v[1].filename == e.specifier);
+      const route = routeRecord.routes.find((v) => v[1].filename === e.specifier);
       const pathname = (route?.[1].pattern.pathname)?.slice(1);
-      if (pathname == "_app" || pathname == "_404" || pathname == "_error") {
+      if (pathname === "_app" || pathname === "_404" || pathname === "_error") {
         routeRecord[pathname] = undefined;
       }
       routeRecord.routes = routeRecord.routes.filter((v) => v[1].filename != e.specifier);
+      onpopstate({ type: "popstate" });
     };
     events.on("hmr:remove", onremove);