Rendering issues when used with ES6 / prototypes
See original GitHub issueHey! 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:
![screen shot 2016-05-31 at 17 01 47](https://cloud.githubusercontent.com/assets/1199054/15690573/1dffb1d4-2752-11e6-9a7a-c2cda513733a.png)
![screen shot 2016-05-31 at 17 02 22](https://cloud.githubusercontent.com/assets/1199054/15690574/1e01e4ea-2752-11e6-8457-d9d7ff79a2bb.png)
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.
Issue Analytics
- State:
- Created 7 years ago
- Comments:10 (5 by maintainers)
Thanks for willing to help! Sure, we have the repo on GitHub:
git clone -b new-build https://github.com/transloadit/uppy/
npm install
npm run watch
example/index.html
in the browser, the Modal dialog with the example I mentioned should pop up.src/plugins/Dummy.js
and refresh the browser tab to see changes.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 aboutbabel
?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!