Merge pull request #41 from Houfeng/v8

V8

Author: Houfeng

.eslintrc

@@ -18,6 +18,7 @@
   "rules": {
     "@typescript-eslint/no-explicit-any": 0,
     "@typescript-eslint/explicit-function-return-type": 0,
+    "@typescript-eslint/no-non-null-assertion": 0,
     "prettier/prettier": "error"
   }
 }

.npmignore

@@ -17,8 +17,10 @@ server.yml
 .dawn/
 *.js.map
 docs/
-webpack.config.js
+rollup.config.js
+rollup.config.dev.js
 design/
+scripts/
 markdowns/
 .coveralls.yml
 .travis.yml

.vscode/launch.json

@@ -0,0 +1,24 @@
+{
+  // 使用 IntelliSense 了解相关属性。 
+  // 悬停以查看现有属性的描述。
+  // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "debug/test",
+      "type": "node",
+      "request": "launch",
+      "program": "${workspaceRoot}/node_modules/.bin/mocha",
+      "args": [
+        "-r",
+        "${workspaceRoot}/node_modules/dn-middleware-unit/lib/setups/browser_typescript",
+        "${relativeFile}"
+      ],
+      "runtimeArgs": [
+        "--nolazy"
+      ],
+      "cwd": "${workspaceRoot}",
+      "sourceMaps": true,
+    }
+  ]
+}

examples/benchmark-mota.tsx

@@ -1,10 +1,13 @@
+import { ObserveConfig, observable, observer } from "../src";
 import React, { StrictMode } from 'react';
-import { observable, observer } from "../src";
 
 import ReactDOM from 'react-dom';
 import { list } from './data';
 import { useEffect } from 'react';
 
