Skip to content

Commit 943183b

Browse files
ezhloboezhlobo
authored
Wrap code-only templates by React.Fragment (#76)
It basically makes sure that following snippet won't render anything. Before that it crashed with the error. ```jsx pug` if false p Hello ` ``` How it works: now instead of transforming falsy-branch into `undefined`, we transform it into `null`. JSX+React works perfectly with `null`.
1 parent 7de39c3 commit 943183b

17 files changed

+196
-25
lines changed

‎src/__tests__/__snapshots__/if-else.test.js.snap‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,9 @@ exports[`JavaScript output: transformed source code 1`] = `
1717
{v === 1 ? \\"One\\" : v === 2 ? \\"Two\\" : \\"Many\\"}
1818
{v === 3
1919
? [<strong key=\\"pug:2:0\\">Three</strong>, \\"is the magic number!\\"]
20-
: undefined}
20+
: null}
2121
{v == 2
22-
? undefined
22+
? null
2323
: [<strong key=\\"pug:5:0\\">Definitely</strong>, \\"not 2\\"]}
2424
</div>
2525
);

‎src/__tests__/__snapshots__/interpolation.test.js.snap‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -22,11 +22,7 @@ module.exports = new function() {
2222
{\\"\\\\n\\"}
2323
{[\\"one being \\", this.names[1], \\"!\\"].join(\\"\\")}
2424
</p>
25-
{showFirstPerson ? (
26-
<Person name={this.names[0]} key=\\"pug:0:0\\" />
27-
) : (
28-
undefined
29-
)}
25+
{showFirstPerson ? <Person name={this.names[0]} key=\\"pug:0:0\\" /> : null}
3026
{this.names.map((name, key) => (
3127
<p key={key}>{[\\"Hi \\", name, \\", bye \\", name].join(\\"\\")}</p>
3228
))}

‎src/__tests__/__snapshots__/nested-loops.test.js.snap‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ exports[`JavaScript output: transformed source code 1`] = `
1414
let _name;
1515
1616
const a = _pug_arr[_pug_index];
17-
_pug_nodes[_pug_nodes.length] = ((_name = \\"a\\"), undefined);
17+
_pug_nodes[_pug_nodes.length] = ((_name = \\"a\\"), null);
1818
_pug_nodes[_pug_nodes.length] = (
1919
<div key={\\"pug\\" + a + \\":0\\"}>
2020
{_name + \\":\\" + a}
@@ -33,7 +33,7 @@ exports[`JavaScript output: transformed source code 1`] = `
3333
let _name2;
3434
3535
const b = _pug_arr2[_pug_index2];
36-
_pug_nodes2[_pug_nodes2.length] = ((_name2 = \\"b\\"), undefined);
36+
_pug_nodes2[_pug_nodes2.length] = ((_name2 = \\"b\\"), null);
3737
_pug_nodes2[_pug_nodes2.length] = (
3838
<div key={\\"pug\\" + b + \\":0\\"}>{_name2 + \\":\\" + b}</div>
3939
);
@@ -52,7 +52,7 @@ exports[`JavaScript output: transformed source code 1`] = `
5252
let _name3;
5353
5454
const c = _pug_arr3[i];
55-
_pug_nodes3[_pug_nodes3.length] = ((_name3 = \\"c\\"), undefined);
55+
_pug_nodes3[_pug_nodes3.length] = ((_name3 = \\"c\\"), null);
5656
_pug_nodes3[_pug_nodes3.length] = (
5757
<div key={\\"pug\\" + c + \\":0\\"}>{_name3 + c}</div>
5858
);

‎src/__tests__/__snapshots__/plain-js.test.js.snap‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`case JavaScript output: transformed source code 1`] = `
4+
"const n = 0;
5+
6+
module.exports =
7+
n === 1 ? (
8+
<p key=\\"pug:0:0\\">One</p>
9+
) : n === 2 ? (
10+
<p key=\\"pug:1:0\\">Two</p>
11+
) : null;
12+
"
13+
`;
14+
15+
exports[`case html output: generated html 1`] = `null`;
16+
17+
exports[`case static html output: static html 1`] = `""`;
18+
19+
exports[`code JavaScript output: transformed source code 1`] = `
20+
"const log = text => text;
21+
22+
module.exports = (log(\\"Hello\\"), null);
23+
"
24+
`;
25+
26+
exports[`code html output: generated html 1`] = `null`;
27+
28+
exports[`code static html output: static html 1`] = `""`;
29+
30+
exports[`code-multiline JavaScript output: transformed source code 1`] = `
31+
"let _greeting;
32+
33+
const log = text => text;
34+
35+
module.exports = (
36+
<React.Fragment>
37+
{((_greeting = \\"hello\\"), null)}
38+
{(log(_greeting), null)}
39+
</React.Fragment>
40+
);
41+
"
42+
`;
43+
44+
exports[`code-multiline html output: generated html 1`] = `null`;
45+
46+
exports[`code-multiline static html output: static html 1`] = `""`;
47+
48+
exports[`each JavaScript output: transformed source code 1`] = `
49+
"module.exports = ((_pug_nodes, _pug_arr) => {
50+
if (!(_pug_arr == null || Array.isArray(_pug_arr)))
51+
throw new Error(
52+
'Expected \\"[1, 2, 3]\\" to be an array because it is passed to each.'
53+
);
54+
if (_pug_arr == null || _pug_arr.length === 0) return undefined;
55+
56+
for (let _pug_index = 0; _pug_index < _pug_arr.length; _pug_index++) {
57+
const item = _pug_arr[_pug_index];
58+
_pug_nodes[_pug_nodes.length] = <div key={\\"pug\\" + item + \\":0\\"}>{item}</div>;
59+
}
60+
61+
return _pug_nodes;
62+
})([], [1, 2, 3]);
63+
"
64+
`;
65+
66+
exports[`each html output: generated html 1`] = `
67+
Array [
68+
<div>
69+
1
70+
</div>,
71+
<div>
72+
2
73+
</div>,
74+
<div>
75+
3
76+
</div>,
77+
]
78+
`;
79+
80+
exports[`each static html output: static html 1`] = `"<div>1</div><div>2</div><div>3</div>"`;
81+
82+
exports[`if JavaScript output: transformed source code 1`] = `
83+
"module.exports = false ? <p key=\\"pug:0:0\\">Truthy</p> : null;
84+
"
85+
`;
86+
87+
exports[`if html output: generated html 1`] = `null`;
88+
89+
exports[`if static html output: static html 1`] = `""`;
90+
91+
exports[`while JavaScript output: transformed source code 1`] = `
92+
"let n = 0;
93+
94+
module.exports = (_pug_nodes => {
95+
while (n < 3) {
96+
_pug_nodes[_pug_nodes.length] = <div key={n}>{n++}</div>;
97+
}
98+
99+
return _pug_nodes;
100+
})([]);
101+
"
102+
`;
103+
104+
exports[`while html output: generated html 1`] = `
105+
Array [
106+
<div>
107+
0
108+
</div>,
109+
<div>
110+
1
111+
</div>,
112+
<div>
113+
2
114+
</div>,
115+
]
116+
`;
117+
118+
exports[`while static html output: static html 1`] = `"<div>0</div><div>1</div><div>2</div>"`;

‎src/__tests__/__snapshots__/react-fragment.test.js.snap‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ exports[`with each static html output: static html 1`] = `"<div>1</div><div>2</d
6666
exports[`with if JavaScript output: transformed source code 1`] = `
6767
"module.exports = (
6868
<React.Fragment>
69-
{true ? <div key=\\"pug:0:0\\">Truthy</div> : undefined}
69+
{true ? <div key=\\"pug:0:0\\">Truthy</div> : null}
7070
<div>Next item</div>
7171
</React.Fragment>
7272
);
@@ -91,7 +91,7 @@ exports[`with inline javascript JavaScript output: transformed source code 1`] =
9191
9292
module.exports = (
9393
<React.Fragment>
94-
{((_i = 100), undefined)}
94+
{((_i = 100), null)}
9595
<div>{_i}</div>
9696
</React.Fragment>
9797
);

