Revert "refractor: move matchRoute to core (#47)" (#48)

This reverts commit 28f5603.

packages/core/src/index.ts

@@ -11,6 +11,6 @@ export { default as React } from 'react';
 
 export { App, IFile, File } from './app';
 
-export { Route, matchRoutes } from './route';
+export { Route } from './route';
 
 export * from './types';

packages/core/src/route/index.ts

@@ -1,2 +1 @@
 export { Route } from './route';
-export { matchRoutes } from './matchRoutes';

packages/core/src/route/route.ts

@@ -1,4 +1,3 @@
-// TODO
 import { join, relative, posix } from 'path';
 import invariant from '@shuvi/utils/lib/invariant';
 import { watch } from '@shuvi/utils/lib/fileWatcher';
@@ -67,7 +66,7 @@ function getRouteWeight(route: InternalRouteConfig): number {
   const weights: [string, string] = ['0', '0'];
   if (meta.isStaticRoute) {
     weights[0] = '1';
-  } else if (route.caseSensitive) {
+  } else if (route.exact) {
     weights[1] = '1';
   }
 
@@ -151,7 +150,7 @@ export class Route {
       } else if (isLayout(file)) {
         const layoutRoute: InternalRouteConfig = {
           path: normalizeRoutePath(file.replace(/\/_layout$/, '/')),
-          caseSensitive: false,
+          exact: false,
           component: join(this._pagesDir, rawfile),
           __meta: {
             isStaticRoute: isStaicRouter(file)
@@ -171,7 +170,7 @@ export class Route {
       } else {
         route = {
           path: routePath,
-          caseSensitive: !isLayout(file),
+          exact: !isLayout(file),
           component: join(this._pagesDir, rawFile),
           __meta: {
             isStaticRoute: isStaicRouter(file)

packages/core/src/types/route.ts

@@ -1,17 +1,17 @@
-import { IRouteObject } from '@shuvi/router';
-
-export interface IRouteBase extends IRouteObject {
+export interface IRouteBase {
+  path?: string;
+  exact?: boolean;
+  routes?: IRouteBase[];
   [x: string]: any;
 }
 
 export interface IRouteConfig extends IRouteBase {
-  children?: IRouteConfig[];
-  name?: string;
+  routes?: IRouteConfig[];
   component: string;
 }
 
 export interface IRoute extends IRouteBase {
   id: string;
   component: any;
-  children?: IRoute[];
+  routes?: IRoute[];
 }

packages/router-react/src/types.ts

@@ -5,8 +5,7 @@ import {
   InitialEntry,
   Location,
   State,
-  To,
-  IRouteObject as RouteObject
+  To
 } from '@shuvi/router';
 
 export interface ILocationContextObject {
@@ -65,7 +64,16 @@ export interface INavigateFunction {
   (delta: number): void;
 }
 
-export type IRouteObject = RouteObject<React.ReactNode>;
+/**
+ * A route object represents a logical route, with (optionally) its child
+ * routes organized in a tree-like structure.
+ */
+export interface IRouteObject {
+  caseSensitive: boolean;
+  children?: IRouteObject[];
+  element: React.ReactNode;
+  path: string;
+}
 
 /**
  * A "partial route" object is usually supplied by the user and may omit

packages/router/src/types.ts

@@ -3,14 +3,14 @@ import { History } from 'history';
 export type IParams = Record<string, string>;
 
 export interface IRouteObject<Element = any> {
-  caseSensitive?: boolean;
+  caseSensitive: boolean;
   children?: IRouteObject<Element>[];
-  element?: Element; // For react will be React.Element
+  element: Element; // For react will be React.Element
   path: string;
 }
 
-export interface IRouteMatch<T = IRouteObject> {
-  route: T;
+export interface IRouteMatch {
+  route: IRouteObject;
   pathname: string;
   params: IParams;
 }

packages/runtime-react/src/lib/index.ts

@@ -1,9 +1,10 @@
 import React from 'react';
-import { matchRoutes } from '@shuvi/core';
+import { matchRoutes as reactRouterMatchRoutes } from 'react-router-config';
 import { IApi, Runtime, APIHooks } from '@shuvi/types';
 import { resolveAppFile, resolveDep } from './paths';
 import { config as configBundler } from './bundler/config';
 
+import IRouteBase = Runtime.IRouteBase;
 import RouteConfig = Runtime.IRouteConfig;
 
 class ReactRuntime implements Runtime.IRuntime<React.ComponentType<any>> {
@@ -52,8 +53,8 @@ loadRouteComponent(() => import(/* webpackChunkName: "page-${route.id}" */"${com
   }
 
   // TODO: move this to core
-  matchRoutes(routes: RouteConfig[], pathname: string) {
-    return matchRoutes(routes, pathname);
+  matchRoutes(routes: IRouteBase[], pathname: string): Runtime.IMatchedRoute[] {
+    return reactRouterMatchRoutes(routes, pathname) as Runtime.IMatchedRoute[];
   }
 
   getViewModulePath(): string {

packages/runtime-react/src/shuvi-app/router/matchRoutes.ts

@@ -0,0 +1,12 @@
+import { Runtime } from '@shuvi/types';
+import { matchRoutes as reactRouterMatchRoutes } from 'react-router-config';
+
+import IMatchedRoute = Runtime.IMatchedRoute;
+import IRouteBase = Runtime.IRouteBase;
+
+export function matchRoutes(
+  routes: IRouteBase[],
+  pathname: string
+): IMatchedRoute[] {
+  return (reactRouterMatchRoutes(routes, pathname) as any) as IMatchedRoute[];
+}

packages/runtime-react/src/shuvi-app/router/renderRoutes.tsx

@@ -19,7 +19,6 @@ function renderRoutes(
     appContext?: Data;
   } = {}
 ) {
-  // TODO migration
   return routes && routes.length ? (
     <Switch {...switchProps}>
       {routes.map((route, i) => (

packages/runtime-react/src/shuvi-app/view/ReactView.client.tsx

@@ -2,10 +2,10 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Router } from 'react-router-dom';
 import qs from 'querystring';
-import { matchRoutes } from '@shuvi/core';
 import { Runtime } from '@shuvi/types';
 import { History } from '../router/history';
 import { setHistory } from '../router/router';
+import { matchRoutes } from '../router/matchRoutes';
 import AppContainer from '../AppContainer';
 import { IRoute } from '../types';
 import { HeadManager, HeadManagerContext } from '../head';
@@ -21,8 +21,8 @@ function getRouteParams(routes: IRoute[], pathname: string) {
   const matchedRoutes = matchRoutes(routes, pathname);
   const params: Runtime.IParams = {};
   for (let index = 0; index < matchedRoutes.length; index++) {
-    const matchedRoute = matchedRoutes[index];
-    Object.assign(params, matchedRoute.params);
+    const { match } = matchedRoutes[index];
+    Object.assign(params, match.params);
   }
   return params;
 }

packages/runtime-react/src/shuvi-app/view/ReactView.server.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { renderToString } from 'react-dom/server';
-import { matchRoutes } from '@shuvi/core';
 import { Runtime } from '@shuvi/types';
 import { Router } from 'react-router-dom';
 import { createServerHistory } from '../router/history';
@@ -10,6 +9,7 @@ import AppContainer from '../AppContainer';
 import { IReactServerView, IReactAppData } from '../types';
 import { Head } from '../head';
 import { createRedirector } from '../utils/createRedirector';
+import { matchRoutes } from '../router/matchRoutes';
 
 import IAppComponent = Runtime.IAppComponent;
 import IRouteComponent = Runtime.IRouteComponent;
@@ -43,22 +43,22 @@ export class ReactServerView implements IReactServerView {
     const pendingDataFetchs: Array<() => Promise<void>> = [];
     const params: IParams = {};
     for (let index = 0; index < matchedRoutes.length; index++) {
-      const matchedRoute = matchedRoutes[index];
-      const comp = matchedRoute.route.component as
+      const { route, match } = matchedRoutes[index];
+      const comp = route.component as
         | IRouteComponent<React.Component, any>
         | undefined;
-      Object.assign(params, matchedRoute.params);
+      Object.assign(params, match.params);
       if (comp && comp.getInitialProps) {
         pendingDataFetchs.push(async () => {
           const props = await comp.getInitialProps!({
             isServer: true,
             pathname,
             query,
             appContext,
-            params: matchedRoute.params,
+            params: match.params,
             redirect: redirector.handler
           });
-          routeProps[matchedRoute.route.id] = props || {};
+          routeProps[route.id] = props || {};
         });
       }
     }

packages/shuvi/src/api/api.ts

@@ -191,7 +191,6 @@ class Api extends Hookable implements IApi {
       componentDir: this.paths.pagesDir
     });
     routes.push({
-      path: '*',
       component: this.resolveAppFile('core', '404'),
       name: '404'
     });

packages/shuvi/src/api/types.ts

@@ -9,7 +9,7 @@ export type IBuiltResource = {
     matchRoutes(
       routes: Runtime.IRouteConfig[],
       pathname: string
-    ): Runtime.IMatchedRoute<Runtime.IRouteConfig>[];
+    ): Runtime.IMatchedRoute[];
   };
   documentTemplate: any;
   clientManifest: Bundler.IManifest;

packages/shuvi/src/lib/routes.ts

@@ -6,8 +6,6 @@ export type Templates<T extends {}> = {
   [K in keyof T]?: (v: T[K], route: T & { id: string }) => string;
 };
 
-type RouteKeysWithoutChildren = keyof Omit<IRouteBase, 'children'>;
-
 function genRouteId(filepath: string) {
   return createHash('md4').update(filepath).digest('hex').substr(0, 4);
 }
@@ -19,14 +17,14 @@ function serializeRoutesImpl(
 ): string {
   let res = '';
   for (let index = 0; index < routes.length; index++) {
-    const { children: childRoutes, ...route } = routes[index];
+    const { routes: childRoutes, ...route } = routes[index];
     const fullpath = route.path ? parentPath + '/' + route.path : parentPath;
     const id = genRouteId(fullpath);
 
     let strRoute = `id: ${JSON.stringify(id)},\n`;
     const keys = Object.keys(route);
     for (let index = 0; index < keys.length; index++) {
-      const key = keys[index] as RouteKeysWithoutChildren;
+      const key = keys[index];
       strRoute += `${key}: `;
       const customSerialize = templates[key];
       if (customSerialize) {
@@ -70,8 +68,8 @@ export function normalizeRoutes(
       : path.resolve(option.componentDir, route.component);
 
     route.component = absPath.replace(/\\/g, '/');
-    if (route.children && route.children.length > 0) {
-      route.children = normalizeRoutes(route.children, option);
+    if (route.routes && route.routes.length > 0) {
+      route.routes = normalizeRoutes(route.routes, option);
     }
     res.push(route);
   }

packages/types/src/runtime.d.ts

@@ -11,7 +11,6 @@ import {
   IInitAppPlugins,
   IAppPluginRecord
 } from '@shuvi/core';
-import { IRouteMatch, IRouteObject } from '@shuvi/router';
 import { ParsedUrlQuery } from 'querystring';
 import { IApi } from '../index';
 import { IManifest } from './bundler';
@@ -39,7 +38,17 @@ export interface IRequest {
   headers: IncomingHttpHeaders;
 }
 
-export type IMatchedRoute<T = IRouteObject> = IRouteMatch<T>;
+export interface IMatchedRoute<
+  Params extends { [K in keyof Params]?: string } = {}
+> {
+  route: IRouteBase;
+  match: {
+    params: Params;
+    isExact: boolean;
+    path: string;
+    url: string;
+  };
+}
 
 export type IHtmlAttrs = { textContent?: string } & {
   [x: string]: string | number | undefined | boolean;
@@ -231,10 +240,7 @@ export interface IRuntime<CompType = unknown> {
     route: IRouteConfig & { id: string }
   ): string;
 
-  matchRoutes(
-    routes: IRouteConfig[],
-    pathname: string
-  ): IMatchedRoute<IRouteConfig>[];
+  matchRoutes(routes: IRouteConfig[], pathname: string): IMatchedRoute[];
 
   getRouterModulePath(): string;