Skip to content

Commit 783f0b2

Browse files
ezhloboezhlobo
authored
Convert loops into .map way (#77)
So instead of transpiling `each` into own loops with own logic and conditions, we transpile it into `.map`. For example: ```pug each item in [1, 2, 3] p(key=item)= item ``` ```jsx [1, 2, 3].map(item => ( <p key={item}>{item}</p> )) ```
1 parent 943183b commit 783f0b2

11 files changed

Lines changed: 276 additions & 368 deletions

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

Lines changed: 20 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -3,69 +3,26 @@
33
exports[`JavaScript output: transformed source code 1`] = `
44
"module.exports = (
55
<div>
6-
{((_pug_nodes, _pug_arr) => {
7-
if (!(_pug_arr == null || Array.isArray(_pug_arr)))
8-
throw new Error(
9-
'Expected \\"[[1, 2, 3], [], null]\\" to be an array because it is passed to each.'
10-
);
11-
if (_pug_arr == null || _pug_arr.length === 0) return undefined;
12-
13-
for (let i = 0; i < _pug_arr.length; i++) {
14-
const list = _pug_arr[i];
15-
_pug_nodes[_pug_nodes.length] = (
16-
<div key={\\"pug\\" + i + \\":0\\"}>
17-
{((_pug_nodes2, _pug_arr2) => {
18-
if (!(_pug_arr2 == null || Array.isArray(_pug_arr2)))
19-
throw new Error(
20-
'Expected \\"list\\" to be an array because it is passed to each.'
21-
);
22-
if (_pug_arr2 == null || _pug_arr2.length === 0)
23-
return \\"No items in this list\\";
24-
25-
for (
26-
let _pug_index = 0;
27-
_pug_index < _pug_arr2.length;
28-
_pug_index++
29-
) {
30-
const item = _pug_arr2[_pug_index];
31-
_pug_nodes2[_pug_nodes2.length] = (
32-
<span key={\\"pug\\" + item + \\":0\\"}>{item}</span>
33-
);
34-
}
35-
36-
return _pug_nodes2;
37-
})([], list)}
38-
{((_pug_nodes3, _pug_arr3) => {
39-
if (!(_pug_arr3 == null || Array.isArray(_pug_arr3)))
40-
throw new Error(
41-
'Expected \\"list\\" to be an array because it is passed to each.'
42-
);
43-
if (_pug_arr3 == null || _pug_arr3.length === 0)
44-
return [
45-
\\"This is \\",
46-
<strong key=\\"pug:1:0\\">literally</strong>,
47-
\\" the same list!\\"
48-
];
49-
50-
for (
51-
let _pug_index2 = 0;
52-
_pug_index2 < _pug_arr3.length;
53-
_pug_index2++
54-
) {
55-
const item = _pug_arr3[_pug_index2];
56-
_pug_nodes3[_pug_nodes3.length] = (
57-
<span key={\\"pug\\" + item + \\":0\\"}>{item}</span>
58-
);
59-
}
60-
61-
return _pug_nodes3;
62-
})([], list)}
63-
</div>
64-
);
65-
}
66-
67-
return _pug_nodes;
68-
})([], [[1, 2, 3], [], null])}
6+
{[[1, 2, 3], [], null].map((list, i) => {
7+
return (
8+
<div key={i}>
9+
{Array.isArray(list) && list.length
10+
? list.map(item => {
11+
return <span key={item}>{item}</span>;
12+
})
13+
: \\"No items in this list\\"}
14+
{Array.isArray(list) && list.length
15+
? list.map(item => {
16+
return <span key={item}>{item}</span>;
17+
})
18+
: [
19+
\\"This is \\",
20+
<strong key=\\"pug:1:0\\">literally</strong>,
21+
\\" the same list!\\"
22+
]}
23+
</div>
24+
);
25+
})}
6926
</div>
7027
);
7128
"

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

Lines changed: 11 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -3,30 +3,17 @@
33
exports[`JavaScript output: transformed source code 1`] = `
44
"module.exports = (
55
<div>
6-
{((_pug_nodes, _pug_arr) => {
7-
if (!(_pug_arr == null || Array.isArray(_pug_arr)))
8-
throw new Error(
9-
'Expected \\"[1, 2, 3]\\" to be an array because it is passed to each.'
10-
);
11-
if (_pug_arr == null || _pug_arr.length === 0) return undefined;
12-
13-
for (let i = 0; i < _pug_arr.length; i++) {
14-
const v = _pug_arr[i];
15-
_pug_nodes[_pug_nodes.length] = (
16-
<div key={\\"pug\\" + i + \\":0\\"}>
17-
{v === 1 ? \\"One\\" : v === 2 ? \\"Two\\" : \\"Many\\"}
18-
{v === 3
19-
? [<strong key=\\"pug:2:0\\">Three</strong>, \\"is the magic number!\\"]
20-
: null}
21-
{v == 2
22-
? null
23-
: [<strong key=\\"pug:5:0\\">Definitely</strong>, \\"not 2\\"]}
24-
</div>
25-
);
26-
}
27-
28-
return _pug_nodes;
29-
})([], [1, 2, 3])}
6+
{[1, 2, 3].map((v, i) => {
7+
return (
8+
<div key={i}>
9+
{v === 1 ? \\"One\\" : v === 2 ? \\"Two\\" : \\"Many\\"}
10+
{v === 3
11+
? [<strong key=\\"pug:2:0\\">Three</strong>, \\"is the magic number!\\"]
12+
: null}
13+
{v == 2 ? null : [<strong key=\\"pug:5:0\\">Definitely</strong>, \\"not 2\\"]}
14+
</div>
15+
);
16+
})}
3017
</div>
3118
);
3219
"

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

