Update dependencies and workflow

Closes #316, #315

.eslintrc

@@ -1,18 +1,17 @@
 {
-    "parser": "babel-eslint",
     "extends": [
-        "eslint:recommended",
-        "simon"
+        "eslint:recommended"
     ],
     "env": {
         "browser": true
     },
     "parserOptions": {
-        "ecmaVersion": 2018,
+        "ecmaVersion": 2022,
         "sourceType": "module"
     },
     "rules": {
-        "new-cap": "off"
+        "new-cap": "off",
+        "no-cond-assign": "off"
     },
     "globals": {
         "VERSION": true

.github/workflows/ci.yml

@@ -6,12 +6,12 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
 
-      - name: Use Node.js 14.x
-        uses: actions/setup-node@v1
+      - name: Use Node.js 18
+        uses: actions/setup-node@v3
         with:
-          node-version: 14.x
+          node-version: 18
 
       - name: Install
         run: npm ci

package.json

@@ -6,6 +6,7 @@
     "description": "Flat, Simple, Hackable Color-Picker.",
     "keywords": [
         "ux",
+        "pickr",
         "color",
         "color-picker"
     ],
@@ -14,33 +15,9 @@
     "scripts": {
         "build": "node ./scripts/build.js",
         "dev": "webpack serve --mode development",
-        "lint": "eslint ./src",
-        "lint:fix": "eslint ./src --fix",
-        "dryrun": "npm run lint:fix && npm run build"
-    },
-    "devDependencies": {
-        "@babel/core": "^7.14.6",
-        "@babel/plugin-proposal-class-properties": "^7.14.5",
-        "@babel/plugin-proposal-object-rest-spread": "^7.14.7",
-        "@babel/plugin-transform-parameters": "^7.14.5",
-        "@babel/preset-env": "^7.14.7",
-        "autoprefixer": "^10.2.6",
-        "babel-eslint": "^10.1.0",
-        "babel-loader": "^8.2.2",
-        "css-loader": "^5.2.6",
-        "eslint": "^7.29.0",
-        "eslint-config-simon": "^2.1.0",
-        "eslint-loader": "^4.0.2",
-        "mini-css-extract-plugin": "^1.6.1",
-        "node-sass": "^6.0.1",
-        "postcss-loader": "^6.1.0",
-        "sass-loader": "^12.1.0",
-        "terser-webpack-plugin": "^5.1.4",
-        "webpack": "^5.40.0",
-        "webpack-cleanup-plugin": "^0.5.1",
-        "webpack-cli": "^4.7.2",
-        "webpack-dev-server": "^4.0.0-beta.3",
-        "webpack-fix-style-only-entries": "^0.6.1"
+        "lint": "eslint ./src/**/*.js",
+        "lint:fix": "npm run lint -- --fix",
+        "test:ci": "npm run lint:fix && npm run build"
     },
     "homepage": "https://github.com/Simonwep/pickr#readme",
     "repository": {
@@ -50,8 +27,27 @@
     "bugs": {
         "url": "https://github.com/Simonwep/pickr/issues"
     },
+    "devDependencies": {
+        "@babel/core": "7.23.0",
+        "@babel/preset-env": "7.22.20",
+        "autoprefixer": "10.4.16",
+        "babel-loader": "9.1.3",
+        "css-loader": "6.8.1",
+        "eslint": "8.50.0",
+        "eslint-webpack-plugin": "4.0.1",
+        "mini-css-extract-plugin": "2.7.6",
+        "node-sass": "9.0.0",
+        "postcss-loader": "7.3.3",
+        "sass": "1.68.0",
+        "sass-loader": "13.3.2",
+        "terser-webpack-plugin": "5.3.9",
+        "webpack": "5.88.2",
+        "webpack-cli": "5.1.4",
+        "webpack-dev-server": "4.15.1",
+        "webpack-remove-empty-scripts": "1.0.4"
+    },
     "dependencies": {
-        "core-js": "^3.15.1",
-        "nanopop": "^2.1.0"
+        "core-js": "3.32.2",
+        "nanopop": "2.3.0"
     }
 }

scripts/build.js

@@ -1,4 +1,4 @@
-const FixStyleOnlyEntriesPlugin = require('webpack-fix-style-only-entries');
+const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 const {version} = require('../package');
@@ -11,6 +11,7 @@ const path = require('path');
     const banner = new webpack.BannerPlugin(`Pickr ${version} MIT | https://github.com/Simonwep/pickr`);
 
     // CSS
+    console.log('Bundle themes');
     await webpack({
         mode: 'production',
         entry: {
@@ -48,7 +49,7 @@ const path = require('path');
 
         plugins: [
             banner,
-            new FixStyleOnlyEntriesPlugin(),
+            new RemoveEmptyScriptsPlugin(),
             new MiniCssExtractPlugin({
                 filename: '[name].min.css'
             })
@@ -59,7 +60,7 @@ const path = require('path');
     // writing a minified CSS file; both processes having handles on the files can
     // result in strange suffixes that fail to parse due to an extra `ap*/`
     for (const {filename, babelConfig} of bundles) {
-        console.log(`Create ${filename}`);
+        console.log(`Bundle ${filename}`);
 
         await webpack({
             mode: 'production',
@@ -111,6 +112,4 @@ const path = require('path');
             }
         });
     }
-
-    console.log('Done');
 })();

scripts/bundles.js

@@ -3,11 +3,6 @@ module.exports = [
         'filename': 'pickr.es5.min.js',
         'babelConfig': {
             'babelrc': false,
-            'plugins': [
-                '@babel/plugin-proposal-object-rest-spread',
-                '@babel/plugin-proposal-class-properties',
-                '@babel/plugin-transform-parameters'
-            ],
             'presets': [
                 [
                     '@babel/preset-env',
@@ -25,9 +20,6 @@ module.exports = [
         'filename': 'pickr.min.js',
         'babelConfig': {
             'babelrc': false,
-            'plugins': [
-                '@babel/plugin-proposal-class-properties'
-            ],
             'presets': [
                 [
                     '@babel/preset-env',

webpack.config.js

@@ -1,4 +1,5 @@
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const ESLintPlugin = require('eslint-webpack-plugin');
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const {version} = require('./package.json');
 const webpack = require('webpack');
 
@@ -28,10 +29,6 @@ module.exports = {
 
     module: {
         rules: [
-            {
-                test: /\.js$/,
-                use: 'babel-loader'
-            },
             {
                 test: /\.scss$/,
                 use: [
@@ -44,6 +41,7 @@ module.exports = {
     },
 
     plugins: [
+        new ESLintPlugin(),
         new MiniCssExtractPlugin({
             filename: '[name].css'
         }),