An awful question... IE11...

[rmorse]

Hey Rodrigo, thanks so much for providing this + tutorial so useful! - I've been looking for a really stripped back state management solution like this I can sideload on to my little js apps (the fact that it supports jsx is a bonus).

I'm actually building a JS library which is going into some software out of my control - and some of those users are going to require IE11 support (it's is a front end app going on a variety of website types)...

My thinking was, for those cases, just to recommend a bunch of polyfills (not caring about performance so much etc) to tick that box... But I've come across an issue I've spent so long on and can't figure out.

After loading up the usual polyfills (+ requestIdleCallback), it seems that the demo supplied - <Counter /> doesn't work.

When you click on it, the value just stays the same.

If you wrap the { state } in a node like this: <span>{ state }</span> it seems to work without issue... but naturally that's not practical and an odd restriction.

What I've managed to figure out is (maybe I've got it all wrong though...), somewhere in the reconcileChildren function things are going wrong (for IE11), and what would be two sibling text nodes:
Count: and 10 are merged into 1 dom reference:
Count: 10

I would usually not bother even trying to get this working on IE11 and move on, but it seems its about 1 line of code away from being polyfill-able...! (and at only a few kb this fits my needs perfectly)

Any ideas would be much appreciated...

And if it wasn't clear, I'm not enjoying asking about IE11... :)

[pomber]

No idea, sorry. Good luck with IE11 :)

[rmorse]

Haha, that's more than I expected ^^

[rmorse]

Ok so if anyone runs into the same issue:

Basically IE11 can't recognise multiple text nodes as seperate nodes (in the same parent) - so after appending 2 text nodes to an element, IE somehow merges them into 1 text node - seemingly a new text node that doesn't have any other references pointing to it - this was causing the issue, as the "real" text nodes were being updated just fine, but they didn't exist in the dom anymore,

The only way I figured out to work around this was to convert the text nodes to spans:
rmorse@802e813
And I guess in practise that should be done conditionally anyway.

In the end I might not use this but good to know it can be done.

Thanks again!