1// JavaScript React 2 3/** @author Willy <willy@wmail.com> 4 * @url https://reactjs.org/ **/ 5 6import React from 'react'; 7import { PhotoStory, VideoStory } from './stories'; 8 9function Story(props) { 10 const SpecificStory = components[props.storyType]; 11 return <SpecificStory story={ props.story } attr2="&ref;" attr3="Hello\n" />; 12} 13 14function 15<Tag attr1={ <tag/> function <noTag/> return class var 0x123 { } &noRef; hello() React.Component() } attr2="&ref;"> 16 /* no comment*/ function <tag/> return class var 0x123 &ref; hello() React.Component() 17 .<tag/> anyWord <tag/> 18 { function <tag> return class var 0x123 hello() React.Component() } 19</Tag> 20 21<tag1> </tag1> 22<tag1> </Tag$> 23<Tag$> </tag> 24 25<tag/*comment*/attr1/*comment*/= /*comment*/"value"/*comment*/attr2 /*comment*/attr3='a' key/*comment*/key2 /> 26 27// Detect Valid tags 28 29/* comment */ <tag></tag> 30{ /* comment 31 */ <Tag /> 32 word <noTag/> . <noTag/> } <noTag/> 33return /* comment 34 multiline */ <tag/> /* comment */ <Tag/> 35&& /*comment*/ <Tag/> 36& /*comment*/ <noTag/> 37 38 <tag/> 39{ <hello>Hello</hello> } 40?<Tag />; 41[ <tag /> ( <tag /> ] 42,<Tag/> =<Tag/> 43&&<tag/> ||<tag/> 44return <tag/> ; 45default<tag/> ; 46<Tag> <tag> <tag$/> </tag> return </Tag> 47 48anyWord<noTag> 49anyWord/*comment*/ <noTag/> 50.<noTag> 51&<notag> | <noTag/> 52% /* comment*/ <noTag/> 53 54// Non-ASCII tag name & attribute 55<日本語></日本語>; 56<Component 本本:本-本 aa本:本 aa:aa /> 57 58<Namespace.DeepNamespace.Component />; 59<Component { ... x } y 60={2 } z />; 61 62let k1 = <div> <h2> Hello </h2> <h1> world </h1></div>; 63let k2 = <Button> <h2> Hello </h2> </Button>; 64 65// Empty tags 66<></>; // no whitespace 67< ></ >; // lots of whitespace 68< /*starting wrap*/ ></ /*ending wrap*/>; // comments in the tags 69<>hi</>; // text inside 70<><span>hi</span><div>bye</div></>; // children 71<><span>1</span><><span>2.1</span><span>2.2</span></><span>3</span></>; // nested fragments 72<>#</>; // # would cause scanning error if not in jsxtext 73 74// Tags after substitutions in templates 75`aaa${<tag></tag>//comment 76 /*comment*/<A/>}` 77 78// Don't highlight tags within variable declaration 79let myIdentity: <T>(arg: T) => T = identity; 80var myIdentity: <U>(arg: U) => U = identity; 81const myIdentity: {<T>(arg: T): T} = identity; 82 83// Don't highlight tags within interfaces and classes 84interface GenericIdentityFn { 85 <T>(arg: T): T; 86 <noTag /> 87} 88class Handler { 89 info: <T>(arg: T): T <noTag />; 90 <tag> </tag> 91} 92 93// Check character after tag name, do not highlight invalid tags 94<noTag ? 95<noTag , 96<noTag /* comment */ ? 97<noTag# 98<noTag/*comment*/# 99 100// Tagged template literals 101tagFunc` 102 Hello world! 103 ${ <Tag />; 22 + "11" }`; 104obj.something.tagFunc`Setting ${setting} is ${value}!`; 105