Changeset View
Changeset View
Standalone View
Standalone View
autotests/html/test.tsx.html
- This file was copied from autotests/html/test.jsx.html.
| 1 | <!DOCTYPE html> | 1 | <!DOCTYPE html> | ||
|---|---|---|---|---|---|
| 2 | <html><head> | 2 | <html><head> | ||
| 3 | <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> | 3 | <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> | ||
| 4 | <title>test.jsx</title> | 4 | <title>test.tsx</title> | ||
| 5 | <meta name="generator" content="KF5::SyntaxHighlighting (JavaScript React)"/> | 5 | <meta name="generator" content="KF5::SyntaxHighlighting (TypeScript React)"/> | ||
| 6 | </head><body style="color:#1f1c1b"><pre> | 6 | </head><body style="color:#1f1c1b"><pre> | ||
| 7 | <span style="color:#898887;">/* email: <</span><span style="color:#898887;text-decoration:underline;">willy@wmail.com</span><span style="color:#898887;">></span> | 7 | <span style="color:#898887;">// TypeScript React</span> | ||
| 8 | <span style="color:#898887;"> * URL: </span><span style="color:#898887;text-decoration:underline;">https://reactjs.org/</span><span style="color:#898887;">*/</span> | 8 | | ||
| 9 | <span style="color:#898887;">/** </span><span style="color:#ca60ca;font-weight:bold;">@author</span><span style="color:#898887;"> Willy </span><span style="color:#000000;font-weight:bold;"><willy@wmail.com></span> | ||||
| 10 | <span style="color:#898887;"> * </span><span style="color:#ca60ca;">@url</span><span style="color:#898887;"> https://reactjs.org/ **/</span> | ||||
| 9 | 11 | | |||
| 10 | <span style="color:#ff5500;">import</span> React <span style="color:#ff5500;">from</span> <span style="color:#bf0303;">'react'</span>; | 12 | <span style="color:#ff5500;">import</span> React <span style="color:#ff5500;">from</span> <span style="color:#bf0303;">'react'</span>; | ||
| 11 | <span style="color:#ff5500;">import</span> { PhotoStory, VideoStory } <span style="color:#ff5500;">from</span> <span style="color:#bf0303;">'./stories'</span>; | 13 | <span style="color:#ff5500;">import</span> { PhotoStory, VideoStory } <span style="color:#ff5500;">from</span> <span style="color:#bf0303;">'./stories'</span>; | ||
| 12 | 14 | | |||
| 13 | <span style="font-weight:bold;">function</span> <span style="color:#0057ae;">Story</span>(props) { | 15 | <span style="font-weight:bold;">function</span> <span style="color:#644a9b;">Story</span>(props) { | ||
| 14 | <span style="font-weight:bold;">const</span> SpecificStory = components[<span style="color:#0057ae;">props</span>.<span style="color:#0057ae;">storyType</span>]; | 16 | <span style="font-weight:bold;">const</span> SpecificStory = components[<span style="color:#0057ae;">props</span>.<span style="color:#0057ae;">storyType</span>]; | ||
| 15 | <span style="font-weight:bold;">return </span><span style="color:#644a9b;font-weight:bold;"><SpecificStory</span> <span style="color:#006e28;">story</span>=<span style="color:#0057ae;">{</span> <span style="color:#0057ae;">props</span>.<span style="color:#0057ae;">story</span> <span style="color:#0057ae;">}</span> <span style="color:#006e28;">attr2</span>=<span style="color:#bf0303;">"</span><span style="color:#b08000;">&ref;</span><span style="color:#bf0303;">"</span> <span style="color:#006e28;">attr3</span>=<span style="color:#bf0303;">"Hello\n"</span> <span style="color:#644a9b;font-weight:bold;">/></span>; | 17 | <span style="font-weight:bold;">return </span><span style="color:#644a9b;font-weight:bold;"><SpecificStory</span> <span style="color:#006e28;">story</span>=<span style="color:#0057ae;">{</span> <span style="color:#0057ae;">props</span>.<span style="color:#0057ae;">story</span> <span style="color:#0057ae;">}</span> <span style="color:#006e28;">attr2</span>=<span style="color:#bf0303;">"</span><span style="color:#b08000;">&ref;</span><span style="color:#bf0303;">"</span> <span style="color:#006e28;">attr3</span>=<span style="color:#bf0303;">"Hello\n"</span> <span style="color:#644a9b;font-weight:bold;">/></span>; | ||
| 16 | } | 18 | } | ||
| 17 | 19 | | |||
| 18 | <span style="font-weight:bold;">function</span> | 20 | <span style="font-weight:bold;">function</span> | ||
| 19 | <span style="color:#644a9b;font-weight:bold;"><Tag</span> <span style="color:#006e28;">attr1</span>=<span style="color:#0057ae;">{ </span><span style="font-weight:bold;"><tag/></span> <span style="font-weight:bold;">function</span> <noTag/> <span style="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:#b08000;">0x123</span> { } &noRef; <span style="color:#0057ae;">hello</span>() <span style="color:#0057ae;">React</span>.<span style="color:#0057ae;">Component</span>() <span style="color:#0057ae;">}</span> <span style="color:#006e28;">attr2</span>=<span style="color:#bf0303;">"</span><span style="color:#b08000;">&ref;</span><span style="color:#bf0303;">"</span><span style="color:#644a9b;font-weight:bold;">></span> | 21 | <span style="color:#644a9b;font-weight:bold;"><Tag</span> <span style="color:#006e28;">attr1</span>=<span style="color:#0057ae;">{ </span><span style="font-weight:bold;"><tag/></span> <span style="font-weight:bold;">function</span> <noTag/> <span style="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:#b08000;">0x123</span> { } &noRef; <span style="color:#644a9b;">hello</span>() <span style="color:#0057ae;">React</span>.<span style="color:#644a9b;">Component</span>() <span style="color:#0057ae;">}</span> <span style="color:#006e28;">attr2</span>=<span style="color:#bf0303;">"</span><span style="color:#b08000;">&ref;</span><span style="color:#bf0303;">"</span><span style="color:#644a9b;font-weight:bold;">></span> | ||
| 20 | /* no comment*/ function <span style="font-weight:bold;"><tag/></span> return class var 0x123 <span style="color:#b08000;">&ref;</span> hello() React.Component() | 22 | /* no comment*/ function <span style="font-weight:bold;"><tag/></span> return class var 0x123 <span style="color:#b08000;">&ref;</span> hello() React.Component() | ||
| 21 | .<span style="font-weight:bold;"><tag/></span> anyWord <span style="font-weight:bold;"><tag/></span> | 23 | .<span style="font-weight:bold;"><tag/></span> anyWord <span style="font-weight:bold;"><tag/></span> | ||
| 22 | <span style="color:#0057ae;">{</span> <span style="font-weight:bold;">function</span> <tag> <span style="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:#b08000;">0x123</span> <span style="color:#0057ae;">hello</span>() <span style="color:#0057ae;">React</span>.<span style="color:#0057ae;">Component</span>() <span style="color:#0057ae;">}</span> | 24 | <span style="color:#0057ae;">{</span> <span style="font-weight:bold;">function</span> <tag> <span style="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:#b08000;">0x123</span> <span style="color:#644a9b;">hello</span>() <span style="color:#0057ae;">React</span>.<span style="color:#644a9b;">Component</span>() <span style="color:#0057ae;">}</span> | ||
| 23 | <span style="color:#644a9b;font-weight:bold;"></Tag></span> | 25 | <span style="color:#644a9b;font-weight:bold;"></Tag></span> | ||
| 24 | 26 | | |||
| 25 | <span style="font-weight:bold;"><tag1></span> <span style="font-weight:bold;"></tag1></span> | 27 | <span style="font-weight:bold;"><tag1></span> <span style="font-weight:bold;"></tag1></span> | ||
| 26 | <span style="font-weight:bold;"><tag1></span> <span style="font-weight:bold;"></</span><span style="color:#bf0303;text-decoration:underline;">Tag$</span><span style="font-weight:bold;">></span> | 28 | <span style="font-weight:bold;"><tag1></span> <span style="font-weight:bold;"></</span><span style="color:#bf0303;text-decoration:underline;">Tag$</span><span style="font-weight:bold;">></span> | ||
| 27 | <span style="color:#644a9b;font-weight:bold;"><Tag$></span> <span style="color:#644a9b;font-weight:bold;"></tag></span> | 29 | <span style="color:#644a9b;font-weight:bold;"><Tag$></span> <span style="color:#644a9b;font-weight:bold;"></tag></span> | ||
| 28 | 30 | | |||
| 29 | <span style="font-weight:bold;"><tag</span><span style="color:#898887;">/*comment*/</span><span style="color:#006e28;">attr1</span><span style="color:#898887;">/*comment*/</span>= <span style="color:#898887;">/*comment*/</span><span style="color:#bf0303;">"value"</span><span style="color:#898887;">/*comment*/</span><span style="color:#006e28;">attr2</span> <span style="color:#898887;">/*comment*/</span><span style="color:#006e28;">attr3</span>=<span style="color:#bf0303;">'a'</span> <span style="color:#006e28;">key</span><span style="color:#898887;">/*comment*/</span><span style="color:#006e28;">key2</span> <span style="font-weight:bold;">/></span> | 31 | <span style="font-weight:bold;"><tag</span><span style="color:#898887;">/*comment*/</span><span style="color:#006e28;">attr1</span><span style="color:#898887;">/*comment*/</span>= <span style="color:#898887;">/*comment*/</span><span style="color:#bf0303;">"value"</span><span style="color:#898887;">/*comment*/</span><span style="color:#006e28;">attr2</span> <span style="color:#898887;">/*comment*/</span><span style="color:#006e28;">attr3</span>=<span style="color:#bf0303;">'a'</span> <span style="color:#006e28;">key</span><span style="color:#898887;">/*comment*/</span><span style="color:#006e28;">key2</span> <span style="font-weight:bold;">/></span> | ||
| 30 | 32 | | |||
| Show All 18 Lines | |||||
| 49 | <span style="color:#ff5500;">default</span><span style="font-weight:bold;"><tag/></span> ; | 51 | <span style="color:#ff5500;">default</span><span style="font-weight:bold;"><tag/></span> ; | ||
| 50 | <span style="color:#644a9b;font-weight:bold;"><Tag></span> <span style="font-weight:bold;"><tag></span> <span style="color:#644a9b;font-weight:bold;"><tag$/></span> <span style="font-weight:bold;"></tag></span> return <span style="color:#644a9b;font-weight:bold;"></Tag></span> | 52 | <span style="color:#644a9b;font-weight:bold;"><Tag></span> <span style="font-weight:bold;"><tag></span> <span style="color:#644a9b;font-weight:bold;"><tag$/></span> <span style="font-weight:bold;"></tag></span> return <span style="color:#644a9b;font-weight:bold;"></Tag></span> | ||
| 51 | 53 | | |||
| 52 | anyWord<noTag> | 54 | anyWord<noTag> | ||
| 53 | anyWord<span style="color:#898887;">/*comment*/</span> <noTag/> | 55 | anyWord<span style="color:#898887;">/*comment*/</span> <noTag/> | ||
| 54 | .<noTag> | 56 | .<noTag> | ||
| 55 | &<notag> | <noTag/> | 57 | &<notag> | <noTag/> | ||
| 56 | % <span style="color:#898887;">/* comment*/</span> <noTag/> | 58 | % <span style="color:#898887;">/* comment*/</span> <noTag/> | ||
| 59 | | ||||
| 60 | annotation: <span style="font-weight:bold;"><tag/></span> | ||||
| 61 | annotation: text [ <span style="font-weight:bold;"><tag/></span> ] | ||||
| 62 | <span style="color:#644a9b;font-weight:bold;">console</span>.<span style="color:#644a9b;font-style:italic;">log</span>(<span style="color:#bf0303;">"hello"</span>) | ||||
| 57 | </pre></body></html> | 63 | </pre></body></html> | ||