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

Fix nested client load directive (#1030)

Browse source 
* escape </script> in string literals

* add changeset
This commit is contained in:
Mihkel Eidast 2021-08-10 00:36:12 +03:00 committed by GitHub
parent bef7247812
commit 618ea3a8ea
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 21 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/fair-dogs-tie.md Normal file
View file

@ -0,0 +1,5 @@
---
'astro': patch
---
Properly escapes script tags with nested client:load directives when passing Astro components into framework components via props. Browsers interpret script end tags in strings as script end tags, resulting in syntax errors.

18
packages/astro/src/internal/__astro_component.ts
View file

@ -1,12 +1,26 @@
import type { Renderer, AstroComponentMetadata } from '../@types/astro';
import hash from 'shorthash';
import { valueToEstree, Value } from 'estree-util-value-to-estree';
import { generate } from 'astring';
import { generate, GENERATOR, Generator } from 'astring';
import * as astroHtml from './renderer-html';
// A more robust version alternative to `JSON.stringify` that can handle most values
// see https://github.com/remcohaszing/estree-util-value-to-estree#readme
const serialize = (value: Value) => generate(valueToEstree(value));
const customGenerator: Generator = {
...GENERATOR,
Literal(node, state) {
if (node.raw != null) {
// escape closing script tags in strings so browsers wouldn't interpret them as
// closing the actual end tag in HTML
state.write(node.raw.replace('</script>', '<\\/script>'));
} else {
GENERATOR.Literal(node, state);
}
},
};
const serialize = (value: Value) => generate(valueToEstree(value), {
generator: customGenerator,
});
export interface RendererInstance {
source: string | null;