@mic-rexjs/usecases-react 2.3.4 → 2.3.6

package/lib/hooks/useUseCase/index.test.js

@@ -132,6 +132,9 @@ var mathUseCase = function mathUseCase() {
     subtraction: subtractionReducer
   };
 };
+var fieldPathUseCase = function fieldPathUseCase() {
+  return (0, _usecases.objectUseCase)();
+};
 var Child = function Child(_ref2) {
   var _ref2$textPrefix = _ref2.textPrefix,
     textPrefix = _ref2$textPrefix === void 0 ? '' : _ref2$textPrefix,
@@ -779,6 +782,586 @@ var useDeepCompareUpdate = function useDeepCompareUpdate(callback, deps) {
       (0, _globals.expect)(onPathChange2).toHaveBeenCalledTimes(1);
       (0, _globals.expect)(onPathChange2).toHaveBeenLastCalledWith(PATH_2, PATH_1);
     });
+    (0, _globals.test)('`options.watch` should be trigger after entity changed', function () {
+      var onPathChange = _globals.jest.fn();
+      var onSizeChange = _globals.jest.fn();
+      var _renderHook19 = (0, _react.renderHook)(function () {
+          return (0, _.useUseCase)(defaultFile, fileUseCase, {
+            watch: {
+              path: onPathChange,
+              size: onSizeChange
+            }
+          });
+        }),
+        result = _renderHook19.result;
+      var cores = result.current;
+      var _cores13 = (0, _slicedToArray2["default"])(cores, 2),
+        setPath = _cores13[1].setPath;
+      (0, _globals.expect)(onPathChange).toHaveBeenCalledTimes(0);
+      (0, _react.act)(function () {
+        setPath(PATH_1);
+      });
+      (0, _globals.expect)(onPathChange).toHaveBeenCalledTimes(1);
+      (0, _globals.expect)(onSizeChange).toHaveBeenCalledTimes(0);
+      (0, _globals.expect)(onPathChange).toHaveBeenLastCalledWith({
+        fieldPaths: ['path'],
+        newEntity: _objectSpread(_objectSpread({}, defaultFile), {}, {
+          path: PATH_1,
+          ext: EXT_1
+        }),
+        oldEntity: defaultFile,
+        newValue: PATH_1,
+        oldValue: ''
+      });
+    });
+    (0, _globals.test)('`options.watch` should trigger the latest one', function () {
+      var onPathChange1 = _globals.jest.fn();
+      var onPathChange2 = _globals.jest.fn();
+      var onPathChange = onPathChange1;
+      var _renderHook20 = (0, _react.renderHook)(function () {
+          return (0, _.useUseCase)(defaultFile, fileUseCase, {
+            watch: {
+              path: onPathChange
+            }
+          });
+        }),
+        result = _renderHook20.result;
+      var cores = result.current;
+      var _cores14 = (0, _slicedToArray2["default"])(cores, 2),
+        _cores14$ = _cores14[1],
+        setPath = _cores14$.setPath,
+        setEntity = _cores14$.setEntity;
+      (0, _globals.expect)(onPathChange1).toHaveBeenCalledTimes(0);
+      (0, _react.act)(function () {
+        setPath(PATH_1);
+        setEntity({
+          size: 5000
+        });
+        onPathChange = onPathChange2;
+      });
+      (0, _globals.expect)(onPathChange1).toHaveBeenCalledTimes(1);
+      (0, _globals.expect)(onPathChange1).toHaveBeenLastCalledWith({
+        fieldPaths: ['path'],
+        newEntity: _objectSpread(_objectSpread({}, defaultFile), {}, {
+          path: PATH_1,
+          ext: EXT_1
+        }),
+        oldEntity: defaultFile,
+        newValue: PATH_1,
+        oldValue: ''
+      });
+      (0, _react.act)(function () {
+        setPath('');
+      });
+      (0, _globals.expect)(onPathChange1).toHaveBeenCalledTimes(1);
+      (0, _globals.expect)(onPathChange2).toHaveBeenCalledTimes(1);
+      (0, _globals.expect)(onPathChange2).toHaveBeenLastCalledWith({
+        fieldPaths: ['path'],
+        newEntity: _objectSpread(_objectSpread({}, defaultFile), {}, {
+          size: 5000
+        }),
+        oldEntity: _objectSpread(_objectSpread({}, defaultFile), {}, {
+          path: PATH_1,
+          ext: EXT_1,
+          size: 5000
+        }),
+        newValue: '',
+        oldValue: PATH_1
+      });
+    });
+    (0, _globals.test)('`options.watch` should work with array field path of array', function () {
+      var onExtChange = _globals.jest.fn();
+      var onSizeChange = _globals.jest.fn();
+      var _renderHook21 = (0, _react.renderHook)(function () {
+          return (0, _.useUseCase)({}, fieldPathUseCase, {
+            watch: {
+              'list.ext': onExtChange,
+              'list.size': onSizeChange
+            }
+          });
+        }),
+        result = _renderHook21.result;
+      var cores = result.current;
+      var _cores15 = (0, _slicedToArray2["default"])(cores, 2),
+        setEntity = _cores15[1].setEntity;
+      (0, _react.act)(function () {
+        setEntity({
+          list: [defaultFile]
+        });
+      });
+      (0, _globals.expect)(onExtChange).toHaveBeenCalledTimes(1);
+      (0, _globals.expect)(onSizeChange).toHaveBeenCalledTimes(1);
+      (0, _globals.expect)(onExtChange).toHaveBeenCalledWith({
+        fieldPaths: ['list', '0', 'ext'],
+        newEntity: {
+          list: [defaultFile]
+        },
+        oldEntity: {},
+        newValue: '',
+        oldValue: void 0
+      });
+      (0, _globals.expect)(onSizeChange).toHaveBeenCalledWith({
+        fieldPaths: ['list', '0', 'size'],
+        newEntity: {
+          list: [defaultFile]
+        },
+        oldEntity: {},
+        newValue: 0,
+        oldValue: void 0
+      });
+      (0, _react.act)(function () {
+        setEntity({
+          list: [_objectSpread(_objectSpread({}, defaultFile), {}, {
+            ext: EXT_1
+          })]
+        });
+      });
+      (0, _globals.expect)(onExtChange).toHaveBeenCalledTimes(2);
+      (0, _globals.expect)(onSizeChange).toHaveBeenCalledTimes(1);
+      (0, _globals.expect)(onExtChange).toHaveBeenCalledWith({
+        fieldPaths: ['list', '0', 'ext'],
+        newEntity: {
+          list: [_objectSpread(_objectSpread({}, defaultFile), {}, {
+            ext: EXT_1
+          })]
+        },
+        oldEntity: {
+          list: [defaultFile]
+        },
+        newValue: EXT_1,
+        oldValue: ''
+      });
+      (0, _react.act)(function () {
+        setEntity({
+          list: [_objectSpread(_objectSpread({}, defaultFile), {}, {
+            ext: EXT_1
+          }), _objectSpread(_objectSpread({}, defaultFile), {}, {
+            ext: EXT_2
+          })]
+        });
+      });
+      (0, _globals.expect)(onExtChange).toHaveBeenCalledTimes(3);
+      (0, _globals.expect)(onSizeChange).toHaveBeenCalledTimes(2);
+      (0, _globals.expect)(onExtChange).toHaveBeenCalledWith({
+        fieldPaths: ['list', '1', 'ext'],
+        newEntity: {
+          list: [_objectSpread(_objectSpread({}, defaultFile), {}, {
+            ext: EXT_1
+          }), _objectSpread(_objectSpread({}, defaultFile), {}, {
+            ext: EXT_2
+          })]
+        },
+        oldEntity: {
+          list: [_objectSpread(_objectSpread({}, defaultFile), {}, {
+            ext: EXT_1
+          })]
+        },
+        newValue: EXT_2,
+        oldValue: void 0
+      });
+      (0, _globals.expect)(onSizeChange).toHaveBeenCalledWith({
+        fieldPaths: ['list', '1', 'size'],
+        newEntity: {
+          list: [_objectSpread(_objectSpread({}, defaultFile), {}, {
+            ext: EXT_1
+          }), _objectSpread(_objectSpread({}, defaultFile), {}, {
+            ext: EXT_2
+          })]
+        },
+        oldEntity: {
+          list: [_objectSpread(_objectSpread({}, defaultFile), {}, {
+            ext: EXT_1
+          })]
+        },
+        newValue: 0,
+        oldValue: void 0
+      });
+      (0, _react.act)(function () {
+        setEntity({
+          nestedList: []
+        });
+      });
+      (0, _globals.expect)(onExtChange).toHaveBeenCalledTimes(3);
+      (0, _globals.expect)(onSizeChange).toHaveBeenCalledTimes(2);
+      (0, _react.act)(function () {
+        setEntity(function () {
+          return {
+            list: [_objectSpread(_objectSpread({}, defaultFile), {}, {
+              ext: EXT_2
+            }), _objectSpread(_objectSpread({}, defaultFile), {}, {
+              ext: EXT_1
+            }), defaultFile]
+          };
+        });
+      });
+      (0, _globals.expect)(onExtChange).toHaveBeenCalledTimes(6);
+      (0, _globals.expect)(onSizeChange).toHaveBeenCalledTimes(3);
+      (0, _globals.expect)(onExtChange).toHaveBeenNthCalledWith(4, {
+        fieldPaths: ['list', '0', 'ext'],
+        newEntity: {
+          list: [_objectSpread(_objectSpread({}, defaultFile), {}, {
+            ext: EXT_2
+          }), _objectSpread(_objectSpread({}, defaultFile), {}, {
+            ext: EXT_1
+          }), defaultFile]
+        },
+        oldEntity: {
+          list: [_objectSpread(_objectSpread({}, defaultFile), {}, {
+            ext: EXT_1
+          }), _objectSpread(_objectSpread({}, defaultFile), {}, {
+            ext: EXT_2
+          })],
+          nestedList: []
+        },
+        newValue: EXT_2,
+        oldValue: EXT_1
+      });
+      (0, _globals.expect)(onExtChange).toHaveBeenNthCalledWith(5, {
+        fieldPaths: ['list', '1', 'ext'],
+        newEntity: {
+          list: [_objectSpread(_objectSpread({}, defaultFile), {}, {
+            ext: EXT_2
+          }), _objectSpread(_objectSpread({}, defaultFile), {}, {
+            ext: EXT_1
+          }), defaultFile]
+        },
+        oldEntity: {
+          list: [_objectSpread(_objectSpread({}, defaultFile), {}, {
+            ext: EXT_1
+          }), _objectSpread(_objectSpread({}, defaultFile), {}, {
+            ext: EXT_2
+          })],
+          nestedList: []
+        },
+        newValue: EXT_1,
+        oldValue: EXT_2
+      });
+      (0, _globals.expect)(onExtChange).toHaveBeenNthCalledWith(6, {
+        fieldPaths: ['list', '2', 'ext'],
+        newEntity: {
+          list: [_objectSpread(_objectSpread({}, defaultFile), {}, {
+            ext: EXT_2
+          }), _objectSpread(_objectSpread({}, defaultFile), {}, {
+            ext: EXT_1
+          }), defaultFile]
+        },
+        oldEntity: {
+          list: [_objectSpread(_objectSpread({}, defaultFile), {}, {
+            ext: EXT_1
+          }), _objectSpread(_objectSpread({}, defaultFile), {}, {
+            ext: EXT_2
+          })],
+          nestedList: []
+        },
+        newValue: '',
+        oldValue: void 0
+      });
+      (0, _globals.expect)(onSizeChange).toHaveBeenCalledWith({
+        fieldPaths: ['list', '2', 'size'],
+        newEntity: {
+          list: [_objectSpread(_objectSpread({}, defaultFile), {}, {
+            ext: EXT_2
+          }), _objectSpread(_objectSpread({}, defaultFile), {}, {
+            ext: EXT_1
+          }), defaultFile]
+        },
+        oldEntity: {
+          list: [_objectSpread(_objectSpread({}, defaultFile), {}, {
+            ext: EXT_1
+          }), _objectSpread(_objectSpread({}, defaultFile), {}, {
+            ext: EXT_2
+          })],
+          nestedList: []
+        },
+        newValue: 0,
+        oldValue: void 0
+      });
+      (0, _react.act)(function () {
+        setEntity(function () {
+          return {};
+        });
+      });
+      (0, _globals.expect)(onExtChange).toHaveBeenCalledTimes(9);
+      (0, _globals.expect)(onSizeChange).toHaveBeenCalledTimes(6);
+      (0, _globals.expect)(onExtChange).toHaveBeenNthCalledWith(7, {
+        fieldPaths: ['list', '0', 'ext'],
+        newEntity: {},
+        oldEntity: {
+          list: [_objectSpread(_objectSpread({}, defaultFile), {}, {
+            ext: EXT_2
+          }), _objectSpread(_objectSpread({}, defaultFile), {}, {
+            ext: EXT_1
+          }), defaultFile]
+        },
+        newValue: void 0,
+        oldValue: EXT_2
+      });
+      (0, _globals.expect)(onExtChange).toHaveBeenNthCalledWith(8, {
+        fieldPaths: ['list', '1', 'ext'],
+        newEntity: {},
+        oldEntity: {
+          list: [_objectSpread(_objectSpread({}, defaultFile), {}, {
+            ext: EXT_2
+          }), _objectSpread(_objectSpread({}, defaultFile), {}, {
+            ext: EXT_1
+          }), defaultFile]
+        },
+        newValue: void 0,
+        oldValue: EXT_1
+      });
+      (0, _globals.expect)(onExtChange).toHaveBeenNthCalledWith(9, {
+        fieldPaths: ['list', '2', 'ext'],
+        newEntity: {},
+        oldEntity: {
+          list: [_objectSpread(_objectSpread({}, defaultFile), {}, {
+            ext: EXT_2
+          }), _objectSpread(_objectSpread({}, defaultFile), {}, {
+            ext: EXT_1
+          }), defaultFile]
+        },
+        newValue: void 0,
+        oldValue: ''
+      });
+      (0, _globals.expect)(onSizeChange).toHaveBeenNthCalledWith(4, {
+        fieldPaths: ['list', '0', 'size'],
+        newEntity: {},
+        oldEntity: {
+          list: [_objectSpread(_objectSpread({}, defaultFile), {}, {
+            ext: EXT_2
+          }), _objectSpread(_objectSpread({}, defaultFile), {}, {
+            ext: EXT_1
+          }), defaultFile]
+        },
+        newValue: void 0,
+        oldValue: 0
+      });
+      (0, _globals.expect)(onSizeChange).toHaveBeenNthCalledWith(5, {
+        fieldPaths: ['list', '1', 'size'],
+        newEntity: {},
+        oldEntity: {
+          list: [_objectSpread(_objectSpread({}, defaultFile), {}, {
+            ext: EXT_2
+          }), _objectSpread(_objectSpread({}, defaultFile), {}, {
+            ext: EXT_1
+          }), defaultFile]
+        },
+        newValue: void 0,
+        oldValue: 0
+      });
+      (0, _globals.expect)(onSizeChange).toHaveBeenNthCalledWith(6, {
+        fieldPaths: ['list', '2', 'size'],
+        newEntity: {},
+        oldEntity: {
+          list: [_objectSpread(_objectSpread({}, defaultFile), {}, {
+            ext: EXT_2
+          }), _objectSpread(_objectSpread({}, defaultFile), {}, {
+            ext: EXT_1
+          }), defaultFile]
+        },
+        newValue: void 0,
+        oldValue: 0
+      });
+    });
+    (0, _globals.test)('`options.watch` should work with field path of array length', function () {
+      var onEntityLengthChange = _globals.jest.fn();
+      var onListLengthChange = _globals.jest.fn();
+      var lengthUseCase = function lengthUseCase() {
+        return (0, _usecases.entityUseCase)();
+      };
+      var _renderHook22 = (0, _react.renderHook)(function () {
+          return (0, _.useUseCase)([], lengthUseCase, {
+            watch: {
+              length: onEntityLengthChange,
+              'list.length': onListLengthChange
+            }
+          });
+        }),
+        result = _renderHook22.result;
+      var cores = result.current;
+      var _cores16 = (0, _slicedToArray2["default"])(cores, 2),
+        setEntity = _cores16[1].setEntity;
+      (0, _globals.expect)(onEntityLengthChange).toHaveBeenCalledTimes(0);
+      (0, _globals.expect)(onListLengthChange).toHaveBeenCalledTimes(0);
+      (0, _react.act)(function () {
+        setEntity([{
+          list: [defaultFile, defaultFile]
+        }]);
+      });
+      (0, _globals.expect)(onEntityLengthChange).toHaveBeenCalledTimes(1);
+      (0, _globals.expect)(onListLengthChange).toHaveBeenCalledTimes(1);
+      (0, _globals.expect)(onEntityLengthChange).toHaveBeenCalledWith({
+        fieldPaths: ['length'],
+        newEntity: [{
+          list: [defaultFile, defaultFile]
+        }],
+        oldEntity: [],
+        newValue: 1,
+        oldValue: 0
+      });
+      (0, _globals.expect)(onListLengthChange).toHaveBeenCalledWith({
+        fieldPaths: ['0', 'list', 'length'],
+        newEntity: [{
+          list: [defaultFile, defaultFile]
+        }],
+        oldEntity: [],
+        newValue: 2,
+        oldValue: void 0
+      });
+    });
+    (0, _globals.test)('`options.watch` should work with field path of nested array', function () {
+      var onChange = _globals.jest.fn();
+      var _renderHook23 = (0, _react.renderHook)(function () {
+          return (0, _.useUseCase)({}, fieldPathUseCase, {
+            watch: {
+              'nestedList.size': onChange
+            }
+          });
+        }),
+        result = _renderHook23.result;
+      var cores = result.current;
+      var _cores17 = (0, _slicedToArray2["default"])(cores, 2),
+        setEntity = _cores17[1].setEntity;
+      (0, _globals.expect)(onChange).toHaveBeenCalledTimes(0);
+      (0, _react.act)(function () {
+        setEntity({
+          nestedList: [[[defaultFile]]]
+        });
+      });
+      (0, _globals.expect)(onChange).toHaveBeenCalledTimes(1);
+      (0, _globals.expect)(onChange).toHaveBeenCalledWith({
+        fieldPaths: ['nestedList', '0', '0', '0', 'size'],
+        newEntity: {
+          nestedList: [[[defaultFile]]]
+        },
+        oldEntity: {},
+        newValue: 0,
+        oldValue: void 0
+      });
+      (0, _react.act)(function () {
+        setEntity({
+          nestedList: [[[_objectSpread(_objectSpread({}, defaultFile), {}, {
+            size: 100
+          }), _objectSpread(_objectSpread({}, defaultFile), {}, {
+            size: 200
+          })]], [[_objectSpread(_objectSpread({}, defaultFile), {}, {
+            size: 300
+          })]]]
+        });
+      });
+      (0, _globals.expect)(onChange).toHaveBeenCalledTimes(4);
+      (0, _globals.expect)(onChange).toHaveBeenNthCalledWith(2, {
+        fieldPaths: ['nestedList', '0', '0', '0', 'size'],
+        newEntity: {
+          nestedList: [[[_objectSpread(_objectSpread({}, defaultFile), {}, {
+            size: 100
+          }), _objectSpread(_objectSpread({}, defaultFile), {}, {
+            size: 200
+          })]], [[_objectSpread(_objectSpread({}, defaultFile), {}, {
+            size: 300
+          })]]]
+        },
+        oldEntity: {
+          nestedList: [[[defaultFile]]]
+        },
+        newValue: 100,
+        oldValue: 0
+      });
+      (0, _globals.expect)(onChange).toHaveBeenNthCalledWith(3, {
+        fieldPaths: ['nestedList', '0', '0', '1', 'size'],
+        newEntity: {
+          nestedList: [[[_objectSpread(_objectSpread({}, defaultFile), {}, {
+            size: 100
+          }), _objectSpread(_objectSpread({}, defaultFile), {}, {
+            size: 200
+          })]], [[_objectSpread(_objectSpread({}, defaultFile), {}, {
+            size: 300
+          })]]]
+        },
+        oldEntity: {
+          nestedList: [[[defaultFile]]]
+        },
+        newValue: 200,
+        oldValue: void 0
+      });
+      (0, _globals.expect)(onChange).toHaveBeenNthCalledWith(4, {
+        fieldPaths: ['nestedList', '1', '0', '0', 'size'],
+        newEntity: {
+          nestedList: [[[_objectSpread(_objectSpread({}, defaultFile), {}, {
+            size: 100
+          }), _objectSpread(_objectSpread({}, defaultFile), {}, {
+            size: 200
+          })]], [[_objectSpread(_objectSpread({}, defaultFile), {}, {
+            size: 300
+          })]]]
+        },
+        oldEntity: {
+          nestedList: [[[defaultFile]]]
+        },
+        newValue: 300,
+        oldValue: void 0
+      });
+    });
+    (0, _globals.test)('`options.watch` should work with field path of object', function () {
+      var onExtChange = _globals.jest.fn();
+      var onSizeChange = _globals.jest.fn();
+      var _renderHook24 = (0, _react.renderHook)(function () {
+          return (0, _.useUseCase)({}, fieldPathUseCase, {
+            watch: {
+              'obj.file.ext': onExtChange,
+              'obj.file.size': onSizeChange
+            }
+          });
+        }),
+        result = _renderHook24.result;
+      var cores = result.current;
+      var _cores18 = (0, _slicedToArray2["default"])(cores, 2),
+        setEntity = _cores18[1].setEntity;
+      (0, _globals.expect)(onExtChange).toHaveBeenCalledTimes(0);
+      (0, _react.act)(function () {
+        setEntity({
+          obj: {
+            file: {
+              ext: EXT_1
+            }
+          }
+        });
+      });
+      (0, _globals.expect)(onExtChange).toHaveBeenCalledTimes(1);
+      (0, _globals.expect)(onSizeChange).toHaveBeenCalledTimes(0);
+      (0, _globals.expect)(onExtChange).toHaveBeenCalledWith({
+        fieldPaths: ['obj', 'file', 'ext'],
+        newEntity: {
+          obj: {
+            file: {
+              ext: EXT_1
+            }
+          }
+        },
+        oldEntity: {},
+        newValue: EXT_1,
+        oldValue: void 0
+      });
+      (0, _react.act)(function () {
+        setEntity(function () {
+          return {};
+        });
+      });
+      (0, _globals.expect)(onExtChange).toHaveBeenCalledTimes(2);
+      (0, _globals.expect)(onSizeChange).toHaveBeenCalledTimes(0);
+      (0, _globals.expect)(onExtChange).toHaveBeenCalledWith({
+        fieldPaths: ['obj', 'file', 'ext'],
+        newEntity: {},
+        oldEntity: {
+          obj: {
+            file: {
+              ext: EXT_1
+            }
+          }
+        },
+        newValue: void 0,
+        oldValue: EXT_1
+      });
+    });
     (0, _globals.test)('multiple `Provider` should work', function () {
       var onNumberMount = _globals.jest.fn();
       var onStringMount = _globals.jest.fn();
@@ -832,28 +1415,28 @@ var useDeepCompareUpdate = function useDeepCompareUpdate(callback, deps) {
   });
   (0, _globals.describe)('`useUseCase` should work the same as `ModeCoreCollectionHook`', function () {
     _globals.test.each([_UseCaseModes.UseCaseModes.Normal, _UseCaseModes.UseCaseModes.Stateless])('[mode=%s]: check context type', function (mode) {
-      var _renderHook19 = (0, _react.renderHook)(function () {
+      var _renderHook25 = (0, _react.renderHook)(function () {
           return (0, _.useUseCase)(defaultFile, fileUseCase, mode);
         }),
-        result = _renderHook19.result;
+        result = _renderHook25.result;
       var cores = result.current;
       (0, _globals.expect)(Array.isArray(cores)).toBe(true);
       (0, _globals.expect)(cores).toHaveLength(3);
     });
     (0, _globals.test)('stateless mode should not generate new reducers when `yeild entity`', function () {
       var onUpdate = _globals.jest.fn();
-      var _renderHook20 = (0, _react.renderHook)(function () {
+      var _renderHook26 = (0, _react.renderHook)(function () {
           var file = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultFile;
           (0, _ahooks.useUpdateEffect)(function () {
             onUpdate();
           });
           return (0, _.useUseCase)(file, fileUseCase, _UseCaseModes.UseCaseModes.Stateless);
         }),
-        result = _renderHook20.result,
-        rerender = _renderHook20.rerender;
+        result = _renderHook26.result,
+        rerender = _renderHook26.rerender;
       var cores = result.current;
-      var _cores13 = (0, _slicedToArray2["default"])(cores, 2),
-        setPath = _cores13[1].setPath;
+      var _cores19 = (0, _slicedToArray2["default"])(cores, 2),
+        setPath = _cores19[1].setPath;
       setPath(PATH_1);
       (0, _globals.expect)(onUpdate).toHaveBeenCalledTimes(0);
       (0, _globals.expect)(result.current[0].path).toBe('');
@@ -866,16 +1449,16 @@ var useDeepCompareUpdate = function useDeepCompareUpdate(callback, deps) {
     });
     (0, _globals.test)('stateless mode should not trigger update when after `yield entity`', function () {
       var onUpdate = _globals.jest.fn();
-      var _renderHook21 = (0, _react.renderHook)(function () {
+      var _renderHook27 = (0, _react.renderHook)(function () {
           (0, _ahooks.useUpdateEffect)(function () {
             onUpdate();
           });
           return (0, _.useUseCase)(defaultFile, fileUseCase, _UseCaseModes.UseCaseModes.Stateless);
         }),
-        result = _renderHook21.result;
+        result = _renderHook27.result;
       var cores = result.current;
-      var _cores14 = (0, _slicedToArray2["default"])(cores, 2),
-        reducers = _cores14[1];
+      var _cores20 = (0, _slicedToArray2["default"])(cores, 2),
+        reducers = _cores20[1];
       var setPath = reducers.setPath;
       (0, _react.act)(function () {
         setPath(PATH_1);
@@ -1216,41 +1799,210 @@ var useDeepCompareUpdate = function useDeepCompareUpdate(callback, deps) {
         path: PATH_1
       }));
     });
+    (0, _globals.test)('`options.watch` should be trigger at child elements', function () {
+      var onExtChange = _globals.jest.fn();
+      var firstButtonText = 'first button';
+      var A = function A() {
+        var _useUseCase44 = (0, _.useUseCase)(fileUseCase, {
+            watch: {
+              ext: onExtChange
+            }
+          }),
+          _useUseCase45 = (0, _slicedToArray2["default"])(_useUseCase44, 2),
+          setPath = _useUseCase45[1].setPath;
+        var onFirstClick = function onFirstClick() {
+          setPath(PATH_1);
+        };
+        return (0, _jsxRuntime.jsx)("button", {
+          onClick: onFirstClick,
+          children: firstButtonText
+        });
+      };
+      var B = function B() {
+        var _useUseCase46 = (0, _.useUseCase)(defaultFile, fileUseCase, {}),
+          _useUseCase47 = (0, _slicedToArray2["default"])(_useUseCase46, 3),
+          Provider = _useUseCase47[2];
+        return (0, _jsxRuntime.jsx)(Provider, {
+          children: (0, _jsxRuntime.jsx)(A, {})
+        });
+      };
+      (0, _react.render)((0, _jsxRuntime.jsx)(B, {}));
+      (0, _globals.expect)(onExtChange).toHaveBeenCalledTimes(0);
+      _react.fireEvent.click(_react.screen.getByText(firstButtonText));
+      (0, _globals.expect)(onExtChange).toHaveBeenCalledTimes(1);
+      (0, _globals.expect)(onExtChange).toHaveBeenLastCalledWith({
+        fieldPaths: ['ext'],
+        newEntity: _objectSpread(_objectSpread({}, defaultFile), {}, {
+          ext: EXT_1,
+          path: PATH_1
+        }),
+        oldEntity: defaultFile,
+        newValue: EXT_1,
+        oldValue: ''
+      });
+    });
+    (0, _globals.test)('`options.watch` should be trigger in orders', function () {
+      var changeTimes = 0;
+      var updateChangeTimes = function updateChangeTimes(e) {
+        void e;
+        return ++changeTimes;
+      };
+      var onChangeA = _globals.jest.fn(updateChangeTimes);
+      var onChangeB = _globals.jest.fn(updateChangeTimes);
+      var onChangeC = _globals.jest.fn(updateChangeTimes);
+      var buttonText = 'my button';
+      var A = function A(_ref8) {
+        var children = _ref8.children;
+        (0, _.useUseCase)(fileUseCase, {
+          watch: {
+            ext: onChangeA
+          }
+        });
+        return (0, _jsxRuntime.jsx)(_react2.Fragment, {
+          children: children
+        });
+      };
+      var B = function B() {
+        (0, _.useUseCase)(fileUseCase, {
+          watch: {
+            ext: onChangeB
+          }
+        });
+        return (0, _jsxRuntime.jsx)(_react2.Fragment, {});
+      };
+      var C = function C() {
+        var _useUseCase48 = (0, _.useUseCase)(defaultFile, fileUseCase, {
+            watch: {
+              ext: onChangeC
+            }
+          }),
+          _useUseCase49 = (0, _slicedToArray2["default"])(_useUseCase48, 3),
+          setPath = _useUseCase49[1].setPath,
+          Provider = _useUseCase49[2];
+        var onFirstClick = function onFirstClick() {
+          setPath(PATH_1);
+        };
+        return (0, _jsxRuntime.jsxs)(Provider, {
+          children: [(0, _jsxRuntime.jsx)(A, {
+            children: (0, _jsxRuntime.jsx)(B, {})
+          }), (0, _jsxRuntime.jsx)("button", {
+            onClick: onFirstClick,
+            children: buttonText
+          })]
+        });
+      };
+      (0, _react.render)((0, _jsxRuntime.jsx)(C, {}));
+      (0, _globals.expect)(changeTimes).toBe(0);
+      _react.fireEvent.click(_react.screen.getByText(buttonText));
+      (0, _globals.expect)(onChangeA).toHaveReturnedWith(2);
+      (0, _globals.expect)(onChangeB).toHaveReturnedWith(1);
+      (0, _globals.expect)(onChangeC).toHaveReturnedWith(3);
+    });
+    _globals.test.each([_UseCaseModes.UseCaseModes.Normal, _UseCaseModes.UseCaseModes.Stateless])('[mode=%s]: `options.watch` should trigger the latest one in child components', function (mode) {
+      var onFirstExtChange = _globals.jest.fn();
+      var onSecondExtChange = _globals.jest.fn();
+      var onExtChange = onFirstExtChange;
+      var firstButtonText = 'first button';
+      var secondButtonText = 'second button';
+      var A = function A() {
+        var _useUseCase50 = (0, _.useUseCase)(fileUseCase, {
+            watch: {
+              ext: onExtChange
+            }
+          }),
+          _useUseCase51 = (0, _slicedToArray2["default"])(_useUseCase50, 2),
+          setPath = _useUseCase51[1].setPath;
+        var onFirstClick = function onFirstClick() {
+          setPath(PATH_1);
+          onExtChange = onSecondExtChange;
+        };
+        var onSecondClick = function onSecondClick() {
+          setPath('');
+        };
+        return (0, _jsxRuntime.jsxs)(_react2.Fragment, {
+          children: [(0, _jsxRuntime.jsx)("button", {
+            onClick: onFirstClick,
+            children: firstButtonText
+          }), (0, _jsxRuntime.jsx)("button", {
+            onClick: onSecondClick,
+            children: secondButtonText
+          })]
+        });
+      };
+      var B = function B() {
+        var _useState9 = (0, _react2.useState)(defaultFile),
+          _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
+          file = _useState10[0],
+          setFile = _useState10[1];
+        var _useUseCase52 = (0, _.useUseCase)(file, fileUseCase, mode, {
+            onChange: function onChange(newFile) {
+              if ((mode & _UseCaseModes.UseCaseModes.Stateless) !== _UseCaseModes.UseCaseModes.Stateless) {
+                return;
+              }
+              // `stateless` 不会保存状态，所以需要手动保存
+              setFile(newFile);
+            }
+          }),
+          _useUseCase53 = (0, _slicedToArray2["default"])(_useUseCase52, 3),
+          Provider = _useUseCase53[2];
+        return (0, _jsxRuntime.jsx)(Provider, {
+          children: (0, _jsxRuntime.jsx)(A, {})
+        });
+      };
+      (0, _react.render)((0, _jsxRuntime.jsx)(B, {}));
+      (0, _globals.expect)(onFirstExtChange).toHaveBeenCalledTimes(0);
+      _react.fireEvent.click(_react.screen.getByText(firstButtonText));
+      (0, _globals.expect)(onFirstExtChange).toHaveBeenCalledTimes(1);
+      (0, _globals.expect)(onSecondExtChange).toHaveBeenCalledTimes(0);
+      _react.fireEvent.click(_react.screen.getByText(secondButtonText));
+      (0, _globals.expect)(onFirstExtChange).toHaveBeenCalledTimes(1);
+      (0, _globals.expect)(onSecondExtChange).toHaveBeenCalledTimes(1);
+      (0, _globals.expect)(onSecondExtChange).toHaveBeenLastCalledWith({
+        fieldPaths: ['ext'],
+        newEntity: defaultFile,
+        oldEntity: _objectSpread(_objectSpread({}, defaultFile), {}, {
+          ext: EXT_1,
+          path: PATH_1
+        }),
+        newValue: '',
+        oldValue: EXT_1
+      });
+    });
   });
   (0, _globals.describe)('`useUseCase` should work the same as `useReducers`', function () {
     (0, _globals.test)('`entity` should equal `defaultFile`', function () {
-      var _renderHook22 = (0, _react.renderHook)(function () {
+      var _renderHook28 = (0, _react.renderHook)(function () {
           return (0, _.useUseCase)(mathUseCase);
         }),
-        result = _renderHook22.result;
+        result = _renderHook28.result;
       var reducers = result.current;
       (0, _globals.expect)(Array.isArray(reducers)).toBe(false);
     });
     (0, _globals.test)('returned reducer should work', function () {
-      var _renderHook23 = (0, _react.renderHook)(function () {
+      var _renderHook29 = (0, _react.renderHook)(function () {
           return (0, _.useUseCase)(mathUseCase);
         }),
-        result = _renderHook23.result;
+        result = _renderHook29.result;
       var reducers = result.current;
       var add = reducers.add;
       (0, _globals.expect)(add(1, 2)).toBe(3);
     });
     (0, _globals.test)('`usecase` should be called only once if deps has not provided', function () {
       var mockUseCase = _globals.jest.fn(mathUseCase);
-      var _renderHook24 = (0, _react.renderHook)(function () {
+      var _renderHook30 = (0, _react.renderHook)(function () {
           return (0, _.useUseCase)(mockUseCase);
         }),
-        rerender = _renderHook24.rerender;
+        rerender = _renderHook30.rerender;
       (0, _globals.expect)(mockUseCase).toHaveBeenCalledTimes(1);
       rerender();
       (0, _globals.expect)(mockUseCase).toHaveBeenCalledTimes(1);
     });
     (0, _globals.test)('`usecase` should be called only once if deps has not changed', function () {
       var mockUseCase = _globals.jest.fn(mathUseCase);
-      var _renderHook25 = (0, _react.renderHook)(function () {
+      var _renderHook31 = (0, _react.renderHook)(function () {
           return (0, _.useUseCase)(mockUseCase, {}, [1, 'x']);
         }),
-        rerender = _renderHook25.rerender;
+        rerender = _renderHook31.rerender;
       (0, _globals.expect)(mockUseCase).toHaveBeenCalledTimes(1);
       rerender();
       (0, _globals.expect)(mockUseCase).toHaveBeenCalledTimes(1);
@@ -1258,10 +2010,10 @@ var useDeepCompareUpdate = function useDeepCompareUpdate(callback, deps) {
     (0, _globals.test)('`usecase` should be called if deps has changed', function () {
       var i = 0;
       var mockUseCase = _globals.jest.fn(mathUseCase);
-      var _renderHook26 = (0, _react.renderHook)(function () {
+      var _renderHook32 = (0, _react.renderHook)(function () {
           return (0, _.useUseCase)(mockUseCase, {}, [i++, 'x']);
         }),
-        rerender = _renderHook26.rerender;
+        rerender = _renderHook32.rerender;
       (0, _globals.expect)(mockUseCase).toHaveBeenCalledTimes(1);
       rerender();
       (0, _globals.expect)(mockUseCase).toHaveBeenCalledTimes(2);
@@ -1269,8 +2021,8 @@ var useDeepCompareUpdate = function useDeepCompareUpdate(callback, deps) {
     (0, _globals.test)('reducer call should not be cached if component is at rendering phase', function () {
       var buttonText = 'button';
       var CacheTestComponent = function CacheTestComponent() {
-        var _useUseCase44 = (0, _.useUseCase)(mathUseCase),
-          subtraction = _useUseCase44.subtraction;
+        var _useUseCase54 = (0, _.useUseCase)(mathUseCase),
+          subtraction = _useUseCase54.subtraction;
         var update = (0, _ahooks.useUpdate)();
         var onClick = function onClick() {
           update();
@@ -1293,8 +2045,8 @@ var useDeepCompareUpdate = function useDeepCompareUpdate(callback, deps) {
     (0, _globals.test)('reducer call should not be cached if component is not at rendering phase', function () {
       var buttonText = 'button';
       var CacheTestComponent = function CacheTestComponent() {
-        var _useUseCase45 = (0, _.useUseCase)(mathUseCase),
-          subtraction = _useUseCase45.subtraction;
+        var _useUseCase55 = (0, _.useUseCase)(mathUseCase),
+          subtraction = _useUseCase55.subtraction;
         var onClick = function onClick() {
           subtraction(5, 3);
         };
@@ -1322,8 +2074,8 @@ var useDeepCompareUpdate = function useDeepCompareUpdate(callback, deps) {
       var count = 0;
       var buttonText = 'button';
       var StringUseCaseTestComponent = function StringUseCaseTestComponent() {
-        var _useUseCase46 = (0, _.useUseCase)(mathUseCase),
-          subtraction = _useUseCase46.subtraction;
+        var _useUseCase56 = (0, _.useUseCase)(mathUseCase),
+          subtraction = _useUseCase56.subtraction;
         var update = (0, _ahooks.useUpdate)();
         subtraction(5, count++);
         var onUpdate = function onUpdate() {
@@ -1345,12 +2097,12 @@ var useDeepCompareUpdate = function useDeepCompareUpdate(callback, deps) {
       (0, _globals.expect)(subtractionReducer).toHaveReturnedWith(4);
     });
     (0, _globals.test)('`options.extraValue` should be added after call `add` method', function () {
-      var _renderHook27 = (0, _react.renderHook)(function () {
+      var _renderHook33 = (0, _react.renderHook)(function () {
           return (0, _.useUseCase)(mathUseCase, {
             extraValue: 5
           });
         }),
-        result = _renderHook27.result;
+        result = _renderHook33.result;
       var reducers = result.current;
       var add = reducers.add;
       (0, _globals.expect)(add(1, 2)).toBe(8);
@@ -1358,11 +2110,11 @@ var useDeepCompareUpdate = function useDeepCompareUpdate(callback, deps) {
     (0, _globals.test)('when `options` has changed, it should not trigger update', function () {
       var onUpdate = _globals.jest.fn();
       var onDeepUpdate = _globals.jest.fn();
-      var _renderHook28 = (0, _react.renderHook)(function () {
-          var _useState9 = (0, _react2.useState)(0),
-            _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
-            extraValue = _useState10[0],
-            setExtraValue = _useState10[1];
+      var _renderHook34 = (0, _react.renderHook)(function () {
+          var _useState11 = (0, _react2.useState)(0),
+            _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
+            extraValue = _useState12[0],
+            setExtraValue = _useState12[1];
           var reducers = (0, _.useUseCase)(mathUseCase, {
             extraValue: extraValue
           });
@@ -1374,7 +2126,7 @@ var useDeepCompareUpdate = function useDeepCompareUpdate(callback, deps) {
           }, [reducers]);
           return setExtraValue;
         }),
-        result = _renderHook28.result;
+        result = _renderHook34.result;
       (0, _globals.expect)(onUpdate).toHaveBeenCalledTimes(0);
       (0, _globals.expect)(onDeepUpdate).toHaveBeenCalledTimes(0);
       (0, _react.act)(function () {
@@ -1386,11 +2138,11 @@ var useDeepCompareUpdate = function useDeepCompareUpdate(callback, deps) {
     (0, _globals.test)('when `deps` change, it should update reducers', function () {
       var onUpdate = _globals.jest.fn();
       var onDeepUpdate = _globals.jest.fn();
-      var _renderHook29 = (0, _react.renderHook)(function () {
-          var _useState11 = (0, _react2.useState)(0),
-            _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
-            extraValue = _useState12[0],
-            setExtraValue = _useState12[1];
+      var _renderHook35 = (0, _react.renderHook)(function () {
+          var _useState13 = (0, _react2.useState)(0),
+            _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
+            extraValue = _useState14[0],
+            setExtraValue = _useState14[1];
           var reducers = (0, _.useUseCase)(mathUseCase, {
             extraValue: extraValue
           }, [extraValue]);
@@ -1402,7 +2154,7 @@ var useDeepCompareUpdate = function useDeepCompareUpdate(callback, deps) {
           }, [reducers]);
           return setExtraValue;
         }),
-        result = _renderHook29.result;
+        result = _renderHook35.result;
       (0, _globals.expect)(onUpdate).toHaveBeenCalledTimes(0);
       (0, _globals.expect)(onDeepUpdate).toHaveBeenCalledTimes(0);
       (0, _react.act)(function () {
@@ -1414,11 +2166,11 @@ var useDeepCompareUpdate = function useDeepCompareUpdate(callback, deps) {
     (0, _globals.test)('empty `deps` should not update reducers', function () {
       var onUpdate = _globals.jest.fn();
       var onDeepUpdate = _globals.jest.fn();
-      var _renderHook30 = (0, _react.renderHook)(function () {
-          var _useState13 = (0, _react2.useState)(0),
-            _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
-            extraValue = _useState14[0],
-            setExtraValue = _useState14[1];
+      var _renderHook36 = (0, _react.renderHook)(function () {
+          var _useState15 = (0, _react2.useState)(0),
+            _useState16 = (0, _slicedToArray2["default"])(_useState15, 2),
+            extraValue = _useState16[0],
+            setExtraValue = _useState16[1];
           var reducers = (0, _.useUseCase)(mathUseCase, {
             extraValue: extraValue
           }, []);
@@ -1430,7 +2182,7 @@ var useDeepCompareUpdate = function useDeepCompareUpdate(callback, deps) {
           }, [reducers]);
           return setExtraValue;
         }),
-        result = _renderHook30.result;
+        result = _renderHook36.result;
       (0, _globals.expect)(onUpdate).toHaveBeenCalledTimes(0);
       (0, _globals.expect)(onDeepUpdate).toHaveBeenCalledTimes(0);
       (0, _react.act)(function () {