@esmx/class-state 3.0.0-rc.10 → 3.0.0-rc.104

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Esmx Team
+
+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,58 @@
+<div align="center">
+  <img src="https://esmx.dev/logo.svg?t=2025" width="120" alt="Esmx Logo" />
+  <h1>@esmx/class-state</h1>
+  
+  <div>
+    <a href="https://www.npmjs.com/package/@esmx/class-state">
+      <img src="https://img.shields.io/npm/v/@esmx/class-state.svg" alt="npm version" />
+    </a>
+    <a href="https://github.com/esmnext/esmx/actions/workflows/build.yml">
+      <img src="https://github.com/esmnext/esmx/actions/workflows/build.yml/badge.svg" alt="Build" />
+    </a>
+    <a href="https://esmx.dev/coverage/">
+      <img src="https://img.shields.io/badge/coverage-live%20report-brightgreen" alt="Coverage Report" />
+    </a>
+    <a href="https://nodejs.org/">
+      <img src="https://img.shields.io/node/v/@esmx/class-state.svg" alt="node version" />
+    </a>
+    <a href="https://bundlephobia.com/package/@esmx/class-state">
+      <img src="https://img.shields.io/bundlephobia/minzip/@esmx/class-state" alt="size" />
+    </a>
+  </div>
+  
+  <p>Lightweight class-based state management solution for modern JavaScript applications</p>
+  
+  <p>
+    English | <a href="https://github.com/esmnext/esmx/blob/master/packages/class-state/README.zh-CN.md">中文</a>
+  </p>
+</div>
+
+## 🚀 Features
+
+- **Class-Based Design** - Clean and intuitive class-based state management
+- **Framework Agnostic** - Works with any JavaScript framework or vanilla JS
+- **TypeScript Ready** - Full TypeScript support with excellent type inference
+- **Reactive System** - Built-in reactivity for automatic UI updates
+- **Lightweight** - Minimal bundle size with maximum functionality
+- **Modern API** - Uses modern JavaScript features and patterns
+
+## 📦 Installation
+
+```bash
+# npm
+npm install @esmx/class-state
+
+# pnpm
+pnpm add @esmx/class-state
+
+# yarn
+yarn add @esmx/class-state
+```
+
+## 📚 Documentation
+
+Visit the [official documentation](https://esmx.dev) for detailed usage guides and API reference.
+
+## 📄 License
+
+MIT © [Esmx Team](https://github.com/esmnext/esmx) 

package/README.zh-CN.md

@@ -0,0 +1,58 @@
+<div align="center">
+  <img src="https://esmx.dev/logo.svg?t=2025" width="120" alt="Esmx Logo" />
+  <h1>@esmx/class-state</h1>
+  
+  <div>
+    <a href="https://www.npmjs.com/package/@esmx/class-state">
+      <img src="https://img.shields.io/npm/v/@esmx/class-state.svg" alt="npm version" />
+    </a>
+    <a href="https://github.com/esmnext/esmx/actions/workflows/build.yml">
+      <img src="https://github.com/esmnext/esmx/actions/workflows/build.yml/badge.svg" alt="Build" />
+    </a>
+    <a href="https://esmx.dev/coverage/">
+      <img src="https://img.shields.io/badge/coverage-live%20report-brightgreen" alt="Coverage Report" />
+    </a>
+    <a href="https://nodejs.org/">
+      <img src="https://img.shields.io/node/v/@esmx/class-state.svg" alt="node version" />
+    </a>
+    <a href="https://bundlephobia.com/package/@esmx/class-state">
+      <img src="https://img.shields.io/bundlephobia/minzip/@esmx/class-state" alt="size" />
+    </a>
+  </div>
+  
+  <p>为现代 JavaScript 应用提供的轻量级基于类的状态管理解决方案</p>
+  
+  <p>
+    <a href="https://github.com/esmnext/esmx/blob/master/packages/class-state/README.md">English</a> | 中文
+  </p>
+</div>
+
+## 🚀 特性
+
+- **基于类的设计** - 简洁直观的基于类的状态管理
+- **框架无关** - 适用于任何 JavaScript 框架或原生 JS
+- **TypeScript 就绪** - 完整的 TypeScript 支持，出色的类型推断
+- **响应式系统** - 内置响应性，自动更新 UI
+- **轻量级** - 最小化包体积，最大化功能
+- **现代 API** - 使用现代 JavaScript 特性和模式
+
+## 📦 安装
+
+```bash
+# npm
+npm install @esmx/class-state
+
+# pnpm
+pnpm add @esmx/class-state
+
+# yarn
+yarn add @esmx/class-state
+```
+
+## 📚 文档
+
+访问[官方文档](https://esmx.dev)获取详细的使用指南和 API 参考。
+
+## 📄 许可证
+
+MIT © [Esmx Team](https://github.com/esmnext/esmx) 

package/dist/connect.mjs

@@ -1,3 +1,6 @@
+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 { produce } from "immer";
 import { getStateContext } from "./create.mjs";
 let currentStateContext = null;
@@ -7,40 +10,40 @@ 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) {
+    /**
+     * 全局的状态上下文
+     */
+    __publicField(this, "_stateContext");
+    /**
+     * 原始实例
+     */
+    __publicField(this, "_raw");
+    /**
+     * 原始实例的代理，每次状态变化时，代理都会更新
+     */
+    __publicField(this, "_proxy");
+    /**
+     * 当前的 state 是否是草稿状态
+     */
+    __publicField(this, "_drafting", false);
+    /**
+     * $ 函数的缓存对象
+     */
+    __publicField(this, "_cacheCommit", /* @__PURE__ */ new Map());
+    /**
+     * 当前的 store 的存储路径
+     */
+    __publicField(this, "keyPath");
+    /**
+     * 最新的状态
+     */
+    __publicField(this, "state");
+    /**
+     * 当前的 store 的 state 是否已经连接到全局的 state 中
+     */
+    __publicField(this, "connecting");
+    __publicField(this, "_subs", []);
     this._stateContext = stateContext;
     stateContext.add(keyPath, this);
     this._raw = raw;
@@ -156,7 +159,7 @@ export class StoreContext {
             return true;
           }
           throw new Error(
-            `Change the state in the agreed commit function, For example, $${p}('${String(newValue)}')`
+            "Change the state in the agreed commit function, For example, $".concat(p, "('").concat(String(newValue), "')")
           );
         }
         return Reflect.set(target, p, newValue, receiver);

package/dist/connect.test.mjs

@@ -9,11 +9,11 @@ test("Base", () => {
   const STORE_NAME = "user";
   const connectStore = connectState(state);
   class User {
-    name = "";
-    age = 18;
-    text = "";
-    online = false;
     constructor() {
+      __publicField(this, "name", "");
+      __publicField(this, "age", 18);
+      __publicField(this, "text", "");
+      __publicField(this, "online", false);
       Object.defineProperty(this, "online", {
         enumerable: false
       });
@@ -25,7 +25,7 @@ test("Base", () => {
       this.age = age;
     }
     $buildText() {
-      this.text = `${this.name} is ${this.age} years old.`;
+      this.text = "".concat(this.name, " is ").concat(this.age, " years old.");
     }
     $toggleOnline() {
       this.online = !this.online;
@@ -40,12 +40,14 @@ test("Object type", () => {
   const STORE_NAME = "user";
   const connectStore = connectState(state);
   class User {
-    data = {
-      name: "",
-      age: 18
-    };
+    constructor() {
+      __publicField(this, "data", {
+        name: "",
+        age: 18
+      });
+    }
     get text() {
-      return `${this.data.name} is ${this.data.age} years old.`;
+      return "".concat(this.data.name, " is ").concat(this.data.age, " years old.");
     }
     $setName(name) {
       this.data.name = name;
@@ -67,7 +69,9 @@ test("Commit function this bind", () => {
   const STORE_NAME = "user";
   const connectStore = connectState(state);
   class User {
-    name = "";
+    constructor() {
+      __publicField(this, "name", "");
+    }
     $setName(name) {
       this.name = name;
     }
@@ -82,7 +86,9 @@ test("Commit function return value and args", () => {
   const STORE_NAME = "user";
   const connectStore = connectState(state);
   class User {
-    list = [];
+    constructor() {
+      __publicField(this, "list", []);
+    }
     $add(...list) {
       this.list.push(...list);
       return true;
@@ -97,7 +103,9 @@ test("Instance reference", () => {
   const STORE_NAME = "user";
   const connectStore = connectState(state);
   class User {
-    name = "";
+    constructor() {
+      __publicField(this, "name", "");
+    }
     $setName(name) {
       this.name = name;
     }
@@ -112,7 +120,9 @@ test("Disconnect", () => {
   const STORE_NAME = "user";
   const connectStore = connectState(state);
   class User {
-    name = "";
+    constructor() {
+      __publicField(this, "name", "");
+    }
     $setName(name) {
       this.name = name;
     }
@@ -136,8 +146,10 @@ test("Preset state", () => {
   });
   const connectStore = connectState(state);
   class User {
-    name = "";
-    age = 18;
+    constructor() {
+      __publicField(this, "name", "");
+      __publicField(this, "age", 18);
+    }
   }
   const user = connectStore(User, STORE_NAME);
   assert.strictEqual(user.name, "jack");
@@ -150,8 +162,10 @@ test("State modification delay", () => {
   const state = createState();
   const connectStore = connectState(state);
   class User {
-    name = "";
-    age = 0;
+    constructor() {
+      __publicField(this, "name", "");
+      __publicField(this, "age", 0);
+    }
     $setAge(age) {
       this.age = age;
     }
@@ -176,24 +190,29 @@ test("Multiple instances", () => {
   const state = createState();
   const _connectStore = connectState(state);
   class User {
-    name = "";
+    constructor() {
+      __publicField(this, "name", "");
+    }
     get blog() {
       return foreignStore(Blog, "blog");
     }
     get log() {
-      return `'${this.name}' published '${this.blog.text}'`;
+      return "'".concat(this.name, "' published '").concat(this.blog.text, "'");
     }
     $setName(name) {
       this.name = name;
     }
   }
   class Blog {
-    text = "";
+    constructor() {
+      __publicField(this, "text", "");
+    }
     $setText(text) {
       this.text = text;
     }
   }
   const user = _connectStore(User, "user");
+  const blog = _connectStore(Blog, "blog");
   user.$setName("jack");
   user.blog.$setText("hello world.");
   assert.strictEqual(user.name, "jack");
@@ -203,10 +222,10 @@ test("Params", () => {
   const state = createState();
   const connectStore = connectState(state);
   class User {
-    name = "";
-    uid;
     constructor(uid) {
-      this.uid = uid ?? "";
+      __publicField(this, "name", "");
+      __publicField(this, "uid");
+      this.uid = uid != null ? uid : "";
     }
     $setName(name) {
       this.name = name;
@@ -228,9 +247,11 @@ test("Call commit multiple times", () => {
   const state = createState();
   const connectStore = connectState(state);
   class User {
-    name = "";
-    age = 0;
-    text = "";
+    constructor() {
+      __publicField(this, "name", "");
+      __publicField(this, "age", 0);
+      __publicField(this, "text", "");
+    }
     $setName(name) {
       this.name = name;
       return "1";
@@ -255,7 +276,9 @@ test("No a submit function modification state", () => {
   const state = createState();
   const connectStore = connectState(state);
   class User {
-    name = "";
+    constructor() {
+      __publicField(this, "name", "");
+    }
     setName(name) {
       this.name = name;
     }
@@ -269,7 +292,9 @@ test("Equal submit function", () => {
   const state = createState();
   const connectStore = connectState(state);
   class User {
-    name = "";
+    constructor() {
+      __publicField(this, "name", "");
+    }
     $setName(name) {
       this.name = name;
     }
@@ -287,7 +312,9 @@ test("State Restore", () => {
   });
   const connectStore = connectState(state);
   class User {
-    name = "";
+    constructor() {
+      __publicField(this, "name", "");
+    }
     $setName(name) {
       this.name = name;
     }
@@ -299,8 +326,10 @@ test("update value", () => {
   const state = createState();
   const connectStore = connectState(state);
   class Count {
-    value = 0;
-    text = "";
+    constructor() {
+      __publicField(this, "value", 0);
+      __publicField(this, "text", "");
+    }
     $inc() {
       this.value++;
     }
@@ -333,7 +362,9 @@ test("default connecting", () => {
   });
   const connectStore = connectState(state);
   class Count {
-    value = 0;
+    constructor() {
+      __publicField(this, "value", 0);
+    }
     $inc() {
       this.value++;
     }
@@ -352,7 +383,9 @@ test("update state", () => {
   });
   const connectStore = connectState(state);
   class Count {
-    value = 0;
+    constructor() {
+      __publicField(this, "value", 0);
+    }
     $inc() {
       this.value++;
     }

package/dist/create.mjs

@@ -1,8 +1,11 @@
+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);
 const rootMap = /* @__PURE__ */ new WeakMap();
 export class StateContext {
-  state;
-  storeContext = /* @__PURE__ */ new Map();
   constructor(state) {
+    __publicField(this, "state");
+    __publicField(this, "storeContext", /* @__PURE__ */ new Map());
     this.state = state;
   }
   depend(fullPath) {
@@ -15,7 +18,8 @@ export class StateContext {
     return name in this.state.value;
   }
   get(name) {
-    return this.storeContext.get(name) ?? null;
+    var _a;
+    return (_a = this.storeContext.get(name)) != null ? _a : null;
   }
   add(name, storeContext) {
     this.storeContext.set(name, storeContext);

package/dist/index.d.ts

@@ -1,2 +1,2 @@
+export { connectState, foreignStore, LIFE_CYCLE_CREATED, LIFE_CYCLE_DISPOSE, type StoreConstructor, type StoreContext, type StoreInstance, type StoreParams } from './connect';
 export { createState, type State } from './create';
-export { connectState, foreignStore, type StoreConstructor, type StoreContext, type StoreInstance, type StoreParams, LIFE_CYCLE_CREATED, LIFE_CYCLE_DISPOSE } from './connect';

package/dist/index.mjs

@@ -1,7 +1,7 @@
-export { createState } from "./create.mjs";
 export {
   connectState,
   foreignStore,
   LIFE_CYCLE_CREATED,
   LIFE_CYCLE_DISPOSE
 } from "./connect.mjs";
+export { createState } from "./create.mjs";

package/dist/vue.test.mjs

@@ -1,3 +1,6 @@
+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 { nextTick, reactive, watch } from "vue";
 import { connectState } from "./connect.mjs";
@@ -6,7 +9,9 @@ test("base", async () => {
   const state = createState(reactive({ value: {} }));
   const connectStore = connectState(state);
   class User {
-    name = "";
+    constructor() {
+      __publicField(this, "name", "");
+    }
     $setName(name) {
       this.name = name;
     }
@@ -32,7 +37,9 @@ test("base2", async () => {
   const state = createState(reactive({ value: {} }));
   const connectStore = connectState(state);
   class User {
-    name = "";
+    constructor() {
+      __publicField(this, "name", "");
+    }
     $setName(name) {
       this.name = name;
     }
@@ -56,7 +63,9 @@ test("watch root", async () => {
   const state = createState(reactive({ value: {} }));
   const connectStore = connectState(state);
   class User {
-    name = "";
+    constructor() {
+      __publicField(this, "name", "");
+    }
     $setName(name) {
       this.name = name;
     }

package/package.json

@@ -2,9 +2,27 @@
     "name": "@esmx/class-state",
     "template": "library",
     "license": "MIT",
+    "contributors": [
+        {
+            "name": "lzxb",
+            "url": "https://github.com/lzxb"
+        },
+        {
+            "name": "RockShi1994",
+            "url": "https://github.com/RockShi1994"
+        },
+        {
+            "name": "jerrychan7",
+            "url": "https://github.com/jerrychan7"
+        },
+        {
+            "name": "wesloong",
+            "url": "https://github.com/wesloong"
+        }
+    ],
     "scripts": {
         "lint:js": "biome check --write --no-errors-on-unmatched",
-        "lint:css": "stylelint '**/*.{css,vue}' --fix --aei",
+        "lint:css": "pnpm run lint:js",
         "lint:type": "tsc --noEmit",
         "test": "vitest run --pass-with-no-tests",
         "coverage": "vitest run --coverage --pass-with-no-tests",
@@ -14,18 +32,16 @@
         "immer": "^10.1.1"
     },
     "devDependencies": {
-        "@biomejs/biome": "1.9.4",
-        "@esmx/lint": "3.0.0-rc.10",
-        "@types/node": "22.13.10",
-        "@vitest/coverage-v8": "3.0.8",
-        "@vue/compiler-dom": "^3.5.13",
-        "stylelint": "16.15.0",
-        "typescript": "5.8.2",
-        "unbuild": "2.0.0",
-        "vitest": "3.0.8",
-        "vue": "^3.5.13"
+        "@biomejs/biome": "2.3.7",
+        "@types/node": "^24.0.0",
+        "@vitest/coverage-v8": "3.2.4",
+        "@vue/compiler-dom": "^3.5.23",
+        "typescript": "5.9.3",
+        "unbuild": "3.6.1",
+        "vitest": "3.2.4",
+        "vue": "^3.5.23"
     },
-    "version": "3.0.0-rc.10",
+    "version": "3.0.0-rc.104",
     "type": "module",
     "private": false,
     "exports": {
@@ -44,5 +60,5 @@
         "template",
         "public"
     ],
-    "gitHead": "4a528ffecfdc6f2c6e7d97bc952427745f467691"
+    "gitHead": "329b299f906e7b59ba909a23b6c96509405ced51"
 }

package/src/connect.test.ts

@@ -250,6 +250,8 @@ test('Multiple instances', () => {
     }
 
     const user = _connectStore(User, 'user');
+    // Create blog instance first before accessing it from user
+    const blog = _connectStore(Blog, 'blog');
 
     user.$setName('jack');
     user.blog.$setText('hello world.');

package/src/connect.ts

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-this-alias */
 import { produce } from 'immer';
 
-import { type State, type StateContext, getStateContext } from './create';
+import { getStateContext, type State, type StateContext } from './create';
 export type StoreParams = Record<string, any>;
 export type StoreConstructor = new (cacheKey?: string) => any;
 

package/src/index.ts

@@ -1,11 +1,11 @@
-export { createState, type State } from './create';
 export {
     connectState,
     foreignStore,
+    LIFE_CYCLE_CREATED,
+    LIFE_CYCLE_DISPOSE,
     type StoreConstructor,
     type StoreContext,
     type StoreInstance,
-    type StoreParams,
-    LIFE_CYCLE_CREATED,
-    LIFE_CYCLE_DISPOSE
+    type StoreParams
 } from './connect';
+export { createState, type State } from './create';