switch us over to React 16

[rgbkrk]

This switches all our use of preact to React, which also allows us to pull React and ReactDOM in via bower and use as a UMD module.

Since all our supported browsers are modern, I've used an actual class here as well as arrow functions (where appropriate, to replace use of that = this).

With this in place, js code can now load react and react-dom explicitly:

require(['react', 'react-dom'], (React, ReactDOM) => {
  // ...
})

[rgbkrk]

Whoop, a little bit more for me to fix on the shortcut editor.

[rgbkrk]

Conversion complete!

[rgbkrk]

I am pretty darn sure the test failures are from ye ole phantomjs setup, and that I'm using features that are not supported on the old JS engine we use for testing. Should I go down the rabbit hole of modernizing the test runner? 🤔

[rgbkrk]

https://groups.google.com/forum/m/#!topic/phantomjs/9aI5d-LDuNE

[Carreau]

+1;

Sorry about the test-runner mess; if it's not too hard that would be great; otherwise just mark the test as knownfail/skip and open an issue to fix it later;

Thanks for doing this; it's not easy to do cleanup work. ❤️❤️❤️

[mpacer]

Is it possible to optionally use the development version of react if the notebook is built using the developer tools instructions?

[rgbkrk]

I wondered that too, didn't want to go too far down the rabbit hole in lieu of other yaks that wanted shaving.

[mpacer]

I'm not 100% comfortable with my understanding of the testing setup as it is… but I'm happy to work on modernising it if someone can point me in the right direction.

[rgbkrk]

Sorry about the test-runner mess; if it's not too hard that would be great; otherwise just mark the test as knownfail/skip and open an issue to fix it later;

I think even if I adapt the code that I changed in here, it's probably react itself that is failing the current setup because they use Map, Set, and requestAnimationFrame -- https://reactjs.org/blog/2017/09/26/react-v16.0.html#javascript-environment-requirements

Either I stick in yet another shim for phantom or I go down the rabbit hole of adapting the tests.

[rgbkrk]

I'm not 100% comfortable with my understanding of the testing setup as it is… but I'm happy to work on modernising it if someone can point me in the right direction.

Yeah, happily. I'll get something started following on with what I've started tinkering with in #2891.

[gnestor]

otherwise just mark the test as knownfail/skip and open an issue to fix it later;

@rgbkrk What do you think of doing that as a temporary means to shipping the VDOM renderer?

[jasongrout]

Since all our supported browsers are modern, I've used an actual class here as well as arrow functions (where appropriate, to replace use of that = this).

Nice!!!

[rgbkrk]

I... Think it would mean all the js tests would be disabled.

[gnestor]

otherwise just mark the test as knownfail/skip and open an issue to fix it later;

@Carreau Would that effectively disable all of our JS tests?

[rgbkrk]

Yes.

Hence why I want to overhaul the testing setup.

[gnestor]

@rgbkrk Sorry, I meant to mention @Carreau to ask him to clarify because it sounds like what he's proposing is a quick albeit temporary fix.

[takluyver]

What's the next move on this?

[rgbkrk]

I've been a bit stuck, hoping to switch out the testing framework (#2891).

[Carreau]

I've been a bit stuck, hoping to switch out the testing framework (#2891).

Just skip the test, we have users to test the UI in depth. :-)

[rgbkrk]

Rebased just in case, I'll see if skipping tests is feasible (I... kind of think it's all of them...)

[rgbkrk]

There's a lot more to either skip or rewrite.

[rgbkrk]

Does it seem like we could include core-js into our page, particularly for phantom? https://github.com/zloirock/core-js

[takluyver]

I've opened #3321 to start a switch towards Selenium - would that get around the issues you're having with the PhantomJS tests?

[gnestor]

It sure sounds like it would. @rgbkrk?

[rgbkrk]

Yeah, I think so! Selenium is pretty well up to date and well-backed.

[blink1073]

Closing since we're using react 16 now. Cheers!

[rgbkrk]

Wait what?! OMG that's great!