Replace sprockets/browserify with Webpack (#2617)

* Replace browserify with webpack

* Add react-intl-translations-manager

* Do not minify in development, add offline-plugin for ServiceWorker background cache updates

* Adjust tests and dependencies

* Fix production deployments

* Fix tests

* More optimizations

* Improve travis cache for npm stuff

* Re-run travis

* Add back support for custom.scss as before

* Remove offline-plugin and babili

* Fix issue with Immutable.List().unshift(...values) not working as expected

* Make travis load schema instead of running all migrations in sequence

* Fix missing React import in WarningContainer. Optimize rendering performance by using ImmutablePureComponent instead of
React.PureComponent. ImmutablePureComponent uses Immutable.is() to compare props. Replace dynamic callback bindings in
<UI />

* Add react definitions to places that use JSX

* Add Procfile.dev for running rails, webpack and streaming API at the same time

2 files changed, 0 insertions, 240 deletions

diff --git a/app/assets/javascripts/components/features/account/components/action_bar.jsx b/app/assets/javascripts/components/features/account/components/action_bar.jsx
deleted file mode 100644
index 772ea3a38..000000000
--- a/app/assets/javascripts/components/features/account/components/action_bar.jsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import PropTypes from 'prop-types';
-import DropdownMenu from '../../../components/dropdown_menu';
-import { Link } from 'react-router';
-import { defineMessages, injectIntl, FormattedMessage, FormattedNumber } from 'react-intl';
-
-const messages = defineMessages({
-  mention: { id: 'account.mention', defaultMessage: 'Mention @{name}' },
-  edit_profile: { id: 'account.edit_profile', defaultMessage: 'Edit profile' },
-  unblock: { id: 'account.unblock', defaultMessage: 'Unblock @{name}' },
-  unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' },
-  unmute: { id: 'account.unmute', defaultMessage: 'Unmute @{name}' },
-  block: { id: 'account.block', defaultMessage: 'Block @{name}' },
-  mute: { id: 'account.mute', defaultMessage: 'Mute @{name}' },
-  follow: { id: 'account.follow', defaultMessage: 'Follow' },
-  report: { id: 'account.report', defaultMessage: 'Report @{name}' },
-  disclaimer: { id: 'account.disclaimer', defaultMessage: 'This user is from another instance. This number may be larger.' }
-});
-
-class ActionBar extends React.PureComponent {
-
-  render () {
-    const { account, me, intl } = this.props;
-
-    let menu = [];
-    let extraInfo = '';
-
-    menu.push({ text: intl.formatMessage(messages.mention, { name: account.get('username') }), action: this.props.onMention });
-    menu.push(null);
-
-    if (account.get('id') === me) {
-      menu.push({ text: intl.formatMessage(messages.edit_profile), href: '/settings/profile' });
-    } else {
-      if (account.getIn(['relationship', 'muting'])) {
-        menu.push({ text: intl.formatMessage(messages.unmute, { name: account.get('username') }), action: this.props.onMute });
-      } else {
-        menu.push({ text: intl.formatMessage(messages.mute, { name: account.get('username') }), action: this.props.onMute });
-      }
-
-      if (account.getIn(['relationship', 'blocking'])) {
-        menu.push({ text: intl.formatMessage(messages.unblock, { name: account.get('username') }), action: this.props.onBlock });
-      } else {
-        menu.push({ text: intl.formatMessage(messages.block, { name: account.get('username') }), action: this.props.onBlock });
-      }
-
-      menu.push({ text: intl.formatMessage(messages.report, { name: account.get('username') }), action: this.props.onReport });
-    }
-
-    if (account.get('acct') !== account.get('username')) {
-      extraInfo = <abbr title={intl.formatMessage(messages.disclaimer)}>*</abbr>;
-    }
-
-    return (
-      <div className='account__action-bar'>
-        <div className='account__action-bar-dropdown'>
-          <DropdownMenu items={menu} icon='bars' size={24} direction="right" />
-        </div>
-
-        <div className='account__action-bar-links'>
-          <Link className='account__action-bar__tab' to={`/accounts/${account.get('id')}`}>
-            <span><FormattedMessage id='account.posts' defaultMessage='Posts' /></span>
-            <strong><FormattedNumber value={account.get('statuses_count')} /> {extraInfo}</strong>
-          </Link>
-
-          <Link className='account__action-bar__tab' to={`/accounts/${account.get('id')}/following`}>
-            <span><FormattedMessage id='account.follows' defaultMessage='Follows' /></span>
-            <strong><FormattedNumber value={account.get('following_count')} /> {extraInfo}</strong>
-          </Link>
-
-          <Link className='account__action-bar__tab' to={`/accounts/${account.get('id')}/followers`}>
-            <span><FormattedMessage id='account.followers' defaultMessage='Followers' /></span>
-            <strong><FormattedNumber value={account.get('followers_count')} /> {extraInfo}</strong>
-          </Link>
-        </div>
-      </div>
-    );
-  }
-
-}
-
-ActionBar.propTypes = {
-  account: ImmutablePropTypes.map.isRequired,
-  me: PropTypes.number.isRequired,
-  onFollow: PropTypes.func,
-  onBlock: PropTypes.func.isRequired,
-  onMention: PropTypes.func.isRequired,
-  onReport: PropTypes.func.isRequired,
-  onMute: PropTypes.func.isRequired,
-  intl: PropTypes.object.isRequired
-};
-
-export default injectIntl(ActionBar);
diff --git a/app/assets/javascripts/components/features/account/components/header.jsx b/app/assets/javascripts/components/features/account/components/header.jsx
deleted file mode 100644
index 958a5206b..000000000
--- a/app/assets/javascripts/components/features/account/components/header.jsx
+++ /dev/null
@@ -1,148 +0,0 @@
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import PropTypes from 'prop-types';
-import emojify from '../../../emoji';
-import escapeTextContentForBrowser from 'escape-html';
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
-import IconButton from '../../../components/icon_button';
-import { Motion, spring } from 'react-motion';
-import { connect } from 'react-redux';
-
-const messages = defineMessages({
-  unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' },
-  follow: { id: 'account.follow', defaultMessage: 'Follow' },
-  requested: { id: 'account.requested', defaultMessage: 'Awaiting approval' }
-});
-
-const makeMapStateToProps = () => {
-  const mapStateToProps = (state, props) => ({
-    autoPlayGif: state.getIn(['meta', 'auto_play_gif'])
-  });
-
-  return mapStateToProps;
-};
-
-class Avatar extends React.PureComponent {
-
-  constructor (props, context) {
-    super(props, context);
-
-    this.state = {
-      isHovered: false
-    };
-
-    this.handleMouseOver = this.handleMouseOver.bind(this);
-    this.handleMouseOut = this.handleMouseOut.bind(this);
-  }
-
-  handleMouseOver () {
-    if (this.state.isHovered) return;
-    this.setState({ isHovered: true });
-  }
-
-  handleMouseOut () {
-    if (!this.state.isHovered) return;
-    this.setState({ isHovered: false });
-  }
-
-  render () {
-    const { account, autoPlayGif }   = this.props;
-    const { isHovered } = this.state;
-
-    return (
-      <Motion defaultStyle={{ radius: 90 }} style={{ radius: spring(isHovered ? 30 : 90, { stiffness: 180, damping: 12 }) }}>
-        {({ radius }) =>
-          <a
-            href={account.get('url')}
-            className='account__header__avatar'
-            target='_blank'
-            rel='noopener'
-            style={{ borderRadius: `${radius}px`, backgroundImage: `url(${autoPlayGif || isHovered ? account.get('avatar') : account.get('avatar_static')})` }}
-            onMouseOver={this.handleMouseOver}
-            onMouseOut={this.handleMouseOut}
-            onFocus={this.handleMouseOver}
-            onBlur={this.handleMouseOut}
-          />
-        }
-      </Motion>
-    );
-  }
-
-}
-
-Avatar.propTypes = {
-  account: ImmutablePropTypes.map.isRequired,
-  autoPlayGif: PropTypes.bool.isRequired
-};
-
-class Header extends React.Component {
-
-  render () {
-    const { account, me, intl } = this.props;
-
-    if (!account) {
-      return null;
-    }
-
-    let displayName = account.get('display_name');
-    let info        = '';
-    let actionBtn   = '';
-    let lockedIcon  = '';
-
-    if (displayName.length === 0) {
-      displayName = account.get('username');
-    }
-
-    if (me !== account.get('id') && account.getIn(['relationship', 'followed_by'])) {
-      info = <span className='account--follows-info' style={{ position: 'absolute', top: '10px', right: '10px', opacity: '0.7', display: 'inline-block', verticalAlign: 'top', background: 'rgba(0, 0, 0, 0.4)', textTransform: 'uppercase', fontSize: '11px', fontWeight: '500', padding: '4px', borderRadius: '4px' }}><FormattedMessage id='account.follows_you' defaultMessage='Follows you' /></span>
-    }
-
-    if (me !== account.get('id')) {
-      if (account.getIn(['relationship', 'requested'])) {
-        actionBtn = (
-          <div style={{ position: 'absolute', top: '10px', left: '20px' }}>
-            <IconButton size={26} disabled={true} icon='hourglass' title={intl.formatMessage(messages.requested)} />
-          </div>
-        );
-      } else if (!account.getIn(['relationship', 'blocking'])) {
-        actionBtn = (
-          <div style={{ position: 'absolute', top: '10px', left: '20px' }}>
-            <IconButton size={26} icon={account.getIn(['relationship', 'following']) ? 'user-times' : 'user-plus'} active={account.getIn(['relationship', 'following'])} title={intl.formatMessage(account.getIn(['relationship', 'following']) ? messages.unfollow : messages.follow)} onClick={this.props.onFollow} />
-          </div>
-        );
-      }
-    }
-
-    if (account.get('locked')) {
-      lockedIcon = <i className='fa fa-lock' />;
-    }
-
-    const content         = { __html: emojify(account.get('note')) };
-    const displayNameHTML = { __html: emojify(escapeTextContentForBrowser(displayName)) };
-
-    return (
-      <div className='account__header' style={{ backgroundImage: `url(${account.get('header')})` }}>
-        <div style={{ padding: '20px 10px' }}>
-          <Avatar account={account} autoPlayGif={this.props.autoPlayGif} />
-
-          <span style={{ display: 'inline-block', fontSize: '20px', lineHeight: '27px', fontWeight: '500' }} className='account__header__display-name' dangerouslySetInnerHTML={displayNameHTML} />
-          <span className='account__header__username' style={{ fontSize: '14px', fontWeight: '400', display: 'block', marginBottom: '10px' }}>@{account.get('acct')} {lockedIcon}</span>
-          <div style={{ fontSize: '14px' }} className='account__header__content' dangerouslySetInnerHTML={content} />
-
-          {info}
-          {actionBtn}
-        </div>
-      </div>
-    );
-  }
-
-}
-
-Header.propTypes = {
-  account: ImmutablePropTypes.map,
-  me: PropTypes.number.isRequired,
-  onFollow: PropTypes.func.isRequired,
-  intl: PropTypes.object.isRequired,
-  autoPlayGif: PropTypes.bool.isRequired
-};
-
-export default connect(makeMapStateToProps)(injectIntl(Header));