Lines changed: 102 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -3,69 +3,54 @@
33
exports[`JavaScript output: transformed source code 1`] = `
44
"module.exports = (
55
<div>
6-
{((_pug_nodes, _pug_arr) => {
7-
if (!(_pug_arr == null || Array.isArray(_pug_arr)))
8-
throw new Error(
9-
'Expected \\"[1,2,3]\\" to be an array because it is passed to each.'
10-
);
11-
if (_pug_arr == null || _pug_arr.length === 0) return undefined;
6+
{[1, 2, 3].map(a => {
7+
let _name;
128
13-
for (let _pug_index = 0; _pug_index < _pug_arr.length; _pug_index++) {
14-
let _name;
9+
return [
10+
((_name = \\"a\\"), null),
11+
<div key={a}>
12+
{_name + \\":\\" + a}
13+
{[1, 2, 3].map(b => {
14+
let _name2;
1515
16-
const a = _pug_arr[_pug_index];
17-
_pug_nodes[_pug_nodes.length] = ((_name = \\"a\\"), null);
18-
_pug_nodes[_pug_nodes.length] = (
19-
<div key={\\"pug\\" + a + \\":0\\"}>
20-
{_name + \\":\\" + a}
21-
{((_pug_nodes2, _pug_arr2) => {
22-
if (!(_pug_arr2 == null || Array.isArray(_pug_arr2)))
23-
throw new Error(
24-
'Expected \\"[1,2,3]\\" to be an array because it is passed to each.'
25-
);
26-
if (_pug_arr2 == null || _pug_arr2.length === 0) return undefined;
16+
return [
17+
((_name2 = \\"b\\"), null),
18+
<div key={b}>{_name2 + \\":\\" + b}</div>
19+
];
20+
})}
21+
{[1, 2, 3].map((c, i) => {
22+
let _name3;
2723
28-
for (
29-
let _pug_index2 = 0;
30-
_pug_index2 < _pug_arr2.length;
31-
_pug_index2++
32-
) {
33-
let _name2;
24+
return [((_name3 = \\"c\\"), null), <div key={c}>{_name3 + c}</div>];
25+
})}
26+
</div>
27+
];
28+
})}
29+
{[[1, 2, 3], [\\"a\\", \\"b\\", \\"c\\"]].map((list, index) => {
30+
return list.map(item => {
31+
return <div key={item + index} data-value={item} />;
32+
});
33+
})}
34+
{[[1, 2, 3], \\"text\\"].map(list => {
35+
return Array.isArray(list)
36+
? list.map(item => {
37+
return <p key={item}>{item}</p>;
38+
})
39+
: null;
40+
})}
41+
{[1, 2].map(i => {
42+
let _anotherArray;
3443
35-
const b = _pug_arr2[_pug_index2];
36-
_pug_nodes2[_pug_nodes2.length] = ((_name2 = \\"b\\"), null);
37-
_pug_nodes2[_pug_nodes2.length] = (
38-
<div key={\\"pug\\" + b + \\":0\\"}>{_name2 + \\":\\" + b}</div>
39-
);
40-
}
41-
42-
return _pug_nodes2;
43-
})([], [1, 2, 3])}
44-
{((_pug_nodes3, _pug_arr3) => {
45-
if (!(_pug_arr3 == null || Array.isArray(_pug_arr3)))
46-
throw new Error(
47-
'Expected \\"[1,2,3]\\" to be an array because it is passed to each.'
48-
);
49-
if (_pug_arr3 == null || _pug_arr3.length === 0) return undefined;
50-
51-
for (let i = 0; i < _pug_arr3.length; i++) {
52-
let _name3;
53-
54-
const c = _pug_arr3[i];
55-
_pug_nodes3[_pug_nodes3.length] = ((_name3 = \\"c\\"), null);
56-
_pug_nodes3[_pug_nodes3.length] = (
57-
<div key={\\"pug\\" + c + \\":0\\"}>{_name3 + c}</div>
58-
);
59-
}
60-
61-
return _pug_nodes3;
62-
})([], [1, 2, 3])}
63-
</div>
64-
);
65-
}
66-
67-
return _pug_nodes;
68-
})([], [1, 2, 3])}
44+
return [
45+
((_anotherArray = [\\"a\\", \\"b\\", \\"c\\"]), null),
46+
_anotherArray.map((item, index) => {
47+
return <p key={index}>{item}</p>;
48+
})
49+
];
50+
})}
51+
{[1, 2].map(i => {
52+
return [<div key={i}>{i}</div>, <div key={i + 10}>{i}</div>];
53+
})}
6954
</div>
7055
);
7156
"
@@ -136,7 +121,64 @@ exports[`html output: generated html 1`] = `
136121
c3
137122
</div>
138123
</div>
124+
<div
125+
data-value={1}
126+
/>
127+
<div
128+
data-value={2}
129+
/>
130+
<div
131+
data-value={3}
132+
/>
133+
<div
134+
data-value="a"
135+
/>
136+
<div
137+
data-value="b"
138+
/>
139+
<div
140+
data-value="c"
141+
/>
142+
<p>
143+
1
144+
</p>
145+
<p>
146+
2
147+
</p>
148+
<p>
149+
3
150+
</p>
151+
<p>
152+
a
153+
</p>
154+
<p>
155+
b
156+
</p>
157+
<p>
158+
c
159+
</p>
160+
<p>
161+
a
162+
</p>
163+
<p>
164+
b
165+
</p>
166+
<p>
167+
c
168+
</p>
169+
<div>
170+
1
171+
</div>
172+
<div>
173+
1
174+
</div>
175+
<div>
176+
2
177+
</div>
178+
<div>
179+
2
180+
</div>
139181
</div>
140182
`;
141183

142-
exports[`static html output: static html 1`] = `"<div><div>a:1<div>b:1</div><div>b:2</div><div>b:3</div><div>c1</div><div>c2</div><div>c3</div></div><div>a:2<div>b:1</div><div>b:2</div><div>b:3</div><div>c1</div><div>c2</div><div>c3</div></div><div>a:3<div>b:1</div><div>b:2</div><div>b:3</div><div>c1</div><div>c2</div><div>c3</div></div></div>"`;
184+
exports[`static html output: static html 1`] = `"<div><div>a:1<div>b:1</div><div>b:2</div><div>b:3</div><div>c1</div><div>c2</div><div>c3</div></div><div>a:2<div>b:1</div><div>b:2</div><div>b:3</div><div>c1</div><div>c2</div><div>c3</div></div><div>a:3<div>b:1</div><div>b:2</div><div>b:3</div><div>c1</div><div>c2</div><div>c3</div></div><div data-value=\\"1\\"></div><div data-value=\\"2\\"></div><div data-value=\\"3\\"></div><div data-value=\\"a\\"></div><div data-value=\\"b\\"></div><div data-value=\\"c\\"></div><p>1</p><p>2</p><p>3</p><p>a</p><p>b</p><p>c</p><p>a</p><p>b</p><p>c</p><div>1</div><div>1</div><div>2</div><div>2</div></div>"`;

‎src/__tests__/__snapshots__/option-class-attribute.test.js.snap‎

Lines changed: 17 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -13,25 +13,14 @@ module.exports = (
1313
<p styleName=\\"fourth-a fourth-b\\" />
1414
<p className=\\"fivth-a fivth-b\\" />
1515
<p styleName=\\"two\\" className=\\"one\\" />
16-
{((_pug_nodes, _pug_arr) => {
17-
if (!(_pug_arr == null || Array.isArray(_pug_arr)))
18-
throw new Error(
19-
'Expected \\"[1, 2, 3]\\" to be an array because it is passed to each.'
20-
);
21-
if (_pug_arr == null || _pug_arr.length === 0) return undefined;
22-
23-
for (let _pug_index = 0; _pug_index < _pug_arr.length; _pug_index++) {
24-
const item = _pug_arr[_pug_index];
25-
_pug_nodes[_pug_nodes.length] = (
26-
<p
27-
className={\\"seventh-a seventh-b \\" + (\\"seventh-i-\\" + item)}
28-
key={\\"pug\\" + item + \\":0\\"}
29-
/>
30-
);
31-
}
32-
33-
return _pug_nodes;
34-
})([], [1, 2, 3])}
16+
{[1, 2, 3].map(item => {
17+
return (
18+
<p
19+
key={item}
20+
className={\\"seventh-a seventh-b \\" + (\\"seventh-i-\\" + item)}
21+
/>
22+
);
23+
})}
3524
</div>
3625
);
3726
"
@@ -50,26 +39,15 @@ module.exports = (
5039
<p styleName=\\"fourth-a fourth-b\\" />
5140
<p className=\\"fivth-a fivth-b\\" />
5241
<p styleName=\\"one two\\" />
53-
{((_pug_nodes, _pug_arr) => {
54-
if (!(_pug_arr == null || Array.isArray(_pug_arr)))
55-
throw new Error(
56-
'Expected \\"[1, 2, 3]\\" to be an array because it is passed to each.'
57-
);
58-
if (_pug_arr == null || _pug_arr.length === 0) return undefined;
59-
60-
for (let _pug_index = 0; _pug_index < _pug_arr.length; _pug_index++) {
61-
const item = _pug_arr[_pug_index];
62-
_pug_nodes[_pug_nodes.length] = (
63-
<p
64-
className={\\"seventh-i-\\" + item}
65-
styleName=\\"seventh-a seventh-b\\"
66-
key={\\"pug\\" + item + \\":0\\"}
67-
/>
68-
);
69-
}
70-
71-
return _pug_nodes;
72-
})([], [1, 2, 3])}
42+
{[1, 2, 3].map(item => {
43+
return (
44+
<p
45+
key={item}
46+
className={\\"seventh-i-\\" + item}
47+
styleName=\\"seventh-a seventh-b\\"
48+
/>
49+
);
50+
})}
7351
</div>
7452
);
7553
"

0 commit comments

Comments
 (0)