@feng3d/reactivity 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 feng
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,61 @@
+# @feng3d/reactivity
+
+feng3d的响应式库。
+
+源码：https://gitee.com/feng3d/reactivity
+
+文档：https://feng3d.com/reactivity
+
+## 网站
+
+https://feng3d.com/reactivity
+
+## 安装
+```
+npm install @feng3d/reactivity
+```
+
+## 示例
+
+### 监听对象属性的变化
+```
+import { computed, ref } from "@feng3d/reactivity";
+
+const result = { time: undefined, values: [] };
+
+const b = ref(2);
+
+function 递归(depth = 10)
+{
+    if (depth <= 0) return computed(() =>
+    {
+        return b.value
+    }).value;
+
+    return computed(() =>
+    {
+        return 递归(depth - 1) + 递归(depth - 2);
+    }).value;
+}
+
+const cb = computed(() =>
+{
+    return 递归(16);
+});
+
+const count = 10000;
+
+b.value++;
+cb.value;
+
+const start = performance.now();
+for (let i = 0; i < count; i++)
+{
+    ref(1).value++; // 添加此行代码将会导致 @vue/reactivity 版本的性能下降，而 @feng3d/reactivity 版本的性能保持不变
+
+    cb.value;
+}
+result.time = performance.now() - start;
+
+result.values.push(cb.value);
+```

package/dist/index.js

