Changeset View
Changeset View
Standalone View
Standalone View
autotests/folding/test.tsx.fold
| 1 | // TypeScript React | 1 | // TypeScript React | ||
|---|---|---|---|---|---|
| 2 | 2 | | |||
| 3 | <beginfold id='11'>/** </beginfold id='11'>@author Willy <willy@wmail.com> | 3 | <beginfold id='12'>/** </beginfold id='12'>@author Willy <willy@wmail.com> | ||
| 4 | * @url https://reactjs.org/ *<endfold id='11'>*/</endfold id='11'> | 4 | * @url https://reactjs.org/ *<endfold id='12'>*/</endfold id='12'> | ||
| 5 | 5 | | |||
| 6 | import React from 'react'; | 6 | import React from 'react'; | ||
| 7 | import <beginfold id='5'>{</beginfold id='5'> PhotoStory, VideoStory <endfold id='5'>}</endfold id='5'> from './stories'; | 7 | import <beginfold id='6'>{</beginfold id='6'> PhotoStory, VideoStory <endfold id='6'>}</endfold id='6'> from './stories'; | ||
| 8 | 8 | | |||
| 9 | function Story(props) <beginfold id='1'>{</beginfold id='1'> | 9 | function Story(props) <beginfold id='1'>{</beginfold id='1'> | ||
| 10 | const SpecificStory = components[props.storyType]; | 10 | const SpecificStory = components<beginfold id='2'>[</beginfold id='2'>props.storyType<endfold id='2'>]</endfold id='2'>; | ||
| 11 | return <beginfold id='3'><SpecificStory</beginfold id='3'> story=<beginfold id='4'>{</beginfold id='4'> props.story <endfold id='4'>}</endfold id='4'> attr2="&ref;" attr3="Hello\n" <endfold id='3'>/></endfold id='3'>; | 11 | 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'>; | ||
| 12 | <endfold id='1'>}</endfold id='1'> | 12 | <endfold id='1'>}</endfold id='1'> | ||
| 13 | 13 | | |||
| 14 | function | 14 | function | ||
| 15 | <beginfold id='3'><Tag</beginfold id='3'> attr1=<beginfold id='4'>{ </beginfold id='4'><beginfold id='2'><tag</beginfold id='2'><endfold id='2'>/></endfold id='2'> function <noTag/> return class var 0x123 <beginfold id='1'>{</beginfold id='1'> <endfold id='1'>}</endfold id='1'> &noRef; hello() React.Component() <endfold id='4'>}</endfold id='4'> attr2="&ref;"> | 15 | <beginfold id='4'><Tag</beginfold id='4'> attr1=<beginfold id='5'>{ </beginfold id='5'><beginfold id='3'><tag</beginfold id='3'><endfold id='3'>/></endfold id='3'> function <noTag/> return class var 0x123 <beginfold id='1'>{</beginfold id='1'> <endfold id='1'>}</endfold id='1'> &noRef; hello() React.Component() <endfold id='5'>}</endfold id='5'> attr2="&ref;"> | ||
| 16 | /* no comment*/ function <beginfold id='2'><tag</beginfold id='2'><endfold id='2'>/></endfold id='2'> return class var 0x123 &ref; hello() React.Component() | 16 | /* no comment*/ function <beginfold id='3'><tag</beginfold id='3'><endfold id='3'>/></endfold id='3'> return class var 0x123 &ref; hello() React.Component() | ||
| 17 | .<beginfold id='2'><tag</beginfold id='2'><endfold id='2'>/></endfold id='2'> anyWord <beginfold id='2'><tag</beginfold id='2'><endfold id='2'>/></endfold id='2'> | 17 | .<beginfold id='3'><tag</beginfold id='3'><endfold id='3'>/></endfold id='3'> anyWord <beginfold id='3'><tag</beginfold id='3'><endfold id='3'>/></endfold id='3'> | ||
| 18 | <beginfold id='4'>{</beginfold id='4'> function <tag> return class var 0x123 hello() React.Component() <endfold id='4'>}</endfold id='4'> | 18 | <beginfold id='5'>{</beginfold id='5'> function <tag> return class var 0x123 hello() React.Component() <endfold id='5'>}</endfold id='5'> | ||
| 19 | </Tag<endfold id='3'>></endfold id='3'> | 19 | </Tag<endfold id='4'>></endfold id='4'> | ||
| 20 | 20 | | |||
| 21 | <beginfold id='2'><tag1</beginfold id='2'>> </tag1<endfold id='2'>></endfold id='2'> | 21 | <beginfold id='3'><tag1</beginfold id='3'>> </tag1<endfold id='3'>></endfold id='3'> | ||
| 22 | <beginfold id='2'><tag1</beginfold id='2'>> </Tag$<endfold id='2'>></endfold id='2'> | 22 | <beginfold id='3'><tag1</beginfold id='3'>> </Tag$<endfold id='3'>></endfold id='3'> | ||
| 23 | <beginfold id='3'><Tag$</beginfold id='3'>> </tag<endfold id='3'>></endfold id='3'> | 23 | <beginfold id='4'><Tag$</beginfold id='4'>> </tag<endfold id='4'>></endfold id='4'> | ||
| 24 | 24 | | |||
| 25 | <beginfold id='2'><tag</beginfold id='2'><beginfold id='10'>/*</beginfold id='10'>comment<endfold id='10'>*/</endfold id='10'>attr1<beginfold id='10'>/*</beginfold id='10'>comment<endfold id='10'>*/</endfold id='10'>= <beginfold id='10'>/*</beginfold id='10'>comment<endfold id='10'>*/</endfold id='10'>"value"<beginfold id='10'>/*</beginfold id='10'>comment<endfold id='10'>*/</endfold id='10'>attr2 <beginfold id='10'>/*</beginfold id='10'>comment<endfold id='10'>*/</endfold id='10'>attr3='a' key<beginfold id='10'>/*</beginfold id='10'>comment<endfold id='10'>*/</endfold id='10'>key2 <endfold id='2'>/></endfold id='2'> | 25 | <beginfold id='3'><tag</beginfold id='3'><beginfold id='11'>/*</beginfold id='11'>comment<endfold id='11'>*/</endfold id='11'>attr1<beginfold id='11'>/*</beginfold id='11'>comment<endfold id='11'>*/</endfold id='11'>= <beginfold id='11'>/*</beginfold id='11'>comment<endfold id='11'>*/</endfold id='11'>"value"<beginfold id='11'>/*</beginfold id='11'>comment<endfold id='11'>*/</endfold id='11'>attr2 <beginfold id='11'>/*</beginfold id='11'>comment<endfold id='11'>*/</endfold id='11'>attr3='a' key<beginfold id='11'>/*</beginfold id='11'>comment<endfold id='11'>*/</endfold id='11'>key2 <endfold id='3'>/></endfold id='3'> | ||
| 26 | 26 | | |||
| 27 | // Detect Valid tags | 27 | // Detect Valid tags | ||
| 28 | 28 | | |||
| 29 | <beginfold id='10'>/*</beginfold id='10'> comment <endfold id='10'>*/</endfold id='10'> <beginfold id='2'><tag</beginfold id='2'>></tag<endfold id='2'>></endfold id='2'> | 29 | <beginfold id='11'>/*</beginfold id='11'> comment <endfold id='11'>*/</endfold id='11'> <beginfold id='3'><tag</beginfold id='3'>></tag<endfold id='3'>></endfold id='3'> | ||
| 30 | <beginfold id='1'>{ </beginfold id='1'><beginfold id='10'>/*</beginfold id='10'> comment | 30 | <beginfold id='1'>{ </beginfold id='1'><beginfold id='11'>/*</beginfold id='11'> comment | ||
| 31 | <endfold id='10'>*/</endfold id='10'> <beginfold id='3'><Tag</beginfold id='3'> <endfold id='3'>/></endfold id='3'> | 31 | <endfold id='11'>*/</endfold id='11'> <beginfold id='4'><Tag</beginfold id='4'> <endfold id='4'>/></endfold id='4'> | ||
| 32 | word <noTag/> . <noTag/> <endfold id='1'>}</endfold id='1'> <noTag/> | 32 | word <noTag/> . <noTag/> <endfold id='1'>}</endfold id='1'> <noTag/> | ||
| 33 | return <beginfold id='10'>/*</beginfold id='10'> comment | 33 | return <beginfold id='11'>/*</beginfold id='11'> comment | ||
| 34 | multiline <endfold id='10'>*/</endfold id='10'> <beginfold id='2'><tag</beginfold id='2'><endfold id='2'>/></endfold id='2'> <beginfold id='10'>/*</beginfold id='10'> comment <endfold id='10'>*/</endfold id='10'> <beginfold id='3'><Tag</beginfold id='3'><endfold id='3'>/></endfold id='3'> | 34 | multiline <endfold id='11'>*/</endfold id='11'> <beginfold id='3'><tag</beginfold id='3'><endfold id='3'>/></endfold id='3'> <beginfold id='11'>/*</beginfold id='11'> comment <endfold id='11'>*/</endfold id='11'> <beginfold id='4'><Tag</beginfold id='4'><endfold id='4'>/></endfold id='4'> | ||
| 35 | && <beginfold id='10'>/*</beginfold id='10'>comment<endfold id='10'>*/</endfold id='10'> <beginfold id='3'><Tag</beginfold id='3'><endfold id='3'>/></endfold id='3'> | 35 | && <beginfold id='11'>/*</beginfold id='11'>comment<endfold id='11'>*/</endfold id='11'> <beginfold id='4'><Tag</beginfold id='4'><endfold id='4'>/></endfold id='4'> | ||
| 36 | & <beginfold id='10'>/*</beginfold id='10'>comment<endfold id='10'>*/</endfold id='10'> <noTag/> | 36 | & <beginfold id='11'>/*</beginfold id='11'>comment<endfold id='11'>*/</endfold id='11'> <noTag/> | ||
| 37 | 37 | | |||
| 38 | <beginfold id='2'><tag</beginfold id='2'><endfold id='2'>/></endfold id='2'> | 38 | <beginfold id='3'><tag</beginfold id='3'><endfold id='3'>/></endfold id='3'> | ||
| 39 | <beginfold id='1'>{ </beginfold id='1'><beginfold id='2'><hello</beginfold id='2'>>Hello</hello<endfold id='2'>></endfold id='2'> <endfold id='1'>}</endfold id='1'> | 39 | <beginfold id='1'>{ </beginfold id='1'><beginfold id='3'><hello</beginfold id='3'>>Hello</hello<endfold id='3'>></endfold id='3'> <endfold id='1'>}</endfold id='1'> | ||
| 40 | ?<beginfold id='3'><Tag</beginfold id='3'> <endfold id='3'>/></endfold id='3'>; | 40 | ?<beginfold id='4'><Tag</beginfold id='4'> <endfold id='4'>/></endfold id='4'>; | ||
| 41 | [ <beginfold id='2'><tag</beginfold id='2'> <endfold id='2'>/></endfold id='2'> ( <beginfold id='2'><tag</beginfold id='2'> <endfold id='2'>/></endfold id='2'> | 41 | [ <beginfold id='3'><tag</beginfold id='3'> <endfold id='3'>/></endfold id='3'> ( <beginfold id='3'><tag</beginfold id='3'> <endfold id='3'>/></endfold id='3'> | ||
| 42 | ,<beginfold id='3'><Tag</beginfold id='3'><endfold id='3'>/></endfold id='3'> =<beginfold id='3'><Tag</beginfold id='3'><endfold id='3'>/></endfold id='3'> | 42 | ,<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'> | ||
| 43 | &&<beginfold id='2'><tag</beginfold id='2'><endfold id='2'>/></endfold id='2'> ||<beginfold id='2'><tag</beginfold id='2'><endfold id='2'>/></endfold id='2'> | 43 | &&<beginfold id='3'><tag</beginfold id='3'><endfold id='3'>/></endfold id='3'> ||<beginfold id='3'><tag</beginfold id='3'><endfold id='3'>/></endfold id='3'> | ||
| 44 | return <beginfold id='2'><tag</beginfold id='2'><endfold id='2'>/></endfold id='2'> ; | 44 | return <beginfold id='3'><tag</beginfold id='3'><endfold id='3'>/></endfold id='3'> ; | ||
| 45 | default<beginfold id='2'><tag</beginfold id='2'><endfold id='2'>/></endfold id='2'> ; | 45 | default<beginfold id='3'><tag</beginfold id='3'><endfold id='3'>/></endfold id='3'> ; | ||
| 46 | <beginfold id='3'><Tag</beginfold id='3'>> <beginfold id='2'><tag</beginfold id='2'>> <beginfold id='3'><tag$</beginfold id='3'><endfold id='3'>/></endfold id='3'> </tag<endfold id='2'>></endfold id='2'> return </Tag<endfold id='3'>></endfold id='3'> | 46 | <beginfold id='4'><Tag</beginfold id='4'>> <beginfold id='3'><tag</beginfold id='3'>> <beginfold id='4'><tag$</beginfold id='4'><endfold id='4'>/></endfold id='4'> </tag<endfold id='3'>></endfold id='3'> return </Tag<endfold id='4'>></endfold id='4'> | ||
| 47 | 47 | | |||
| 48 | anyWord<noTag> | 48 | anyWord<noTag> | ||
| 49 | anyWord<beginfold id='10'>/*</beginfold id='10'>comment<endfold id='10'>*/</endfold id='10'> <noTag/> | 49 | anyWord<beginfold id='11'>/*</beginfold id='11'>comment<endfold id='11'>*/</endfold id='11'> <noTag/> | ||
| 50 | .<noTag> | 50 | .<noTag> | ||
| 51 | &<notag> | <noTag/> | 51 | &<notag> | <noTag/> | ||
| 52 | % <beginfold id='10'>/*</beginfold id='10'> comment<endfold id='10'>*/</endfold id='10'> <noTag/> | 52 | % <beginfold id='11'>/*</beginfold id='11'> comment<endfold id='11'>*/</endfold id='11'> <noTag/> | ||
| 53 | 53 | | |||
| 54 | annotation: <beginfold id='2'><tag</beginfold id='2'><endfold id='2'>/></endfold id='2'> | 54 | // TODO: Fix this (comment before the tag name): | ||
| 55 | annotation: text [ <beginfold id='2'><tag</beginfold id='2'><endfold id='2'>/></endfold id='2'> ] | 55 | var x = </**/div></div>; | ||
| 56 | | ||||
| 57 | // Tag after ":" | ||||
| 58 | annotation: <beginfold id='3'><tag</beginfold id='3'><endfold id='3'>/></endfold id='3'> | ||||
| 59 | annotation: text <beginfold id='2'>[</beginfold id='2'> <beginfold id='3'><tag</beginfold id='3'><endfold id='3'>/></endfold id='3'> <endfold id='2'>]</endfold id='2'> | ||||
| 56 | console.log("hello") | 60 | console.log("hello") | ||
| 61 | | ||||
| 62 | // Type assertion in tag | ||||
| 63 | <beginfold id='4'><C</beginfold id='4'><number><endfold id='4'>/></endfold id='4'> | ||||
| 64 | <beginfold id='4'><C</beginfold id='4'><number>> </C<endfold id='4'>></endfold id='4'> | ||||
| 65 | <beginfold id='4'><C</beginfold id='4'> | ||||
| 66 | <error <endfold id='4'>/></endfold id='4'> | ||||
| 67 | | ||||
| 68 | // Non-ASCII tag name & attribute | ||||
| 69 | <beginfold id='4'><</beginfold id='4'>日本語></日本語<endfold id='4'>></endfold id='4'>; | ||||
| 70 | <beginfold id='4'><Component</beginfold id='4'> 本本:本-本 aa本:本 aa:aa <endfold id='4'>/></endfold id='4'> | ||||
| 71 | <beginfold id='4'><</beginfold id='4'>aaaa:ñ <endfold id='4'>/></endfold id='4'> | ||||
| 72 | | ||||
| 73 | <beginfold id='4'><Namespace.DeepNamespace.Component</beginfold id='4'> <endfold id='4'>/></endfold id='4'>; | ||||
| 74 | <beginfold id='4'><Component</beginfold id='4'> <beginfold id='5'>{</beginfold id='5'> ... x <endfold id='5'>}</endfold id='5'> y | ||||
| 75 | =<beginfold id='5'>{</beginfold id='5'>2 <endfold id='5'>}</endfold id='5'> z <endfold id='4'>/></endfold id='4'>; | ||||
| 76 | | ||||
| 77 | let k1 = | ||||
| 78 | <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'> > | ||||
| 79 | hi hi hi! | ||||
| 80 | </Comp<endfold id='4'>></endfold id='4'>; | ||||
| 81 | | ||||
| 82 | let k2 = | ||||
| 83 | <beginfold id='4'><Comp</beginfold id='4'> a=<beginfold id='5'>{</beginfold id='5'>10<endfold id='5'>}</endfold id='5'> b="hi"> | ||||
| 84 | <beginfold id='3'><div</beginfold id='3'>> My Div </div<endfold id='3'>></endfold id='3'> | ||||
| 85 | <beginfold id='5'>{</beginfold id='5'>(name: string) => <beginfold id='3'><div</beginfold id='3'>> My name <beginfold id='5'>{</beginfold id='5'>name<endfold id='5'>}</endfold id='5'> </div<endfold id='3'>></endfold id='3'><endfold id='5'>}</endfold id='5'> | ||||
| 86 | </Comp<endfold id='4'>></endfold id='4'>; | ||||
| 87 | | ||||
| 88 | let k3 = <beginfold id='4'><GenericComponent</beginfold id='4'> initialValues=<beginfold id='5'>{</beginfold id='5'><beginfold id='1'>{</beginfold id='1'> x: "y" <endfold id='1'>}</endfold id='1'><endfold id='5'>}</endfold id='5'> nextValues=<beginfold id='5'>{</beginfold id='5'>a => (<beginfold id='1'>{</beginfold id='1'> x: a.x <endfold id='1'>}</endfold id='1'>)<endfold id='5'>}</endfold id='5'> <endfold id='4'>/></endfold id='4'>; // No Error | ||||
| 89 | | ||||
| 90 | // OK | ||||
| 91 | 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='3'><></beginfold id='3'><endfold id='3'></></endfold id='3'><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'>; | ||||
| 92 | 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='3'><></beginfold id='3'><beginfold id='4'><Button</beginfold id='4'> <endfold id='4'>/></endfold id='4'><endfold id='3'></></endfold id='3'><beginfold id='4'><AnotherButton</beginfold id='4'> <endfold id='4'>/></endfold id='4'></Comp<endfold id='4'>></endfold id='4'>; | ||||
| 93 | 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='3'><></beginfold id='3'><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='3'></></endfold id='3'></Comp<endfold id='4'>></endfold id='4'>; | ||||
| 94 | 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='3'><></beginfold id='3'><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='3'></></endfold id='3'></SingleChildComp<endfold id='4'>></endfold id='4'>; | ||||
| 95 | // OK | ||||
| 96 | let k1 = <beginfold id='3'><div</beginfold id='3'>> <beginfold id='3'><h2</beginfold id='3'>> Hello </h2<endfold id='3'>></endfold id='3'> <beginfold id='3'><h1</beginfold id='3'>> world </h1<endfold id='3'>></endfold id='3'></div<endfold id='3'>></endfold id='3'>; | ||||
| 97 | let k2 = <beginfold id='3'><div</beginfold id='3'>> <beginfold id='3'><h2</beginfold id='3'>> Hello </h2<endfold id='3'>></endfold id='3'> <beginfold id='5'>{</beginfold id='5'>(user: any) => <beginfold id='3'><h2</beginfold id='3'>><beginfold id='5'>{</beginfold id='5'>user.name<endfold id='5'>}</endfold id='5'></h2<endfold id='3'>></endfold id='3'><endfold id='5'>}</endfold id='5'></div<endfold id='3'>></endfold id='3'>; | ||||
| 98 | let k3 = <beginfold id='3'><div</beginfold id='3'>> <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='3'>></endfold id='3'>; | ||||
| 99 | let k4 = <beginfold id='4'><Button</beginfold id='4'>> <beginfold id='3'><h2</beginfold id='3'>> Hello </h2<endfold id='3'>></endfold id='3'> </Button<endfold id='4'>></endfold id='4'>; | ||||
| 100 | | ||||
| 101 | // Empty tags | ||||
| 102 | hello<> | ||||
| 103 | hello<string> | ||||
| 104 | | ||||
| 105 | <beginfold id='3'><></beginfold id='3'><endfold id='3'></></endfold id='3'>; // no whitespace | ||||
| 106 | <beginfold id='3'>< ></beginfold id='3'><endfold id='3'></ ></endfold id='3'>; // lots of whitespace | ||||
| 107 | < <beginfold id='11'>/*</beginfold id='11'>starting wrap<endfold id='11'>*/</endfold id='11'> ></ <beginfold id='11'>/*</beginfold id='11'>ending wrap<endfold id='11'>*/</endfold id='11'>>; // comments in the tags | ||||
| 108 | <beginfold id='3'><></beginfold id='3'>hi<endfold id='3'></></endfold id='3'>; // text inside | ||||
| 109 | <beginfold id='3'><></beginfold id='3'><beginfold id='3'><span</beginfold id='3'>>hi</span<endfold id='3'>></endfold id='3'><beginfold id='3'><div</beginfold id='3'>>bye</div<endfold id='3'>></endfold id='3'><endfold id='3'></></endfold id='3'>; // children | ||||
| 110 | <beginfold id='3'><></beginfold id='3'><beginfold id='3'><span</beginfold id='3'>>1</span<endfold id='3'>></endfold id='3'><beginfold id='3'><></beginfold id='3'><beginfold id='3'><span</beginfold id='3'>>2.1</span<endfold id='3'>></endfold id='3'><beginfold id='3'><span</beginfold id='3'>>2.2</span<endfold id='3'>></endfold id='3'><endfold id='3'></></endfold id='3'><beginfold id='3'><span</beginfold id='3'>>3</span<endfold id='3'>></endfold id='3'><endfold id='3'></></endfold id='3'>; // nested fragments | ||||
| 111 | <beginfold id='3'><></beginfold id='3'>#<endfold id='3'></></endfold id='3'>; // # would cause scanning error if not in jsxtext | ||||