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