From 2076c557c907e118dbafc92170fc9fb0cba597df Mon Sep 17 00:00:00 2001 From: aschmitz Date: Wed, 4 Oct 2017 02:52:11 -0500 Subject: Configure webpack to poll for changes in development (#5040) * Configure webpack to poll for changes in development Vagrant on Linux/macOS hosts shared files via NFS, which doens't support inotify-based watching of files. This tweak makes webpack check for changes every second, and rebuild if necessary. This removes the need to restart Foreman every time a frontend file changes. Note that rebuilding is still a relatively lengthy process. The polling frequency can be changed to taste. * Only poll in Vagrant This tests for the presence of the VAGRANT environment variable to determine whether or not we're in Vagrant. It is set in .env.vagrant, which is set up to be included in the Vagrantfile. --- config/webpack/development.js | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) (limited to 'config/webpack') diff --git a/config/webpack/development.js b/config/webpack/development.js index 830183c0d..12670f5cd 100644 --- a/config/webpack/development.js +++ b/config/webpack/development.js @@ -4,6 +4,17 @@ const merge = require('webpack-merge'); const sharedConfig = require('./shared.js'); const { settings, output } = require('./configuration.js'); +const watchOptions = { + ignored: /node_modules/, +}; + +if (process.env.VAGRANT) { + // If we are in Vagrant, we can't rely on inotify to update us with changed + // files, so we must poll instead. Here, we poll every second to see if + // anything has changed. + watchOptions.poll = 1000; +} + module.exports = merge(sharedConfig, { devtool: 'cheap-module-eval-source-map', @@ -26,8 +37,6 @@ module.exports = merge(sharedConfig, { headers: { 'Access-Control-Allow-Origin': '*' }, historyApiFallback: true, disableHostCheck: true, - watchOptions: { - ignored: /node_modules/, - }, + watchOptions: watchOptions, }, }); -- cgit From 7de6d269d21e0ed7a3ede7c3d17089726a29d841 Mon Sep 17 00:00:00 2001 From: Nolan Lawson Date: Sat, 7 Oct 2017 17:55:58 -0700 Subject: Use ES module build of react-router-dom (#5264) --- app/javascript/mastodon/containers/mastodon.js | 3 +-- app/javascript/mastodon/features/account/components/action_bar.js | 2 +- .../mastodon/features/compose/components/search_results.js | 2 +- app/javascript/mastodon/features/compose/index.js | 2 +- app/javascript/mastodon/features/home_timeline/index.js | 2 +- .../mastodon/features/status/components/detailed_status.js | 2 +- app/javascript/mastodon/features/ui/components/column_link.js | 2 +- app/javascript/mastodon/features/ui/components/tabs_bar.js | 2 +- app/javascript/mastodon/features/ui/util/react_router_helpers.js | 3 +-- config/webpack/shared.js | 7 +++++++ 10 files changed, 16 insertions(+), 11 deletions(-) (limited to 'config/webpack') diff --git a/app/javascript/mastodon/containers/mastodon.js b/app/javascript/mastodon/containers/mastodon.js index 31167cbd8..ff27a9319 100644 --- a/app/javascript/mastodon/containers/mastodon.js +++ b/app/javascript/mastodon/containers/mastodon.js @@ -3,8 +3,7 @@ import { Provider } from 'react-redux'; import PropTypes from 'prop-types'; import configureStore from '../store/configureStore'; import { showOnboardingOnce } from '../actions/onboarding'; -import BrowserRouter from 'react-router-dom/BrowserRouter'; -import Route from 'react-router-dom/Route'; +import { BrowserRouter, Route } from 'react-router-dom'; import { ScrollContext } from 'react-router-scroll'; import UI from '../features/ui'; import { hydrateStore } from '../actions/store'; diff --git a/app/javascript/mastodon/features/account/components/action_bar.js b/app/javascript/mastodon/features/account/components/action_bar.js index 9e8fea69d..2819ae252 100644 --- a/app/javascript/mastodon/features/account/components/action_bar.js +++ b/app/javascript/mastodon/features/account/components/action_bar.js @@ -2,7 +2,7 @@ import React from 'react'; import ImmutablePropTypes from 'react-immutable-proptypes'; import PropTypes from 'prop-types'; import DropdownMenuContainer from '../../../containers/dropdown_menu_container'; -import Link from 'react-router-dom/Link'; +import { Link } from 'react-router-dom'; import { defineMessages, injectIntl, FormattedMessage, FormattedNumber } from 'react-intl'; const messages = defineMessages({ diff --git a/app/javascript/mastodon/features/compose/components/search_results.js b/app/javascript/mastodon/features/compose/components/search_results.js index ae4d1e86a..8350d20a5 100644 --- a/app/javascript/mastodon/features/compose/components/search_results.js +++ b/app/javascript/mastodon/features/compose/components/search_results.js @@ -3,7 +3,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes'; import { FormattedMessage } from 'react-intl'; import AccountContainer from '../../../containers/account_container'; import StatusContainer from '../../../containers/status_container'; -import Link from 'react-router-dom/Link'; +import { Link } from 'react-router-dom'; import ImmutablePureComponent from 'react-immutable-pure-component'; export default class SearchResults extends ImmutablePureComponent { diff --git a/app/javascript/mastodon/features/compose/index.js b/app/javascript/mastodon/features/compose/index.js index 0b686ddb3..6166fce3c 100644 --- a/app/javascript/mastodon/features/compose/index.js +++ b/app/javascript/mastodon/features/compose/index.js @@ -5,7 +5,7 @@ import PropTypes from 'prop-types'; import ImmutablePropTypes from 'react-immutable-proptypes'; import { connect } from 'react-redux'; import { mountCompose, unmountCompose } from '../../actions/compose'; -import Link from 'react-router-dom/Link'; +import { Link } from 'react-router-dom'; import { injectIntl, defineMessages } from 'react-intl'; import SearchContainer from './containers/search_container'; import Motion from 'react-motion/lib/Motion'; diff --git a/app/javascript/mastodon/features/home_timeline/index.js b/app/javascript/mastodon/features/home_timeline/index.js index 6021299d6..be1e2d78c 100644 --- a/app/javascript/mastodon/features/home_timeline/index.js +++ b/app/javascript/mastodon/features/home_timeline/index.js @@ -8,7 +8,7 @@ import ColumnHeader from '../../components/column_header'; import { addColumn, removeColumn, moveColumn } from '../../actions/columns'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import ColumnSettingsContainer from './containers/column_settings_container'; -import Link from 'react-router-dom/Link'; +import { Link } from 'react-router-dom'; const messages = defineMessages({ title: { id: 'column.home', defaultMessage: 'Home' }, diff --git a/app/javascript/mastodon/features/status/components/detailed_status.js b/app/javascript/mastodon/features/status/components/detailed_status.js index 87fe01897..4fd1c2ec0 100644 --- a/app/javascript/mastodon/features/status/components/detailed_status.js +++ b/app/javascript/mastodon/features/status/components/detailed_status.js @@ -6,7 +6,7 @@ import DisplayName from '../../../components/display_name'; import StatusContent from '../../../components/status_content'; import MediaGallery from '../../../components/media_gallery'; import AttachmentList from '../../../components/attachment_list'; -import Link from 'react-router-dom/Link'; +import { Link } from 'react-router-dom'; import { FormattedDate, FormattedNumber } from 'react-intl'; import CardContainer from '../containers/card_container'; import ImmutablePureComponent from 'react-immutable-pure-component'; diff --git a/app/javascript/mastodon/features/ui/components/column_link.js b/app/javascript/mastodon/features/ui/components/column_link.js index ad7ec9318..5425219c4 100644 --- a/app/javascript/mastodon/features/ui/components/column_link.js +++ b/app/javascript/mastodon/features/ui/components/column_link.js @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import Link from 'react-router-dom/Link'; +import { Link } from 'react-router-dom'; const ColumnLink = ({ icon, text, to, href, method }) => { if (href) { diff --git a/app/javascript/mastodon/features/ui/components/tabs_bar.js b/app/javascript/mastodon/features/ui/components/tabs_bar.js index af9e6bf45..7694e5ab3 100644 --- a/app/javascript/mastodon/features/ui/components/tabs_bar.js +++ b/app/javascript/mastodon/features/ui/components/tabs_bar.js @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import NavLink from 'react-router-dom/NavLink'; +import { NavLink } from 'react-router-dom'; import { FormattedMessage, injectIntl } from 'react-intl'; import { debounce } from 'lodash'; import { isUserTouching } from '../../../is_mobile'; diff --git a/app/javascript/mastodon/features/ui/util/react_router_helpers.js b/app/javascript/mastodon/features/ui/util/react_router_helpers.js index ede578e56..86b30d488 100644 --- a/app/javascript/mastodon/features/ui/util/react_router_helpers.js +++ b/app/javascript/mastodon/features/ui/util/react_router_helpers.js @@ -1,7 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import Switch from 'react-router-dom/Switch'; -import Route from 'react-router-dom/Route'; +import { Switch, Route } from 'react-router-dom'; import ColumnLoading from '../components/column_loading'; import BundleColumnError from '../components/bundle_column_error'; diff --git a/config/webpack/shared.js b/config/webpack/shared.js index ea2da6aa7..cd642a28a 100644 --- a/config/webpack/shared.js +++ b/config/webpack/shared.js @@ -48,6 +48,13 @@ module.exports = { plugins: [ new webpack.EnvironmentPlugin(JSON.parse(JSON.stringify(env))), + new webpack.NormalModuleReplacementPlugin( + /^history\//, (resource) => { + // temporary fix for https://github.com/ReactTraining/react-router/issues/5576 + // to reduce bundle size + resource.request = resource.request.replace(/^history/, 'history/es'); + } + ), new ExtractTextPlugin(env.NODE_ENV === 'production' ? '[name]-[hash].css' : '[name].css'), new ManifestPlugin({ publicPath: output.publicPath, -- cgit From bebaa6eced0af2665d105beb59bd21030425245a Mon Sep 17 00:00:00 2001 From: Nolan Lawson Date: Tue, 10 Oct 2017 09:44:51 -0700 Subject: Remove prop types from external libraries (#5304) --- config/webpack/loaders/babel.js | 6 +----- config/webpack/loaders/babel_external.js | 21 +++++++++++++++++++++ 2 files changed, 22 insertions(+), 5 deletions(-) create mode 100644 config/webpack/loaders/babel_external.js (limited to 'config/webpack') diff --git a/config/webpack/loaders/babel.js b/config/webpack/loaders/babel.js index 1416191c0..e17d2fa70 100644 --- a/config/webpack/loaders/babel.js +++ b/config/webpack/loaders/babel.js @@ -4,11 +4,7 @@ const env = process.env.NODE_ENV || 'development'; module.exports = { test: /\.js$/, - // include react-intl because transform-react-remove-prop-types needs to apply to it - exclude: { - test: /node_modules/, - exclude: /react-intl[\/\\](?!locale-data)/, - }, + exclude: /node_modules/, loader: 'babel-loader', options: { forceEnv: env, diff --git a/config/webpack/loaders/babel_external.js b/config/webpack/loaders/babel_external.js new file mode 100644 index 000000000..39e74ed90 --- /dev/null +++ b/config/webpack/loaders/babel_external.js @@ -0,0 +1,21 @@ +const { resolve } = require('path'); + +const env = process.env.NODE_ENV || 'development'; + +if (env === 'development') { + module.exports = {}; +} else { + // babel options to apply only to external libraries, e.g. remove-prop-types + module.exports = { + test: /\.js$/, + include: /node_modules/, + loader: 'babel-loader', + options: { + babelrc: false, + plugins: [ + 'transform-react-remove-prop-types', + ], + cacheDirectory: env === 'development' ? false : resolve(__dirname, '..', '..', '..', 'tmp', 'cache', 'babel-loader-external'), + }, + }; +} -- cgit