sync features and bugfixs from 25a535d (#1669)

Author: embbnux

.sync

@@ -1 +1 @@
-f9b619e8a4dfcf524a7f4fa2cf8aed7452d2273d
+25a535d1b5764390c1d0407963d4bc6bf4a9f3e4

packages/babel-settings/lib/jestTransform.js

@@ -1,4 +1,4 @@
-module.exports = require('babel-jest').createTransformer({
+module.exports = require('babel-jest').default.createTransformer({
   ignore: [/node_modules/],
   rootMode: 'upward',
 });

packages/babel-settings/package.json

@@ -31,7 +31,7 @@
   },
   "peerDependencies": {
     "@babel/polyfill": "^7.10.4",
-    "babel-jest": "^26.3.0"
+    "babel-jest": "^27.0.1"
   },
   "ci": {
     "ringcentral-js-widgets": "**"

packages/core/README.md

@@ -333,6 +333,45 @@ class Counter extends RcModuleV2<Deps> {
 }
 ```
 
+- `watchEffect`
+
+It is used to watch multiple states, where the callback with the second parameter returns an array of dependency collection.
+
+
+```ts
+class Counter extends RcModuleV2<Deps> {
+  constructor(deps: Deps) {
+    super({
+      deps,
+    });
+    const dispose = watchEffect(
+      this,
+      () => [this.a, this.b],
+      (newValue, oldValue) => {
+        // do something
+      },
+    );
+  }
+
+  @state
+  a = 0;
+
+  @state
+  b = 0;
+
+  @action
+  increaseA() {
+    this.a += 1;
+  }
+
+  @action
+  increaseB() {
+    this.b += 1;
+  }
+}
+```
+
+
 - `subscribe`
 
 The subscribed function will be triggered after each Redux dispatch action update event. It has a similar mechanism to the RcModuleV2 API `onStateChange()`, except that `onStateChange()` cannot be unsubscribed, but the unsubscribed function returned by `subscribe()` can be used to cancel the subscription.

packages/core/lib/RcModule/RcModule.ts

@@ -6,6 +6,7 @@ import {
   computed,
   createStore,
   watch,
+  watchEffect,
   Service,
   storeKey,
   identifierKey,
@@ -50,8 +51,11 @@ export const spawnStorageReducersKey: unique symbol = Symbol(
   'spawnStorageReducers',
 );
 
-interface Options<T> {
-  deps?: T;
+export interface RcModuleOptions<T> {
+  deps?: T & {
+    storage?: any;
+    globalStorage?: any;
+  };
   enableCache?: boolean;
   enableGlobalCache?: boolean;
   storageKey?: string;
@@ -106,7 +110,7 @@ abstract class RcModuleV2<T = {}> {
     enableCache = false,
     enableGlobalCache = false,
     ...options
-  }: Options<T & { storage?: any; globalStorage?: any }> = {}) {
+  }: RcModuleOptions<T> = {}) {
     this._deps = deps;
     this[storageKey] = options.storageKey;
     this[enableCacheKey] = enableCache;
@@ -439,6 +443,7 @@ export {
   computed,
   createStore,
   watch,
+  watchEffect,
   stateKey,
   storeKey,
   identifierKey,

packages/core/lib/track.ts

@@ -59,6 +59,7 @@ export const track = (trackEvent: TrackEvent) => {
         }
       } catch (e) {
         console.warn(`Analytics Error: ${target[identifierKey]}.${name}`);
+        console.error(e);
       }
       return result;
     };

packages/core/lib/usm-redux/createStore.ts

@@ -144,6 +144,8 @@ export const createStore = (
         },
         {},
       );
+      // support custom reducers
+      service._reducers = serviceReducers;
       const reducer = combineReducers(serviceReducers);
       Object.assign(reducers, {
         [identifier]: reducer,

packages/core/lib/usm-redux/index.ts

@@ -1,5 +1,5 @@
 export { createStore, setPatchesToggle } from './createStore';
-export { subscribe, watch } from './subscribe';
+export { subscribe, watch, watchEffect } from './subscribe';
 export { action, computed, state } from './decorators/index';
 export { getStagedState } from './utils/index';
 export * from 'immer';

packages/core/lib/usm-redux/interface.ts

@@ -61,3 +61,9 @@ export type Watch = <T>(
   selector: () => T,
   watcher: (newValue: T, oldValue: T) => void,
 ) => Unsubscribe;
+
+export type WatchEffect = <T extends any[]>(
+  module: any,
+  selector: () => [...T],
+  watcher: (newValue: T, oldValue: T) => void,
+) => Unsubscribe;

packages/core/lib/usm-redux/subscribe.ts

@@ -4,6 +4,7 @@ import {
   Unsubscribe,
   Subscription,
   Service,
+  WatchEffect,
 } from './interface';
 import { storeKey, subscriptionsKey } from './constant';
 import { isEqual } from './utils/index';
@@ -60,4 +61,32 @@ const watch: Watch = (module, selector, watcher) => {
   });
 };
 
-export { subscribe, watch };
+const watchEffect: WatchEffect = (module, selector, watcher) => {
+  if (typeof watcher !== 'function') {
+    const className = Object.getPrototypeOf(module).constructor.name;
+    throw new Error(
+      `The 'watcher' should be a function in the class '${className}'.`,
+    );
+  }
+  let oldValues = selector();
+  if (!Array.isArray(oldValues)) {
+    const className = Object.getPrototypeOf(module).constructor.name;
+    throw new Error(
+      `The 'selector' should be a function that returns an array in the class '${className}'.`,
+    );
+  }
+  return subscribe(module, () => {
+    const newValues = selector();
+    const length = oldValues.length;
+    for (let i = 0; i < length; i++) {
+      if (!isEqual(newValues[i], oldValues[i])) {
+        const lastValues = oldValues;
+        oldValues = newValues;
+        watcher(newValues, lastValues);
+        break;
+      }
+    }
+  });
+};
+
+export { subscribe, watch, watchEffect };