feat: Remove ErrorBoundary from Router (#1131)

Would this potentially be ok? re: #967 --------- Co-authored-by: daishi <[email protected]>
dai-shi · Jan 11, 2025 · df93a56 · df93a56
1 parent a837acc
commit df93a56
Show file tree

Hide file tree

Showing 15 changed files with 220 additions and 182 deletions.
diff --git a/e2e/fixtures/create-pages/package.json b/e2e/fixtures/create-pages/package.json
@@ -11,7 +11,7 @@
   "dependencies": {
     "react": "19.0.0",
     "react-dom": "19.0.0",
-    "react-error-boundary": "^5.0.0",
+    "react-error-boundary": "5.0.0",
     "react-server-dom-webpack": "19.0.0",
     "waku": "workspace:*"
   },

diff --git a/e2e/fixtures/create-pages/src/components/HomeLayout.tsx b/e2e/fixtures/create-pages/src/components/HomeLayout.tsx
@@ -18,6 +18,7 @@ const Pending = ({ isPending }: { isPending: boolean }) => (
 
 const HomeLayout = ({ children }: { children: ReactNode }) => (
   <div>
+    <title>Waku</title>
     <ul>
       <li>
         <Link

diff --git a/e2e/fixtures/create-pages/src/components/Root.tsx b/e2e/fixtures/create-pages/src/components/Root.tsx
diff --git a/e2e/fixtures/create-pages/src/entries.tsx b/e2e/fixtures/create-pages/src/entries.tsx
@@ -5,18 +5,12 @@ import FooPage from './components/FooPage.js';
 import HomeLayout from './components/HomeLayout.js';
 import HomePage from './components/HomePage.js';
 import NestedBazPage from './components/NestedBazPage.js';
-import Root from './components/Root.js';
 import NestedLayout from './components/NestedLayout.js';
 import { DeeplyNestedLayout } from './components/DeeplyNestedLayout.js';
 import ErrorPage from './components/ErrorPage.js';
 
 const pages: ReturnType<typeof createPages> = createPages(
-  async ({ createPage, createLayout, createRoot }) => [
-    createRoot({
-      render: 'static',
-      component: Root,
-    }),
-
+  async ({ createPage, createLayout }) => [
     createLayout({
       render: 'static',
       path: '/',

diff --git a/e2e/fixtures/define-router/src/entries.tsx b/e2e/fixtures/define-router/src/entries.tsx
@@ -21,9 +21,9 @@ const router: ReturnType<typeof defineRouter> = defineRouter({
         .split('/')
         .filter(Boolean)
         .map((name) => ({ type: 'literal', name })),
+      rootElement: { isStatic: true },
       routeElement: { isStatic: true },
       elements: {
-        root: { isStatic: true },
         'layout:/': { isStatic: true },
         [`page:${path}`]: { isStatic: true },
       },
@@ -33,24 +33,22 @@ const router: ReturnType<typeof defineRouter> = defineRouter({
       throw new Error('renderRoute: No such path:' + path);
     }
     return {
+      rootElement: (
+        <html>
+          <head>
+            <title>Waku example</title>
+          </head>
+          <body>
+            <Children />
+          </body>
+        </html>
+      ),
       routeElement: (
-        <Slot id="root">
-          <Slot id="layout:/">
-            <Slot id={`page:${path}`} />
-          </Slot>
+        <Slot id="layout:/">
+          <Slot id={`page:${path}`} />
         </Slot>
       ),
       elements: {
-        root: (
-          <html>
-            <head>
-              <title>Waku example</title>
-            </head>
-            <body>
-              <Children />
-            </body>
-          </html>
-        ),
         'layout:/': (
           <Layout>
             <Children />

diff --git a/examples/22_define-router/src/entries.tsx b/examples/22_define-router/src/entries.tsx
@@ -15,29 +15,29 @@ export default defineRouter({
       {
         pattern: '/',
         path: [],
+        rootElement: { isStatic: true },
         routeElement: { isStatic: true },
         elements: {
-          root: { isStatic: true },
           'layout:/': { isStatic: true },
           'page:/': { isStatic: true },
         },
       },
       {
         pattern: '/foo',
         path: [{ type: 'literal', name: 'foo' }],
+        rootElement: { isStatic: true },
         routeElement: { isStatic: true },
         elements: {
-          root: { isStatic: true },
           'layout:/': { isStatic: true },
           'page:/foo': { isStatic: true },
         },
       },
       {
         pattern: '/bar',
         path: [{ type: 'literal', name: 'bar' }],
+        rootElement: { isStatic: true },
         routeElement: { isStatic: true },
         elements: {
-          root: { isStatic: true },
           'layout:/': { isStatic: true },
           'page:/bar': { isStatic: true },
         },
@@ -48,9 +48,9 @@ export default defineRouter({
           { type: 'literal', name: 'nested' },
           { type: 'literal', name: 'baz' },
         ],
+        rootElement: { isStatic: true },
         routeElement: { isStatic: true },
         elements: {
-          root: { isStatic: true },
           'layout:/': { isStatic: true },
           'page:/nested/baz': { isStatic: true },
         },
@@ -61,9 +61,9 @@ export default defineRouter({
           { type: 'literal', name: 'dynamic' },
           { type: 'group', name: 'slug' },
         ],
+        rootElement: { isStatic: true },
         routeElement: { isStatic: true },
         elements: {
-          root: { isStatic: true },
           'layout:/': { isStatic: true },
           // using `[slug]` syntax is just an example and it technically conflicts with others. So, it's better to use a different prefix like `dynamic-page:`.
           'page:/dynamic/[slug]': {},
@@ -74,19 +74,17 @@ export default defineRouter({
   handleRoute: async (path) => {
     if (path === '/') {
       return {
+        rootElement: (
+          <Root>
+            <Children />
+          </Root>
+        ),
         routeElement: (
-          <Slot id="root">
-            <Slot id="layout:/">
-              <Slot id="page:/" />
-            </Slot>
+          <Slot id="layout:/">
+            <Slot id="page:/" />
           </Slot>
         ),
         elements: {
-          root: (
-            <Root>
-              <Children />
-            </Root>
-          ),
           'layout:/': (
             <HomeLayout>
               <Children />
@@ -98,19 +96,17 @@ export default defineRouter({
     }
     if (path === '/foo') {
       return {
+        rootElement: (
+          <Root>
+            <Children />
+          </Root>
+        ),
         routeElement: (
-          <Slot id="root">
-            <Slot id="layout:/">
-              <Slot id="page:/foo" />
-            </Slot>
+          <Slot id="layout:/">
+            <Slot id="page:/foo" />
           </Slot>
         ),
         elements: {
-          root: (
-            <Root>
-              <Children />
-            </Root>
-          ),
           'layout:/': (
             <HomeLayout>
               <Children />
@@ -122,19 +118,17 @@ export default defineRouter({
     }
     if (path === '/bar') {
       return {
+        rootElement: (
+          <Root>
+            <Children />
+          </Root>
+        ),
         routeElement: (
-          <Slot id="root">
-            <Slot id="layout:/">
-              <Slot id="page:/bar" />
-            </Slot>
+          <Slot id="layout:/">
+            <Slot id="page:/bar" />
           </Slot>
         ),
         elements: {
-          root: (
-            <Root>
-              <Children />
-            </Root>
-          ),
           'layout:/': (
             <HomeLayout>
               <Children />
@@ -146,19 +140,17 @@ export default defineRouter({
     }
     if (path === '/nested/baz') {
       return {
+        rootElement: (
+          <Root>
+            <Children />
+          </Root>
+        ),
         routeElement: (
-          <Slot id="root">
-            <Slot id="layout:/">
-              <Slot id="page:/nested/baz" />
-            </Slot>
+          <Slot id="layout:/">
+            <Slot id="page:/nested/baz" />
           </Slot>
         ),
         elements: {
-          root: (
-            <Root>
-              <Children />
-            </Root>
-          ),
           'layout:/': (
             <HomeLayout>
               <Children />
@@ -170,19 +162,17 @@ export default defineRouter({
     }
     if (path.startsWith('/dynamic/')) {
       return {
+        rootElement: (
+          <Root>
+            <Children />
+          </Root>
+        ),
         routeElement: (
-          <Slot id="root">
-            <Slot id="layout:/">
-              <Slot id="page:/dynamic/[slug]" />
-            </Slot>
+          <Slot id="layout:/">
+            <Slot id="page:/dynamic/[slug]" />
           </Slot>
         ),
         elements: {
-          root: (
-            <Root>
-              <Children />
-            </Root>
-          ),
           'layout:/': (
             <HomeLayout>
               <Children />

diff --git a/examples/22_define-router/src/main.tsx b/examples/22_define-router/src/main.tsx
@@ -1,10 +1,12 @@
 import { StrictMode } from 'react';
 import { createRoot, hydrateRoot } from 'react-dom/client';
-import { Router } from 'waku/router/client';
+import { Router, ErrorBoundary } from 'waku/router/client';
 
 const rootElement = (
   <StrictMode>
-    <Router />
+    <ErrorBoundary>
+      <Router />
+    </ErrorBoundary>
   </StrictMode>
 );
 

diff --git a/packages/waku/src/lib/plugins/vite-plugin-rsc-transform.ts b/packages/waku/src/lib/plugins/vite-plugin-rsc-transform.ts
@@ -16,6 +16,8 @@ const collectExportNames = (mod: swc.Module) => {
     if (item.type === 'ExportDeclaration') {
       if (item.declaration.type === 'FunctionDeclaration') {
         exportNames.add(item.declaration.identifier.value);
+      } else if (item.declaration.type === 'ClassDeclaration') {
+        exportNames.add(item.declaration.identifier.value);
       } else if (item.declaration.type === 'VariableDeclaration') {
         for (const d of item.declaration.declarations) {
           if (d.id.type === 'Identifier') {
-Original file line number
+Diff line change
@@ Expand Up / @@ -18,6 +18,7 @@ const Pending = ({ isPending }: { isPending: boolean }) => ( @@
     const HomeLayout = ({ children }: { children: ReactNode }) => (
       <div>
+        <title>Waku</title>
         <ul>
           <li>
             <Link
@@ Expand Down @@