From fdb47349807e505c01e78ca01d20ca7ea12460f1 Mon Sep 17 00:00:00 2001 From: wobsoriano Date: Sun, 18 May 2025 13:05:51 -0700 Subject: [PATCH 1/2] feat(vue): Allow dynamic Store instance --- packages/vue-store/src/index.ts | 14 ++++++------- packages/vue-store/tests/index.test.tsx | 28 ++++++++++++++++++++++++- 2 files changed, 34 insertions(+), 8 deletions(-) diff --git a/packages/vue-store/src/index.ts b/packages/vue-store/src/index.ts index 0d3dfaaf..5c2f61be 100644 --- a/packages/vue-store/src/index.ts +++ b/packages/vue-store/src/index.ts @@ -1,6 +1,6 @@ -import { readonly, ref, toRaw, watch } from 'vue-demi' +import { readonly, ref, toRaw, toValue, watch } from 'vue-demi' import type { Derived, Store } from '@tanstack/store' -import type { Ref } from 'vue-demi' +import type { MaybeRefOrGetter, Ref } from 'vue-demi' export * from '@tanstack/store' @@ -10,21 +10,21 @@ export * from '@tanstack/store' export type NoInfer = [T][T extends any ? 0 : never] export function useStore>( - store: Store, + store: MaybeRefOrGetter>, selector?: (state: NoInfer) => TSelected, ): Readonly> export function useStore>( - store: Derived, + store: MaybeRefOrGetter>, selector?: (state: NoInfer) => TSelected, ): Readonly> export function useStore>( - store: Store | Derived, + store: MaybeRefOrGetter> | MaybeRefOrGetter>, selector: (state: NoInfer) => TSelected = (d) => d as any, ): Readonly> { - const slice = ref(selector(store.state)) as Ref + const slice = ref(selector(toValue(store).state)) watch( - () => store, + () => toValue(store), (value, _oldValue, onCleanup) => { const unsub = value.subscribe(() => { const data = selector(value.state) diff --git a/packages/vue-store/tests/index.test.tsx b/packages/vue-store/tests/index.test.tsx index cca51b63..33dcf23e 100644 --- a/packages/vue-store/tests/index.test.tsx +++ b/packages/vue-store/tests/index.test.tsx @@ -1,6 +1,6 @@ import { describe, expect, it, test, vi } from 'vitest' // @ts-expect-error We need to import `h` as it's part of Vue's JSX transform -import { defineComponent, h } from 'vue-demi' +import { defineComponent, h, ref } from 'vue-demi' import { render, waitFor } from '@testing-library/vue' import { Store } from '@tanstack/store' import { userEvent } from '@testing-library/user-event' @@ -79,6 +79,32 @@ describe('useStore', () => { await user.click(getByText('Update ignored')) expect(getByText('Number rendered: 2')).toBeInTheDocument() }) + + it('allows us to use a dynamic store', async () => { + function createStore(count: number) { + return new Store({ count }) + } + + const Comp = defineComponent(() => { + const store = ref(createStore(0)) + const storeVal = useStore(store, (state) => state.count) + + return () => { + return ( +
+

Store: {storeVal.value}

+ +
+ ) + } + }) + + const { getByText } = render(Comp) + expect(getByText('Store: 0')).toBeInTheDocument() + + await user.click(getByText('Update store')) + await waitFor(() => expect(getByText('Store: 10')).toBeInTheDocument()) + }) }) describe('shallow', () => { From 4785f0666a880058e5917d37a3b5b939246fc04c Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Sun, 18 May 2025 20:06:47 +0000 Subject: [PATCH 2/2] ci: apply automated fixes and generate docs --- docs/framework/vue/reference/functions/shallow.md | 2 +- docs/framework/vue/reference/functions/usestore.md | 4 ++-- packages/vue-store/src/index.ts | 4 +++- packages/vue-store/tests/index.test.tsx | 4 +++- 4 files changed, 9 insertions(+), 5 deletions(-) diff --git a/docs/framework/vue/reference/functions/shallow.md b/docs/framework/vue/reference/functions/shallow.md index 11cc076d..66b191b7 100644 --- a/docs/framework/vue/reference/functions/shallow.md +++ b/docs/framework/vue/reference/functions/shallow.md @@ -11,7 +11,7 @@ title: shallow function shallow(objA, objB): boolean ``` -Defined in: [index.ts:47](https://github.com/TanStack/store/blob/main/packages/vue-store/src/index.ts#L47) +Defined in: [index.ts:49](https://github.com/TanStack/store/blob/main/packages/vue-store/src/index.ts#L49) ## Type Parameters diff --git a/docs/framework/vue/reference/functions/usestore.md b/docs/framework/vue/reference/functions/usestore.md index 59c67731..9b15651e 100644 --- a/docs/framework/vue/reference/functions/usestore.md +++ b/docs/framework/vue/reference/functions/usestore.md @@ -25,7 +25,7 @@ Defined in: [index.ts:12](https://github.com/TanStack/store/blob/main/packages/v #### store -`Store`\<`TState`, `any`\> +`MaybeRefOrGetter`\<`Store`\<`TState`, `any`\>\> #### selector? @@ -53,7 +53,7 @@ Defined in: [index.ts:16](https://github.com/TanStack/store/blob/main/packages/v #### store -`Derived`\<`TState`, `any`\> +`MaybeRefOrGetter`\<`Derived`\<`TState`, `any`\>\> #### selector? diff --git a/packages/vue-store/src/index.ts b/packages/vue-store/src/index.ts index 5c2f61be..313dbc52 100644 --- a/packages/vue-store/src/index.ts +++ b/packages/vue-store/src/index.ts @@ -18,7 +18,9 @@ export function useStore>( selector?: (state: NoInfer) => TSelected, ): Readonly> export function useStore>( - store: MaybeRefOrGetter> | MaybeRefOrGetter>, + store: + | MaybeRefOrGetter> + | MaybeRefOrGetter>, selector: (state: NoInfer) => TSelected = (d) => d as any, ): Readonly> { const slice = ref(selector(toValue(store).state)) diff --git a/packages/vue-store/tests/index.test.tsx b/packages/vue-store/tests/index.test.tsx index 33dcf23e..63848ad8 100644 --- a/packages/vue-store/tests/index.test.tsx +++ b/packages/vue-store/tests/index.test.tsx @@ -93,7 +93,9 @@ describe('useStore', () => { return (

Store: {storeVal.value}

- +
) }