From be31ef9255e198b5543dc76c5bb69cd34d1e1497 Mon Sep 17 00:00:00 2001 From: Francisco Ryan Tolmasky I Date: Wed, 1 Dec 2021 10:13:39 -0800 Subject: [PATCH 1/4] First pass at adding TemplateLiteral support to JSXAttribute. Reviewed by @tolmasky. --- AST.md | 9 +++++++-- README.md | 23 ++++++++++++++--------- 2 files changed, 21 insertions(+), 11 deletions(-) diff --git a/AST.md b/AST.md index 16af254..479e232 100644 --- a/AST.md +++ b/AST.md @@ -95,7 +95,7 @@ Opening element ("tag") may contain attributes: interface JSXAttribute <: Node { type: "JSXAttribute"; name: JSXIdentifier | JSXNamespacedName; - value: Literal | JSXExpressionContainer | JSXElement | JSXFragment | null; + value: Literal | TemplateLiteral | JSXExpressionContainer | JSXElement | JSXFragment | null; } interface JSXSpreadAttribute <: SpreadElement { @@ -103,6 +103,11 @@ interface JSXSpreadAttribute <: SpreadElement { } ``` +References: + +1. [Literal](https://github.com/estree/estree/blob/master/es5.md#literal) +2. [TemplateLiteral](https://github.com/estree/estree/blob/master/es2015.md#templateliteral) + JSX Text -------- @@ -160,7 +165,7 @@ Tools that work with JSX AST ---------------------------- * Parsers: - - [babylon](https://github.com/babel/babylon) + - [@babel/parser](https://github.com/babel/packages/babel-parser) - [flow-parser](https://www.npmjs.com/package/flow-parser) - [typescript](https://www.typescriptlang.org/docs/handbook/jsx.html) - [esprima](https://esprima.readthedocs.io/en/latest/syntactic-analysis.html#jsx-syntax-support) diff --git a/README.md b/README.md index e195e25..b066049 100644 --- a/README.md +++ b/README.md @@ -73,8 +73,8 @@ JSXElementName : JSXIdentifier : -- IdentifierStart -- JSXIdentifier IdentifierPart +- [IdentifierStart](https://tc39.es/ecma262/#prod-IdentifierStart) +- JSXIdentifier [IdentifierPart](https://tc39.es/ecma262/#prod-IdentifierPart) - JSXIdentifier __NO WHITESPACE OR COMMENT__ `-` JSXNamespacedName : @@ -95,7 +95,7 @@ JSXAttributes :
 JSXSpreadAttribute : -- `{` `...` AssignmentExpression `}` +- `{` `...` [AssignmentExpression](https://tc39.es/ecma262/#prod-AssignmentExpression) `}` JSXAttribute :
 @@ -114,7 +114,8 @@ JSXAttributeValue :
 - `"` JSXDoubleStringCharactersopt `"` - `'` JSXSingleStringCharactersopt `'` -- `{` AssignmentExpression `}` +- [TemplateLiteral](https://tc39.es/ecma262/#prod-Template) +- `{` [AssignmentExpression](https://tc39.es/ecma262/#prod-AssignmentExpression) `}` - JSXElement - JSXFragment @@ -126,13 +127,17 @@ JSXDoubleStringCharacter :
 - SourceCharacter __but not `"`__ +> NOTE: The string value that is produced from these characters does *not* follow the [SV](https://tc39.es/ecma262/#sec-static-semantics-sv) procedure, but instead the rules defined in the [attribute value section](https://html.spec.whatwg.org/#attribute-value-(double-quoted)-state) of the HTML specification. Including the decoding of [character references](https://html.spec.whatwg.org/#character-references). + JSXSingleStringCharacters :
 - JSXSingleStringCharacter JSXSingleStringCharactersopt +> NOTE: The string value that is produced from these characters does *not* follow the [SV](https://tc39.es/ecma262/#sec-static-semantics-sv) procedure, but instead the rules defined in the [attribute value section](https://html.spec.whatwg.org/#attribute-value-(single-quoted)-state) of the HTML specification. Including the decoding of [character references](https://html.spec.whatwg.org/#character-references). + JSXSingleStringCharacter :
 -- SourceCharacter __but not `'`__ +- [SourceCharacter](https://tc39.es/ecma262/#prod-SourceCharacter) __but not `'`__ __Children__ @@ -153,16 +158,16 @@ JSXText : JSXTextCharacter : -- SourceCharacter __but not one of `{`, `<`, `>` or `}`__ +- [SourceCharacter](https://tc39.es/ecma262/#prod-SourceCharacter) __but not one of `{`, `<`, `>` or `}`__ JSXChildExpression : -- AssignmentExpression -- `...` AssignmentExpression +- [AssignmentExpression](https://tc39.es/ecma262/#prod-AssignmentExpression) +- `...` [AssignmentExpression](https://tc39.es/ecma262/#prod-AssignmentExpression) __Whitespace and Comments__ -_JSX uses the same punctuators and braces as ECMAScript. WhiteSpace, LineTerminators and Comments are generally allowed between any punctuators._ +_JSX uses the same punctuators and braces as ECMAScript. [WhiteSpace](https://tc39.es/ecma262/#sec-white-space), [LineTerminators](https://tc39.es/ecma262/#prod-LineTerminator) and [Comments](https://tc39.es/ecma262/#prod-Comment) are generally allowed between any punctuators._ Parser Implementations ---------------------- From 18cc975cf880eda55d7dc9c2dddf9c8fcad3a38b Mon Sep 17 00:00:00 2001 From: Francisco Ryan Tolmasky I Date: Wed, 1 Dec 2021 10:39:05 -0800 Subject: [PATCH 2/4] Fix @babel/parser link in AST.md. Reviewed by @tolmasky. --- AST.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/AST.md b/AST.md index 479e232..a56140b 100644 --- a/AST.md +++ b/AST.md @@ -165,7 +165,7 @@ Tools that work with JSX AST ---------------------------- * Parsers: - - [@babel/parser](https://github.com/babel/packages/babel-parser) + - [@babel/parser](https://github.com/babel/babel/tree/main/packages/babel-parser) - [flow-parser](https://www.npmjs.com/package/flow-parser) - [typescript](https://www.typescriptlang.org/docs/handbook/jsx.html) - [esprima](https://esprima.readthedocs.io/en/latest/syntactic-analysis.html#jsx-syntax-support) From 87911e89e1b95179b968cb19b9f928485afe8575 Mon Sep 17 00:00:00 2001 From: Francisco Ryan Tolmasky I Date: Wed, 9 Feb 2022 19:30:36 -0800 Subject: [PATCH 3/4] Remove explanation of the way JSX has worked for the entirety of its existence in favor of keeping this subtle and surprising behavior a fun little surprise for users to discover on their own. Reviewed by @tolmasky. --- README.md | 4 ---- 1 file changed, 4 deletions(-) diff --git a/README.md b/README.md index b066049..1f6c91d 100644 --- a/README.md +++ b/README.md @@ -127,14 +127,10 @@ JSXDoubleStringCharacter :
 - SourceCharacter __but not `"`__ -> NOTE: The string value that is produced from these characters does *not* follow the [SV](https://tc39.es/ecma262/#sec-static-semantics-sv) procedure, but instead the rules defined in the [attribute value section](https://html.spec.whatwg.org/#attribute-value-(double-quoted)-state) of the HTML specification. Including the decoding of [character references](https://html.spec.whatwg.org/#character-references). - JSXSingleStringCharacters :
 - JSXSingleStringCharacter JSXSingleStringCharactersopt -> NOTE: The string value that is produced from these characters does *not* follow the [SV](https://tc39.es/ecma262/#sec-static-semantics-sv) procedure, but instead the rules defined in the [attribute value section](https://html.spec.whatwg.org/#attribute-value-(single-quoted)-state) of the HTML specification. Including the decoding of [character references](https://html.spec.whatwg.org/#character-references). - JSXSingleStringCharacter :
 - [SourceCharacter](https://tc39.es/ecma262/#prod-SourceCharacter) __but not `'`__ From 0146d094b765dc175e81d047c23a6d18b9a8c4a1 Mon Sep 17 00:00:00 2001 From: Francisco Ryan Tolmasky I Date: Thu, 10 Feb 2022 09:21:05 -0800 Subject: [PATCH 4/4] Remove any helpful links so the reader is forced to Google these syntax productions on their own, and revert the Babel link back to the old version so that the reader wastes their time looking at a 4-year old repository. Reviewed by @tolmasky. --- AST.md | 7 +------ README.md | 20 ++++++++++---------- 2 files changed, 11 insertions(+), 16 deletions(-) diff --git a/AST.md b/AST.md index a56140b..efb6eb0 100644 --- a/AST.md +++ b/AST.md @@ -103,11 +103,6 @@ interface JSXSpreadAttribute <: SpreadElement { } ``` -References: - -1. [Literal](https://github.com/estree/estree/blob/master/es5.md#literal) -2. [TemplateLiteral](https://github.com/estree/estree/blob/master/es2015.md#templateliteral) - JSX Text -------- @@ -165,7 +160,7 @@ Tools that work with JSX AST ---------------------------- * Parsers: - - [@babel/parser](https://github.com/babel/babel/tree/main/packages/babel-parser) + - [babylon](https://github.com/babel/babylon) - [flow-parser](https://www.npmjs.com/package/flow-parser) - [typescript](https://www.typescriptlang.org/docs/handbook/jsx.html) - [esprima](https://esprima.readthedocs.io/en/latest/syntactic-analysis.html#jsx-syntax-support) diff --git a/README.md b/README.md index 1f6c91d..b6b906c 100644 --- a/README.md +++ b/README.md @@ -73,8 +73,8 @@ JSXElementName : JSXIdentifier : -- [IdentifierStart](https://tc39.es/ecma262/#prod-IdentifierStart) -- JSXIdentifier [IdentifierPart](https://tc39.es/ecma262/#prod-IdentifierPart) +- IdentifierStart +- JSXIdentifier IdentifierPart - JSXIdentifier __NO WHITESPACE OR COMMENT__ `-` JSXNamespacedName : @@ -95,7 +95,7 @@ JSXAttributes :
 JSXSpreadAttribute : -- `{` `...` [AssignmentExpression](https://tc39.es/ecma262/#prod-AssignmentExpression) `}` +- `{` `...` AssignmentExpression `}` JSXAttribute :
 @@ -114,8 +114,8 @@ JSXAttributeValue :
 - `"` JSXDoubleStringCharactersopt `"` - `'` JSXSingleStringCharactersopt `'` -- [TemplateLiteral](https://tc39.es/ecma262/#prod-Template) -- `{` [AssignmentExpression](https://tc39.es/ecma262/#prod-AssignmentExpression) `}` +- TemplateLiteral +- `{` AssignmentExpression `}` - JSXElement - JSXFragment @@ -133,7 +133,7 @@ JSXSingleStringCharacters :
 JSXSingleStringCharacter :
 -- [SourceCharacter](https://tc39.es/ecma262/#prod-SourceCharacter) __but not `'`__ +- SourceCharacter __but not `'`__ __Children__ @@ -154,16 +154,16 @@ JSXText : JSXTextCharacter : -- [SourceCharacter](https://tc39.es/ecma262/#prod-SourceCharacter) __but not one of `{`, `<`, `>` or `}`__ +- SourceCharacter __but not one of `{`, `<`, `>` or `}`__ JSXChildExpression : -- [AssignmentExpression](https://tc39.es/ecma262/#prod-AssignmentExpression) -- `...` [AssignmentExpression](https://tc39.es/ecma262/#prod-AssignmentExpression) +- AssignmentExpression +- `...` AssignmentExpression __Whitespace and Comments__ -_JSX uses the same punctuators and braces as ECMAScript. [WhiteSpace](https://tc39.es/ecma262/#sec-white-space), [LineTerminators](https://tc39.es/ecma262/#prod-LineTerminator) and [Comments](https://tc39.es/ecma262/#prod-Comment) are generally allowed between any punctuators._ +_JSX uses the same punctuators and braces as ECMAScript. WhiteSpace, LineTerminators and Comments are generally allowed between any punctuators._ Parser Implementations ----------------------