diffdown.com
Diffdown is a real-time collaborative Markdown editor/previewer built on the AT Protocol
diffdown.com
1# Self-closing element {"dialect": "jsx"}
2
3<img/>
4
5==>
6
7Script(ExpressionStatement(JSXElement(JSXSelfClosingTag(JSXStartTag,JSXBuiltin(JSXIdentifier),JSXSelfCloseEndTag))))
8
9# Regular element {"dialect": "jsx"}
10
11<Foo>bar</Foo>
12
13==>
14
15Script(ExpressionStatement(JSXElement(
16 JSXOpenTag(JSXStartTag, JSXIdentifier, JSXEndTag),
17 JSXText,
18 JSXCloseTag(JSXStartCloseTag, JSXIdentifier, JSXEndTag))))
19
20# Fragment {"dialect": "jsx"}
21
22<>bar</>
23
24==>
25
26Script(ExpressionStatement(JSXElement(
27 JSXFragmentTag(JSXStartTag, JSXEndTag),
28 JSXText,
29 JSXCloseTag(JSXStartCloseTag, JSXEndTag))))
30
31# Namespaced name {"dialect": "jsx"}
32
33<blah-namespace:img/>
34
35==>
36
37Script(ExpressionStatement(JSXElement(
38 JSXSelfClosingTag(JSXStartTag,JSXNamespacedName(JSXIdentifier, JSXIdentifier),JSXSelfCloseEndTag))))
39
40# Member name {"dialect": "jsx"}
41
42<pkg.Component/>
43
44==>
45
46Script(ExpressionStatement(JSXElement(
47 JSXSelfClosingTag(JSXStartTag,JSXMemberExpression(JSXIdentifier, JSXIdentifier),JSXSelfCloseEndTag))))
48
49# Nested tags {"dialect": "jsx"}
50
51<a><b.C>text</b.C>{x} {...y}</a>
52
53==>
54
55Script(ExpressionStatement(JSXElement(
56 JSXOpenTag(JSXStartTag, JSXBuiltin(JSXIdentifier), JSXEndTag),
57 JSXElement(
58 JSXOpenTag(JSXStartTag, JSXMemberExpression(JSXIdentifier, JSXIdentifier), JSXEndTag),
59 JSXText,
60 JSXCloseTag(JSXStartCloseTag, JSXMemberExpression(JSXIdentifier, JSXIdentifier), JSXEndTag)),
61 JSXEscape(VariableName),
62 JSXText,
63 JSXEscape(Spread, VariableName),
64 JSXCloseTag(JSXStartCloseTag, JSXBuiltin(JSXIdentifier), JSXEndTag))))
65
66# Attributes {"dialect": "jsx"}
67
68<Foo a="1" b {...attrs} c={c}></Foo>
69
70==>
71
72Script(ExpressionStatement(JSXElement(
73 JSXOpenTag(JSXStartTag, JSXIdentifier,
74 JSXAttribute(JSXIdentifier, Equals, JSXAttributeValue),
75 JSXAttribute(JSXIdentifier),
76 JSXSpreadAttribute(Spread, VariableName),
77 JSXAttribute(JSXIdentifier, Equals, JSXEscape(VariableName)),
78 JSXEndTag),
79 JSXCloseTag(JSXStartCloseTag, JSXIdentifier, JSXEndTag))))