michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Prevent client: attributes from being passed to components (#891)

Browse source 
* Prevent client: attributes from being passed to components

* Adds a changeset
This commit is contained in:
Matthew Phillips 2021-07-27 16:01:15 -04:00 • committed by GitHub
parent ed0ed49df6
commit d8cebb0132
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 25 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/eight-monkeys-hammer.md Normal file
View file

@ -0,0 +1,5 @@
---
'astro': patch
---
Removes a warning in Svelte hydrated components

8
packages/astro/src/compiler/codegen/index.ts
View file

@ -30,6 +30,8 @@ const traverse: typeof babelTraverse.default = (babelTraverse.default as any).de
const babelGenerator: typeof _babelGenerator = _babelGenerator.default; const babelGenerator: typeof _babelGenerator = _babelGenerator.default;
const { transformSync } = esbuild; const { transformSync } = esbuild;
const hydrationDirectives = new Set(['client:load', 'client:idle', 'client:visible', 'client:media']);
interface Attribute { interface Attribute {
start: number; start: number;
end: number; end: number;
@ -55,8 +57,6 @@ function findHydrationAttributes(attrs: Record<string, string>): HydrationAttrib
let method: HydrationAttributes['method']; let method: HydrationAttributes['method'];
let value: undefined | string; let value: undefined | string;
const hydrationDirectives = new Set(['client:load', 'client:idle', 'client:visible', 'client:media']);
for (const [key, val] of Object.entries(attrs)) { for (const [key, val] of Object.entries(attrs)) {
if (hydrationDirectives.has(key)) { if (hydrationDirectives.has(key)) {
method = key.slice(7) as HydrationAttributes['method']; method = key.slice(7) as HydrationAttributes['method'];
@ -155,7 +155,9 @@ function getTextFromAttribute(attr: any): string {
function generateAttributes(attrs: Record<string, string>): string { function generateAttributes(attrs: Record<string, string>): string {
let result = '{'; let result = '{';
for (const [key, val] of Object.entries(attrs)) { for (const [key, val] of Object.entries(attrs)) {
if (key.startsWith('...')) { if (hydrationDirectives.has(key)) {
continue;
} else if (key.startsWith('...')) {
result += key + ','; result += key + ',';
} else { } else {
result += JSON.stringify(key) + ':' + val + ','; result += JSON.stringify(key) + ':' + val + ',';

6
packages/astro/test/astro-components.test.js
View file

@ -39,4 +39,10 @@ Components('Still throws an error for undefined components', async ({ runtime })
assert.equal(result.statusCode, 500); 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(); Components.run();

9
packages/astro/test/fixtures/astro-components/src/pages/client.astro vendored Normal file
View file

@ -0,0 +1,9 @@
---
import SvelteComponent from '../components/Component.svelte';
---
<html>
<head><title>Components</title></head>
<body>
<SvelteComponent client:load />
</body>
</html>