Merge pull request #337 from CPatchane/prepare_React

Use default React bundled if not found

config/webpack.config.base.js

@@ -7,26 +7,16 @@ const pkg = require('../package.json')
 const SRC_DIR = path.resolve(__dirname, '../src')
 
 module.exports = {
-  entry: path.resolve(__dirname, '../src/index'),
+  entry: [
+    // Check for global React or load dependency
+    path.resolve(__dirname, '../src/prepareReact.js'),
+    path.resolve(__dirname, '../src/index')
+  ],
   output: {
     library: ['cozy', 'bar'],
     libraryTarget: 'umd',
     umdNamedDefine: true
   },
-  externals: {
-    'react-dom': {
-      amd: 'react-dom',
-      commonjs: 'react-dom',
-      commonjs2: 'react-dom',
-      root: 'ReactDOM'
-    },
-    react: {
-      amd: 'react',
-      commonjs: 'react',
-      commonjs2: 'react',
-      root: 'React'
-    }
-  },
   resolve: {
     extensions: ['.js', '.json', '.yaml'],
     modules: [SRC_DIR, path.join(__dirname, '../node_modules')]

package.json

@@ -115,7 +115,7 @@
   "bundlesize": [
     {
       "path": "./dist/cozy-bar.min.js",
-      "maxSize": "120 KB"
+      "maxSize": "170 KB"
     }
   ],
   "jest": {
@@ -127,7 +127,8 @@
       "yaml"
     ],
     "setupFiles": [
-      "<rootDir>/test/jestLib/setup.js"
+      "<rootDir>/test/jestLib/setup.js",
+      "<rootDir>/src/prepareReact.js"
     ],
     "moduleDirectories": [
       "node_modules",

src/components/Apps/AppItem.jsx

@@ -1,6 +1,5 @@
-/* global __TARGET__ */
+/* global __TARGET__, React */
 
-import React from 'react'
 import { appShape } from 'proptypes/index'
 import { checkApp, startApp } from 'cozy-device-helper'
 import expiringMemoize from 'lib/expiringMemoize'

src/components/Apps/AppItemPlaceholder.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+/* global React */
 
 export const AppItemPlaceholder = () => (
   <li className="coz-nav-apps-item">

src/components/Apps/AppNavButtons.jsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+/* global React */
 import { connect } from 'react-redux'
 
 import { getHomeApp } from 'lib/reducers'
@@ -8,7 +8,7 @@ import Icon from 'cozy-ui/react/Icon'
 import homeIcon from 'assets/icons/icon-cozy-home.svg'
 import { isFetchingApps } from 'lib/reducers'
 
-class AppNavButton extends Component {
+class AppNavButton extends React.Component {
   render() {
     const {
       homeApp,

src/components/Apps/AppsContent.jsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+/* global React */
 import { connect } from 'react-redux'
 
 import { translate } from 'cozy-ui/react/I18n'
@@ -10,7 +10,7 @@ import AppItemPlaceholder from 'components/Apps/AppItemPlaceholder'
 import cozyIcon from 'assets/icons/16/icon-cozy-16.svg'
 import homeIcon from 'assets/icons/icon-cozy-home.svg'
 
-class AppsContent extends Component {
+class AppsContent extends React.Component {
   constructor(props, context) {
     super(props, context)
     this.translateApp = translateApp(this.props.t)

src/components/Apps/index.jsx

@@ -1,9 +1,9 @@
-import React, { Component } from 'react'
+/* global React */
 
 import AppsContent from 'components/Apps/AppsContent'
 import AppNavButtons from 'components/Apps/AppNavButtons'
 
-class Apps extends Component {
+class Apps extends React.Component {
   constructor(props) {
     super(props)
     this.state = {

src/components/Banner.jsx

@@ -1,8 +1,8 @@
-import React, { Component } from 'react'
+/* global React */
 import { ButtonLink } from 'cozy-ui/react/Button'
 import { translate } from 'cozy-ui/react/I18n'
 
-class Banner extends Component {
+class Banner extends React.Component {
   constructor(props) {
     super(props)
     this.state = { unmounted: true }

src/components/Bar.jsx

@@ -1,7 +1,6 @@
-/* global __PIWIK_TRACKER_URL__  __PIWIK_SITEID__ __PIWIK_DIMENSION_ID_APP__ */
+/* global __PIWIK_TRACKER_URL__  __PIWIK_SITEID__ __PIWIK_DIMENSION_ID_APP__, React */
 
 import 'core-js/modules/es6.object.assign'
-import React, { Component } from 'react'
 import { connect } from 'react-redux'
 
 import { translate } from 'cozy-ui/react/I18n'
@@ -27,7 +26,7 @@ import {
   shouldEnableClaudy
 } from 'lib/reducers'
 
-class Bar extends Component {
+class Bar extends React.Component {
   constructor(props) {
     super(props)
     this.state = {

src/components/Claudy.jsx

@@ -1,7 +1,7 @@
-import React, { Component } from 'react'
+/* global React */
 import { create as createIntent } from 'lib/intents'
 
-class Claudy extends Component {
+class Claudy extends React.Component {
   constructor(props, context) {
     super(props)
     this.store = context.barStore

src/components/Drawer.jsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+/* global React */
 import { connect } from 'react-redux'
 import Hammer from 'hammerjs'
 
@@ -11,7 +11,7 @@ import {
   logOut
 } from 'lib/reducers'
 
-class Drawer extends Component {
+class Drawer extends React.Component {
   constructor(props) {
     super(props)
     this.state = {

src/components/SearchBar.jsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+/* global React */
 import { translate } from 'cozy-ui/react/I18n'
 import Autosuggest from 'react-autosuggest'
 import debounce from 'lodash.debounce'
@@ -91,7 +91,7 @@ const highlightQueryTerms = (searchResult, query) => {
   return slicedOriginalResult
 }
 
-class SearchBar extends Component {
+class SearchBar extends React.Component {
   state = {
     input: '',
     query: null,

src/components/Settings/SettingsContent.jsx

@@ -1,5 +1,4 @@
-/* global __TARGET__ */
-import React from 'react'
+/* global __TARGET__, React */
 
 import { translate } from 'cozy-ui/react/I18n'
 

src/components/Settings/StorageData.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+/* global React */
 import { translate } from 'cozy-ui/react/I18n'
 
 const StorageData = ({ t, data }) => {

src/components/Settings/index.jsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+/* global React */
 import { connect } from 'react-redux'
 
 import { translate } from 'cozy-ui/react/I18n'
@@ -13,7 +13,7 @@ import {
   logOut
 } from 'lib/reducers'
 
-class Settings extends Component {
+class Settings extends React.Component {
   constructor(props) {
     super(props)
     this.state = {

src/components/SupportModal.jsx

@@ -1,9 +1,9 @@
-import React, { Component } from 'react'
+/* global React */
 import Modal, { ModalContent } from 'cozy-ui/react/Modal'
 import Spinner from 'cozy-ui/react/Spinner'
 import { create as createIntent } from 'lib/intents'
 
-class SupportModal extends Component {
+class SupportModal extends React.Component {
   constructor(props, context) {
     super(props)
     this.store = context.barStore

src/index.jsx

@@ -1,10 +1,7 @@
-/* global __TARGET__, __VERSION__ */
+/* global __TARGET__, __VERSION__, React, ReactDOM */
 
 'use strict'
 
-import React from 'react'
-import { render } from 'react-dom'
-
 import I18n from 'cozy-ui/react/I18n'
 import stack from './lib/stack'
 import {
@@ -24,6 +21,8 @@ import api from 'lib/api'
 require('./styles')
 require('./lib/importIcons')
 
+const { render } = ReactDOM
+
 const APP_SELECTOR = '[role=application]'
 
 // store

src/lib/api.js

@@ -1,4 +1,5 @@
-import React, { Component } from 'react'
+/* global React */
+
 import { getContent, setContent, setLocale } from './reducers'
 
 const upperFirstLetter = val => {
@@ -27,7 +28,7 @@ const wrapInElement = v => {
  * @param  {BarStore} store
  */
 const barContentComponent = (store, location) =>
-  class BarContent extends Component {
+  class BarContent extends React.Component {
     componentDidMount() {
       this.prev = getContent(store.getState(), location)
       this.setContent(this.props.children)

src/prepareReact.js

@@ -0,0 +1,11 @@
+// Check for global React or load dependency
+const ReactBundled = require('react')
+const ReactDOMBundled = require('react-dom')
+
+if (!window.React || !window.ReactDOM) {
+  console.info(
+    'CozyBar: No react related frameworks found, the bar will use its own ones.'
+  )
+  window.React = ReactBundled
+  window.ReactDOM = ReactDOMBundled
+}