fix: jsx state for self close tag (#83)

docs/app/live-editor.js

@@ -30,8 +30,8 @@ const customizableColors = Object.entries(SugarHigh.TokenTypes)
 .filter(([, tokenTypeName]) => tokenTypeName !== 'break' && tokenTypeName !== 'space')
   .sort((a, b) => a - b)
 
-const defaultLiveCode = `\
-export default function App() {
+const defaultLiveCode =
+`export default function App() {
   return <p>hello world</p>
 }`
 

lib/index.mjs

@@ -117,6 +117,10 @@ function isSpaces(str) {
   return /^[^\S\r\n]+$/g.test(str)
 }
 
+function isSign(ch) {
+  return signs.has(ch)
+}
+
 function encode(str) {
   return str
     .replace(/&/g, '&')
@@ -190,6 +194,7 @@ function tokenize(code) {
   let __jsxEnter = false
   /**
    * @type {0 | 1 | 2}
+   * @example
    * 0 for not in jsx;
    * 1 for open jsx tag;
    * 2 for closing jsx tag;
@@ -237,7 +242,7 @@ function tokenize(code) {
       return T_BREAK
     } else if (isSpaces(token)) {
       return T_SPACE
-    } else if (token.split('').every(ch => signs.has(ch))) {
+    } else if (token.split('').every(isSign)) {
       return T_SIGN
     } else if (isCls(token)) {
       return inJsxTag() ? T_IDENTIFIER : T_CLS_NUMBER
@@ -352,7 +357,8 @@ function tokenize(code) {
       if (__jsxTag) {
         // >: open tag close sign or closing tag closing sign
         // and it's not `=>` or `/>`
-        if (curr === '>' && !'/='.includes(prev)) {
+        // `curr` could be `>` or `/`
+        if ((curr === '>' && !'/='.includes(prev))) {
           append()
           if (__jsxTag === 1) {
             __jsxTag = 0
@@ -368,15 +374,20 @@ function tokenize(code) {
         // >: tag self close sign or close tag sign
         if (c_n === '/>' || c_n === '</') {
           // if current token is not part of close tag sign, push it first
-          if (current !== '<' || current !== '<') {
+          if (current !== '<' && current !== '/') {
             append()
           }
+
           if (c_n === '/>') {
             __jsxTag = 0
           } else {
             // is '</'
             __jsxStack--
           }
+
+          if (!__jsxStack)
+            __jsxEnter = false
+
           current = c_n
           i++
           append(T_SIGN)

test/ast.test.js

@@ -169,15 +169,15 @@ describe('jsx', () => {
   it('parse fold jsx', () => {
     const tokens = tokenize(`// jsx
     const element = (
-      <div>Hello World <Food /><div/>
+      <div>Hello World <Food /></div>
     )`);
     expect(extractTokenValues(tokens)).toEqual([
-      "// jsx", "const", "element", "=", "(", "<", "div", ">", "Hello World", "<", "Food", "/>", "<", "div", "/>", ")"
+      "// jsx", "const", "element", "=", "(", "<", "div", ">", "Hello World", "<", "Food", "/>", "</", "div", ">", ")"
     ])
     expect(extractTokenArray(tokens)).toEqual([
       ["// jsx", "comment"], ["const", "keyword"], ["element", "identifier"], ["=", "sign"], ["(", "sign"], ["<", "sign"],
       ["div", "identifier"], [">", "sign"], ["Hello World", "jsxliterals"], ["<", "sign"], ["Food", "identifier"],
-      ["/>", "sign"], ["<", "sign"], ["div", "identifier"], ["/>", "sign"], ["", "jsxliterals"], [")", "jsxliterals"]
+      ["/>", "sign"], ["</", "sign"], ["div", "identifier"], [">", "sign"], [")", "sign"]
     ])
   })
 
@@ -261,6 +261,32 @@ describe('jsx', () => {
       ["</", "sign"], [">", "sign"]
     ])
   })
+
+  it('should not affect the function param after closed jsx tag', () => {
+    // issue: (str was treated as string
+    const code =
+      `<a k={v} />
+      function p(str) {}
+      `
+    const tokens = tokenize(code)
+    expect(extractTokenArray(tokens)).toEqual([
+      ['<', 'sign'],
+      ['a', 'identifier'],
+      ['k', 'identifier'],
+      ['=', 'sign'],
+      ['{', 'sign'],
+      ['v', 'identifier'],
+      ['}', 'sign'],
+      ['/>', 'sign'],
+      ['function', 'keyword'],
+      ['p', 'identifier'],
+      ['(', 'sign'],
+      ['str', 'identifier'],
+      [')', 'sign'],
+      ['{', 'sign'],
+      ['}', 'sign'],
+    ])
+  })
 })
 
 describe('comments', () => {