@esmx/class-state 3.0.0-rc.10

package/dist/connect.d.ts

@@ -0,0 +1,80 @@
+import { type State, type StateContext } from './create';
+export type StoreParams = Record<string, any>;
+export type StoreConstructor = new (cacheKey?: string) => any;
+export type StoreInstance<T extends {}> = T & {
+    $: StoreContext<T>;
+};
+/**
+ * class created
+ */
+export declare const LIFE_CYCLE_CREATED: unique symbol;
+/**
+ * class dispose
+ */
+export declare const LIFE_CYCLE_DISPOSE: unique symbol;
+export type StoreSubscribe = () => void;
+export declare class StoreContext<T extends {}> {
+    /**
+     * 全局的状态上下文
+     */
+    private _stateContext;
+    /**
+     * 原始实例
+     */
+    private readonly _raw;
+    /**
+     * 原始实例的代理，每次状态变化时，代理都会更新
+     */
+    private _proxy;
+    /**
+     * 当前的 state 是否是草稿状态
+     */
+    private _drafting;
+    /**
+     * $ 函数的缓存对象
+     */
+    private readonly _cacheCommit;
+    /**
+     * 当前的 store 的存储路径
+     */
+    readonly keyPath: string;
+    /**
+     * 最新的状态
+     */
+    state: Record<string, any>;
+    /**
+     * 当前的 store 的 state 是否已经连接到全局的 state 中
+     */
+    connecting: boolean;
+    private readonly _subs;
+    constructor(stateContext: StateContext, raw: T, state: Record<string, any>, keyPath: string);
+    /**
+     * 获取当前代理实例，每次状态变化时，代理实例都会变化
+     * 已绑定 this
+     */
+    get(): StoreInstance<T>;
+    /**
+     * 私有函数，外部调用不应该使用
+     */
+    _setState(nextState: Record<string, any>): void;
+    /**
+     * 销毁实例，释放内存
+     * 已绑定 this
+     */
+    dispose(): void;
+    /**
+     * 订阅状态变化
+     * @param cb 回调函数
+     * 已绑定 this
+     * @returns
+     */
+    subscribe(cb: StoreSubscribe): () => void;
+    private _depend;
+    private _createProxyClass;
+    private _createProxyCommit;
+}
+export declare function connectState(state: State): <T extends StoreConstructor>(Store: T, name: string, cacheKey?: string) => StoreInstance<InstanceType<T>>;
+/**
+ * 查找外部的 store。如果没有找到则返回 null
+ */
+export declare function foreignStore<T extends StoreConstructor>(Store: T, name: string, cacheKey?: string): InstanceType<T> | null;

package/dist/connect.mjs

