Add a build process using rollup & npm scripts

- `npm run {start,build,watch}` scripts for dev convenience, plus
  some more commands to make it more manageable

- Move source files into `src/`; extension now assembled in `dist/`

- Add moment dependency, remove vendor script version

- Tweaks to use import from popup & background scripts

- Add babel & rollup dev-dependencies

- Add myself to package.json contributors

.gitignore

@@ -1,5 +1,6 @@
 .DS_Store
 profile.testing/
+dist/
 node_modules
 *.zip
 *.sw?

README.md

@@ -3,10 +3,16 @@ An add-on to let you snooze your tabs for a while.
 
 ## How to run
 
-* To lint: `npm run lint`
-* To run: `npm test`
+* To develop: `npm start`
+  * Builds the extension
+  * Starts a file watcher to rebuild on changes
+  * Launches Firefox Dev Edition with the extension, reloaded on changes
+
+* To run once: `npm run build && npm run run`
+
 * To build for release: `npm run build`
 
+* To lint: `npm run lint`
 
 ## Architectural Questions / Decisions…
 
@@ -17,20 +23,6 @@ An add-on to let you snooze your tabs for a while.
 * Should we write this as a [WebExtension][webext]?
   * YES!
 
-* Should we use a build step?
-  * It would let us use [Flow][flow].
-    * Should we even use Flow?
-  * It would let us use [Sass][sass].
-  * It would let us pull the info for the manifest from package.json.
-  * It would let us `require` other javascript modules.
-  * It would be more complicated, and I’m not sure we need it.
-* Put the source in the root, or in a `src` subdirectory?
-  * We could build into `dist`…
-* Should we use a build tool?
-  * [Gulp][gulp]?
-  * [Grunt][grunt]?
-  * Just [NPM][npm] scripts?
-  * Nothing?
 * Add a “Developer Mode” with much shorter times, or an extra 3-second timer?
 * We’ll need something to convert [Pontoon][pontoon]-format l10n files into [WebExtension l10n][l10n] files…
 
@@ -43,4 +35,4 @@ An add-on to let you snooze your tabs for a while.
 [pontoon]: https://pontoon.mozilla.org/projects/
 [sass]: http://sass-lang.com/
 [spec]: https://mozilla.invisionapp.com/share/MV9F846SY#/screens
-[webext]: https://developer.mozilla.org/en-US/Add-ons/WebExtensions
+[webext]: https://developer.mozilla.org/en-US/Add-ons/WebExtensions

package.json

@@ -3,11 +3,26 @@
   "description": "An add-on to let you snooze your tabs for a while.",
   "version": "1.0.0",
   "author": "Blake Winton <[email protected]>",
+  "contributors": [
+    "Les Orchard <[email protected]> (http://lmorchard.com/)"
+  ],
   "bugs": {
     "url": "https://github.com/bwinton/SnoozeTabs/issues"
   },
   "devDependencies": {
+    "babel-plugin-external-helpers": "^6.18.0",
+    "babel-preset-es2015": "^6.18.0",
+    "babel-preset-react": "^6.16.0",
+    "babel-preset-stage-0": "^6.16.0",
     "eslint": "^3.10.2",
+    "npm-run-all": "^3.1.2",
+    "onchange": "^3.2.0",
+    "rollup": "^0.36.4",
+    "rollup-plugin-babel": "^2.6.1",
+    "rollup-plugin-commonjs": "^5.0.5",
+    "rollup-plugin-node-globals": "^1.1.0",
+    "rollup-plugin-node-resolve": "^2.0.0",
+    "rollup-plugin-replace": "^1.1.1",
     "web-ext": "^1.4.0"
   },
   "homepage": "https://github.com/bwinton/SnoozeTabs#readme",
