zenon 0.1.0 → 1.1.0

package/README.md

@@ -1,23 +1,64 @@
+<h1 align="center">
+  <br>
+  <img src="https://github.com/ljlm0402/zenon/raw/images/logo.png" alt="Project Logo" width="800" />
+  <br>
+  <br>
+  zenon
+  <br>
+</h1>
+
+<h4 align="center">🦉 A minimalist, Zustand-inspired state manager for <b>Vue 3</b></h4>
+
+<p align ="center">
+    <a href="https://nodei.co/npm/zenon" target="_blank">
+    <img src="https://nodei.co/npm/zenon.png" alt="npm Info" />
+</a>
+
+</p>
+
 <p align="center">
-  <img width="800" src="https://github.com/ljlm0402/zenon/raw/images/logo.png" alt="zenon logo" />
+    <a href="http://npm.im/zenon" target="_blank">
+      <img src="https://img.shields.io/npm/v/zenon.svg" alt="npm Version" />
+    </a>
+    <a href="http://npm.im/zenon" target="_blank">
+      <img src="https://img.shields.io/github/v/release/ljlm0402/zenon" alt="npm Release Version" />
+    </a>
+    <a href="http://npm.im/zenon" target="_blank">
+      <img src="https://img.shields.io/npm/dm/zenon.svg" alt="npm Downloads" />
+    </a>
+    <a href="http://npm.im/zenon" target="_blank">
+      <img src="https://img.shields.io/npm/l/zenon.svg" alt="npm Package License" />
+    </a>
 </p>
 
-<h1 align="center">Zenon</h1>
-<p align="center">A minimalist, Zustand-inspired state manager for <b>Vue 3</b></p>
+<p align="center">
+  <a href="https://github.com/ljlm0402/zenon/stargazers" target="_blank">
+    <img src="https://img.shields.io/github/stars/ljlm0402/zenon" alt="github Stars" />
+  </a>
+  <a href="https://github.com/ljlm0402/zenon/network/members" target="_blank">
+    <img src="https://img.shields.io/github/forks/ljlm0402/zenon" alt="github Forks" />
+  </a>
+  <a href="https://github.com/ljlm0402/zenon/stargazers" target="_blank">
+    <img src="https://img.shields.io/github/contributors/ljlm0402/zenon" alt="github Contributors" />
+  </a>
+  <a href="https://github.com/ljlm0402/zenon/issues" target="_blank">
+    <img src="https://img.shields.io/github/issues/ljlm0402/zenon" alt="github Issues" />
+  </a>
+</p>
 
 ---
 
 ## ✨ Features
 
-- 🍃 <b>Vue 3</b> Composition API 전용
-- ⚡️ <b>Zustand와 거의 동일한 DX</b>: set/get/selector 모두 지원
-- 🧑‍💻 <b>TypeScript 친화적</b>: 타입 추론/분리/액션 모두 쉬움
-- 🚀 <b>초경량 & 심플</b>: 1-file store, 러닝커브 ZERO
-- 🧩 <b>부분구독(Selector)</b> 지원, 컴포넌트별 최적화 OK
-
----
+- 🍃 **Vue 3** Composition API only
+- ⚡️ **Almost identical DX to Zustand**: supports set/get/selector, middleware composition
+- 🧑‍💻 **TypeScript friendly**: easy type inference, separation, and actions
+- 🚀 **Lightweight & simple**: true 1-file store, ZERO learning curve
+- 🧩 **Selector-based partial subscription** supported for optimal component performance
+- 🧩 **Pluggable middleware support** (Logger, Persist, ... with compose or chain)
+- 🗂 **Full npm-style import/usage** (`import ... from "zenon"`, `"zenon/plugins"`, etc.)
 
-## 📦 설치
+## 💾 Installation
 
 ```bash
 pnpm add zenon
@@ -27,31 +68,38 @@ npm install zenon
 yarn add zenon
 ```
 
