# jsx-ts

**Repository Path**: zmwcodediy/jsx-ts

## Basic Information

- **Project Name**: jsx-ts
- **Description**: jsx解析器的typescript实现
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-09-08
- **Last Updated**: 2022-05-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## jsx解析器的typescript实现
- [react的jsx简介](https://zh-hans.reactjs.org/docs/introducing-jsx.html)
- [react的jsx详解](https://zh-hans.reactjs.org/docs/jsx-in-depth.html)

- [jsx规范](https://facebook.github.io/jsx/)
- [jsx的antlr语法](https://github.com/YuhangGe/jsx-loader)

## 环境安装
```
npm init -y
npm i -d typescript
npm i -d ts-node
npx tsc --init
```
## jsx.g4
```
jsx: block+;

block: js
  | htmlElement
  | blockJsx
  ;

blockJsx: LP jsx RP;
js: JS;
htmlElement:
  (HTML_TAG_OPEN | TAG_OPEN) 
    htmlAttributes TAG_CLOSE 
    htmlContent HTML_CLOSE           #htmlWithChildren
 | (HTML_TAG_OPEN | TAG_OPEN)
    htmlAttributes 
    TAG_SLASH_CLOSE                  #htmlNoChildren                        
  ;

htmlContent: htmlChardata? ((htmlContentJsx | htmlElement) htmlChardata?)*;
htmlContentJsx: HTML_LP jsx RP;
htmlChardata: HTML_WS | HTML_TEXT;

htmlAttributes: htmlAttribute*;

htmlAttribute:
  TAG_NAME TAG_EQUALS (
    TAG_VALUE | (TAG_LP jsx RP)
  )
  | TAG_NAME
  ;

TAG_OPEN: '<' [ \t]* TAG_NameStartChar TAG_NameChar* -> pushMode(HTML), pushMode(TAG);
JS: ~[<{}]+;
LP: '{' -> pushMode(DEFAULT_MODE);
RP: '}' -> popMode;

mode HTML;

HTML_TAG_OPEN: '<' [ \t]* TAG_NameStartChar TAG_NameChar* -> pushMode(HTML), pushMode(TAG);
HTML_CLOSE: '<' [ \t]* '/' [ \t]* TAG_NameStartChar TAG_NameChar* [ \t]* '>' -> popMode;
HTML_LP: '{' -> pushMode(DEFAULT_MODE);
HTML_WS: (' ' | '\t' | '\r'? '\n')+;
HTML_TEXT: ~[<{]+;

mode TAG;

TAG_CLOSE: '>' -> popMode;
TAG_SLASH_CLOSE: '/' [ \t]* '>' -> popMode, popMode;
TAG_EQUALS: '=';
TAG_NAME: TAG_NameStartChar TAG_NameChar*;
TAG_VALUE: DOUBLE_QUOTE_STRING | SINGLE_QUOTE_STRING;
TAG_LP: '{' -> pushMode(DEFAULT_MODE);
TAG_WHITESPACE: [ \t\r\n] -> skip;


fragment DOUBLE_QUOTE_STRING: '"' ~[<"]* '"';

fragment SINGLE_QUOTE_STRING: '\'' ~[<']* '\'';

fragment HEXDIGIT: [a-fA-F0-9];

fragment DIGIT: [0-9];

fragment TAG_NameChar:
  TAG_NameStartChar
  | '-'
  | '_'
  | '.'
  | DIGIT
  | '\u00B7'
  | '\u0300' ..'\u036F'
  | '\u203F' ..'\u2040';

fragment TAG_NameStartChar:
  [:a-zA-Z]
  | '\u2070' ..'\u218F'
  | '\u2C00' ..'\u2FEF'
  | '\u3001' ..'\uD7FF'
  | '\uF900' ..'\uFDCF'
  | '\uFDF0' ..'\uFFFD';

```