From d87632c482ca8196063f6d36f56f5cf8d42e7570 Mon Sep 17 00:00:00 2001 From: Andrew Scott Date: Thu, 27 Jun 2024 10:04:02 -0700 Subject: [PATCH] feat(syntaxes): Allow syntaxes to work in tsx files Part of #2025 to allow syntaxes to work in tsx files. Other language features are still not working. --- syntaxes/inline-styles.json | 2 +- syntaxes/inline-template.json | 2 +- syntaxes/src/inline-styles.ts | 2 +- syntaxes/src/inline-template.ts | 2 +- syntaxes/test/cases.ts | 7 ++ syntaxes/test/data/inline-template.tsx | 32 ++++++ syntaxes/test/data/inline-template.tsx.snap | 120 ++++++++++++++++++++ 7 files changed, 163 insertions(+), 4 deletions(-) create mode 100644 syntaxes/test/data/inline-template.tsx create mode 100644 syntaxes/test/data/inline-template.tsx.snap diff --git a/syntaxes/inline-styles.json b/syntaxes/inline-styles.json index 01c1a89ed1..5e0e6666d6 100644 --- a/syntaxes/inline-styles.json +++ b/syntaxes/inline-styles.json @@ -1,6 +1,6 @@ { "scopeName": "inline-styles.ng", - "injectionSelector": "L:source.ts#meta.decorator.ts -comment", + "injectionSelector": "L:(source.ts#meta.decorator.ts | source.tsx#meta.decorator.tsx) -comment", "patterns": [ { "include": "#inlineStyles" diff --git a/syntaxes/inline-template.json b/syntaxes/inline-template.json index 4bb3adf94c..476ce62bfc 100644 --- a/syntaxes/inline-template.json +++ b/syntaxes/inline-template.json @@ -1,6 +1,6 @@ { "scopeName": "inline-template.ng", - "injectionSelector": "L:meta.decorator.ts -comment -text.html", + "injectionSelector": "L:(meta.decorator.ts | meta.decorator.tsx) -comment -text.html", "patterns": [ { "include": "#inlineTemplate" diff --git a/syntaxes/src/inline-styles.ts b/syntaxes/src/inline-styles.ts index 0dc5f056ba..37f3d29a48 100644 --- a/syntaxes/src/inline-styles.ts +++ b/syntaxes/src/inline-styles.ts @@ -10,7 +10,7 @@ import {GrammarDefinition} from './types'; export const InlineStyles: GrammarDefinition = { scopeName: 'inline-styles.ng', - injectionSelector: 'L:source.ts#meta.decorator.ts -comment', + injectionSelector: 'L:(source.ts#meta.decorator.ts | source.tsx#meta.decorator.tsx) -comment', patterns: [{include: '#inlineStyles'}], repository: { inlineStyles: { diff --git a/syntaxes/src/inline-template.ts b/syntaxes/src/inline-template.ts index f94434e405..7c85dd84b1 100644 --- a/syntaxes/src/inline-template.ts +++ b/syntaxes/src/inline-template.ts @@ -10,7 +10,7 @@ import {GrammarDefinition} from './types'; export const InlineTemplate: GrammarDefinition = { scopeName: 'inline-template.ng', - injectionSelector: 'L:meta.decorator.ts -comment -text.html', + injectionSelector: 'L:(meta.decorator.ts | meta.decorator.tsx) -comment -text.html', patterns: [{include: '#inlineTemplate'}], repository: { inlineTemplate: { diff --git a/syntaxes/test/cases.ts b/syntaxes/test/cases.ts index 54fec7e0f8..f3d1f17775 100644 --- a/syntaxes/test/cases.ts +++ b/syntaxes/test/cases.ts @@ -6,6 +6,13 @@ export const cases = [ ['syntaxes/inline-template.json', 'syntaxes/template.json', 'syntaxes/expression.json'], 'testFile': 'syntaxes/test/data/inline-template.ts' }, + { + 'name': 'inline template tsx', + 'scopeName': 'inline-template.ng', + 'grammarFiles': + ['syntaxes/inline-template.json', 'syntaxes/template.json', 'syntaxes/expression.json'], + 'testFile': 'syntaxes/test/data/inline-template.tsx' + }, { 'name': 'inline styles', 'scopeName': 'inline-styles.ng', diff --git a/syntaxes/test/data/inline-template.tsx b/syntaxes/test/data/inline-template.tsx new file mode 100644 index 0000000000..c900bf2458 --- /dev/null +++ b/syntaxes/test/data/inline-template.tsx @@ -0,0 +1,32 @@ +/* clang-format off */ + +/* Inline template recognition tests */ +@Component({ + //// Property key/value test + template: '
', + + //// String delimiter tests + template: `
`, + template: "
", + template: '
', + + //// Parenthesization tests + template: ( (( '
' )) ), + + //// Comments tests + // template: '
' + /* + * template: '
' + */ + /** + * template: '
' + */ +}) +export class TMComponent{} + +/* Template syntax tests */ +@Component({ + // Interpolation test + template: '{{property}}', +}) +export class TMComponent{} diff --git a/syntaxes/test/data/inline-template.tsx.snap b/syntaxes/test/data/inline-template.tsx.snap new file mode 100644 index 0000000000..5d0bdf021f --- /dev/null +++ b/syntaxes/test/data/inline-template.tsx.snap @@ -0,0 +1,120 @@ +>/* clang-format off */ +#^^^^^^^^^^^^^^^^^^^^^^^ inline-template.ng +> +>/* Inline template recognition tests */ +#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ inline-template.ng +>@Component({ +#^^^^^^^^^^^^^ inline-template.ng +> //// Property key/value test +#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ inline-template.ng +> template: '
', +#^^ inline-template.ng +# ^^^^^^^^ inline-template.ng meta.object-literal.key.ts +# ^ inline-template.ng meta.object-literal.key.ts punctuation.separator.key-value.ts +# ^ inline-template.ng +# ^ inline-template.ng string +# ^^^^^^^^^^^ inline-template.ng text.html +# ^ inline-template.ng string +# ^^ inline-template.ng +> +> //// String delimiter tests +#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ inline-template.ng +> template: `
`, +#^^ inline-template.ng +# ^^^^^^^^ inline-template.ng meta.object-literal.key.ts +# ^ inline-template.ng meta.object-literal.key.ts punctuation.separator.key-value.ts +# ^ inline-template.ng +# ^ inline-template.ng string +# ^^^^^^^^^^^ inline-template.ng text.html +# ^ inline-template.ng string +# ^^ inline-template.ng +> template: "
", +#^^ inline-template.ng +# ^^^^^^^^ inline-template.ng meta.object-literal.key.ts +# ^ inline-template.ng meta.object-literal.key.ts punctuation.separator.key-value.ts +# ^ inline-template.ng +# ^ inline-template.ng string +# ^^^^^^^^^^^ inline-template.ng text.html +# ^ inline-template.ng string +# ^^ inline-template.ng +> template: '
', +#^^ inline-template.ng +# ^^^^^^^^ inline-template.ng meta.object-literal.key.ts +# ^ inline-template.ng meta.object-literal.key.ts punctuation.separator.key-value.ts +# ^ inline-template.ng +# ^ inline-template.ng string +# ^^^^^^^^^^^ inline-template.ng text.html +# ^ inline-template.ng string +# ^^ inline-template.ng +> +> //// Parenthesization tests +#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ inline-template.ng +> template: ( (( '
' )) ), +#^^ inline-template.ng +# ^^^^^^^^ inline-template.ng meta.object-literal.key.ts +# ^ inline-template.ng meta.object-literal.key.ts punctuation.separator.key-value.ts +# ^ inline-template.ng +# ^ inline-template.ng meta.brace.round.ts +# ^ inline-template.ng +# ^ inline-template.ng meta.brace.round.ts +# ^ inline-template.ng meta.brace.round.ts +# ^ inline-template.ng +# ^ inline-template.ng string +# ^^^^^^^^^^^ inline-template.ng text.html +# ^ inline-template.ng string +# ^ inline-template.ng +# ^ inline-template.ng meta.brace.round.ts +# ^ inline-template.ng meta.brace.round.ts +# ^ inline-template.ng +# ^ inline-template.ng meta.brace.round.ts +# ^^ inline-template.ng +> +> //// Comments tests +#^^^^^^^^^^^^^^^^^^^^^^ inline-template.ng +> // template: '
' +#^^^^^ inline-template.ng +# ^^^^^^^^ inline-template.ng meta.object-literal.key.ts +# ^ inline-template.ng meta.object-literal.key.ts punctuation.separator.key-value.ts +# ^ inline-template.ng +# ^ inline-template.ng string +# ^^^^^^^^^^^ inline-template.ng text.html +# ^ inline-template.ng string +> /* +#^^^^^ inline-template.ng +> * template: '
' +#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ inline-template.ng +> */ +#^^^^^^ inline-template.ng +> /** +#^^^^^^ inline-template.ng +> * template: '
' +#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ inline-template.ng +> */ +#^^^^^^ inline-template.ng +>}) +#^^^ inline-template.ng +>export class TMComponent{} +#^^^^^^^^^^^^^^^^^^^^^^^^^^^ inline-template.ng +> +>/* Template syntax tests */ +#^^^^^^^^^^^^^^^^^^^^^^^^^^^^ inline-template.ng +>@Component({ +#^^^^^^^^^^^^^ inline-template.ng +> // Interpolation test +#^^^^^^^^^^^^^^^^^^^^^^^^ inline-template.ng +> template: '{{property}}', +#^^ inline-template.ng +# ^^^^^^^^ inline-template.ng meta.object-literal.key.ts +# ^ inline-template.ng meta.object-literal.key.ts punctuation.separator.key-value.ts +# ^ inline-template.ng +# ^ inline-template.ng string +# ^^ inline-template.ng text.html punctuation.definition.block.ts +# ^^^^^^^^ inline-template.ng text.html expression.ng variable.other.readwrite.ts +# ^^ inline-template.ng text.html punctuation.definition.block.ts +# ^ inline-template.ng string +# ^^ inline-template.ng +>}) +#^^^ inline-template.ng +>export class TMComponent{} +#^^^^^^^^^^^^^^^^^^^^^^^^^^^ inline-template.ng +> \ No newline at end of file