‎src/__tests__/__snapshots__/text.test.js.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ exports[`JavaScript output: transformed source code 1`] = `
66
Hello World
77
{\\"\\\\n\\"}
88
What a great world it is
9-
{10 < 15 ? \\" The world is great\\" : undefined}
9+
{10 < 15 ? \\" The world is great\\" : null}
1010
<div>
1111
Longer passages of text work
1212
{\\"\\\\n\\"}

‎src/__tests__/__snapshots__/variable-declaration.test.js.snap‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@ exports[`JavaScript output: transformed source code 1`] = `
55
66
module.exports = (
77
<div>
8-
{((_x = 1), undefined)}
9-
{((_x = _x + 40), undefined)}
10-
{(_x++, undefined)}
8+
{((_x = 1), null)}
9+
{((_x = _x + 40), null)}
10+
{(_x++, null)}
1111
<div>{_x}</div>
1212
</div>
1313
);

‎src/__tests__/plain-js-case.input.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
const n = 0;
2+
3+
module.exports = pug`
4+
case n
5+
when 1
6+
p One
7+
8+
when 2
9+
p Two
10+
`;

‎src/__tests__/plain-js-code-multiline.input.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
const log = text => text;
2+
3+
module.exports = pug`
4+
- const greeting = 'hello'
5+
- log(greeting)
6+
`;

‎src/__tests__/plain-js-code.input.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
const log = text => text;
2+
3+
module.exports = pug`
4+
- log('Hello')
5+
`;

0 commit comments

Comments
 (0)