----
-
-## ⚡️ 기본 사용법
+## 📝 Usage Example
 
 ```ts
 // stores/counter.ts
-import { createStore } from "zenon";
+import { createStore, compose } from "zenon";
+import { withLogger, withPersist } from "zenon/plugins";
 
-type State = { count: number };
-type Actions = {
+type CounterState = { count: number };
+type CounterActions = {
   increase: () => void;
   reset: () => void;
 };
 
+const STORE_KEY = "zenon-counter";
+
+// Compose DX
 export const useCounter = () =>
-  createStore<State & Actions>((set, get) => ({
-    count: 0,
-    increase: () => set({ count: get().count + 1 }),
-    reset: () => set({ count: 0 }),
-  }));
+  createStore(
+    compose(
+      withLogger({ store: "counter", timestamp: true, expanded: true }),
+      withPersist<CounterState & CounterActions>(STORE_KEY, {
+        storage: window.sessionStorage,
+      })
+    )((set, get) => ({
+      count: 0,
+      increase: () => set({ count: get().count + 1 }, "increase"),
+      reset: () => set({ count: 0 }, "reset"),
+    }))
+  );
 ```
 
----
-
-## 🎯 컴포넌트에서 사용
+## 🎯 Comoponents Usage
 
 ```vue
 <template>
@@ -71,40 +119,54 @@ const { increase, reset } = store;
 </script>
 ```
 
----
+## 🧩 Middleware (Logger, Persist)
 
-## 🚦 Selector로 부분 구독
+- Compose or chain multiple plugins
+
+- Plugin entry: zenon/plugins
 
 ```ts
-const store = useCounter();
-const count = store.useSelector((s) => s.count); // count만 반응
-const double = store.useSelector((s) => s.count * 2); // 파생값도 OK
-```
+import { createStore, compose } from "zenon";
+import { withLogger, withPersist } from "zenon/plugins";
 
----
+// Compose style
+export const useCounter = () =>
+  createStore(
+    compose(
+      withLogger({ store: "counter" }),
+      withPersist("counter")
+    )((set, get) => ({
+      count: 0,
+      increase: () => set({ count: get().count + 1 }, "increase"),
+      reset: () => set({ count: 0 }, "reset"),
+    }))
+  );
+
+// Or chain style
+export const useCounter = () =>
+  createStore(
+    withLogger({ store: "counter" })(
+      withPersist("counter")((set, get) => ({
+        count: 0,
+        increase: () => set({ count: get().count + 1 }, "increase"),
+        reset: () => set({ count: 0 }, "reset"),
+      }))
+    )
+  );
+```
 
-## 🧑‍💻 타입 분리 예시
+## 🚦 Partial Subscription with Selector
 
 ```ts
