ccstate 2.0.0 → 2.1.0

package/README.md

@@ -1,4 +1,6 @@
-# CCState
+<img src="https://github.com/user-attachments/assets/590797c8-6edf-45cc-8eae-028aef0b2cb3"  width="240" >
+
+---
 
 [![Coverage Status](https://coveralls.io/repos/github/e7h4n/ccstate/badge.svg?branch=main)](https://coveralls.io/github/e7h4n/ccstate?branch=main)
 ![NPM Type Definitions](https://img.shields.io/npm/types/ccstate)
@@ -8,17 +10,19 @@
 [![CodSpeed Badge](https://img.shields.io/endpoint?url=https://codspeed.io/badge.json)](https://codspeed.io/e7h4n/ccstate)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
+English | [中文](README-zh.md)
+
 CCState is a semantic, strict, and flexible state management library suitable for medium to large single-page applications with complex state management needs.
 
-The name CCState comes from its three basic data types: Computed, Command and State.
+The name of CCState comes from three basic data types: computed, command, and state.
 
 ## Quick Features
 
-- Simple API design with only 3 data types and 2 data operations
-- Strict test coverage with 100% branch coverage
-- Zero dependencies
-- Not bound to any UI library - can be used with React or Vanilla JS
-- High Performance
+- 💯 Simple & Intuitive: Crystal-clear API design with just 3 data types and 2 operations
+- ✅ Rock-solid Reliability: Comprehensive test coverage reaching 100% branch coverage
+- 🪶 Ultra-lightweight: Zero dependencies, only 500 lines of core code
+- 💡 Framework Agnostic: Seamlessly works with React, Vanilla JS, or any UI framework
+- 🚀 Blazing Fast: Optimized performance from day one, 2x-7x faster than Jotai across scenarios
 
 ## Getting Started
 
@@ -35,12 +39,12 @@ pnpm add ccstate
 yarn add ccstate
 ```
 
-### Create Atoms
+### Create Data
 
-Use `state` to create a simple value unit, and use `computed` to create a derived computation logic:
+Use `state` to store a simple value unit, and use `computed` to create a derived computation logic:
 
 ```ts
-// atom.js
+// data.js
 import { state, computed } from 'ccstate';
 
 export const userId$ = state('');
@@ -54,14 +58,14 @@ export const user$ = computed(async (get) => {
 });
 ```
 
-### Use Atoms in React
+### Use data in React
 
-Use `useGet` and `useSet` hooks in React to get/set atoms, and use `useResolved` to get Promise value.
+Use `useGet` and `useSet` hooks in React to get/set data, and use `useResolved` to get Promise value.
 
 ```jsx
 // App.js
 import { useGet, useSet, useResolved } from 'ccstate';
-import { userId$, user$ } from './atom';
+import { userId$, user$ } from './data';
 
 export default function App() {
   const userId = useGet(userId$);
@@ -114,7 +118,7 @@ Through these examples, you should have understood the basic usage of CCState. N
 
 ## Core APIs
 
-CCState is an atomic state management library that provides several simple concepts to help developers better manage application states. And it can be used as an external store to drive UI frameworks like React.
+CCState provides several simple concepts to help developers better manage application states. And it can be used as an external store to drive UI frameworks like React.
 
 ### State
 
@@ -137,7 +141,7 @@ store.set(callback$, () => {
 store.get(callback$)(); // console log 'awesome ccstate'
 ```
 
-These examples should be very easy to understand. You might notice a detail in the examples: all variables returned by `state` have a `$` suffix. This is a naming convention used to distinguish an Atom type from other regular types. Atom types must be accessed through the store's get/set methods, and since it's common to convert an Atom type to a regular type using get, the `$` suffix helps avoid naming conflicts.
+These examples should be very easy to understand. You might notice a detail in the examples: all variables returned by `state` have a `$` suffix. This is a naming convention used to distinguish an CCState data type from other regular types. CCState data types must be accessed through the store's get/set methods, and since it's common to convert an CCState data type to a regular type using get, the `$` suffix helps avoid naming conflicts.
 
 ### Store
 
@@ -153,7 +157,7 @@ const otherStore = createStore(); // another new Map()
 otherStore.get(count$); // anotherMap[$count] ?? $count.init, returns 0
 ```
 
-This should be easy to understand. If `Store` only needed to support `State` types, a simple Map would be sufficient. However, CCState needs to support two additional atomic types. Next, let's introduce `Computed`, CCState's reactive computation unit.
+This should be easy to understand. If `Store` only needed to support `State` types, a simple Map would be sufficient. However, CCState needs to support two additional data types. Next, let's introduce `Computed`, CCState's reactive computation unit.
 
 ### Computed
 
@@ -184,7 +188,7 @@ In most cases, side-effect free computation logic is extremely useful. They can
 
 ### Command
 
-`Command` is CCState's logic unit for organizing side effects. It has both `set` and `get` accessors from the store, allowing it to not only read other Atom values but also modify `State` or call other `Command`.
+`Command` is CCState's logic unit for organizing side effects. It has both `set` and `get` accessors from the store, allowing it to not only read other data types but also modify `State` or call other `Command`.
 
 ```typescript
 import { command, createStore } from 'ccstate';
@@ -303,18 +307,18 @@ All descendant components within the `StoreProvider` will use the provided store
 
 You can place the `StoreProvider` inside or outside of `StrictMode`; the functionality is the same.
 
-### Retrieving Atom Values
+### Retrieving Values
 
-The most basic usage is to use `useGet` to retrieve the value of an Atom.
+The most basic usage is to use `useGet` to retrieve the value from State or Computed.
 
 ```jsx
-// atoms/count.ts
+// data/count.ts
 import { state } from 'ccstate';
 export const count$ = state(0);
 
 // App.tsx
 import { useGet } from 'ccstate';
-import { count$ } from './atoms/count';
+import { count$ } from './data/count';
 
 function App() {
   const count = useGet(count$);
@@ -329,7 +333,7 @@ function App() {
 Two other useful hooks are available when dealing with `Promise` values. First, we introduce `useLoadable`.
 
 ```jsx
-// atoms/user.ts
+// data/user.ts
 import { computed } from 'ccstate';
 
 export const user$ = computed(async () => {
@@ -338,7 +342,7 @@ export const user$ = computed(async () => {
 
 // App.tsx
 import { useLoadable } from 'ccstate';
-import { user$ } from './atoms/user';
+import { user$ } from './data/user';
 
 function App() {
   const user_ = useLoadable(user$);
@@ -349,7 +353,7 @@ function App() {
 }
 ```
 
-`useLoadable` accepts an Atom that returns a `Promise` and wraps the result in a `Loadable` structure.
+`useLoadable` accepts Value/Computed that returns a `Promise` and wraps the result in a `Loadable` structure.
 
 ```typescript
 type Loadable<T> =
@@ -373,7 +377,7 @@ Another useful hook is `useResolved`, which always returns the resolved value of
 ```jsx
 // App.tsx
 import { useResolved } from 'ccstate';
-import { user$ } from './atoms/user';
+import { user$ } from './data/user';
 
 function App() {
   const user = useResolved(user$);
@@ -396,11 +400,11 @@ export function useResolved<T>(atom: State<Promise<T>> | Computed<Promise<T>>):
 
 ### useLastLoadable & useLastResolved
 
-In some scenarios, we want a refreshable Promise Atom to maintain its previous result during the refresh process instead of showing a loading state. CCState provides `useLastLoadable` and `useLastResolved` to achieve this functionality.
+In some scenarios, we want a refreshable Promise Computed to maintain its previous result during the refresh process instead of showing a loading state. CCState provides `useLastLoadable` and `useLastResolved` to achieve this functionality.
 
 ```jsx
 import { useLoadable } from 'ccstate';
-import { user$ } from './atoms/user';
+import { user$ } from './data/user';
 
 function App() {
   const user_ = useLastLoadable(user$); // Keep the previous result during new user$ request, without triggering loading state
@@ -413,14 +417,14 @@ function App() {
 
 `useLastResolved` behaves similarly - it always returns the last resolved value from a Promise Atom and won't reset to `undefined` when a new Promise is generated.
 
-### Updating Atom Values / Triggering Funcs
+### Updating State / Triggering Command
 
-The `useSet` hook can be used to update the value of an Atom. It returns a function equivalent to `store.set` when called.
+The `useSet` hook can be used to update the value of State, or trigger Command. It returns a function equivalent to `store.set` when called.
 
 ```jsx
 // App.tsx
 import { useSet } from 'ccstate';
-import { count$ } from './atoms/count';
+import { count$ } from './data/count';
 
 function App() {
   const setCount = useSet(count$);
@@ -429,9 +433,9 @@ function App() {
 }
 ```
 
-### Testing & Debugg
+### Testing & Debugging
 
-Testing Atoms should be as simple as testing a Map.
+Testing Value/Computed should be as simple as testing a Map.
 
 ```typescript
 // counter.test.ts
@@ -453,22 +457,12 @@ Here are some tips to help you better debug during testing.
 Use `ConsoleInterceptor` to log most store behaviors to the console during testing:
 
 ```typescript
-import { ConsoleInterceptor, createDebugStore, state, computed, command } from 'ccstate';
+import { createConsoleDebugStore, state, computed, command } from 'ccstate';
 
 const base$ = state(1, { debugLabel: 'base$' });
 const derived$ = computed((get) => get(base$) * 2);
 
-const interceptor = new ConsoleInterceptor([
-  {
-    target: base$,
-    actions: new Set(['set']), // will only log set actions
-  },
-  {
-    target: derived$, // will log all actions
-  },
-]);
-
-const store = createDebugStore(interceptor);
+const store = createConsoleDebugStore([base$, 'derived'], ['set', 'sub']); // log sub & set actions
 store.set(base$, 1); // console: SET [V0:base$] 1
 store.sub(
   derived$,
@@ -484,9 +478,9 @@ CCState is inspired by Jotai. While Jotai is a great state management solution t
 - Should reduce reactive capabilities, especially the `onMount` capability - the framework shouldn't provide this ability
 - Some implicit magic operations, especially Promise wrapping, make the application execution process less transparent
 
-To address these issues, I created CCState to express my thoughts on state management. Before detailing the differences from Jotai, we need to understand CCState's Atom types and subscription system.
+To address these issues, I created CCState to express my thoughts on state management. Before detailing the differences from Jotai, we need to understand CCState's data types and subscription system.
 
-### More Semantic Atom Types
+### More semantic data types
 
 Like Jotai, CCState is also an Atom State solution. However, unlike Jotai, CCState doesn't expose Raw Atom, instead dividing Atoms into three types:
 
@@ -507,7 +501,7 @@ export const userIdChange$ = command(({ get, set }) => {
 });
 
 // ...
-import { userId$, userIdChange$ } from './atoms';
+import { userId$, userIdChange$ } from './data';
 
 function setupPage() {
   const store = createStore();
@@ -556,7 +550,7 @@ export function App() {
 When designing CCState, we wanted the trigger points for value changes to be completely detached from React's Mount/Unmount lifecycle and completely decoupled from React's rendering behavior.
 
 ```jsx
-// atoms.js
+// data.js
 export const userId$ = state(0)
 export const init$ = command(({set}) => {
   const userId = // ... parse userId from location search
@@ -587,32 +581,6 @@ root.render(
 );
 ```
 
-## Practices
-
-### Naming
-
-Add the suffix `$` to atoms. Since we often need to get values from Atoms in many scenarios, adding the suffix after Atom can avoid naming conflicts.
-
-```typescript
-const count$ = state(0);
-const double$ = computed((get) => get(count$) * 2);
-const updateCount$ = command(({ get, set }, val) => {
-  set(count$, val);
-});
-
-// ...
-const count = get(count$) // will not conflict with normal value
-
-// in react component
-const updateCount = useSet(updateCount$) // Command suffix is useful for this
-
-return <button onClick={() => updateCount(10)}>update</button>
-```
-
-### Internal Atom
-
-Feel free to create internal Atom. Atom is very lightweight. Creating an Atom should be just like creating a variable. Atoms don't necessarily need to be persisted or defined in the top-level scope - it's perfectly fine to create Atoms inside closures or pass new Atoms through containers.
-
 ## Changelog & TODO
 
 [Changelog](packages/ccstate/CHANGELOG.md)

package/debug/index.cjs

@@ -1175,13 +1175,18 @@ var ConsoleInterceptor = /*#__PURE__*/_createClass(function ConsoleInterceptor(w
   _classCallCheck(this, ConsoleInterceptor);
   _defineProperty(this, "shouldLog", function (atom, action) {
     return _this.watches.some(function (watch) {
+      var atomMatched = false;
       if (typeof watch.target === 'string') {
-        return atom.toString().includes(watch.target);
+        atomMatched = atom.toString().includes(watch.target);
+      } else if (watch.target instanceof RegExp) {
+        atomMatched = watch.target.test(atom.toString());
+      } else {
+        atomMatched = watch.target === atom;
       }
-      if (watch.target instanceof RegExp) {
-        return watch.target.test(atom.toString());
+      if (!atomMatched) {
+        return false;
       }
-      return watch.target === atom && (!watch.actions || watch.actions.has(action));
+      return !watch.actions || watch.actions.has(action);
     });
   });
   _defineProperty(this, "get", function (atom$, fn) {
@@ -1256,6 +1261,25 @@ var ConsoleInterceptor = /*#__PURE__*/_createClass(function ConsoleInterceptor(w
   });
   this.watches = watches;
 });
+function createConsoleDebugStore(watches, defaultActions) {
+  var parsedWatches = watches.map(function (watch) {
+    if (typeof watch === 'string' || watch instanceof RegExp) {
+      return {
+        target: watch,
+        actions: defaultActions ? new Set(defaultActions) : undefined
+      };
+    }
+    if ('target' in watch) {
+      return watch;
+    }
+    return {
+      target: watch,
+      actions: defaultActions ? new Set(defaultActions) : undefined
+    };
+  });
+  var interceptor = new ConsoleInterceptor(parsedWatches);
+  return createDebugStore(interceptor);
+}
 
 var StoreEvent = /*#__PURE__*/function (_Event) {
   function StoreEvent(type, eventId, targetAtom, state, time, args, result) {
@@ -1422,6 +1446,7 @@ exports.ConsoleInterceptor = ConsoleInterceptor;
 exports.EventInterceptor = EventInterceptor;
 exports.GLOBAL_CCSTATE_INTERCEPED_KEY = GLOBAL_CCSTATE_INTERCEPED_KEY;
 exports.StoreEvent = StoreEvent;
+exports.createConsoleDebugStore = createConsoleDebugStore;
 exports.createDebugStore = createDebugStore;
 exports.nestedAtomToString = nestedAtomToString;
 exports.setupDevtoolsInterceptor = setupDevtoolsInterceptor;

package/debug/index.d.cts

@@ -94,6 +94,7 @@ declare class ConsoleInterceptor implements StoreInterceptor {
     unmount: <T>(atom$: State<T> | Computed<T>) => void;
     notify: <T>(callback$: CallbackFunc<T>, fn: () => T) => void;
 }
+declare function createConsoleDebugStore(watches: (AtomWatch | string | RegExp | State<unknown> | Computed<unknown> | Command<unknown, unknown[]>)[], defaultActions?: StoreEventType[]): DebugStore;
 
 declare class StoreEvent extends Event {
     readonly eventId: number;
@@ -130,4 +131,4 @@ interface DevToolsHookMessage {
 declare const GLOBAL_CCSTATE_INTERCEPED_KEY = "__CCSTATE_INTERCEPED__";
 declare function setupDevtoolsInterceptor(targetWindow: Window, signal?: AbortSignal): EventInterceptor;
 
-export { ConsoleInterceptor, type DebugStore, type DevToolsHookMessage, EventInterceptor, GLOBAL_CCSTATE_INTERCEPED_KEY, type PackedEventMessage, StoreEvent, type StoreEventType, type StoreInterceptor, createDebugStore, nestedAtomToString, setupDevtoolsInterceptor };
+export { ConsoleInterceptor, type DebugStore, type DevToolsHookMessage, EventInterceptor, GLOBAL_CCSTATE_INTERCEPED_KEY, type PackedEventMessage, StoreEvent, type StoreEventType, type StoreInterceptor, createConsoleDebugStore, createDebugStore, nestedAtomToString, setupDevtoolsInterceptor };

package/debug/index.d.ts

@@ -94,6 +94,7 @@ declare class ConsoleInterceptor implements StoreInterceptor {
     unmount: <T>(atom$: State<T> | Computed<T>) => void;
     notify: <T>(callback$: CallbackFunc<T>, fn: () => T) => void;
 }
+declare function createConsoleDebugStore(watches: (AtomWatch | string | RegExp | State<unknown> | Computed<unknown> | Command<unknown, unknown[]>)[], defaultActions?: StoreEventType[]): DebugStore;
 
 declare class StoreEvent extends Event {
     readonly eventId: number;
@@ -130,4 +131,4 @@ interface DevToolsHookMessage {
 declare const GLOBAL_CCSTATE_INTERCEPED_KEY = "__CCSTATE_INTERCEPED__";
 declare function setupDevtoolsInterceptor(targetWindow: Window, signal?: AbortSignal): EventInterceptor;
 
-export { ConsoleInterceptor, type DebugStore, type DevToolsHookMessage, EventInterceptor, GLOBAL_CCSTATE_INTERCEPED_KEY, type PackedEventMessage, StoreEvent, type StoreEventType, type StoreInterceptor, createDebugStore, nestedAtomToString, setupDevtoolsInterceptor };
+export { ConsoleInterceptor, type DebugStore, type DevToolsHookMessage, EventInterceptor, GLOBAL_CCSTATE_INTERCEPED_KEY, type PackedEventMessage, StoreEvent, type StoreEventType, type StoreInterceptor, createConsoleDebugStore, createDebugStore, nestedAtomToString, setupDevtoolsInterceptor };

package/debug/index.js

@@ -1173,13 +1173,18 @@ var ConsoleInterceptor = /*#__PURE__*/_createClass(function ConsoleInterceptor(w
   _classCallCheck(this, ConsoleInterceptor);
   _defineProperty(this, "shouldLog", function (atom, action) {
     return _this.watches.some(function (watch) {
+      var atomMatched = false;
       if (typeof watch.target === 'string') {
-        return atom.toString().includes(watch.target);
+        atomMatched = atom.toString().includes(watch.target);
+      } else if (watch.target instanceof RegExp) {
+        atomMatched = watch.target.test(atom.toString());
+      } else {
+        atomMatched = watch.target === atom;
       }
-      if (watch.target instanceof RegExp) {
-        return watch.target.test(atom.toString());
+      if (!atomMatched) {
+        return false;
       }
-      return watch.target === atom && (!watch.actions || watch.actions.has(action));
+      return !watch.actions || watch.actions.has(action);
     });
   });
   _defineProperty(this, "get", function (atom$, fn) {
@@ -1254,6 +1259,25 @@ var ConsoleInterceptor = /*#__PURE__*/_createClass(function ConsoleInterceptor(w
   });
   this.watches = watches;
 });
+function createConsoleDebugStore(watches, defaultActions) {
+  var parsedWatches = watches.map(function (watch) {
+    if (typeof watch === 'string' || watch instanceof RegExp) {
+      return {
+        target: watch,
+        actions: defaultActions ? new Set(defaultActions) : undefined
+      };
+    }
+    if ('target' in watch) {
+      return watch;
+    }
+    return {
+      target: watch,
+      actions: defaultActions ? new Set(defaultActions) : undefined
+    };
+  });
+  var interceptor = new ConsoleInterceptor(parsedWatches);
+  return createDebugStore(interceptor);
+}
 
 var StoreEvent = /*#__PURE__*/function (_Event) {
   function StoreEvent(type, eventId, targetAtom, state, time, args, result) {
@@ -1416,4 +1440,4 @@ function setupDevtoolsInterceptor(targetWindow, signal) {
   return interceptor;
 }
 
-export { ConsoleInterceptor, EventInterceptor, GLOBAL_CCSTATE_INTERCEPED_KEY, StoreEvent, createDebugStore, nestedAtomToString, setupDevtoolsInterceptor };
+export { ConsoleInterceptor, EventInterceptor, GLOBAL_CCSTATE_INTERCEPED_KEY, StoreEvent, createConsoleDebugStore, createDebugStore, nestedAtomToString, setupDevtoolsInterceptor };

package/index.cjs

@@ -1221,13 +1221,18 @@ var ConsoleInterceptor = /*#__PURE__*/_createClass(function ConsoleInterceptor(w
   _classCallCheck(this, ConsoleInterceptor);
   _defineProperty(this, "shouldLog", function (atom, action) {
     return _this.watches.some(function (watch) {
+      var atomMatched = false;
       if (typeof watch.target === 'string') {
-        return atom.toString().includes(watch.target);
+        atomMatched = atom.toString().includes(watch.target);
+      } else if (watch.target instanceof RegExp) {
+        atomMatched = watch.target.test(atom.toString());
+      } else {
+        atomMatched = watch.target === atom;
       }
-      if (watch.target instanceof RegExp) {
-        return watch.target.test(atom.toString());
+      if (!atomMatched) {
+        return false;
       }
-      return watch.target === atom && (!watch.actions || watch.actions.has(action));
+      return !watch.actions || watch.actions.has(action);
     });
   });
   _defineProperty(this, "get", function (atom$, fn) {
@@ -1302,6 +1307,25 @@ var ConsoleInterceptor = /*#__PURE__*/_createClass(function ConsoleInterceptor(w
   });
   this.watches = watches;
 });
+function createConsoleDebugStore(watches, defaultActions) {
+  var parsedWatches = watches.map(function (watch) {
+    if (typeof watch === 'string' || watch instanceof RegExp) {
+      return {
+        target: watch,
+        actions: defaultActions ? new Set(defaultActions) : undefined
+      };
+    }
+    if ('target' in watch) {
+      return watch;
+    }
+    return {
+      target: watch,
+      actions: defaultActions ? new Set(defaultActions) : undefined
+    };
+  });
+  var interceptor = new ConsoleInterceptor(parsedWatches);
+  return createDebugStore(interceptor);
+}
 
 var StoreEvent = /*#__PURE__*/function (_Event) {
   function StoreEvent(type, eventId, targetAtom, state, time, args, result) {
@@ -1585,6 +1609,7 @@ exports.StoreEvent = StoreEvent;
 exports.StoreProvider = StoreProvider;
 exports.command = command;
 exports.computed = computed;
+exports.createConsoleDebugStore = createConsoleDebugStore;
 exports.createDebugStore = createDebugStore;
 exports.createStore = createStore;
 exports.nestedAtomToString = nestedAtomToString;

package/index.d.cts

@@ -105,6 +105,7 @@ declare class ConsoleInterceptor implements StoreInterceptor {
     unmount: <T>(atom$: State<T> | Computed<T>) => void;
     notify: <T>(callback$: CallbackFunc<T>, fn: () => T) => void;
 }
+declare function createConsoleDebugStore(watches: (AtomWatch | string | RegExp | State<unknown> | Computed<unknown> | Command<unknown, unknown[]>)[], defaultActions?: StoreEventType[]): DebugStore;
 
 declare class StoreEvent extends Event {
     readonly eventId: number;
@@ -163,4 +164,4 @@ declare function useLastLoadable<T>(atom: State<Promise<T>> | Computed<Promise<T
 
 declare const StoreProvider: react.Provider<Store | null>;
 
-export { type Command, type Computed, ConsoleInterceptor, type DebugStore, type DevToolsHookMessage, EventInterceptor, GLOBAL_CCSTATE_INTERCEPED_KEY, type Getter, type PackedEventMessage, type Read, type Setter, type State, type Store, StoreEvent, type StoreEventType, type StoreInterceptor, StoreProvider, type Subscribe, type Updater, type Write, command, computed, createDebugStore, createStore, nestedAtomToString, setupDevtoolsInterceptor, state, useGet, useLastLoadable, useLastResolved, useLoadable, useResolved, useSet };
+export { type Command, type Computed, ConsoleInterceptor, type DebugStore, type DevToolsHookMessage, EventInterceptor, GLOBAL_CCSTATE_INTERCEPED_KEY, type Getter, type PackedEventMessage, type Read, type Setter, type State, type Store, StoreEvent, type StoreEventType, type StoreInterceptor, StoreProvider, type Subscribe, type Updater, type Write, command, computed, createConsoleDebugStore, createDebugStore, createStore, nestedAtomToString, setupDevtoolsInterceptor, state, useGet, useLastLoadable, useLastResolved, useLoadable, useResolved, useSet };

package/index.d.ts

@@ -105,6 +105,7 @@ declare class ConsoleInterceptor implements StoreInterceptor {
     unmount: <T>(atom$: State<T> | Computed<T>) => void;
     notify: <T>(callback$: CallbackFunc<T>, fn: () => T) => void;
 }
+declare function createConsoleDebugStore(watches: (AtomWatch | string | RegExp | State<unknown> | Computed<unknown> | Command<unknown, unknown[]>)[], defaultActions?: StoreEventType[]): DebugStore;
 
 declare class StoreEvent extends Event {
     readonly eventId: number;
@@ -163,4 +164,4 @@ declare function useLastLoadable<T>(atom: State<Promise<T>> | Computed<Promise<T
 
 declare const StoreProvider: react.Provider<Store | null>;
 
-export { type Command, type Computed, ConsoleInterceptor, type DebugStore, type DevToolsHookMessage, EventInterceptor, GLOBAL_CCSTATE_INTERCEPED_KEY, type Getter, type PackedEventMessage, type Read, type Setter, type State, type Store, StoreEvent, type StoreEventType, type StoreInterceptor, StoreProvider, type Subscribe, type Updater, type Write, command, computed, createDebugStore, createStore, nestedAtomToString, setupDevtoolsInterceptor, state, useGet, useLastLoadable, useLastResolved, useLoadable, useResolved, useSet };
+export { type Command, type Computed, ConsoleInterceptor, type DebugStore, type DevToolsHookMessage, EventInterceptor, GLOBAL_CCSTATE_INTERCEPED_KEY, type Getter, type PackedEventMessage, type Read, type Setter, type State, type Store, StoreEvent, type StoreEventType, type StoreInterceptor, StoreProvider, type Subscribe, type Updater, type Write, command, computed, createConsoleDebugStore, createDebugStore, createStore, nestedAtomToString, setupDevtoolsInterceptor, state, useGet, useLastLoadable, useLastResolved, useLoadable, useResolved, useSet };

package/index.js

@@ -1219,13 +1219,18 @@ var ConsoleInterceptor = /*#__PURE__*/_createClass(function ConsoleInterceptor(w
   _classCallCheck(this, ConsoleInterceptor);
   _defineProperty(this, "shouldLog", function (atom, action) {
     return _this.watches.some(function (watch) {
+      var atomMatched = false;
       if (typeof watch.target === 'string') {
-        return atom.toString().includes(watch.target);
+        atomMatched = atom.toString().includes(watch.target);
+      } else if (watch.target instanceof RegExp) {
+        atomMatched = watch.target.test(atom.toString());
+      } else {
+        atomMatched = watch.target === atom;
       }
-      if (watch.target instanceof RegExp) {
-        return watch.target.test(atom.toString());
+      if (!atomMatched) {
+        return false;
       }
-      return watch.target === atom && (!watch.actions || watch.actions.has(action));
+      return !watch.actions || watch.actions.has(action);
     });
   });
   _defineProperty(this, "get", function (atom$, fn) {
@@ -1300,6 +1305,25 @@ var ConsoleInterceptor = /*#__PURE__*/_createClass(function ConsoleInterceptor(w
   });
   this.watches = watches;
 });
+function createConsoleDebugStore(watches, defaultActions) {
+  var parsedWatches = watches.map(function (watch) {
+    if (typeof watch === 'string' || watch instanceof RegExp) {
+      return {
+        target: watch,
+        actions: defaultActions ? new Set(defaultActions) : undefined
+      };
+    }
+    if ('target' in watch) {
+      return watch;
+    }
+    return {
+      target: watch,
+      actions: defaultActions ? new Set(defaultActions) : undefined
+    };
+  });
+  var interceptor = new ConsoleInterceptor(parsedWatches);
+  return createDebugStore(interceptor);
+}
 
 var StoreEvent = /*#__PURE__*/function (_Event) {
   function StoreEvent(type, eventId, targetAtom, state, time, args, result) {
@@ -1576,4 +1600,4 @@ function useLastResolved(atom) {
   return loadable.state === 'hasData' ? loadable.data : undefined;
 }
 
-export { ConsoleInterceptor, EventInterceptor, GLOBAL_CCSTATE_INTERCEPED_KEY, StoreEvent, StoreProvider, command, computed, createDebugStore, createStore, nestedAtomToString, setupDevtoolsInterceptor, state, useGet, useLastLoadable, useLastResolved, useLoadable, useResolved, useSet };
+export { ConsoleInterceptor, EventInterceptor, GLOBAL_CCSTATE_INTERCEPED_KEY, StoreEvent, StoreProvider, command, computed, createConsoleDebugStore, createDebugStore, createStore, nestedAtomToString, setupDevtoolsInterceptor, state, useGet, useLastLoadable, useLastResolved, useLoadable, useResolved, useSet };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ccstate",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "CCState Core",
   "private": false,
   "repository": {
@@ -10,6 +10,7 @@
   "license": "MIT",
   "type": "module",
   "main": "./index.cjs",
+  "module": "./index.js",
   "exports": {
     ".": {
       "import": "./index.js",