From bd0e41dce2bbb8bab505feb8a93faa516dc09e93 Mon Sep 17 00:00:00 2001 From: CPatchane Date: Fri, 9 Nov 2018 14:08:00 +0100 Subject: [PATCH 1/2] fix: :bug: Use default React bundled if not found --- config/webpack.config.base.js | 20 +++++--------------- package.json | 3 ++- src/components/Apps/AppItem.jsx | 3 +-- src/components/Apps/AppItemPlaceholder.jsx | 2 +- src/components/Apps/AppNavButtons.jsx | 4 ++-- src/components/Apps/AppsContent.jsx | 4 ++-- src/components/Apps/index.jsx | 4 ++-- src/components/Banner.jsx | 4 ++-- src/components/Bar.jsx | 5 ++--- src/components/Claudy.jsx | 4 ++-- src/components/Drawer.jsx | 4 ++-- src/components/SearchBar.jsx | 4 ++-- src/components/Settings/SettingsContent.jsx | 3 +-- src/components/Settings/StorageData.jsx | 2 +- src/components/Settings/index.jsx | 4 ++-- src/components/SupportModal.jsx | 4 ++-- src/index.jsx | 7 +++---- src/lib/api.js | 5 +++-- src/prepareReact.js | 11 +++++++++++ 19 files changed, 48 insertions(+), 49 deletions(-) create mode 100644 src/prepareReact.js diff --git a/config/webpack.config.base.js b/config/webpack.config.base.js index 78a5bc8b2..027e9377e 100644 --- a/config/webpack.config.base.js +++ b/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')] diff --git a/package.json b/package.json index e55e45d73..84bf0e222 100644 --- a/package.json +++ b/package.json @@ -127,7 +127,8 @@ "yaml" ], "setupFiles": [ - "/test/jestLib/setup.js" + "/test/jestLib/setup.js", + "/src/prepareReact.js" ], "moduleDirectories": [ "node_modules", diff --git a/src/components/Apps/AppItem.jsx b/src/components/Apps/AppItem.jsx index 3f08605c8..e1b054931 100644 --- a/src/components/Apps/AppItem.jsx +++ b/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' diff --git a/src/components/Apps/AppItemPlaceholder.jsx b/src/components/Apps/AppItemPlaceholder.jsx index 9cc001a8f..5722dabd9 100644 --- a/src/components/Apps/AppItemPlaceholder.jsx +++ b/src/components/Apps/AppItemPlaceholder.jsx @@ -1,4 +1,4 @@ -import React from 'react' +/* global React */ export const AppItemPlaceholder = () => (
  • diff --git a/src/components/Apps/AppNavButtons.jsx b/src/components/Apps/AppNavButtons.jsx index 8ab8aba9a..c5533a9a5 100644 --- a/src/components/Apps/AppNavButtons.jsx +++ b/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, diff --git a/src/components/Apps/AppsContent.jsx b/src/components/Apps/AppsContent.jsx index 67f813c6c..b38e98742 100644 --- a/src/components/Apps/AppsContent.jsx +++ b/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) diff --git a/src/components/Apps/index.jsx b/src/components/Apps/index.jsx index 8e934e355..938ba8504 100644 --- a/src/components/Apps/index.jsx +++ b/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 = { diff --git a/src/components/Banner.jsx b/src/components/Banner.jsx index f07b88ea7..e3abedd18 100644 --- a/src/components/Banner.jsx +++ b/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 } diff --git a/src/components/Bar.jsx b/src/components/Bar.jsx index c26fbce18..ffe63eadc 100644 --- a/src/components/Bar.jsx +++ b/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 = { diff --git a/src/components/Claudy.jsx b/src/components/Claudy.jsx index 7ebcd0471..dc101c04b 100644 --- a/src/components/Claudy.jsx +++ b/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 diff --git a/src/components/Drawer.jsx b/src/components/Drawer.jsx index f859b719b..c3087fb2b 100644 --- a/src/components/Drawer.jsx +++ b/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 = { diff --git a/src/components/SearchBar.jsx b/src/components/SearchBar.jsx index 8e96b6c77..28d90e282 100644 --- a/src/components/SearchBar.jsx +++ b/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, diff --git a/src/components/Settings/SettingsContent.jsx b/src/components/Settings/SettingsContent.jsx index c387b6c81..181bf4ea7 100644 --- a/src/components/Settings/SettingsContent.jsx +++ b/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' diff --git a/src/components/Settings/StorageData.jsx b/src/components/Settings/StorageData.jsx index b5091a7de..c66c21622 100644 --- a/src/components/Settings/StorageData.jsx +++ b/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 }) => { diff --git a/src/components/Settings/index.jsx b/src/components/Settings/index.jsx index d055a5dc5..d19b4f06a 100644 --- a/src/components/Settings/index.jsx +++ b/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 = { diff --git a/src/components/SupportModal.jsx b/src/components/SupportModal.jsx index cc8335362..cccfbe4f2 100644 --- a/src/components/SupportModal.jsx +++ b/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 diff --git a/src/index.jsx b/src/index.jsx index 218274760..6c364cf3b 100644 --- a/src/index.jsx +++ b/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 diff --git a/src/lib/api.js b/src/lib/api.js index f2f97fcf6..9ad7f53f2 100644 --- a/src/lib/api.js +++ b/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) diff --git a/src/prepareReact.js b/src/prepareReact.js new file mode 100644 index 000000000..eba9cf17a --- /dev/null +++ b/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 +} From f5d41cc776bd894a53fef6739f792936a4f63790 Mon Sep 17 00:00:00 2001 From: CPatchane Date: Fri, 9 Nov 2018 15:02:39 +0100 Subject: [PATCH 2/2] test: Increase bundlesize limit for React :/ --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 84bf0e222..a0744065f 100644 --- a/package.json +++ b/package.json @@ -115,7 +115,7 @@ "bundlesize": [ { "path": "./dist/cozy-bar.min.js", - "maxSize": "120 KB" + "maxSize": "170 KB" } ], "jest": {