0

I'm facing a very weird issue. I'm playing around with ES6 classes to build a simple component system. One experiment I'm after is a client component which you can simply instantiate, and then it will render. If you change any of its properties, it will re-render. The component will have its internal template, so that calling code needs to have no knowledge of its HTML.

Here's a pen that shows the concept.

Instructions: open in Chrome, and open the Console panel within Codepen.

Highlighting the code to instantiate the component, and then update one of its properties:

let clientComponent = new MyClientComponent(3,7);
clientComponent.a = 22;

That first line instantiates the component, passing in params 3,7. Instantiation leads to an internal call to _render() which compiles a DOM fragment, like so:

"<div><p>3 + 7 = <strong>10</strong></p></div>"

Next, we update property a to 22, which triggers a new render, and thus a new compilation:

"<div><p>22 + 7 = <strong>29</strong></p></div>"

That's the expected output, and you should be able to see that this works in the pen. The problem is that it does not work in my dev environment, I'm getting this instead:

"<div><p>22 + 7 = <strong>29</strong></p></div>"
"<div><p>22 + 7 = <strong>29</strong></p></div>"

(both renders show the same output). The difference between the pen and my local setup is that I'm using Babel transpilation, with these settings:

{
  "plugins": ["transform-es2015-modules-systemjs"], 
  "presets": ["es2015"]
}

Transpilation could of course be a major reason why this is happening, but its get weirder: the output is incorrect, unless I debug and step through the code using Chrome's debugger. Then it does show the correct values. Nothing in my code suggests some kind of async or time-related logic, so how can it possibly work when debugging, yet not when I don't debug and just let it run?

Fer
  • 4,116
  • 16
  • 59
  • 102
  • It's not your code that is asynchronous, it's the console itself. You are passing the very same DOM object to it twice, once before and once after the mutation of its `.innerHTML`, but it will only render that latest state in the console. Unless you have a debugger breakpoint in between, that is. – Bergi Feb 04 '17 at 14:45
  • And no, this has nothing to do with ES6, classes, template strings or transpilation at all. – Bergi Feb 04 '17 at 14:45
  • @Bergi That's very interesting, I would have never found that, so thank you. How can you explain though that this works in the pen, yet not in my environment? And is there a way to resolve this issue? – Fer Feb 04 '17 at 15:07
  • 1
    Nah, no idea what's different between the environments. What happens when you paste your transpiler output into the pen? And I wouldn't even consider it an issue, just something you need to consider when looking at the logs. To be absolutely sure, log the `this._dom.outerHTML` string instead of the `this._dom` object. – Bergi Feb 04 '17 at 15:15
  • @Bergi It's not an issue when you know about it, but it's definitely not something I expected. Thanks for your answer, printing with .innerHTML does solve it :) – Fer Feb 04 '17 at 15:33

0 Answers0