From d8cebb0132cab8bfffc6851d2e656a9985bbeddf Mon Sep 17 00:00:00 2001 From: Matthew Phillips Date: Tue, 27 Jul 2021 16:01:15 -0400 Subject: [PATCH] Prevent client: attributes from being passed to components (#891) * Prevent client: attributes from being passed to components * Adds a changeset --- .changeset/eight-monkeys-hammer.md | 5 +++++ packages/astro/src/compiler/codegen/index.ts | 8 +++++--- packages/astro/test/astro-components.test.js | 6 ++++++ .../fixtures/astro-components/src/pages/client.astro | 9 +++++++++ 4 files changed, 25 insertions(+), 3 deletions(-) create mode 100644 .changeset/eight-monkeys-hammer.md create mode 100644 packages/astro/test/fixtures/astro-components/src/pages/client.astro diff --git a/.changeset/eight-monkeys-hammer.md b/.changeset/eight-monkeys-hammer.md new file mode 100644 index 0000000000..b5ce51a317 --- /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 05a45c35bd..b8d6c1f76a 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): 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 { 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 cea0b426fa..aae0598b77 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 0000000000..eb1c2abf22 --- /dev/null +++ b/packages/astro/test/fixtures/astro-components/src/pages/client.astro @@ -0,0 +1,9 @@ +--- +import SvelteComponent from '../components/Component.svelte'; +--- + +Components + + + +