Merge pull request #343 from thornbill/webpack

Bundle npm dependencies using webpack

.npmignore

@@ -0,0 +1,8 @@
+.gitattributes
+.github
+.drone.yml
+.eslintrc.yml
+run-eslint.sh
+webpack.config.js
+yarn.lock
+src

package.json

@@ -3,18 +3,22 @@
   "version": "0.0.0",
   "description": "Web interface for Jellyfin",
   "repository": "https://github.com/jellyfin/jellyfin-web",
-  "license": "GPL-2",
+  "license": "GPL-2.0-or-later",
   "devDependencies": {
-    "connect": "^3.6.6",
+    "copy-webpack-plugin": "^5.0.3",
     "css-loader": "^2.1.0",
+    "eslint": "^5.16.0",
     "file-loader": "^3.0.1",
-    "serve-static": "^1.13.2",
     "style-loader": "^0.23.1",
     "webpack": "^4.29.5",
     "webpack-cli": "^3.2.3"
   },
   "dependencies": {
-    "howler": "^2.1.1",
     "jstree": "^3.3.7"
+  },
+  "scripts": {
+    "dev": "webpack --mode development",
+    "build": "webpack --mode production",
+    "lint": "eslint src"
   }
 }

src/bundle.js

@@ -0,0 +1,9 @@
+/**
+ * require.js module definitions bundled by webpack
+ */
+// Use define from require.js not webpack's define
+var _define = window.define;
+
+var jstree = require("jstree");
+require("jstree/dist/themes/default/style.css");
+_define("jstree", ["jQuery"], function() { return jstree; });

src/scripts/apploader.js

@@ -1,12 +1,29 @@
-! function() {
+(function() {
     "use strict";
 
-    function loadApp() {
-        var script = document.createElement("script"),
-            src = "./scripts/site.js";
-        self.dashboardVersion && (src += "?v=" + self.dashboardVersion), script.src = src, document.head.appendChild(script)
-    }! function() {
-        var src, script = document.createElement("script");
-        src = self.Promise ? "./bower_components/alameda/alameda.js" : "./bower_components/requirejs/require.js", self.dashboardVersion && (src += "?v=" + self.dashboardVersion), script.src = src, script.onload = loadApp, document.head.appendChild(script)
-    }()
-}();
+    function injectScriptElement(src, onload) {
+        if (!src) {
+            return;
+        }
+
+        var script = document.createElement("script");
+        if (self.dashboardVersion) {
+            src += "?v=" + self.dashboardVersion;
+        }
+        script.src = src;
+
+        if (onload) {
+            script.onload = onload;
+        }
+
+        document.head.appendChild(script);
+    }
+
+    injectScriptElement(
+        self.Promise ? "./bower_components/alameda/alameda.js" : "./bower_components/requirejs/require.js",
+        function() {
+            // onload of require library
+            injectScriptElement("./scripts/site.js");
+        }
+    );
+})();

src/scripts/editorsidebar.js

@@ -149,7 +149,9 @@ define(["datetime", "jQuery", "material-icons"], function(datetime, $) {
         nodesToLoad = [], selectedNodeId = null, $.jstree.destroy(), $(".libraryTree", page).jstree({
             plugins: ["wholerow"],
             core: {
-                check_callback: !0,
+                // Disable animations because jQuery slim does not support them
+                animation: false,
+                check_callback: true,
                 data: function(node, callback) {
                     loadNode(page, this, node, openItems, selectedId, currentUser, callback)
                 },

src/scripts/site.js

@@ -818,12 +818,15 @@ var AppInfo = {};
                     text: "components/require/requiretext"
                 }
             },
+            bundles: {
+                bundle: ["jstree"]
+            },
             urlArgs: urlArgs,
             paths: paths,
             onError: onRequireJsError
         });
         requirejs.onError = onRequireJsError;
-        define("jstree", ["thirdparty/jstree/jstree", "css!thirdparty/jstree/themes/default/style.css"], returnFirstDependency);
+
         define("dashboardcss", ["css!css/dashboard"], returnFirstDependency);
         define("slideshow", [componentsPath + "/slideshow/slideshow"], returnFirstDependency);
         define("fetch", [bowerPath + "/fetch/fetch"], returnFirstDependency);

webpack.config.js

@@ -1,35 +1,44 @@
 const path = require('path');
+const CopyPlugin = require('copy-webpack-plugin');
 
 module.exports = {
-    context: __dirname + '/src',
-    entry: './scripts/site.js',
+    context: path.resolve(__dirname, 'src'),
+    entry: './bundle.js',
     output: {
-        filename: 'main.js',
-        path: path.resolve(__dirname, 'dist')
+        filename: 'bundle.js',
+        path: path.resolve(__dirname, 'dist'),
+        libraryTarget: 'amd'
     },
 
+    externals: [{
+        jquery: {
+            amd: "jQuery"
+        }
+    }],
+
     resolve: {
         modules: [
-            path.resolve(__dirname, 'src/scripts'),
-            path.resolve(__dirname, 'src/components'),
-            path.resolve(__dirname, 'src/components/playback'),
-            path.resolve(__dirname, 'src/components/emby-button'),
-            path.resolve(__dirname, 'src/components/usersettings'),
-            path.resolve(__dirname, 'src/components/images'),
-            path.resolve(__dirname, 'src/bower_components'),
-            path.resolve(__dirname, 'src/bower_components/apiclient'),
-            path.resolve(__dirname, 'src/bower_components/apiclient/sync'),
-            path.resolve(__dirname, 'src/components/cardbuilder'),
-            'node_modules'
+            path.resolve(__dirname, 'node_modules')
         ]
     },
 
     module: {
         rules: [
             {
-                test: /\.css$/,
+                test: /\.css$/i,
                 use: ['style-loader', 'css-loader']
+            },
+            {
+                test: /\.(png|jpg|gif)$/i,
+                use: ['file-loader']
             }
         ]
-    }
+    },
+
+    plugins: [
+        new CopyPlugin([{
+            from: '**/*',
+            to: '.'
+        }])
+    ]
 };