Rendering issues when used with ES6 / prototypes

Hey! Using yo-yo in a project with ES6 classes: we have Core and Plugins, and each plugin is inheriting from a Plugin class, which serves a boilerplate. Using super and extend keywords, which is relevant, because the issue goes away without those. Everything gets transpiled down to ES5 with Babel.

Sometimes yo-yo won’t render an element that was created in a constructor with this, like so:

import yo from 'yo-yo'

export class Smth extends Plugin {
  constructor (core, opts) {
    super(core, opts)
    this.strange = yo`<h1>this is strange 1</h1>`
  }

  render (state) {
    const bla = yo`<h2>this is strange 2</h2>`
    return yo`
      <div class="wow-this-works">
        <input type="text" value="hello">
        ${this.strange}
        ${bla}
      </div>
    `
  }

  install () {
    this.getTarget(this.opts.target, this, this.render)
  }
}

<h1>this is strange 1</h1> gets rendered while <h2>this is strange 2</h2> does not. If you move this.strange from the constructor to render function, it works. If you console.log the elements, they always show up in the console. Also, it works if you wrap yo call in a function, like this.strange = function () { return yo'<h1>this is strange 1</h1>' }

And I would think it’s totally this and class issues, except — wait for it — when you replace h2 with h1, it works. Different elements won’t render, but if two of the same are used — it works.

Here is a diff of two transpiled examples: https://www.diffchecker.com/ngpc5whl (the one on the left works, the one on the right does not), and are screenshots:

I thought maybe someone who wrote bel and knows internals will understand what’s going on here. Where should we even look? Sorry for complicated explanation and thanks in advance.

[arturi]

Thanks for willing to help! Sure, we have the repo on GitHub:

1. git clone -b new-build https://github.com/transloadit/uppy/
2. npm install
3. npm run watch
4. Open example/index.html in the browser, the Modal dialog with the example I mentioned should pop up.
5. Edit src/plugins/Dummy.js and refresh the browser tab to see changes.

[yoshuawuyts]

Thanks for opening this issue! Ummmm, off the top of my head I have literally no idea what could be causing this - are you using yo-yoify at all? What about babel?

This probably definitely needs deeper research to figure out; would you mind setting up a quick repro so we can plough through it? Thanks!

edit: @shama jinx!