## v4.6.0 2022-07-05

* [bug] fix the problem about the code updating, when using react-refresh babel and webpack plugins.

Author: wangyi

docs/changes.md

@@ -102,3 +102,6 @@
 
 * [revert] rollback to 4.3.1
 
+## v4.6.0 2022-07-05
+
+* [bug] fix the problem about the code updating, when using react-refresh babel and webpack plugins. 

docs/zh/changes.md

@@ -100,4 +100,8 @@
 
 ## v4.5.4 2022-05-25
 
-* [revert] 回滚至 4.3.1
+* [revert] 回滚至 4.3.1
+
+## v4.6.0 2022-07-05
+
+* [bug] 解决 react-refresh 插件热更新时，代码不能及时更新的问题。 

example/package.json

@@ -4,62 +4,85 @@
   "description": "this is a simple app for how to use useAgent",
   "scripts": {
     "tsc": "tsc",
-    "start": "webpack-dev-server --config ./webpack.config.js --env.mode=development",
-    "mock": "webpack-dev-server --config ./webpack.config.js --env.mock --env.mode=development",
+    "start": "webpack serve --config ./webpack.config.js",
     "build": "webpack --config ./webpack.config.js --env.mode=production",
     "analyze": "webpack --config ./webpack.config.js --env.mode=analyze"
   },
   "dependencies": {
     "@types/classnames": "^2.2.7",
     "@types/react": "16.14.21",
     "@types/react-dom": "16.9.14",
-    "agent-reducer": "4.5.3",
+    "agent-reducer": "^4.6.0",
     "antd": "^4.16.13",
     "babel-polyfill": "^6.26.0",
     "classnames": "^2.2.6",
     "moment": "^2.24.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
-    "use-agent-reducer": "4.5.1"
+    "use-agent-reducer": "^4.6.0-beta.0"
   },
   "devDependencies": {
-    "@babel/core": "7.15.8",
-    "@babel/plugin-proposal-async-generator-functions": "7.15.8",
-    "@babel/plugin-proposal-class-properties": "7.14.5",
-    "@babel/plugin-proposal-decorators": "7.15.8",
-    "@babel/plugin-proposal-export-default-from": "7.14.5",
-    "@babel/plugin-proposal-export-namespace-from": "7.14.5",
-    "@babel/plugin-transform-runtime": "7.15.8",
-    "@babel/preset-env": "^7.15.8",
-    "@babel/preset-react": "^7.14.5",
-    "@babel/preset-typescript": "^7.15.0",
-    "@babel/runtime": "7.15.4",
-    "babel-eslint": "^9.0.0",
-    "babel-loader": "^8.0.6",
+    "@babel/core": "^7.14.3",
+    "@babel/plugin-proposal-class-properties": "7.13.0",
+    "@babel/plugin-proposal-decorators": "7.13.5",
+    "@babel/plugin-transform-runtime": "7.13.10",
+    "@babel/preset-env": "7.13.12",
+    "@babel/preset-react": "7.13.13",
+    "@babel/preset-typescript": "7.13.0",
+    "@babel/runtime": "7.14.0",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.7",
+    "@types/jest": "^26.0.0",
+    "@types/react-test-renderer": "^16.0.3",
+    "@types/rewire": "2.5.28",
+    "@typescript-eslint/eslint-plugin": "^4.21.0",
+    "@typescript-eslint/parser": "4.21.0",
+    "babel-jest": "26.0.1",
+    "babel-loader": "^8.2.2",
     "babel-plugin-import": "^1.12.0",
     "babel-plugin-transform-react-remove-prop-types": "0.4.21",
-    "css-loader": "^3.0.0",
-    "eslint": "^8.2.0",
-    "file-loader": "^4.0.0",
-    "html-webpack-plugin": "^3.2.0",
-    "husky": "^0.14.3",
-    "less": "^3.9.0",
-    "less-loader": "^5.0.0",
-    "lint-staged": "^12.0.2",
-    "react-test-renderer": "^16.7.0",
-    "style-loader": "^0.23.1",
-    "ts-loader": "^6.0.4",
-    "tsconfig-paths-webpack-plugin": "^3.2.0",
-    "tslint": "^5.12.0",
-    "tslint-eslint-rules": "^5.4.0",
-    "tslint-react": "^3.6.0",
-    "typescript": "^3.8.3",
-    "uglifyjs-webpack-plugin": "^1.1.2",
-    "url-loader": "^2.0.1",
-    "webpack": "^4.35.3",
-    "webpack-api-mocker": "^1.6.0",
-    "webpack-cli": "^4.9.1",
-    "webpack-dev-server": "^3.7.2"
+    "clean-webpack-plugin": "^4.0.0",
+    "cooky-cutter": "^1.5.4",
+    "core-js": "3.12.1",
+    "css-loader": "5.2.5",
+    "eslint": "^7.30.0",
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-import-resolver-typescript": "^2.4.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-react": "^7.23.1",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "file-loader": "5.1.0",
+    "generator-dc": "2.0.0",
+    "html-webpack-plugin": "5.3.1",
+    "husky": "^7.0.1",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "26.6.3",
+    "less": "4.1.1",
+    "less-loader": "6.2.0",
+    "lodash-webpack-plugin": "^0.11.6",
+    "patch-package": "^6.2.2",
+    "postcss-loader": "^7.0.0",
+    "pre-commit": "^1.2.2",
+    "prettier": "2.3.2",
+    "prettier-eslint": "^12.0.0",
+    "prettier-eslint-cli": "^5.0.1",
+    "progress-bar-webpack-plugin": "^2.1.0",
+    "react-refresh": "^0.14.0",
+    "react-test-renderer": "^16.14.0",
+    "regenerator-runtime": "0.13.5",
+    "rewire": "5.0.0",
+    "style-loader": "1.3.0",
+    "ts-jest": "^26.1.0",
+    "ts-node": "^10.8.1",
+    "tsconfig-paths-webpack-plugin": "3.5.1",
+    "typescript": "4.5.5",
+    "url-loader": "4.1.1",
+    "webpack": "5.71.0",
+    "webpack-bundle-analyzer": "4.4.2",
+    "webpack-cli": "4.10.0",
+    "webpack-dev-server": "3.11.2",
+    "webpackbar": "^5.0.2"
   },
   "engines": {
     "node": ">=8.0.0"

example/src/Layout.tsx

@@ -30,9 +30,7 @@ export default memo(() => {
                 <NewFeatures/>
                 <Title>model provider</Title>
                 <ModelProvider/>
-                <Title>effect provider</Title>
-                <Effect/>
             </div>
         </div>
     );
-});
+});

