different results with return

[edoardocavazza]

Hi,

I am playing with your plugin and it works very nicely, so a big thank you for your work.

I am reporting a case which generates a little confusion, at least in my mind :)

If I define a getter with JSX:

get template() {
    <span>Hello</span>;
}

it becomes:

get template() {
    _jsxWrapper(...);
}

but if I put a return, it changes completly:

get template() {
    return <span>Hello</span>;
}

it becomes:

get template() {
    elementOpen('span');
    text('Hello');
    return elementClose('span');
}

In the first case, the template getter returns undefined and IDOM helpers are not triggered, while in the second it returns the result of elementClose, so helpers are triggered.

Is there a way to always return the jsxWrapper result?

Thanks

[jridgewell]

Creating the JSX Wrapper is expensive, so we optimize it away when it's being used correctly (the JSX element is being returned at top-level). What is your use case here?

[edoardocavazza]

I'd like to control the render method of a custom component without adding complexity to the template getter. The render method can handle return as String or Function. I've found out that if I declare the template as variable outside the class and then I return it in the getter, everything works as aspected, because the getter returns a Function, so I am currently moving to this way.

BTW, I see a discrepancy with this two different usages, which IMO should give the same result:

// case 1
get template() {
    return <span>Hello</span>;
}

// case 2
const TEMPLATE = <span>Hello</span>;

get template() {
    return TEMPLATE;
}

As I said, using an outside variable solves my case, but it's not very clear to me this two behaviors.

[jridgewell]

How are you calling the function returned from template? Or, if you want a function that you can control yourself, why don't you return a function?

get template() {
  return function() {
    return <span>Hello</span>;
  }
}

This is definitely not the common case, though it may be something we need to add support for. What I expect (and what the transform follows) is:

class Component {
  //...

  template() {
  }

  render() {
    iDOM.patch(this.element, this.template, this.data);
  }
}