diff --git a/.changeset/unlucky-spoons-work.md b/.changeset/unlucky-spoons-work.md new file mode 100644 index 000000000..04f00bd6e --- /dev/null +++ b/.changeset/unlucky-spoons-work.md @@ -0,0 +1,5 @@ +--- +'@astrojs/compiler': patch +--- + +Fixes newlines in opening tag generating buggy code in TSX diff --git a/internal/printer/print-to-tsx.go b/internal/printer/print-to-tsx.go index 00b9bcc60..cde378991 100644 --- a/internal/printer/print-to-tsx.go +++ b/internal/printer/print-to-tsx.go @@ -63,12 +63,15 @@ func isValidTSXAttribute(a Attribute) bool { if i == 0 && !isValidFirstRune(ch) { return false } - // See https://mathiasbynens.be/notes/javascript-identifiers + + // See https://tc39.es/ecma262/#prod-IdentifierName if i != 0 && !(isValidFirstRune(ch) || unicode.In(ch, unicode.Mn, unicode.Mc, unicode.Nd, unicode.Pc)) && // : is allowed inside TSX attributes, for namespaces purpose // See https://facebook.github.io/jsx/#prod-JSXNamespacedName - ch != ':' { + // - is allowed inside TSX attributes, for custom attributes + // See https://facebook.github.io/jsx/#prod-JSXIdentifier + ch != ':' && ch != '-' { return false } } @@ -76,7 +79,7 @@ func isValidTSXAttribute(a Attribute) bool { return true } -// See https://mathiasbynens.be/notes/javascript-identifiers +// See https://tc39.es/ecma262/#prod-IdentifierStartChar func isValidFirstRune(r rune) bool { return r == '$' || r == '_' || unicode.In(r, unicode.Lu, @@ -489,7 +492,7 @@ declare const Astro: Readonly): any {}\n }); test("Don't move attributes to spread unnecessarily", async () => { - const input = `
`; + const input = `
`; const output = `${TSXPrefix} -
+
export default function __AstroComponent_(_props: Record): any {}\n`; const { code } = await convertToTSX(input, { sourcemap: 'external' }); @@ -245,6 +245,17 @@ export default function __AstroComponent_(_props: Record): any {}\n assert.snapshot(code, output, 'expected code to match snapshot'); }); +test('preserves line returns in tag by transforming to space', async () => { + const input = ` + +export default function __AstroComponent_(_props: Record): any {}\n`; + const { code } = await convertToTSX(input, { sourcemap: 'external' }); + assert.snapshot(code, output, 'expected code to match snapshot'); +}); + test('return ranges', async () => { const input = `---\nconsole.log("Hello!")\n---\n\n
`; const { metaRanges } = await convertToTSX(input, { sourcemap: 'external' });