[WIP]feat: keep alive

examples/keep-alive/.umirc.js

@@ -0,0 +1,36 @@
+export default {
+  plugins: [
+    [
+      '../../packages/umi-plugin-react/lib/index.js',
+      {
+        antd: true,
+        dynamicImport: {
+          webpackChunkName: true,
+        },
+        title: '默认标题',
+      },
+    ],
+  ],
+  routes: [
+    {
+      path: '/',
+      component: '../layouts/index',
+      routes: [
+        {
+          path: '/',
+          component: './index',
+        },
+        {
+          path: '/list',
+          component: './list',
+          keepAlive: true,
+        },
+        {
+          path: '/item',
+          component: './item',
+        },
+      ],
+    },
+  ],
+  exportStatic: true,
+};

examples/keep-alive/plugins/render-wrapper.js

@@ -0,0 +1,7 @@
+import { join } from 'path';
+
+export default api => {
+  api.addRendererWrapperWithComponent(join(__dirname, './wrapper.js'));
+  api.addRendererWrapperWithModule(join(__dirname, './wrapper-module.js'));
+  api.addRendererWrapperWithModule(join(__dirname, './wrapper-module2.js'));
+};

examples/keep-alive/plugins/wrapper-module.js

@@ -0,0 +1,7 @@
+export default () => {
+  console.log('wrapper-module running');
+  return new Promise(resolve => {
+    console.log('wrapper-module resolved');
+    setTimeout(resolve, 500);
+  });
+};

examples/keep-alive/plugins/wrapper-module2.js

@@ -0,0 +1,7 @@
+export default () => {
+  console.log('wrapper-module2 running');
+  return new Promise(resolve => {
+    console.log('wrapper-module2 resolved');
+    setTimeout(resolve, 500);
+  });
+};

examples/keep-alive/plugins/wrapper.js

@@ -0,0 +1,8 @@
+export default props => {
+  return (
+    <div>
+      <h1>I am Wrapper!</h1>
+      {props.children}
+    </div>
+  );
+};

examples/keep-alive/src/layouts/index.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const Layout = ({ children }) => <div>layout{children}</div>;
+
+export default Layout;

examples/keep-alive/src/pages/_mock.js

@@ -0,0 +1,3 @@
+export default {
+  'GET /api/test': { code: 'ok' },
+};

examples/keep-alive/src/pages/index.js

@@ -0,0 +1,11 @@
+import { Card } from 'antd';
+import Link from 'umi/link';
+
+export default () => {
+  return (
+    <Card>
+      <div>hello world</div>
+      <Link to="/list">go to list</Link>
+    </Card>
+  );
+};

examples/keep-alive/src/pages/index.test.js

@@ -0,0 +1 @@
+export default () => <div>Index Page</div>;

examples/keep-alive/src/pages/item.js

@@ -0,0 +1,18 @@
+import { Card, Button } from 'antd';
+import router from 'umi/router';
+import dropByCacheKey from 'umi/dropByCacheKey';
+
+export default () => {
+  const goBack = () => {
+    router.push('/list');
+  };
+  const clearCache = () => {
+    dropByCacheKey('/list');
+  };
+  return (
+    <Card>
+      <Button onClick={goBack}>goBack list page</Button>
+      <Button onClick={clearCache}>clear list page cache</Button>
+    </Card>
+  );
+};

examples/keep-alive/src/pages/list.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import Link from 'umi/link';
+
+export default () => {
+  return (
+    <div
+      style={{
+        height: '100vh',
+        overflow: 'auto',
+      }}
+    >
+      <ul>
+        <li>1</li>
+        <li>2</li>
+        <li>3</li>
+        <li>4</li>
+        <li>5</li>
+        <li>6</li>
+        <li>7</li>
+        <li>8</li>
+        <li>9</li>
+        <li>10</li>
+        <li>11</li>
+        <li>12</li>
+        <li>13</li>
+        <li>14</li>
+        <li>15</li>
+        <li>16</li>
+        <li>17</li>
+        <li>18</li>
+        <li>19</li>
+        <li>20</li>
+        <li>21</li>
+        <li>22</li>
+        <li>23</li>
+        <li>24</li>
+        <li>25</li>
+        <li>26</li>
+        <li>27</li>
+        <li>28</li>
+        <li>29</li>
+        <li>30</li>
+        <li>31</li>
+        <li>32</li>
+        <li>33</li>
+        <li>34</li>
+        <li>35</li>
+        <li>36</li>
+        <li>37</li>
+        <li>38</li>
+        <li>39</li>
+        <li>40</li>
+        <li>41</li>
+        <li>42</li>
+        <li>43</li>
+        <li>44</li>
+        <li>45</li>
+        <li>46</li>
+        <li>47</li>
+        <li>48</li>
+        <li>49</li>
+        <li>50</li>
+        <li>
+          <Link to="item">To Detail</Link>
+        </li>
+      </ul>
+    </div>
+  );
+};

