extension: update webpack/babel/eslint/flow

mostly borrowed version from promnesia for now

.github/workflows/main.yml

@@ -70,7 +70,7 @@ jobs:
     # TODO for fuck's sake... why does it end up named as .zip.zip ????
     - uses: actions/upload-artifact@v2
       with:
-        name: '${ env.name }}-chrome-debug-latest.zip'
+        name: '${{ env.name }}-chrome-debug-latest.zip'
         path: 'extension/dist/artifacts/chrome/${{ env.name }}_dev_-*.zip'
     - uses: actions/upload-artifact@v2
       with:

extension/.babelrc

@@ -1,3 +0,0 @@
-{
-  "presets": ["@babel/preset-env", "@babel/preset-flow"]
-}

extension/.eslintrc.js

@@ -1,5 +1,5 @@
 module.exports = {
-    "parser": "babel-eslint",
+    "parser": "@babel/eslint-parser",
     "plugins": [
         "flowtype"
     ],
@@ -27,12 +27,12 @@ module.exports = {
         "indent": "off",
         "comma-dangle": "off",
         "no-console": "off",
+        "no-inner-declarations": "off",
+        "flowtype/space-before-type-colon": "off",
+        "no-unused-vars": ["error", {
+            "argsIgnorePattern": "^_",
+            "varsIgnorePattern": "^_"
+        }],
     }
     // TODO use flow?
 };
-//module.exports = {
-//    // "extends": "google",
-//    'extends': [
-//        "plugin:react/recommended",
-//    ],
-//};

extension/babel.config.js

@@ -0,0 +1,15 @@
+const presets = [
+    [
+        '@babel/preset-env',
+        // https://caniuse.com/usage-table
+        {targets: {chrome: 75, firefox: 75}}
+    ],
+    '@babel/preset-flow',
+]
+const plugins = []
+
+// if (process.env["ENV"] === "prod") {
+//   plugins.push(...);
+// }
+
+module.exports = { presets, plugins }

extension/package.json

@@ -26,19 +26,19 @@
   },
   "homepage": "https://github.com/karlicoss/grasp#readme",
   "devDependencies": {
-    "@babel/core": "^7.2.2",
+    "@babel/core": "^7.16.0",
-    "@babel/preset-env": "^7.2.3",
+    "@babel/eslint-parser": "^7.16.3",
-    "@babel/preset-flow": "^7.0.0",
+    "@babel/preset-env": "^7.16.4",
-    "babel-loader": "^8.0.5",
+    "@babel/preset-flow": "^7.16.0",
-    "babel-eslint": "^10.0.1",
+    "babel-loader": "^8.2.3",
-    "clean-webpack-plugin": "^1.0.0",
+    "chrome-webstore-upload-cli": "^2.1.0",
-    "copy-webpack-plugin": "^4.2.0",
+    "clean-webpack-plugin": "^4.0.0",
-    "css-loader": "^2.1.0",
+    "copy-webpack-plugin": "^10.0.0",
-    "eslint": "^5.12.0",
+    "css-loader": "^6.5.1",
-    "eslint-config-google": "^0.11.0",
+    "eslint": "^8.15.0",
-    "eslint-plugin-flowtype": "^3.2.0",
+    "eslint-plugin-flowtype": "^8.0.3",
-    "flow-bin": "^0.89.0",
+    "flow-bin": "^0.133.0",
-    "flow-interfaces-chrome": "^0.5.3",
+    "flow-interfaces-chrome": "^0.6.0",
     "jest": "^28.1.0",
     "jest-environment-jsdom": "^28.1.0",
     "jest-fetch-mock": "^3.0.3",
@@ -46,10 +46,10 @@
     "style-loader": "^1.0.0",
     "web-ext": "^6.8.0",
     "web-ext-submit": "^6.8.0",
-    "webpack": "^4.28.3",
+    "webpack": "^5.75.0",
-    "webpack-cli": "^3.2.0",
+    "webpack-cli": "^5.0.1",
-    "webpack-dev-server": "^3.1.14",
+    "webpack-dev-server": "^4.11.1",
-    "webpack-extension-manifest-plugin": "^0.4.3"
+    "webpack-extension-manifest-plugin": "^0.8.0"
   },
   "private": "true"
 }

extension/src/js/popup.js

@@ -9,10 +9,10 @@ const COMMENT_ID = 'comment_id';
 const TAGS_ID = 'tags_id';
 
 
-type State = {
+type State = {|
     comment: string,
     tag_str: string,
-};
+|};
 
 
 function save_state(state: ?State) {
@@ -72,8 +72,8 @@ function submitComment () {
     window.close();
 }
 
-// $FlowFixMe
+// todo not sure if can define const here??
-function ctrlEnterSubmit(e) {
+var ctrlEnterSubmit: KeyboardEventListener = (e) => {
     if (e.ctrlKey && e.key === 'Enter') {
         submitComment();
     }

extension/webpack.config.js

@@ -1,9 +1,8 @@
 const webpack = require('webpack'),
       path = require('path'),
-      CleanWebpackPlugin = require('clean-webpack-plugin'),
+      {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',
@@ -114,9 +113,8 @@ const options = {
         }
       },
       {
-        test: /\.css$/,
+          test: /\.css$/i,
-        loader: "style-loader!css-loader", // TODO different from promnesia??
+          use: ['style-loader', 'css-loader'],
-        exclude: /node_modules/
       },
       {
         test: /\.html$/,
@@ -126,11 +124,13 @@ const options = {
     ]
   },
   plugins: [
-    new CleanWebpackPlugin([buildPath + "/*"]),
+    new CleanWebpackPlugin(), // ok, respects symlinks
-    new CopyWebpackPlugin([
+    new CopyWebpackPlugin({
-        { from: 'src/img/*.png', flatten: true },
+      patterns: [
-        { from: 'src/*.html'   , flatten: true },
+        { from: 'src/*.html'   , to: '[name][ext]'},
-    ]),
+        { from: 'src/img/*.png', to: '[name][ext]'},
+      ]
+    }),
     new WebpackExtensionManifestPlugin({
         config: {
             base: baseManifest,
@@ -142,7 +142,8 @@ const options = {
 
 // TODO https://webpack.js.org/configuration/devtool
 if (dev) {
-  options.devtool = "cheap-module-eval-source-map";
+  // ??? don't remember what it was for, but webpack complains about it now
+  // options.devtool = "cheap-module-eval-source-map";
 }
 
 module.exports = options;