⬆️ Avoid deprecated dependencies

.circleci/config.yml

@@ -6,7 +6,7 @@ jobs:
       FORCE_COLOR: '1'
       TOOL_NODE_FLAGS: --max_old_space_size=4096
     docker:
-      - image: circleci/node:16.12.0-browsers
+      - image: cimg/node:16.18.0-browsers
     steps:
       - checkout
       - add_ssh_keys
@@ -45,7 +45,7 @@ jobs:
       FORCE_COLOR: '1'
       SCREENSHOT_DIR: /tmp/bemuse-e2e-screenshot
     docker:
-      - image: circleci/node:16.12.0-browsers
+      - image: cimg/node:16.18.0-browsers
     steps:
       - checkout
       - attach_workspace:

bemuse/config/webpack.js

@@ -186,7 +186,7 @@ function generateLoadersConfig() {
     },
     {
       test: /\.jade$/,
-      loader: 'jade-loader',
+      loader: 'pug-loader',
     },
     {
       test: /\.png$/,

bemuse/package.json

@@ -27,7 +27,7 @@
   "author": "Thai Pangsakulyanont <dtinth@spacet.me> (http://dt.in.th/)",
   "license": "AGPL-1.0",
   "devDependencies": {
-    "@types/bluebird": "3",
+    "@types/bluebird": "^3.5.24",
     "@types/chai": "^4.2.0",
     "@types/eslint": "^4.16.4",
     "@types/invariant": "^2.2.30",
@@ -45,7 +45,6 @@
     "chai-as-promised": "^7.1.1",
     "chalk": "^2.4.1",
     "circumstance": "^1.1.1",
-    "codecov": "^3.1.0",
     "connect": "^3.6.6",
     "cross-env": "^5.2.0",
     "css-loader": "^1.0.0",
@@ -58,10 +57,7 @@
     "gulp": "^4.0.2",
     "gulp-eslint": "^5.0.0",
     "gulp-mocha": "^6.0.0",
-    "gulp-util": "^3.0.8",
     "istanbul-instrumenter-loader": "^3.0.1",
-    "jade": "^1.9.2",
-    "jade-loader": "^0.8.0",
     "js-yaml": "^3.12.0",
     "json-loader": "^0.5.7",
     "karma": "^3.0.0",
@@ -70,8 +66,8 @@
     "karma-firefox-launcher": "^1.1.0",
     "karma-mocha": "^1.3.0",
     "karma-sourcemap-loader": "^0.3.7",
-    "karma-webpack": "^3.0.5",
-    "merge-stream": "^1.0.1",
+    "karma-webpack": "^4.0.2",
+    "merge-stream": "^2.0.0",
     "minimatch": "^3.0.4",
     "mocha": "^5.2.0",
     "monetizer": "^50.0.1",
@@ -80,7 +76,9 @@
     "pegjs-loader": "^0.5.4",
     "postcss-flexbugs-fixes": "^4.1.0",
     "postcss-loader": "^3.0.0",
-    "puppeteer": "^10.4.0",
+    "pug": "^2.0.4",
+    "pug-loader": "^2.4.0",
+    "puppeteer": "^13.4.0",
     "raw-loader": "^0.5.1",
     "rimraf": "^2.6.2",
     "sass": "^1.34.1",
@@ -107,20 +105,19 @@
     "typescript": "^4.4.3"
   },
   "dependencies": {
-    "audio-context": "^1.0.3",
     "auth0-js": "^9.8.0",
-    "axios": "^0.18.1",
+    "axios": "^0.21.1",
     "baconjs": "^0.7.95",
     "bemuse-indexer": "^51.0.0",
     "bemuse-notechart": "^50.1.0",
     "bemuse-types": "^50.0.1",
-    "bluebird": "^3.5.2",
+    "bluebird": "^3.5.24",
     "bms": "^50.1.0",
     "bmson": "^50.1.0",
     "bson-objectid": "^1.2.4",
     "bytes": "^3.0.0",
     "classnames": "^2.2.6",
-    "co": "^4.3.1",
+    "co": "^4.6.0",
     "data-structure": "^1.2.0",
     "debug": "^3.2.5",
     "emotion": "^9.2.12",
@@ -149,7 +146,7 @@
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
     "react-emotion": "^9.2.12",
-    "react-fa": "^5.0.0",
+    "react-fontawesome": "^1.7.1",
     "react-fns": "^1.4.0",
     "react-hot-loader": "^4.12.14",
     "react-query": "^3.25.1",
@@ -168,7 +165,9 @@
     "whatwg-fetch": "^1.1.1",
     "downshift": "~6.1.7",
     "@radix-ui/react-alert-dialog": "~0.1.5",
-    "fuzzysort": "~1.1.4"
+    "fuzzysort": "~1.1.4",
+    "fancy-log": "~2.0.0",
+    "plugin-error": "~1.0.1"
   },
   "resolutions": {
     "natives": "1.1.6"

bemuse/src/app/ui/MusicChartSelectorItem.jsx

@@ -1,6 +1,6 @@
 import './MusicChartSelectorItem.scss'
 
-import Icon from 'react-fa'
+import Icon from 'react-fontawesome'
 import React from 'react'
 import PropTypes from 'prop-types'
 import c from 'classnames'

bemuse/src/app/ui/MusicInfoTabStats.jsx

@@ -1,6 +1,6 @@
 import './MusicInfoTabStats.scss'
 
-import Icon from 'react-fa'
+import Icon from 'react-fontawesome'
 import React from 'react'
 import PropTypes from 'prop-types'
 import { formattedAccuracyForRecord } from 'bemuse/rules/accuracy'

bemuse/src/app/ui/MusicInfoTabs.jsx

@@ -3,7 +3,7 @@ import './MusicInfoTabs.scss'
 import React from 'react'
 import PropTypes from 'prop-types'
 import c from 'classnames'
-import Icon from 'react-fa'
+import Icon from 'react-fontawesome'
 
 import MusicInfoTabStats from './MusicInfoTabStats.jsx'
 import MusicInfoTabInformation from './MusicInfoTabInformation.jsx'

bemuse/src/app/ui/Toolbar.jsx

@@ -4,7 +4,7 @@ import SceneToolbar from 'bemuse/ui/SceneToolbar'
 import TipContainer from 'bemuse/ui/TipContainer'
 import $ from 'jquery'
 import FirstTimeTip from './FirstTimeTip'
-import Icon from 'react-fa'
+import Icon from 'react-fontawesome'
 import { WindowSize } from 'react-fns'
 import FloatingMobileButton from 'bemuse/ui/FloatingMobileButton'
 import FloatingMobileMenu from 'bemuse/ui/FloatingMobileMenu'

bemuse/src/audio-context/index.js

@@ -1,5 +1,3 @@
-import createAudioContext from 'audio-context'
-
-export default createAudioContext({
-  latencyHint: 'interaction',
+export default new AudioContext({
+  latencyHint: 'interactive',
 })

bemuse/src/previewer/PreviewFileDropHandler.tsx

@@ -27,14 +27,15 @@ export const PreviewFileDropHandler: React.FC<{
         alert('Unsupported browser (sorry).')
         return
       }
-      const handle = await item.getAsFileSystemHandle()!
-      if (!handle || handle.kind !== 'directory') {
+      const handleNullable = await item.getAsFileSystemHandle()
+      if (!handleNullable || handleNullable.kind !== 'directory') {
         alert('Please drop folder, not a file here.')
         return
       }
+      const handle = handleNullable as FileSystemDirectoryHandle
       await handle.requestPermission({ mode: 'read' })
       const chartFiles: { filename: string; label: string }[] = []
-      for await (let [name] of handle) {
+      for await (let [name] of handle.entries()) {
         if (/\.(bms|bme|bml|bmson)$/i.test(name)) {
           chartFiles.push({ filename: name, label: name })
         }

bemuse/src/utils/query.js

@@ -6,5 +6,6 @@
 //    import query from 'bemuse/utils/query'
 //    alert(query.mode)
 
-import querystring from 'querystring'
-export default querystring.parse(location.search.replace(/^\?/, ''))
+export default Object.fromEntries(
+  new URLSearchParams(location.search).entries()
+)

bemuse/tasks/build.js

@@ -1,7 +1,7 @@
 import Promise from 'bluebird'
 import fs from 'fs'
 import gulp from 'gulp'
-import gutil from 'gulp-util'
+import log from 'fancy-log'
 import webpack from 'webpack'
 
 import buildConfig from '../config/buildConfig'
@@ -15,7 +15,7 @@ gulp.task(
   'build',
   gulp.series('dist', async function () {
     const stats = await Promise.promisify(webpack)(config)
-    gutil.log('[webpack]', stats.toString({ colors: true }))
+    log('[webpack]', stats.toString({ colors: true }))
     if (stats.hasErrors()) {
       throw new Error(
         'Failed to build Bemuse, please check the logs above.... T_T'

bemuse/tasks/support/dev-server/index.js

@@ -1,7 +1,8 @@
 import WebpackDevServer from 'webpack-dev-server'
 import chalk from 'chalk'
 import express from 'express'
-import gutil from 'gulp-util'
+import log from 'fancy-log'
+import PluginError from 'plugin-error'
 import webpack from 'webpack'
 
 import * as Env from '../../../config/env'
@@ -37,7 +38,7 @@ export function start() {
   server.use('/coverage', express.static(path('coverage', 'lcov-report')))
 
   server.listen(port, '0.0.0.0', function (err) {
-    if (err) throw new gutil.PluginError('webpack-dev-server', err)
-    gutil.log('[webpack-dev-server]', 'http://localhost:' + port + '/')
+    if (err) throw new PluginError('webpack-dev-server', err)
+    log('[webpack-dev-server]', 'http://localhost:' + port + '/')
   })
 }