232 строки
14 KiB
Plaintext
232 строки
14 KiB
Plaintext
original file
|
|
-----------------------------------
|
|
// @onlyOwnGrammar - As this has jsx
|
|
class MyComponent extends React.Component<Props, State>{
|
|
render() {
|
|
return ^^<^^div ^^onClick={^^this.stop}>
|
|
^^This is a test: {this.state.count}
|
|
</div>
|
|
}
|
|
}
|
|
|
|
// JSX in Depth
|
|
// http://facebook.github.io/react/docs/jsx-in-depth.html
|
|
var App =
|
|
^^<^^Form>
|
|
^^<^^FormRow>
|
|
^^<^^FormLabel ^^data="^^1" />
|
|
^^<^^FormInput ^^data="^^2" />
|
|
^^</^^FormRow>
|
|
^^</^^Form>
|
|
|
|
var App2 = (
|
|
^^<^^Form>
|
|
^^<^^FormRow>
|
|
^^<^^FormLabel ^^data='^^1' />
|
|
^^<^^FormInput ^^data='^^2' />
|
|
^^</^^FormRow>
|
|
^^</^^Form>
|
|
)
|
|
|
|
var content = (
|
|
^^<^^Nav>
|
|
{/* child comment, put {} around */}
|
|
^^<^^Person ^^name={^^window.isLoggedIn ? window.name : ''}
|
|
^^/>
|
|
^^</Nav>
|
|
);
|
|
|
|
// JSX Spread Attributes
|
|
// http://facebook.github.io/react/docs/jsx-spread.html
|
|
var props = {};
|
|
props.foo = x;
|
|
props.bar = y;
|
|
var component = ^^<^^Component {^^...props} ^^/>;
|
|
|
|
var props2 = { foo: 'default' }
|
|
var component2 = ^^<^^Component {^^...props} foo={'override'} ^^/>
|
|
|
|
// JSX Gotchas
|
|
// http://facebook.github.io/react/docs/jsx-gotchas.html
|
|
var a = <div>{^^'First \u00b7 Second'}</div>
|
|
var b = <div>{'First ' + ^^String.fromCharCode(183) + ' Second'}</div>
|
|
var c = <div>{['First ', ^^<span>·</span>, ' Second']}</div>
|
|
var d = <div dangerouslySetInnerHTML={{^^__html: ^^'First · Second'}} />
|
|
var e = <div data-custom-attribute="^^foo" />
|
|
|
|
-----------------------------------
|
|
|
|
Grammar: TypeScriptReact.tmLanguage
|
|
-----------------------------------
|
|
>// @onlyOwnGrammar - As this has jsx
|
|
>class MyComponent extends React.Component<Props, State>{
|
|
> render() {
|
|
> return <div onClick={this.stop}>
|
|
^
|
|
[4, 16]: source.tsx meta.class.tsx meta.method.declaration.tsx meta.block.tsx meta.tag.tsx punctuation.definition.tag.begin.tsx
|
|
^^^
|
|
[4, 17]: source.tsx meta.class.tsx meta.method.declaration.tsx meta.block.tsx meta.tag.tsx entity.name.tag.tsx
|
|
^^^^^^^
|
|
[4, 21]: source.tsx meta.class.tsx meta.method.declaration.tsx meta.block.tsx meta.tag.tsx meta.tag.attribute-name.tsx entity.other.attribute-name.tsx
|
|
^^^^
|
|
[4, 30]: source.tsx meta.class.tsx meta.method.declaration.tsx meta.block.tsx meta.tag.tsx meta.embedded.expression.tsx variable.language.this.tsx
|
|
> This is a test: {this.state.count}
|
|
^^^^^^^^^^^^^^^^^^^^^^^^^^^^
|
|
[5, 13]: source.tsx meta.class.tsx meta.method.declaration.tsx meta.block.tsx meta.tag.tsx meta.jsx.children.tsx
|
|
> </div>
|
|
> }
|
|
>}
|
|
>
|
|
>// JSX in Depth
|
|
>// http://facebook.github.io/react/docs/jsx-in-depth.html
|
|
>var App =
|
|
> <Form>
|
|
^
|
|
[13, 5]: source.tsx meta.tag.without-attributes.tsx punctuation.definition.tag.begin.tsx
|
|
^^^^
|
|
[13, 6]: source.tsx meta.tag.without-attributes.tsx entity.name.tag.tsx
|
|
> <FormRow>
|
|
^
|
|
[14, 9]: source.tsx meta.tag.without-attributes.tsx meta.jsx.children.tsx meta.tag.without-attributes.tsx punctuation.definition.tag.begin.tsx
|
|
^^^^^^^
|
|
[14, 10]: source.tsx meta.tag.without-attributes.tsx meta.jsx.children.tsx meta.tag.without-attributes.tsx entity.name.tag.tsx
|
|
> <FormLabel data="1" />
|
|
^
|
|
[15, 13]: source.tsx meta.tag.without-attributes.tsx meta.jsx.children.tsx meta.tag.without-attributes.tsx meta.jsx.children.tsx meta.tag.tsx punctuation.definition.tag.begin.tsx
|
|
^^^^^^^^^
|
|
[15, 14]: source.tsx meta.tag.without-attributes.tsx meta.jsx.children.tsx meta.tag.without-attributes.tsx meta.jsx.children.tsx meta.tag.tsx entity.name.tag.tsx
|
|
^^^^
|
|
[15, 24]: source.tsx meta.tag.without-attributes.tsx meta.jsx.children.tsx meta.tag.without-attributes.tsx meta.jsx.children.tsx meta.tag.tsx meta.tag.attribute-name.tsx entity.other.attribute-name.tsx
|
|
^
|
|
[15, 30]: source.tsx meta.tag.without-attributes.tsx meta.jsx.children.tsx meta.tag.without-attributes.tsx meta.jsx.children.tsx meta.tag.tsx string.jsxAttributeValue.quoted.double.tsx
|
|
> <FormInput data="2" />
|
|
^
|
|
[16, 13]: source.tsx meta.tag.without-attributes.tsx meta.jsx.children.tsx meta.tag.without-attributes.tsx meta.jsx.children.tsx meta.tag.tsx punctuation.definition.tag.begin.tsx
|
|
^^^^^^^^^
|
|
[16, 14]: source.tsx meta.tag.without-attributes.tsx meta.jsx.children.tsx meta.tag.without-attributes.tsx meta.jsx.children.tsx meta.tag.tsx entity.name.tag.tsx
|
|
^^^^
|
|
[16, 24]: source.tsx meta.tag.without-attributes.tsx meta.jsx.children.tsx meta.tag.without-attributes.tsx meta.jsx.children.tsx meta.tag.tsx meta.tag.attribute-name.tsx entity.other.attribute-name.tsx
|
|
^
|
|
[16, 30]: source.tsx meta.tag.without-attributes.tsx meta.jsx.children.tsx meta.tag.without-attributes.tsx meta.jsx.children.tsx meta.tag.tsx string.jsxAttributeValue.quoted.double.tsx
|
|
> </FormRow>
|
|
^^
|
|
[17, 9]: source.tsx meta.tag.without-attributes.tsx meta.jsx.children.tsx meta.tag.without-attributes.tsx punctuation.definition.tag.begin.tsx
|
|
^^^^^^^
|
|
[17, 11]: source.tsx meta.tag.without-attributes.tsx meta.jsx.children.tsx meta.tag.without-attributes.tsx entity.name.tag.tsx
|
|
> </Form>
|
|
^^
|
|
[18, 5]: source.tsx meta.tag.without-attributes.tsx punctuation.definition.tag.begin.tsx
|
|
^^^^
|
|
[18, 7]: source.tsx meta.tag.without-attributes.tsx entity.name.tag.tsx
|
|
>
|
|
>var App2 = (
|
|
> <Form>
|
|
^
|
|
[21, 5]: source.tsx meta.var.expr.tsx meta.tag.without-attributes.tsx punctuation.definition.tag.begin.tsx
|
|
^^^^
|
|
[21, 6]: source.tsx meta.var.expr.tsx meta.tag.without-attributes.tsx entity.name.tag.tsx
|
|
> <FormRow>
|
|
^
|
|
[22, 9]: source.tsx meta.var.expr.tsx meta.tag.without-attributes.tsx meta.jsx.children.tsx meta.tag.without-attributes.tsx punctuation.definition.tag.begin.tsx
|
|
^^^^^^^
|
|
[22, 10]: source.tsx meta.var.expr.tsx meta.tag.without-attributes.tsx meta.jsx.children.tsx meta.tag.without-attributes.tsx entity.name.tag.tsx
|
|
> <FormLabel data='1' />
|
|
^
|
|
[23, 13]: source.tsx meta.var.expr.tsx meta.tag.without-attributes.tsx meta.jsx.children.tsx meta.tag.without-attributes.tsx meta.jsx.children.tsx meta.tag.tsx punctuation.definition.tag.begin.tsx
|
|
^^^^^^^^^
|
|
[23, 14]: source.tsx meta.var.expr.tsx meta.tag.without-attributes.tsx meta.jsx.children.tsx meta.tag.without-attributes.tsx meta.jsx.children.tsx meta.tag.tsx entity.name.tag.tsx
|
|
^^^^
|
|
[23, 24]: source.tsx meta.var.expr.tsx meta.tag.without-attributes.tsx meta.jsx.children.tsx meta.tag.without-attributes.tsx meta.jsx.children.tsx meta.tag.tsx meta.tag.attribute-name.tsx entity.other.attribute-name.tsx
|
|
^
|
|
[23, 30]: source.tsx meta.var.expr.tsx meta.tag.without-attributes.tsx meta.jsx.children.tsx meta.tag.without-attributes.tsx meta.jsx.children.tsx meta.tag.tsx string.jsxAttributeValue.quoted.single.tsx
|
|
> <FormInput data='2' />
|
|
^
|
|
[24, 13]: source.tsx meta.var.expr.tsx meta.tag.without-attributes.tsx meta.jsx.children.tsx meta.tag.without-attributes.tsx meta.jsx.children.tsx meta.tag.tsx punctuation.definition.tag.begin.tsx
|
|
^^^^^^^^^
|
|
[24, 14]: source.tsx meta.var.expr.tsx meta.tag.without-attributes.tsx meta.jsx.children.tsx meta.tag.without-attributes.tsx meta.jsx.children.tsx meta.tag.tsx entity.name.tag.tsx
|
|
^^^^
|
|
[24, 24]: source.tsx meta.var.expr.tsx meta.tag.without-attributes.tsx meta.jsx.children.tsx meta.tag.without-attributes.tsx meta.jsx.children.tsx meta.tag.tsx meta.tag.attribute-name.tsx entity.other.attribute-name.tsx
|
|
^
|
|
[24, 30]: source.tsx meta.var.expr.tsx meta.tag.without-attributes.tsx meta.jsx.children.tsx meta.tag.without-attributes.tsx meta.jsx.children.tsx meta.tag.tsx string.jsxAttributeValue.quoted.single.tsx
|
|
> </FormRow>
|
|
^^
|
|
[25, 9]: source.tsx meta.var.expr.tsx meta.tag.without-attributes.tsx meta.jsx.children.tsx meta.tag.without-attributes.tsx punctuation.definition.tag.begin.tsx
|
|
^^^^^^^
|
|
[25, 11]: source.tsx meta.var.expr.tsx meta.tag.without-attributes.tsx meta.jsx.children.tsx meta.tag.without-attributes.tsx entity.name.tag.tsx
|
|
> </Form>
|
|
^^
|
|
[26, 7]: source.tsx meta.var.expr.tsx meta.tag.without-attributes.tsx punctuation.definition.tag.begin.tsx
|
|
^^^^
|
|
[26, 9]: source.tsx meta.var.expr.tsx meta.tag.without-attributes.tsx entity.name.tag.tsx
|
|
>)
|
|
>
|
|
>var content = (
|
|
> <Nav>
|
|
^
|
|
[30, 5]: source.tsx meta.var.expr.tsx meta.tag.without-attributes.tsx punctuation.definition.tag.begin.tsx
|
|
^^^
|
|
[30, 6]: source.tsx meta.var.expr.tsx meta.tag.without-attributes.tsx entity.name.tag.tsx
|
|
> {/* child comment, put {} around */}
|
|
> <Person name={window.isLoggedIn ? window.name : ''}
|
|
^
|
|
[32, 9]: source.tsx meta.var.expr.tsx meta.tag.without-attributes.tsx meta.jsx.children.tsx meta.tag.tsx punctuation.definition.tag.begin.tsx
|
|
^^^^^^
|
|
[32, 10]: source.tsx meta.var.expr.tsx meta.tag.without-attributes.tsx meta.jsx.children.tsx meta.tag.tsx entity.name.tag.tsx
|
|
^^^^
|
|
[32, 17]: source.tsx meta.var.expr.tsx meta.tag.without-attributes.tsx meta.jsx.children.tsx meta.tag.tsx meta.tag.attribute-name.tsx entity.other.attribute-name.tsx
|
|
^^^^^^
|
|
[32, 23]: source.tsx meta.var.expr.tsx meta.tag.without-attributes.tsx meta.jsx.children.tsx meta.tag.tsx meta.embedded.expression.tsx support.variable.dom.tsx
|
|
> />
|
|
^^
|
|
[33, 9]: source.tsx meta.var.expr.tsx meta.tag.without-attributes.tsx meta.jsx.children.tsx meta.tag.tsx punctuation.definition.tag.end.tsx
|
|
> </Nav>
|
|
^^
|
|
[34, 5]: source.tsx meta.var.expr.tsx meta.tag.without-attributes.tsx punctuation.definition.tag.begin.tsx
|
|
>);
|
|
>
|
|
>// JSX Spread Attributes
|
|
>// http://facebook.github.io/react/docs/jsx-spread.html
|
|
>var props = {};
|
|
>props.foo = x;
|
|
>props.bar = y;
|
|
>var component = <Component {...props} />;
|
|
^
|
|
[42, 17]: source.tsx meta.var.expr.tsx meta.tag.tsx punctuation.definition.tag.begin.tsx
|
|
^^^^^^^^^
|
|
[42, 18]: source.tsx meta.var.expr.tsx meta.tag.tsx entity.name.tag.tsx
|
|
^^^
|
|
[42, 29]: source.tsx meta.var.expr.tsx meta.tag.tsx meta.embedded.expression.tsx keyword.operator.spread.tsx
|
|
^^
|
|
[42, 39]: source.tsx meta.var.expr.tsx meta.tag.tsx punctuation.definition.tag.end.tsx
|
|
>
|
|
>var props2 = { foo: 'default' }
|
|
>var component2 = <Component {...props} foo={'override'} />
|
|
^
|
|
[45, 18]: source.tsx meta.var.expr.tsx meta.tag.tsx punctuation.definition.tag.begin.tsx
|
|
^^^^^^^^^
|
|
[45, 19]: source.tsx meta.var.expr.tsx meta.tag.tsx entity.name.tag.tsx
|
|
^^^
|
|
[45, 30]: source.tsx meta.var.expr.tsx meta.tag.tsx meta.embedded.expression.tsx keyword.operator.spread.tsx
|
|
^^
|
|
[45, 57]: source.tsx meta.var.expr.tsx meta.tag.tsx punctuation.definition.tag.end.tsx
|
|
>
|
|
>// JSX Gotchas
|
|
>// http://facebook.github.io/react/docs/jsx-gotchas.html
|
|
>var a = <div>{'First \u00b7 Second'}</div>
|
|
^
|
|
[49, 15]: source.tsx meta.var.expr.tsx meta.tag.without-attributes.tsx meta.jsx.children.tsx meta.embedded.expression.tsx string.quoted.single.tsx punctuation.definition.string.begin.tsx
|
|
>var b = <div>{'First ' + String.fromCharCode(183) + ' Second'}</div>
|
|
^^^^^^
|
|
[50, 26]: source.tsx meta.var.expr.tsx meta.tag.without-attributes.tsx meta.jsx.children.tsx meta.embedded.expression.tsx support.class.builtin.tsx
|
|
>var c = <div>{['First ', <span>·</span>, ' Second']}</div>
|
|
^
|
|
[51, 26]: source.tsx meta.var.expr.tsx meta.tag.without-attributes.tsx meta.jsx.children.tsx meta.embedded.expression.tsx meta.array.literal.tsx meta.tag.without-attributes.tsx punctuation.definition.tag.begin.tsx
|
|
>var d = <div dangerouslySetInnerHTML={{__html: 'First · Second'}} />
|
|
^^^^^^
|
|
[52, 40]: source.tsx meta.var.expr.tsx meta.tag.tsx meta.embedded.expression.tsx meta.object-literal.tsx meta.object.member.tsx meta.object-literal.key.tsx
|
|
^
|
|
[52, 48]: source.tsx meta.var.expr.tsx meta.tag.tsx meta.embedded.expression.tsx meta.object-literal.tsx meta.object.member.tsx string.quoted.single.tsx punctuation.definition.string.begin.tsx
|
|
>var e = <div data-custom-attribute="foo" />
|
|
^^^
|
|
[53, 37]: source.tsx meta.var.expr.tsx meta.tag.tsx string.jsxAttributeValue.quoted.double.tsx
|
|
> |