Update packages

package.json

@@ -16,23 +16,24 @@
     "author": "",
     "license": "ISC",
     "devDependencies": {
-        "babel-core": "^6.25.0",
-        "babel-loader": "^7.1.1",
-        "babel-preset-env": "^1.6.0",
-        "babel-preset-react": "^6.24.1",
-        "babel-preset-stage-2": "^6.24.1",
-        "cross-env": "^5.1.4",
-        "flow-bin": "^0.85.0",
-        "flow-interfaces-chrome": "^0.4.0",
+        "@babel/core": "^7.2.2",
+        "@babel/plugin-proposal-class-properties": "^7.2.3",
+        "@babel/preset-env": "^7.2.3",
+        "@babel/preset-flow": "^7.0.0",
+        "@babel/preset-react": "^7.0.0",
+        "babel-loader": "^8.0.5",
+        "cross-env": "^5.2.0",
+        "flow-bin": "^0.91.0",
+        "flow-interfaces-chrome": "^0.5.3",
         "flow-typed": "^2.5.1",
         "lz-string": "^1.4.4",
-        "react": "^16.6.0",
-        "react-dom": "^16.6.0",
-        "react-redux": "^5.0.6",
-        "redux": "^3.7.2",
-        "remove-flow-types-loader": "^1.1.0",
-        "uglify-js": "^3.1.5",
-        "updeep": "^1.0.0",
-        "webpack": "^3.5.2"
+        "react": "^16.7.0",
+        "react-dom": "^16.7.0",
+        "react-redux": "^6.0.0",
+        "redux": "^4.0.1",
+        "terser-webpack-plugin": "^1.2.1",
+        "updeep": "^1.1.0",
+        "webpack": "^4.28.4",
+        "webpack-cli": "^3.2.1"
     }
 }

src/background/scripts/backup.js

