Merge pull request #29 from karlicoss/cleanup-webpack

Cleanup webpack
2020-02-14 23:30:12 +00:00 · 2020-02-14 23:30:12 +00:00 · af24c99157
parent 7b637563b5 8f827fadbf
commit af24c99157
12 changed files with 69 additions and 157 deletions
--- a/15
+++ b/15
@ -5,12 +5,11 @@ from subprocess import check_call
 from pathlib import Path


-TARGETS = ['chrome', 'firefox']
 # TODO FIXME copypaste from promnesia
 # TODO FIXME use it in ci script
+TARGETS = ['chrome', 'firefox']
 def main():
    p = argparse.ArgumentParser()
-    # TODO rename to --production??
    p.add_argument('--release', action='store_true')
    p.add_argument('--sign', action='store_true')
    p.add_argument('--lint', action='store_true')
@ -22,6 +21,7 @@ def main():
    args = p.parse_args()
    target = args.target

+    assert target is not None

    dist_dir = Path(__file__).absolute().parent / 'dist'
    def webext(*args, **kwargs):
@ -33,10 +33,9 @@ def main():
            *args,
        ], **kwargs)

-    maybe_release = {'NODE_ENV': 'production'} if args.release else {}
    env = {
        'TARGET': target,
-        **maybe_release,
+        'RELEASE': 'YES' if args.release else 'NO',
        **os.environ,
    }
    check_call([
@ -56,11 +55,12 @@ def main():
        if target not in ['firefox', 'firefox-mobile']:
            raise RuntimeError("{target} is not supported for signing yet".format(target=target))

+        dist_dir = Path(__file__).absolute().parent / 'dist'
+        src_dir = dist_dir / target

        from firefox_dev_secrets import API_KEY, API_SECRET
        webext(
-            # TODO use UUID? https://addons.mozilla.org/en-GB/developers/addon/grasp/edit
-            # TODO right, wouldn't work because it's listed..
+            '--source-dir'   , str(src_dir),
            '--artifacts-dir', str(dist_dir),
            '--api-key'   , API_KEY,
            '--api-secret', API_SECRET,
@ -69,3 +69,6 @@ def main():

 if __name__ == '__main__':
    main()
+
+# TODO use UUID? https://addons.mozilla.org/en-GB/developers/addon/grasp/edit
+# TODO right, wouldn't work because it's listed..
--- a/package.json
+++ b/package.json
@ -1,7 +1,8 @@
 {
-  "name": "grasp-extension",
+  "name": "grasp",
  "version": "0.6.6",
  "description": "Reliably capture links and webpage content in a plaintext file (org-mode/markdown)",
+  "main": "dist/background.js",
  "scripts": {
    "build": "webpack --progress --profile --colors",
    "watch": "webpack --watch --progress --colors",
@ -13,6 +14,7 @@
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.2.3",
    "@babel/preset-flow": "^7.0.0",
+    "babel-loader": "^8.0.5",
    "babel-eslint": "^10.0.1",
    "clean-webpack-plugin": "^1.0.0",
    "copy-webpack-plugin": "^4.2.0",
@ -20,20 +22,12 @@
    "eslint": "^5.12.0",
    "eslint-config-google": "^0.11.0",
    "eslint-plugin-flowtype": "^3.2.0",
-    "file-loader": "^3.0.1",
    "flow-bin": "^0.89.0",
    "flow-interfaces-chrome": "^0.5.3",
-    "fs-extra": "^7.0.1",
-    "html-loader": "^0.5.5",
-    "html-webpack-plugin": "^3.2.0",
-    "style-loader": "^0.23.1",
+    "style-loader": "^1.0.0",
    "webpack": "^4.28.3",
    "webpack-cli": "^3.2.0",
    "webpack-dev-server": "^3.1.14",
-    "webpack-extension-manifest-plugin": "^0.4.3",
-    "write-file-webpack-plugin": "^4.5.0"
-  },
-  "dependencies": {
-    "babel-loader": "^8.0.5"
+    "webpack-extension-manifest-plugin": "^0.4.3"
  }
 }
--- a/server/test_with_browser.py
+++ b/server/test_with_browser.py
@ -31,6 +31,7 @@ def get_webdriver():
            driver.install_addon(str(addon_path), temporary=True)
            yield driver
        finally:
+            # confirm('ready to continue?')
            driver.close()


--- a/src/background.html
+++ b/src/background.html
@ -1,9 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <title></title>
-</head>
-<body>
-</body>
-</html>
--- a/src/js/options_page.js
+++ b/src/js/options_page.js
@ -47,6 +47,7 @@ function refreshPermissionValidation(endpoint: string) {
 }

 function restoreOptions() {
+    getSaveButton().addEventListener('click', saveOptions);
    get_options(opts => {
        const ep = opts.endpoint;
        getEndpoint().value = ep;
@ -74,4 +75,3 @@ function saveOptions() {


 document.addEventListener('DOMContentLoaded', restoreOptions);
-getSaveButton().addEventListener('click', saveOptions);
--- a/src/manifest.json
+++ b/src/manifest.json
@ -1,14 +1,13 @@
 {
-  "icons": {
-      "128": "unicorn.png"
+  "name": "<webpack managed>",
+  "version": "<webpack managed>",
+  "background": {
+      "scripts": ["background.js"],
+      "persistent": false
  },
  "options_ui": {
      "page": "options.html"
  },
-
-  "background": {
-    "page": "background.html"
-  },
  "browser_action": {
      "default_icon": "unicorn.png",
      "default_popup": "popup.html",
@ -22,5 +21,8 @@
      "description": "Capture page, with extra information"
    }
  },
+  "icons": {
+      "128": "unicorn.png"
+  },
  "manifest_version": 2
 }
--- a/src/options.html
+++ b/src/options.html
@ -2,7 +2,7 @@
 <html lang="en">
 <head>
  <meta charset="UTF-8">
-  <title></title>
+  <script type="text/javascript" src="options_page.js"/></script>
  <style>
   input:invalid {
       background-color: red;
--- a/src/popup.html
+++ b/src/popup.html
@ -2,6 +2,7 @@
 <html lang="en">
 <head>
  <meta charset="UTF-8">
+  <script type="text/javascript" src="popup.js"></script>
 </head>
 <body>
    <!-- TODO ugh didn't work -->
--- a/utils/build.js
+++ b/utils/build.js
@ -1,9 +0,0 @@
-var webpack = require("webpack"),
-    config = require("../webpack.config");
-
-delete config.chromeExtensionBoilerplate;
-
-webpack(
-  config,
-  function (err) { if (err) throw err; }
-);
--- a/utils/env.js
+++ b/utils/env.js
@ -1,6 +0,0 @@
-// tiny wrapper with default env vars
-module.exports = {
-    NODE_ENV: (process.env.NODE_ENV || "development"),
-    PORT: (process.env.PORT || 3000),
-    TARGET: (process.env.TARGET || 'chrome'),
-};
--- a/utils/webserver.js
+++ b/utils/webserver.js
@ -1,34 +0,0 @@
-var WebpackDevServer = require("webpack-dev-server"),
-    webpack = require("webpack"),
-    config = require("../webpack.config"),
-    env = require("./env"),
-    path = require("path");
-
-var options = (config.chromeExtensionBoilerplate || {});
-var excludeEntriesToHotReload = (options.notHotReload || []);
-
-for (var entryName in config.entry) {
-  if (excludeEntriesToHotReload.indexOf(entryName) === -1) {
-    config.entry[entryName] =
-      [
-        ("webpack-dev-server/client?http://localhost:" + env.PORT),
-        "webpack/hot/dev-server"
-      ].concat(config.entry[entryName]);
-  }
-}
-
-config.plugins =
-  [new webpack.HotModuleReplacementPlugin()].concat(config.plugins || []);
-
-delete config.chromeExtensionBoilerplate;
-
-var compiler = webpack(config);
-
-var server =
-  new WebpackDevServer(compiler, {
-    hot: true,
-    contentBase: path.join(__dirname, "../build"),
-    headers: { "Access-Control-Allow-Origin": "*" }
-  });
-
-server.listen(env.PORT);
--- a/webpack.config.js
+++ b/webpack.config.js
@ -1,33 +1,32 @@
-var webpack = require("webpack"),
-    path = require("path"),
-    fileSystem = require("fs"),
-    env = require("./utils/env"),
-    CleanWebpackPlugin = require("clean-webpack-plugin"),
-    CopyWebpackPlugin = require("copy-webpack-plugin"),
-    HtmlWebpackPlugin = require("html-webpack-plugin"),
-    WriteFilePlugin = require("write-file-webpack-plugin"),
-    WebpackExtensionManifestPlugin = require("webpack-extension-manifest-plugin");
+const webpack = require('webpack'),
+      path = require('path'),
+      CleanWebpackPlugin = require('clean-webpack-plugin'),
+      CopyWebpackPlugin = require('copy-webpack-plugin'),
+      WebpackExtensionManifestPlugin = require('webpack-extension-manifest-plugin');
+// TODO remove plugins from package.json
+
+const T = {
+    CHROME  : 'chrome',
+    FIREFOX: 'firefox',
+};
+
+const env = {
+    TARGET : process.env.TARGET, // TODO assert not null?
+    RELEASE: process.env.RELEASE,
+};

 const pkg = require('./package.json');
 const baseManifest = require('./src/manifest.json');

+const release = env.RELEASE == 'YES' ? true : false;
+const dev = !release; // meh. maybe make up my mind?
 const target = env.TARGET;
-const dev = env.NODE_ENV === "development";

-const pkg_name = "grasp" + (dev ? ' [dev]' : '');
-
-// TODO make permissions literate
-const permissions = [
-    "storage",
-    "notifications",
-    "activeTab",
-    "http://localhost/capture",
-    "https://localhost/capture"
-];
+const name = "grasp" + (dev ? ' [dev]' : '');

 // Firefox wouldn't let you rebind its default shortcuts most of which use Shift
 // On the other hand, Chrome wouldn't let you use Alt
-const modifier = target === 'chrome' ? 'Shift' : 'Alt';
+const modifier = target === T.CHROME ? 'Shift' : 'Alt';

 // ugh. declarative formats are shit.
 const commandsExtra = {
@ -45,8 +44,18 @@ const commandsExtra = {
    },
 };

+// TODO make permissions literate
+const permissions = [
+    "storage",
+    "notifications",
+    "activeTab",
+    "http://localhost/capture",
+    "https://localhost/capture"
+];
+
+
 const manifestExtra = {
-    name: pkg_name,
+    name: name,
    version: pkg.version,
    description: pkg.description,
    permissions: permissions,
@ -61,43 +70,31 @@ if (dev) {
    manifestExtra.content_security_policy = "script-src 'self' 'unsafe-eval'; object-src 'self'";
 }

-if (target === 'chrome') {
+if (target === T.CHROME) {
    manifestExtra.options_ui = {chrome_style: true};
 }
-if (target === 'firefox') {
+if (target === T.FIREFOX) {
    manifestExtra.options_ui = {browser_style: true};
    manifestExtra.browser_action = {browser_style: true};
 }

-// load the secrets
-var alias = {};
-
-var secretsPath = path.join(__dirname, ("secrets." + env.NODE_ENV + ".js"));
-
-var fileExtensions = ["jpg", "jpeg", "png", "gif", "eot", "otf", "svg", "ttf", "woff", "woff2"];
-
-if (fileSystem.existsSync(secretsPath)) {
-  alias["secrets"] = secretsPath;
-}
-
 const build_path = path.join(__dirname, "dist"); // TODO target??

-var options = {
-  mode: 'production',
+const options = {
+  mode: dev ? 'development' : 'production', // TODO map directly from MODE env var?
  optimization: {
    // https://webpack.js.org/configuration/optimization
-    // don't thing minimize worth it for suck a tiny extension
+    // don't think minimize worth it for such a tiny extension
    minimize: false
  },
  entry: {
-    popup     : path.join(__dirname, "src", "js", "popup.js"),
-    options   : path.join(__dirname, "src", "js", "options_page.js"),
-    background: path.join(__dirname, "src", "js", "background.js")
+    background  : path.join(__dirname, "src", "js", "background"),
+    popup       : path.join(__dirname, "src", "js", "popup"),
+    options_page: path.join(__dirname, "src", "js", "options_page"),
  },
  output: {
      path: build_path,
-      // TODO why bundle???
-      filename: "[name].bundle.js",
+      filename: "[name].js",
  },
  module: {
    rules: [
@ -110,12 +107,7 @@ var options = {
      },
      {
        test: /\.css$/,
-        loader: "style-loader!css-loader",
-        exclude: /node_modules/
-      },
-      {
-        test: new RegExp('\.(' + fileExtensions.join('|') + ')$'),
-        loader: "file-loader?name=[name].[ext]",
+        loader: "style-loader!css-loader", // TODO different from promnesia??
        exclude: /node_modules/
      },
      {
@ -125,46 +117,23 @@ var options = {
      }
    ]
  },
-  resolve: {
-    alias: alias
-  },
  plugins: [
-    // clean the build folder
    new CleanWebpackPlugin([build_path + "/*"]),
    new CopyWebpackPlugin([
        { from: 'src/img/*.png', flatten: true },
+        { from: 'src/*.html'   , flatten: true },
    ]),
-    // expose and write the allowed env vars on the compiled bundle
-    new webpack.DefinePlugin({
-      "process.env.NODE_ENV": JSON.stringify(env.NODE_ENV)
-    }),
    new WebpackExtensionManifestPlugin({
        config: {
            base: baseManifest,
            extend: manifestExtra,
        }
    }),
-    new HtmlWebpackPlugin({
-      template: path.join(__dirname, "src", "popup.html"),
-      filename: "popup.html",
-        chunks: ["popup"],
-    }),
-    new HtmlWebpackPlugin({
-      template: path.join(__dirname, "src", "options.html"),
-      filename: "options.html",
-      chunks: ["options"]
-    }),
-    new HtmlWebpackPlugin({
-      template: path.join(__dirname, "src", "background.html"),
-      filename: "background.html",
-      chunks: ["background"]
-    }),
-    new WriteFilePlugin()
  ]
 };

 // TODO https://webpack.js.org/configuration/devtool
-if (env.NODE_ENV === "development") {
+if (dev) {
  options.devtool = "cheap-module-eval-source-map";
 }