Defer wrapped CallExpressions

[jridgewell]

This finds CallExpressions inside JSXElements that will be wrapped, and defers the call until the wrapper is executed.

Only calls that are the result of the expression will be deferred, not calls that control the code flow.

• Deferred
  • {true && em("text")}
  • {true || em("text")}
  • {1, 2, em("text")}
  • {true ? em("text") : em("other")}
• Not Deferred
  • {fn() && "text"}
  • {fn() || "text"}
  • {1, fn(), "text"}
  • {fn() ? "text" : "other"}

This pretty elegantly fixes #65, since it's uncommon to have JSX returning functions in the control flow. Down sides are the call's side effects aren't run, which may actually be an upside 🙃.

Note that the deferred calls arguments will be evaluated before the wrapper is executed (like it wasn't deferred).

/cc @mairatma

[jridgewell]

Output is now:

var _wrapper = function _wrapper(_deferred, _args) {
  elementOpen("li");

  _renderArbitrary(_deferred(_args));

  return elementClose("li");
};

function renderMessage(i) {
  elementOpen("em");
  text("my message " + i);
  return elementClose("em");
}

function render() {
  elementOpen("ul");

  _renderArbitrary([0, 1, 2, 3, 4].map(function (i) {
    return _jsxWrapper(_wrapper, [renderMessage, i]);
  }));

  return elementClose("ul");
}

[mairatma]

Thanks a lot for working on this! :D