From b61e3daf983d87c6d2de7e54d420c2e8f5a531e6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?G=C3=B4=20Shoemake?= Date: Sun, 30 Jul 2017 10:28:21 -0700 Subject: [PATCH] Multiple frontend support (#110) * Initial multiple frontend support * Removed unnecessary require() * Moved styles/images out of common --- app/controllers/home_controller.rb | 1 + app/javascript/packs/application.js | 6 ++++++ app/javascript/packs/common.js | 7 ++----- app/javascript/packs/frontends/mastodon.js | 16 ++++++++++++++++ app/javascript/styles/application.scss | 3 --- app/javascript/styles/common.scss | 5 +++++ app/views/home/index.html.haml | 4 ++-- app/views/layouts/application.html.haml | 3 +++ config/initializers/frontends.rb | 7 +++++++ config/webpack/shared.js | 15 ++------------- 10 files changed, 44 insertions(+), 23 deletions(-) create mode 100644 app/javascript/packs/frontends/mastodon.js create mode 100644 app/javascript/styles/common.scss create mode 100644 config/initializers/frontends.rb diff --git a/app/controllers/home_controller.rb b/app/controllers/home_controller.rb index 1585bc8105..fbfb5473ee 100644 --- a/app/controllers/home_controller.rb +++ b/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 diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js index 116632dea7..c06714dc14 100644 --- a/app/javascript/packs/application.js +++ b/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 => { diff --git a/app/javascript/packs/common.js b/app/javascript/packs/common.js index ba7053f1fc..de0c68fa5b 100644 --- a/app/javascript/packs/common.js +++ b/app/javascript/packs/common.js @@ -1,9 +1,6 @@ import { start } from 'rails-ujs'; -// import default stylesheet with variables -require('font-awesome/css/font-awesome.css'); -require('mastodon-application-style'); - -require.context('../images/', true); +// import common styling +require('../styles/common.scss'); start(); diff --git a/app/javascript/packs/frontends/mastodon.js b/app/javascript/packs/frontends/mastodon.js new file mode 100644 index 0000000000..a983de36f7 --- /dev/null +++ b/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); +}); diff --git a/app/javascript/styles/application.scss b/app/javascript/styles/application.scss index b08b694498..33c7783f3e 100644 --- a/app/javascript/styles/application.scss +++ b/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'; diff --git a/app/javascript/styles/common.scss b/app/javascript/styles/common.scss new file mode 100644 index 0000000000..c1772e7ae1 --- /dev/null +++ b/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'; diff --git a/app/views/home/index.html.haml b/app/views/home/index.html.haml index 1ed5c1ae06..ec6e534614 100644 --- a/app/views/home/index.html.haml +++ b/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' - = stylesheet_pack_tag 'application', media: 'all' + = javascript_pack_tag "frontends/#{@frontend}", integrity: true, crossorigin: 'anonymous' + = stylesheet_pack_tag "frontends/#{@frontend}", integrity: true, media: 'all' .app-holder#mastodon{ data: { props: Oj.dump(default_props) } } %noscript diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index 82b20810a2..399d70bc07 100755 --- a/app/views/layouts/application.html.haml +++ b/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 diff --git a/config/initializers/frontends.rb b/config/initializers/frontends.rb new file mode 100644 index 0000000000..2cb68cc61a --- /dev/null +++ b/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 diff --git a/config/webpack/shared.js b/config/webpack/shared.js index 98e864a665..425918d66f 100644 --- a/config/webpack/shared.js +++ b/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) => { - 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; - }, + minChunks: Infinity, // It doesn't make sense to use common chunks with multiple frontend support. }), ],