@luys/cc-store 1.0.0

package/.cc-store.md

@@ -0,0 +1,50 @@
+# 状态管理模块
+
+## 前置条件
+[游戏引擎](https://www.cocos.com/en/creator-download)
+[开发框架](https://github.com/a1076559139/cocos-creator-frame-3d)
+
+## 使用案例
+```TS
+import {createStore, bindStore, stopBind, watchStore, stopWatch} from 'db://pkg/@gamex/cc-store';
+
+// store.game
+export default class Game implements IStore<Game> {
+    // 将当前实例转成Store
+    constructor() { 
+       return createStore(this);// return不可忽略
+    }
+    // 状态
+    count = 0;
+    // 更新状态
+    setCount(count: number) {
+        this.count = count;
+    }
+}
+
+// PageHome.ts
+onCountChange(){
+    this.label2.string = `count: ${app.store.game.count}`;
+}
+onLoad() {
+    // 监听状态变化
+    watchStore(this.onCountChange, this);
+    // 状态与组件属性绑定
+    bindStore(this.label, 'string', () => {
+        return app.store.game.count.toString();
+    });
+    // 状态与节点属性绑定
+    bindStore(this.label.node, 'active', () => {
+        return app.store.game.count % 2 == 0;
+    });
+    app.store.game.setCount(10);
+}
+onDestroy() {
+    // 在节点或组件被销毁后会自动解绑，一般不需要手动解绑
+    // 但如果是通过node.removeFromParent方法移除node，这个时候是不会自动解绑的，如果需要请手动解绑
+    stopBind(this.label, 'string');
+    stopBind(this.label.node, 'active');
+    // watchStore必须要手动停止
+    stopWatch(this.onCountChange, this);
+}
+```

package/assets/Store.ts

@@ -0,0 +1,537 @@
+/* eslint-disable @typescript-eslint/no-this-alias */
+
+const lazilyWatchers = new Set<Watcher>();
+export function reactive() {
+    lazilyWatchers.forEach(watcher => watcher.run());
+    lazilyWatchers.clear();
+}
+
+// 原始对象 => 每个key对应的Watcher实例集合
+const depsMap = new WeakMap<object, Map<PropertyKey, Set<Watcher>>>();
+
+// 原始对象 => 父级引用
+const parentMap = new WeakMap<object, { obj: object; prop: PropertyKey }>();
+
+// 原始对象 => 代理对象
+const proxyMap = new WeakMap<object, object>();
+
+// 当前正在执行的 watcher 实例
+let activeWatcher: Watcher | null = null;
+
+/**
+ * 收集依赖(只要是访问某个对象的某个属性，都要调用track函数，以收集依赖到当前的watcher中)
+ * - 将当前watcher实例添加到对象属性对应的依赖集合中，同时将集合添加到当前watcher的依赖集合中(这一步主要用于在watcher中可以取消依赖追踪，即watcher.cancel())
+ */
+function track(obj: object, prop: PropertyKey) {
+    if (!activeWatcher) return;
+
+    let objDeps = depsMap.get(obj);
+    if (!objDeps) {
+        objDeps = new Map();
+        depsMap.set(obj, objDeps);
+    }
+
+    // 每个key对应的Watcher实例集合
+    let propDeps = objDeps.get(prop);
+    if (!propDeps) {
+        propDeps = new Set();
+        objDeps.set(prop, propDeps);
+    }
+
+    if (!propDeps.has(activeWatcher)) {
+        propDeps.add(activeWatcher);
+        activeWatcher.deps.add(propDeps);
+    }
+}
+
+/**
+ * 触发依赖追踪
+ * @param obj 
+ * @param prop 
+ */
+function trigger(obj: object, prop: PropertyKey) {
+    const objDeps = depsMap.get(obj);
+    if (!objDeps) return;
+
+    const propDeps = objDeps.get(prop);
+    if (!propDeps) return;
+
+    // 延迟执行
+    propDeps.forEach(watcher => {
+        lazilyWatchers.add(watcher);
+    });
+    // 立即执行(创建副本避免循环)
+    // new Set(propDeps).forEach(watcher => watcher.run());
+}
+
+/**
+ * 触发依赖追踪的后续操作(向上触发父级依赖追踪)
+ * @param obj 
+ */
+function triggerOver(obj: object) {
+    const parent = parentMap.get(obj);
+    if (!parent) return;
+
+    const grandpa = parentMap.get(parent.obj);
+    if (!grandpa) return;
+
+    const objDeps = depsMap.get(grandpa.obj);
+    if (!objDeps) return;
+    const propDeps = objDeps.get(grandpa.prop);
+    if (!propDeps) return;
+
+    // 延迟执行
+    propDeps.forEach(watcher => {
+        lazilyWatchers.add(watcher);
+    });
+    // 立即执行(创建副本避免循环)
+    // new Set(propDeps).forEach(watcher => watcher.run());
+
+    triggerOver(parent.obj);
+}
+
+class Watcher {
+    deps: Set<Set<Watcher>>;
+
+    constructor(public callback: () => void, public target?: unknown) {
+        this.deps = new Set();
+    }
+
+    run() {
+        // 清理旧依赖
+        this.deps.forEach(dep => dep.delete(this));
+        this.deps.clear();
+
+        // 收集新依赖
+        const prevWatcher = activeWatcher;
+        activeWatcher = this;
+        this.callback.call(this.target);
+        activeWatcher = prevWatcher;
+    }
+
+    cancel() {
+        this.deps.forEach(dep => dep.delete(this));
+        this.deps.clear();
+
+        if (lazilyWatchers.has(this)) {
+            lazilyWatchers.delete(this);
+        }
+    }
+}
+
+export function watch(callback: () => void, target?: unknown): () => void {
+    const watcher = new Watcher(callback, target);
+    watcher.run();
+    return () => watcher.cancel();
+}
+
+// 数组方法
+function handleArray(obj: Array<any>, prop: PropertyKey, receiver: any) {
+    // 修改类操作
+    if (prop === 'splice') {
+        return function (...args: any[]) {
+            const start = args[0] as number;
+            const deleteCount = args.length > 1 ? args[1] : obj.length - start;
+            const addCount = args.length > 2 ? (args.length - 2) : 0;
+
+            const result = Array.prototype.splice.apply(obj, args);
+
+            let triggerCalled = false;
+            if (deleteCount === addCount) {
+                for (let i = start; i < start + deleteCount; ++i) {
+                    triggerCalled = true;
+                    trigger(obj, i);
+                }
+            } else {
+                for (let i = start; i < obj.length; ++i) {
+                    trigger(obj, i);
+                }
+                trigger(obj, 'length');
+                triggerCalled = true;
+            }
+            if (triggerCalled) {
+                trigger(obj, Symbol.iterator);
+                triggerOver(obj);
+            }
+
+            return result;
+        };
+    }
+    if (prop === 'fill') {
+        return function (...args: any[]) {
+            const oldArr = obj.slice();
+            const result = Array.prototype.fill.apply(obj, args);
+
+            const length = Math.max(oldArr.length, obj.length);
+
+            let triggerCalled = false;
+            for (let i = 0; i < length; ++i) {
+                if (oldArr[i] === obj[i]) continue;
+                triggerCalled = true;
+                trigger(obj, i);
+            }
+            if (oldArr.length !== obj.length) {
+                trigger(obj, 'length');
+                triggerCalled = true;
+            }
+            if (triggerCalled) {
+                trigger(obj, Symbol.iterator);
+                triggerOver(obj);
+            }
+            return result;
+        };
+    }
+    if (prop === 'push') {
+        return function (...args: any[]) {
+            const oldLen = obj.length;
+            const result = Array.prototype.push.apply(obj, args);
+            if (oldLen === obj.length) return result;
+
+            for (let i = oldLen; i < obj.length; ++i) {
+                trigger(obj, i);
+            }
+            trigger(obj, 'length');
+            trigger(obj, Symbol.iterator);
+            triggerOver(obj);
+            return result;
+        };
+    }
+    if (prop === 'pop') {
+        return function () {
+            const oldLen = obj.length;
+            const result = Array.prototype.pop.call(obj);
+            if (oldLen === obj.length) return result;
+
+            trigger(obj, obj.length);
+            trigger(obj, 'length');
+            trigger(obj, Symbol.iterator);
+            triggerOver(obj);
+            return result;
+        };
+    }
+    if (prop === 'shift' || prop === 'unshift') {
+        return function (...args: any[]) {
+            const oldLen = obj.length;
+            const result = Array.prototype[prop].apply(obj, args);
+            if (oldLen === obj.length) return result;
+
+            const length = Math.max(oldLen, obj.length);
+
+            for (let i = 0; i < length; ++i) {
+                trigger(obj, i);
+            }
+            trigger(obj, 'length');
+            trigger(obj, Symbol.iterator);
+            triggerOver(obj);
+            return result;
+        };
+    }
+    if (prop === 'sort' || prop === 'reverse') {
+        return function (...args: any[]) {
+            const result = Array.prototype[prop].apply(obj, args);
+            if (obj.length <= 1) return result;
+
+            for (let i = 0; i < obj.length; ++i) {
+                trigger(obj, i);
+            }
+            trigger(obj, Symbol.iterator);
+            triggerOver(obj);
+
+            return result;
+        };
+    }
+    // 获取类操作
+    if (prop === 'forEach') {
+        return function (callback: any) {
+            track(obj, 'size');
+            obj.forEach((val, key) => {
+                track(obj, key);
+                callback(create(val), key, obj);
+            });
+        };
+    }
+
+    const value = Reflect.get(obj, prop, receiver);
+    return create(value);
+}
+
+function handleMap(obj: Map<any, any>, prop: PropertyKey, receiver: any) {
+    // 修改类操作
+    if (prop === 'set') {
+        return function (key: any, val: any) {
+            const oldVal = Map.prototype.get.call(obj, key);
+            if (oldVal === val) return this;
+
+            const hasProp = Map.prototype.has.call(obj, key);
+            Map.prototype.set.call(obj, key, val);
+
+            // 触发更新
+            trigger(obj, key);
+            if (!hasProp) {
+                trigger(obj, 'size');
+            }
+            trigger(obj, Symbol.iterator);
+            triggerOver(obj);
+
+            return this;
+        };
+    }
+    if (prop === 'delete') {
+        return function (key: any) {
+            const hasProp = Map.prototype.has.call(obj, key);
+            if (!hasProp) return true;
+
+            if (Map.prototype.delete.call(obj, key)) {
+                // 触发更新
+                trigger(obj, key);
+                trigger(obj, 'size');
+                trigger(obj, Symbol.iterator);
+                triggerOver(obj);
+                return true;
+            }
+
+            return false;
+        };
+    }
+    if (prop === 'clear') {
+        return function () {
+            if (obj.size === 0) return;
+
+            obj.forEach((val: any, key: any) => {
+                if (!Map.prototype.delete.call(obj, key)) return;
+                // 触发更新
+                trigger(obj, key);
+            });
+            trigger(obj, 'size');
+            trigger(obj, Symbol.iterator);
+            triggerOver(obj);
+        };
+    }
+    // 获取类操作
+    if (prop === 'has') {
+        return function (key: any) {
+            track(obj, key);
+            return Map.prototype.has.call(obj, key);
+        };
+    }
+    if (prop === 'get') {
+        return function (key: any) {
+            track(obj, key);
+            const val = Map.prototype.get.call(obj, key);
+            return create(val);
+        };
+    }
+    if (prop === 'forEach') {
+        return function (callback: any) {
+            track(obj, 'size');
+            obj.forEach((val, key) => {
+                track(obj, key);
+                callback(create(val), key, obj);
+            });
+        };
+    }
+    if (prop === 'keys') {
+        return function () {
+            track(obj, 'size');
+            return Map.prototype.keys.call(obj);
+        };
+    }
+    if (prop === 'values' || prop === 'entries') {
+        return function () {
+            track(obj, 'size');
+            return () => { // 返回迭代器工厂函数
+                return new Proxy(Map.prototype[prop].call(obj), {
+                    get: (iterator, method) => {
+                        if (method === 'next') {
+                            return () => {
+                                const value = iterator.next();
+                                return create(value);
+                            };
+                        }
+                        return Reflect.get(iterator, method, receiver);
+                    }
+                });
+            };
+        };
+    }
+
+    const value = Reflect.get(obj, prop);
+    return create(value);
+}
+
+function handleSet(obj: Set<any>, prop: PropertyKey, receiver: any) {
+    // 修改类操作
+    if (prop === 'add' || prop === 'delete' || prop === 'clear') {
+        return function (val: any) {
+            const oldSize = obj.size;
+            const result = Set.prototype[prop].call(obj, val);
+
+            // 触发更新
+            if (oldSize !== obj.size) {
+                trigger(obj, 'size');
+                trigger(obj, Symbol.iterator);
+                triggerOver(obj);
+            }
+
+            // add方法返回的是Set对象，但是这里要转换为返回Proxy对象，以便后续可以继续拦截操作
+            if (result === obj) {
+                return this;
+            }
+            return result;
+        };
+    }
+    // 获取类操作
+    if (prop === 'has') {
+        return function (val: any) {
+            track(obj, 'size');
+            return Set.prototype.has.call(obj, val);
+        };
+    }
+    if (prop === 'forEach') {
+        return function (callback: any) {
+            track(obj, 'size');
+            obj.forEach((val, value2) => {
+                callback(create(val), value2, obj);
+            });
+        };
+    }
+    if (prop === 'keys') {
+        return function () {
+            track(obj, 'size');
+            return Set.prototype.keys.call(obj);
+        };
+    }
+    if (prop === 'values' || prop === 'entries') {
+        return () => { // 返回迭代器工厂函数
+            track(obj, 'size');
+            return new Proxy(Set.prototype[prop].call(obj), {
+                get: (iterator, method) => {
+                    if (method === 'next') {
+                        return () => {
+                            const value = iterator.next();
+                            return create(value);
+                        };
+                    }
+                    return Reflect.get(iterator, method, receiver);
+                }
+            });
+        };
+    }
+
+    const value = Reflect.get(obj, prop);
+    return create(value);
+}
+
+export function create<T extends object>(target: T): T {
+    if (target instanceof WeakMap) {
+        console.error('Store: 不支持WeakMap类型数据');
+        return target;
+    }
+
+    if (target === null || target === undefined || typeof target !== 'object'
+        || target instanceof Date || target instanceof RegExp) {
+        return target;
+    }
+
+    if (proxyMap.has(target)) {
+        return proxyMap.get(target) as T;
+    }
+
+    const proxy = new Proxy(target, {
+        get(obj, prop, receiver) {
+            // 依赖收集
+            track(obj, prop);
+
+            // Symbol.iterator(迭代器，用于for...of循环)
+            if (prop === Symbol.iterator) {
+                return () => { // 返回迭代器工厂函数
+                    return new Proxy(obj[Symbol.iterator](), {
+                        get: (iterator, method) => {
+                            if (method === 'next') {
+                                return () => {
+                                    const value = iterator.next();
+                                    return create(value);
+                                };
+                            }
+                            return Reflect.get(iterator, method, receiver);
+                        }
+                    });
+                };
+            }
+
+            // 访问数组属性
+            if (Array.isArray(obj)) {
+                return handleArray(obj, prop, receiver);
+            }
+
+            // 访问Map属性
+            if (obj instanceof Map) {
+                return handleMap(obj, prop, receiver);
+            }
+
+            // 访问Set属性
+            if (obj instanceof Set) {
+                return handleSet(obj, prop, receiver);
+            }
+
+            // 获取值
+            const value = Reflect.get(obj, prop, receiver);
+
+            // 如果值是函数，直接返回
+            if (typeof value === 'function') {
+                return value;
+            }
+
+            // 如果是WeakMap，直接返回
+            if (value instanceof WeakMap) {
+                console.warn('Store: 不支持追踪WeakMap内的数据');
+                return value;
+            }
+
+            // 一些基本类型，直接返回
+            if (value === null || value === undefined || typeof value !== 'object'
+                || value instanceof Date || value instanceof RegExp) {
+                return value;
+            }
+
+            // 记录对象属性的父级引用
+            parentMap.set(value, { obj, prop });
+
+            // 递归响应式转换
+            return create(value);
+        },
+
+        set(obj, prop, value, receiver) {
+            const oldVal = Reflect.get(obj, prop, receiver);
+            if (oldVal === value) return true;
+
+            const result = Reflect.set(obj, prop, value, receiver);
+
+            if (result) {
+                // 触发更新
+                trigger(obj, prop);
+                trigger(obj, Symbol.iterator);
+                triggerOver(obj);
+            }
+
+            return result;
+        },
+
+        deleteProperty(obj, prop) {
+            const hasProp = Reflect.has(obj, prop);
+            const result = Reflect.deleteProperty(obj, prop);
+
+            // 触发更新
+            if (result && hasProp) {
+                trigger(obj, prop);
+                trigger(obj, Symbol.iterator);
+                triggerOver(obj);
+            }
+
+            return result;
+        }
+    });
+
+    proxyMap.set(target, proxy);
+    return proxy as T;
+}

package/assets/Store.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.24",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "69fd0949-13e4-42c3-ba01-4309a8854e4f",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}

package/assets.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "1.2.0",
+  "importer": "directory",
+  "imported": true,
+  "uuid": "c6e32933-824e-46ad-97f0-e6c60a837853",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}

package/index.ts

@@ -0,0 +1,135 @@
+import { Component, Director, director, Node } from 'cc';
+import { create, reactive, watch } from './assets/Store';
+
+director.on(Director.EVENT_AFTER_UPDATE, reactive);
+
+/**
+ * 立即通知监听者数据变化了
+ * - watchStore和bindStore监听的数据变化，都是延迟到Director.EVENT_AFTER_UPDATE中触发的，使用此函数可以立即通知变化
+ */
+export function notifyWatchers() {
+    reactive();
+}
+
+/**
+ * 在constructor中执行createStore(this)，自动将类的实例转换成store
+ */
+export function createStore<T extends object>(target: T): T {
+    return create(target);
+}
+
+const WatchCache: Array<[Function, unknown, Function | null]> = [];
+
+/**
+ * 监听数据变化
+ * @param watcher 响应式函数
+ * @param target  函数绑定的上下文
+ * @param once 只监听一次
+ */
+export function watchStore(watcher: () => any, target?: unknown, once?: boolean) {
+    if (once) {
+        watch(watcher, target)();
+        return;
+    }
+
+    const watchItem = [watcher, target, null] as [Function, unknown, Function | null];
+    WatchCache.push(watchItem);
+
+    const disposer = watch(watcher, target);
+    if (WatchCache.indexOf(watchItem) !== -1) {
+        watchItem[2] = disposer;
+    } else {
+        disposer();
+    }
+}
+
+/**
+ * 取消监听数据变化
+ * @description 在不需要时一定要手动调用此方法，否则会造成内存泄漏
+ * @param watcher 响应式函数
+ * @param target  函数绑定的上下文
+ */
+export function stopWatch(watcher: () => any, target?: unknown) {
+    for (let index = 0; index < WatchCache.length; index++) {
+        const [_watcher, _target, _disposer] = WatchCache[index];
+        if (watcher !== _watcher) continue;
+        if (typeof target !== 'undefined' && target !== _target) continue;
+        WatchCache.splice(index--, 1);
+        if (_disposer) _disposer();
+    }
+}
+
+/**
+ * 判断是否正在监听数据变化
+ * @param watcher 响应式函数
+ * @param target 函数绑定的上下文
+ */
+export function isWatching(watcher: () => any, target?: unknown) {
+    for (let index = 0; index < WatchCache.length; index++) {
+        const [_watcher, _target] = WatchCache[index];
+        if (watcher !== _watcher) continue;
+        if (typeof target !== 'undefined' && target !== _target) continue;
+        return true;
+    }
+    return false;
+}
+
+const BindCache: Map<Component | Node, Map<any, [Function, Function]>> = new Map();
+
+/**
+ * 将Node或Component的属性与store绑定
+ * @description 在Node或Component销毁时将自动解绑
+ * @description 但如果是调用node.removeFromParent移除node，并不会自动解绑，如果需要请手动解绑
+ */
+export function bindStore<T extends Component | Node, K extends keyof T>(obj: T, key: K, value: () => T[K]) {
+    let map = BindCache.get(obj);
+    if (!map) {
+        map = new Map();
+        BindCache.set(obj, map);
+    }
+
+    // 如果已经绑定过了，则不再重复绑定
+    if (map.has(key)) return;
+
+    const callback = (comOrNode: T) => {
+        if (Node.isNode(comOrNode)) {
+            return stopBind(obj, key);
+        }
+        if (comOrNode !== obj) return;
+        stopBind(obj, key);
+    };
+    const disposer = watch(() => obj[key] = value());
+    map.set(key, [disposer, callback]);
+
+    if (Node.isNode(obj)) {
+        obj.on(Node.EventType.NODE_DESTROYED, callback);
+    } else {
+        obj.node.on(Node.EventType.COMPONENT_REMOVED, callback);
+        obj.node.on(Node.EventType.NODE_DESTROYED, callback);
+    }
+}
+
+/**
+ * 将Node或Component的属性与store解绑
+ */
+export function stopBind<T extends Component | Node, K extends keyof T>(obj: T, key: K) {
+    const map = BindCache.get(obj);
+    if (!map) return;
+
+    const fns = map.get(key);
+    if (!fns) return;
+
+    map.delete(key);
+    if (map.size === 0) {
+        BindCache.delete(obj);
+    }
+
+    const [disposer, callback] = fns;
+    if (Node.isNode(obj)) {
+        obj.off(Node.EventType.NODE_DESTROYED, callback);
+    } else {
+        obj.node.off(Node.EventType.COMPONENT_REMOVED, callback);
+        obj.node.off(Node.EventType.NODE_DESTROYED, callback);
+    }
+    disposer();
+}

package/index.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.24",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "1bfbc1db-02cd-40d7-834a-b922610bfe80",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}

package/package.json

@@ -0,0 +1,20 @@
+{
+    "name": "@luys/cc-store",
+    "version": "1.0.0",
+    "engine": ">=3.8.0",
+    "description": "状态管理模块",
+    "main": "index.ts",
+    "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1"
+    },
+    "repository": {
+        "type": "git",
+        "url": "https://gitee.com/cocos2d-zp/cococs-creator-frame-3d"
+    },
+    "publishConfig": {
+        "access": "public",
+        "registry": "https://registry.npmjs.org"
+    },
+    "license": "MIT",
+    "readme": ".cc-store.md"
+}

package/package.json.meta

@@ -0,0 +1,11 @@
+{
+  "ver": "2.0.1",
+  "importer": "json",
+  "imported": true,
+  "uuid": "61c9645d-6ea8-4c93-ba2a-3ed3f8bf07e1",
+  "files": [
+    ".json"
+  ],
+  "subMetas": {},
+  "userData": {}
+}