From 84502b41907316431c911f6f2ab9d432c7327065 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=89=8D=E7=AB=AF=E5=AD=90=E9=B1=BC?= Date: Mon, 26 Feb 2024 16:10:47 +0800 Subject: [PATCH] fix: svelte 5 mount/hydrate api change. (#10224) --- .changeset/smart-jobs-care.md | 5 +++++ packages/integrations/svelte/client-v5.js | 10 ++++++---- packages/integrations/svelte/package.json | 2 +- 3 files changed, 12 insertions(+), 5 deletions(-) create mode 100644 .changeset/smart-jobs-care.md diff --git a/.changeset/smart-jobs-care.md b/.changeset/smart-jobs-care.md new file mode 100644 index 000000000000..d0da72ac6ebc --- /dev/null +++ b/.changeset/smart-jobs-care.md @@ -0,0 +1,5 @@ +--- +"@astrojs/svelte": minor +--- + +Bumps Svelte 5 peer dependency to `^5.0.0-next.56` and support its latest breaking changes diff --git a/packages/integrations/svelte/client-v5.js b/packages/integrations/svelte/client-v5.js index eaa06974c242..819363d5e0f1 100644 --- a/packages/integrations/svelte/client-v5.js +++ b/packages/integrations/svelte/client-v5.js @@ -1,11 +1,11 @@ -import { mount } from 'svelte'; +import { hydrate, mount, unmount } from 'svelte'; import { add_snippet_symbol } from 'svelte/internal'; // Allow a slot to be rendered as a snippet (dev validation only) const tagSlotAsSnippet = import.meta.env.DEV ? add_snippet_symbol : (s) => s; export default (element) => { - return async (Component, props, slotted) => { + return async (Component, props, slotted, { client }) => { if (!element.hasAttribute('ssr')) return; let children = undefined; @@ -19,7 +19,9 @@ export default (element) => { } } - const [, destroy] = mount(Component, { + const bootstrap = client !== 'only' ? hydrate : mount; + + const component = bootstrap(Component, { target: element, props: { ...props, @@ -28,7 +30,7 @@ export default (element) => { }, }); - element.addEventListener('astro:unmount', () => destroy(), { once: true }); + element.addEventListener('astro:unmount', () => unmount(component), { once: true }); }; }; diff --git a/packages/integrations/svelte/package.json b/packages/integrations/svelte/package.json index 28d78bf29422..1976f8fa6bee 100644 --- a/packages/integrations/svelte/package.json +++ b/packages/integrations/svelte/package.json @@ -53,7 +53,7 @@ }, "peerDependencies": { "astro": "^4.0.0", - "svelte": "^4.0.0 || ^5.0.0-next.1" + "svelte": "^4.0.0 || ^5.0.0-next.56" }, "engines": { "node": ">=18.14.1"