Wrap calls to JSX functions

[jridgewell]

This won’t catch every case, but it should fix #65.

/cc @mairatma.

[jridgewell]

The output is now:

var _wrapper = function _wrapper(_i) {
  elementOpen("li");

  _renderArbitrary(renderMessage(_i));

  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, [i]);
  }));

  return elementClose("ul");
}

This is still less than ideal, since you're creating a function instance for every tick of that #map. fastRoot provides the best results:

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

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

  // @incremental-dom enable-fastRoot
  [0, 1, 2, 3, 4].map(function (i) {
    elementOpen("li");

    _renderArbitrary(renderMessage(i));

    return elementClose("li");
  });
  return elementClose("ul");
}

[jridgewell]

Looking at this more, this one has all kinds of pitfalls with module boundaries, scope of the function and its parameters, the order functions are defined in, and whether the JSX function is a "root" element or not.

I'm working on a second solution that will instead defer calls, producing something like:

var _wrapper = function _wrapper(_renderMessage, i) {
  elementOpen("li");

  _renderArbitrary(_renderMessage(i));

  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");
}