Typescript: Several fixes

- Allow comments to be inside of tags. - Fixes the lexing of `<!--` comments. - Allow tag names to include `-`. - Added tests. - Resolves #940 - Resolves #939
alecthomas · Apr 1, 2024 · 57c3d26 · 57c3d26
1 parent e5c25d0
commit 57c3d26
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 1 deletion.
diff --git a/lexers/embedded/typescript.xml b/lexers/embedded/typescript.xml
@@ -51,10 +51,13 @@
       </rule>
     </state>
     <state name="tag">
+      <rule>
+        <include state="commentsandwhitespace"/>
+      </rule>
       <rule pattern="\s+">
         <token type="Text"/>
       </rule>
-      <rule pattern="([\w]+\s*)(=)(\s*)">
+      <rule pattern="([\w-]+\s*)(=)(\s*)">
         <bygroups>
           <token type="NameAttribute"/>
           <token type="Operator"/>
@@ -77,12 +80,25 @@
         <pop depth="1"/>
       </rule>
     </state>
+   <state name="comment">
+      <rule pattern="[^-]+">
+        <token type="Comment"/>
+      </rule>
+      <rule pattern="--&gt;">
+        <token type="Comment"/>
+        <pop depth="1"/>
+      </rule>
+      <rule pattern="-">
+        <token type="Comment"/>
+      </rule>
+    </state>
     <state name="commentsandwhitespace">
       <rule pattern="\s+">
         <token type="Text"/>
       </rule>
       <rule pattern="&lt;!--">
         <token type="Comment"/>
+        <push state="comment"/>
       </rule>
       <rule pattern="//.*?\n">
         <token type="CommentSingle"/>

diff --git a/lexers/testdata/tsx.actual b/lexers/testdata/tsx.actual
@@ -10,4 +10,19 @@ ReactDOM.render(
     </React.StrictMode>
   </>,
   document.getElementById('root'),
+)
+
+ReactDOM.render(
+  <p
+  // This is a inline comment.
+  /*
+    This is a
+    Multi line comment
+  */
+  <!-- Another multiline
+  comment !-->
+  data-test-id="outro" disabled>
+	Some text here.
+  </p>,
+  document.getElementById('root'),
 )
diff --git a/lexers/testdata/tsx.expected b/lexers/testdata/tsx.expected
@@ -60,5 +60,46 @@
   {"type":"LiteralStringSingle","value":"'root'"},
   {"type":"Punctuation","value":"),"},
   {"type":"Text","value":"\n"},
+  {"type":"Punctuation","value":")"},
+  {"type":"Text","value":"\n\n"},
+  {"type":"NameOther","value":"ReactDOM"},
+  {"type":"Punctuation","value":"."},
+  {"type":"NameOther","value":"render"},
+  {"type":"Punctuation","value":"("},
+  {"type":"Text","value":"\n  "},
+  {"type":"Punctuation","value":"\u003c"},
+  {"type":"NameTag","value":"p"},
+  {"type":"Text","value":"\n  "},
+  {"type":"CommentSingle","value":"// This is a inline comment.\n"},
+  {"type":"Text","value":"  "},
+  {"type":"CommentMultiline","value":"/*\n    This is a\n    Multi line comment\n  */"},
+  {"type":"Text","value":"\n  "},
+  {"type":"Comment","value":"\u003c!-- Another multiline\n  comment !--\u003e"},
+  {"type":"Text","value":"\n  "},
+  {"type":"NameAttribute","value":"data-test-id"},
+  {"type":"Operator","value":"="},
+  {"type":"LiteralString","value":"\"outro\""},
+  {"type":"Text","value":" "},
+  {"type":"NameAttribute","value":"disabled"},
+  {"type":"Punctuation","value":"\u003e"},
+  {"type":"Text","value":"\n\t"},
+  {"type":"NameOther","value":"Some"},
+  {"type":"Text","value":" "},
+  {"type":"NameOther","value":"text"},
+  {"type":"Text","value":" "},
+  {"type":"NameOther","value":"here"},
+  {"type":"Punctuation","value":"."},
+  {"type":"Text","value":"\n  "},
+  {"type":"Punctuation","value":"\u003c/"},
+  {"type":"NameTag","value":"p"},
+  {"type":"Punctuation","value":"\u003e,"},
+  {"type":"Text","value":"\n  "},
+  {"type":"NameBuiltin","value":"document"},
+  {"type":"Punctuation","value":"."},
+  {"type":"NameOther","value":"getElementById"},
+  {"type":"Punctuation","value":"("},
+  {"type":"LiteralStringSingle","value":"'root'"},
+  {"type":"Punctuation","value":"),"},
+  {"type":"Text","value":"\n"},
   {"type":"Punctuation","value":")"}
 ]