@@ -24,9 +39,20 @@
     "url": "git+https://github.com/bwinton/SnoozeTabs.git"
   },
   "scripts": {
-    "build": "web-ext build -a .",
+    "start": "npm run build && npm-run-all --parallel watch run",
+    "build": "npm run clean && npm run copy:assets && npm run bundle:js && npm run package",
+    "watch": "onchange src -- npm run build",
+    "run": "web-ext run -s dist --firefox=firefoxdeveloperedition",
+    "clean": "rm -rf dist && mkdir dist",
+    "copy:assets": "cp -rnv src/{manifest.json,lib,icons,popup} dist/",
+    "bundle:js": "rollup -c --environment entry:background && rollup -c --environment entry:popup/snooze-content",
+    "package": "web-ext build -s dist -a .",
     "lint": "eslint . && web-ext lint",
-    "prebuild": "npm run lint",
-    "test": "web-ext run"
+    "test": "npm run build && web-ext run -s dist"
+  },
+  "dependencies": {
+    "moment": "^2.17.1",
+    "react": "^15.4.1",
+    "react-dom": "^15.4.1"
   }
 }

rollup.config.js

@@ -0,0 +1,29 @@
+import babel from 'rollup-plugin-babel'
+import cjs from 'rollup-plugin-commonjs'
+import globals from 'rollup-plugin-node-globals'
+import replace from 'rollup-plugin-replace'
+import resolve from 'rollup-plugin-node-resolve'
+
+export default {
+  entry: `src/${process.env.entry}.js`,
+  dest: `dist/${process.env.entry}.js`,  
+  format: 'iife',
+  plugins: [
+    babel({
+      babelrc: false,
+      exclude: 'node_modules/**',
+      presets: [ [ 'es2015', { modules: false } ], 'stage-0', 'react' ],
+      plugins: [ 'external-helpers' ]
+    }),
+    cjs({
+      exclude: 'node_modules/process-es6/**',
+    }),
+    globals(),
+    replace({ 'process.env.NODE_ENV': '"development"' }),
+    resolve({
+      browser: true,
+      main: true
+    })
+  ],
+  sourceMap: false
+}

background.js → src/background.js

@@ -6,6 +6,9 @@
 
 'use strict';
 
+import moment from 'moment';
+import { times, timeForId } from './lib/times';
+
 function handleMessage(message) {
   let item = {};
   item[`${message.time}`] = message;

lib/times.js → src/lib/times.js

@@ -1,7 +1,7 @@
-/* globals moment:false */
 /* exported timeForId */
+import moment from 'moment';
 
-const times = [
+export const times = [
   {id: "debug", icon: "nightly.svg", title: "Real Soon Now!"},
   {id: "later", icon: "Later Today.svg", title: "Later Today"},
   {id: "tomorrow", icon: "Tomorrow.svg", title: "Tomorrow"},
@@ -11,7 +11,7 @@ const times = [
   {id: "pick", icon: "Pick Date.svg", title: "Pick a Date/Time"}
 ];
 
-function timeForId(time, id) {
+export function timeForId(time, id) {
   var rv = moment(time);
   var text = rv.fromNow();
   switch (id) {
@@ -46,4 +46,4 @@ function timeForId(time, id) {
       break;
   }
   return [rv, text];
-}
+}

manifest.json → src/manifest.json

@@ -7,7 +7,7 @@
 
   "permissions": ["alarms", "contextMenus", "notifications", "storage", "tabs"],
   "background": {
-    "scripts": ["lib/moment.js", "lib/times.js", "background.js"]
+    "scripts": ["background.js"]
   },
 
   "browser_action": {

popup/snooze-content.js → src/popup/snooze-content.js

@@ -8,6 +8,11 @@
 
 'use strict';
 
+import React from 'react';
+import ReactDOM from 'react-dom';
+import moment from 'moment';
+import { times, timeForId } from '../lib/times';
+
 function getParentWithClasses(element, classes) {
   while (element && !classes.every(klass => element.classList.contains(klass))) {
     element = element.parentElement;

popup/snooze.html → src/popup/snooze.html

@@ -21,9 +21,7 @@
     <div class="header">Pick a Date/Time</div>
     <div class="footer"><div class="back">« Back</div><div class="snooze">Snooze!</div></div>
   </div>
-  <script src="../lib/moment.js"></script>
-  <script src="../lib/times.js"></script>
   <script src="snooze-content.js"></script>
 </body>
 
-</html>
+</html>