zustic 1.0.0 → 1.0.1

package/dist/index.d.mts

@@ -1,3 +1,7 @@
+type CreateParamsType<T> = (set: (partial: Partial<T> | ((state: T) => Partial<T>)) => void, get: () => T) => T;
+type SetSateParams<T> = Partial<T> | ((state: T) => Partial<T>);
+type Middleware<T> = (set: (partial: SetSateParams<T>) => void, get: () => T) => (next: (partial: SetSateParams<T>) => void) => (partial: SetSateParams<T>) => void;
+
 /**
  * Create a store with state and actions.
  *
@@ -13,7 +17,7 @@
  *   count: 1,
  *   inc: () => set((state) => ({ count: state.count + 1 })),
  *   dec: () => set((state) => ({ count: state.count - 1 })),
- * })));
+ * }));
  *
  * // In a React component:
  * const Counter = () => {
@@ -28,9 +32,19 @@
  * }
  * ```
  *
+ * Example of Middleware
+ * ```
+ * const logger = <T extends object>(): Middleware<T> => (set, get) => (next) => async (partial) => {
+ *     console.log('prev:', get());
+ *     await next(partial);
+ *     console.log('next:', get());
+ * };
+ *
+ * ```
+ *
  * @param initializer Function that receives `set` and returns the initial state object.
  * @returns A hook that provides access to the store state and actions.
  */
-declare function create<T extends object>(initializer: (set: (partial: Partial<T> | ((state: T) => Partial<T>)) => void) => T): () => T;
+declare function create<T extends object>(initializer: CreateParamsType<T>, middlewares?: Middleware<T>[]): () => T;
 
-export { create };
+export { type Middleware, create };

package/dist/index.d.ts

@@ -1,3 +1,7 @@
+type CreateParamsType<T> = (set: (partial: Partial<T> | ((state: T) => Partial<T>)) => void, get: () => T) => T;
+type SetSateParams<T> = Partial<T> | ((state: T) => Partial<T>);
+type Middleware<T> = (set: (partial: SetSateParams<T>) => void, get: () => T) => (next: (partial: SetSateParams<T>) => void) => (partial: SetSateParams<T>) => void;
+
 /**
  * Create a store with state and actions.
  *
@@ -13,7 +17,7 @@
  *   count: 1,
  *   inc: () => set((state) => ({ count: state.count + 1 })),
  *   dec: () => set((state) => ({ count: state.count - 1 })),
- * })));
+ * }));
  *
  * // In a React component:
  * const Counter = () => {
@@ -28,9 +32,19 @@
  * }
  * ```
  *
+ * Example of Middleware
+ * ```
+ * const logger = <T extends object>(): Middleware<T> => (set, get) => (next) => async (partial) => {
+ *     console.log('prev:', get());
+ *     await next(partial);
+ *     console.log('next:', get());
+ * };
+ *
+ * ```
+ *
  * @param initializer Function that receives `set` and returns the initial state object.
  * @returns A hook that provides access to the store state and actions.
  */
-declare function create<T extends object>(initializer: (set: (partial: Partial<T> | ((state: T) => Partial<T>)) => void) => T): () => T;
+declare function create<T extends object>(initializer: CreateParamsType<T>, middlewares?: Middleware<T>[]): () => T;
 
-export { create };
+export { type Middleware, create };

package/dist/index.js

@@ -39,7 +39,7 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 var import_react = require("react");
-function create(initializer) {
+function create(initializer, middlewares = []) {
   let state;
   let listeners = [];
   const setState = (partial) => {
@@ -47,19 +47,26 @@ function create(initializer) {
     state = __spreadValues(__spreadValues({}, state), partialState);
     listeners.forEach((l) => l());
   };
-  state = initializer(setState);
+  const getState = () => state;
+  const setStateWithMiddleware = applyMiddleware(setState, getState, middlewares);
+  state = initializer(setStateWithMiddleware, getState);
   const subscribe = (listener) => {
     listeners.push(listener);
     return () => {
       listeners = listeners.filter((l) => l !== listener);
     };
   };
-  const getSnapshot = () => state;
-  return function useStore() {
-    const snapshot = (0, import_react.useSyncExternalStore)(subscribe, getSnapshot);
-    return snapshot;
-  };
+  return () => (0, import_react.useSyncExternalStore)(subscribe, getState);
 }
+var applyMiddleware = (set, get, middlewares) => {
+  if (!middlewares || middlewares.length === 0) {
+    return set;
+  }
+  return middlewares.reduceRight(
+    (next, mw) => mw(set, get)(next),
+    set
+  );
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   create

package/dist/index.mjs

@@ -18,7 +18,7 @@ var __spreadValues = (a, b) => {
 
 // src/index.ts
 import { useSyncExternalStore } from "react";
-function create(initializer) {
+function create(initializer, middlewares = []) {
   let state;
   let listeners = [];
   const setState = (partial) => {
@@ -26,19 +26,26 @@ function create(initializer) {
     state = __spreadValues(__spreadValues({}, state), partialState);
     listeners.forEach((l) => l());
   };
-  state = initializer(setState);
+  const getState = () => state;
+  const setStateWithMiddleware = applyMiddleware(setState, getState, middlewares);
+  state = initializer(setStateWithMiddleware, getState);
   const subscribe = (listener) => {
     listeners.push(listener);
     return () => {
       listeners = listeners.filter((l) => l !== listener);
     };
   };
-  const getSnapshot = () => state;
-  return function useStore() {
-    const snapshot = useSyncExternalStore(subscribe, getSnapshot);
-    return snapshot;
-  };
+  return () => useSyncExternalStore(subscribe, getState);
 }
+var applyMiddleware = (set, get, middlewares) => {
+  if (!middlewares || middlewares.length === 0) {
+    return set;
+  }
+  return middlewares.reduceRight(
+    (next, mw) => mw(set, get)(next),
+    set
+  );
+};
 export {
   create
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zustic",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A fast, minimal state management solution for React ecosystems. Works seamlessly with React, Next.js, and React Native, offering predictable state updates with a tiny footprint.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",