packages/umi-plugin-react/locale/index.js

@@ -1,3 +1,2 @@
 module.exports =
-  require('umi-plugin-locale/lib/locale').default ||
-  require('umi-plugin-locale/lib/locale');
+  require('umi-plugin-locale/lib/locale').default || require('umi-plugin-locale/lib/locale');

packages/umi/dropByCacheKey.d.ts

@@ -0,0 +1,2 @@
+import { dropByCacheKey } from 'react-router-cache-route';
+export default dropByCacheKey;

packages/umi/dropByCacheKey.js

@@ -0,0 +1 @@
+module.exports = require('./lib/dropByCacheKey').default;

packages/umi/package.json

@@ -13,6 +13,7 @@
     "is-windows": "1.0.2",
     "lodash": "4.17.13",
     "react-loadable": "5.5.0",
+    "react-router-cache-route": "1.8.3",
     "resolve-cwd": "3.0.0",
     "semver": "6.1.1",
     "signale": "1.4.0",
@@ -68,6 +69,8 @@
     "router.js",
     "routerTypes.d.ts",
     "withRouter.d.ts",
-    "withRouter.js"
+    "withRouter.js",
+    "dropByCacheKey.d.ts",
+    "dropByCacheKey.js"
   ]
 }

packages/umi/src/dropByCacheKey.js

@@ -0,0 +1,2 @@
+import { dropByCacheKey } from 'react-router-cache-route';
+export default dropByCacheKey;

packages/umi/src/renderRoutes.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Switch, Route, Redirect } from 'react-router-dom';
+import { Route, Redirect } from 'react-router-dom';
+import CacheRoute, { CacheSwitch } from 'react-router-cache-route';
 
 const RouteInstanceMap = {
   get(key) {
@@ -14,16 +15,43 @@ const RouteInstanceMap = {
 };
 
 // Support pass props from layout to child routes
-const RouteWithProps = ({ path, exact, strict, render, location, sensitive, ...rest }) => (
-  <Route
-    path={path}
-    exact={exact}
-    strict={strict}
-    location={location}
-    sensitive={sensitive}
-    render={props => render({ ...props, ...rest })}
-  />
-);
+const RouteWithProps = ({
+  path,
+  exact,
+  strict,
+  render,
+  location,
+  sensitive,
+  keepAlive,
+  multiple,
+  ...rest
+}) => {
+  if (keepAlive) {
+    return (
+      <CacheRoute
+        when="always"
+        cacheKey={path}
+        multiple={multiple}
+        path={path}
+        exact={exact}
+        strict={strict}
+        location={location}
+        sensitive={sensitive}
+        render={props => render({ ...props, ...rest })}
+      />
+    );
+  }
+  return (
+    <Route
+      path={path}
+      exact={exact}
+      strict={strict}
+      location={location}
+      sensitive={sensitive}
+      render={props => render({ ...props, ...rest })}
+    />
+  );
+};
 
 function getCompatProps(props) {
   const compatProps = {};
@@ -107,11 +135,12 @@ function wrapWithInitialProps(WrappedComponent, initialProps) {
     }
 
     render() {
+      const { extraProps } = this.state;
       return (
         <WrappedComponent
           {...{
             ...this.props,
-            ...this.state.extraProps,
+            ...extraProps,
           }}
         />
       );
@@ -122,7 +151,7 @@ function wrapWithInitialProps(WrappedComponent, initialProps) {
 export default function renderRoutes(routes, extraProps = {}, switchProps = {}) {
   const plugins = require('umi/_runtimePlugin');
   return routes ? (
-    <Switch {...switchProps}>
+    <CacheSwitch {...switchProps} which={element => element.props.keepAlive}>
       {routes.map((route, i) => {
         if (route.redirect) {
           return (
@@ -143,6 +172,8 @@ export default function renderRoutes(routes, extraProps = {}, switchProps = {})
             exact={route.exact}
             strict={route.strict}
             sensitive={route.sensitive}
+            keepAlive={route.keepAlive}
+            multiple={route.multiple || false}
             render={props => {
               const childRoutes = renderRoutes(route.routes, extraProps, {
                 location: props.location,
@@ -161,6 +192,7 @@ export default function renderRoutes(routes, extraProps = {}, switchProps = {})
                   args: { route },
                 });
                 let { component: Component } = route;
+                // eslint-disable-next-line no-undef
                 if (__IS_BROWSER && Component.getInitialProps) {
                   const initialProps = plugins.apply('modifyInitialProps', {
                     initialValue: {},
@@ -179,6 +211,6 @@ export default function renderRoutes(routes, extraProps = {}, switchProps = {})
           />
         );
       })}
-    </Switch>
+    </CacheSwitch>
   ) : null;
 }