@@ -0,0 +1,244 @@
+import { produce } from "immer";
+import { getStateContext } from "./create.mjs";
+let currentStateContext = null;
+export const LIFE_CYCLE_CREATED = Symbol("class created");
+export const LIFE_CYCLE_DISPOSE = Symbol("class dispose");
+let sid = 0;
+function noon() {
+}
+export class StoreContext {
+  /**
+   * 全局的状态上下文
+   */
+  _stateContext;
+  /**
+   * 原始实例
+   */
+  _raw;
+  /**
+   * 原始实例的代理，每次状态变化时，代理都会更新
+   */
+  _proxy;
+  /**
+   * 当前的 state 是否是草稿状态
+   */
+  _drafting = false;
+  /**
+   * $ 函数的缓存对象
+   */
+  _cacheCommit = /* @__PURE__ */ new Map();
+  /**
+   * 当前的 store 的存储路径
+   */
+  keyPath;
+  /**
+   * 最新的状态
+   */
+  state;
+  /**
+   * 当前的 store 的 state 是否已经连接到全局的 state 中
+   */
+  connecting;
+  _subs = [];
+  constructor(stateContext, raw, state, keyPath) {
+    this._stateContext = stateContext;
+    stateContext.add(keyPath, this);
+    this._raw = raw;
+    this._proxy = this._createProxyClass();
+    this.state = state;
+    this.keyPath = keyPath;
+    this.connecting = stateContext.hasState(keyPath);
+    this.get = this.get.bind(this);
+    this.subscribe = this.subscribe.bind(this);
+    this.dispose = this.dispose.bind(this);
+  }
+  /**
+   * 获取当前代理实例，每次状态变化时，代理实例都会变化
+   * 已绑定 this
+   */
+  get() {
+    this._depend();
+    return this._proxy;
+  }
+  /**
+   * 私有函数，外部调用不应该使用
+   */
+  _setState(nextState) {
+    const { _stateContext, keyPath: fullPath, _subs } = this;
+    this.state = nextState;
+    if (_stateContext) {
+      _stateContext.updateState(fullPath, nextState);
+    }
+    this.connecting = !!_stateContext;
+    const store = this._createProxyClass();
+    this._proxy = store;
+    if (_subs.length) {
+      const subs = [..._subs];
+      subs.forEach((item) => {
+        item.cb();
+      });
+    }
+  }
+  /**
+   * 销毁实例，释放内存
+   * 已绑定 this
+   */
+  dispose() {
+    const { _stateContext, _proxy } = this;
+    call(_proxy, LIFE_CYCLE_DISPOSE);
+    if (_stateContext) {
+      _stateContext.del(this.keyPath);
+      this._stateContext = null;
+    }
+    this._subs.splice(0);
+    this.dispose = noon;
+  }
+  /**
+   * 订阅状态变化
+   * @param cb 回调函数
+   * 已绑定 this
+   * @returns
+   */
+  subscribe(cb) {
+    const _sid = ++sid;
+    this._subs.push({
+      sid,
+      cb
+    });
+    return () => {
+      const index = this._subs.findIndex((item) => item.sid === _sid);
+      if (index > -1) {
+        this._subs.splice(index, 1);
+      }
+    };
+  }
+  _depend() {
+    const stateContext = this._stateContext;
+    if (stateContext) {
+      if (this.connecting) {
+        stateContext.depend(this.keyPath);
+      } else {
+        stateContext.depend();
+      }
+    }
+  }
+  _createProxyClass() {
+    const storeContext = this;
+    return new Proxy(this._raw, {
+      get(target, p, receiver) {
+        if (p === "$") {
+          return storeContext;
+        } else if (typeof p === "string") {
+          const state = storeContext.state;
+          if (p in state) {
+            storeContext._depend();
+            return state[p];
+          }
+        }
+        const result = applyStateContext(
+          storeContext._stateContext,
+          () => Reflect.get(target, p, receiver)
+        );
+        if (typeof result === "function" && typeof p === "string" && p.startsWith("$")) {
+          let func = storeContext._cacheCommit.get(result);
+          if (!func) {
+            func = storeContext._createProxyCommit(result);
+            storeContext._cacheCommit.set(result, func);
+          }
+          return func;
+        }
+        return result;
+      },
+      set(target, p, newValue, receiver) {
+        if (typeof p === "string" && p in storeContext.state) {
+          if (storeContext._drafting) {
+            storeContext.state[p] = newValue;
+            return true;
+          }
+          throw new Error(
+            `Change the state in the agreed commit function, For example, $${p}('${String(newValue)}')`
+          );
+        }
+        return Reflect.set(target, p, newValue, receiver);
+      }
+    });
+  }
+  _createProxyCommit(commitFunc) {
+    const connectContext = this;
+    return function proxyCommit(...args) {
+      if (connectContext._drafting) {
+        return commitFunc.apply(connectContext._proxy, args);
+      }
+      const prevState = connectContext.state;
+      let result;
+      const nextState = produce(prevState, (draft) => {
+        connectContext._drafting = true;
+        connectContext.state = draft;
+        try {
+          result = commitFunc.apply(connectContext._proxy, args);
+          connectContext._drafting = false;
+          connectContext.state = prevState;
+        } catch (e) {
+          connectContext._drafting = false;
+          connectContext.state = prevState;
+          throw e;
+        }
+      });
+      connectContext._setState(nextState);
+      return result;
+    };
+  }
+}
+function getFullPath(name, cacheKey) {
+  return typeof cacheKey === "string" ? name + "/" + cacheKey : name;
+}
+export function connectState(state) {
+  const stateContext = getStateContext(state);
+  return (Store, name, cacheKey) => {
+    const fullPath = getFullPath(name, cacheKey);
+    let storeContext = stateContext.get(fullPath);
+    if (!storeContext) {
+      const store = applyStateContext(
+        stateContext,
+        () => new Store(cacheKey)
+      );
+      let storeState;
+      if (fullPath in state.value) {
+        storeState = { ...store, ...state.value[fullPath] };
+      } else {
+        storeState = { ...store };
+      }
+      storeContext = new StoreContext(
+        stateContext,
+        store,
+        storeState,
+        fullPath
+      );
+      call(storeContext.get(), LIFE_CYCLE_CREATED);
+    }
+    return storeContext.get();
+  };
+}
+export function foreignStore(Store, name, cacheKey) {
+  if (!currentStateContext) {
+    throw new Error("No state context found");
+  }
+  const fullPath = getFullPath(name, cacheKey);
+  const storeContext = currentStateContext.get(fullPath);
+  if (storeContext) {
+    return storeContext.get();
+  }
+  return null;
+}
+function call(obj, key) {
+  if (typeof obj[key] === "function") {
+    return obj[key]();
+  }
+}
+function applyStateContext(stateContext, cb) {
+  const prev = currentStateContext;
+  currentStateContext = stateContext;
+  const value = cb();
+  currentStateContext = prev;
+  return value;
+}

