ccstate 2.0.0 → 2.2.0

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) {
@@ -1505,7 +1529,7 @@ function useSet(atom) {
   };
 }
 
-function useLoadable(atom) {
+function useLoadableInternal(atom, keepLastResolved) {
   var promise = useGet(atom);
   var _useState = react.useState({
       state: 'loading'
@@ -1516,39 +1540,11 @@ function useLoadable(atom) {
   react.useEffect(function () {
     var ctrl = new AbortController();
     var signal = ctrl.signal;
-    setPromiseResult({
-      state: 'loading'
-    });
-    void promise.then(function (ret) {
-      if (signal.aborted) return;
+    if (!keepLastResolved) {
       setPromiseResult({
-        state: 'hasData',
-        data: ret
+        state: 'loading'
       });
-    })["catch"](function (error) {
-      if (signal.aborted) return;
-      setPromiseResult({
-        state: 'hasError',
-        error: error
-      });
-    });
-    return function () {
-      ctrl.abort();
-    };
-  }, [promise]);
-  return promiseResult;
-}
-function useLastLoadable(atom) {
-  var promise = useGet(atom);
-  var _useState3 = react.useState({
-      state: 'loading'
-    }),
-    _useState4 = _slicedToArray(_useState3, 2),
-    promiseResult = _useState4[0],
-    setPromiseResult = _useState4[1];
-  react.useEffect(function () {
-    var ctrl = new AbortController();
-    var signal = ctrl.signal;
+    }
     void promise.then(function (ret) {
       if (signal.aborted) return;
       setPromiseResult({
@@ -1568,6 +1564,12 @@ function useLastLoadable(atom) {
   }, [promise]);
   return promiseResult;
 }
+function useLoadable(atom) {
+  return useLoadableInternal(atom, false);
+}
+function useLastLoadable(atom) {
+  return useLoadableInternal(atom, true);
+}
 
 function useResolved(atom) {
   var loadable = useLoadable(atom);
@@ -1585,6 +1587,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) {
@@ -1503,7 +1527,7 @@ function useSet(atom) {
   };
 }
 
-function useLoadable(atom) {
+function useLoadableInternal(atom, keepLastResolved) {
   var promise = useGet(atom);
   var _useState = useState({
       state: 'loading'
@@ -1514,39 +1538,11 @@ function useLoadable(atom) {
   useEffect(function () {
     var ctrl = new AbortController();
     var signal = ctrl.signal;
-    setPromiseResult({
-      state: 'loading'
-    });
-    void promise.then(function (ret) {
-      if (signal.aborted) return;
+    if (!keepLastResolved) {
       setPromiseResult({
-        state: 'hasData',
-        data: ret
+        state: 'loading'
       });
-    })["catch"](function (error) {
-      if (signal.aborted) return;
-      setPromiseResult({
-        state: 'hasError',
-        error: error
-      });
-    });
-    return function () {
-      ctrl.abort();
-    };
-  }, [promise]);
-  return promiseResult;
-}
-function useLastLoadable(atom) {
-  var promise = useGet(atom);
-  var _useState3 = useState({
-      state: 'loading'
-    }),
-    _useState4 = _slicedToArray(_useState3, 2),
-    promiseResult = _useState4[0],
-    setPromiseResult = _useState4[1];
-  useEffect(function () {
-    var ctrl = new AbortController();
-    var signal = ctrl.signal;
+    }
     void promise.then(function (ret) {
       if (signal.aborted) return;
       setPromiseResult({
@@ -1566,6 +1562,12 @@ function useLastLoadable(atom) {
   }, [promise]);
   return promiseResult;
 }
+function useLoadable(atom) {
+  return useLoadableInternal(atom, false);
+}
+function useLastLoadable(atom) {
+  return useLoadableInternal(atom, true);
+}
 
 function useResolved(atom) {
   var loadable = useLoadable(atom);
@@ -1576,4 +1578,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.2.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",
@@ -22,7 +23,8 @@
   },
   "peerDependencies": {
     "@types/react": ">=17.0.0",
-    "react": ">=17.0.0"
+    "react": ">=17.0.0",
+    "vue": ">=3.2.0"
   },
   "peerDependenciesMeta": {
     "@types/react": {
@@ -30,6 +32,9 @@
     },
     "react": {
       "optional": true
+    },
+    "vue": {
+      "optional": true
     }
   }
 }

package/react/index.cjs

@@ -105,7 +105,7 @@ function useSet(atom) {
   };
 }
 
-function useLoadable(atom) {
+function useLoadableInternal(atom, keepLastResolved) {
   var promise = useGet(atom);
   var _useState = react.useState({
       state: 'loading'
@@ -116,39 +116,11 @@ function useLoadable(atom) {
   react.useEffect(function () {
     var ctrl = new AbortController();
     var signal = ctrl.signal;
-    setPromiseResult({
-      state: 'loading'
-    });
-    void promise.then(function (ret) {
-      if (signal.aborted) return;
-      setPromiseResult({
-        state: 'hasData',
-        data: ret
-      });
-    })["catch"](function (error) {
-      if (signal.aborted) return;
+    if (!keepLastResolved) {
       setPromiseResult({
-        state: 'hasError',
-        error: error
+        state: 'loading'
       });
-    });
-    return function () {
-      ctrl.abort();
-    };
-  }, [promise]);
-  return promiseResult;
-}
-function useLastLoadable(atom) {
-  var promise = useGet(atom);
-  var _useState3 = react.useState({
-      state: 'loading'
-    }),
-    _useState4 = _slicedToArray(_useState3, 2),
-    promiseResult = _useState4[0],
-    setPromiseResult = _useState4[1];
-  react.useEffect(function () {
-    var ctrl = new AbortController();
-    var signal = ctrl.signal;
+    }
     void promise.then(function (ret) {
       if (signal.aborted) return;
       setPromiseResult({
@@ -168,6 +140,12 @@ function useLastLoadable(atom) {
   }, [promise]);
   return promiseResult;
 }
+function useLoadable(atom) {
+  return useLoadableInternal(atom, false);
+}
+function useLastLoadable(atom) {
+  return useLoadableInternal(atom, true);
+}
 
 function useResolved(atom) {
   var loadable = useLoadable(atom);

package/react/index.js

@@ -103,7 +103,7 @@ function useSet(atom) {
   };
 }
 
-function useLoadable(atom) {
+function useLoadableInternal(atom, keepLastResolved) {
   var promise = useGet(atom);
   var _useState = useState({
       state: 'loading'
@@ -114,39 +114,11 @@ function useLoadable(atom) {
   useEffect(function () {
     var ctrl = new AbortController();
     var signal = ctrl.signal;
-    setPromiseResult({
-      state: 'loading'
-    });
-    void promise.then(function (ret) {
-      if (signal.aborted) return;
-      setPromiseResult({
-        state: 'hasData',
-        data: ret
-      });
-    })["catch"](function (error) {
-      if (signal.aborted) return;
+    if (!keepLastResolved) {
       setPromiseResult({
-        state: 'hasError',
-        error: error
+        state: 'loading'
       });
-    });
-    return function () {
-      ctrl.abort();
-    };
-  }, [promise]);
-  return promiseResult;
-}
-function useLastLoadable(atom) {
-  var promise = useGet(atom);
-  var _useState3 = useState({
-      state: 'loading'
-    }),
-    _useState4 = _slicedToArray(_useState3, 2),
-    promiseResult = _useState4[0],
-    setPromiseResult = _useState4[1];
-  useEffect(function () {
-    var ctrl = new AbortController();
-    var signal = ctrl.signal;
+    }
     void promise.then(function (ret) {
       if (signal.aborted) return;
       setPromiseResult({
@@ -166,6 +138,12 @@ function useLastLoadable(atom) {
   }, [promise]);
   return promiseResult;
 }
+function useLoadable(atom) {
+  return useLoadableInternal(atom, false);
+}
+function useLastLoadable(atom) {
+  return useLoadableInternal(atom, true);
+}
 
 function useResolved(atom) {
   var loadable = useLoadable(atom);

package/vue/index.cjs

@@ -0,0 +1,71 @@
+'use strict';
+
+var vue = require('vue');
+
+var StoreKey = Symbol('ccstate-vue-store');
+var provideStore = function provideStore(store) {
+  vue.provide(StoreKey, store);
+};
+var useStore = function useStore() {
+  var store = vue.inject(StoreKey);
+  if (store === undefined) {
+    throw new Error('Store context not found - did you forget to wrap your app with StoreProvider?');
+  }
+  return store;
+};
+
+var globalId = 0;
+var generateToString = function generateToString(prefix, debugLabel) {
+  var id = globalId++;
+  var label = "".concat(prefix).concat(String(id)).concat('');
+  return function () {
+    return label;
+  };
+};
+function command(write, options) {
+  var ret = {
+    write: write,
+    toString: generateToString('F')
+  };
+  return ret;
+}
+
+function useGet(atom) {
+  var store = useStore();
+  var initialValue = store.get(atom);
+  var vueState = vue.shallowRef(initialValue);
+  var controller = new AbortController();
+  store.sub(atom, command(function () {
+    var nextValue = store.get(atom);
+    vueState.value = nextValue;
+  }), {
+    signal: controller.signal
+  });
+  if (vue.getCurrentInstance()) {
+    vue.onScopeDispose(function () {
+      controller.abort();
+    });
+  }
+  return vue.shallowReadonly(vueState);
+}
+
+function useSet(atom) {
+  var store = useStore();
+  if ('write' in atom) {
+    return function () {
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      var ret = store.set.apply(store, [atom].concat(args));
+      return ret;
+    };
+  }
+  return function (value) {
+    store.set(atom, value);
+  };
+}
+
+exports.provideStore = provideStore;
+exports.useGet = useGet;
+exports.useSet = useSet;
+exports.useStore = useStore;