Refactor: router (#6123)

* chore: refactor unfinished * feat: support create router * refactor: render mode * fix: code splitting false * feat: add location for icestark * chore: remove console * test: examples * fix: dataloader is undefined * fix: test * fix: test case * fix: test case * fix: types * fix: test case * fix: lock * fix: update lock * fix: hydration * fix: router * fix: router * chore: log * fix: hmr * fix: test * fix: test * chore: optimize code * Update singleRoute.test.tsx * fix: types
alibaba · Apr 13, 2023 · 4763bc7 · 4763bc7
1 parent 7b04ca7
commit 4763bc7
Show file tree

Hide file tree

Showing 52 changed files with 889 additions and 1,077 deletions.
diff --git a/examples/icestark-layout/src/components/FrameworkLayout.tsx b/examples/icestark-layout/src/components/FrameworkLayout.tsx
@@ -13,4 +13,4 @@ export default function FrameworkLayout({ children }) {
       </div>
     </>
   );
-}
+}
diff --git a/examples/icestark-layout/src/pages/about.tsx b/examples/icestark-layout/src/pages/about.tsx
@@ -7,4 +7,4 @@ export default function About() {
       <Link to="/">home</Link>
     </>
   );
-}
+}
diff --git a/examples/multi-target/ice.config.mts b/examples/multi-target/ice.config.mts
@@ -2,7 +2,6 @@ import { defineConfig } from '@ice/app';
 
 export default defineConfig(() => ({
   ssr: true,
-  ssg: true,
   define: {
     'process.env.NODE_ENV': JSON.stringify(true),
   },

diff --git a/examples/with-ssg/src/pages/index.tsx b/examples/with-ssg/src/pages/index.tsx
@@ -39,4 +39,4 @@ export const staticDataLoader = defineStaticDataLoader(() => {
   return {
     price: '0.00',
   };
-});
+});
diff --git a/examples/with-store/ice.config.mts b/examples/with-store/ice.config.mts
@@ -2,6 +2,7 @@ import { defineConfig } from '@ice/app';
 import store from '@ice/plugin-store';
 
 export default defineConfig(() => ({
+  ssg: false,
   plugins: [
     store({
       resetPageState: true,

diff --git a/examples/with-store/src/app.tsx b/examples/with-store/src/app.tsx
@@ -19,4 +19,8 @@ export const dataLoader = defineDataLoader(() => {
   });
 });
 
-export default defineAppConfig(() => ({}));
+export default defineAppConfig(() => ({
+  router: {
+    type: 'hash',
+  },
+}));
diff --git a/packages/ice/package.json b/packages/ice/package.json
@@ -83,7 +83,7 @@
     "esbuild": "^0.16.5",
     "jest": "^29.0.2",
     "react": "^18.2.0",
-    "react-router": "^6.8.2",
+    "react-router": "6.10.0",
     "unplugin": "^0.9.0",
     "webpack": "^5.76.2",
     "webpack-dev-server": "^4.7.4"

diff --git a/packages/ice/src/constant.ts b/packages/ice/src/constant.ts
@@ -39,15 +39,22 @@ export const TARGETS = [
 
 export const RUNTIME_EXPORTS = [
   {
-    specifier: ['Link', 'Outlet', 'useParams', 'useSearchParams', 'useLocation', 'useNavigate'],
+    specifier: [
+      'Link',
+      'Outlet',
+      'useParams',
+      'useSearchParams',
+      'useLocation',
+      'useData',
+      'useConfig',
+      'useNavigate',
+    ],
     source: '@ice/runtime/router',
   },
   {
     specifier: [
       'defineAppConfig',
       'useAppData',
-      'useData',
-      'useConfig',
       'history',
       'KeepAliveOutlet',
       'useMounted',
@@ -60,4 +67,4 @@ export const RUNTIME_EXPORTS = [
     ],
     source: '@ice/runtime',
   },
-];
+];
diff --git a/packages/ice/src/routes.ts b/packages/ice/src/routes.ts
@@ -66,15 +66,35 @@ export function getRoutesDefination(nestRouteManifest: NestedRouteManifest[], la
       routeImports.push(`import * as ${routeSpecifier} from '${formatPath(componentPath)}';`);
       loadStatement = routeSpecifier;
     }
+    const component = `Component: () => WrapRouteComponent({
+          routeId: '${id}',
+          isLayout: ${layout},
+          routeExports: ${lazy ? 'componentModule' : loadStatement},
+        })`;
+    const loader = `loader: createRouteLoader({
+          routeId: '${id}',
+          requestContext,
+          renderMode,
+          module: ${lazy ? 'componentModule' : loadStatement},
+        })`;
     const routeProperties: string[] = [
       `path: '${formatPath(routePath || '')}',`,
-      `load: () => ${loadStatement},`,
+      `async lazy() {
+      ${lazy ? `const componentModule = await ${loadStatement}` : ''};
+      return {
+        ${lazy ? '...componentModule' : `...${loadStatement}`},
+        ${component},
+        ${loader},
+      };
+    },`,
+      // Empty errorElement to avoid default ui provided by react-router.
+      'ErrorBoundary: RouteErrorComponent,',
       `componentName: '${componentName}',`,
       `index: ${index},`,
       `id: '${id}',`,
       'exact: true,',
       `exports: ${JSON.stringify(exports)},`,
-    ];
+    ].filter(Boolean);
 
     if (layout) {
       routeProperties.push('layout: true,');

diff --git a/packages/ice/src/utils/injectInitialEntry.ts b/packages/ice/src/utils/injectInitialEntry.ts
@@ -18,7 +18,7 @@ function injectInitialEntry(routeManifest: RouteManifest, outputDir: string) {
   const routePaths = routeManifest.getFlattenRoute();
   const routeItems = routeManifest.getNestedRoute();
   routePaths.forEach((routePath) => {
-    const routeAsset = getRouteAsset(routeItems, routePath);
+    const routeAsset = getRouteAsset(routeItems as unknown as RouteItem[], routePath);
     // Inject `initialPath` when router type is memory.
     const routeAssetPath = path.join(outputDir, 'js', routeAsset);
     if (fse.existsSync(routeAssetPath)) {

diff --git a/packages/ice/templates/core/entry.client.tsx.ejs b/packages/ice/templates/core/entry.client.tsx.ejs
@@ -4,7 +4,7 @@ import { runClientApp, getAppConfig } from '<%- iceRuntimePath %>';
 import { commons, statics } from './runtimeModules';
 import * as app from '@/app';
 <% if (enableRoutes) { -%>
-import routes from './routes';
+import createRoutes from './routes';
 <% } -%>
 <%- runtimeOptions.imports %>
 <% if(dataLoaderImport.imports) {-%><%-dataLoaderImport.imports%><% } -%>
@@ -23,7 +23,7 @@ const render = (customOptions = {}) => {
       commons,
       statics,
     },
-    <% if (enableRoutes) { %>routes,<% } %>
+    <% if (enableRoutes) { %>createRoutes,<% } %>
     basename: getRouterBasename(),
     hydrate: <%- hydrate %>,
     memoryRouter: <%- memoryRouter || false %>,

diff --git a/packages/ice/templates/core/entry.server.ts.ejs b/packages/ice/templates/core/entry.server.ts.ejs
@@ -8,7 +8,7 @@ import Document from '@/document';
 import type { RenderMode, DistType } from '@ice/runtime';
 // @ts-ignore
 import assetsManifest from 'virtual:assets-manifest.json';
-import routes from './routes';
+import createRoutes from './routes';
 import routesConfig from './routes-config.bundle.mjs';
 <% if(dataLoaderImport.imports) {-%><%-dataLoaderImport.imports%><% } -%>
 <%- runtimeOptions.imports %>
@@ -47,15 +47,15 @@ interface RenderOptions {
 export async function renderToHTML(requestContext, options: RenderOptions = {}) {
   const { renderMode = 'SSR' } = options;
   setRuntimeEnv(renderMode);
-  
+
   const mergedOptions = mergeOptions(options);
   return await runtime.renderToHTML(requestContext, mergedOptions);
 }
 
 export async function renderToResponse(requestContext, options: RenderOptions = {}) {
   const { renderMode = 'SSR' } = options;
   setRuntimeEnv(renderMode);
-  
+
   const mergedOptions = mergeOptions(options);
   return runtime.renderToResponse(requestContext, mergedOptions);
 }
@@ -80,7 +80,7 @@ function mergeOptions(options) {
   return {
     app,
     assetsManifest,
-    routes,
+    createRoutes,
     runtimeModules,
     Document,
     serverOnlyBasename,
@@ -98,4 +98,4 @@ function mergeOptions(options) {
     },
 <% } -%>
   };
-}
+}
diff --git a/packages/ice/templates/core/routes.ts.ejs b/packages/ice/templates/core/routes.ts.ejs
diff --git a/packages/ice/templates/core/routes.tsx.ejs b/packages/ice/templates/core/routes.tsx.ejs
@@ -0,0 +1,8 @@
+import { createRouteLoader, WrapRouteComponent, RouteErrorComponent } from '@ice/runtime';
+<%- routeImports.length ? routeImports.join('\n') + '\n\n' : ''; -%>
+export default ({
+  requestContext,
+  renderMode,
+}) => ([
+  <%- routeDefination %>
+]);
diff --git a/packages/miniapp-runtime/src/app/connect.tsx b/packages/miniapp-runtime/src/app/connect.tsx
@@ -1,7 +1,6 @@
 import { EMPTY_OBJ, hooks } from '@ice/shared';
 import React, { createElement } from 'react';
 import * as ReactDOM from 'react-dom';
-import { ConfigProvider, DataProvider } from '@ice/runtime';
 import type { MiniappAppConfig } from '../types.js';
 import { Current, getPageInstance,
   incrementId, injectPageInstance,
@@ -12,6 +11,7 @@ import type {
   PageLifeCycle, PageProps,
   ReactAppInstance, ReactPageComponent,
 } from '../index.js';
+import { ConfigProvider, DataProvider } from './routeContext.js';
 import enableHtmlRuntime from './html/runtime.js';
 import { reactMeta } from './react-meta.js';
 import { ensureIsArray, HOOKS_APP_ID, isClassComponent, setDefaultDescriptor, setRouterParams } from './utils.js';

diff --git a/packages/miniapp-runtime/src/app/index.ts b/packages/miniapp-runtime/src/app/index.ts
@@ -1,8 +1,9 @@
-import { getAppConfig, defineAppConfig, useAppData, useData, useConfig, defineDataLoader } from '@ice/runtime';
+import { getAppConfig, defineAppConfig, useAppData, defineDataLoader } from '@ice/runtime';
 import runClientApp from './runClientApp.js';
 import Link from './Link.js';
 import useSearchParams from './useSearchParams.js';
 import { routerHistory as history } from './history.js';
+import { useData, useConfig } from './routeContext.js';
 
 export {
   runClientApp,

diff --git a/packages/miniapp-runtime/src/app/routeContext.ts b/packages/miniapp-runtime/src/app/routeContext.ts
@@ -0,0 +1,26 @@
+import * as React from 'react';
+
+const DataContext = React.createContext(undefined);
+DataContext.displayName = 'Data';
+
+function useData<T = any>(): T {
+  const value = React.useContext(DataContext);
+  return value;
+}
+const DataProvider = DataContext.Provider;
+
+const ConfigContext = React.createContext(undefined);
+ConfigContext.displayName = 'Config';
+
+function useConfig<T = {}>(): T {
+  const value = React.useContext(ConfigContext);
+  return value;
+}
+const ConfigProvider = ConfigContext.Provider;
+
+export {
+  useData,
+  DataProvider,
+  useConfig,
+  ConfigProvider,
+};
diff --git a/packages/miniapp-runtime/src/app/runClientApp.tsx b/packages/miniapp-runtime/src/app/runClientApp.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import type {
   AppContext, RunClientAppOptions,
 } from '@ice/runtime';
-import { AppContextProvider, AppDataProvider, getAppData, getAppConfig, Runtime } from '@ice/runtime';
+import { AppContextProvider, getAppData, getAppConfig, Runtime } from '@ice/runtime';
 import { eventCenter } from '../emitter/emitter.js';
 import { APP_READY } from '../constants/index.js';
 import App from './App.js';
@@ -42,30 +42,15 @@ async function render(
   runtime: Runtime,
 ) {
   const appContext = runtime.getAppContext();
-  const { appData } = appContext;
   const render = runtime.getRender();
   const AppRuntimeProvider = runtime.composeAppProvider() || React.Fragment;
 
   render(
     document.getElementById('ice-container'),
-    <AppDataProvider value={appData}>
+    <AppContextProvider value={appContext}>
       <AppRuntimeProvider>
-        <BrowserEntry appContext={appContext} />
+        <App />
       </AppRuntimeProvider>
-    </AppDataProvider>,
-  );
-}
-
-interface BrowserEntryProps {
-  appContext: AppContext;
-}
-
-function BrowserEntry({
-  appContext,
-}: BrowserEntryProps) {
-  return (
-    <AppContextProvider value={appContext}>
-      <App />
-    </AppContextProvider>
+    </AppContextProvider>,
   );
 }
diff --git a/packages/plugin-icestark/src/runtime/framework.tsx b/packages/plugin-icestark/src/runtime/framework.tsx
@@ -4,10 +4,12 @@ import type { RuntimePlugin, AppRouterProps } from '@ice/runtime/types';
 import type { RouteInfo, AppConfig } from '../types';
 
 const { useState, useEffect } = React;
+
 const runtime: RuntimePlugin = ({ getAppRouter, setAppRouter, appContext }) => {
   const { appExport, appData } = appContext;
   const OriginalRouter = getAppRouter();
   const { layout, getApps, appRouter } = appExport?.icestark || {};
+
   if (getApps) {
     const FrameworkRouter = (props: AppRouterProps) => {
       const [routeInfo, setRouteInfo] = useState<RouteInfo>({});
@@ -62,7 +64,23 @@ const runtime: RuntimePlugin = ({ getAppRouter, setAppRouter, appContext }) => {
                 path="/"
                 location={props.location}
                 render={() => {
-                  return <OriginalRouter {...props} />;
+                  const { routerContext } = props;
+                  routerContext.routes = [
+                    ...routerContext.routes,
+                    {
+                      path: '*',
+                      Component: () => (
+                        process.env.NODE_ENV === 'development'
+                          ? <div>Add $.tsx to folder pages as a 404 component</div>
+                          : null
+                        ),
+                    },
+                  ];
+                  const routerProps = {
+                    ...props,
+                    routerContext,
+                  };
+                  return <OriginalRouter {...routerProps} />;
                 }}
               />
             </AppRouter>

diff --git a/packages/plugin-store/src/runtime.tsx b/packages/plugin-store/src/runtime.tsx
@@ -5,7 +5,7 @@ import type { StoreConfig } from './types.js';
 
 const EXPORT_CONFIG_NAME = 'storeConfig';
 
-const runtime: RuntimePlugin = async ({ appContext, addWrapper, addProvider, useAppContext }, runtimeOptions) => {
+const runtime: RuntimePlugin = async ({ appContext, addWrapper, addProvider }, runtimeOptions) => {
   const { appExport, appData } = appContext;
   const exported = appExport[EXPORT_CONFIG_NAME];
   const storeConfig: StoreConfig = (typeof exported === 'function' ? await exported(appData) : exported) || {};
@@ -27,12 +27,10 @@ const runtime: RuntimePlugin = async ({ appContext, addWrapper, addProvider, use
   addProvider(StoreProvider);
 
   // Add page store <Provider />.
-  const StoreProviderWrapper: RouteWrapper = ({ children, routeId }) => {
-    const { routeModules } = useAppContext();
-    const routeModule = routeModules[routeId];
-    if (routeModule?.[PAGE_STORE_PROVIDER]) {
-      const Provider = routeModule[PAGE_STORE_PROVIDER];
-      const initialStates = routeModule[PAGE_STORE_INITIAL_STATES];
+  const StoreProviderWrapper: RouteWrapper = ({ routeExports, children }) => {
+    if (routeExports?.[PAGE_STORE_PROVIDER]) {
+      const Provider = routeExports[PAGE_STORE_PROVIDER];
+      const initialStates = routeExports[PAGE_STORE_INITIAL_STATES];
       if (initialStates) {
         return <Provider initialStates={initialStates}>{children}</Provider>;
       }
-Original file line number
+Diff line change
@@ Expand Up / @@ -13,4 +13,4 @@ export default function FrameworkLayout({ children }) { @@
           </div>
         </>
       );
-    }
+    }