// JavaScript React

/** @author Willy
* @url https://reactjs.org/ **/

import React from 'react';
import { PhotoStory, VideoStory } from './stories';

function Story(props) {
const SpecificStory = components[props.

];
return story={ props.

} attr2="&ref;" attr3="Hello\n" />;
}

function
attr1={ function <noTag/> return class var 0x123 { } &noRef; hello() React.Component() } attr2="&ref;">
/* no comment*/ function return class var 0x123 &ref; hello() React.Component()
. anyWord
{ function <tag> return class var 0x123 hello() React.Component() }

Tag$>

/*comment*/attr1/*comment*/= /*comment*/"value"/*comment*/attr2 /*comment*/attr3='a' key/*comment*/key2 />

// Detect Valid tags

/* comment */
{ /* comment
*/ />
word <noTag/> . <noTag/> } <noTag/>
return /* comment
multiline */ /* comment */
&& /*comment*/
& /*comment*/ <noTag/>

{ Hello }
? />;
[ /> ( /> ]
, =
&& ||
return ;
default ;
return

anyWord<noTag>
anyWord/*comment*/ <noTag/>
.<noTag>
&<notag> | <noTag/>
% /* comment*/ <noTag/>

// Non-ASCII tag name & attribute
<日本語>;
本本:本-本 aa本:本 aa:aa />

/>;
{ ... x } y
={2 } z />;

let k1 =

Hello

world

;
let k2 = ;

// Empty tags
<>; // no whitespace
< >; // lots of whitespace
< /*starting wrap*/ > /*ending wrap*/>; // comments in the tags
<>hi; // text inside
<>hi

bye

; // children
<>1<>2.12.23; // nested fragments
<>#; // # would cause scanning error if not in jsxtext

// Tags after substitutions in templates
${//comment
/*comment*/}

// Don't highlight tags within variable declaration
let myIdentity: <T>(arg: T) => T = identity;
var myIdentity: <U>(arg: U) => U = identity;
const myIdentity: {<T>(arg: T): T} = identity;

// Don't highlight tags within interfaces and classes
interface GenericIdentityFn {
<T>(arg: T): T;
<noTag />
}
class Handler {
info: <T>(arg: T): T <noTag />;

}

// Check character after tag name, do not highlight invalid tags
<noTag ?
<noTag ,
<noTag /* comment */ ?
<noTag#
<noTag/*comment*/#

// Tagged template literals
tagFunc

${ />; 22 + "11" };
obj.

.tagFunc${setting}${value};