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?= <mwc@foxmail.com>
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"