Feat: enhance single router mode without react-router (#6761)

* feat: enhance single router mode without react-router * fix: test case
alibaba · Jan 25, 2024 · 8d57a24 · 8d57a24
1 parent b85feaa
commit 8d57a24
Show file tree

Hide file tree

Showing 8 changed files with 353 additions and 55 deletions.
diff --git a/.changeset/funny-apes-clap.md b/.changeset/funny-apes-clap.md
@@ -0,0 +1,5 @@
+---
+'@ice/runtime': minor
+---
+
+feat: enhance router mode without react-router
diff --git a/examples/single-route/src/pages/layout.tsx b/examples/single-route/src/pages/layout.tsx
@@ -0,0 +1,23 @@
+import { Outlet, defineDataLoader, useData } from 'ice';
+
+export default function Layout() {
+  const data = useData();
+  console.log('layout data', data);
+  return (
+    <div>
+      <h1>Layout</h1>
+      <Outlet />
+    </div>
+  );
+}
+
+export const dataLoader = defineDataLoader(() => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve({
+        name: 'layout',
+      });
+    }, 1 * 100);
+  });
+});
+
diff --git a/packages/runtime/src/ClientRouter.tsx b/packages/runtime/src/ClientRouter.tsx
@@ -4,7 +4,6 @@ import { createRouter } from '@remix-run/router';
 import type { To, History, Router } from '@remix-run/router';
 import type { ClientAppRouterProps } from './types.js';
 import App from './App.js';
-import { DataContextProvider } from './singleRouter.js';
 import { useAppContext } from './AppContext.js';
 import { setHistory } from './history.js';
 import { disableHistoryWarning } from './utils/deprecatedHistory.js';
@@ -25,7 +24,7 @@ function createRouterHistory(history: History, router: Router) {
 
 let router: Router = null;
 function ClientRouter(props: ClientAppRouterProps) {
-  const { Component, loaderData, routerContext } = props;
+  const { Component, routerContext } = props;
   const { revalidate } = useAppContext();
 
   function clearRouter() {
@@ -60,11 +59,7 @@ function ClientRouter(props: ClientAppRouterProps) {
   if (process.env.ICE_CORE_ROUTER === 'true') {
     element = <RouterProvider router={router} fallbackElement={null} />;
   } else {
-    element = (
-      <DataContextProvider value={loaderData}>
-        <Component />
-      </DataContextProvider>
-    );
+    element = <Component />;
   }
   return (
     <App>

diff --git a/packages/runtime/src/routes.tsx b/packages/runtime/src/routes.tsx
@@ -211,7 +211,7 @@ export function createRouteLoader(options: RouteLoaderOptions): LoaderFunction {
   }
   // Await dataLoader before render.
   return async (params) => {
-    const result = getData(import.meta.renderer === 'client' ? getClientLoaderContext(params.request.url) : defaultRequestContext);
+    const result = getData(import.meta.renderer === 'client' && params ? getClientLoaderContext(params.request.url) : defaultRequestContext);
     let routeData;
     try {
       if (Array.isArray(result)) {

diff --git a/packages/runtime/src/runClientApp.tsx b/packages/runtime/src/runClientApp.tsx
@@ -6,7 +6,7 @@ import type {
   AppContext, WindowContext, AppExport, RouteItem, RuntimeModules, AppConfig, AssetsManifest, ClientAppRouterProps,
   ErrorStack,
 } from './types.js';
-import { createHistory as createHistorySingle } from './singleRouter.js';
+import { createHistory as createHistorySingle, getSingleRoute } from './singleRouter.js';
 import { setHistory } from './history.js';
 import Runtime from './runtime.js';
 import { getAppData } from './appData.js';
@@ -179,14 +179,8 @@ async function render({ history, runtime, needHydrate }: RenderOptions) {
       v7_prependBasename: true,
     },
   };
-  let singleComponent = null;
-  let routeData = null;
-  if (process.env.ICE_CORE_ROUTER !== 'true') {
-    const singleRoute = matchRoutes(routes, location, basename)[0];
-    const { Component, loader } = await loadRouteModule(singleRoute.route, routeModuleCache);
-    singleComponent = Component || singleRoute.route.Component;
-    routeData = loader && await loader();
-  }
+  const SingleComponent = process.env.ICE_CORE_ROUTER !== 'true' &&
+    await getSingleRoute(routes, basename, routeModuleCache);
   const renderRoot = appRender(
     root,
     <AppContextProvider value={appContext}>
@@ -195,8 +189,7 @@ async function render({ history, runtime, needHydrate }: RenderOptions) {
           routerContext={routerOptions}
           routes={routes}
           location={history.location}
-          Component={singleComponent}
-          loaderData={routeData}
+          Component={SingleComponent}
         />
       </AppRuntimeProvider>
     </AppContextProvider>,

diff --git a/packages/runtime/src/runServerApp.tsx b/packages/runtime/src/runServerApp.tsx
@@ -33,7 +33,6 @@ import ServerRouter from './ServerRouter.js';
 import { renderHTMLToJS } from './renderHTMLToJS.js';
 import addLeadingSlash from './utils/addLeadingSlash.js';
 
-
 export interface RenderOptions {
   app: AppExport;
   assetsManifest: AssetsManifest;