Port to Parcel bundler

Using asset bundler will allow us to switch to modern JavaScript, build user interface client-side more easily, and develop iteratively thanks to hot module replacement.

We chose Parcel over Webpack for simplicity of set up.

.eslintrc.json

@@ -1,6 +1,9 @@
 {
     "root": true,
     "extends": "eslint:recommended",
+    "parserOptions": {
+        "sourceType": "module"
+    },
     "rules": {
         "no-eval": "error",
         "array-bracket-spacing": "error",
@@ -36,10 +39,10 @@
     },
     "env": {
         "browser": true,
+        "es6": true,
         "jquery": true
     },
     "globals": {
-        "selfoss": {},
-        "Dexie": {}
+        "selfoss": {}
     }
 }

.gitignore

@@ -5,8 +5,7 @@
 /data/cache/*.spc
 /data/logs/*.log
 /data/sqlite/*.db
-/public/all.*
-/public/selfoss-sw-offline.js
+/public
 user.css
 user.js
 config.ini

.htaccess

@@ -22,6 +22,8 @@ RewriteRule !favicons/ - [C]
 RewriteRule !thumbnails - [C]
 RewriteRule !public - [C]
 RewriteRule !index.php - [C]
+RewriteRule !user.css - [C]
+RewriteRule !user.js - [C]
 RewriteRule (.*) public/$1 [L]
 
 # deny requests for config files

NEWS.md

@@ -50,6 +50,7 @@
 - Open Sans font is no longer bundled, resulting in smaller installations. Additionally, `use_system_font` option was removed. The typeface is still set as the default font family, so if you want to use it, install it to your devices. If you want to use a different typeface, add `body { font-family: 'Foo Face'; }` to your `user.css`. ([#1072](https://github.com/SSilence/selfoss/pull/1072))
 - The file name of exported sources now includes a timestamp ([#1078](https://github.com/SSilence/selfoss/pull/1078))
 - Developers, we no longer use Grunt. Build the package using `npm run dist` and check the code using `npm run check`; see the `scripts` section in top-level `package.json`. ([#1093](https://github.com/SSilence/selfoss/pull/1093))
+- Developers, we are now building the styles and client-side code statically, using Parcel. If you update any such assets, you will need to run `npm run build` for the changes to be reflected. You can also use `npm run dev` to watch for asset changes. ([#1137](https://github.com/SSilence/selfoss/pull/1137))
 - Google+ and del.icio.us share button were removed ([#1121](https://github.com/SSilence/selfoss/pull/1121))
 
 

README.md

@@ -17,7 +17,7 @@ INSTALLATION
 ------------
 
 1. Upload all files of this folder (IMPORTANT: also upload the invisible .htaccess files)
-2. Make the directories data/cache, data/favicons, data/logs, data/thumbnails, data/sqlite and public/ writeable
+2. Make the directories data/cache, data/favicons, data/logs, data/thumbnails and data/sqlite writeable
 3. Insert database access data in config.ini (see below -- you don't have to change anything if you want to use sqlite)
 3. You don't have to install the database, it will be created automatically (ensure that your database has enought rights for creating triggers)
 4. Create cronjob for updating feeds and point it to https://yourselfossurl.com/update via wget or curl. You can also execute the cliupdate.php from commandline.
@@ -41,7 +41,7 @@ UPDATE
 1. Backup your database and your "data" folder
 2. (IMPORTANT: don't delete the "data" folder) delete all old files and folders excluding the folder "data" and the file config.ini
 3. Upload all new files and folders excluding the data folder (IMPORTANT: also upload the invisible .htaccess files)
-4. Make the folder "public" writeable
+4. Consult the [NEWS file](NEWS.md) to learn about backwards incompatible changes.
 5. Rename your folder /data/icons into /data/favicons
 6. Clean your browser cache
 7. Insert your current database connection and your individual configuration in config.ini. Important: we change the config.ini and add new options in newer versions. You have to update the config.ini too.
@@ -99,8 +99,6 @@ Special thanks to the great programmers of this libraries which will be used in
 * [twitteroauth](https://github.com/abraham/twitteroauth)
 * [Elphin IcoFileLoader](https://github.com/lordelph/icofileloader)
 * [jQuery hotkeys](https://github.com/tzuryby/jquery.hotkeys)
-* [JShrink](https://github.com/tedious/JShrink)
-* [cssmin](https://code.google.com/archive/p/cssmin)
 * [Spectrum Colorpicker](https://github.com/bgrins/spectrum)
 * [jQuery custom content scroller](http://manos.malihu.gr/jquery-custom-content-scroller/)
 * [twitter oauth library](https://github.com/abraham/twitteroauth)

assets/.dummy.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Fake document</title>
+<link rel="manifest" href="selfoss.webmanifest">
+</head>
+<body>
+    <p>This is a fake HTML document used for generating the bundle.</p>
+
+    <script src="js/index.js"></script>
+</body>
+</html>

assets/css/style.css

@@ -1,3 +1,8 @@
+@import 'malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css';
+@import '@fancyapps/fancybox/dist/jquery.fancybox.css';
+@import 'spectrum-colorpicker/spectrum.css';
+@import '../css/reset.css';
+
 /* base */
 
 html {
@@ -8,7 +13,7 @@ html {
 body {
     font: lighter 18px/27px 'Open Sans', Arial, sans-serif;
     color: black;
-    background:url(images/bg.gif) repeat;
+    background:url(../images/bg.gif) repeat;
     height: 100%;
     position:relative;
 }
@@ -83,7 +88,7 @@ input {
     #nav-logo {
         margin-left:20px;
         margin-top:14px;
-        background:url(images/logo.png);
+        background:url(../images/logo.png);
         width:31px;
         height:37px;
     }
@@ -113,13 +118,13 @@ input {
         .nav-filter-collapsed {
             cursor:pointer;
             padding-left: 20px;
-            background: url(images/nav-collapsed.png) center left no-repeat;
+            background: url(../images/nav-collapsed.png) center left no-repeat;
         }
 
         .nav-filter-expanded {
             cursor:pointer;
             padding-left: 20px;
-            background: url(images/nav-expanded.png) center left no-repeat;
+            background: url(../images/nav-expanded.png) center left no-repeat;
         }
 
     #nav-filter-title {
@@ -227,13 +232,13 @@ input {
         .nav-tags-collapsed {
             cursor:pointer;
             padding-left: 20px;
-            background: url(images/nav-collapsed.png) center left no-repeat;
+            background: url(../images/nav-collapsed.png) center left no-repeat;
         }
 
         .nav-tags-expanded {
             cursor:pointer;
             padding-left: 20px;
-            background: url(images/nav-expanded.png) center left no-repeat;
+            background: url(../images/nav-expanded.png) center left no-repeat;
         }
 
         #nav-tags li a {
@@ -274,13 +279,13 @@ input {
         .nav-sources-collapsed {
             cursor:pointer;
             padding-left: 20px;
-            background: url(images/nav-collapsed.png) center left no-repeat;
+            background: url(../images/nav-collapsed.png) center left no-repeat;
         }
 
         .nav-sources-expanded {
             cursor:pointer;
             padding-left: 20px;
-            background: url(images/nav-expanded.png) center left no-repeat;
+            background: url(../images/nav-expanded.png) center left no-repeat;
         }
 
         #nav-sources {
@@ -341,23 +346,23 @@ input {
     }
 
     #nav-refresh {
-        background:url(images/nav-refresh.png) no-repeat center center #272325;
+        background:url(../images/nav-refresh.png) no-repeat center center #272325;
     }
 
     #nav-refresh.loading {
-        background:url(images/ajax-loader.gif) center center no-repeat;
+        background:url(../images/ajax-loader.gif) center center no-repeat;
     }
 
     #nav-settings {
-        background:url(images/nav-sources.png) no-repeat center center #272325;
+        background:url(../images/nav-sources.png) no-repeat center center #272325;
     }
 
     #nav-logout {
-        background:url(images/nav-logout.png) no-repeat center center #272325;
+        background:url(../images/nav-logout.png) no-repeat center center #272325;
     }    
 
     #nav-login {
-        background:url(images/nav-login.png) no-repeat center center #272325;
+        background:url(../images/nav-login.png) no-repeat center center #272325;
     }
 
     .nav-toolbar {
@@ -445,7 +450,7 @@ input {
         padding-left:5px;
         padding-right:15px;
         font-size:0.85em;
-        background: url(images/remove-small.png) no-repeat right center #3d6d69;
+        background: url(../images/remove-small.png) no-repeat right center #3d6d69;
         border-right:6px solid #3d6d69;
         -webkit-border-top-right-radius: 4px;
         -webkit-border-bottom-right-radius: 4px;
@@ -473,7 +478,7 @@ input {
     }
 
     #content.loading {
-        background:url(images/ajax-loader-big.gif) center center no-repeat;
+        background:url(../images/ajax-loader-big.gif) center center no-repeat;
         min-height:90%;
     }
 
@@ -694,32 +699,32 @@ input {
         }
 
         .entry-toolbar .entry-starr {
-            background-image:url(images/unstarred.png);
+            background-image:url(../images/unstarred.png);
         }
 
         .entry-toolbar .entry-starr.active {
-            background-image:url(images/starred.png);
+            background-image:url(../images/starred.png);
         }
 
         .entry-toolbar .entry-unread {
-            background-image:url(images/read.png);
+            background-image:url(../images/read.png);
         }
 
         .entry-toolbar .entry-unread.active {
-            background-image:url(images/unread.png);
+            background-image:url(../images/unread.png);
         }
 
         .entry-toolbar .entry-loadimages {
             display:none;
-            background-image:url(images/arrow-down.png);
+            background-image:url(../images/arrow-down.png);
         }
 
         .entry-newwindow {
-            background-image:url(images/open.png);
+            background-image:url(../images/open.png);
         }
 
         .entry-next {
-            background-image:url(images/arrow-right.png);
+            background-image:url(../images/arrow-right.png);
             display:none;
         }
 
@@ -737,7 +742,7 @@ input {
             left:100%;
             top:0;
             margin-left:-60px;
-            background:url(images/close.png) center center no-repeat;
+            background:url(../images/close.png) center center no-repeat;
             background-size: 28px 28px;
         }
 
@@ -763,7 +768,7 @@ input {
         }
 
         .stream-more.loading {
-            background:url(images/ajax-loader-big.gif) center center no-repeat;
+            background:url(../images/ajax-loader-big.gif) center center no-repeat;
         }
 
         .stream-more.loading span {
@@ -842,7 +847,7 @@ input {
 
 .source-edit-delete.loadi1ng,
 .source-action.loading {
-    background:url(images/ajax-loader.gif) right center no-repeat;
+    background:url(../images/ajax-loader.gif) right center no-repeat;
     padding-right:25px;
 }
 
@@ -919,7 +924,7 @@ input {
 }
 
 #loginform.loading {
-    background:url(images/ajax-loader-big.gif) center center no-repeat;
+    background:url(../images/ajax-loader-big.gif) center center no-repeat;
     height: 90%;
 }
 
@@ -936,7 +941,7 @@ input {
 }
 
     #login h1 {
-        background:url(images/logo.png) left center no-repeat;
+        background:url(../images/logo.png) left center no-repeat;
         font-weight:600;
         padding-top:10px;
         padding-left:40px;
@@ -973,7 +978,7 @@ input {
 }
 
     #opml h1 {
-        background:url(images/logo.png) left center no-repeat;
+        background:url(../images/logo.png) left center no-repeat;
         font-family:'Open Sans', Arial, sans-serif;
         font-weight: 600; /* semi-bold */
         padding-top:10px;
@@ -1074,7 +1079,7 @@ body:not(.loggedin) .entry-unread {
         border-radius:0px;
         /*border-top:1px solid #ccc;*/
         border:0;
-        background:url(images/entry-bg.png) bottom repeat-x #fff;
+        background:url(../images/entry-bg.png) bottom repeat-x #fff;
     }
 
     .source-showparams,
@@ -1223,7 +1228,7 @@ body:not(.loggedin) .entry-unread {
             left:50%;
             top:5px;
             margin-left:-48px;
-            background:url(images/nav-mobile-logo.png) no-repeat;
+            background:url(../images/nav-mobile-logo.png) no-repeat;
             background-size:96px 40px;
         }
 
@@ -1241,7 +1246,7 @@ body:not(.loggedin) .entry-unread {
             height:29px;
             left:100%;
             margin-left:-66px;
-            background:url(images/nav-mobile-settings.png) no-repeat center;
+            background:url(../images/nav-mobile-settings.png) no-repeat center;
             background-size:29px 29px;
             padding:11px 21px 11px 15px;
             display: block;

assets/js/index.js

@@ -0,0 +1,24 @@
+import 'regenerator-runtime/runtime';
+import './jquery';
+import './lazy-image-loader';
+import 'spectrum-colorpicker';
+import 'jquery-hotkeys';
+import selfoss from './selfoss-base';
+import './selfoss-shares';
+import './selfoss-db';
+import './selfoss-ui';
+import './selfoss-events';
+import './selfoss-events-navigation';
+import './selfoss-events-search';
+import './selfoss-events-entries';
+import './selfoss-events-entriestoolbar';
+import './selfoss-events-sources';
+import './selfoss-shortcuts';
+import '@fancyapps/fancybox';
+
+selfoss.init();
+
+// make selfoss available in console for debugging
+window.selfoss = selfoss;
+
+import '../css/style.css';

assets/js/jquery.js

@@ -0,0 +1,8 @@
+import jQuery from 'jquery';
+import mousewheel from 'jquery-mousewheel';
+import scrollbar from 'malihu-custom-scrollbar-plugin';
+window.$ = window.jQuery = jQuery; // workaround for https://github.com/parcel-bundler/parcel/issues/333
+
+// register plug-ins
+mousewheel(jQuery); // required by scrollbar
+scrollbar(jQuery);

assets/js/lazy-image-loader.js

@@ -1,3 +1,5 @@
+import jQuery from 'jquery';
+
 /**
  * load images on showing an message entry
  */

assets/js/selfoss-base.js

@@ -40,7 +40,9 @@ var selfoss = {
     init: function() {
         if ('serviceWorker' in navigator) {
             window.addEventListener('load', function() {
-                navigator.serviceWorker.register('selfoss-sw-offline.js')
+                // load script generated by Parcel plugin
+                const workerPath = 'selfoss-sw-offline.js';
+                navigator.serviceWorker.register(workerPath)
                     .then(function(reg) {
                         selfoss.listenWaitingSW(reg, function(reg) {
                             selfoss.ui.notifyNewVersion(function() {
@@ -626,4 +628,4 @@ var selfoss = {
 
 };
 
-selfoss.init();
+export default selfoss;

assets/js/selfoss-db.js

@@ -9,6 +9,8 @@
  * dbOffline is the entry point for the offline database held in the client.
  */
 
+import selfoss from './selfoss-base';
+import Dexie from 'dexie';
 
 selfoss.dbOnline = {