@@ -0,0 +1,99 @@
+function ref(value) {
+  return new ValueReactiveNode(value);
+}
+function computed(func) {
+  return new FunctionReactiveNode(func);
+}
+let activeReactiveNode;
+class ReactiveNode {
+  constructor() {
+    this.parents = /* @__PURE__ */ new Set();
+    this.dirty = true;
+  }
+  /**
+   * 当前节点值。
+   */
+  get value() {
+    this.run();
+    return this._value;
+  }
+  /**
+   * 执行当前节点。
+   */
+  run() {
+    const parentReactiveNode = activeReactiveNode;
+    activeReactiveNode = this;
+    let node = this.invalidChildren;
+    while (node) {
+      if (node.value !== node.node.value) {
+        this.markDirty();
+      }
+      node = node.next;
+    }
+    this.invalidChildren = void 0;
+    if (this.dirty) {
+      this._value = this._runSelf();
+      if (parentReactiveNode) {
+        this.parents.add(parentReactiveNode);
+      }
+      this.dirty = false;
+    }
+    activeReactiveNode = parentReactiveNode;
+  }
+  /**
+   * 标记为脏，触发更新。
+   */
+  markDirty() {
+    if (this.dirty) {
+      return;
+    }
+    this.dirty = true;
+    this.invalidate();
+    this.parents.clear();
+  }
+  invalidate() {
+    if (this.parents.size > 0) {
+      this.parents.forEach((parent) => {
+        const node = { node: this, value: this._value, next: parent.invalidChildren };
+        parent.invalidChildren = node;
+        parent.invalidate();
+      });
+    }
+  }
+  /**
+   * 执行当前节点自身。
+   */
+  _runSelf() {
+    return this._value;
+  }
+}
+class FunctionReactiveNode extends ReactiveNode {
+  constructor(func) {
+    super();
+    this.func = func;
+  }
+  _runSelf() {
+    return this.func();
+  }
+}
+class ValueReactiveNode extends ReactiveNode {
+  get value() {
+    this.run();
+    return this._value;
+  }
+  set value(v) {
+    if (this._value === v)
+      return;
+    this.markDirty();
+    this._value = v;
+  }
+  constructor(value) {
+    super();
+    this._value = value;
+  }
+}
+export {
+  computed,
+  ref
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["/**\r\n * 创建响应式值的引用。\r\n *\r\n * @param value\r\n * @returns\r\n */\r\nexport function ref<T>(value: T): { value: T }\r\n{\r\n    return new ValueReactiveNode<T>(value);\r\n}\r\n\r\n/**\r\n * 创建计算属性的函数\r\n * 计算属性的值会根据其依赖的响应式数据自动更新\r\n * @param func 计算属性的 getter 函数\r\n * @returns 包含 value 属性的对象，用于获取计算属性的值\r\n */\r\nexport function computed<T>(func: () => T): { value: T }\r\n{\r\n    return new FunctionReactiveNode(func);\r\n}\r\n\r\n/**\r\n * 当前正在执行的反应式节点。\r\n */\r\nlet activeReactiveNode: ReactiveNode;\r\n\r\ntype ReactiveNodeLink = { node: ReactiveNode, value: any, next: ReactiveNodeLink };\r\n\r\n/**\r\n * 反应式节点。\r\n */\r\nclass ReactiveNode<T = any>\r\n{\r\n    /**\r\n     * 父反应节点。\r\n     *\r\n     * 记录了哪些节点调用了当前节点。\r\n     */\r\n    parents = new Set<ReactiveNode>();\r\n\r\n    /**\r\n     * 是否脏，是否需要重新计算。\r\n     */\r\n    dirty = true;\r\n\r\n    /**\r\n     * 失效的子节点，需要在执行时检查子节点值是否发生变化。\r\n     */\r\n    invalidChildren: ReactiveNodeLink;\r\n\r\n    /**\r\n     * 当前节点值。\r\n     */\r\n    get value()\r\n    {\r\n        this.run();\r\n\r\n        return this._value;\r\n    }\r\n    protected _value: T;\r\n\r\n    constructor()\r\n    {\r\n    }\r\n\r\n    /**\r\n     * 执行当前节点。\r\n     */\r\n    run()\r\n    {\r\n        const parentReactiveNode = activeReactiveNode;\r\n        activeReactiveNode = this;\r\n\r\n        let node = this.invalidChildren;\r\n        while (node)\r\n        {\r\n            if (node.value !== node.node.value)\r\n            {\r\n                this.markDirty();\r\n            }\r\n\r\n            node = node.next;\r\n        }\r\n        this.invalidChildren = undefined as any;\r\n\r\n        //\r\n        // 保存当前节点作为父节点。\r\n        // 设置当前节点为父节点。\r\n        if (this.dirty)\r\n        {\r\n            this._value = this._runSelf();\r\n\r\n            // 连接父节点和子节点。\r\n            if (parentReactiveNode)\r\n            {\r\n                this.parents.add(parentReactiveNode);\r\n            }\r\n            //\r\n            this.dirty = false;\r\n        }\r\n\r\n        // 执行完毕后恢复父节点。\r\n        activeReactiveNode = parentReactiveNode;\r\n    }\r\n\r\n    /**\r\n     * 标记为脏，触发更新。\r\n     */\r\n    markDirty()\r\n    {\r\n        if (this.dirty)\r\n        {\r\n            return;\r\n        }\r\n        this.dirty = true;\r\n\r\n        this.invalidate();\r\n\r\n        //\r\n        this.parents.clear();\r\n    }\r\n\r\n    invalidate()\r\n    {\r\n        //\r\n        if (this.parents.size > 0)\r\n        {\r\n            this.parents.forEach((parent) =>\r\n            {\r\n                const node: ReactiveNodeLink = { node: this, value: this._value, next: parent.invalidChildren };\r\n                parent.invalidChildren = node;\r\n                parent.invalidate();\r\n            });\r\n        }\r\n    }\r\n\r\n    /**\r\n     * 执行当前节点自身。\r\n     */\r\n    protected _runSelf(): T\r\n    {\r\n        return this._value;\r\n    }\r\n}\r\n\r\n/**\r\n * 反应式函数节点。\r\n *\r\n * 当使用 computed 函数时，会创建一个 ReactiveFunctionNode 对象。\r\n *\r\n * 当获取value值时，会执行func函数，返回结果。\r\n */\r\nclass FunctionReactiveNode<T> extends ReactiveNode\r\n{\r\n    /**\r\n     * 监听的函数。\r\n     */\r\n    func: () => T;\r\n\r\n    constructor(func: () => T)\r\n    {\r\n        super();\r\n        this.func = func;\r\n    }\r\n\r\n    protected _runSelf()\r\n    {\r\n        return this.func();\r\n    }\r\n}\r\n\r\n/**\r\n * 属性值反应式节点。\r\n *\r\n * 当使用 reactive 函数创建一个反应式对象后，访问该对象的属性时，会创建一个 ReactiveGetValueNode 对象。\r\n *\r\n * 当设置反应式对象对应属性值时，会触发该节点。\r\n */\r\nclass ValueReactiveNode<V> extends ReactiveNode<V>\r\n{\r\n    get value()\r\n    {\r\n        this.run();\r\n\r\n        return this._value;\r\n    }\r\n    set value(v: V)\r\n    {\r\n        if (this._value === v) return;\r\n        this.markDirty();\r\n        this._value = v;\r\n    }\r\n\r\n    constructor(value: V)\r\n    {\r\n        super();\r\n        this._value = value;\r\n    }\r\n}\r\n\r\n"],"names":[],"mappings":"AAMO,SAAS,IAAO,OACvB;AACW,SAAA,IAAI,kBAAqB,KAAK;AACzC;AAQO,SAAS,SAAY,MAC5B;AACW,SAAA,IAAI,qBAAqB,IAAI;AACxC;AAKA,IAAI;AAOJ,MAAM,aACN;AAAA,EA6BI,cACA;AAxBA,SAAA,8BAAc;AAKN,SAAA,QAAA;AAAA,EAoBR;AAAA;AAAA;AAAA;AAAA,EAVA,IAAI,QACJ;AACI,SAAK,IAAI;AAET,WAAO,KAAK;AAAA,EAChB;AAAA;AAAA;AAAA;AAAA,EAUA,MACA;AACI,UAAM,qBAAqB;AACN,yBAAA;AAErB,QAAI,OAAO,KAAK;AAChB,WAAO,MACP;AACI,UAAI,KAAK,UAAU,KAAK,KAAK,OAC7B;AACI,aAAK,UAAU;AAAA,MACnB;AAEA,aAAO,KAAK;AAAA,IAChB;AACA,SAAK,kBAAkB;AAKvB,QAAI,KAAK,OACT;AACS,WAAA,SAAS,KAAK;AAGnB,UAAI,oBACJ;AACS,aAAA,QAAQ,IAAI,kBAAkB;AAAA,MACvC;AAEA,WAAK,QAAQ;AAAA,IACjB;AAGqB,yBAAA;AAAA,EACzB;AAAA;AAAA;AAAA;AAAA,EAKA,YACA;AACI,QAAI,KAAK,OACT;AACI;AAAA,IACJ;AACA,SAAK,QAAQ;AAEb,SAAK,WAAW;AAGhB,SAAK,QAAQ;EACjB;AAAA,EAEA,aACA;AAEQ,QAAA,KAAK,QAAQ,OAAO,GACxB;AACS,WAAA,QAAQ,QAAQ,CAAC,WACtB;AACU,cAAA,OAAyB,EAAE,MAAM,MAAM,OAAO,KAAK,QAAQ,MAAM,OAAO;AAC9E,eAAO,kBAAkB;AACzB,eAAO,WAAW;AAAA,MAAA,CACrB;AAAA,IACL;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA,EAKU,WACV;AACI,WAAO,KAAK;AAAA,EAChB;AACJ;AASA,MAAM,6BAAgC,aACtC;AAAA,EAMI,YAAY,MACZ;AACU;AACN,SAAK,OAAO;AAAA,EAChB;AAAA,EAEU,WACV;AACI,WAAO,KAAK;EAChB;AACJ;AASA,MAAM,0BAA6B,aACnC;AAAA,EACI,IAAI,QACJ;AACI,SAAK,IAAI;AAET,WAAO,KAAK;AAAA,EAChB;AAAA,EACA,IAAI,MAAM,GACV;AACI,QAAI,KAAK,WAAW;AAAG;AACvB,SAAK,UAAU;AACf,SAAK,SAAS;AAAA,EAClB;AAAA,EAEA,YAAY,OACZ;AACU;AACN,SAAK,SAAS;AAAA,EAClB;AACJ;"}

