// TypeScript React
/** @author Willy
* @url https://reactjs.org/ **/
import React from 'react';
import { PhotoStory, VideoStory } from './stories';
function Story(props) {
const SpecificStory = components[props.storyType];
return story={ props.story } attr2="&ref;" attr3="Hello\n" />;
}
function
attr1={ /> function return class var 0x123 { } &noRef; hello() React.Component() } attr2="&ref;">
/* no comment*/ function /> return class var 0x123 &ref; hello() React.Component()
./> anyWord />
{ function return class var 0x123 hello() React.Component() }
>
> >
> >
> >
/*comment*/attr1/*comment*/= /*comment*/"value"/*comment*/attr2 /*comment*/attr3='a' key/*comment*/key2 />
// Detect Valid tags
/* comment */ >>
{ /* comment
*/ />
word . }
return /* comment
multiline */ /> /* comment */ />
&& /*comment*/ />
& /*comment*/
/>
{ >Hello> }
? />;
[ /> ( />
,/> =/>
&&/> ||/>
return /> ;
default/> ;
> > /> > return >
anyWord
anyWord/*comment*/
.
& |
% /* comment*/
// TODO: Fix this (comment before the tag name):
var x = </**/div>;
// Tag after ":"
annotation: />
annotation: text [ /> ]
console.log("hello")
// Type assertion in tag
/>
> >
/>
// Non-ASCII tag name & attribute
<日本語>>;
本本:本-本 aa本:本 aa:aa />
/>
/>;
{ ... x } y
={2 } z />;
let k1 =
a={10} b="hi" {...o} >
hi hi hi!
>;
let k2 =
a={10} b="hi">
> My Div >
{(name: string) => > My name {name} >}
>;
let k3 = initialValues={{ x: "y" }} nextValues={a => ({ x: a.x })} />; // No Error
// OK
let k1 = a={10} b="hi"><> /> />>;
let k2 = a={10} b="hi"><> /> />>;
let k3 = a={10} b="hi"><> /> />>;
let k4 = a={10} b="hi"><> /> />>;
// OK
let k1 = > > Hello > > world >>;
let k2 = > > Hello > {(user: any) => >{user.name}>}>;
let k3 = > {1} {"That is a number"} >;
let k4 = > > Hello > >;
// Empty tags
hello<>
hello
<>; // no whitespace
< >; // lots of whitespace
< /*starting wrap*/ >/*ending wrap*/>; // comments in the tags
<>hi; // text inside
<>>hi>>bye>; // children
<>>1><>>2.1>>2.2>>3>; // nested fragments
<>#; // # would cause scanning error if not in jsxtext
// Tags after substitutions in templates
`aaa${>>//comment
/*comment*//>}`
// Don't highlight tags within type declaration
type T12 = ReturnType<(() => T)>;
type T13 = ReturnType<([]>() => T)>;
type T14 = ReturnType;
type T15 = ReturnType<(s: string) => void>;
// Don't highlight tags within variable declaration
let myIdentity: (arg: T) => T = />;
var myIdentity: (arg: U) => U = identity;
const myIdentity: {(arg: T): T} = identity;
// Don't highlight tags within interfaces and classes
interface GenericIdentityFn {
(arg: T): T;
}
class Handler {
info: (arg: T): T ;
> >
}
// Highlight "(
arg: T
) => {
const a = arg
return a
}
> text extends I/> > // Here "" is a tag
// Check character after tag name, do not highlight invalid tags
/* comment */ ?
/*comment*/#
// Conditionals expressions
let y = foo == null ? null : />;
let x = (foo === null || foo === undefined) ?
undefined :>hello>;
// Tagged template literals
tagFunc`
Hello world!
${ />; 22 + "11" }`;
obj.something.tagFunc`Setting ${setting} is ${value}!`;