Bump up to node 18 (#435)

* Bump up to node 18

* Fix warning: `Browserslist: caniuse-lite is outdated. `

* Force using particular node and npm versions.

* Update npm range.

.appveyor.yml

@@ -1,7 +1,7 @@
 version: "{build}"
 environment:
   matrix:
-    - nodejs_version: "16"
+    - nodejs_version: "18"
 cache:
   - "%LOCALAPPDATA%\\Yarn"
 init:

.npmrc

@@ -0,0 +1 @@
+engine-strict=true

.travis.yml

@@ -1,7 +1,7 @@
 language: node_js
 version: 1.0
 node_js:
-  - "16"
+  - "18"
 cache:
   yarn: true
   directories:
@@ -44,15 +44,15 @@ deploy:
     tag: latest
     on:
       tags: true
-      node: "16"
+      node: "18"
       condition: $TRAVIS_TAG =~ ^v[0-9]+\.[0-9]+\.[0-9]+$
   - provider: script
     edge: true
     cleanup: false
     script: "chmod +x ./tools/deploy.sh && ./tools/deploy.sh"
     on:
       all_branches: true
-      node: "16"
+      node: "18"
 notifications:
   slack:
     secure: CkwGMCqK7Liq81tnr7wMUJ893JW09caDeio5oOYQmjGwu3FBkwNU7zApRltN6NJ/a14Of97fHre0vMPga7BrNmhDH9ztvh6qafEmZXPYxiZSbOQ5JGYP3SlotIFF+z0WowCt6erXmNeRHzTBCoZKo4Sxd/2ZHLrkm3nVcCnugpIlyiFrhGnv+QIS2JbMVhai/0rYU1+CsIm6Lb/Kt4cpUgbdJGOsUizTZNKHxhgbnElFczaF0bUFbifkP7LRqdEXtsJPodLfPOezKM62BA6rBnlFGPrRKER1r3ZCHOHimAjyIWD6emUc331w2OmhXDuHGL4ZXq94joiHJVhfrnUsIzgewIxE0qKCMO7y4WcAdXCiwY+x1SoOUlUreJp6EkDI0IgiKOCfb8BnjSXV7VhqymGPjuvFvNzBxXyLjo9jceathGsKQ7usFjhVT1JBkmNYadVN8Y7PYEbyzOjWJol/f5Ol4B28pzypVMP3N6M0KKLJZ4gp6vFtobC72u7/7ThCfUfjDaPyf/yoUNmMQN6lLTRGvZnix+NU/DWVptbDrfAOm9+bBN7Z53Kdhfhpzjedr1Bb7Y+UuHSbNbQe0AvZdhzX3qCrneKDmlbIUvJfe1yzVh8981RedBFTXFcAb38wVfofnMrbZPaWw9k9L3fP1V52GYGjN6L2AX0VQZ3/arE=

demo/package.json

@@ -69,9 +69,9 @@
     "toastr": "^2.1.4",
     "typescript": "^4.5.3",
     "uglify-js": "^3.9.3",
-    "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.11",
-    "webpack-dev-server": "^3.11.0",
+    "webpack": "^5.88.2",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1",
     "yargs": "^15.3.0"
   },
   "browserslist": [

demo/tools/version.js → demo/tools/version.mjs

@@ -2,7 +2,8 @@
 
 import yargs from 'yargs'
 import { spawnSync } from 'child_process'
-import packageJson from '../package.json'
+import packageJson from '../package.json' assert { type: "json" }
+import { pathToFileURL } from 'url'
 
 const version = {
   base: packageJson.version,
@@ -34,7 +35,7 @@ version.copyright = `${packageJson.description} v${
   version.combined
 } Copyright (c) 2015-${new Date().getFullYear()} ${packageJson.author}`
 
-if (require.main === module) {
+if (import.meta.url === pathToFileURL(process.argv[1]).href) {
   process.stdout.write(version.copyright)
 }
 

demo/webpack.config.babel.js → demo/webpack.config.mjs

@@ -7,7 +7,11 @@ import HtmlWebpackPlugin from 'html-webpack-plugin'
 import ScriptExtHtmlWebpackPlugin from 'script-ext-html-webpack-plugin'
 import MiniCssExtractPlugin from 'mini-css-extract-plugin'
 import CopyWebpackPlugin from 'copy-webpack-plugin'
-import version from './tools/version'
+import version from './tools/version.mjs'
+
+import { fileURLToPath } from 'url';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
 
 const configure = (prod) => ({
   entry: {
@@ -67,7 +71,7 @@ const configure = (prod) => ({
       COOKIE_PATH: JSON.stringify(yargs.argv.cookiePath),
       DEBUG: !prod
     }),
-    new webpack.IgnorePlugin(/vertx/), // https://github.com/webpack/webpack/issues/353
+    new webpack.IgnorePlugin({resourceRegExp: /vertx/}), // https://github.com/webpack/webpack/issues/353
     new webpack.ProvidePlugin({
       jQuery: 'jquery'
     }),
@@ -86,8 +90,7 @@ const configure = (prod) => ({
     new CopyWebpackPlugin([
       { from: 'src/data', to: 'data' },
       { from: 'src/images', to: 'images' }
-    ]),
-    new webpack.HashedModuleIdsPlugin()
+    ])
   ],
   optimization: {
     runtimeChunk: {
@@ -96,34 +99,37 @@ const configure = (prod) => ({
     splitChunks: {
       chunks: 'all',
       cacheGroups: {
-        vendor: {
+        defaultVendors: {
           name: 'vendor',
           test: /[\\/](node_modules|vendor)[\\/]/
         }
       }
-    }
+    },
+    moduleIds: 'deterministic'
   },
   devtool: 'source-map',
   stats: {
     assets: false,
     colors: true,
-    chunks: true
   },
   watchOptions: {
     ignored: /node_modules/
   },
   devServer: {
-    // hot: true,
-    contentBase: './build',
-    publicPath: '/',
-    compress: true,
-    clientLogLevel: 'info',
-    overlay: true,
-    stats: {
-      assets: false,
-      colors: true,
-      cached: false,
-      cachedAssets: false
+    static: './build',
+    client: {
+      logging: 'info',
+    },
+    devMiddleware: {
+      // hot: true,
+      publicPath: '/',
+      stats: {
+        assets: false,
+        colors: true,
+        chunks: true,
+        cached: false,
+        cachedAssets: false
+      }
     }
   }
 })

package.json

@@ -8,6 +8,10 @@
     "packages/*",
     "demo"
   ],
+  "engines": {
+    "npm": ">=9.0.0 <10.0.0",
+    "node": ">=18.0.0 <19.0.0"
+  },
   "scripts": {
     "prepare": "husky install",
     "precommit": "lint-staged --allow-empty",
@@ -58,8 +62,8 @@
     "stylelint-config-standard": "^22.0.0",
     "stylelint-prettier": "^2.0.0",
     "stylelint-scss": "^4.0.0",
-    "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.11"
+    "webpack": "^5.88.2",
+    "webpack-cli": "^5.1.4"
   },
   "packageManager": "yarn@3.1.1",
   "resolutions": {

packages/miew-app/package.json

@@ -113,8 +113,8 @@
     "stylelint-scss": "^4.0.0",
     "three": "0.131.3",
     "typescript": "^4.5.3",
-    "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.10",
-    "webpack-dev-server": "^3.11.0"
+    "webpack": "^5.88.2",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1"
   }
 }

packages/miew-app/webpack.config.js

@@ -1,5 +1,4 @@
 const path = require('path')
-const webpack = require('webpack')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 
@@ -53,7 +52,6 @@ module.exports = {
       template: './src/index.html',
       title: 'Miew – 3D Molecular Viewer'
     }),
-    new webpack.HashedModuleIdsPlugin(),
     new MiniCssExtractPlugin()
   ],
   optimization: {
@@ -73,7 +71,8 @@ module.exports = {
           test: /[\\/]node_modules[\\/](?!miew[\\/])/
         }
       }
-    }
+    },
+    moduleIds: 'deterministic'
   },
   devtool: 'source-map',
   stats: {

packages/miew/package.json

@@ -174,9 +174,9 @@
     "ttypescript": "^1.5.13",
     "typescript": "^4.5.3",
     "url-loader": "^4.1.0",
-    "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.11",
-    "webpack-dev-server": "^3.11.0",
+    "webpack": "^5.88.2",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1",
     "yargs": "^15.3.0"
   }
 }