@@ -64,22 +64,22 @@ function saveBackup(script: Script, resolve: Function): void {
 }
 
 function restoreBackup(script: Script, resolve: Function): void {
-  chrome.storage.sync.get(['backupDate', 'backupSize'], data => {
+  chrome.storage.sync.get((['backupDate', 'backupSize']: string[]), data => {
     if (isError(script, 'Backup restore failed!')) {
       resolve();
       return;
     }
 
     const backupDate: number = data.backupDate;
     if (backupDate == null) {
-      script.output("No backup saved");
+      script.output('No backup saved');
       resolve();
       return;
     }
 
     const backupSize: number = data.backupSize;
     if (backupSize == null) {
-      script.output("Missing backup data");
+      script.output('Missing backup data');
       resolve();
       return;
     }
@@ -109,11 +109,7 @@ function restoreBackup(script: Script, resolve: Function): void {
   });
 }
 
-export default function backup(
-  script: Script,
-  params: Array<string>,
-  resolve: Function
-) {
+export default function backup(script: Script, params: Array<string>, resolve: Function) {
   if (params.length === 0) {
     chrome.storage.sync.get('backupDate', data => {
       if (!isError(script, 'Backup list failed!')) {

src/background/storage.js

@@ -1,59 +1,51 @@
 /* @flow strict */
 
+import u from 'updeep';
 import setupFile from 'background/setup';
 import { createDirectory, createFile, createWorkspace } from 'creators';
 
 import type { StorageState, StoreState } from 'types';
 
 // INITIAL STATE
 const id = Date.now();
-const defaultStateObject: StorageState = {
-    [Constants.STATE_KEY]: {
-        loaded: false,
-        workspaces: [createWorkspace(id)],
-        wfs: createDirectory('~', [
-            createFile('Welcome', 'Welcome to MercuryWM! Type `setup` to get started!\n'),
-            createDirectory('.bin', [createFile('setup', setupFile)])
-        ]),
-        wsh: {
-            // environmental variables
-            env: {
-                background: '#555',
-                title: '',
-                prompt: '%w $ ',
-                username: Constants.NAME
-            }
-        },
-        selectedWindow: id,
-        selectedWorkspace: 0
+export const initialState = {
+  loaded: false,
+  workspaces: [createWorkspace(id)],
+  wfs: createDirectory('~', [
+    createFile('Welcome', 'Welcome to MercuryWM! Type `setup` to get started!\n'),
+    createDirectory('.bin', [createFile('setup', setupFile)])
+  ]),
+  wsh: {
+    // environmental variables
+    env: {
+      background: '#555',
+      title: '',
+      prompt: '%w $ ',
+      username: Constants.NAME
     }
+  },
+  selectedWindow: id,
+  selectedWorkspace: 0
+};
+const defaultStateObject: StorageState = {
+  [Constants.STATE_KEY]: initialState
 };
 
-function load(callback: StoreState => void) {
-    chrome.storage.local.get(defaultStateObject, (data: StorageState) => {
-        callback(data[Constants.STATE_KEY]);
-    });
+export function load(callback: StoreState => void) {
+  chrome.storage.local.get(defaultStateObject, (data: StorageState) => {
+    callback(data[Constants.STATE_KEY]);
+  });
 }
 
-function clear() {
-    // Need to deep copy default state
-    const newState = {
-        ...JSON.parse(JSON.stringify(defaultStateObject[Constants.STATE_KEY])),
-        loaded: true
-    };
-    chrome.storage.local.set({ [Constants.STATE_KEY]: newState });
-    return newState;
+export function clear() {
+  // Need to deep copy default state
+  const newState = u({ loaded: true }, initialState);
+  chrome.storage.local.set({ [Constants.STATE_KEY]: newState });
+  return newState;
 }
 
-function save(state: StoreState) {
-    if (state.loaded) {
-        chrome.storage.local.set({ [Constants.STATE_KEY]: state });
-    }
+export function save(state: StoreState) {
+  if (state.loaded) {
+    chrome.storage.local.set({ [Constants.STATE_KEY]: state });
+  }
 }
-
-module.exports = {
-    clear,
-    load,
-    save,
-    initialState: defaultStateObject[Constants.STATE_KEY]
-};

src/background/store.js

@@ -1,7 +1,7 @@
 /* @flow strict */
 
 import { createStore } from 'redux';
-import Storage from 'background/storage';
+import * as Storage from 'background/storage';
 import reducers from 'background/reducers';
 
 import type { Store } from 'types';

src/mercury/components/scroll.jsx

@@ -11,7 +11,7 @@ type Props = {|
 
 class SmoothScroll extends React.Component<Props> {
   animation: ?AnimationFrameID;
-  input = React.createRef();
+  input = React.createRef<HTMLDivElement>();
 
   componentDidMount() {
     const box = this.input.current;
@@ -89,9 +89,7 @@ class SmoothScroll extends React.Component<Props> {
 
       // Continue scrolling
       const timeStep = deltaTime / duration;
-      const newTop =
-        animationStart +
-        interpolator(timeStep) * (animationEnd - animationStart);
+      const newTop = animationStart + interpolator(timeStep) * (animationEnd - animationStart);
       if (box) box.scrollTop = newTop;
 
       this.animation = requestAnimationFrame(animate);

webpack.config.js

@@ -1,5 +1,6 @@
 const path = require('path');
 const webpack = require('webpack');
+const TerserPlugin = require('terser-webpack-plugin');
 
 const Constants = require('./src/constants.js');
 
@@ -8,87 +9,84 @@ const Constants = require('./src/constants.js');
 // so flow will understand it.
 
 const config = {
-    entry: {
-        main: './src/mercury/index.jsx',
-        background: './src/background/index.js',
-        render: './src/render/index.js'
-    },
-    output: {
-        path: path.resolve(__dirname, 'build'),
-        filename: '[name].js'
-    },
-    module: {
-        loaders: [
-            {
-                test: /\.jsx?$/,
-                loader: 'babel-loader',
-                exclude: /node_modules/,
-                query: {
-                    presets: [
-                        [
-                            'env',
-                            {
-                                targets: {
-                                    browser: 'last 2 versions'
-                                }
-                            }
-                        ],
-                        'react',
-                        'stage-2'
-                    ]
+  entry: {
+    main: './src/mercury/index.jsx',
+    background: './src/background/index.js',
+    render: './src/render/index.js'
+  },
+  output: {
+    path: path.resolve(__dirname, 'build'),
+    filename: '[name].js'
+  },
+  module: {
+    rules: [
+      {
+        test: /\.jsx?$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: [
+              [
+                '@babel/preset-env',
+                {
+                  targets: '>1%, not ie 11, not op_mini all'
                 }
-            },
-            {
-                test: /\.jsx?$/,
-                enforce: 'pre',
-                loader: 'remove-flow-types-loader',
-                include: path.join(__dirname, 'src')
-            }
-        ]
-    },
-    plugins: [
-        new webpack.DefinePlugin(
-            Object.keys(Constants).reduce(
-                (acc, key) => Object.assign(acc,
-                    {
-                        ['Constants.' + key]: JSON.stringify(Constants[key])
-                    }
-                ),
-                {}
-            )
-        ),
-        new webpack.DefinePlugin({
-            PRODUCTION: JSON.stringify(process.env.NODE_ENV === 'production')
-        })
-    ],
-    stats: {
-        colors: true
-    },
-    resolve: {
-        modules: [path.resolve('./node_modules'), path.resolve('./src')]
-    }
+              ],
+              '@babel/preset-react',
+              '@babel/preset-flow'
+            ],
+            plugins: ['@babel/plugin-proposal-class-properties']
+          }
+        }
+      }
+    ]
+  },
+  plugins: [
+    new webpack.DefinePlugin(
+      Object.keys(Constants).reduce(
+        (acc, key) =>
+          Object.assign(acc, {
+            ['Constants.' + key]: JSON.stringify(Constants[key])
+          }),
+        {}
+      )
+    ),
+    new webpack.DefinePlugin({
+      PRODUCTION: JSON.stringify(process.env.NODE_ENV === 'production')
+    })
+  ],
+  stats: {
+    colors: true
+  },
+  resolve: {
+    modules: [path.resolve('./node_modules'), path.resolve('./src')]
+  }
 };
 
 if (process.env.NODE_ENV === 'production') {
-    config.plugins.push(
-        new webpack.optimize.UglifyJsPlugin({
-            comments: false,
-            compress: {
-                warnings: false,
-                drop_console: true
-            }
-        }),
-        new webpack.DefinePlugin({
-            'process.env.NODE_ENV': JSON.stringify('production')
-        })
-    );
+  config.mode = 'production';
+  config.optimization = {
+    minimizer: [
+      new TerserPlugin({
+        cache: true,
+        parallel: true,
+        terserOptions: {
+          compress: {
+            drop_console: true
+          }
+        }
+      })
+    ]
+  };
 } else {
-    config.devtool = '#cheap-module-source-map';
-    config.plugins.push(
-        new webpack.DefinePlugin({
-            'process.env.UPDEEP_MODE': JSON.stringify('dangerously_never_freeze')
-        })
-    );
+  config.mode = 'development';
+  config.devtool = '#cheap-module-source-map';
+  config.plugins.push(
+    new webpack.DefinePlugin({
+      'process.env.UPDEEP_MODE': JSON.stringify('dangerously_never_freeze')
+    })
+  );
 }
 
 module.exports = config;