Bundle using Webpack (#4692)

* try webpack

* ignore dist

* remove dist files

* fix type checking

* lint

* add webpack to gulp

* sync themes

* try and fix pages loading via .vue files

* Fix assets

* Fix x-template components

Don't register components twice.

* Fix toggle button

* Fix AsyncComputed

* Enable Vue-DevTools

* Spread operator in object literals is experimental

* Ignore non-browser files in gulp tasks

* Pin dependencies + update webpack-cli

* Remove unused libraries

- api.js
- router.js
- store.js

- axios
- http-vue-loader
- vue
- vue-async-computed
- vue-in-viewport-mixin
- vue-js-toggle-button
- vue-meta
- vue-native-websocket
- vue-router
- vuex

* Move Snotify to webpack

* Remove unused vendors files

* Fix VueMeta

* Fix apibuilder

* Update gulpfile

* Webpack optimization

* Fix notification from store

* Add `?${sbPID}`

* Update changelog

* Update script

* fix cp not running

* Fix optimization

* add cp to webpack

* add vue-loader

* pin deps

* Better components registration

* Read themes from `package.json`

* Clear ./dist/js before build

* Remove webpack-stream

* Make sure webpack is built in production mode for the time being

* Re-enable `webpack.config.js` linting

* eslint-plugin-unicorn is part of XO

* remove globby (unused)

* upgrade webpack

* Fix vue-loader production mode

* Disable webpack build for now

.github/build-themes-check.sh

@@ -7,6 +7,7 @@ run_verbose () {
 }
 
 cd themes-default/slim/
+# run_verbose "yarn webpack-build"
 run_verbose "yarn gulp sync"
 cd ../../
 status="$(git status --porcelain -- themes/)";

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 #### Improvements
 - Converted /config/postProcessing to a Vue component ([#4259](https://github.com/pymedusa/Medusa/pull/4259))
+- Bundled the web application using Webpack ([#4692](https://github.com/pymedusa/Medusa/pull/4692))
 
 #### Fixes
 - Fixed error when changing episode status from episode status management ([#4783](https://github.com/pymedusa/Medusa/pull/4783))

themes-default/slim/.gitignore

@@ -2,3 +2,4 @@
 .nyc_output
 coverage
 coverage.lcov
+dist

themes-default/slim/gulpfile.js

@@ -20,7 +20,6 @@ const pngquant = require('imagemin-pngquant');
 const { argv } = require('yargs');
 const rename = require('gulp-rename');
 const changed = require('gulp-changed');
-
 const xo = require('xo');
 
 const xoReporter = xo.getFormatter('eslint-formatter-pretty');
@@ -53,12 +52,25 @@ if (PROD) {
 }
 */
 
+// List JS files handled by Webpack
+// These files will be ignored by the gulp tasks
+const webpackedJsFiles = [
+    'static/js/app.js',
+    'static/js/index.js',
+    'static/js/api.js',
+    'static/js/router.js',
+    'static/js/store.js'
+];
+
 const staticAssets = [
     'static/browserconfig.xml',
     'static/favicon.ico',
     'static/fonts/**/*',
     'static/js/**/*',
-    'static/css/**/*'
+    'static/css/**/*',
+
+    // Webpacked files
+    ...webpackedJsFiles.map(file => '!' + file)
 ];
 
 /**
@@ -155,7 +167,10 @@ const bundleJs = done => {
         ignore: [
             'js/lib/**',
             'js/*.min.js',
-            'js/vender.js'
+            'js/vender.js',
+
+            // Webpacked JS files
+            ...webpackedJsFiles.map(file => file.replace('static/', ''))
         ]
     }, (err, files) => {
         if (err) {

themes-default/slim/package.json

@@ -4,8 +4,9 @@
   "name": "slim",
   "author": "p0psicles",
   "scripts": {
-    "gulp": "gulp",
     "lint": "xo",
+    "dev": "webpack --mode development",
+    "webpack-build": "webpack --mode production",
     "build": "cross-env NODE_ENV=production gulp build",
     "install": "yarn run lint",
     "test": "cross-env NODE_ENV=test nyc ava",
@@ -31,6 +32,7 @@
     "ansi-colors": "2.0.5",
     "ava": "0.25.0",
     "axios": "0.18.0",
+    "babel-loader": "7.1.5",
     "babel-plugin-istanbul": "4.1.6",
     "babel-polyfill": "6.26.0",
     "babel-preset-env": "1.7.0",
@@ -40,11 +42,13 @@
     "browserify": "16.2.2",
     "codecov": "3.0.4",
     "cross-env": "5.2.0",
+    "css-loader": "1.0.0",
     "eslint": "5.2.0",
     "eslint-config-xo": "0.23.0",
     "eslint-plugin-vue": "4.7.1",
     "event-stream": "3.3.4",
     "fancy-log": "1.3.2",
+    "filemanager-webpack-plugin": "1.0.28",
     "glob": "7.1.2",
     "gulp": "3.9.1",
     "gulp-changed": "3.2.0",
@@ -55,6 +59,7 @@
     "gulp-rename": "1.4.0",
     "gulp-sourcemaps": "2.6.4",
     "gulp-uglify-es": "1.0.4",
+    "http-vue-loader": "1.3.5",
     "imagemin-pngquant": "6.0.0",
     "jquery": "3.3.1",
     "nyc": "12.0.2",
@@ -69,9 +74,18 @@
     "vinyl-buffer": "1.0.1",
     "vinyl-source-stream": "2.0.0",
     "vue": "2.5.16",
+    "vue-async-computed": "3.3.1",
+    "vue-in-viewport-mixin": "1.0.4",
+    "vue-js-toggle-button": "1.2.3",
+    "vue-loader": "15.2.6",
+    "vue-meta": "1.5.2",
+    "vue-native-websocket": "2.0.8",
     "vue-router": "3.0.1",
+    "vue-snotify": "3.2.0",
     "vue-template-compiler": "2.5.16",
     "vuex": "3.0.1",
+    "webpack": "4.16.3",
+    "webpack-cli": "3.1.0",
     "xo": "0.21.1",
     "yargs": "12.0.1"
   },

themes-default/slim/static/js/api.js

@@ -1,3 +1,5 @@
+import axios from 'axios';
+
 const baseUrl = document.body.getAttribute('web-root');
 const idToken = document.body.getAttribute('api-key');
 
@@ -37,3 +39,9 @@ const api = axios.create({ // eslint-disable-line no-unused-vars
         'X-Api-Key': idToken
     }
 });
+
+export {
+    apiRoute,
+    apiv1,
+    api
+};

themes-default/slim/static/js/apibuilder.js

@@ -108,7 +108,7 @@ $(document).ready(() => {
 
         if (command) {
             const commandId = command.replace('.', '-');
-            $('[href=#command-' + commandId + ']').click();
+            $('[href="#command-' + commandId + '"]').click();
         }
     });
 });

themes-default/slim/static/js/app.js

@@ -0,0 +1,76 @@
+import Vue from 'vue';
+import Vuex, { mapState } from 'vuex';
+import VueRouter from 'vue-router';
+import AsyncComputed from 'vue-async-computed';
+import ToggleButton from 'vue-js-toggle-button';
+import Snotify from 'vue-snotify';
+import store from './store';
+import router from './router';
+import AppHeader from './templates/app-header.vue';
+import ScrollButtons from './templates/scroll-buttons.vue';
+import AppLink from './templates/app-link.vue';
+import Asset from './templates/asset.vue';
+import FileBrowser from './templates/file-browser.vue';
+import PlotInfo from './templates/plot-info.vue';
+import NamePattern from './templates/name-pattern.vue';
+import SelectList from './templates/select-list.vue';
+import LanguageSelect from './templates/language-select.vue';
+import RootDirs from './templates/root-dirs.vue';
+import Backstretch from './templates/backstretch.vue';
+
+Vue.config.devtools = true;
+Vue.config.performance = true;
+
+Vue.use(Vuex);
+Vue.use(VueRouter);
+Vue.use(AsyncComputed);
+Vue.use(ToggleButton);
+Vue.use(Snotify);
+
+// Load x-template components
+window.components.forEach(component => {
+    console.debug(`Registering ${component.name}`);
+    Vue.component(component.name, component);
+});
+
+// Global components
+const globalComponents = [
+    AppHeader,
+    ScrollButtons,
+    AppLink,
+    Asset,
+    FileBrowser,
+    PlotInfo,
+    NamePattern,
+    SelectList,
+    LanguageSelect,
+    RootDirs,
+    Backstretch
+];
+
+globalComponents.forEach(component => {
+    Vue.component(component.name, component);
+});
+
+const app = new Vue({
+    name: 'App',
+    store,
+    router,
+    data() {
+        return {
+            globalLoading: false
+        };
+    },
+    computed: Object.assign(mapState(['auth', 'config']), {}),
+    mounted() {
+        console.log('App Mounted!');
+
+        const { $store } = this;
+        $store.dispatch('login', { username: window.username });
+        $store.dispatch('getConfig');
+
+        console.log('App Loaded!');
+    }
+}).$mount('#vue-wrap');
+
+export default app;

themes-default/slim/static/js/index.js

@@ -0,0 +1,34 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import VueMeta from 'vue-meta';
+import VueRouter from 'vue-router';
+import VueNativeSock from 'vue-native-websocket';
+import VueInViewportMixin from 'vue-in-viewport-mixin';
+import AsyncComputed from 'vue-async-computed';
+import ToggleButton from 'vue-js-toggle-button';
+import Snotify from 'vue-snotify';
+import axios from 'axios';
+import httpVueLoader from 'http-vue-loader';
+import store from './store';
+import router from './router';
+import { apiRoute, apiv1, api } from './api';
+
+if (window) {
+    // Adding libs to window so mako files can use them
+    window.Vue = Vue;
+    window.Vuex = Vuex;
+    window.VueMeta = VueMeta;
+    window.VueRouter = VueRouter;
+    window.VueNativeSock = VueNativeSock;
+    window.VueInViewportMixin = VueInViewportMixin;
+    window.AsyncComputed = AsyncComputed;
+    window.ToggleButton = ToggleButton;
+    window.Snotify = Snotify;
+    window.axios = axios;
+    window.httpVueLoader = httpVueLoader;
+    window.store = store;
+    window.router = router;
+    window.apiRoute = apiRoute;
+    window.apiv1 = apiv1;
+    window.api = api;
+}