Test React integration with Angular on the current Montage code base

[maboa]

This will allow us to figure out:

1. Whether it is possible IRL
2. The simplest possible React wiring

[Laurian]

bower registry <> npm registry

root@abeb978f2e16:/app# bower --allow-root install
bower react#^16.4.2         not-cached https://github.com/facebook/react-bower.git#^16.4.2
bower react#^16.4.2            resolve https://github.com/facebook/react-bower.git#^16.4.2
bower react-dom#^16.4.2     not-cached https://github.com/EtienneLem/react-dom.git#^16.4.2
bower react-dom#^16.4.2        resolve https://github.com/EtienneLem/react-dom.git#^16.4.2
bower prop-types#^15.6.2     ENOTFOUND Package prop-types not found
react2angular                        ENOTFOUND Package react2angular not found

It got the wrong react-dom and cannot find prop-types, I'll have to use npm install and most likely tweak grunt build tasks to deal with node_modules apart of bower install folder.

Also node v0.10.26 might create weird issues.

[Laurian]

grunt build system basically concatenates bower deps and vanilla js angular code and uglifies it; since there is no transpilation we could not write the react code in here but in a different repo where we can build and pack it just ready to be installed with bower.

However at least react2angular if not also react, react-dom and prop-types need to be npm installed and bundled within this build.

[Laurian]

Based on an ejected CRA project, where I set in webpack angular as external, I can export to the global scope 😱 a react2angular-wrapped react component: window.AngularFoo = react2angular(Foo, ['foo']);

The webpack generated bundle can be loaded with a script tag in montage, and the react2angular-wrapped react component used directly in the code:

angular
  .module('components.videoTimeline', ['app.services'])
  .component('foobar', window.AngularFoo)

<foobar foo="bar"></foobar>

Note that montage is on angular 1.3, react2angular requires 1.5+; the lack of module.component() was bridged with https://github.com/toddmotto/angular-component

TODO: debug why in react props are empty (should be foo = "bar")

[Laurian]

is produced by https://github.com/meedan/montage/blob/0f10a3ede7d7fceb2bf378d6c5274970b9591341/appengine/src/greenday_public/static-dev/js/components/gd-video-timeline/gd-video-timeline.html#L16-L18 where foobar is declared as component in https://github.com/meedan/montage/blob/0f10a3ede7d7fceb2bf378d6c5274970b9591341/appengine/src/greenday_public/static-dev/js/components/gd-video-timeline/videoTimeline.module.js#L4 where AngularSample is a 😱 global react2angular export of a react component https://github.com/Laurian/r2a-sample/blob/master/src/Sample.js build from an ejected create-react-app template with few modifications (no hash in exported files, bower.json declaration with angular-component dependency, and webpack ignoring/considering angular as global)

In montage this react component dependency is imported via bower: https://github.com/meedan/montage/blob/6bcb0ee41cd69944c8a2487ae1ecd88b750de5c1/bower.json#L25 and loaded in index.html: https://github.com/meedan/montage/blob/6bcb0ee41cd69944c8a2487ae1ecd88b750de5c1/appengine/src/greenday_public/templates/index.html#L60 incl. its dependency https://github.com/meedan/montage/blob/6bcb0ee41cd69944c8a2487ae1ecd88b750de5c1/appengine/src/greenday_public/templates/index.html#L63