ccstate-svelte 4.12.0 → 5.0.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # ccstate-svelte
 
+## 5.0.0
+
+### Major Changes
+
+- 2fdba09: feat: provide watch method to replace sub
+
+### Minor Changes
+
+- 52c52fd: refactor: remove defaultStore
+
+### Patch Changes
+
+- Updated dependencies [2fdba09]
+- Updated dependencies [52c52fd]
+  - ccstate@5.0.0
+
+## 4.13.0
+
+### Patch Changes
+
+- ccstate@4.13.0
+
 ## 4.12.0
 
 ### Patch Changes

package/dist/index.cjs

@@ -1,6 +1,5 @@
 'use strict';
 
-var ccstate = require('ccstate');
 var svelte = require('svelte');
 
 var StoreKey = Symbol('ccstate-svelte-store');
@@ -10,7 +9,7 @@ var provideStore = function provideStore(store) {
 var useStore = function useStore() {
   var store = svelte.getContext(StoreKey);
   if (!store) {
-    return ccstate.getDefaultStore();
+    throw new Error('useStore must be used within a StoreProvider');
   }
   return store;
 };
@@ -19,12 +18,15 @@ function useGet(atom) {
   var store = useStore();
   return {
     subscribe: function subscribe(fn) {
-      fn(store.get(atom));
-      return store.sub(atom, ccstate.command(function (_ref) {
-        var get = _ref.get;
-        var nextValue = get(atom);
-        fn(nextValue);
-      }));
+      var controller = new AbortController();
+      store.watch(function (get) {
+        fn(get(atom));
+      }, {
+        signal: controller.signal
+      });
+      return function () {
+        controller.abort();
+      };
     }
   };
 }

package/dist/index.js

@@ -1,4 +1,3 @@
-import { getDefaultStore, command } from 'ccstate';
 import { setContext, getContext } from 'svelte';
 
 var StoreKey = Symbol('ccstate-svelte-store');
@@ -8,7 +7,7 @@ var provideStore = function provideStore(store) {
 var useStore = function useStore() {
   var store = getContext(StoreKey);
   if (!store) {
-    return getDefaultStore();
+    throw new Error('useStore must be used within a StoreProvider');
   }
   return store;
 };
@@ -17,12 +16,15 @@ function useGet(atom) {
   var store = useStore();
   return {
     subscribe: function subscribe(fn) {
-      fn(store.get(atom));
-      return store.sub(atom, command(function (_ref) {
-        var get = _ref.get;
-        var nextValue = get(atom);
-        fn(nextValue);
-      }));
+      var controller = new AbortController();
+      store.watch(function (get) {
+        fn(get(atom));
+      }, {
+        signal: controller.signal
+      });
+      return function () {
+        controller.abort();
+      };
     }
   };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ccstate-svelte",
-  "version": "4.12.0",
+  "version": "5.0.0",
   "description": "CCState Svelte Hooks",
   "repository": {
     "type": "git",
@@ -17,7 +17,7 @@
     }
   },
   "dependencies": {
-    "ccstate": "^4.12.0"
+    "ccstate": "^5.0.0"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.26.0",
@@ -38,7 +38,7 @@
     "svelte": "^5.15.0",
     "vite": "^6.0.5",
     "vitest": "^2.1.8",
-    "ccstate": "^4.12.0"
+    "ccstate": "^5.0.0"
   },
   "scripts": {
     "build": "rollup -c",

package/src/__tests__/counter.test.ts

@@ -1,6 +1,6 @@
 import { render, cleanup, screen } from '@testing-library/svelte';
 import { afterEach, expect, it } from 'vitest';
-import { createStore, getDefaultStore } from 'ccstate';
+import { createStore } from 'ccstate';
 import '@testing-library/jest-dom/vitest';
 import App from './App.svelte';
 import { count$ } from './store';
@@ -13,10 +13,11 @@ afterEach(() => {
 const user = userEvent.setup();
 
 it('simple counter', async () => {
-  render(App);
+  const store = createStore();
+  render(App, { props: { store } });
 
   expect(screen.getByText('count: 0')).toBeInTheDocument();
-  getDefaultStore().set(count$, 1);
+  store.set(count$, 1);
 
   expect(await screen.findByText('count: 1')).toBeInTheDocument();
 
@@ -52,3 +53,9 @@ it('useStore custom store', async () => {
 
   expect(store.get(count$)).toBe(101);
 });
+
+it('should throw error when store is not provided', () => {
+  expect(() => {
+    render(App);
+  }).toThrowError('useStore must be used within a StoreProvider');
+});

package/src/__tests__/loadable.test.ts

@@ -1,6 +1,6 @@
 import { render, cleanup, screen } from '@testing-library/svelte';
 import { afterEach, expect, it } from 'vitest';
-import { createStore, getDefaultStore, state } from 'ccstate';
+import { createStore, state } from 'ccstate';
 import '@testing-library/jest-dom/vitest';
 import Loadable from './Loadable.svelte';
 import LastLoadable from './LastLoadable.svelte';
@@ -36,11 +36,13 @@ afterEach(() => {
 });
 
 it('simple loadable', async () => {
+  const store = createStore();
   const promise$ = state(Promise.resolve('bar'));
   render(Loadable, {
     props: {
       promise$: () => promise$,
     },
+    context: new Map([[StoreKey, store]]),
   });
 
   expect(screen.getByText('Loading')).toBeInTheDocument();
@@ -49,11 +51,13 @@ it('simple loadable', async () => {
 });
 
 it('error loadable', async () => {
+  const store = createStore();
   const promise$ = state(Promise.reject(new Error('INTEST')));
   render(Loadable, {
     props: {
       promise$: () => promise$,
     },
+    context: new Map([[StoreKey, store]]),
   });
 
   expect(screen.getByText('Loading')).toBeInTheDocument();
@@ -157,6 +161,7 @@ it('simple resolved', async () => {
     props: {
       promise$: () => promise$,
     },
+    context: new Map([[StoreKey, createStore()]]),
   });
 
   expect(screen.getByText('Loading')).toBeInTheDocument();
@@ -165,11 +170,13 @@ it('simple resolved', async () => {
 });
 
 it('simple last resolved', async () => {
+  const store = createStore();
   const promise$ = state(Promise.resolve('bar'));
   render(LastResolved, {
     props: {
       promise$: () => promise$,
     },
+    context: new Map([[StoreKey, store]]),
   });
 
   expect(screen.getByText('Loading')).toBeInTheDocument();
@@ -177,7 +184,7 @@ it('simple last resolved', async () => {
   expect(screen.getByText('Result: bar')).toBeInTheDocument();
 
   const deferred = makeDefered<string>();
-  getDefaultStore().set(promise$, deferred.promise);
+  store.set(promise$, deferred.promise);
   await expect(screen.findByText('Loading')).rejects.toThrow();
   deferred.resolve('second');
   expect(await screen.findByText('Result: second')).toBeInTheDocument();

package/src/__tests__/memory.test.ts

@@ -3,21 +3,23 @@ import '@testing-library/jest-dom/vitest';
 import LeakDetector from 'jest-leak-detector';
 import { render, cleanup, screen } from '@testing-library/svelte';
 import { expect, it } from 'vitest';
-import { computed, getDefaultStore, type Computed } from 'ccstate';
+import { computed, createStore, type Computed } from 'ccstate';
 import Memory from './Memory.svelte';
 import AsyncMemory from './AsyncMemory.svelte';
+import { StoreKey } from '../provider';
 
 it('should release memory after view cleanup', async () => {
   let obj$: Computed<{ foo: string }> | undefined = computed(() => {
     return { foo: 'bar' };
   });
-  const store = getDefaultStore();
+  const store = createStore();
   const leakDetector = new LeakDetector(store.get(obj$ as Computed<{ foo: string }>));
 
   render(Memory, {
     props: {
       obj$,
     },
+    context: new Map([[StoreKey, store]]),
   });
 
   expect(screen.getByText('obj: bar')).toBeInTheDocument();
@@ -32,13 +34,14 @@ it('should release promise memory after view cleanup', async () => {
   let obj$: Computed<Promise<{ foo: string }>> | undefined = computed(() => {
     return Promise.resolve({ foo: 'bar' });
   });
-  const store = getDefaultStore();
+  const store = createStore();
   const leakDetector = new LeakDetector(await store.get(obj$ as Computed<Promise<{ foo: string }>>));
 
   render(AsyncMemory, {
     props: {
       obj$: () => obj$ as Computed<Promise<{ foo: string }>>,
     },
+    context: new Map([[StoreKey, store]]),
   });
 
   expect(await screen.findByText('obj: bar')).toBeInTheDocument();

package/src/provider.ts

@@ -1,4 +1,3 @@
-import { getDefaultStore } from 'ccstate';
 import type { Store } from 'ccstate';
 import { getContext, setContext } from 'svelte';
 
@@ -12,7 +11,7 @@ export const useStore = (): Store => {
   const store = getContext(StoreKey);
 
   if (!store) {
-    return getDefaultStore();
+    throw new Error('useStore must be used within a StoreProvider');
   }
 
   return store as Store;

package/src/useGet.ts

@@ -1,19 +1,24 @@
 import { useStore } from './provider';
-import { command } from 'ccstate';
 import type { Computed, State } from 'ccstate';
 
 export function useGet<T>(atom: State<T> | Computed<T>) {
   const store = useStore();
   return {
     subscribe(fn: (payload: T) => void) {
-      fn(store.get(atom));
-      return store.sub(
-        atom,
-        command(({ get }) => {
-          const nextValue = get(atom);
-          fn(nextValue);
-        }),
+      const controller = new AbortController();
+
+      store.watch(
+        (get) => {
+          fn(get(atom));
+        },
+        {
+          signal: controller.signal,
+        },
       );
+
+      return () => {
+        controller.abort();
+      };
     },
   };
 }