autotests/input/test.tsx

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