From ddb5fe5c317050b5df119ad2febc26f7145a3044 Mon Sep 17 00:00:00 2001 From: Dima Gerasimov Date: Fri, 23 Dec 2022 21:27:08 +0000 Subject: [PATCH] extension: update webpack/babel/eslint/flow mostly borrowed version from promnesia for now --- .github/workflows/main.yml | 2 +- extension/.babelrc | 3 --- extension/.eslintrc.js | 14 +++++++------- extension/babel.config.js | 15 +++++++++++++++ extension/package.json | 34 +++++++++++++++++----------------- extension/src/js/popup.js | 8 ++++---- extension/webpack.config.js | 23 ++++++++++++----------- 7 files changed, 56 insertions(+), 43 deletions(-) delete mode 100644 extension/.babelrc create mode 100644 extension/babel.config.js diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index 61a68d4..22e90af 100644 --- a/.github/workflows/main.yml +++ b/.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: diff --git a/extension/.babelrc b/extension/.babelrc deleted file mode 100644 index 844b18f..0000000 --- a/extension/.babelrc +++ /dev/null @@ -1,3 +0,0 @@ -{ - "presets": ["@babel/preset-env", "@babel/preset-flow"] -} diff --git a/extension/.eslintrc.js b/extension/.eslintrc.js index 42f2c35..987c768 100644 --- a/extension/.eslintrc.js +++ b/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", -// ], -//}; diff --git a/extension/babel.config.js b/extension/babel.config.js new file mode 100644 index 0000000..a764417 --- /dev/null +++ b/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 } diff --git a/extension/package.json b/extension/package.json index f2c3e76..faba5b7 100644 --- a/extension/package.json +++ b/extension/package.json @@ -26,19 +26,19 @@ }, "homepage": "https://github.com/karlicoss/grasp#readme", "devDependencies": { - "@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", - "css-loader": "^2.1.0", - "eslint": "^5.12.0", - "eslint-config-google": "^0.11.0", - "eslint-plugin-flowtype": "^3.2.0", - "flow-bin": "^0.89.0", - "flow-interfaces-chrome": "^0.5.3", + "@babel/core": "^7.16.0", + "@babel/eslint-parser": "^7.16.3", + "@babel/preset-env": "^7.16.4", + "@babel/preset-flow": "^7.16.0", + "babel-loader": "^8.2.3", + "chrome-webstore-upload-cli": "^2.1.0", + "clean-webpack-plugin": "^4.0.0", + "copy-webpack-plugin": "^10.0.0", + "css-loader": "^6.5.1", + "eslint": "^8.15.0", + "eslint-plugin-flowtype": "^8.0.3", + "flow-bin": "^0.133.0", + "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-cli": "^3.2.0", - "webpack-dev-server": "^3.1.14", - "webpack-extension-manifest-plugin": "^0.4.3" + "webpack": "^5.75.0", + "webpack-cli": "^5.0.1", + "webpack-dev-server": "^4.11.1", + "webpack-extension-manifest-plugin": "^0.8.0" }, "private": "true" } diff --git a/extension/src/js/popup.js b/extension/src/js/popup.js index fd3466c..bbe4b1f 100644 --- a/extension/src/js/popup.js +++ b/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 -function ctrlEnterSubmit(e) { +// todo not sure if can define const here?? +var ctrlEnterSubmit: KeyboardEventListener = (e) => { if (e.ctrlKey && e.key === 'Enter') { submitComment(); } diff --git a/extension/webpack.config.js b/extension/webpack.config.js index 2446ece..47d0671 100644 --- a/extension/webpack.config.js +++ b/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$/, - loader: "style-loader!css-loader", // TODO different from promnesia?? - exclude: /node_modules/ + test: /\.css$/i, + use: ['style-loader', 'css-loader'], }, { test: /\.html$/, @@ -126,11 +124,13 @@ const options = { ] }, plugins: [ - new CleanWebpackPlugin([buildPath + "/*"]), - new CopyWebpackPlugin([ - { from: 'src/img/*.png', flatten: true }, - { from: 'src/*.html' , flatten: true }, - ]), + new CleanWebpackPlugin(), // ok, respects symlinks + new CopyWebpackPlugin({ + patterns: [ + { 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;