Use React and React-DOM through global to use the exact same dependency everywhere

2025-12-11 06:53:12 +00:00 · 2017-09-22 16:56:09 +02:00 · 2017-09-22 16:56:09 +02:00 · b8accc03b9
commit b8accc03b9
parent a67229496e
55 changed files with 30 additions and 61 deletions
--- a/packages/strapi-admin/admin/src/app.js
+++ b/packages/strapi-admin/admin/src/app.js
@ -7,8 +7,6 @@
 import 'babel-polyfill';

 // Import all the third party stuff
-import React from 'react';
-import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
 import { ConnectedRouter } from 'react-router-redux';
 import createHistory from 'history/createBrowserHistory';
@ -121,7 +119,6 @@ window.Strapi = {
  apiUrl,
  refresh: (pluginId) => ({
    translationMessages: (translationMessagesUpdated) => {
-      console.log(translationMessagesUpdated);
      render(merge({}, translationMessages, translationMessagesUpdated));
    },
    leftMenuSections: (leftMenuSectionsUpdated) => {
--- a/packages/strapi-admin/admin/src/components/Header/index.js
+++ b/packages/strapi-admin/admin/src/components/Header/index.js
@ -4,8 +4,6 @@
 *
 */

-import React from 'react';
-
 import styles from './styles.scss';

 class Header extends React.Component { // eslint-disable-line react/prefer-stateless-function
--- a/packages/strapi-admin/admin/src/components/LeftMenuFooter/index.js
+++ b/packages/strapi-admin/admin/src/components/LeftMenuFooter/index.js
@ -4,7 +4,6 @@
 *
 */

-import React from 'react';
 import { defineMessages, FormattedMessage } from 'react-intl';

 import LocaleToggle from 'containers/LocaleToggle';
--- a/packages/strapi-admin/admin/src/components/LeftMenuHeader/index.js
+++ b/packages/strapi-admin/admin/src/components/LeftMenuHeader/index.js
@ -4,7 +4,6 @@
 *
 */

-import React from 'react';
 import { Link } from 'react-router-dom';

 import styles from './styles.scss';
--- a/packages/strapi-admin/admin/src/components/LeftMenuLink/index.js
+++ b/packages/strapi-admin/admin/src/components/LeftMenuLink/index.js
@ -5,7 +5,6 @@
 */

 import _ from 'lodash';
-import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
--- a/packages/strapi-admin/admin/src/components/LeftMenuLinkContainer/index.js
+++ b/packages/strapi-admin/admin/src/components/LeftMenuLinkContainer/index.js
@ -4,7 +4,6 @@
 *
 */

-import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import { map } from 'lodash';
--- a/packages/strapi-admin/admin/src/components/Notification/index.js
+++ b/packages/strapi-admin/admin/src/components/Notification/index.js
@ -4,7 +4,6 @@
 *
 */

-import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';

--- a/packages/strapi-admin/admin/src/components/NotificationsContainer/index.js
+++ b/packages/strapi-admin/admin/src/components/NotificationsContainer/index.js
@ -4,7 +4,6 @@
 *
 */

-import React from 'react';
 import PropTypes from 'prop-types';
 import ReactCSSTransitionGroup from 'react/lib/ReactCSSTransitionGroup';
 import Notification from 'components/Notification';
--- a/packages/strapi-admin/admin/src/components/Toggle/index.js
+++ b/packages/strapi-admin/admin/src/components/Toggle/index.js
@ -4,7 +4,6 @@
 *
 */

-import React from 'react';
 import PropTypes from 'prop-types';

 import ToggleOption from 'components/ToggleOption';
--- a/packages/strapi-admin/admin/src/components/ToggleOption/index.js
+++ b/packages/strapi-admin/admin/src/components/ToggleOption/index.js
@ -4,7 +4,6 @@
 *
 */

-import React from 'react';
 import PropTypes from 'prop-types';
 import { injectIntl, intlShape } from 'react-intl';

--- a/packages/strapi-admin/admin/src/containers/AdminPage/index.js
+++ b/packages/strapi-admin/admin/src/containers/AdminPage/index.js
@ -9,7 +9,6 @@
 * the linting exception.
 */

-import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { createStructuredSelector } from 'reselect';
--- a/packages/strapi-admin/admin/src/containers/App/index.js
+++ b/packages/strapi-admin/admin/src/containers/App/index.js
@ -11,7 +11,6 @@
 * the linting exception.
 */

-import React from 'react';
 import PropTypes from 'prop-types';
 import { Switch, Route } from 'react-router-dom';

--- a/packages/strapi-admin/admin/src/containers/ComingSoonPage/index.js
+++ b/packages/strapi-admin/admin/src/containers/ComingSoonPage/index.js
@ -4,7 +4,6 @@
 *
 */

-import React from 'react';
 import { connect } from 'react-redux';
 import Helmet from 'react-helmet';

--- a/packages/strapi-admin/admin/src/containers/Content/index.js
+++ b/packages/strapi-admin/admin/src/containers/Content/index.js
@ -4,7 +4,6 @@
 *
 */

-import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
--- a/packages/strapi-admin/admin/src/containers/HomePage/index.js
+++ b/packages/strapi-admin/admin/src/containers/HomePage/index.js
@ -4,7 +4,6 @@
 *
 */

-import React from 'react';
 import { connect } from 'react-redux';
 import Helmet from 'react-helmet';
 import { FormattedMessage } from 'react-intl';
--- a/packages/strapi-admin/admin/src/containers/LanguageProvider/index.js
+++ b/packages/strapi-admin/admin/src/containers/LanguageProvider/index.js
@ -6,7 +6,6 @@
 * IntlProvider component and i18n messages (loaded from `app/translations`)
 */

-import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
--- a/packages/strapi-admin/admin/src/containers/LeftMenu/index.js
+++ b/packages/strapi-admin/admin/src/containers/LeftMenu/index.js
@ -4,7 +4,6 @@
 *
 */

-import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';

--- a/packages/strapi-admin/admin/src/containers/LocaleToggle/index.js
+++ b/packages/strapi-admin/admin/src/containers/LocaleToggle/index.js
@ -4,7 +4,6 @@
 *
 */

-import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
--- a/packages/strapi-admin/admin/src/containers/NotFoundPage/index.js
+++ b/packages/strapi-admin/admin/src/containers/NotFoundPage/index.js
@ -9,7 +9,6 @@
 * the linting exception.
 */

-import React from 'react';
 import PropTypes from 'prop-types';
 import { defineMessages, FormattedMessage } from 'react-intl';

--- a/packages/strapi-admin/admin/src/containers/NotificationProvider/index.js
+++ b/packages/strapi-admin/admin/src/containers/NotificationProvider/index.js
@ -4,7 +4,6 @@
 *
 */

-import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { createStructuredSelector } from 'reselect';
--- a/packages/strapi-admin/admin/src/containers/PluginPage/index.js
+++ b/packages/strapi-admin/admin/src/containers/PluginPage/index.js
@ -3,8 +3,7 @@
 * PluginPage
 *
 */
-
-import React from 'react';
+ 
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import Helmet from 'react-helmet';
--- a/packages/strapi-admin/admin/src/index.html
+++ b/packages/strapi-admin/admin/src/index.html
@ -12,5 +12,7 @@
 <!-- The app hooks into this div -->
 <div id="app"></div>
 <!-- A lot of magic happens in this file. HtmlWebpackPlugin automatically includes all assets (e.g. bundle.js, main.css) with the correct HTML tags, which is why they are missing in this HTML file. Don't add any assets here! (Check out webpackconfig.js if you want to know more) -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-with-addons.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js"></script>
 </body>
 </html>
--- a/packages/strapi-admin/admin/src/utils/injectReducer.js
+++ b/packages/strapi-admin/admin/src/utils/injectReducer.js
@ -1,4 +1,4 @@
-import React from 'react';
+
 import PropTypes from 'prop-types';
 import hoistNonReactStatics from 'hoist-non-react-statics';

--- a/packages/strapi-admin/admin/src/utils/injectSaga.js
+++ b/packages/strapi-admin/admin/src/utils/injectSaga.js
@ -1,4 +1,4 @@
-import React from 'react';
+
 import PropTypes from 'prop-types';
 import hoistNonReactStatics from 'hoist-non-react-statics';

--- a/packages/strapi-admin/package.json
+++ b/packages/strapi-admin/package.json
@ -30,7 +30,7 @@
  },
  "devDependencies": {
    "cross-env": "^5.0.5",
-    "eslint": "^4.7.1",
+    "eslint": "^4.7.2",
    "eslint-config-airbnb": "^15.1.0",
    "eslint-config-airbnb-base": "^11.3.2",
    "eslint-config-prettier": "^2.5.0",
--- a/packages/strapi-helper-plugin/lib/internals/eslint/.eslintrc.json
+++ b/packages/strapi-helper-plugin/lib/internals/eslint/.eslintrc.json
@ -71,6 +71,7 @@
    "no-use-before-define": 0,
    "prefer-template": 2,
    "class-methods-use-this": 0,
+    "react/react-in-jsx-scope": 0,
    "react/forbid-prop-types": 0,
    "react/jsx-first-prop-new-line": [
      2,
--- a/packages/strapi-helper-plugin/lib/internals/webpack/webpack.base.babel.js
+++ b/packages/strapi-helper-plugin/lib/internals/webpack/webpack.base.babel.js
@ -16,8 +16,13 @@ module.exports = (options) => ({
    publicPath: '/',
  }, options.output), // Merge with env dependent settings
  module: {
+    // Comment
+    noParse: [
+      /\/react\//g,
+      /\/react-dom\//g,
+    ],
    loaders: [{
-      test: /\.js$/, // Transform all .js files required somewhere with Babel
+      test: /\.js$/, // Transform all .js files required somewhere with Babel,
      use: {
        loader: 'babel-loader',
        options: {
@ -140,6 +145,8 @@ module.exports = (options) => ({
    ],
    alias: {
      moment: 'moment/moment.js',
+      'react': 'React',
+      'react-dom': 'React-DOM',
    },
    symlinks: false,
    extensions: [
@ -153,7 +160,7 @@ module.exports = (options) => ({
      'main',
    ],
  },
-
+  externals: generateExternals(),
  resolveLoader: {
    modules: [
      path.join(__dirname, '..', '..', '..', 'node_modules'),
@ -163,3 +170,10 @@ module.exports = (options) => ({
  devtool: options.devtool,
  target: 'web', // Make web variables accessible to webpack, e.g. window
 });
+
+function generateExternals() {
+  return {
+    'react': 'React',
+    'react-dom': 'ReactDOM',
+  };
+}
--- a/packages/strapi-helper-plugin/lib/src/app.js
+++ b/packages/strapi-helper-plugin/lib/src/app.js
@ -5,7 +5,6 @@
 * only setup and plugin code.
 */

-import React from 'react';
 import { Provider } from 'react-redux';

 import App, { bootstrap } from 'containers/App'; // eslint-disable-line
--- a/packages/strapi-helper-plugin/lib/src/components/Button/index.js
+++ b/packages/strapi-helper-plugin/lib/src/components/Button/index.js
@ -4,7 +4,6 @@
 *
 */

-import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import styles from './styles.scss';
--- a/packages/strapi-helper-plugin/lib/src/components/Input/index.js
+++ b/packages/strapi-helper-plugin/lib/src/components/Input/index.js
@ -4,7 +4,6 @@
 *
 */

-import React from 'react';
 import moment from 'moment';
 import PropTypes from 'prop-types';
 import { get, isEmpty, map, mapKeys, isObject, reject, includes } from 'lodash';
--- a/packages/strapi-helper-plugin/lib/src/components/PluginHeader/index.js
+++ b/packages/strapi-helper-plugin/lib/src/components/PluginHeader/index.js
@ -4,7 +4,6 @@
 *
 */

-import React from 'react';
 import PropTypes from 'prop-types';
 import PluginHeaderTitle from 'components/PluginHeaderTitle';
 import PluginHeaderActions from 'components/PluginHeaderActions';
--- a/packages/strapi-helper-plugin/lib/src/components/PluginHeaderActions/index.js
+++ b/packages/strapi-helper-plugin/lib/src/components/PluginHeaderActions/index.js
@ -4,7 +4,6 @@
 *
 */

-import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import Button from 'components/Button';
--- a/packages/strapi-helper-plugin/lib/src/components/PluginHeaderTitle/index.js
+++ b/packages/strapi-helper-plugin/lib/src/components/PluginHeaderTitle/index.js
@ -4,7 +4,6 @@
 *
 */

-import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';

--- a/packages/strapi-helper-plugin/lib/src/components/PopUpWarning/index.js
+++ b/packages/strapi-helper-plugin/lib/src/components/PopUpWarning/index.js
@ -4,7 +4,6 @@
 *
 */

-import React from 'react';
 import PropTypes from 'prop-types';

 // modal
--- a/packages/strapi-helper-plugin/lib/src/utils/injectReducer.js
+++ b/packages/strapi-helper-plugin/lib/src/utils/injectReducer.js
@ -1,4 +1,4 @@
-import React from 'react';
+
 import PropTypes from 'prop-types';
 import hoistNonReactStatics from 'hoist-non-react-statics';

--- a/packages/strapi-helper-plugin/lib/src/utils/injectSaga.js
+++ b/packages/strapi-helper-plugin/lib/src/utils/injectSaga.js
@ -1,4 +1,4 @@
-import React from 'react';
+
 import PropTypes from 'prop-types';
 import hoistNonReactStatics from 'hoist-non-react-statics';

--- a/packages/strapi-plugin-content-manager/admin/src/components/Container/index.js
+++ b/packages/strapi-plugin-content-manager/admin/src/components/Container/index.js
@ -4,7 +4,6 @@
 *
 */

-import React from 'react';
 import PropTypes from 'prop-types';

 class Container extends React.Component {
--- a/packages/strapi-plugin-content-manager/admin/src/components/EditForm/index.js
+++ b/packages/strapi-plugin-content-manager/admin/src/components/EditForm/index.js
@ -5,7 +5,6 @@
 */

 // Dependencies.
-import React from 'react';
 import PropTypes from 'prop-types';
 import { findIndex, get, omit, isFunction, merge } from 'lodash';

--- a/packages/strapi-plugin-content-manager/admin/src/components/EditFormRelations/index.js
+++ b/packages/strapi-plugin-content-manager/admin/src/components/EditFormRelations/index.js
@ -4,7 +4,6 @@
 *
 */

-import React from 'react';
 import PropTypes from 'prop-types';
 import { map } from 'lodash';

@ -15,7 +14,7 @@ import styles from './styles.scss';
 class EditFormRelations extends React.Component { // eslint-disable-line react/prefer-stateless-function
  render() {
    const relations = map(this.props.schema[this.props.currentModelName].relations, (relation, i) => {
-      
+
      switch (relation.nature) {
        case 'oneToOne':
        case 'oneToMany':
--- a/packages/strapi-plugin-content-manager/admin/src/components/LimitSelect/index.js
+++ b/packages/strapi-plugin-content-manager/admin/src/components/LimitSelect/index.js
@ -4,7 +4,6 @@
 *
 */

-import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import { map } from 'lodash';
--- a/packages/strapi-plugin-content-manager/admin/src/components/Pagination/index.js
+++ b/packages/strapi-plugin-content-manager/admin/src/components/Pagination/index.js
@ -4,7 +4,6 @@
 *
 */

-import React from 'react';
 import { map } from 'lodash';
 import PropTypes from 'prop-types';

--- a/packages/strapi-plugin-content-manager/admin/src/components/SelectMany/index.js
+++ b/packages/strapi-plugin-content-manager/admin/src/components/SelectMany/index.js
@ -4,7 +4,6 @@
 *
 */

-import React from 'react';
 import Select from 'react-select';
 import PropTypes from 'prop-types';
 import 'react-select/dist/react-select.css';
--- a/packages/strapi-plugin-content-manager/admin/src/components/SelectOne/index.js
+++ b/packages/strapi-plugin-content-manager/admin/src/components/SelectOne/index.js
@ -4,7 +4,6 @@
 *
 */

-import React from 'react';
 import Select from 'react-select';
 import PropTypes from 'prop-types';
 import 'react-select/dist/react-select.css';
--- a/packages/strapi-plugin-content-manager/admin/src/components/Table/index.js
+++ b/packages/strapi-plugin-content-manager/admin/src/components/Table/index.js
@ -4,7 +4,6 @@
 *
 */

-import React from 'react';
 import PropTypes from 'prop-types';

 import TableHeader from '../TableHeader';
--- a/packages/strapi-plugin-content-manager/admin/src/components/TableEmpty/index.js
+++ b/packages/strapi-plugin-content-manager/admin/src/components/TableEmpty/index.js
@ -4,7 +4,6 @@
 *
 */

-import React from 'react';
 import PropTypes from 'prop-types';

 import styles from './styles.scss';
--- a/packages/strapi-plugin-content-manager/admin/src/components/TableFooter/index.js
+++ b/packages/strapi-plugin-content-manager/admin/src/components/TableFooter/index.js
@ -4,7 +4,6 @@
 *
 */

-import React from 'react';
 import PropTypes from 'prop-types';

 import LimitSelect from '../LimitSelect';
@ -22,7 +21,7 @@ class TableFooter extends React.Component {
            limit={this.props.limit}
          />
        </div>
-        
+
        <div className="col-lg-6">
          <Pagination
            limit={this.props.limit}
--- a/packages/strapi-plugin-content-manager/admin/src/components/TableHeader/index.js
+++ b/packages/strapi-plugin-content-manager/admin/src/components/TableHeader/index.js
@ -4,7 +4,6 @@
 *
 */

-import React from 'react';
 import PropTypes from 'prop-types';

 import styles from './styles.scss';
--- a/packages/strapi-plugin-content-manager/admin/src/components/TableRow/index.js
+++ b/packages/strapi-plugin-content-manager/admin/src/components/TableRow/index.js
@ -4,7 +4,6 @@
 *
 */

-import React from 'react';
 import PropTypes from 'prop-types';
 import { isEmpty } from 'lodash';

--- a/packages/strapi-plugin-content-manager/admin/src/containers/App/index.js
+++ b/packages/strapi-plugin-content-manager/admin/src/containers/App/index.js
@ -5,7 +5,6 @@
 *
 */

-import React from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators, compose } from 'redux';
 import { createStructuredSelector } from 'reselect';
--- a/packages/strapi-plugin-content-manager/admin/src/containers/Edit/index.js
+++ b/packages/strapi-plugin-content-manager/admin/src/containers/Edit/index.js
@ -5,7 +5,6 @@
 */

 // Dependencies.
-import React from 'react';
 import moment from 'moment';
 import { connect } from 'react-redux';
 import { bindActionCreators, compose } from 'redux';
--- a/packages/strapi-plugin-content-manager/admin/src/containers/Home/index.js
+++ b/packages/strapi-plugin-content-manager/admin/src/containers/Home/index.js
@ -2,7 +2,6 @@
 * Home
 */

-import React from 'react';
 import { connect } from 'react-redux';
 import { createStructuredSelector } from 'reselect';
 import { FormattedMessage } from 'react-intl';
--- a/packages/strapi-plugin-content-manager/admin/src/containers/List/index.js
+++ b/packages/strapi-plugin-content-manager/admin/src/containers/List/index.js
@ -4,7 +4,6 @@
 *
 */

-import React from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators, compose } from 'redux';
 import { createStructuredSelector } from 'reselect';
--- a/packages/strapi-plugin-content-manager/admin/src/containers/NotFoundPage/index.js
+++ b/packages/strapi-plugin-content-manager/admin/src/containers/NotFoundPage/index.js
@ -9,7 +9,6 @@
 * the linting exception.
 */

-import React from 'react';
 import { FormattedMessage } from 'react-intl';

 export default class NotFound extends React.Component {
--- a/packages/strapi-plugin-content-manager/package.json
+++ b/packages/strapi-plugin-content-manager/package.json
@ -34,7 +34,7 @@
    "prebuild": "npm run build:clean && npm run test",
    "build": "cross-env NODE_ENV=production webpack --config node_modules/strapi-helper-plugin/lib/internals/webpack/webpack.prod.babel.js --color -p --progress",
    "build:clean": "rimraf admin/build",
-    "start": "cross-env NODE_ENV=development node node_modules/strapi-helper-plugin/lib/server",
+    "start": "cross-env NODE_ENV=development PLUGIN=true node node_modules/strapi-helper-plugin/lib/server",
    "generate": "node_modules/plop/plop.js --plopfile node_modules/strapi-helper-plugin/lib/internals/generators/index.js",
    "lint": "eslint --ignore-path .gitignore --config node_modules/strapi-helper-plugin/lib/internals/eslint/.eslintrc.json admin",
    "pretest": "npm run lint",
@ -49,7 +49,7 @@
  },
  "devDependencies": {
    "cross-env": "^5.0.5",
-    "eslint": "^4.7.1",
+    "eslint": "^4.7.2",
    "eslint-config-airbnb": "^15.1.0",
    "eslint-config-airbnb-base": "^11.3.2",
    "eslint-config-prettier": "^2.5.0",
--- a/packages/strapi-plugin-settings-manager/package.json
+++ b/packages/strapi-plugin-settings-manager/package.json
@ -35,7 +35,7 @@
  },
  "devDependencies": {
    "cross-env": "^5.0.5",
-    "eslint": "^4.7.1",
+    "eslint": "^4.7.2",
    "eslint-config-airbnb": "^15.1.0",
    "eslint-config-airbnb-base": "^11.3.2",
    "eslint-config-prettier": "^2.5.0",