package/dist/connect.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/connect.test.mjs

@@ -0,0 +1,365 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { assert, test } from "vitest";
+import { connectState, foreignStore } from "./connect.mjs";
+import { createState } from "./create.mjs";
+test("Base", () => {
+  const state = createState();
+  const STORE_NAME = "user";
+  const connectStore = connectState(state);
+  class User {
+    name = "";
+    age = 18;
+    text = "";
+    online = false;
+    constructor() {
+      Object.defineProperty(this, "online", {
+        enumerable: false
+      });
+    }
+    $setName(name) {
+      this.name = name;
+    }
+    $setAge(age) {
+      this.age = age;
+    }
+    $buildText() {
+      this.text = `${this.name} is ${this.age} years old.`;
+    }
+    $toggleOnline() {
+      this.online = !this.online;
+    }
+  }
+  const user = connectStore(User, STORE_NAME);
+  assert.equal(user.name, "");
+  assert.isUndefined(state.value.user);
+});
+test("Object type", () => {
+  const state = createState();
+  const STORE_NAME = "user";
+  const connectStore = connectState(state);
+  class User {
+    data = {
+      name: "",
+      age: 18
+    };
+    get text() {
+      return `${this.data.name} is ${this.data.age} years old.`;
+    }
+    $setName(name) {
+      this.data.name = name;
+    }
+    $setAge(age) {
+      this.data.age = age;
+    }
+  }
+  const user = connectStore(User, STORE_NAME);
+  const preData = user.data;
+  user.$setName("jack");
+  assert.strictEqual(user.data.name, "jack");
+  assert.strictEqual(user.data.age, 18);
+  assert.notStrictEqual(user.data, preData);
+  assert.strictEqual(user.text, "jack is 18 years old.");
+});
+test("Commit function this bind", () => {
+  const state = createState();
+  const STORE_NAME = "user";
+  const connectStore = connectState(state);
+  class User {
+    name = "";
+    $setName(name) {
+      this.name = name;
+    }
+  }
+  const user = connectStore(User, STORE_NAME);
+  const setName = user.$setName;
+  setName("jack");
+  assert.strictEqual(user.name, "jack");
+});
+test("Commit function return value and args", () => {
+  const state = createState();
+  const STORE_NAME = "user";
+  const connectStore = connectState(state);
+  class User {
+    list = [];
+    $add(...list) {
+      this.list.push(...list);
+      return true;
+    }
+  }
+  const user = connectStore(User, STORE_NAME);
+  assert.isTrue(user.$add("jack", "tom"));
+  assert.deepEqual(user.list, ["jack", "tom"]);
+});
+test("Instance reference", () => {
+  const state = createState();
+  const STORE_NAME = "user";
+  const connectStore = connectState(state);
+  class User {
+    name = "";
+    $setName(name) {
+      this.name = name;
+    }
+  }
+  const user = connectStore(User, STORE_NAME);
+  assert.strictEqual(user, connectStore(User, STORE_NAME));
+  user.$setName("jack");
+  assert.notStrictEqual(user, connectStore(User, STORE_NAME));
+});
+test("Disconnect", () => {
+  const state = createState();
+  const STORE_NAME = "user";
+  const connectStore = connectState(state);
+  class User {
+    name = "";
+    $setName(name) {
+      this.name = name;
+    }
+  }
+  const user = connectStore(User, STORE_NAME);
+  assert.isUndefined(state.value.user);
+  user.$setName("jack");
+  assert.strictEqual(state.value.user, user.$.state);
+  user.$.dispose();
+  assert.isUndefined(state.value.user);
+  assert.isNull(user.$._stateContext);
+});
+test("Preset state", () => {
+  const STORE_NAME = "user";
+  const state = createState({
+    value: {
+      [STORE_NAME]: {
+        name: "jack"
+      }
+    }
+  });
+  const connectStore = connectState(state);
+  class User {
+    name = "";
+    age = 18;
+  }
+  const user = connectStore(User, STORE_NAME);
+  assert.strictEqual(user.name, "jack");
+  assert.strictEqual(user.age, 18);
+  assert.notStrictEqual(user.$.state, state.value.user);
+  assert.deepEqual(state.value.user, { name: "jack" });
+});
+test("State modification delay", () => {
+  const STORE_NAME = "user";
+  const state = createState();
+  const connectStore = connectState(state);
+  class User {
+    name = "";
+    age = 0;
+    $setAge(age) {
+      this.age = age;
+    }
+    $setName(name) {
+      this.name = name;
+    }
+  }
+  __publicField(User, "storeName", "user");
+  const user = connectStore(User, STORE_NAME);
+  const setAge = user.$setAge.bind(user);
+  user.$setName("test");
+  assert.equal(user.name, "test");
+  assert.equal(user.age, 0);
+  user.$setAge(100);
+  assert.equal(user.name, "test");
+  assert.equal(user.age, 100);
+  setAge(200);
+  assert.equal(user.name, "test");
+  assert.equal(user.age, 200);
+});
+test("Multiple instances", () => {
+  const state = createState();
+  const _connectStore = connectState(state);
+  class User {
+    name = "";
+    get blog() {
+      return foreignStore(Blog, "blog");
+    }
+    get log() {
+      return `'${this.name}' published '${this.blog.text}'`;
+    }
+    $setName(name) {
+      this.name = name;
+    }
+  }
+  class Blog {
+    text = "";
+    $setText(text) {
+      this.text = text;
+    }
+  }
+  const user = _connectStore(User, "user");
+  user.$setName("jack");
+  user.blog.$setText("hello world.");
+  assert.strictEqual(user.name, "jack");
+  assert.equal(user.log, "'jack' published 'hello world.'");
+});
+test("Params", () => {
+  const state = createState();
+  const connectStore = connectState(state);
+  class User {
+    name = "";
+    uid;
+    constructor(uid) {
+      this.uid = uid ?? "";
+    }
+    $setName(name) {
+      this.name = name;
+    }
+  }
+  const user100 = connectStore(User, "user", "100");
+  user100.$setName("jack");
+  assert.strictEqual(user100.uid, "100");
+  const user200 = connectStore(User, "user", "200");
+  user200.$setName("tom");
+  assert.strictEqual(user100.uid, "100");
+  assert.notStrictEqual(user100, user200);
+  assert.strictEqual(state.value["user/100"], user100.$.state);
+  assert.strictEqual(state.value["user/200"], user200.$.state);
+  assert.deepEqual(state.value["user/100"], { uid: "100", name: "jack" });
+  assert.deepEqual(state.value["user/200"], { uid: "200", name: "tom" });
+});
+test("Call commit multiple times", () => {
+  const state = createState();
+  const connectStore = connectState(state);
+  class User {
+    name = "";
+    age = 0;
+    text = "";
+    $setName(name) {
+      this.name = name;
+      return "1";
+    }
+    $setAge(age) {
+      this.age = age;
+      return "2";
+    }
+    $setUser(name, age) {
+      const v1 = this.$setName(name);
+      const v2 = this.$setAge(age);
+      this.text = v1 + v2;
+    }
+  }
+  const user = connectStore(User, "user");
+  user.$setUser("jack", 18);
+  assert.equal(user.name, "jack");
+  assert.equal(user.age, 18);
+  assert.equal(user.text, "12");
+});
+test("No a submit function modification state", () => {
+  const state = createState();
+  const connectStore = connectState(state);
+  class User {
+    name = "";
+    setName(name) {
+      this.name = name;
+    }
+  }
+  const user = connectStore(User, "user");
+  assert.Throw(() => {
+    user.setName("jack");
+  }, "Change the state in the agreed commit function, For example, $name('jack')");
+});
+test("Equal submit function", () => {
+  const state = createState();
+  const connectStore = connectState(state);
+  class User {
+    name = "";
+    $setName(name) {
+      this.name = name;
+    }
+  }
+  const user = connectStore(User, "user");
+  assert.equal(user.$setName, user.$setName);
+});
+test("State Restore", () => {
+  const state = createState({
+    value: {
+      user: {
+        name: "jack"
+      }
+    }
+  });
+  const connectStore = connectState(state);
+  class User {
+    name = "";
+    $setName(name) {
+      this.name = name;
+    }
+  }
+  const user = connectStore(User, "user");
+  assert.equal(user.name, "jack");
+});
+test("update value", () => {
+  const state = createState();
+  const connectStore = connectState(state);
+  class Count {
+    value = 0;
+    text = "";
+    $inc() {
+      this.value++;
+    }
+    $setText(text) {
+      this.text = text;
+    }
+  }
+  const count = connectStore(Count, "count");
+  const setText = count.$setText;
+  count.$inc();
+  assert.equal(count.value, 1);
+  count.$inc();
+  assert.equal(count.value, 2);
+  count.$inc();
+  assert.equal(count.value, 3);
+  setText("hello world");
+  assert.equal(count.value, 3);
+  assert.equal(count.text, "hello world");
+  setText("hello world2");
+  assert.equal(count.value, 3);
+  assert.equal(count.text, "hello world2");
+});
+test("default connecting", () => {
+  const state = createState({
+    value: {
+      count: {
+        value: 100
+      }
+    }
+  });
+  const connectStore = connectState(state);
+  class Count {
+    value = 0;
+    $inc() {
+      this.value++;
+    }
+  }
+  const count = connectStore(Count, "count");
+  assert.equal(count.value, 100);
+  assert.equal(count.$.connecting, true);
+});
+test("update state", () => {
+  const state = createState({
+    value: {
+      count: {
+        value: 100
+      }
+    }
+  });
+  const connectStore = connectState(state);
+  class Count {
+    value = 0;
+    $inc() {
+      this.value++;
+    }
+  }
+  const count = connectStore(Count, "count");
+  count.$inc();
+  const value = state.value;
+  count.$inc();
+  assert.equal(value, state.value);
+});

package/dist/create.d.ts

@@ -0,0 +1,17 @@
+import type { StoreContext } from './connect';
+export interface State {
+    value: Record<string, any>;
+}
+export declare class StateContext {
+    readonly state: State;
+    private readonly storeContext;
+    constructor(state: State);
+    depend(fullPath?: string): unknown;
+    hasState(name: string): boolean;
+    get(name: string): StoreContext<any> | null;
+    add(name: string, storeContext: StoreContext<any>): void;
+    updateState(name: string, nextState: any): void;
+    del(name: string): void;
+}
+export declare function getStateContext(state: State): StateContext;
+export declare function createState(state?: State): State;