Merge pull request #499 from mozilla/pier1

use import/export in the frontend code

frontend/src/.eslintrc.yml

@@ -1,3 +1,9 @@
 env:
   browser: true
-  jquery: true
+  node: false
+
+parserOptions:
+  sourceType: module
+
+rules:
+  node/no-unsupported-features: off

frontend/src/common.js

@@ -1,5 +1,5 @@
-const Raven = require('raven-js');
-const { unsupported } = require('./metrics');
+import Raven from 'raven-js';
+import { unsupported } from './metrics';
 
 if (navigator.doNotTrack !== '1' && window.RAVEN_CONFIG) {
   Raven.config(window.SENTRY_ID, window.RAVEN_CONFIG).install();
@@ -17,6 +17,4 @@ if (
   });
 }
 
-module.exports = {
-  Raven
-};
+export { Raven };

frontend/src/download.js

@@ -1,13 +1,13 @@
-const { Raven } = require('./common');
-const FileReceiver = require('./fileReceiver');
-const { bytes, notify, gcmCompliant } = require('./utils');
-const Storage = require('./storage');
-const storage = new Storage();
-const links = require('./links');
-const metrics = require('./metrics');
-const progress = require('./progress');
-const $ = require('jquery');
+import { Raven } from './common';
+import FileReceiver from './fileReceiver';
+import { bytes, notify, gcmCompliant } from './utils';
+import Storage from './storage';
+import * as links from './links';
+import * as metrics from './metrics';
+import * as progress from './progress';
+import $ from 'jquery';
 
+const storage = new Storage(localStorage);
 function onUnload(size) {
   metrics.cancelledDownload({ size });
 }

frontend/src/fileReceiver.js

@@ -1,7 +1,7 @@
-const EventEmitter = require('events');
-const { hexToArray } = require('./utils');
+import EventEmitter from 'events';
+import { hexToArray } from './utils';
 
-class FileReceiver extends EventEmitter {
+export default class FileReceiver extends EventEmitter {
   constructor() {
     super();
   }
@@ -86,5 +86,3 @@ class FileReceiver extends EventEmitter {
       });
   }
 }
-
-module.exports = FileReceiver;

frontend/src/fileSender.js

@@ -1,7 +1,7 @@
-const EventEmitter = require('events');
-const { arrayToHex } = require('./utils');
+import EventEmitter from 'events';
+import { arrayToHex } from './utils';
 
-class FileSender extends EventEmitter {
+export default class FileSender extends EventEmitter {
   constructor(file) {
     super();
     this.file = file;
@@ -116,5 +116,3 @@ class FileSender extends EventEmitter {
       });
   }
 }
-
-module.exports = FileSender;

frontend/src/links.js

@@ -18,6 +18,4 @@ function setOpenInNewTab(bool) {
   }
 }
 
-module.exports = {
-  setOpenInNewTab
-};
+export { setOpenInNewTab };

frontend/src/metrics.js

@@ -1,5 +1,5 @@
-const testPilotGA = require('testpilot-ga/src/TestPilotGA');
-const Storage = require('./storage');
+import testPilotGA from 'testpilot-ga/src/TestPilotGA';
+import Storage from './storage';
 const storage = new Storage();
 
 let hasLocalStorage = false;
@@ -234,7 +234,7 @@ function addRestartHandlers() {
   });
 }
 
-module.exports = {
+export {
   copiedLink,
   startedUpload,
   cancelledUpload,

frontend/src/progress.js

@@ -1,6 +1,6 @@
-const { bytes, percent } = require('./utils');
-const $ = require('jquery');
-require('jquery-circle-progress');
+import { bytes, percent } from './utils';
+import $ from 'jquery';
+import 'jquery-circle-progress';
 
 let $progress = null;
 let $percent = null;
@@ -50,7 +50,4 @@ function setText(str) {
   $text.text(str);
 }
 
-module.exports = {
-  setProgress,
-  setText
-};
+export { setProgress, setText };

frontend/src/storage.js

@@ -1,4 +1,4 @@
-const { isFile } = require('./utils');
+import { isFile } from './utils';
 
 class Mem {
   constructor() {
@@ -26,7 +26,7 @@ class Mem {
   }
 }
 
-class Storage {
+export default class Storage {
   constructor() {
     try {
       this.engine = localStorage || new Mem();
@@ -97,5 +97,3 @@ class Storage {
     this.engine.setItem(id, JSON.stringify(file));
   }
 }
-
-module.exports = Storage;

frontend/src/upload.js

@@ -1,19 +1,19 @@
 /* global MAXFILESIZE EXPIRE_SECONDS */
-const { Raven } = require('./common');
-const FileSender = require('./fileSender');
-const {
+import { Raven } from './common';
+import FileSender from './fileSender';
+import {
   bytes,
   copyToClipboard,
   notify,
   gcmCompliant,
   ONE_DAY_IN_MS
-} = require('./utils');
-const Storage = require('./storage');
-const storage = new Storage();
-const metrics = require('./metrics');
-const progress = require('./progress');
+} from './utils';
+import Storage from './storage';
+import * as metrics from './metrics';
+import * as progress from './progress';
+import $ from 'jquery';
 
-const $ = require('jquery');
+const storage = new Storage(localStorage);
 
 const allowedCopy = () => {
   const support = !!document.queryCommandSupported;

frontend/src/utils.js

@@ -131,7 +131,7 @@ function percent(ratio) {
 
 const ONE_DAY_IN_MS = 86400000;
 
-module.exports = {
+export {
   bytes,
   percent,
   copyToClipboard,

package-lock.json

@@ -551,12 +551,6 @@
         "babel-runtime": "6.25.0"
       }
     },
-    "babel-plugin-add-module-exports": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/babel-plugin-add-module-exports/-/babel-plugin-add-module-exports-0.2.1.tgz",
-      "integrity": "sha1-mumh9KjcZ/DN7E9K7aHkOl/2XiU=",
-      "dev": true
-    },
     "babel-plugin-check-es2015-constants": {
       "version": "6.22.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-check-es2015-constants/-/babel-plugin-check-es2015-constants-6.22.0.tgz",

package.json

@@ -20,7 +20,6 @@
     "autoprefixer": "^7.1.2",
     "babel-core": "^6.25.0",
     "babel-loader": "^7.1.1",
-    "babel-plugin-add-module-exports": "^0.2.1",
     "babel-polyfill": "^6.23.0",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-stage-2": "^6.24.1",

server/server.js

@@ -44,9 +44,11 @@ if (conf.env === 'development') {
   const config = require('../webpack.config.js');
   config.devtool = 'inline-source-map';
   const compiler = webpack(config);
-  app.use(webpackDevMiddleware(compiler, {
+  app.use(
+    webpackDevMiddleware(compiler, {
       publicPath: config.output.publicPath
-  }));
+    })
+  );
 }
 
 app.engine(

webpack.config.js

@@ -21,8 +21,7 @@ module.exports = {
         ],
         query: {
           babelrc: false,
-          presets: ['es2015', 'stage-2'],
-          plugins: ['add-module-exports']
+          presets: [['es2015', { modules: false }], 'stage-2']
         }
       }
     ]