+ObserveConfig.maxDependencies = Number.MAX_SAFE_INTEGER;
+ObserveConfig.maxHandlers = Number.MAX_SAFE_INTEGER;
+
 let renderCount = 0;
 
 const markRender = () => {
@@ -29,7 +32,7 @@ const test = () => {
 const itemStyle = {
   padding: 4, margin: 2, background: '#eee', display: 'inline-block',
 }
- 
+
 const Item = observer(function Item() {
   const { count } = model;
   useEffect(() => markRender(), [count]);

examples/data.ts

@@ -1 +1 @@
-export const list = new Array(10000).fill({});
+export const list = new Array(5000).fill({});

examples/develop.tsx

@@ -1,5 +1,5 @@
-import React, { StrictMode, memo, useEffect, useMemo, useRef, useSyncExternalStore } from 'react';
-import { observable, observer, useWatch } from "../src";
+import React, { Fragment, memo, useEffect, useMemo, useRef, useSyncExternalStore } from 'react';
+import { computed, observable, observer, useObservable, useWatch } from "../src";
 
 import ReactDOM from 'react-dom';
 
@@ -9,10 +9,31 @@ const model = observable({
   name: 'test',
   num: 1,
   add() {
-    this.num += 1;
+    this.num += 1; 
   }
 })
 
+@observable
+class User {
+  firstName = "Feng";
+  lastName = "Hou";
+  age = 1;
+  @computed
+  get fullName() {
+    return `${this.firstName} ${this.lastName}: ${this.age}`;
+  }
+}
+
+const UserView = observer(function () {
+  const user = useObservable(() => new User());
+  return (
+    <div>
+      <strong>{user.fullName}</strong>
+      <div><button onClick={() => user.age++}>click</button></div>
+    </div>
+  )
+});
+
 export const Demo1 = observer(function Demo1() {
   useWatch(() => model.num > 100, () => {
     console.log("num:", model.num);
@@ -110,12 +131,13 @@ export const Demo3_1 = memo(observer(function Demo3_1() {
 
 const App = () => {
   return (
-    <StrictMode>
+    <Fragment>
+      <UserView />
       <Demo1 />
       <Demo2 />
       <Demo3 />
       <Demo4 />
-    </StrictMode>
+    </Fragment>
   )
 }
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mota",
-  "version": "8.0.2",
+  "version": "8.1.1",
   "description": "An extremely lightweight and responsive state management library",
   "module": "./dist/mota-es.js",
   "main": "./dist/mota-cjs.js",
@@ -21,7 +21,7 @@
   },
   "license": "MIT",
   "dependencies": {
-    "ober": "8.0.1",
+    "ober": "8.2.6",
     "tslib": "*"
   },
   "devDependencies": {

rollup.config.dev.js

@@ -1,4 +1,3 @@
-import { ObserveMode } from 'ober';
 import commonjs from 'rollup-plugin-commonjs';
 import injectProcessEnv from 'rollup-plugin-inject-process-env';
 import path from 'path';
@@ -37,7 +36,7 @@ const createConf = (page) => {
       sourcemaps(),
       injectProcessEnv({
         NODE_ENV: 'production',
-        OBER_CONFIG: { mode: ObserveMode.property },
+        OBER_CONFIG: { mode: 'property' },
       }),
     ]
   };

src/hooks.ts

@@ -4,26 +4,57 @@
  * @author Houfeng <houzhanfeng@gmail.com>
  */
 
-import { DependencyList, useLayoutEffect, useMemo } from "react";
-import { autorun, observable, watch } from "ober";
+import { DependencyList, useCallback, useLayoutEffect, useMemo } from "react";
+import { autorun, computable, observable, watch } from "ober";
 
+/**
+ * 在函数组件中即时创建一个可观察对象
+ * @param value 对象或创建对象的函数
+ * @param deps 指定的依赖发生变化时，将重新创建
+ * @returns 可观察对象
+ */
+export function useObservable<T extends object>(
+  value: T | (() => T),
+  deps: DependencyList = []
+): T {
+  return useMemo<T>(() => {
+    return observable(value instanceof Function ? value() : value);
+  }, deps);
+}
+
+/**
+ * 创建一个观察器，每当用到的数据发生变化时，将重新计算
+ * @param selector 计算函数，需返回一个值，将对新旧值进行浅对比，决定是否调用执行函数
+ * @param handler 执行函数，由 selector 的计算结果决定是否重新执行
+ * @param immed 是否立即执行一次 handler
+ */
 export function useWatch(
   selector: () => any,
-  handler: () => void,
+  handler: (newValue?: any, oldValue?: any) => void,
   immed = false
 ) {
   return useLayoutEffect(() => watch(selector, handler, immed), [immed]);
 }
 
+/**
+ * 启动一个自执行函数，当函数中用到的数据发生变化时它将自动重新执行
+ * @param handler 将执行的函数
+ */
 export function useAutoRun(handler: () => void) {
   return useLayoutEffect(() => autorun(handler), []);
 }
 
-export function useObservable<T extends object>(
-  value: T | (() => T),
-  deps: DependencyList = []
-): T {
-  return useMemo<T>(() => {
-    return observable(value instanceof Function ? value() : value);
-  }, deps);
+/**
+ * 创建一个具备缓存能力的计算结果，
+ * 计算函数用到的数据发生变化时将重新计算并驱动组件更新，否则将使用缓存
+ * @param fn 计算函数
+ * @returns 计算结果
+ */
+export function useComputed<T>(fn: () => T): T {
+  const compute = useCallback(computable(fn, { bind: false }), []);
+  useLayoutEffect(() => {
+    compute.subscribe!();
+    return () => compute.unsubscribe!();
+  });
+  return compute();
 }

src/index.ts

@@ -9,23 +9,24 @@ import { ObserveConfig, nextTick } from "ober";
 import { ReactDOMUtil } from "./util";
 import { name } from "./info";
 
-export { version } from "./info";
-export { observer } from "./observer";
-export { useWatch, useAutoRun, useObservable } from "./hooks";
-
 export {
   observable,
   action,
   bind,
-  ObserveInspector,
-  ObserveConfig,
-  ObserveMode,
+  computed,
   track,
   untrack,
   autorun,
   watch,
   nextTick,
+  ObserveInspector,
+  ObserveConfig,
+  type ObserveMode,
 } from "ober";
 
+export { version } from "./info";
+export { observer } from "./observer";
+export { useObservable, useWatch, useAutoRun, useComputed } from "./hooks";
+
 nextTick.batch = ReactDOMUtil.unstable_batchedUpdates;
 ObserveConfig.logPrefix = name.toLocaleUpperCase();

src/info.ts

@@ -5,4 +5,4 @@
  */
 
 export const name = "mota";
-export const version = "8.0.2";
+export const version = "8.1.1";

src/observer.ts

@@ -18,13 +18,13 @@ import { isSyncRequired } from "./input";
 function createReactiver(
   render: (...args: any[]) => ReactNode,
   requestUpdate: () => void,
-  lazySubscribe = false
+  bind = true
 ) {
-  const trigger = (info: ObserveData) =>
-    isSyncRequired(info.value)
+  const update = (info?: ObserveData) =>
+    isSyncRequired(info?.value)
       ? requestUpdate()
-      : nextTick(requestUpdate, false);
-  return reactivable(render, trigger, lazySubscribe);
+      : nextTick(requestUpdate, true);
+  return reactivable(render, { bind, update, batch: false });
 }
 
 function getDisplayName(
@@ -37,7 +37,7 @@ function getDisplayName(
 function wrapClassComponent<T extends ComponentClass>(Component: T): T {
   const Wrapper = class extends Component {
     static displayName = getDisplayName(Component, "Component");
-    private __reactiver__: ReactiveFunction;
+    private __reactiver__!: ReactiveFunction;
     render(): ReactNode {
       if (this.constructor !== Wrapper) return super.render();
       if (!this.__reactiver__) {
@@ -49,7 +49,7 @@ function wrapClassComponent<T extends ComponentClass>(Component: T): T {
       return this.__reactiver__();
     }
     componentWillUnmount(): void {
-      this.__reactiver__.unsubscribe();
+      this.__reactiver__!.unsubscribe!();
       super.componentWillUnmount?.();
     }
   };
@@ -60,10 +60,10 @@ function wrapFunctionComponent<T extends FunctionComponent>(FC: T): T {
   const Wrapper = (...args: any[]) => {
     const setState = useState({})[1];
     const reactiver = useMemo(() => {
-      return createReactiver(FC, () => setState({}), true);
+      return createReactiver(FC, () => setState({}), false);
     }, []);
     useLayoutEffect(() => {
-      reactiver.subscribe();
+      reactiver.subscribe!();
       return reactiver.unsubscribe;
     }, [reactiver]);
     return reactiver(...args);
@@ -72,6 +72,11 @@ function wrapFunctionComponent<T extends FunctionComponent>(FC: T): T {
   return Wrapper as T;
 }
 
+/**
+ * 将一个组件转换为可响应组件
+ * @param target 原类组件或函数组件
+ * @returns 具有响应能力的组件
+ */
 export function observer<T extends ComponentType>(target: T) {
   if (!target) return target;
   const Wrapper = isClassComponent(target)

test/helpers/dom.ts

@@ -0,0 +1,4 @@
+export const root = document.querySelector('.root');
+export const $ = <T extends HTMLElement>(selector: string): T => {
+  return root?.querySelector<T>(selector) as T;
+}