-type UserState = { name: string; age: number };
-type UserActions = { setName: (name: string) => void };
-
-export const useUser = () =>
-  createStore<UserState & UserActions>((set, get) => ({
-    name: "아구몬",
-    age: 32,
-    setName: (name) => set({ name }),
-  }));
+const store = useCounter();
+const count = store.useSelector((s) => s.count); // Subscribe only to count
+const double = store.useSelector((s) => s.count * 2); // Derived value is also OK
 ```
 
----
-
 ## 📚 License
 
 MIT
 
----
-
 ## ⭐️ Star & Contribute
 
-아이디어, PR, 피드백 모두 환영합니다!
+Ideas, PRs, and feedback are all welcome!

package/dist/chunk-BOGWVDMK.mjs

@@ -0,0 +1,14 @@
+// src/utils/compose.ts
+function compose(...funcs) {
+  if (funcs.length === 0)
+    return (arg) => arg;
+  if (funcs.length === 1)
+    return funcs[0];
+  return funcs.reduce(
+    (a, b) => (...args) => a(b(...args))
+  );
+}
+
+export {
+  compose
+};

package/dist/chunk-CK67EZXJ.mjs

@@ -0,0 +1,35 @@
+// src/plugins/withPersist.ts
+function withPersist(key, options = {}) {
+  const storage = options.storage ?? (typeof window !== "undefined" ? window.localStorage : void 0);
+  return (initializer) => (set, get) => {
+    let initial = {};
+    if (storage) {
+      const saved = storage.getItem(key);
+      if (saved) {
+        try {
+          initial = { ...JSON.parse(saved) };
+        } catch {
+          initial = {};
+        }
+      }
+    }
+    const persistSet = (updater, actionName) => {
+      set(updater, actionName);
+      if (storage) {
+        try {
+          storage.setItem(key, JSON.stringify(get()));
+        } catch {
+        }
+      }
+    };
+    const store = initializer(persistSet, get);
+    Object.assign(store, initial);
+    if (storage)
+      storage.setItem(key, JSON.stringify(store));
+    return store;
+  };
+}
+
+export {
+  withPersist
+};

package/dist/chunk-POKXZH6S.mjs

@@ -0,0 +1,51 @@
+// src/plugins/withLogger.ts
+function pickValuesOnly(obj) {
+  const result = {};
+  for (const key in obj) {
+    if (typeof obj[key] !== "function" && typeof obj[key] !== "symbol") {
+      result[key] = obj[key];
+    }
+  }
+  return result;
+}
+function getTimeStamp() {
+  return (/* @__PURE__ */ new Date()).toLocaleTimeString();
+}
+function withLogger(options = {}) {
+  return (initializer) => (set, get) => {
+    const loggerSet = (updater, actionName) => {
+      if (!actionName)
+        return set(updater);
+      const prevState = pickValuesOnly({ ...get() });
+      set(updater, actionName);
+      const nextState = pickValuesOnly(get());
+      const action = {
+        type: actionName,
+        args: updater ? [updater] : [],
+        ...options.store && { store: options.store }
+      };
+      const title = `action \u{1F989} ${options.store ? `[${options.store}]` : ""} ${action.type} ${options.timestamp ? `@${getTimeStamp()}` : ""}`;
+      console[options.expanded ? "group" : "groupCollapsed"](
+        `%c${title}`,
+        "font-weight: bold; color: #42b883;"
+      );
+      console.log(
+        "%cprev state",
+        "font-weight: bold; color: grey;",
+        prevState
+      );
+      console.log("%caction", "font-weight: bold; color: #69B7FF;", action);
+      console.log(
+        "%cnext state",
+        "font-weight: bold; color: #4caf50;",
+        nextState
+      );
+      console.groupEnd();
+    };
+    return initializer(loggerSet, get);
+  };
+}
+
+export {
+  withLogger
+};

package/dist/chunk-ZJASNIW3.mjs

@@ -0,0 +1,17 @@
+// src/createStore.ts
+import { reactive, computed } from "vue";
+function createStore(initializer) {
+  const state = reactive({});
+  const set = (updater, _actionName) => {
+    Object.assign(state, updater);
+  };
+  const get = () => state;
+  const useSelector = (selector) => computed(() => selector(state));
+  const initial = initializer(set, get);
+  Object.assign(state, initial);
+  return Object.assign(state, { useSelector });
+}
+
+export {
+  createStore
+};

package/dist/createStore.d.mts

@@ -1,8 +1,18 @@
 import { ComputedRef } from 'vue';
 
+/*****************************************************************
+ * ZENON - Minimal Zustand-like State Manager for Vue 3
+ * (c) 2025-present AGUMON (https://github.com/ljlm0402/zenon)
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the project root for more information.
+ *
+ * Made with ❤️ by AGUMON 🦖
+ *****************************************************************/
+
 type StoreApi<T> = {
     get: () => T;
-    set: (updater: Partial<T>) => void;
+    set: (updater: Partial<T>, actionName?: string) => void;
     useSelector: <S>(selector: (state: T) => S) => ComputedRef<S>;
 };
 declare function createStore<T extends Record<string, any>>(initializer: (set: StoreApi<T>["set"], get: StoreApi<T>["get"]) => T): T & Pick<StoreApi<T>, "useSelector">;

package/dist/createStore.d.ts

@@ -1,8 +1,18 @@
 import { ComputedRef } from 'vue';
 
+/*****************************************************************
+ * ZENON - Minimal Zustand-like State Manager for Vue 3
+ * (c) 2025-present AGUMON (https://github.com/ljlm0402/zenon)
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the project root for more information.
+ *
+ * Made with ❤️ by AGUMON 🦖
+ *****************************************************************/
+
 type StoreApi<T> = {
     get: () => T;
-    set: (updater: Partial<T>) => void;
+    set: (updater: Partial<T>, actionName?: string) => void;
     useSelector: <S>(selector: (state: T) => S) => ComputedRef<S>;
 };
 declare function createStore<T extends Record<string, any>>(initializer: (set: StoreApi<T>["set"], get: StoreApi<T>["get"]) => T): T & Pick<StoreApi<T>, "useSelector">;

package/dist/createStore.js

@@ -26,13 +26,11 @@ module.exports = __toCommonJS(createStore_exports);
 var import_vue = require("vue");
 function createStore(initializer) {
   const state = (0, import_vue.reactive)({});
-  const set = (updater) => {
+  const set = (updater, _actionName) => {
     Object.assign(state, updater);
   };
   const get = () => state;
-  const useSelector = (selector) => {
-    return (0, import_vue.computed)(() => selector(state));
-  };
+  const useSelector = (selector) => (0, import_vue.computed)(() => selector(state));
   const initial = initializer(set, get);
   Object.assign(state, initial);
   return Object.assign(state, { useSelector });

package/dist/createStore.mjs

@@ -1,18 +1,6 @@
-// src/createStore.ts
-import { reactive, computed } from "vue";
-function createStore(initializer) {
-  const state = reactive({});
-  const set = (updater) => {
-    Object.assign(state, updater);
-  };
-  const get = () => state;
-  const useSelector = (selector) => {
-    return computed(() => selector(state));
-  };
-  const initial = initializer(set, get);
-  Object.assign(state, initial);
-  return Object.assign(state, { useSelector });
-}
+import {
+  createStore
+} from "./chunk-ZJASNIW3.mjs";
 export {
   createStore
 };

package/dist/index.d.mts

@@ -0,0 +1,3 @@
+export { createStore } from './createStore.mjs';
+export { compose } from './utils/compose.mjs';
+import 'vue';

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { createStore } from './createStore.js';
+export { compose } from './utils/compose.js';
+import 'vue';

package/dist/index.js

@@ -0,0 +1,56 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  compose: () => compose,
+  createStore: () => createStore
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/createStore.ts
+var import_vue = require("vue");
+function createStore(initializer) {
+  const state = (0, import_vue.reactive)({});
+  const set = (updater, _actionName) => {
+    Object.assign(state, updater);
+  };
+  const get = () => state;
+  const useSelector = (selector) => (0, import_vue.computed)(() => selector(state));
+  const initial = initializer(set, get);
+  Object.assign(state, initial);
+  return Object.assign(state, { useSelector });
+}
+
+// src/utils/compose.ts
+function compose(...funcs) {
+  if (funcs.length === 0)
+    return (arg) => arg;
+  if (funcs.length === 1)
+    return funcs[0];
+  return funcs.reduce(
+    (a, b) => (...args) => a(b(...args))
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  compose,
+  createStore
+});

package/dist/index.mjs

@@ -0,0 +1,10 @@
+import {
+  createStore
+} from "./chunk-ZJASNIW3.mjs";
+import {
+  compose
+} from "./chunk-BOGWVDMK.mjs";
+export {
+  compose,
+  createStore
+};

package/dist/plugins/index.d.mts

@@ -0,0 +1,2 @@
+export { withLogger } from './withLogger.mjs';
+export { withPersist } from './withPersist.mjs';

package/dist/plugins/index.d.ts

@@ -0,0 +1,2 @@
+export { withLogger } from './withLogger.js';
+export { withPersist } from './withPersist.js';

package/dist/plugins/index.js

@@ -0,0 +1,111 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/plugins/index.ts
+var plugins_exports = {};
+__export(plugins_exports, {
+  withLogger: () => withLogger,
+  withPersist: () => withPersist
+});
+module.exports = __toCommonJS(plugins_exports);
+
+// src/plugins/withLogger.ts
+function pickValuesOnly(obj) {
+  const result = {};
+  for (const key in obj) {
+    if (typeof obj[key] !== "function" && typeof obj[key] !== "symbol") {
+      result[key] = obj[key];
+    }
+  }
+  return result;
+}
+function getTimeStamp() {
+  return (/* @__PURE__ */ new Date()).toLocaleTimeString();
+}
+function withLogger(options = {}) {
+  return (initializer) => (set, get) => {
+    const loggerSet = (updater, actionName) => {
+      if (!actionName)
+        return set(updater);
+      const prevState = pickValuesOnly({ ...get() });
+      set(updater, actionName);
+      const nextState = pickValuesOnly(get());
+      const action = {
+        type: actionName,
+        args: updater ? [updater] : [],
+        ...options.store && { store: options.store }
+      };
+      const title = `action \u{1F989} ${options.store ? `[${options.store}]` : ""} ${action.type} ${options.timestamp ? `@${getTimeStamp()}` : ""}`;
+      console[options.expanded ? "group" : "groupCollapsed"](
+        `%c${title}`,
+        "font-weight: bold; color: #42b883;"
+      );
+      console.log(
+        "%cprev state",
+        "font-weight: bold; color: grey;",
+        prevState
+      );
+      console.log("%caction", "font-weight: bold; color: #69B7FF;", action);
+      console.log(
+        "%cnext state",
+        "font-weight: bold; color: #4caf50;",
+        nextState
+      );
+      console.groupEnd();
+    };
+    return initializer(loggerSet, get);
+  };
+}
+
+// src/plugins/withPersist.ts
+function withPersist(key, options = {}) {
+  const storage = options.storage ?? (typeof window !== "undefined" ? window.localStorage : void 0);
+  return (initializer) => (set, get) => {
+    let initial = {};
+    if (storage) {
+      const saved = storage.getItem(key);
+      if (saved) {
+        try {
+          initial = { ...JSON.parse(saved) };
+        } catch {
+          initial = {};
+        }
+      }
+    }
+    const persistSet = (updater, actionName) => {
+      set(updater, actionName);
+      if (storage) {
+        try {
+          storage.setItem(key, JSON.stringify(get()));
+        } catch {
+        }
+      }
+    };
+    const store = initializer(persistSet, get);
+    Object.assign(store, initial);
+    if (storage)
+      storage.setItem(key, JSON.stringify(store));
+    return store;
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  withLogger,
+  withPersist
+});

package/dist/plugins/index.mjs

@@ -0,0 +1,10 @@
+import {
+  withLogger
+} from "../chunk-POKXZH6S.mjs";
+import {
+  withPersist
+} from "../chunk-CK67EZXJ.mjs";
+export {
+  withLogger,
+  withPersist
+};

package/dist/plugins/withLogger.d.mts

@@ -0,0 +1,7 @@
+declare function withLogger<T extends Record<string, any>>(options?: {
+    store?: string;
+    timestamp?: boolean;
+    expanded?: boolean;
+}): (initializer: (set: (updater: Partial<T>, actionName?: string) => void, get: () => T) => T) => (set: (updater: Partial<T>, actionName?: string) => void, get: () => T) => T;
+
+export { withLogger };

package/dist/plugins/withLogger.d.ts

@@ -0,0 +1,7 @@
+declare function withLogger<T extends Record<string, any>>(options?: {
+    store?: string;
+    timestamp?: boolean;
+    expanded?: boolean;
+}): (initializer: (set: (updater: Partial<T>, actionName?: string) => void, get: () => T) => T) => (set: (updater: Partial<T>, actionName?: string) => void, get: () => T) => T;
+
+export { withLogger };

package/dist/plugins/withLogger.js

@@ -0,0 +1,75 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/plugins/withLogger.ts
+var withLogger_exports = {};
+__export(withLogger_exports, {
+  withLogger: () => withLogger
+});
+module.exports = __toCommonJS(withLogger_exports);
+function pickValuesOnly(obj) {
+  const result = {};
+  for (const key in obj) {
+    if (typeof obj[key] !== "function" && typeof obj[key] !== "symbol") {
+      result[key] = obj[key];
+    }
+  }
+  return result;
+}
+function getTimeStamp() {
+  return (/* @__PURE__ */ new Date()).toLocaleTimeString();
+}
+function withLogger(options = {}) {
+  return (initializer) => (set, get) => {
+    const loggerSet = (updater, actionName) => {
+      if (!actionName)
+        return set(updater);
+      const prevState = pickValuesOnly({ ...get() });
+      set(updater, actionName);
+      const nextState = pickValuesOnly(get());
+      const action = {
+        type: actionName,
+        args: updater ? [updater] : [],
+        ...options.store && { store: options.store }
+      };
+      const title = `action \u{1F989} ${options.store ? `[${options.store}]` : ""} ${action.type} ${options.timestamp ? `@${getTimeStamp()}` : ""}`;
+      console[options.expanded ? "group" : "groupCollapsed"](
+        `%c${title}`,
+        "font-weight: bold; color: #42b883;"
+      );
+      console.log(
+        "%cprev state",
+        "font-weight: bold; color: grey;",
+        prevState
+      );
+      console.log("%caction", "font-weight: bold; color: #69B7FF;", action);
+      console.log(
+        "%cnext state",
+        "font-weight: bold; color: #4caf50;",
+        nextState
+      );
+      console.groupEnd();
+    };
+    return initializer(loggerSet, get);
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  withLogger
+});

package/dist/plugins/withLogger.mjs

@@ -0,0 +1,6 @@
+import {
+  withLogger
+} from "../chunk-POKXZH6S.mjs";
+export {
+  withLogger
+};

package/dist/plugins/withPersist.d.mts

@@ -0,0 +1,5 @@
+declare function withPersist<T extends Record<string, any>>(key: string, options?: {
+    storage?: Storage;
+}): (initializer: (set: (updater: Partial<T>, actionName?: string) => void, get: () => T) => T) => (set: (updater: Partial<T>, actionName?: string) => void, get: () => T) => T;
+
+export { withPersist };

package/dist/plugins/withPersist.d.ts

@@ -0,0 +1,5 @@
+declare function withPersist<T extends Record<string, any>>(key: string, options?: {
+    storage?: Storage;
+}): (initializer: (set: (updater: Partial<T>, actionName?: string) => void, get: () => T) => T) => (set: (updater: Partial<T>, actionName?: string) => void, get: () => T) => T;
+
+export { withPersist };

package/dist/plugins/withPersist.js

@@ -0,0 +1,59 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/plugins/withPersist.ts
+var withPersist_exports = {};
+__export(withPersist_exports, {
+  withPersist: () => withPersist
+});
+module.exports = __toCommonJS(withPersist_exports);
+function withPersist(key, options = {}) {
+  const storage = options.storage ?? (typeof window !== "undefined" ? window.localStorage : void 0);
+  return (initializer) => (set, get) => {
+    let initial = {};
+    if (storage) {
+      const saved = storage.getItem(key);
+      if (saved) {
+        try {
+          initial = { ...JSON.parse(saved) };
+        } catch {
+          initial = {};
+        }
+      }
+    }
+    const persistSet = (updater, actionName) => {
+      set(updater, actionName);
+      if (storage) {
+        try {
+          storage.setItem(key, JSON.stringify(get()));
+        } catch {
+        }
+      }
+    };
+    const store = initializer(persistSet, get);
+    Object.assign(store, initial);
+    if (storage)
+      storage.setItem(key, JSON.stringify(store));
+    return store;
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  withPersist
+});

package/dist/plugins/withPersist.mjs

@@ -0,0 +1,6 @@
+import {
+  withPersist
+} from "../chunk-CK67EZXJ.mjs";
+export {
+  withPersist
+};

package/dist/utils/compose.d.mts

@@ -0,0 +1,3 @@
+declare function compose(...funcs: Function[]): Function;
+
+export { compose };

package/dist/utils/compose.d.ts

@@ -0,0 +1,3 @@
+declare function compose(...funcs: Function[]): Function;
+
+export { compose };

package/dist/{create.js → utils/compose.js}

@@ -17,24 +17,22 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/create.ts
-var create_exports = {};
-__export(create_exports, {
-  create: () => create
+// src/utils/compose.ts
+var compose_exports = {};
+__export(compose_exports, {
+  compose: () => compose
 });
-module.exports = __toCommonJS(create_exports);
-var import_vue = require("vue");
-function create(initializer) {
-  const state = (0, import_vue.reactive)({});
-  const set = (updater) => {
-    Object.assign(state, updater);
-  };
-  const get = () => state;
-  const initial = initializer(set, get);
-  Object.assign(state, initial);
-  return (0, import_vue.readonly)(state);
+module.exports = __toCommonJS(compose_exports);
+function compose(...funcs) {
+  if (funcs.length === 0)
+    return (arg) => arg;
+  if (funcs.length === 1)
+    return funcs[0];
+  return funcs.reduce(
+    (a, b) => (...args) => a(b(...args))
+  );
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  create
+  compose
 });

package/dist/utils/compose.mjs

@@ -0,0 +1,6 @@
+import {
+  compose
+} from "../chunk-BOGWVDMK.mjs";
+export {
+  compose
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zenon",
-  "version": "0.1.0",
+  "version": "1.1.0",
   "description": "A minimalist Zustand-inspired state manager for Vue 3",
   "author": "AGUMON <ljlm0402@gmail.com>",
   "license": "MIT",
@@ -21,6 +21,16 @@
       "import": "./dist/zenon.es.js",
       "require": "./dist/zenon.cjs.js",
       "types": "./dist/index.d.ts"
+    },
+    "./plugins": {
+      "import": "./dist/plugins/index.js",
+      "require": "./dist/plugins/index.js",
+      "types": "./dist/plugins/index.d.ts"
+    },
+    "./utils/compose": {
+      "import": "./dist/utils/compose.js",
+      "require": "./dist/utils/compose.js",
+      "types": "./dist/utils/compose.d.ts"
     }
   },
   "files": [
@@ -28,7 +38,7 @@
   ],
   "scripts": {
     "dev": "vite",
-    "build": "tsup src/createStore.ts --format cjs,esm --dts",
+    "build": "tsup --config tsup.config.ts",
     "prepare": "pnpm build"
   },
   "devDependencies": {
@@ -41,5 +51,16 @@
   },
   "peerDependencies": {
     "vue": "^3.2.0"
-  }
+  },
+  "directories": {
+    "example": "examples"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ljlm0402/zenon.git"
+  },
+  "bugs": {
+    "url": "https://github.com/ljlm0402/zenon/issues"
+  },
+  "homepage": "https://github.com/ljlm0402/zenon#readme"
 }

package/dist/create.d.mts

@@ -1,7 +0,0 @@
-type StoreApi<T> = {
-    get: () => T;
-    set: (updater: Partial<T>) => void;
-};
-declare function create<T extends Record<string, any>>(initializer: (set: StoreApi<T>["set"], get: StoreApi<T>["get"]) => T): Readonly<T>;
-
-export { type StoreApi, create };

package/dist/create.d.ts

@@ -1,7 +0,0 @@
-type StoreApi<T> = {
-    get: () => T;
-    set: (updater: Partial<T>) => void;
-};
-declare function create<T extends Record<string, any>>(initializer: (set: StoreApi<T>["set"], get: StoreApi<T>["get"]) => T): Readonly<T>;
-
-export { type StoreApi, create };

package/dist/create.mjs

@@ -1,15 +0,0 @@
-// src/create.ts
-import { reactive, readonly } from "vue";
-function create(initializer) {
-  const state = reactive({});
-  const set = (updater) => {
-    Object.assign(state, updater);
-  };
-  const get = () => state;
-  const initial = initializer(set, get);
-  Object.assign(state, initial);
-  return readonly(state);
-}
-export {
-  create
-};