From 42a92240da7802657260458708b8cde88168cfa3 Mon Sep 17 00:00:00 2001 From: CPatchane Date: Mon, 12 Nov 2018 17:32:32 +0100 Subject: [PATCH 1/2] fix: :bug: Handled global React as aliases instead --- config/aliases/globalReact.js | 1 + config/aliases/globalReactDOM.js | 1 + config/webpack.config.base.js | 9 +++++++-- package.json | 3 +-- src/prepareReact.js | 11 ----------- 5 files changed, 10 insertions(+), 15 deletions(-) create mode 100644 config/aliases/globalReact.js create mode 100644 config/aliases/globalReactDOM.js delete mode 100644 src/prepareReact.js diff --git a/config/aliases/globalReact.js b/config/aliases/globalReact.js new file mode 100644 index 000000000..935790619 --- /dev/null +++ b/config/aliases/globalReact.js @@ -0,0 +1 @@ +module.exports = window.React || require('react-bundled') diff --git a/config/aliases/globalReactDOM.js b/config/aliases/globalReactDOM.js new file mode 100644 index 000000000..ec5f94d83 --- /dev/null +++ b/config/aliases/globalReactDOM.js @@ -0,0 +1 @@ +module.exports = window.ReactDOM || require('react-dom-bundled') diff --git a/config/webpack.config.base.js b/config/webpack.config.base.js index 027e9377e..afe0ddce1 100644 --- a/config/webpack.config.base.js +++ b/config/webpack.config.base.js @@ -9,7 +9,6 @@ const SRC_DIR = path.resolve(__dirname, '../src') module.exports = { entry: [ // Check for global React or load dependency - path.resolve(__dirname, '../src/prepareReact.js'), path.resolve(__dirname, '../src/index') ], output: { @@ -19,7 +18,13 @@ module.exports = { }, resolve: { extensions: ['.js', '.json', '.yaml'], - modules: [SRC_DIR, path.join(__dirname, '../node_modules')] + modules: [SRC_DIR, path.join(__dirname, '../node_modules')], + alias: { + react: path.resolve(__dirname, 'aliases/globalReact'), + 'react-dom': path.resolve(__dirname, 'aliases/globalReactDOM'), + 'react-bundled': 'react', + 'react-dom-bundled': 'react-dom' + } }, devtool: '#source-map', module: { diff --git a/package.json b/package.json index a0744065f..f63feeaca 100644 --- a/package.json +++ b/package.json @@ -127,8 +127,7 @@ "yaml" ], "setupFiles": [ - "/test/jestLib/setup.js", - "/src/prepareReact.js" + "/test/jestLib/setup.js" ], "moduleDirectories": [ "node_modules", diff --git a/src/prepareReact.js b/src/prepareReact.js deleted file mode 100644 index eba9cf17a..000000000 --- a/src/prepareReact.js +++ /dev/null @@ -1,11 +0,0 @@ -// 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 7e97103c2fe557e1469771e5d988cf55b349e8b9 Mon Sep 17 00:00:00 2001 From: CPatchane Date: Mon, 12 Nov 2018 18:38:17 +0100 Subject: [PATCH 2/2] Revert React imports changes This partialy reverts commit bd0e41dce2bbb8bab505feb8a93faa516dc09e93. --- config/webpack.config.base.js | 5 +---- 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 ++--- 17 files changed, 34 insertions(+), 34 deletions(-) diff --git a/config/webpack.config.base.js b/config/webpack.config.base.js index afe0ddce1..44fe3abec 100644 --- a/config/webpack.config.base.js +++ b/config/webpack.config.base.js @@ -7,10 +7,7 @@ const pkg = require('../package.json') const SRC_DIR = path.resolve(__dirname, '../src') module.exports = { - entry: [ - // Check for global React or load dependency - path.resolve(__dirname, '../src/index') - ], + entry: path.resolve(__dirname, '../src/index'), output: { library: ['cozy', 'bar'], libraryTarget: 'umd', diff --git a/src/components/Apps/AppItem.jsx b/src/components/Apps/AppItem.jsx index e1b054931..3f08605c8 100644 --- a/src/components/Apps/AppItem.jsx +++ b/src/components/Apps/AppItem.jsx @@ -1,5 +1,6 @@ -/* global __TARGET__, React */ +/* global __TARGET__ */ +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 5722dabd9..9cc001a8f 100644 --- a/src/components/Apps/AppItemPlaceholder.jsx +++ b/src/components/Apps/AppItemPlaceholder.jsx @@ -1,4 +1,4 @@ -/* global React */ +import React from 'react' export const AppItemPlaceholder = () => (
  • diff --git a/src/components/Apps/AppNavButtons.jsx b/src/components/Apps/AppNavButtons.jsx index c5533a9a5..8ab8aba9a 100644 --- a/src/components/Apps/AppNavButtons.jsx +++ b/src/components/Apps/AppNavButtons.jsx @@ -1,4 +1,4 @@ -/* global React */ +import React, { Component } from '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 React.Component { +class AppNavButton extends Component { render() { const { homeApp, diff --git a/src/components/Apps/AppsContent.jsx b/src/components/Apps/AppsContent.jsx index b38e98742..67f813c6c 100644 --- a/src/components/Apps/AppsContent.jsx +++ b/src/components/Apps/AppsContent.jsx @@ -1,4 +1,4 @@ -/* global React */ +import React, { Component } from '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 React.Component { +class AppsContent extends 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 938ba8504..8e934e355 100644 --- a/src/components/Apps/index.jsx +++ b/src/components/Apps/index.jsx @@ -1,9 +1,9 @@ -/* global React */ +import React, { Component } from 'react' import AppsContent from 'components/Apps/AppsContent' import AppNavButtons from 'components/Apps/AppNavButtons' -class Apps extends React.Component { +class Apps extends Component { constructor(props) { super(props) this.state = { diff --git a/src/components/Banner.jsx b/src/components/Banner.jsx index e3abedd18..f07b88ea7 100644 --- a/src/components/Banner.jsx +++ b/src/components/Banner.jsx @@ -1,8 +1,8 @@ -/* global React */ +import React, { Component } from 'react' import { ButtonLink } from 'cozy-ui/react/Button' import { translate } from 'cozy-ui/react/I18n' -class Banner extends React.Component { +class Banner extends Component { constructor(props) { super(props) this.state = { unmounted: true } diff --git a/src/components/Bar.jsx b/src/components/Bar.jsx index ffe63eadc..c26fbce18 100644 --- a/src/components/Bar.jsx +++ b/src/components/Bar.jsx @@ -1,6 +1,7 @@ -/* global __PIWIK_TRACKER_URL__ __PIWIK_SITEID__ __PIWIK_DIMENSION_ID_APP__, React */ +/* global __PIWIK_TRACKER_URL__ __PIWIK_SITEID__ __PIWIK_DIMENSION_ID_APP__ */ import 'core-js/modules/es6.object.assign' +import React, { Component } from 'react' import { connect } from 'react-redux' import { translate } from 'cozy-ui/react/I18n' @@ -26,7 +27,7 @@ import { shouldEnableClaudy } from 'lib/reducers' -class Bar extends React.Component { +class Bar extends Component { constructor(props) { super(props) this.state = { diff --git a/src/components/Claudy.jsx b/src/components/Claudy.jsx index dc101c04b..7ebcd0471 100644 --- a/src/components/Claudy.jsx +++ b/src/components/Claudy.jsx @@ -1,7 +1,7 @@ -/* global React */ +import React, { Component } from 'react' import { create as createIntent } from 'lib/intents' -class Claudy extends React.Component { +class Claudy extends Component { constructor(props, context) { super(props) this.store = context.barStore diff --git a/src/components/Drawer.jsx b/src/components/Drawer.jsx index c3087fb2b..f859b719b 100644 --- a/src/components/Drawer.jsx +++ b/src/components/Drawer.jsx @@ -1,4 +1,4 @@ -/* global React */ +import React, { Component } from 'react' import { connect } from 'react-redux' import Hammer from 'hammerjs' @@ -11,7 +11,7 @@ import { logOut } from 'lib/reducers' -class Drawer extends React.Component { +class Drawer extends Component { constructor(props) { super(props) this.state = { diff --git a/src/components/SearchBar.jsx b/src/components/SearchBar.jsx index 28d90e282..8e96b6c77 100644 --- a/src/components/SearchBar.jsx +++ b/src/components/SearchBar.jsx @@ -1,4 +1,4 @@ -/* global React */ +import React, { Component } from '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 React.Component { +class SearchBar extends Component { state = { input: '', query: null, diff --git a/src/components/Settings/SettingsContent.jsx b/src/components/Settings/SettingsContent.jsx index 181bf4ea7..c387b6c81 100644 --- a/src/components/Settings/SettingsContent.jsx +++ b/src/components/Settings/SettingsContent.jsx @@ -1,4 +1,5 @@ -/* global __TARGET__, React */ +/* global __TARGET__ */ +import React from 'react' import { translate } from 'cozy-ui/react/I18n' diff --git a/src/components/Settings/StorageData.jsx b/src/components/Settings/StorageData.jsx index c66c21622..b5091a7de 100644 --- a/src/components/Settings/StorageData.jsx +++ b/src/components/Settings/StorageData.jsx @@ -1,4 +1,4 @@ -/* global React */ +import React from '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 d19b4f06a..d055a5dc5 100644 --- a/src/components/Settings/index.jsx +++ b/src/components/Settings/index.jsx @@ -1,4 +1,4 @@ -/* global React */ +import React, { Component } from '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 React.Component { +class Settings extends Component { constructor(props) { super(props) this.state = { diff --git a/src/components/SupportModal.jsx b/src/components/SupportModal.jsx index cccfbe4f2..cc8335362 100644 --- a/src/components/SupportModal.jsx +++ b/src/components/SupportModal.jsx @@ -1,9 +1,9 @@ -/* global React */ +import React, { Component } from '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 React.Component { +class SupportModal extends Component { constructor(props, context) { super(props) this.store = context.barStore diff --git a/src/index.jsx b/src/index.jsx index 6c364cf3b..218274760 100644 --- a/src/index.jsx +++ b/src/index.jsx @@ -1,7 +1,10 @@ -/* global __TARGET__, __VERSION__, React, ReactDOM */ +/* global __TARGET__, __VERSION__ */ 'use strict' +import React from 'react' +import { render } from 'react-dom' + import I18n from 'cozy-ui/react/I18n' import stack from './lib/stack' import { @@ -21,8 +24,6 @@ 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 9ad7f53f2..f2f97fcf6 100644 --- a/src/lib/api.js +++ b/src/lib/api.js @@ -1,5 +1,4 @@ -/* global React */ - +import React, { Component } from 'react' import { getContent, setContent, setLocale } from './reducers' const upperFirstLetter = val => { @@ -28,7 +27,7 @@ const wrapInElement = v => { * @param {BarStore} store */ const barContentComponent = (store, location) => - class BarContent extends React.Component { + class BarContent extends Component { componentDidMount() { this.prev = getContent(store.getState(), location) this.setContent(this.props.children)