diff options
4 files changed, 25 insertions, 3 deletions
diff --git a/.changeset/eight-monkeys-hammer.md b/.changeset/eight-monkeys-hammer.md new file mode 100644 index 000000000..b5ce51a31 --- /dev/null +++ b/.changeset/eight-monkeys-hammer.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Removes a warning in Svelte hydrated components diff --git a/packages/astro/src/compiler/codegen/index.ts b/packages/astro/src/compiler/codegen/index.ts index 05a45c35b..b8d6c1f76 100644 --- a/packages/astro/src/compiler/codegen/index.ts +++ b/packages/astro/src/compiler/codegen/index.ts @@ -30,6 +30,8 @@ const traverse: typeof babelTraverse.default = (babelTraverse.default as any).de const babelGenerator: typeof _babelGenerator = _babelGenerator.default; const { transformSync } = esbuild; +const hydrationDirectives = new Set(['client:load', 'client:idle', 'client:visible', 'client:media']); + interface Attribute { start: number; end: number; @@ -55,8 +57,6 @@ function findHydrationAttributes(attrs: Record<string, string>): HydrationAttrib let method: HydrationAttributes['method']; let value: undefined | string; - const hydrationDirectives = new Set(['client:load', 'client:idle', 'client:visible', 'client:media']); - for (const [key, val] of Object.entries(attrs)) { if (hydrationDirectives.has(key)) { method = key.slice(7) as HydrationAttributes['method']; @@ -155,7 +155,9 @@ function getTextFromAttribute(attr: any): string { function generateAttributes(attrs: Record<string, string>): string { let result = '{'; for (const [key, val] of Object.entries(attrs)) { - if (key.startsWith('...')) { + if (hydrationDirectives.has(key)) { + continue; + } else if (key.startsWith('...')) { result += key + ','; } else { result += JSON.stringify(key) + ':' + val + ','; diff --git a/packages/astro/test/astro-components.test.js b/packages/astro/test/astro-components.test.js index cea0b426f..aae0598b7 100644 --- a/packages/astro/test/astro-components.test.js +++ b/packages/astro/test/astro-components.test.js @@ -39,4 +39,10 @@ Components('Still throws an error for undefined components', async ({ runtime }) assert.equal(result.statusCode, 500); }); +Components('Svelte component', async ({ runtime }) => { + const result = await runtime.load('/client'); + const html = result.contents; + assert.ok(!/"client:load": true/.test(html), 'Client attrs not added'); +}); + Components.run(); diff --git a/packages/astro/test/fixtures/astro-components/src/pages/client.astro b/packages/astro/test/fixtures/astro-components/src/pages/client.astro new file mode 100644 index 000000000..eb1c2abf2 --- /dev/null +++ b/packages/astro/test/fixtures/astro-components/src/pages/client.astro @@ -0,0 +1,9 @@ +--- +import SvelteComponent from '../components/Component.svelte'; +--- +<html> +<head><title>Components</title></head> +<body> + <SvelteComponent client:load /> +</body> +</html> |