package/dist/index.umd.cjs

@@ -0,0 +1,103 @@
+(function(global, factory) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports) : typeof define === "function" && define.amd ? define(["exports"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.feng3d = {}));
+})(this, function(exports2) {
+  "use strict";
+  function ref(value) {
+    return new ValueReactiveNode(value);
+  }
+  function computed(func) {
+    return new FunctionReactiveNode(func);
+  }
+  let activeReactiveNode;
+  class ReactiveNode {
+    constructor() {
+      this.parents = /* @__PURE__ */ new Set();
+      this.dirty = true;
+    }
+    /**
+     * 当前节点值。
+     */
+    get value() {
+      this.run();
+      return this._value;
+    }
+    /**
+     * 执行当前节点。
+     */
+    run() {
+      const parentReactiveNode = activeReactiveNode;
+      activeReactiveNode = this;
+      let node = this.invalidChildren;
+      while (node) {
+        if (node.value !== node.node.value) {
+          this.markDirty();
+        }
+        node = node.next;
+      }
+      this.invalidChildren = void 0;
+      if (this.dirty) {
+        this._value = this._runSelf();
+        if (parentReactiveNode) {
+          this.parents.add(parentReactiveNode);
+        }
+        this.dirty = false;
+      }
+      activeReactiveNode = parentReactiveNode;
+    }
+    /**
+     * 标记为脏，触发更新。
+     */
+    markDirty() {
+      if (this.dirty) {
+        return;
+      }
+      this.dirty = true;
+      this.invalidate();
+      this.parents.clear();
+    }
+    invalidate() {
+      if (this.parents.size > 0) {
+        this.parents.forEach((parent) => {
+          const node = { node: this, value: this._value, next: parent.invalidChildren };
+          parent.invalidChildren = node;
+          parent.invalidate();
+        });
+      }
+    }
+    /**
+     * 执行当前节点自身。
+     */
+    _runSelf() {
+      return this._value;
+    }
+  }
+  class FunctionReactiveNode extends ReactiveNode {
+    constructor(func) {
+      super();
+      this.func = func;
+    }
+    _runSelf() {
+      return this.func();
+    }
+  }
+  class ValueReactiveNode extends ReactiveNode {
+    get value() {
+      this.run();
+      return this._value;
+    }
+    set value(v) {
+      if (this._value === v)
+        return;
+      this.markDirty();
+      this._value = v;
+    }
+    constructor(value) {
+      super();
+      this._value = value;
+    }
+  }
+  exports2.computed = computed;
+  exports2.ref = ref;
+  Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
+});
+//# sourceMappingURL=index.umd.cjs.map

