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

app/views/about/show.html.haml

@@ -1,5 +1,5 @@
 - content_for :header_tags do
-  = javascript_include_tag 'application_public', integrity: true, crossorigin: 'anonymous'
+  = javascript_pack_tag 'public', integrity: true, crossorigin: 'anonymous'
 
 - content_for :page_title do
   = site_hostname
@@ -10,20 +10,20 @@
   %meta{ property: 'og:type', content: 'website' }/
   %meta{ property: 'og:title', content: site_hostname }/
   %meta{ property: 'og:description', content: strip_tags(@instance_presenter.site_description.presence || t('about.about_mastodon')) }/
-  %meta{ property: 'og:image', content: asset_url('mastodon_small.jpg') }/
+  %meta{ property: 'og:image', content: asset_pack_path('mastodon_small.jpg') }/
   %meta{ property: 'og:image:width', content: '400' }/
   %meta{ property: 'og:image:height', content: '400' }/
   %meta{ property: 'twitter:card', content: 'summary' }/
 
 .wrapper
   %h1
-    = image_tag 'logo.png'
+    = image_tag asset_pack_path('logo.png')
     = Setting.site_title
 
   %p= t('about.about_mastodon').html_safe
 
   .screenshot-with-signup
-    .mascot= image_tag 'fluffy-elephant-friend.png'
+    .mascot= image_tag asset_pack_path('fluffy-elephant-friend.png')
 
     - if @instance_presenter.open_registrations
       = render 'registration'

app/views/home/index.html.haml

@@ -1,6 +1,6 @@
 - content_for :header_tags do
   %script#initial-state{:type => 'application/json'}!= json_escape(render(file: 'home/initial_state', formats: :json))
 
-  = javascript_include_tag 'application', integrity: true, crossorigin: 'anonymous'
+  = javascript_pack_tag 'application', integrity: true, crossorigin: 'anonymous'
 
-= react_component 'Mastodon', default_props, class: 'app-holder', prerender: false
+.app-holder#mastodon{ data: { props: Oj.dump(default_props) }}

app/views/layouts/admin.html.haml

@@ -1,12 +1,12 @@
 - content_for :header_tags do
-  = javascript_include_tag 'application_public', integrity: true, crossorigin: 'anonymous'
+  = javascript_pack_tag 'public', integrity: true, crossorigin: 'anonymous'
 
 - content_for :content do
   .admin-wrapper
     .sidebar-wrapper
       .sidebar
         = link_to root_path do
-          = image_tag 'logo.png', class: 'logo'
+          = image_tag asset_pack_path('logo.png'), class: 'logo'
 
         = render_navigation
     .content-wrapper

app/views/layouts/application.html.haml

@@ -19,7 +19,9 @@
         = ' - '
       = title
 
-    = stylesheet_link_tag stylesheet_for_layout, media: 'all'
+    = stylesheet_pack_tag 'vendor', media: 'all'
+    = stylesheet_pack_tag 'application', media: 'all'
+    = javascript_pack_tag 'vendor', integrity: true, crossorigin: 'anonymous'
     = csrf_meta_tags
 
     = yield :header_tags

app/views/layouts/auth.html.haml

@@ -1,12 +1,12 @@
 - content_for :header_tags do
-  = javascript_include_tag 'application_public', integrity: true, crossorigin: 'anonymous'
+  = javascript_pack_tag 'public', integrity: true, crossorigin: 'anonymous'
 
 - content_for :content do
   .container
     .logo-container
       %h1
         = link_to root_path do
-          = image_tag 'logo.png'
+          = image_tag asset_pack_path('logo.png')
 
     .form-container
       = render 'flashes'

app/views/layouts/embedded.html.haml

@@ -3,6 +3,6 @@
   %head
     %meta{:charset => 'utf-8'}/
     = stylesheet_link_tag 'application', media: 'all'
-    = javascript_include_tag 'application_public', integrity: true, crossorigin: 'anonymous'
+    = javascript_pack_tag 'public', integrity: true, crossorigin: 'anonymous'
   %body.embed
     = yield

app/views/layouts/public.html.haml

@@ -1,5 +1,5 @@
 - content_for :header_tags do
-  = javascript_include_tag 'application_public', integrity: true, crossorigin: 'anonymous'
+  = javascript_pack_tag 'public', integrity: true, crossorigin: 'anonymous'
 
 - content_for :content do
   .container= yield