pugjs / babel-plugin-transform-react-pug

A plugin for transpiling pug templates to jsx

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Transform each into map

ezhlobo opened this issue · comments

Hey,

Now when I'm passing basic each it transpiles into a monster:

each item in [1, 2, 3]
  div(key=item)= item
((_pug_nodes, _pug_arr) => {
  if (!(_pug_arr == null || Array.isArray(_pug_arr)))
    throw new Error(
      'Expected "[1, 2, 3]" to be an array because it is passed to each.'
    );
  if (_pug_arr == null || _pug_arr.length === 0) return undefined;

  for (let _pug_index = 0; _pug_index < _pug_arr.length; _pug_index++) {
    const item = _pug_arr[_pug_index];
    _pug_nodes[_pug_nodes.length] = <div key={"pug" + item + ":0"}>{item}</div>;
  }

  return _pug_nodes;
})([], [1, 2, 3]);

What do you think if we eliminate all these validations and return simple .map:

[1, 2, 3].map((item) => (
  <div key={"pug" + item + ":0"}>{item}</div>
))

And then even into something with initial keys:

[1, 2, 3].map((item) => (
  <div key={item}>{item}</div>
))

Why?

  1. Because I wish to keep the code as simple as possible where we can.
  2. These validations are redundant because we anyway will catch the issue in js. No matter who throws an exception.

//CC @ForbesLindesay

Done in v7.0.0