Multiple frontend support (#110)

* Initial multiple frontend support

* Removed unnecessary require()

* Moved styles/images out of common

app/controllers/home_controller.rb

@@ -6,6 +6,7 @@ class HomeController < ApplicationController
 
   def index
     @body_classes = 'app-body'
+    @frontend     = (params[:frontend] and Rails.configuration.x.available_frontends.include? params[:frontend] + '.js') ? params[:frontend] : 'mastodon'
   end
 
   private

app/javascript/packs/application.js

@@ -1,5 +1,11 @@
 import loadPolyfills from '../mastodon/load_polyfills';
 
+// import default stylesheet with variables
+require('font-awesome/css/font-awesome.css');
+require('mastodon-application-style');
+
+require.context('../images/', true);
+
 loadPolyfills().then(() => {
   require('../mastodon/main').default();
 }).catch(e => {

app/javascript/packs/common.js

@@ -1,9 +1,6 @@
 import { start } from 'rails-ujs';
 
-// import default stylesheet with variables
+// import common styling
-require('font-awesome/css/font-awesome.css');
+require('../styles/common.scss');
-require('mastodon-application-style');
-
-require.context('../images/', true);
 
 start();

app/javascript/packs/frontends/mastodon.js

@@ -0,0 +1,16 @@
+// This file replaces `app/javascript/packs/application.js` for use
+// with multiple frontends.
+
+import loadPolyfills from '../../mastodon/load_polyfills';
+
+// import default stylesheet with variables
+require('font-awesome/css/font-awesome.css');
+require('mastodon-application-style');
+
+require.context('../../images/', true);
+
+loadPolyfills().then(() => {
+  require('../../mastodon/main').default();
+}).catch(e => {
+  console.error(e);
+});

app/javascript/styles/application.scss

@@ -1,9 +1,6 @@
 @import 'mixins';
 @import 'variables';
 @import 'variables-glitch';
-@import 'fonts/roboto';
-@import 'fonts/roboto-mono';
-@import 'fonts/montserrat';
 
 @import 'reset';
 @import 'basics';

app/javascript/styles/common.scss

@@ -0,0 +1,5 @@
+// This makes our fonts available everywhere.
+
+@import 'fonts/roboto';
+@import 'fonts/roboto-mono';
+@import 'fonts/montserrat';

app/views/home/index.html.haml

@@ -2,8 +2,8 @@
   %meta{name: 'applicationServerKey', content: Rails.configuration.x.vapid_public_key}
   %script#initial-state{ type: 'application/json' }!= json_escape(@initial_state_json)
 
-  = javascript_pack_tag 'application', integrity: true, crossorigin: 'anonymous'
+  = javascript_pack_tag "frontends/#{@frontend}", integrity: true, crossorigin: 'anonymous'
-  = stylesheet_pack_tag 'application', media: 'all'
+  = stylesheet_pack_tag "frontends/#{@frontend}", integrity: true, media: 'all'
 
 .app-holder#mastodon{ data: { props: Oj.dump(default_props) } }
   %noscript

app/views/layouts/application.html.haml

@@ -32,6 +32,9 @@
     = javascript_pack_tag "locale_#{I18n.locale}", integrity: true, crossorigin: 'anonymous'
     = csrf_meta_tags
 
+    - if controller_name != 'home'
+      = stylesheet_pack_tag 'application', integrity: true, media: 'all'
+
     = yield :header_tags
 
   - body_classes ||= @body_classes

config/initializers/frontends.rb

@@ -0,0 +1,7 @@
+# Be sure to restart your server when you modify this file.
+
+Rails.application.configure do
+  frontends = []
+  Rails.root.join('app', 'javascript', 'packs', 'frontends').each_child(false) { |f| frontends.push f.to_s }
+  config.x.available_frontends = frontends
+end

config/webpack/shared.js

@@ -2,7 +2,7 @@
 
 const { existsSync } = require('fs');
 const webpack = require('webpack');
-const { basename, dirname, join, relative, resolve, sep } = require('path');
+const { basename, dirname, join, relative, resolve } = require('path');
 const { sync } = require('glob');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const ManifestPlugin = require('webpack-manifest-plugin');
@@ -54,18 +54,7 @@ module.exports = {
     }),
     new webpack.optimize.CommonsChunkPlugin({
       name: 'common',
-      minChunks: (module, count) => {
+      minChunks: Infinity, // It doesn't make sense to use common chunks with multiple frontend support.
-        const reactIntlPathRegexp = new RegExp(`node_modules\\${sep}react-intl`);
-
-        if (module.resource && reactIntlPathRegexp.test(module.resource)) {
-          // skip react-intl because it's useless to put in the common chunk,
-          // e.g. because "shared" modules between zh-TW and zh-CN will never
-          // be loaded together
-          return false;
-        }
-
-        return count >= 2;
-      },
     }),
   ],