package/dist/index.umd.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.umd.cjs","sources":["../src/index.ts"],"sourcesContent":["/**\r\n * 创建响应式值的引用。\r\n *\r\n * @param value\r\n * @returns\r\n */\r\nexport function ref<T>(value: T): { value: T }\r\n{\r\n    return new ValueReactiveNode<T>(value);\r\n}\r\n\r\n/**\r\n * 创建计算属性的函数\r\n * 计算属性的值会根据其依赖的响应式数据自动更新\r\n * @param func 计算属性的 getter 函数\r\n * @returns 包含 value 属性的对象，用于获取计算属性的值\r\n */\r\nexport function computed<T>(func: () => T): { value: T }\r\n{\r\n    return new FunctionReactiveNode(func);\r\n}\r\n\r\n/**\r\n * 当前正在执行的反应式节点。\r\n */\r\nlet activeReactiveNode: ReactiveNode;\r\n\r\ntype ReactiveNodeLink = { node: ReactiveNode, value: any, next: ReactiveNodeLink };\r\n\r\n/**\r\n * 反应式节点。\r\n */\r\nclass ReactiveNode<T = any>\r\n{\r\n    /**\r\n     * 父反应节点。\r\n     *\r\n     * 记录了哪些节点调用了当前节点。\r\n     */\r\n    parents = new Set<ReactiveNode>();\r\n\r\n    /**\r\n     * 是否脏，是否需要重新计算。\r\n     */\r\n    dirty = true;\r\n\r\n    /**\r\n     * 失效的子节点，需要在执行时检查子节点值是否发生变化。\r\n     */\r\n    invalidChildren: ReactiveNodeLink;\r\n\r\n    /**\r\n     * 当前节点值。\r\n     */\r\n    get value()\r\n    {\r\n        this.run();\r\n\r\n        return this._value;\r\n    }\r\n    protected _value: T;\r\n\r\n    constructor()\r\n    {\r\n    }\r\n\r\n    /**\r\n     * 执行当前节点。\r\n     */\r\n    run()\r\n    {\r\n        const parentReactiveNode = activeReactiveNode;\r\n        activeReactiveNode = this;\r\n\r\n        let node = this.invalidChildren;\r\n        while (node)\r\n        {\r\n            if (node.value !== node.node.value)\r\n            {\r\n                this.markDirty();\r\n            }\r\n\r\n            node = node.next;\r\n        }\r\n        this.invalidChildren = undefined as any;\r\n\r\n        //\r\n        // 保存当前节点作为父节点。\r\n        // 设置当前节点为父节点。\r\n        if (this.dirty)\r\n        {\r\n            this._value = this._runSelf();\r\n\r\n            // 连接父节点和子节点。\r\n            if (parentReactiveNode)\r\n            {\r\n                this.parents.add(parentReactiveNode);\r\n            }\r\n            //\r\n            this.dirty = false;\r\n        }\r\n\r\n        // 执行完毕后恢复父节点。\r\n        activeReactiveNode = parentReactiveNode;\r\n    }\r\n\r\n    /**\r\n     * 标记为脏，触发更新。\r\n     */\r\n    markDirty()\r\n    {\r\n        if (this.dirty)\r\n        {\r\n            return;\r\n        }\r\n        this.dirty = true;\r\n\r\n        this.invalidate();\r\n\r\n        //\r\n        this.parents.clear();\r\n    }\r\n\r\n    invalidate()\r\n    {\r\n        //\r\n        if (this.parents.size > 0)\r\n        {\r\n            this.parents.forEach((parent) =>\r\n            {\r\n                const node: ReactiveNodeLink = { node: this, value: this._value, next: parent.invalidChildren };\r\n                parent.invalidChildren = node;\r\n                parent.invalidate();\r\n            });\r\n        }\r\n    }\r\n\r\n    /**\r\n     * 执行当前节点自身。\r\n     */\r\n    protected _runSelf(): T\r\n    {\r\n        return this._value;\r\n    }\r\n}\r\n\r\n/**\r\n * 反应式函数节点。\r\n *\r\n * 当使用 computed 函数时，会创建一个 ReactiveFunctionNode 对象。\r\n *\r\n * 当获取value值时，会执行func函数，返回结果。\r\n */\r\nclass FunctionReactiveNode<T> extends ReactiveNode\r\n{\r\n    /**\r\n     * 监听的函数。\r\n     */\r\n    func: () => T;\r\n\r\n    constructor(func: () => T)\r\n    {\r\n        super();\r\n        this.func = func;\r\n    }\r\n\r\n    protected _runSelf()\r\n    {\r\n        return this.func();\r\n    }\r\n}\r\n\r\n/**\r\n * 属性值反应式节点。\r\n *\r\n * 当使用 reactive 函数创建一个反应式对象后，访问该对象的属性时，会创建一个 ReactiveGetValueNode 对象。\r\n *\r\n * 当设置反应式对象对应属性值时，会触发该节点。\r\n */\r\nclass ValueReactiveNode<V> extends ReactiveNode<V>\r\n{\r\n    get value()\r\n    {\r\n        this.run();\r\n\r\n        return this._value;\r\n    }\r\n    set value(v: V)\r\n    {\r\n        if (this._value === v) return;\r\n        this.markDirty();\r\n        this._value = v;\r\n    }\r\n\r\n    constructor(value: V)\r\n    {\r\n        super();\r\n        this._value = value;\r\n    }\r\n}\r\n\r\n"],"names":[],"mappings":";;;;AAMO,WAAS,IAAO,OACvB;AACW,WAAA,IAAI,kBAAqB,KAAK;AAAA,EACzC;AAQO,WAAS,SAAY,MAC5B;AACW,WAAA,IAAI,qBAAqB,IAAI;AAAA,EACxC;AAKA,MAAI;AAAA,EAOJ,MAAM,aACN;AAAA,IA6BI,cACA;AAxBA,WAAA,8BAAc;AAKN,WAAA,QAAA;AAAA,IAoBR;AAAA;AAAA;AAAA;AAAA,IAVA,IAAI,QACJ;AACI,WAAK,IAAI;AAET,aAAO,KAAK;AAAA,IAChB;AAAA;AAAA;AAAA;AAAA,IAUA,MACA;AACI,YAAM,qBAAqB;AACN,2BAAA;AAErB,UAAI,OAAO,KAAK;AAChB,aAAO,MACP;AACI,YAAI,KAAK,UAAU,KAAK,KAAK,OAC7B;AACI,eAAK,UAAU;AAAA,QACnB;AAEA,eAAO,KAAK;AAAA,MAChB;AACA,WAAK,kBAAkB;AAKvB,UAAI,KAAK,OACT;AACS,aAAA,SAAS,KAAK;AAGnB,YAAI,oBACJ;AACS,eAAA,QAAQ,IAAI,kBAAkB;AAAA,QACvC;AAEA,aAAK,QAAQ;AAAA,MACjB;AAGqB,2BAAA;AAAA,IACzB;AAAA;AAAA;AAAA;AAAA,IAKA,YACA;AACI,UAAI,KAAK,OACT;AACI;AAAA,MACJ;AACA,WAAK,QAAQ;AAEb,WAAK,WAAW;AAGhB,WAAK,QAAQ;IACjB;AAAA,IAEA,aACA;AAEQ,UAAA,KAAK,QAAQ,OAAO,GACxB;AACS,aAAA,QAAQ,QAAQ,CAAC,WACtB;AACU,gBAAA,OAAyB,EAAE,MAAM,MAAM,OAAO,KAAK,QAAQ,MAAM,OAAO;AAC9E,iBAAO,kBAAkB;AACzB,iBAAO,WAAW;AAAA,QAAA,CACrB;AAAA,MACL;AAAA,IACJ;AAAA;AAAA;AAAA;AAAA,IAKU,WACV;AACI,aAAO,KAAK;AAAA,IAChB;AAAA,EACJ;AAAA,EASA,MAAM,6BAAgC,aACtC;AAAA,IAMI,YAAY,MACZ;AACU;AACN,WAAK,OAAO;AAAA,IAChB;AAAA,IAEU,WACV;AACI,aAAO,KAAK;IAChB;AAAA,EACJ;AAAA,EASA,MAAM,0BAA6B,aACnC;AAAA,IACI,IAAI,QACJ;AACI,WAAK,IAAI;AAET,aAAO,KAAK;AAAA,IAChB;AAAA,IACA,IAAI,MAAM,GACV;AACI,UAAI,KAAK,WAAW;AAAG;AACvB,WAAK,UAAU;AACf,WAAK,SAAS;AAAA,IAClB;AAAA,IAEA,YAAY,OACZ;AACU;AACN,WAAK,SAAS;AAAA,IAClB;AAAA,EACJ;;;;;"}

package/lib/index.d.ts

@@ -0,0 +1,19 @@
+/**
+ * 创建响应式值的引用。
+ *
+ * @param value
+ * @returns
+ */
+export declare function ref<T>(value: T): {
+    value: T;
+};
+/**
+ * 创建计算属性的函数
+ * 计算属性的值会根据其依赖的响应式数据自动更新
+ * @param func 计算属性的 getter 函数
+ * @returns 包含 value 属性的对象，用于获取计算属性的值
+ */
+export declare function computed<T>(func: () => T): {
+    value: T;
+};
+//# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,wBAAgB,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,GAAG;IAAE,KAAK,EAAE,CAAC,CAAA;CAAE,CAG7C;AAED;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,CAAC,GAAG;IAAE,KAAK,EAAE,CAAC,CAAA;CAAE,CAGvD"}

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@feng3d/reactivity",
+  "type": "module",
+  "version": "0.0.1",
+  "description": "反应式",
+  "homepage": "https://feng3d.com/reactivity",
+  "main": "./dist/index.umd.cjs",
+  "types": "./lib/index.d.ts",
+  "module": "./dist/index.js",
+  "author": "feng",
+  "license": "MIT",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.umd.cjs",
+      "types": "./lib/index.d.ts"
+    }
+  },
+  "scripts": {
+    "clean": "rimraf \"{lib,dist,public}\"",
+    "build": "vite build",
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "types": "tsc",
+    "watch": "tsc -w",
+    "lint": "eslint --ext .js --ext .ts src test --ignore-path .gitignore --max-warnings 0",
+    "lintfix": "npm run lint -- --fix",
+    "docs": "typedoc",
+    "upload_oss": "npm run docs && feng3d-cli oss_upload_dir",
+    "release": "npm run clean && npm run lint && npm run build && npm run docs && npm run types && npm publish",
+    "prepublishOnly": "node scripts/prepublish.js",
+    "postpublish": "node scripts/postpublish.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://gitee.com/feng3d/reactivity.git"
+  },
+  "workspaces": [
+    ".",
+    "./examples"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist/",
+    "lib",
+    "src",
+    "readme",
+    "tsconfig.json"
+  ],
+  "devDependencies": {
+    "@feng3d/cli": "^0.0.19",
+    "@typescript-eslint/eslint-plugin": "5.17.0",
+    "@typescript-eslint/parser": "5.17.0",
+    "@vitest/ui": "^0.32.2",
+    "cross-env": "7.0.3",
+    "eslint": "8.12.0",
+    "rimraf": "3.0.2",
+    "tslib": "^2.4.0",
+    "typedoc": "^0.24.8",
+    "typescript": "5.1.3",
+    "vite": "^4.3.9",
+    "vitest": "^0.32.2"
+  }
+}

