feat: Externalize React WIP

TODO we should find out how to make React available as UMD module
from the app, instead of loading it from the CDN.

config/aliases/globalReact.js

@@ -1 +1,7 @@
+if (!window.React) {
+  throw new Error(
+    'React must be globally set on window for the cozy-bar to use it'
+  )
+}
+
 module.exports = window.React || require('my-react')

config/webpack.config.base.js

@@ -13,13 +13,13 @@ module.exports = {
     libraryTarget: 'umd',
     umdNamedDefine: true
   },
+  externals: {
+    react: 'React',
+    'react-dom': 'ReactDOM'
+  },
   resolve: {
     extensions: ['.js', '.json', '.yaml', '.jsx'],
-    modules: [SRC_DIR, 'node_modules'],
-    alias: {
-      react: path.resolve(__dirname, 'aliases/globalReact'),
-      'react-dom': path.resolve(__dirname, 'aliases/globalReactDOM')
-    }
+    modules: [SRC_DIR, 'node_modules']
   },
   devtool: '#source-map',
   module: {

examples/index.html

@@ -3,5 +3,8 @@
 <!-- First thing is to configure minilog so that it is bound to window -->
 <script src='./logs.js'></script>
 <!-- Serves the bar from a server so that it is not processed by parcel -->
-<script src='http://localhost:8000/cozy-bar.mobile.js'></script>
 <script src='./index.jsx'></script>
+
+<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
+<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
+<script src='http://localhost:8000/cozy-bar.js'></script>

src/index.jsx

@@ -1,6 +1,14 @@
 /* global __VERSION__ */
 
+import React from 'react'
+import { render } from 'react-dom'
+import { connect, Provider } from 'react-redux'
+
 import { isMobileApp } from 'cozy-device-helper'
+import I18n from 'cozy-ui/transpiled/react/I18n'
+import { CozyProvider } from 'cozy-client'
+
+import Bar from 'components/Bar'
 
 import stack from 'lib/stack'
 import {
@@ -65,14 +73,6 @@ const injectBarInDOM = data => {
 }
 
 const renderBar = (barNode, options) => {
-  // import React related modules on init only
-  const React = require('react')
-  const { render } = require('react-dom')
-  const { connect, Provider } = require('react-redux')
-  const I18n = require('cozy-ui/react/I18n').default
-  const Bar = require('components/Bar').default
-  const CozyProvider = require('cozy-client').CozyProvider
-
   const { cozyClient } = options
 
   // we connect the I18n component to the store to listen