autotests/html/test.tsx.dark.html

0001 <!DOCTYPE html>
0002 <html><head>
0003 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
0004 <title>test.tsx</title>
0005 <meta name="generator" content="KF5::SyntaxHighlighting - Definition (TypeScript React (TSX)) - Theme (Breeze Dark)"/>
0006 </head><body style="background-color:#232629;color:#cfcfc2"><pre>
0007 <span style="color:#7a7c7d;">// TypeScript React</span>
0008
0009 <span style="color:#7a7c7d;">/** </span><span style="color:#3f8058;font-weight:bold;">@author</span><span style="color:#7a7c7d;"> Willy </span><span style="font-weight:bold;">&lt;willy@wmail.com&gt;</span>
0010 <span style="color:#7a7c7d;">  * </span><span style="color:#3f8058;">@url</span><span style="color:#7a7c7d;"> https://reactjs.org/ **/</span>
0011
0012 <span style="color:#27ae60;">import</span> React <span style="color:#27ae60;">from</span> <span style="color:#f44f4f;">'react'</span><span style="color:#3f8058;">;</span>
0013 <span style="color:#27ae60;">import</span> { PhotoStory<span style="color:#3f8058;">,</span> VideoStory } <span style="color:#27ae60;">from</span> <span style="color:#f44f4f;">'./stories'</span><span style="color:#3f8058;">;</span>
0014
0015 <span style="font-weight:bold;">function</span> <span style="color:#8e44ad;">Story</span>(props) {
0016   <span style="font-weight:bold;">const</span> SpecificStory <span style="color:#3f8058;">=</span> components[props<span style="color:#3f8058;">.</span><span style="color:#2980b9;">storyType</span>]<span style="color:#3f8058;">;</span>
0017   <span style="color:#fdbc4b;font-weight:bold;">return </span><span style="color:#8e44ad;font-weight:bold;">&lt;SpecificStory</span> <span style="color:#27ae60;">story</span><span style="color:#3f8058;">=</span><span style="color:#27aeae;">{</span> props<span style="color:#3f8058;">.</span><span style="color:#2980b9;">story</span> <span style="color:#27aeae;">}</span> <span style="color:#27ae60;">attr2</span><span style="color:#3f8058;">=</span><span style="color:#f44f4f;">&quot;</span><span style="color:#f67400;">&amp;ref;</span><span style="color:#f44f4f;">&quot;</span> <span style="color:#27ae60;">attr3</span><span style="color:#3f8058;">=</span><span style="color:#f44f4f;">&quot;Hello\n&quot;</span> <span style="color:#8e44ad;font-weight:bold;">/&gt;</span><span style="color:#3f8058;">;</span>
0018 }
0019
0020 <span style="font-weight:bold;">function</span>
0021 <span style="color:#8e44ad;font-weight:bold;">&lt;Tag</span> <span style="color:#27ae60;">attr1</span><span style="color:#3f8058;">=</span><span style="color:#27aeae;">{</span> <span style="font-weight:bold;">&lt;tag/&gt;</span> <span style="font-weight:bold;">function</span> <span style="color:#3f8058;">&lt;</span>noTag<span style="color:#3f8058;">/</span><span style="color:#3f8058;">&gt;</span> <span style="color:#fdbc4b;font-weight:bold;">return</span> <span style="font-weight:bold;font-style:italic;">class</span> <span style="font-weight:bold;">var</span> <span style="color:#f67400;">0x123</span> { } <span style="color:#3f8058;">&amp;</span>noRef<span style="color:#3f8058;">;</span> <span style="color:#8e44ad;">hello</span>() React<span style="color:#3f8058;">.</span><span style="color:#8e44ad;">Component</span>() <span style="color:#27aeae;">}</span> <span style="color:#27ae60;">attr2</span><span style="color:#3f8058;">=</span><span style="color:#f44f4f;">&quot;</span><span style="color:#f67400;">&amp;ref;</span><span style="color:#f44f4f;">&quot;</span><span style="color:#8e44ad;font-weight:bold;">&gt;</span>
0022     /* no comment*/ function <span style="font-weight:bold;">&lt;tag/&gt;</span> return class var 0x123 <span style="color:#f67400;">&amp;ref;</span> hello() React.Component()
0023     .<span style="font-weight:bold;">&lt;tag/&gt;</span> anyWord <span style="font-weight:bold;">&lt;tag/&gt;</span>
0024     <span style="color:#27aeae;">{</span> <span style="font-weight:bold;">function</span> <span style="color:#3f8058;">&lt;</span>tag<span style="color:#3f8058;">&gt;</span> <span style="color:#fdbc4b;font-weight:bold;">return</span> <span style="font-weight:bold;font-style:italic;">class</span> <span style="font-weight:bold;">var</span> <span style="color:#f67400;">0x123</span> <span style="color:#8e44ad;">hello</span>() React<span style="color:#3f8058;">.</span><span style="color:#8e44ad;">Component</span>() <span style="color:#27aeae;">}</span>
0025 <span style="color:#8e44ad;font-weight:bold;">&lt;/Tag&gt;</span>
0026
0027 <span style="font-weight:bold;">&lt;tag1&gt;</span> <span style="font-weight:bold;">&lt;/tag1&gt;</span>
0028 <span style="font-weight:bold;">&lt;tag1&gt;</span> <span style="font-weight:bold;">&lt;/</span><span style="color:#da4453;text-decoration:underline;">Tag$</span><span style="font-weight:bold;">&gt;</span>
0029 <span style="color:#8e44ad;font-weight:bold;">&lt;Tag$&gt;</span> <span style="color:#8e44ad;font-weight:bold;">&lt;/tag&gt;</span>
0030
0031 <span style="font-weight:bold;">&lt;tag</span><span style="color:#7a7c7d;">/*comment*/</span><span style="color:#27ae60;">attr1</span><span style="color:#7a7c7d;">/*comment*/</span><span style="color:#3f8058;">=</span> <span style="color:#7a7c7d;">/*comment*/</span><span style="color:#f44f4f;">&quot;value&quot;</span><span style="color:#7a7c7d;">/*comment*/</span><span style="color:#27ae60;">attr2</span> <span style="color:#7a7c7d;">/*comment*/</span><span style="color:#27ae60;">attr3</span><span style="color:#3f8058;">=</span><span style="color:#f44f4f;">'a'</span> <span style="color:#27ae60;">key</span><span style="color:#7a7c7d;">/*comment*/</span><span style="color:#27ae60;">key2</span> <span style="font-weight:bold;">/&gt;</span>
0032
0033 <span style="color:#7a7c7d;">// Detect Valid tags</span>
0034
0035 <span style="color:#7a7c7d;">/* comment */</span> <span style="font-weight:bold;">&lt;tag&gt;&lt;/tag&gt;</span>
0036 { <span style="color:#7a7c7d;">/* comment</span>
0037 <span style="color:#7a7c7d;">   */</span> <span style="color:#8e44ad;font-weight:bold;">&lt;Tag</span> <span style="color:#8e44ad;font-weight:bold;">/&gt;</span>
0038     word <span style="color:#3f8058;">&lt;</span>noTag<span style="color:#3f8058;">/</span><span style="color:#3f8058;">&gt;</span> <span style="color:#3f8058;">.</span> <span style="color:#3f8058;">&lt;</span>noTag<span style="color:#3f8058;">/</span><span style="color:#3f8058;">&gt;</span> } <span style="color:#3f8058;">&lt;</span>noTag<span style="color:#3f8058;">/</span><span style="color:#3f8058;">&gt;</span>
0039 <span style="color:#fdbc4b;font-weight:bold;">return </span><span style="color:#7a7c7d;">/* comment</span>
0040 <span style="color:#7a7c7d;">   multiline */</span> <span style="font-weight:bold;">&lt;tag/&gt;</span> <span style="color:#7a7c7d;">/* comment */</span> <span style="color:#8e44ad;font-weight:bold;">&lt;Tag/&gt;</span>
0041 <span style="color:#3f8058;">&amp;&amp; </span><span style="color:#7a7c7d;">/*comment*/</span> <span style="color:#8e44ad;font-weight:bold;">&lt;Tag/&gt;</span>
0042 <span style="color:#3f8058;">&amp;</span> <span style="color:#7a7c7d;">/*comment*/</span> <span style="color:#3f8058;">&lt;</span>noTag<span style="color:#3f8058;">/</span><span style="color:#3f8058;">&gt;</span>
0043
0044   <span style="font-weight:bold;">&lt;tag/&gt;</span>
0045 { <span style="font-weight:bold;">&lt;hello&gt;</span>Hello<span style="font-weight:bold;">&lt;/hello&gt;</span> }
0046 <span style="color:#3f8058;">?</span><span style="color:#8e44ad;font-weight:bold;">&lt;Tag</span> <span style="color:#8e44ad;font-weight:bold;">/&gt;</span><span style="color:#3f8058;">;</span>
0047 [ <span style="font-weight:bold;">&lt;tag</span> <span style="font-weight:bold;">/&gt;</span>  ( <span style="font-weight:bold;">&lt;tag</span> <span style="font-weight:bold;">/&gt;</span>
0048 <span style="color:#3f8058;">,</span><span style="color:#8e44ad;font-weight:bold;">&lt;Tag/&gt;</span>    <span style="color:#3f8058;">=</span><span style="color:#8e44ad;font-weight:bold;">&lt;Tag/&gt;</span>
0049 <span style="color:#3f8058;">&amp;&amp;</span><span style="font-weight:bold;">&lt;tag/&gt;</span>   <span style="color:#3f8058;">||</span><span style="font-weight:bold;">&lt;tag/&gt;</span>
0050 <span style="color:#fdbc4b;font-weight:bold;">return </span><span style="font-weight:bold;">&lt;tag/&gt;</span> <span style="color:#3f8058;">;</span>
0051 <span style="color:#27ae60;">default</span><span style="font-weight:bold;">&lt;tag/&gt;</span> <span style="color:#3f8058;">;</span>
0052 <span style="color:#8e44ad;font-weight:bold;">&lt;Tag&gt;</span> <span style="font-weight:bold;">&lt;tag&gt;</span> <span style="color:#8e44ad;font-weight:bold;">&lt;tag$/&gt;</span> <span style="font-weight:bold;">&lt;/tag&gt;</span> return <span style="color:#8e44ad;font-weight:bold;">&lt;/Tag&gt;</span>
0053
0054 anyWord<span style="color:#3f8058;">&lt;</span>noTag<span style="color:#3f8058;">&gt;</span>
0055 anyWord<span style="color:#7a7c7d;">/*comment*/</span> <span style="color:#3f8058;">&lt;</span>noTag<span style="color:#3f8058;">/</span><span style="color:#3f8058;">&gt;</span>
0056 <span style="color:#3f8058;">.</span><span style="color:#3f8058;">&lt;</span>noTag<span style="color:#3f8058;">&gt;</span>
0057 <span style="color:#3f8058;">&amp;</span><span style="color:#3f8058;">&lt;</span>notag<span style="color:#3f8058;">&gt;</span> <span style="color:#3f8058;">|</span> <span style="color:#3f8058;">&lt;</span>noTag<span style="color:#3f8058;">/</span><span style="color:#3f8058;">&gt;</span>
0058 <span style="color:#3f8058;">%</span> <span style="color:#7a7c7d;">/* comment*/</span> <span style="color:#3f8058;">&lt;</span>noTag<span style="color:#3f8058;">/</span><span style="color:#3f8058;">&gt;</span>
0059
0060 <span style="color:#7a7c7d;">// </span><span style="color:#ca9219;background-color:#451e1a;font-weight:bold;">TODO</span><span style="color:#7a7c7d;">: Fix this (comment before the tag name):</span>
0061 <span style="font-weight:bold;">var</span> x <span style="color:#3f8058;">=</span> <span style="color:#3f8058;">&lt;</span><span style="color:#7a7c7d;">/**/</span>div<span style="color:#3f8058;">&gt;&lt;/</span>div<span style="color:#3f8058;">&gt;;</span>
0062
0063 <span style="color:#7a7c7d;">// Tag after &quot;:&quot;</span>
0064 annotation<span style="color:#3f8058;">: </span><span style="font-weight:bold;">&lt;tag/&gt;</span>
0065 annotation<span style="color:#3f8058;">:</span> text [ <span style="font-weight:bold;">&lt;tag/&gt;</span> ]
0066 <span style="color:#7f8c8d;">console</span><span style="color:#3f8058;">.</span><span style="color:#8e44ad;font-style:italic;">log</span>(<span style="color:#f44f4f;">&quot;hello&quot;</span>)
0067
0068 <span style="color:#7a7c7d;">// Type assertion in tag</span>
0069 <span style="color:#8e44ad;font-weight:bold;">&lt;C</span><span style="color:#3f8058;">&lt;</span><span style="color:#8e44ad;font-weight:bold;">number</span><span style="color:#3f8058;">&gt;</span><span style="color:#8e44ad;font-weight:bold;">/&gt;</span>
0070 <span style="color:#8e44ad;font-weight:bold;">&lt;C</span><span style="color:#3f8058;">&lt;</span><span style="color:#8e44ad;font-weight:bold;">number</span><span style="color:#3f8058;">&gt;</span><span style="color:#8e44ad;font-weight:bold;">&gt;</span> <span style="color:#8e44ad;font-weight:bold;">&lt;/C&gt;</span>
0071 <span style="color:#8e44ad;font-weight:bold;">&lt;C</span>
0072 <span style="color:#da4453;text-decoration:underline;">&lt;error</span> <span style="color:#8e44ad;font-weight:bold;">/&gt;</span>
0073
0074 <span style="color:#7a7c7d;">// Non-ASCII tag name &amp; attribute</span>
0075 <span style="color:#8e44ad;font-weight:bold;">&lt;日本語&gt;&lt;/日本語&gt;</span><span style="color:#3f8058;">;</span>
0076 <span style="color:#8e44ad;font-weight:bold;">&lt;Component</span> <span style="color:#27ae60;">本本:本-本</span> <span style="color:#27ae60;">aa本:本</span> <span style="color:#27ae60;">aa:aa</span> <span style="color:#8e44ad;font-weight:bold;">/&gt;</span>
0077 <span style="color:#8e44ad;font-weight:bold;">&lt;aaaa:ñ</span> <span style="color:#8e44ad;font-weight:bold;">/&gt;</span>
0078
0079 <span style="color:#8e44ad;font-weight:bold;">&lt;Namespace.DeepNamespace.Component</span> <span style="color:#8e44ad;font-weight:bold;">/&gt;</span><span style="color:#3f8058;">;</span>
0080 <span style="color:#8e44ad;font-weight:bold;">&lt;Component</span> <span style="color:#27aeae;">{</span> <span style="color:#3f8058;">...</span> x <span style="color:#27aeae;">}</span> <span style="color:#27ae60;">y</span>
0081 <span style="color:#3f8058;">=</span><span style="color:#27aeae;">{</span><span style="color:#f67400;">2</span> <span style="color:#27aeae;">}</span> <span style="color:#27ae60;">z</span> <span style="color:#8e44ad;font-weight:bold;">/&gt;</span><span style="color:#3f8058;">;</span>
0082
0083 <span style="font-weight:bold;font-style:italic;">let</span> k1 <span style="color:#3f8058;">=</span>
0084     <span style="color:#8e44ad;font-weight:bold;">&lt;Comp</span> <span style="color:#27ae60;">a</span><span style="color:#3f8058;">=</span><span style="color:#27aeae;">{</span><span style="color:#f67400;">10</span><span style="color:#27aeae;">}</span> <span style="color:#27ae60;">b</span><span style="color:#3f8058;">=</span><span style="color:#f44f4f;">&quot;hi&quot;</span> <span style="color:#27aeae;">{</span><span style="color:#3f8058;">...</span>o<span style="color:#27aeae;">}</span> <span style="color:#8e44ad;font-weight:bold;">&gt;</span>
0085         hi hi hi!
0086     <span style="color:#8e44ad;font-weight:bold;">&lt;/Comp&gt;</span><span style="color:#3f8058;">;</span>
0087
0088 <span style="font-weight:bold;font-style:italic;">let</span> k2 <span style="color:#3f8058;">=</span>
0089     <span style="color:#8e44ad;font-weight:bold;">&lt;Comp</span> <span style="color:#27ae60;">a</span><span style="color:#3f8058;">=</span><span style="color:#27aeae;">{</span><span style="color:#f67400;">10</span><span style="color:#27aeae;">}</span> <span style="color:#27ae60;">b</span><span style="color:#3f8058;">=</span><span style="color:#f44f4f;">&quot;hi&quot;</span><span style="color:#8e44ad;font-weight:bold;">&gt;</span>
0090         <span style="font-weight:bold;">&lt;div&gt;</span> My Div <span style="font-weight:bold;">&lt;/div&gt;</span>
0091         <span style="color:#27aeae;">{</span>(name<span style="color:#3f8058;">:</span> <span style="color:#2980b9;">string</span>) <span style="font-weight:bold;">=&gt; </span><span style="font-weight:bold;">&lt;div&gt;</span> My name <span style="color:#27aeae;">{</span>name<span style="color:#27aeae;">}</span> <span style="font-weight:bold;">&lt;/div&gt;</span><span style="color:#27aeae;">}</span>
0092     <span style="color:#8e44ad;font-weight:bold;">&lt;/Comp&gt;</span><span style="color:#3f8058;">;</span>
0093
0094 <span style="font-weight:bold;font-style:italic;">let</span> k3 <span style="color:#3f8058;">= </span><span style="color:#8e44ad;font-weight:bold;">&lt;GenericComponent</span> <span style="color:#27ae60;">initialValues</span><span style="color:#3f8058;">=</span><span style="color:#27aeae;">{</span>{ x<span style="color:#3f8058;">:</span> <span style="color:#f44f4f;">&quot;y&quot;</span> }<span style="color:#27aeae;">}</span> <span style="color:#27ae60;">nextValues</span><span style="color:#3f8058;">=</span><span style="color:#27aeae;">{</span>a <span style="font-weight:bold;">=&gt;</span> ({ x<span style="color:#3f8058;">:</span> a<span style="color:#3f8058;">.</span><span style="color:#2980b9;">x</span> })<span style="color:#27aeae;">}</span> <span style="color:#8e44ad;font-weight:bold;">/&gt;</span><span style="color:#3f8058;">;</span> <span style="color:#7a7c7d;">// No Error</span>
0095
0096 <span style="color:#7a7c7d;">// OK</span>
0097 <span style="font-weight:bold;font-style:italic;">let</span> k1 <span style="color:#3f8058;">= </span><span style="color:#8e44ad;font-weight:bold;">&lt;Comp</span> <span style="color:#27ae60;">a</span><span style="color:#3f8058;">=</span><span style="color:#27aeae;">{</span><span style="color:#f67400;">10</span><span style="color:#27aeae;">}</span> <span style="color:#27ae60;">b</span><span style="color:#3f8058;">=</span><span style="color:#f44f4f;">&quot;hi&quot;</span><span style="color:#8e44ad;font-weight:bold;">&gt;</span><span style="font-weight:bold;">&lt;&gt;&lt;/&gt;</span><span style="color:#8e44ad;font-weight:bold;">&lt;Button</span> <span style="color:#8e44ad;font-weight:bold;">/&gt;&lt;AnotherButton</span> <span style="color:#8e44ad;font-weight:bold;">/&gt;&lt;/Comp&gt;</span><span style="color:#3f8058;">;</span>
0098 <span style="font-weight:bold;font-style:italic;">let</span> k2 <span style="color:#3f8058;">= </span><span style="color:#8e44ad;font-weight:bold;">&lt;Comp</span> <span style="color:#27ae60;">a</span><span style="color:#3f8058;">=</span><span style="color:#27aeae;">{</span><span style="color:#f67400;">10</span><span style="color:#27aeae;">}</span> <span style="color:#27ae60;">b</span><span style="color:#3f8058;">=</span><span style="color:#f44f4f;">&quot;hi&quot;</span><span style="color:#8e44ad;font-weight:bold;">&gt;</span><span style="font-weight:bold;">&lt;&gt;</span><span style="color:#8e44ad;font-weight:bold;">&lt;Button</span> <span style="color:#8e44ad;font-weight:bold;">/&gt;</span><span style="font-weight:bold;">&lt;/&gt;</span><span style="color:#8e44ad;font-weight:bold;">&lt;AnotherButton</span> <span style="color:#8e44ad;font-weight:bold;">/&gt;&lt;/Comp&gt;</span><span style="color:#3f8058;">;</span>
0099 <span style="font-weight:bold;font-style:italic;">let</span> k3 <span style="color:#3f8058;">= </span><span style="color:#8e44ad;font-weight:bold;">&lt;Comp</span> <span style="color:#27ae60;">a</span><span style="color:#3f8058;">=</span><span style="color:#27aeae;">{</span><span style="color:#f67400;">10</span><span style="color:#27aeae;">}</span> <span style="color:#27ae60;">b</span><span style="color:#3f8058;">=</span><span style="color:#f44f4f;">&quot;hi&quot;</span><span style="color:#8e44ad;font-weight:bold;">&gt;</span><span style="font-weight:bold;">&lt;&gt;</span><span style="color:#8e44ad;font-weight:bold;">&lt;Button</span> <span style="color:#8e44ad;font-weight:bold;">/&gt;&lt;AnotherButton</span> <span style="color:#8e44ad;font-weight:bold;">/&gt;</span><span style="font-weight:bold;">&lt;/&gt;</span><span style="color:#8e44ad;font-weight:bold;">&lt;/Comp&gt;</span><span style="color:#3f8058;">;</span>
0100 <span style="font-weight:bold;font-style:italic;">let</span> k4 <span style="color:#3f8058;">= </span><span style="color:#8e44ad;font-weight:bold;">&lt;SingleChildComp</span> <span style="color:#27ae60;">a</span><span style="color:#3f8058;">=</span><span style="color:#27aeae;">{</span><span style="color:#f67400;">10</span><span style="color:#27aeae;">}</span> <span style="color:#27ae60;">b</span><span style="color:#3f8058;">=</span><span style="color:#f44f4f;">&quot;hi&quot;</span><span style="color:#8e44ad;font-weight:bold;">&gt;</span><span style="font-weight:bold;">&lt;&gt;</span><span style="color:#8e44ad;font-weight:bold;">&lt;Button</span> <span style="color:#8e44ad;font-weight:bold;">/&gt;&lt;AnotherButton</span> <span style="color:#8e44ad;font-weight:bold;">/&gt;</span><span style="font-weight:bold;">&lt;/&gt;</span><span style="color:#8e44ad;font-weight:bold;">&lt;/SingleChildComp&gt;</span><span style="color:#3f8058;">;</span>
0101 <span style="color:#7a7c7d;">// OK</span>
0102 <span style="font-weight:bold;font-style:italic;">let</span> k1 <span style="color:#3f8058;">= </span><span style="font-weight:bold;">&lt;div&gt;</span> <span style="font-weight:bold;">&lt;h2&gt;</span> Hello <span style="font-weight:bold;">&lt;/h2&gt;</span> <span style="font-weight:bold;">&lt;h1&gt;</span> world <span style="font-weight:bold;">&lt;/h1&gt;&lt;/div&gt;</span><span style="color:#3f8058;">;</span>
0103 <span style="font-weight:bold;font-style:italic;">let</span> k2 <span style="color:#3f8058;">= </span><span style="font-weight:bold;">&lt;div&gt;</span> <span style="font-weight:bold;">&lt;h2&gt;</span> Hello <span style="font-weight:bold;">&lt;/h2&gt;</span> <span style="color:#27aeae;">{</span>(user<span style="color:#3f8058;">:</span> <span style="color:#2980b9;">any</span>) <span style="font-weight:bold;">=&gt; </span><span style="font-weight:bold;">&lt;h2&gt;</span><span style="color:#27aeae;">{</span>user<span style="color:#3f8058;">.</span><span style="color:#2980b9;">name</span><span style="color:#27aeae;">}</span><span style="font-weight:bold;">&lt;/h2&gt;</span><span style="color:#27aeae;">}</span><span style="font-weight:bold;">&lt;/div&gt;</span><span style="color:#3f8058;">;</span>
0104 <span style="font-weight:bold;font-style:italic;">let</span> k3 <span style="color:#3f8058;">= </span><span style="font-weight:bold;">&lt;div&gt;</span> <span style="color:#27aeae;">{</span><span style="color:#f67400;">1</span><span style="color:#27aeae;">}</span> <span style="color:#27aeae;">{</span><span style="color:#f44f4f;">&quot;That is a number&quot;</span><span style="color:#27aeae;">}</span> <span style="font-weight:bold;">&lt;/div&gt;</span><span style="color:#3f8058;">;</span>
0105 <span style="font-weight:bold;font-style:italic;">let</span> k4 <span style="color:#3f8058;">= </span><span style="color:#8e44ad;font-weight:bold;">&lt;Button&gt;</span> <span style="font-weight:bold;">&lt;h2&gt;</span> Hello <span style="font-weight:bold;">&lt;/h2&gt;</span> <span style="color:#8e44ad;font-weight:bold;">&lt;/Button&gt;</span><span style="color:#3f8058;">;</span>
0106
0107 <span style="color:#7a7c7d;">// Empty tags</span>
0108 hello<span style="color:#3f8058;">&lt;&gt;</span>
0109 hello<span style="color:#3f8058;">&lt;</span><span style="color:#2980b9;">string</span><span style="color:#3f8058;">&gt;</span>
0110
0111 <span style="font-weight:bold;">&lt;&gt;&lt;/&gt;</span><span style="color:#3f8058;">;</span> <span style="color:#7a7c7d;">// no whitespace</span>
0112 <span style="font-weight:bold;">&lt;    &gt;&lt;/   &gt;</span><span style="color:#3f8058;">;</span> <span style="color:#7a7c7d;">// lots of whitespace</span>
0113 <span style="color:#3f8058;">&lt;</span> <span style="color:#7a7c7d;">/*starting wrap*/</span> <span style="color:#3f8058;">&gt;&lt;/</span> <span style="color:#7a7c7d;">/*ending wrap*/</span><span style="color:#3f8058;">&gt;;</span> <span style="color:#7a7c7d;">// comments in the tags</span>
0114 <span style="font-weight:bold;">&lt;&gt;</span>hi<span style="font-weight:bold;">&lt;/&gt;</span><span style="color:#3f8058;">;</span> <span style="color:#7a7c7d;">// text inside</span>
0115 <span style="font-weight:bold;">&lt;&gt;&lt;span&gt;</span>hi<span style="font-weight:bold;">&lt;/span&gt;&lt;div&gt;</span>bye<span style="font-weight:bold;">&lt;/div&gt;&lt;/&gt;</span><span style="color:#3f8058;">;</span> <span style="color:#7a7c7d;">// children</span>
0116 <span style="font-weight:bold;">&lt;&gt;&lt;span&gt;</span>1<span style="font-weight:bold;">&lt;/span&gt;&lt;&gt;&lt;span&gt;</span>2.1<span style="font-weight:bold;">&lt;/span&gt;&lt;span&gt;</span>2.2<span style="font-weight:bold;">&lt;/span&gt;&lt;/&gt;&lt;span&gt;</span>3<span style="font-weight:bold;">&lt;/span&gt;&lt;/&gt;</span><span style="color:#3f8058;">;</span> <span style="color:#7a7c7d;">// nested fragments</span>
0117 <span style="font-weight:bold;">&lt;&gt;</span>#<span style="font-weight:bold;">&lt;/&gt;</span><span style="color:#3f8058;">;</span> <span style="color:#7a7c7d;">// # would cause scanning error if not in jsxtext</span>
0118
0119 <span style="color:#7a7c7d;">// Tags after substitutions in templates</span>
0120 <span style="color:#da4453;">`aaa</span><span style="color:#3daee9;">${</span><span style="font-weight:bold;">&lt;tag&gt;&lt;/tag&gt;</span><span style="color:#7a7c7d;">//comment</span>
0121     <span style="color:#7a7c7d;">/*comment*/</span><span style="color:#8e44ad;font-weight:bold;">&lt;A/&gt;</span><span style="color:#3daee9;">}</span><span style="color:#da4453;">`</span>
0122
0123 <span style="color:#7a7c7d;">// Don't highlight tags within type declaration</span>
0124 <span style="font-weight:bold;font-style:italic;">type</span> T12 <span style="color:#3f8058;">=</span> <span style="color:#7f8c8d;">ReturnType</span><span style="color:#3f8058;">&lt;</span>(<span style="color:#3f8058;">&lt;</span>T<span style="color:#3f8058;">&gt;</span>() <span style="font-weight:bold;">=&gt;</span> T)<span style="color:#3f8058;">&gt;</span><span style="color:#3f8058;">;</span>
0125 <span style="font-weight:bold;font-style:italic;">type</span> T13 <span style="color:#3f8058;">=</span> <span style="color:#7f8c8d;">ReturnType</span><span style="color:#3f8058;">&lt;</span>(<span style="color:#3f8058;">&lt;</span>T <span style="font-weight:bold;font-style:italic;">extends</span> U<span style="color:#3f8058;">,</span> U <span style="font-weight:bold;font-style:italic;">extends</span> <span style="color:#2980b9;">number</span>[]<span style="color:#3f8058;">&gt;</span>() <span style="font-weight:bold;">=&gt;</span> T)<span style="color:#3f8058;">&gt;</span><span style="color:#3f8058;">;</span>
0126 <span style="font-weight:bold;font-style:italic;">type</span> T14 <span style="color:#3f8058;">=</span> <span style="color:#7f8c8d;">ReturnType</span><span style="color:#3f8058;">&lt;</span><span style="font-weight:bold;">typeof</span> f1<span style="color:#3f8058;">&gt;</span><span style="color:#3f8058;">;</span>
0127 <span style="font-weight:bold;font-style:italic;">type</span> T15 <span style="color:#3f8058;">=</span> <span style="color:#7f8c8d;">ReturnType</span><span style="color:#3f8058;">&lt;</span>(s<span style="color:#3f8058;">:</span> <span style="color:#2980b9;">string</span>) <span style="font-weight:bold;">=&gt;</span> <span style="color:#2980b9;">void</span><span style="color:#3f8058;">&gt;</span><span style="color:#3f8058;">;</span>
0128
0129 <span style="color:#7a7c7d;">// Don't highlight tags within variable declaration</span>
0130 <span style="font-weight:bold;font-style:italic;">let</span> myIdentity<span style="color:#3f8058;">:</span> <span style="color:#3f8058;">&lt;</span>T<span style="color:#3f8058;">&gt;</span>(arg<span style="color:#3f8058;">:</span> T) <span style="font-weight:bold;">=&gt;</span> T <span style="color:#3f8058;">&lt;</span>noTag<span style="color:#3f8058;">/</span><span style="color:#3f8058;">&gt;</span> <span style="color:#3f8058;">= </span><span style="color:#8e44ad;font-weight:bold;">&lt;Tag</span> <span style="color:#8e44ad;font-weight:bold;">/&gt;</span><span style="color:#3f8058;">;</span>
0131 <span style="font-weight:bold;">var</span> myIdentity<span style="color:#3f8058;">:</span> <span style="color:#3f8058;">&lt;</span>U<span style="color:#3f8058;">&gt;</span>(arg<span style="color:#3f8058;">:</span> U) <span style="font-weight:bold;">=&gt;</span> U <span style="color:#3f8058;">=</span> identity<span style="color:#3f8058;">;</span>
0132 <span style="font-weight:bold;">const</span> myIdentity<span style="color:#3f8058;">:</span> {<span style="color:#3f8058;">&lt;</span>T<span style="color:#3f8058;">&gt;</span>(arg<span style="color:#3f8058;">:</span> T)<span style="color:#3f8058;">:</span> T} <span style="color:#3f8058;">=</span> identity<span style="color:#3f8058;">;</span>
0133
0134 <span style="color:#7a7c7d;">// Don't highlight tags within interfaces and classes</span>
0135 <span style="font-weight:bold;font-style:italic;">interface</span> GenericIdentityFn {
0136     <span style="color:#3f8058;">&lt;</span>T<span style="color:#3f8058;">&gt;</span>(arg<span style="color:#3f8058;">:</span> T)<span style="color:#3f8058;">:</span> T<span style="color:#3f8058;">;</span>
0137     <span style="color:#3f8058;">&lt;</span>noTag <span style="color:#3f8058;">/</span><span style="color:#3f8058;">&gt;</span>
0138 }
0139 <span style="font-weight:bold;font-style:italic;">class</span> Handler {
0140     info<span style="color:#3f8058;">:</span> <span style="color:#3f8058;">&lt;</span>T<span style="color:#3f8058;">&gt;</span>(arg<span style="color:#3f8058;">:</span> T)<span style="color:#3f8058;">:</span> T <span style="color:#3f8058;">&lt;</span>noTag <span style="color:#3f8058;">/</span><span style="color:#3f8058;">&gt;</span><span style="color:#3f8058;">;</span>
0141     <span style="font-weight:bold;">&lt;tag&gt;</span> <span style="font-weight:bold;">&lt;/tag&gt;</span>
0142 }
0143
0144 <span style="color:#7a7c7d;">// Highlight &quot;&lt;T extends&quot; as a type assertion, not as a tag</span>
0145 <span style="color:#7a7c7d;">// (the &quot;cast&quot; expression works and isn't supported in the TSX file)</span>
0146 <span style="font-weight:bold;">const</span> goodHighlighting <span style="color:#3f8058;">= &lt;</span>T <span style="font-weight:bold;font-style:italic;">extends</span> I<span style="color:#3f8058;">&gt;</span>(
0147   arg<span style="color:#3f8058;">:</span> T
0148 ) <span style="font-weight:bold;">=&gt;</span> {
0149   <span style="font-weight:bold;">const</span> a <span style="color:#3f8058;">=</span> arg
0150   <span style="color:#fdbc4b;font-weight:bold;">return</span> a
0151 }
0152 <span style="font-weight:bold;">&lt;tag&gt;</span> text <span style="color:#8e44ad;font-weight:bold;">&lt;T</span> <span style="color:#27ae60;">extends</span> <span style="color:#27ae60;">I</span><span style="color:#8e44ad;font-weight:bold;">/&gt;</span> <span style="font-weight:bold;">&lt;/tag&gt;</span> <span style="color:#7a7c7d;">// Here &quot;&lt;T extends I/&gt;&quot; is a tag</span>
0153
0154 <span style="color:#7a7c7d;">// Check character after tag name, do not highlight invalid tags</span>
0155 <span style="color:#3f8058;">&lt;</span>noTag  <span style="color:#3f8058;">?</span>
0156 <span style="color:#3f8058;">&lt;</span>noTag  <span style="color:#3f8058;">,</span>
0157 <span style="color:#3f8058;">&lt;</span>noTag <span style="color:#7a7c7d;">/* comment */</span> <span style="color:#3f8058;">?</span>
0158 <span style="color:#3f8058;">&lt;</span>noTag#
0159 <span style="color:#3f8058;">&lt;</span>noTag<span style="color:#7a7c7d;">/*comment*/</span>#
0160
0161 <span style="color:#7a7c7d;">// Conditionals expressions</span>
0162 <span style="font-weight:bold;font-style:italic;">let</span> y <span style="color:#3f8058;">=</span> foo <span style="color:#3f8058;">==</span> <span style="font-weight:bold;">null</span> <span style="color:#3f8058;">?</span> <span style="font-weight:bold;">null</span> <span style="color:#3f8058;">:</span> <span style="color:#8e44ad;font-weight:bold;">&lt;Tag/&gt;</span><span style="color:#3f8058;">;</span>
0163 <span style="font-weight:bold;font-style:italic;">let</span> x <span style="color:#3f8058;">=</span> (foo <span style="color:#3f8058;">===</span> <span style="font-weight:bold;">null</span> <span style="color:#3f8058;">||</span> foo <span style="color:#3f8058;">===</span> <span style="font-weight:bold;">undefined</span>) <span style="color:#3f8058;">?</span>
0164     <span style="font-weight:bold;">undefined</span> <span style="color:#3f8058;">:</span><span style="font-weight:bold;">&lt;tag&gt;</span>hello<span style="font-weight:bold;">&lt;/tag&gt;</span><span style="color:#3f8058;">;</span>
0165
0166 <span style="color:#7a7c7d;">// Tagged template literals</span>
0167 <span style="color:#8e44ad;">tagFunc</span><span style="color:#da4453;">`</span>
0168 <span style="color:#da4453;">    Hello world!</span>
0169 <span style="color:#da4453;">    </span><span style="color:#3daee9;">${</span> <span style="color:#8e44ad;font-weight:bold;">&lt;Tag</span> <span style="color:#8e44ad;font-weight:bold;">/&gt;</span><span style="color:#3f8058;">;</span> <span style="color:#f67400;">22</span> <span style="color:#3f8058;">+</span> <span style="color:#f44f4f;">&quot;11&quot;</span> <span style="color:#3daee9;">}</span><span style="color:#da4453;">`</span><span style="color:#3f8058;">;</span>
0170 obj<span style="color:#3f8058;">.</span><span style="color:#2980b9;">something</span><span style="color:#3f8058;">.</span><span style="color:#8e44ad;">tagFunc</span><span style="color:#da4453;">`Setting </span><span style="color:#3daee9;">${</span>setting<span style="color:#3daee9;">}</span><span style="color:#da4453;"> is </span><span style="color:#3daee9;">${</span>value<span style="color:#3daee9;">}</span><span style="color:#da4453;">!`</span><span style="color:#3f8058;">;</span>
0171 </pre></body></html>