package/src/index.ts

@@ -0,0 +1,201 @@
+/**
+ * 创建响应式值的引用。
+ *
+ * @param value
+ * @returns
+ */
+export function ref<T>(value: T): { value: T }
+{
+    return new ValueReactiveNode<T>(value);
+}
+
+/**
+ * 创建计算属性的函数
+ * 计算属性的值会根据其依赖的响应式数据自动更新
+ * @param func 计算属性的 getter 函数
+ * @returns 包含 value 属性的对象，用于获取计算属性的值
+ */
+export function computed<T>(func: () => T): { value: T }
+{
+    return new FunctionReactiveNode(func);
+}
+
+/**
+ * 当前正在执行的反应式节点。
+ */
+let activeReactiveNode: ReactiveNode;
+
+type ReactiveNodeLink = { node: ReactiveNode, value: any, next: ReactiveNodeLink };
+
+/**
+ * 反应式节点。
+ */
+class ReactiveNode<T = any>
+{
+    /**
+     * 父反应节点。
+     *
+     * 记录了哪些节点调用了当前节点。
+     */
+    parents = new Set<ReactiveNode>();
+
+    /**
+     * 是否脏，是否需要重新计算。
+     */
+    dirty = true;
+
+    /**
+     * 失效的子节点，需要在执行时检查子节点值是否发生变化。
+     */
+    invalidChildren: ReactiveNodeLink;
+
+    /**
+     * 当前节点值。
+     */
+    get value()
+    {
+        this.run();
+
+        return this._value;
+    }
+    protected _value: T;
+
+    constructor()
+    {
+    }
+
+    /**
+     * 执行当前节点。
+     */
+    run()
+    {
+        const parentReactiveNode = activeReactiveNode;
+        activeReactiveNode = this;
+
+        let node = this.invalidChildren;
+        while (node)
+        {
+            if (node.value !== node.node.value)
+            {
+                this.markDirty();
+            }
+
+            node = node.next;
+        }
+        this.invalidChildren = undefined as any;
+
+        //
+        // 保存当前节点作为父节点。
+        // 设置当前节点为父节点。
+        if (this.dirty)
+        {
+            this._value = this._runSelf();
+
+            // 连接父节点和子节点。
+            if (parentReactiveNode)
+            {
+                this.parents.add(parentReactiveNode);
+            }
+            //
+            this.dirty = false;
+        }
+
+        // 执行完毕后恢复父节点。
+        activeReactiveNode = parentReactiveNode;
+    }
+
+    /**
+     * 标记为脏，触发更新。
+     */
+    markDirty()
+    {
+        if (this.dirty)
+        {
+            return;
+        }
+        this.dirty = true;
+
+        this.invalidate();
+
+        //
+        this.parents.clear();
+    }
+
+    invalidate()
+    {
+        //
+        if (this.parents.size > 0)
+        {
+            this.parents.forEach((parent) =>
+            {
+                const node: ReactiveNodeLink = { node: this, value: this._value, next: parent.invalidChildren };
+                parent.invalidChildren = node;
+                parent.invalidate();
+            });
+        }
+    }
+
+    /**
+     * 执行当前节点自身。
+     */
+    protected _runSelf(): T
+    {
+        return this._value;
+    }
+}
+
+/**
+ * 反应式函数节点。
+ *
+ * 当使用 computed 函数时，会创建一个 ReactiveFunctionNode 对象。
+ *
+ * 当获取value值时，会执行func函数，返回结果。
+ */
+class FunctionReactiveNode<T> extends ReactiveNode
+{
+    /**
+     * 监听的函数。
+     */
+    func: () => T;
+
+    constructor(func: () => T)
+    {
+        super();
+        this.func = func;
+    }
+
+    protected _runSelf()
+    {
+        return this.func();
+    }
+}
+
+/**
+ * 属性值反应式节点。
+ *
+ * 当使用 reactive 函数创建一个反应式对象后，访问该对象的属性时，会创建一个 ReactiveGetValueNode 对象。
+ *
+ * 当设置反应式对象对应属性值时，会触发该节点。
+ */
+class ValueReactiveNode<V> extends ReactiveNode<V>
+{
+    get value()
+    {
+        this.run();
+
+        return this._value;
+    }
+    set value(v: V)
+    {
+        if (this._value === v) return;
+        this.markDirty();
+        this._value = v;
+    }
+
+    constructor(value: V)
+    {
+        super();
+        this._value = value;
+    }
+}
+

package/tsconfig.json

@@ -0,0 +1,20 @@
+{
+    "compilerOptions": {
+        "target": "ES5",
+        "module": "CommonJS",
+        "noImplicitAny": false,
+        "sourceMap": true,
+        "declarationMap": true,
+        "declaration": true,
+        "experimentalDecorators": true,
+        "emitDeclarationOnly": true,
+        "lib": [
+            "ES2015",
+            "DOM",
+        ],
+        "outDir": "lib"
+    },
+    "include": [
+        "src/**/*.ts"
+    ]
+}