Skip to content

Commit

Permalink
Port to Parcel bundler
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
jtojnar committed Sep 26, 2019
1 parent d8ed6e9 commit 9a20077
Show file tree
Hide file tree
Showing 76 changed files with 8,231 additions and 378 deletions.
7 changes: 5 additions & 2 deletions .eslintrc.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
{
"root": true,
"extends": "eslint:recommended",
"parserOptions": {
"sourceType": "module"
},
"rules": {
"no-eval": "error",
"array-bracket-spacing": "error",
Expand Down Expand Up @@ -36,10 +39,10 @@
},
"env": {
"browser": true,
"es6": true,
"jquery": true
},
"globals": {
"selfoss": {},
"Dexie": {}
"selfoss": {}
}
}
3 changes: 1 addition & 2 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 2 additions & 0 deletions .htaccess
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
1 change: 1 addition & 0 deletions NEWS.md
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,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))


Expand Down
6 changes: 2 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -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.
Expand Down Expand Up @@ -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)
Expand Down
13 changes: 13 additions & 0 deletions assets/.dummy.html
Original file line number Diff line number Diff line change
@@ -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>
67 changes: 36 additions & 31 deletions assets/css/style.css
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -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;
}
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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%;
}

Expand Down Expand Up @@ -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;
}

Expand All @@ -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;
}

Expand All @@ -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 {
Expand Down Expand Up @@ -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;
}

Expand Down Expand Up @@ -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%;
}

Expand All @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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;
}

Expand All @@ -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;
Expand Down
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes.
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
24 changes: 24 additions & 0 deletions assets/js/index.js
Original file line number Diff line number Diff line change
@@ -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';
8 changes: 8 additions & 0 deletions assets/js/jquery.js
Original file line number Diff line number Diff line change
@@ -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);
2 changes: 2 additions & 0 deletions assets/js/lazy-image-loader.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import jQuery from 'jquery';

/**
* load images on showing an message entry
*/
Expand Down
6 changes: 4 additions & 2 deletions assets/js/selfoss-base.js
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,9 @@ var selfoss = {

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() {
Expand Down Expand Up @@ -653,4 +655,4 @@ var selfoss = {

};

selfoss.init();
export default selfoss;
2 changes: 2 additions & 0 deletions assets/js/selfoss-db.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {

Expand Down
Loading

0 comments on commit 9a20077

Please sign in to comment.