migrate all JS to ES6 modules

The ES6 modules are available since Firefox 60. This is a straightforward migration with the minimal restructuring possible. There are dependency cycles, so future refactoring is desired. The functionality seems to work, no errors from Firefox, no import errors from eslint-plugin-import.
brief-rss · May 28, 2018 · f3dd765 · f3dd765
1 parent 515fa21
commit f3dd765
Show file tree

Hide file tree

Showing 28 changed files with 129 additions and 109 deletions.
diff --git a/background.js b/background.js
@@ -1,4 +1,8 @@
-'use strict';
+import {Database} from "/scripts/database.js";
+import {Prefs} from "/scripts/prefs.js";
+import {FeedUpdater} from "/scripts/updater.js";
+import {Comm, debounced} from "/scripts/utils.js";
+
 
 const Brief = {
     // Port for receiving status updates

diff --git a/background.xhtml b/background.xhtml
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html>
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+    <head>
+        <script type="module" src="background.js"/>
+    </head>
+
+    <body>
+    </body>
+</html>
diff --git a/manifest.json b/manifest.json
@@ -14,13 +14,7 @@
     "permissions": ["<all_urls>", "contextMenus", "bookmarks",
         "storage", "unlimitedStorage", "downloads", "tabs", "notifications"],
     "background": {
-        "scripts": [
-            "/scripts/utils.js",
-            "/scripts/prefs.js",
-            "/scripts/database.js",
-            "/scripts/updater.js",
-            "background.js"
-        ]
+        "page": "background.xhtml"
     },
     "browser_action": {
         "browser_style": true,

diff --git a/scripts/database.js b/scripts/database.js
@@ -1,4 +1,7 @@
-'use strict';
+import {Prefs} from "/scripts/prefs.js";
+import {FeedUpdater, FaviconFetcher} from "/scripts/updater.js";
+import {Comm, parseDateValue, asArray, hashString} from "/scripts/utils.js";
+
 
 /**
  * Database design and considerations
@@ -23,7 +26,7 @@
 // IndexedDB does not play nice with `async` (transaction ends before execution restarts)
 // and the same problem with native Promise
 // mb1193394, fixed in Firefox 60
-let Database = {
+export let Database = {
     // If upping, check migration in both _upgradeSchema and _upgradeEntry/_upgradeEntries
     // Note that the Migrator has `assert !(db.version > 30)`
     // and the migration is started from the upgrade path only

diff --git a/scripts/i18n.js b/scripts/i18n.js
@@ -1,7 +1,5 @@
-'use strict';
-
 // Perform substitutions for i18n in text and attributes
-function apply_i18n(doc) {
+export function apply_i18n(doc) {
     for(let node of doc.querySelectorAll('[data-i18n]')) {
         let text = browser.i18n.getMessage(node.dataset.i18n) || node.dataset.i18n;
         if(node.dataset.i18nAllowMarkup !== undefined) {

diff --git a/scripts/opml.js b/scripts/opml.js
@@ -1,7 +1,10 @@
-'use strict';
 // Based on code by Christopher Finke, "OPML Support" extension. Used with permisson.
+import {Database} from "/scripts/database.js";
+import {Prefs} from "/scripts/prefs.js";
+import {Comm, expectedEvent} from "/scripts/utils.js";
 
-let OPML = {
+
+export let OPML = {
     async importOPML(file) {
         let reader = new FileReader();
         reader.readAsText(file); // assumes UTF-8

diff --git a/scripts/prefs.js b/scripts/prefs.js
@@ -1,6 +1,4 @@
-'use strict';
-
-let Prefs = {
+export let Prefs = {
     // Message channel
     _port: null,
     // Current pref values

diff --git a/scripts/updater.js b/scripts/updater.js
@@ -1,8 +1,9 @@
-'use strict';
+import {Database} from "/scripts/database.js";
+import {Prefs} from "/scripts/prefs.js";
+import {Comm, wait, xhrPromise, getPluralForm} from "/scripts/utils.js";
 
 
-
-let FeedUpdater = {
+export let FeedUpdater = {
     UPDATE_TIMER_INTERVAL: 60000, // 1 minute
     FAVICON_REFRESH_INTERVAL: 14*24*60*60*1000, // 2 weeks
 
@@ -236,7 +237,7 @@ let FeedUpdater = {
 };
 
 
-let FaviconFetcher = {
+export let FaviconFetcher = {
     TIMEOUT: 25000,
 
     async updateFavicon(feed) {
@@ -413,7 +414,7 @@ let FaviconFetcher = {
 };
 
 
-let FeedFetcher = {
+export let FeedFetcher = {
     TIMEOUT: 25000, // 25 seconds
 
     async fetchFeed(feed) {

diff --git a/scripts/utils.js b/scripts/utils.js
@@ -1,20 +1,18 @@
-'use strict';
-
 // ===== Promise utilities =====
 
 // Adapt setTimeout for Promises
-function wait(delay) {
+export function wait(delay) {
     return new Promise(resolve => setTimeout(() => resolve(), delay));
 }
 
 // Wait for a specific event (for example, 'transitionend')
-function expectedEvent(element, event) {
+export function expectedEvent(element, event) {
     return new Promise((resolve, reject) => {
         element.addEventListener(event, resolve, {once: true, passive: true});
     });
 }
 
-function xhrPromise(request) {
+export function xhrPromise(request) {
     return new Promise((resolve, reject) => {
         request.onload = () => resolve(request.response);
         request.onerror = e => reject(e);
@@ -25,7 +23,7 @@ function xhrPromise(request) {
 
 // ===== Misc helpers =====
 
-function debounced(delay, callback) {
+export function debounced(delay, callback) {
     let active = false;
 
     return async () => {
@@ -41,7 +39,7 @@ function debounced(delay, callback) {
 }
 
 // Iterate nodes in a XPathResult
-function iterSnapshot(result) {
+export function iterSnapshot(result) {
     return {
         [Symbol.iterator]: function*() {
             for(let i = 0; i < result.snapshotLength; i++){
@@ -51,30 +49,30 @@ function iterSnapshot(result) {
     }
 }
 
-function asArray(v) {
+export function asArray(v) {
     if(Array.isArray(v)) {
         return v;
     } else {
         return [v];
     }
 }
 
-function parseDateValue(date) {
+export function parseDateValue(date) {
     // TODO: maybe MIL timezones here?
     if(!date) {
         return;
     }
     return (new Date(date)).getTime();
 }
 
-async function hashString(str) {
+export async function hashString(str) {
     let enc = new TextEncoder();
     let buffer = await crypto.subtle.digest('SHA-1', enc.encode(str));
     let u8arr = new Uint8Array(buffer);
     return Array.from(u8arr).map(b => ('00' + b.toString(16)).slice(-2)).join('');
 }
 
-function RelativeDate(aAbsoluteTime) {
+export function RelativeDate(aAbsoluteTime) {
     this.currentDate = new Date();
     this.currentTime = this.currentDate.getTime() - this.currentDate.getTimezoneOffset() * 60000;
 
@@ -112,15 +110,15 @@ RelativeDate.prototype = {
 }
 
 
-function getPluralForm(number, forms) {
+export function getPluralForm(number, forms) {
     let knownForms = browser.i18n.getMessage('pluralRule').split(';');
     let rules = new Intl.PluralRules();
     let form = rules.select(number);
     return forms.split(';')[knownForms.indexOf(form)];
 }
 
 
-async function openBackgroundTab(url) {
+export async function openBackgroundTab(url) {
     let tab = await browser.tabs.getCurrent();
     try {
         await browser.tabs.create({active: false, url: url, openerTabId: tab.id})
@@ -135,7 +133,7 @@ async function openBackgroundTab(url) {
 }
 
 // ===== Messaging helpers =====
-let Comm = {
+export let Comm = {
     master: false,
     verbose: false,
     observers: new Set(),

diff --git a/test/_harness.js b/test/_harness.js
@@ -1,6 +1,4 @@
-'use strict';
-
-const T = {
+export const T = {
     runTest: async function(name, fun) {
         try {
             let result = fun();

diff --git a/test/index.xhtml b/test/index.xhtml
@@ -6,17 +6,8 @@
     <title>Brief testsuite</title>
     <link rel="icon" href="/skin/brief-icon-16.png" style="display:none" />
 
-    <script type="application/x-javascript" src="/scripts/prefs.js"/>
-    <script type="application/x-javascript" src="/scripts/plural-data.js"/>
-    <script type="application/x-javascript" src="/scripts/utils.js"/>
-    <script type="application/x-javascript" src="/scripts/i18n.js"/>
-    <script type="application/x-javascript" src="/scripts/database.js"/>
-    <script type="application/x-javascript" src="/scripts/opml.js"/>
-    <script type="application/x-javascript" src="/scripts/updater.js"/>
-
-    <script type="application/x-javascript" src="_harness.js"/>
-    <script type="application/x-javascript" src="parse.js"/>
-    <script type="application/x-javascript" src="query.js"/>
+    <script type="module" src="parse.js"/>
+    <script type="module" src="query.js"/>
 </head>
 <body>
 </body>

diff --git a/test/parse.js b/test/parse.js
@@ -1,4 +1,7 @@
-'use strict';
+import {FeedFetcher} from "/scripts/updater.js";
+import {parseDateValue} from "/scripts/utils.js";
+import {T} from "./_harness.js";
+
 
 T.runTests('parse', {
     date: () => {

diff --git a/test/query.js b/test/query.js
@@ -1,4 +1,5 @@
-'use strict';
+import {Database} from "/scripts/database.js";
+import {T} from "./_harness.js";
 
 
 T.runTests('query', {

diff --git a/ui/brief.js b/ui/brief.js
@@ -1,6 +1,13 @@
-'use strict';
-
-var gCurrentView;
+import {Database} from "/scripts/database.js";
+import {apply_i18n} from "/scripts/i18n.js";
+import {Prefs} from "/scripts/prefs.js";
+import {Comm, expectedEvent, wait, debounced, openBackgroundTab} from "/scripts/utils.js";
+import {
+    FeedList, ViewList, TagList, DropdownMenus,
+    ViewListContextMenu, TagListContextMenu, FeedListContextMenu,
+    ContextMenuModule,
+    gCurrentView
+} from "./feedlist.js";
 
 
 var init = async function init() {
@@ -91,7 +98,7 @@ var init = async function init() {
 }
 
 
-var Commands = {
+export var Commands = {
 
     hideSidebar: function cmd_hideSidebar() {
         document.body.classList.remove('sidebar');
@@ -410,7 +417,7 @@ let SplitterModule = {
     },
 };
 
-let Persistence = {
+export let Persistence = {
     data: null,
 
     init: async function Persistence_init() {
@@ -449,7 +456,7 @@ let Persistence = {
     },
 };
 
-let Shortcuts = {
+export let Shortcuts = {
     mode: 'command',
 
     init: function Shortcuts_init() {
@@ -524,7 +531,7 @@ let Shortcuts = {
 
 // ------- Utility functions --------
 
-function getElement(aId) { return document.getElementById(aId); }
+export function getElement(aId) { return document.getElementById(aId); }
 
 // ===== Init =====
 window.addEventListener('load', () => init(), {once: true, passive: true});
diff --git a/ui/brief.xhtml b/ui/brief.xhtml
@@ -11,15 +11,7 @@
     <link rel="stylesheet" type="text/css" href="/skin/feedlist.css"/>
     <link id='custom-css' rel="stylesheet" type="text/css"/>
 
-    <script type="application/x-javascript" src="/scripts/prefs.js"/>
-    <script type="application/x-javascript" src="/scripts/plural-data.js"/>
-    <script type="application/x-javascript" src="/scripts/utils.js"/>
-    <script type="application/x-javascript" src="/scripts/i18n.js"/>
-    <script type="application/x-javascript" src="/scripts/database.js"/>
-    <script type="application/x-javascript" src="/scripts/opml.js"/>
-    <script type="application/x-javascript" src="brief.js"/>
-    <script type="application/x-javascript" src="feedlist.js"/>
-    <script type="application/x-javascript" src="feedview.js"/>
+    <script type="module" src="brief.js"/>
 </head>
 <body class="sidebar">
     <div id="sidebar" class="shrinkable vbox">