feat(svelte): allow dynamic Store instance

docs/framework/svelte/reference/functions/shallow.md

@@ -11,7 +11,7 @@ title: shallow
 function shallow<T>(objA, objB): boolean
 ```
 
-Defined in: [index.svelte.ts:43](https://github.com/TanStack/store/blob/main/packages/svelte-store/src/index.svelte.ts#L43)
+Defined in: [index.svelte.ts:50](https://github.com/TanStack/store/blob/main/packages/svelte-store/src/index.svelte.ts#L50)
 
 ## Type Parameters
 

docs/framework/svelte/reference/functions/usestore.md

@@ -13,7 +13,7 @@ title: useStore
 function useStore<TState, TSelected>(store, selector?): object
 ```
 
-Defined in: [index.svelte.ts:10](https://github.com/TanStack/store/blob/main/packages/svelte-store/src/index.svelte.ts#L10)
+Defined in: [index.svelte.ts:12](https://github.com/TanStack/store/blob/main/packages/svelte-store/src/index.svelte.ts#L12)
 
 ### Type Parameters
 
@@ -25,7 +25,7 @@ Defined in: [index.svelte.ts:10](https://github.com/TanStack/store/blob/main/pac
 
 #### store
 
-`Store`\<`TState`, `any`\>
+`MaybeGetter`\<`Store`\<`TState`, `any`\>\>
 
 #### selector?
 
@@ -47,7 +47,7 @@ readonly current: TSelected;
 function useStore<TState, TSelected>(store, selector?): object
 ```
 
-Defined in: [index.svelte.ts:14](https://github.com/TanStack/store/blob/main/packages/svelte-store/src/index.svelte.ts#L14)
+Defined in: [index.svelte.ts:16](https://github.com/TanStack/store/blob/main/packages/svelte-store/src/index.svelte.ts#L16)
 
 ### Type Parameters
 
@@ -59,7 +59,7 @@ Defined in: [index.svelte.ts:14](https://github.com/TanStack/store/blob/main/pac
 
 #### store
 
-`Derived`\<`TState`, `any`\>
+`MaybeGetter`\<`Derived`\<`TState`, `any`\>\>
 
 #### selector?
 

packages/svelte-store/src/index.svelte.ts

@@ -7,23 +7,26 @@ export * from '@tanstack/store'
  */
 export type NoInfer<T> = [T][T extends any ? 0 : never]
 
+type MaybeGetter<T> = T | (() => T)
+
 export function useStore<TState, TSelected = NoInfer<TState>>(
-  store: Store<TState, any>,
+  store: MaybeGetter<Store<TState, any>>,
   selector?: (state: NoInfer<TState>) => TSelected,
 ): { readonly current: TSelected }
 export function useStore<TState, TSelected = NoInfer<TState>>(
-  store: Derived<TState, any>,
+  store: MaybeGetter<Derived<TState, any>>,
   selector?: (state: NoInfer<TState>) => TSelected,
 ): { readonly current: TSelected }
 export function useStore<TState, TSelected = NoInfer<TState>>(
-  store: Store<TState, any> | Derived<TState, any>,
+  store: MaybeGetter<Store<TState, any>> | MaybeGetter<Derived<TState, any>>,
   selector: (state: NoInfer<TState>) => TSelected = (d) => d as any,
 ): { readonly current: TSelected } {
-  let slice = $state(selector(store.state))
+  let slice = $state(selector(toValue(store).state))
 
   $effect(() => {
-    const unsub = store.subscribe(() => {
-      const data = selector(store.state)
+    const actualStore = toValue(store)
+    const unsub = actualStore.subscribe(() => {
+      const data = selector(actualStore.state)
       if (shallow(slice, data)) {
         return
       }
@@ -40,6 +43,10 @@ export function useStore<TState, TSelected = NoInfer<TState>>(
   }
 }
 
+function toValue<T>(store: T | (() => T)): T {
+  return typeof store === 'function' ? (store as () => T)() : store
+}
+
 export function shallow<T>(objA: T, objB: T) {
   if (Object.is(objA, objB)) {
     return true

packages/svelte-store/tests/DynamicStore.test.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import { Store } from '@tanstack/store'
+  import { useStore } from '../src/index.svelte.js'
+
+  function createStore(count: number) {
+    return new Store({ count })
+  }
+
+  let store = $state(createStore(0))
+
+  const storeVal = useStore(
+    () => store,
+    (state) => state.count,
+  )
+</script>
+
+<p>Store: {storeVal.current}</p>
+<button onclick={() => (store = createStore(10))}>Update store</button>

packages/svelte-store/tests/index.test.ts

@@ -3,6 +3,7 @@ import { render, waitFor } from '@testing-library/svelte'
 import { userEvent } from '@testing-library/user-event'
 import { shallow } from '../src/index.svelte.js'
 import TestBaseStore from './BaseStore.test.svelte'
+import DynamicStore from './DynamicStore.test.svelte'
 import TestRerender from './Render.test.svelte'
 
 const user = userEvent.setup()
@@ -26,6 +27,14 @@ describe('useStore', () => {
     await user.click(getByText('Update ignored'))
     expect(getByText('Number rendered: 2')).toBeInTheDocument()
   })
+
+  it('allows us to use a dynamic store', async () => {
+    const { getByText } = render(DynamicStore)
+    expect(getByText('Store: 0')).toBeInTheDocument()
+
+    await user.click(getByText('Update store'))
+    await waitFor(() => expect(getByText('Store: 10')).toBeInTheDocument())
+  })
 })
 
 describe('shallow', () => {