Use NPM for management of client side dependencies

README.md

@@ -73,6 +73,10 @@ DEVELOPMENT
 
 Selfoss uses [composer](https://getcomposer.org/) for installing external libraries. When you clone the repository you have to issue `composer install` to retrieve the external sources.
 
+For the client side, you will also need JavaScript dependencies installed by calling `npm install` in the `public` directory.
+
+If you want to create a package with all the dependencies bundled, you will additionally require [grunt](https://gruntjs.com/). After installing it, execute `npm install` in the selfoss directory to obtain the required tasks. Then you can run `grunt` command to produce a zipball. As a bonus, you can also use `grunt install` as a shortcut for installing the selfoss dependencies described above.
+
 CREDITS
 -------
 

gruntfile.js

@@ -35,10 +35,25 @@ function isNotUnimportant(dest) {
 }
 
 module.exports = function(grunt) {
+    const requiredAssets = (function() {
+        const files = grunt.file.readJSON('public/package.json').extra.requiredFiles;
+
+        return files.css.concat(files.js);
+    })();
 
     grunt.initConfig({
         pkg: grunt.file.readJSON('package.json'),
 
+        /* Install client-side dependencies */
+        auto_install: {
+            subdir: {
+                options: {
+                    cwd: 'public',
+                    npm: '--production'
+                }
+            }
+        },
+
         /* version text replace */
         replace: {
             version: {
@@ -88,9 +103,14 @@ module.exports = function(grunt) {
                     { expand: true, cwd: 'helpers/', src: ['**'], dest: '/helpers'},
                     { expand: true, cwd: 'vendor/', src: ['**'], dest: '/vendor', filter: isNotUnimportant},
 
-                    // public = don't zip all.js and all.css
+                    // do not pack bundled assets and assets not listed in index.php
                     { expand: true, cwd: 'public/', src: ['**'], dest: '/public', filter: function(file) {
-                        return file.indexOf('all.js') === -1 && file.indexOf('all.css') === -1;
+                        const bundle = file === 'public/all.js' || file === 'public/all.css';
+                        const packageDesc = file === 'public/package.json';
+                        const thirdPartyRubbish = file.startsWith('public/node_modules/') && requiredAssets.indexOf(file) === -1;
+                        const allowed = !bundle && !packageDesc && !thirdPartyRubbish;
+
+                        return allowed;
                     }},
 
                     // copy data: only directory structure and .htaccess for deny
@@ -115,6 +135,7 @@ module.exports = function(grunt) {
         }
     });
 
+    grunt.loadNpmTasks('grunt-auto-install');
     grunt.loadNpmTasks('grunt-text-replace');
     grunt.loadNpmTasks('grunt-contrib-compress');
     grunt.loadNpmTasks('grunt-composer');
@@ -130,7 +151,10 @@ module.exports = function(grunt) {
         }
     });
 
-    grunt.registerTask('default', ['composer:install:no-dev:optimize-autoloader:prefer-dist', 'versionupdater', 'compress']);
+    grunt.registerTask('client:install', 'Install client-side dependencies.', ['auto_install']);
+    grunt.registerTask('server:install', 'Install server-side dependencies.', ['composer:install:no-dev:optimize-autoloader:prefer-dist']);
+    grunt.registerTask('install', 'Install both client-side and server-side dependencies.', ['client:install', 'server:install']);
+    grunt.registerTask('default', ['install', 'versionupdater', 'compress']);
     grunt.registerTask('version', ['versionupdater']);
     grunt.registerTask('zip', ['compress']);
 };

helpers/View.php

@@ -147,6 +147,11 @@ public static function maxmtime(array $filePaths) {
         $maxmtime = 0;
         foreach ($filePaths as $filePath) {
             $fullPath = \F3::get('BASEDIR') . '/' . $filePath;
+
+            if (!file_exists($fullPath)) {
+                throw new \Exception("Missing file “${filePath}”. Did you install the dependencies using npm?");
+            }
+
             $maxmtime = max($maxmtime, filemtime($fullPath));
         }
 

index.php

@@ -11,41 +11,18 @@
 // init authentication
 $f3->set('auth', new \helpers\Authentication());
 
+/** @var stdClass JS client package manifest */
+$clientPackage = json_decode(file_get_contents(__DIR__ . '/public/package.json'));
+
 // define js files
-$js = [
-    'public/js/jquery-2.1.1.min.js',
-    'public/js/jquery-ui.js',
-    'public/js/jquery.mCustomScrollbar.min.js',
-    'public/js/jquery.mousewheel.min.js',
-    'public/js/lazy-image-loader.js',
-    'public/js/spectrum.js',
-    'public/js/jquery.hotkeys.js',
-    'public/js/selfoss-base.js',
-    'public/js/selfoss-shares.js',
-    'public/js/selfoss-db.js',
-    'public/js/selfoss-ui.js',
-    'public/js/selfoss-events.js',
-    'public/js/selfoss-events-navigation.js',
-    'public/js/selfoss-events-search.js',
-    'public/js/selfoss-events-entries.js',
-    'public/js/selfoss-events-entriestoolbar.js',
-    'public/js/selfoss-events-sources.js',
-    'public/js/selfoss-shortcuts.js',
-    'public/js/jquery.fancybox.pack.js'
-];
+$js = $clientPackage->extra->requiredFiles->js;
 if (file_exists('user.js')) {
     $js[] = 'user.js';
 }
 $f3->set('js', $js);
 
 // define css files
-$css = [
-    'public/css/jquery.mCustomScrollbar.css',
-    'public/css/jquery.fancybox.css',
-    'public/css/spectrum.css',
-    'public/css/reset.css',
-    'public/css/style.css'
-];
+$css = $clientPackage->extra->requiredFiles->css;
 if (file_exists('user.css')) {
     $css[] = 'user.css';
 }

package.json

@@ -8,6 +8,7 @@
   },
   "devDependencies": {
     "grunt": "~0.4.5",
+    "grunt-auto-install": "^0.3.1",
     "grunt-composer": "^0.4.5",
     "grunt-contrib-compress": "^0.10.0",
     "grunt-text-replace": "~0.3"