diff options
| author |  Matthew Phillips <matthew@matthewphillips.info>
| 2021-07-27 16:01:15 -0400 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2021-07-27 16:01:15 -0400 |
| commit | d8cebb0132cab8bfffc6851d2e656a9985bbeddf (patch) | |
| tree | 7d6cb0803922883ba8c09aa614804a7111a343df | |
| parent | ed0ed49df6ddfdf902ad7865965c5b34ec993338 (diff) | |
| download | astro-d8cebb0132cab8bfffc6851d2e656a9985bbeddf.tar.gz astro-d8cebb0132cab8bfffc6851d2e656a9985bbeddf.tar.zst astro-d8cebb0132cab8bfffc6851d2e656a9985bbeddf.zip | |
Prevent client: attributes from being passed to components (#891)
* Prevent client: attributes from being passed to components
* Adds a changeset
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> |