example/src/components/index.tsx

@@ -27,7 +27,7 @@ export const ContentInput = memo(({value, onChange}: { value: string|undefined,
     }, []);
 
     return (
-        <Input style={{width: 160, marginRight: 8}} value={value} onChange={handleChange}/>
+        <Input style={{width: 160, marginRight: 8}} value={value||''} onChange={handleChange}/>
     );
 });
 

example/src/modelProvider/index.tsx

@@ -73,18 +73,17 @@ export default function ModelProvider() {
     const {
         state,
         search,
+        changePage
     } = agent;
 
-    const {changePage: changePageLatest} = useMiddleWare(agent, MiddleWarePresets.takeLatest());
-
     useEffect(() => {
         search();
     }, []);
 
     // handle page change
     const handleChangePage = useCallback(async (currentPage: number, pageSize: number = 10) => {
         // feedback searchParams with model object `searchParamsModel`.
-        await changePageLatest(currentPage, pageSize);
+        await changePage(currentPage, pageSize);
     }, [state]);
 
     const renderPriorLevel = useCallback((value: PriorLevel) => {
@@ -104,10 +103,10 @@ export default function ModelProvider() {
                     current={state.currentPage}
                     total={state.total}
                     pageSize={state.pageSize}
-                    onChange={handleChangePage}
+                    onChange={changePage}
                 />
             </TodoListProvider>
         </PageContent>
     );
 
-}
+}

example/src/modelProvider/model.ts

@@ -42,13 +42,13 @@ export default class SimpleTodoList implements OriginAgent<State> {
 
     private async fetchDataSource(searchParams: SearchParams, currentPage: number, pageSize: number): Promise<State> {
         const fetchParams = {...searchParams, currentPage, pageSize};
-        const {content: dataSource, total} = await fetchTodoList(fetchParams);
+        const {content: dataSource, total} = await fetchTodoListWithDelay(fetchParams,currentPage===2?2000:0);
         // Copy searchParams here
         return {searchParams:{...searchParams}, dataSource, currentPage, pageSize, total};
     }
 
     // this method should works with a page navigation
-    @middleWare(MiddleWarePresets.takePromiseResolve())
+    @middleWare(MiddleWarePresets.takeLatest())
     async changePage(currentPage: number, pageSize: number = 10): Promise<State> {
         const {searchParams} = this.state;
         return this.fetchDataSource(searchParams, currentPage, pageSize);
@@ -61,4 +61,4 @@ export default class SimpleTodoList implements OriginAgent<State> {
         return this.fetchDataSource(param, 1, 10);
     }
 
-}
+}

example/src/newFeatures/index.tsx

@@ -14,7 +14,7 @@ import {MiddleWarePresets, weakSharing} from "agent-reducer";
 // often be reset back, if there is no living `Agent` built on it.
 const searchParamsModel = weakSharing(() => SearchParamsModel);
 
-const simpleTodoList = weakSharing(() => SimpleTodoList);
+const simpleTodoList = new SimpleTodoList();
 
 const SearchParamComponent = memo(() => {
 
@@ -27,16 +27,18 @@ const SearchParamComponent = memo(() => {
     // So, model sharing only works on 'Agents' base on a same model object.
     // API `useAgentMethods` can optimize our component,
     // it never leads its consumer (component) rerender.
-    const {search} = useAgentMethods(simpleTodoList.current);
+    const {search} = useAgentMethods(simpleTodoList);
 
     // API `useAgentSelector` can optimize our component,
     // it only leads its consumer (component) rerender, when the extracted data changes.
-    const searchParams = useAgentSelector(simpleTodoList.current, ({searchParams}) => searchParams);
+    const searchParams = useAgentSelector(simpleTodoList, ({searchParams}) => searchParams);
 
     useEffect(() => {
         feedback(searchParams);
     }, [searchParams]);
 
+    console.log('search...',state)
+
     const handleSubmit = useCallback(async () => {
         // submit current searchParams with model object `simpleTodoList`
         search(state);
@@ -56,23 +58,22 @@ const SearchParamComponent = memo(() => {
 export default function NewFeatures() {
 
     // `Agent` bases on model `simpleTodoList`
-    const agent = useAgentReducer(simpleTodoList.current);
+    const agent = useAgentReducer(simpleTodoList);
 
     const {
         state,
         search,
+        changePage
     } = agent;
 
-    const {changePage: changePageLatest} = useMiddleWare(agent, MiddleWarePresets.takeLatest());
-
     useEffect(() => {
         search();
     }, []);
 
     // handle page change
     const handleChangePage = useCallback(async (currentPage: number, pageSize: number = 10) => {
         // feedback searchParams with model object `searchParamsModel`.
-        await changePageLatest(currentPage, pageSize);
+        await changePage(currentPage, pageSize);
     }, [state]);
 
     const renderPriorLevel = useCallback((value: PriorLevel) => {
@@ -91,9 +92,9 @@ export default function NewFeatures() {
                 current={state.currentPage}
                 total={state.total}
                 pageSize={state.pageSize}
-                onChange={handleChangePage}
+                onChange={changePage}
             />
         </PageContent>
     );
 
-}
+}

example/src/newFeatures/model.ts

@@ -42,7 +42,7 @@ export default class SimpleTodoList implements OriginAgent<State> {
 
     private async fetchDataSource(searchParams: SearchParams, currentPage: number, pageSize: number): Promise<State> {
         const fetchParams = {...searchParams, currentPage, pageSize};
-        const {content: dataSource, total} = await fetchTodoList(fetchParams);
+        const {content: dataSource, total} = await fetchTodoListWithDelay(fetchParams, currentPage === 2 ? 3000 : 0);
         // Copy searchParams here
         return {searchParams:{...searchParams}, dataSource, currentPage, pageSize, total};
     }
@@ -61,4 +61,4 @@ export default class SimpleTodoList implements OriginAgent<State> {
         return this.fetchDataSource(param, 1, 10);
     }
 
-}
+}

example/src/takeLatest/index.tsx

@@ -92,4 +92,4 @@ export default function TakeLatest() {
         </PageContent>
     );
 
-}
+}