diff --git a/.changeset/fast-points-leave.md b/.changeset/fast-points-leave.md new file mode 100644 index 000000000..8ba4fa38f --- /dev/null +++ b/.changeset/fast-points-leave.md @@ -0,0 +1,5 @@ +--- +"@uppy/svelte": patch +--- + +Fix props reactivity. Now when the value of a prop you pass to a component changes, it is actually picked up. diff --git a/examples/sveltekit/src/components/test/props-reactivity.svelte b/examples/sveltekit/src/components/test/props-reactivity.svelte new file mode 100644 index 000000000..ea4847214 --- /dev/null +++ b/examples/sveltekit/src/components/test/props-reactivity.svelte @@ -0,0 +1,23 @@ + + +
+ + + +
+ +
+
diff --git a/examples/sveltekit/test/index.test.ts b/examples/sveltekit/test/index.test.ts index 077064907..3c33fd04b 100644 --- a/examples/sveltekit/test/index.test.ts +++ b/examples/sveltekit/test/index.test.ts @@ -1,6 +1,7 @@ import { userEvent } from '@vitest/browser/context' import { describe, expect, test } from 'vitest' import { render } from 'vitest-browser-svelte' +import PropsReactivity from '../src/components/test/props-reactivity.svelte' import App from '../src/routes/+page.svelte' const createMockFile = (name: string, type: string, size: number = 1024) => { @@ -124,3 +125,27 @@ describe('RemoteSource Component', () => { await expect.element(loginButton).toBeInTheDocument() }) }) + +test('Dashboard reacts to prop changes', async () => { + const screen = render(PropsReactivity) + const toggleButton = screen.getByText('Toggle dashboard') + const dashboard = screen.container.querySelector('.uppy-Dashboard') + + expect(dashboard).toBeTruthy() + expect(dashboard?.ariaDisabled).toEqual('false') + await userEvent.click(toggleButton) + expect(dashboard?.ariaDisabled).toEqual('true') +}) + +test('StatusBar reacts to prop changes', async () => { + const screen = render(PropsReactivity) + const toggleButton = screen.getByText('Toggle statusbar') + + expect( + screen.container.querySelector('#statusbar-container .uppy-c-btn-primary'), + ).toBeVisible() + await userEvent.click(toggleButton) + expect( + screen.container.querySelector('#statusbar-container .uppy-c-btn-primary'), + ).toEqual(null) +}) diff --git a/packages/@uppy/svelte/src/lib/components/Dashboard.svelte b/packages/@uppy/svelte/src/lib/components/Dashboard.svelte index e9d61f98f..7b501b29b 100644 --- a/packages/@uppy/svelte/src/lib/components/Dashboard.svelte +++ b/packages/@uppy/svelte/src/lib/components/Dashboard.svelte @@ -40,7 +40,7 @@ $: { ...props, target: container, } satisfies DashboardOptions; - uppy.setOptions(options); + plugin?.setOptions(options); } diff --git a/packages/@uppy/svelte/src/lib/components/DashboardModal.svelte b/packages/@uppy/svelte/src/lib/components/DashboardModal.svelte index 475d119b0..e3ae3d4ad 100644 --- a/packages/@uppy/svelte/src/lib/components/DashboardModal.svelte +++ b/packages/@uppy/svelte/src/lib/components/DashboardModal.svelte @@ -42,7 +42,7 @@ $: { ...props, target: container, } satisfies DashboardOptions; - uppy.setOptions(options); + plugin?.setOptions(options); } $: { if (open && !lastOpen) { diff --git a/packages/@uppy/svelte/src/lib/components/StatusBar.svelte b/packages/@uppy/svelte/src/lib/components/StatusBar.svelte index e47870e55..714e297e4 100644 --- a/packages/@uppy/svelte/src/lib/components/StatusBar.svelte +++ b/packages/@uppy/svelte/src/lib/components/StatusBar.svelte @@ -35,7 +35,7 @@ $: { ...props, target: container, } satisfies StatusBarOptions; - uppy.setOptions(options); + plugin?.setOptions(options); }