From da754b7fa44e75868cc1ec6d351151edc6b92b76 Mon Sep 17 00:00:00 2001
From: Merlijn Vos <merlijn@soverin.net>
Date: Wed, 1 Oct 2025 16:16:47 +0200
Subject: [PATCH] @uppy/svelte: fix props reactivity (#5991)

The fix in #5872 was not enough

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Fix props reactivity in Svelte components by updating plugin options
reactively and add example + tests validating Dashboard/StatusBar prop
changes.
>
> - **Svelte components (@uppy/svelte)**:
> - **Reactivity fix**: In `components/Dashboard.svelte`,
`DashboardModal.svelte`, and `StatusBar.svelte`, switch reactive updates
from `uppy.setOptions(...)` to `plugin?.setOptions(...)` to ensure
`props` changes are applied.
> - **Examples/Tests**:
> - Add `examples/sveltekit/src/components/test/props-reactivity.svelte`
demonstrating toggling `props` for `Dashboard` and `StatusBar`.
> - Extend `examples/sveltekit/test/index.test.ts` with tests verifying
Dashboard `ariaDisabled` toggles and StatusBar `hideUploadButton`
reactivity.
> - **Changeset**:
>   - Patch release for `"@uppy/svelte"` noting props reactivity fix.
>
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
5a9c4ef00f0cffbdb0d3de01a8fda929ec3e68c4. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->
---
 .changeset/fast-points-leave.md               |  5 ++++
 .../components/test/props-reactivity.svelte   | 23 +++++++++++++++++
 examples/sveltekit/test/index.test.ts         | 25 +++++++++++++++++++
 .../src/lib/components/Dashboard.svelte       |  2 +-
 .../src/lib/components/DashboardModal.svelte  |  2 +-
 .../src/lib/components/StatusBar.svelte       |  2 +-
 6 files changed, 56 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/fast-points-leave.md
 create mode 100644 examples/sveltekit/src/components/test/props-reactivity.svelte

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 @@
+<script lang="ts">
+import Uppy from '@uppy/core'
+import Dashboard from '@uppy/svelte/dashboard'
+import StatusBar from '@uppy/svelte/status-bar'
+
+import '@uppy/core/css/style.css'
+import '@uppy/dashboard/css/style.css'
+import '@uppy/status-bar/css/style.css'
+
+const uppy = new Uppy()
+uppy.addFile(new File(['hello world'], 'hello.txt'))
+let disabled = false
+let hideUploadButton = false
+</script>
+
+<main class="p-5 max-w-xl mx-auto">
+  <button onclick={() => (disabled = !disabled)}>Toggle dashboard</button>
+  <Dashboard props={{disabled: disabled}} uppy={uppy} />
+  <button onclick={() => (hideUploadButton = !hideUploadButton)}>Toggle statusbar</button>
+  <div id="statusbar-container">
+    <StatusBar props={{ hideUploadButton }} uppy={uppy} />
+  </div>
+</main>
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<M, B>;
-	uppy.setOptions(options);
+	plugin?.setOptions(options);
 }
 </script>
 
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<M, B>;
-	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);
 }
 </script>