diff --git a/.changeset/nice-jeans-sniff.md b/.changeset/nice-jeans-sniff.md new file mode 100644 index 000000000..5f033505e --- /dev/null +++ b/.changeset/nice-jeans-sniff.md @@ -0,0 +1,5 @@ +--- +"@uppy/svelte": patch +--- + +Fix only capturing the initial value of `uppy` in `UppyContextProvider` diff --git a/packages/@uppy/svelte/src/lib/components/headless/UppyContextProvider.svelte b/packages/@uppy/svelte/src/lib/components/headless/UppyContextProvider.svelte index f19b9a6fd..11142bf5a 100644 --- a/packages/@uppy/svelte/src/lib/components/headless/UppyContextProvider.svelte +++ b/packages/@uppy/svelte/src/lib/components/headless/UppyContextProvider.svelte @@ -14,12 +14,18 @@ export type { UppyContext } from "@uppy/components"; let { uppy, children } = $props() - // Create a single reactive context object - const contextValue: UppyContext = $state({ - uppy, - status: 'init' as UploadStatus, - progress: 0, - }) + // Create reactive state for properties of the context + let status = $state('init' as UploadStatus) + let progress = $state(0) + + // Create a single context object, with some reactive properties + const contextValue: UppyContext = { + get uppy() { return uppy }, + get status() { return status }, + set status(value) { status = value }, + get progress() { return progress }, + set progress(value) { progress = value }, + } onMount(() => { if (!uppy) { @@ -29,10 +35,10 @@ export type { UppyContext } from "@uppy/components"; const uppyEventAdapter = createUppyEventAdapter({ uppy, onStatusChange: (newStatus: UploadStatus) => { - contextValue.status = newStatus + status = newStatus }, onProgressChange: (newProgress: number) => { - contextValue.progress = newProgress + progress = newProgress }, })