feat: support react 18

.gitignore

@@ -8,3 +8,4 @@
 /packages/**/node_modules
 /packages/**/dist
 /lerna-debug.log
+.history/

docs/guide/source-code-explore.md

@@ -222,8 +222,8 @@ function getProvider(store, app, router) {
 
 // 真正的 react 在这里
 function render(container, store, app, router) {
-  const ReactDOM = require('react-dom');  // eslint-disable-line
-  ReactDOM.render(React.createElement(getProvider(store, app, router)), container);
+  const ReactDOM = require('react-dom/client') // eslint-disable-line
+  ReactDOM.createRoot(container).render(React.createElement(getProvider(store, app, router)))
 }
 ```
 

package.json

@@ -31,8 +31,8 @@
     "lerna-changelog": "^0.8.0",
     "lint-staged": "^7.2.2",
     "prettier": "^1.14.3",
-    "react": "^16.8.4",
-    "react-dom": "^16.8.4",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-testing-library": "^6.0.0",
     "shelljs": "^0.8.1",
     "umi-test": "^1.5.2"
@@ -42,5 +42,6 @@
       "prettier --trailing-comma all --single-quote --write",
       "git add"
     ]
-  }
-}
+  },
+  "repository": "[email protected]:jasonzhuang/dva18.git"
+}

packages/dva/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dva",
-  "version": "2.6.0-beta.23",
+  "version": "3.0.0",
   "description": "React and redux based, lightweight and elm-style framework.",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -45,8 +45,8 @@
     "redux": "^4.0.1"
   },
   "peerDependencies": {
-    "react": "^16.8.4",
-    "react-dom": "^16.8.4"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "files": [
     "dist",

packages/dva/src/index.js

@@ -1,7 +1,7 @@
-import React from 'react';
-import invariant from 'invariant';
-import { createBrowserHistory, createMemoryHistory, createHashHistory } from 'history';
-import document from 'global/document';
+import React from 'react'
+import invariant from 'invariant'
+import { createBrowserHistory, createMemoryHistory, createHashHistory } from 'history'
+import document from 'global/document'
 import {
   Provider,
   connect,
@@ -10,101 +10,98 @@ import {
   useDispatch,
   useStore,
   shallowEqual,
-} from 'react-redux';
-import { bindActionCreators } from 'redux';
-import { utils, create, saga } from 'dva-core';
-import * as router from 'react-router-dom';
-import * as routerRedux from 'connected-react-router';
-
-const { connectRouter, routerMiddleware } = routerRedux;
-const { isFunction } = utils;
-const { useHistory, useLocation, useParams, useRouteMatch } = router;
-
-export default function(opts = {}) {
-  const history = opts.history || createHashHistory();
+} from 'react-redux'
+import { bindActionCreators } from 'redux'
+import { utils, create, saga } from 'dva-core'
+import * as router from 'react-router-dom'
+import * as routerRedux from 'connected-react-router'
+
+const { connectRouter, routerMiddleware } = routerRedux
+const { isFunction } = utils
+const { useHistory, useLocation, useParams, useRouteMatch } = router
+
+export default function (opts = {}) {
+  const history = opts.history || createHashHistory()
   const createOpts = {
     initialReducer: {
       router: connectRouter(history),
     },
     setupMiddlewares(middlewares) {
-      return [routerMiddleware(history), ...middlewares];
+      return [routerMiddleware(history), ...middlewares]
     },
     setupApp(app) {
-      app._history = patchHistory(history);
+      app._history = patchHistory(history)
     },
-  };
+  }
 
-  const app = create(opts, createOpts);
-  const oldAppStart = app.start;
-  app.router = router;
-  app.start = start;
-  return app;
+  const app = create(opts, createOpts)
+  const oldAppStart = app.start
+  app.router = router
+  app.start = start
+  return app
 
   function router(router) {
     invariant(
       isFunction(router),
       `[app.router] router should be function, but got ${typeof router}`,
-    );
-    app._router = router;
+    )
+    app._router = router
   }
 
   function start(container) {
     // 允许 container 是字符串，然后用 querySelector 找元素
     if (isString(container)) {
-      container = document.querySelector(container);
-      invariant(container, `[app.start] container ${container} not found`);
+      container = document.querySelector(container)
+      invariant(container, `[app.start] container ${container} not found`)
     }
 
     // 并且是 HTMLElement
-    invariant(
-      !container || isHTMLElement(container),
-      `[app.start] container should be HTMLElement`,
-    );
+    invariant(!container || isHTMLElement(container), `[app.start] container should be HTMLElement`)
 
     // 路由必须提前注册
-    invariant(app._router, `[app.start] router must be registered before app.start()`);
+    invariant(app._router, `[app.start] router must be registered before app.start()`)
 
     if (!app._store) {
-      oldAppStart.call(app);
+      oldAppStart.call(app)
     }
-    const store = app._store;
+    const store = app._store
 
     // export _getProvider for HMR
     // ref: https://github.com/dvajs/dva/issues/469
-    app._getProvider = getProvider.bind(null, store, app);
+    app._getProvider = getProvider.bind(null, store, app)
 
     // If has container, render; else, return react component
     if (container) {
-      render(container, store, app, app._router);
-      app._plugin.apply('onHmr')(render.bind(null, container, store, app));
+      render(container, store, app, app._router)
+      app._plugin.apply('onHmr')(render.bind(null, container, store, app))
     } else {
-      return getProvider(store, this, this._router);
+      return getProvider(store, this, this._router)
     }
   }
 }
 
 function isHTMLElement(node) {
-  return typeof node === 'object' && node !== null && node.nodeType && node.nodeName;
+  return typeof node === 'object' && node !== null && node.nodeType && node.nodeName
 }
 
 function isString(str) {
-  return typeof str === 'string';
+  return typeof str === 'string'
 }
 
 function getProvider(store, app, router) {
   const DvaRoot = extraProps => (
     <Provider store={store}>{router({ app, history: app._history, ...extraProps })}</Provider>
-  );
-  return DvaRoot;
+  )
+  return DvaRoot
 }
 
 function render(container, store, app, router) {
-  const ReactDOM = require('react-dom'); // eslint-disable-line
-  ReactDOM.render(React.createElement(getProvider(store, app, router)), container);
+  const ReactDOM = require('react-dom/client') // eslint-disable-line
+  ReactDOM.createRoot(container).render(React.createElement(getProvider(store, app, router)))
 }
 
 function patchHistory(history) {
-  const oldListen = history.listen;
+  const oldListen = history.listen
   history.listen = callback => {
     // TODO: refact this with modified ConnectedRouter
     // Let ConnectedRouter to sync history to store first
@@ -116,35 +113,35 @@ function patchHistory(history) {
     //   r.inTimeTravelling ? r.inTimeTravelling = !1 : a(e, t, n)
     // }
     // ref: https://github.com/umijs/umi/issues/2693
-    const cbStr = callback.toString();
+    const cbStr = callback.toString()
     const isConnectedRouterHandler =
       (callback.name === 'handleLocationChange' && cbStr.indexOf('onLocationChanged') > -1) ||
       (cbStr.indexOf('.inTimeTravelling') > -1 &&
         cbStr.indexOf('.inTimeTravelling') > -1 &&
-        cbStr.indexOf('arguments[2]') > -1);
+        cbStr.indexOf('arguments[2]') > -1)
     // why add __isDvaPatch: true
     // since it's a patch from dva, we need to identify it in the listen handlers
-    callback(history.location, history.action, { __isDvaPatch: true });
+    callback(history.location, history.action, { __isDvaPatch: true })
     return oldListen.call(history, (...args) => {
       if (isConnectedRouterHandler) {
-        callback(...args);
+        callback(...args)
       } else {
         // Delay all listeners besides ConnectedRouter
         setTimeout(() => {
-          callback(...args);
-        });
+          callback(...args)
+        })
       }
-    });
-  };
-  return history;
+    })
+  }
+  return history
 }
 
-export fetch from 'isomorphic-fetch';
-export dynamic from './dynamic';
-export { connect, connectAdvanced, useSelector, useDispatch, useStore, shallowEqual };
-export { bindActionCreators };
-export { router };
-export { saga };
-export { routerRedux };
-export { createBrowserHistory, createMemoryHistory, createHashHistory };
-export { useHistory, useLocation, useParams, useRouteMatch };
+export fetch from 'isomorphic-fetch'
+export dynamic from './dynamic'
+export { connect, connectAdvanced, useSelector, useDispatch, useStore, shallowEqual }
+export { bindActionCreators }
+export { router }
+export { saga }
+export { routerRedux }
+export { createBrowserHistory, createMemoryHistory, createHashHistory }
+export { useHistory, useLocation, useParams, useRouteMatch }