Merge pull request #765 from integer32llc/dep-updates

UI dependency maintenance

Author: shepmaster

.github/workflows/ci.yml

@@ -221,7 +221,7 @@ jobs:
     - name: Configure node
       uses: actions/setup-node@v1
       with:
-        node-version: 14.15
+        node-version: 14.18
     - name: Install dependencies
       run: yarn --cwd ui/frontend/
     - name: Run tests

ci/workflows.yml

@@ -334,7 +334,7 @@ workflows:
           - name: "Configure node"
             uses: actions/setup-node@v1
             with:
-              node-version: 14.15
+              node-version: 14.18
 
           - name: "Install dependencies"
             run: >-

ui/frontend/.stylelintrc.json

@@ -6,6 +6,10 @@
     "stylelint-config-prettier"
   ],
   "rules": {
+    "selector-class-pattern": [
+      "^[a-z-][a-zA-Z0-9]+$", {
+        "message": "Expected class selector to be lowerCamelCase"
+      }],
     "value-keyword-case": ["lower", {
       "ignoreProperties": [
         "composes"

ui/frontend/ConfigElement.module.css

@@ -48,7 +48,7 @@
     }
 
     &:hover {
-      background: hsla(208, 100%, 43%, 0.1);
+      background: hsl(208deg 100% 43% / 10%);
     }
   }
 

ui/frontend/HelpExample.module.css

@@ -7,7 +7,7 @@
   top: 0;
   right: 0;
   border: none;
-  background: rgba(255, 255, 255, 0.8);
+  background: rgb(255 255 255 / 80%);
   border-bottom-left-radius: 0.5em;
   cursor: pointer;
   opacity: 0;

ui/frontend/MenuAside.module.css

@@ -1,4 +1,4 @@
 .aside {
-  margin: 0.25em 0 0 0;
+  margin: 0.25em 0 0;
   color: #888;
 }

ui/frontend/MenuGroup.module.css

@@ -1,6 +1,6 @@
 .container {
   width: 27em;
-  padding: 0.75em 1em 0 1em;
+  padding: 0.75em 1em 0;
   line-height: normal;
 
   &:last-child {

ui/frontend/PopButton.module.css

@@ -35,6 +35,6 @@ $vertical-border-color: #cacaca;
   margin: $arrow-size;
   background: $bg-color;
   border-radius: var(--header-border-radius);
-  box-shadow: 0 1px 4px -2px rgba(0, 0, 0, 0.6), inset 0 1px 0 white;
+  box-shadow: 0 1px 4px -2px rgb(0 0 0 / 60%), inset 0 1px 0 white;
   color: $fg-color;
 }

ui/frontend/SegmentedButton.module.css

@@ -5,7 +5,7 @@ $bg-dark: #f9f9f9;
   display: flex;
   align-items: center;
   border-radius: var(--header-border-radius);
-  box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.4), inset 0 1px 0 white;
+  box-shadow: 0 2px 4px -2px rgb(0 0 0 / 40%), inset 0 1px 0 white;
 }
 
 .button {
@@ -42,13 +42,13 @@ $bg-dark: #f9f9f9;
     border-top-color: #bababa;
     border-bottom-color: #d6d6d6;
     background: linear-gradient($bg-dark, #ededed);
-    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2);
+    box-shadow: inset 0 1px 1px rgb(0 0 0 / 20%);
   }
 }
 
 .buttonBuild {
   composes: button;
-  border-color: hsl(15, 66.7%, 32%);
+  border-color: hsl(15deg 66.7% 32%);
   background: var(--rust);
   color: white;
 

ui/frontend/index.module.css

@@ -36,6 +36,7 @@ body {
   font-family: var(--primary-font);
 }
 
+/* stylelint-disable-next-line selector-class-pattern */
 :global(.language-rust_errors) {
   & :global(.warning) {
     color: #f79a06;

ui/frontend/package.json

@@ -41,16 +41,16 @@
     "@types/react": "^17.0.2",
     "@types/react-dom": "^17.0.1",
     "@types/react-redux": "^7.1.2",
-    "@typescript-eslint/eslint-plugin": "^4.16.1",
-    "@typescript-eslint/parser": "^4.16.1",
+    "@typescript-eslint/eslint-plugin": "^5.9.0",
+    "@typescript-eslint/parser": "^5.9.0",
     "autoprefixer": "^10.2.4",
     "babel-loader": "^8.0.0",
     "babel-plugin-lodash": "^3.3.4",
     "basename": "^0.1.2",
     "compression-webpack-plugin": "^9.0.0",
-    "copy-webpack-plugin": "^9.0.0",
+    "copy-webpack-plugin": "^10.0.0",
     "css-loader": "^6.0.0",
-    "eslint": "^7.4.0",
+    "eslint": "^8.6.0",
     "eslint-plugin-react": "^7.14.3",
     "eslint-plugin-react-hooks": "^4.0.0",
     "glob": "^7.0.5",
@@ -61,14 +61,15 @@
     "normalize.css": "^8.0.0",
     "postcss": "^8.2.7",
     "postcss-loader": "^6.1.0",
-    "postcss-nesting": "^8.0.1",
+    "postcss-nesting": "^10.1.1",
     "postcss-simple-vars": "^6.0.3",
     "prettier": "^2.2.1",
-    "stylelint": "^13.12.0",
+    "stylelint": "^14.2.0",
     "stylelint-config-css-modules": "^2.2.0",
     "stylelint-config-idiomatic-order": "^8.1.0",
     "stylelint-config-prettier": "^9.0.3",
-    "stylelint-config-standard": "^22.0.0",
+    "stylelint-config-standard": "^24.0.0",
+    "ts-essentials": "^9.0.0",
     "ts-jest": "^27.0.0",
     "ts-loader": "^9.2.3",
     "typescript": "^4.2.2",
@@ -77,7 +78,7 @@
     "webpack-cli": "^4.5.0"
   },
   "engines": {
-    "node": "^14.15.1"
+    "node": "^14.18.2"
   },
   "scripts": {
     "test": "jest",

ui/frontend/storage.ts

@@ -1,12 +1,13 @@
 import { merge } from 'lodash';
 import { StoreEnhancer, StoreEnhancerStoreCreator } from 'redux';
+import { DeepPartial } from 'ts-essentials';
 
 type SimpleStorage = Pick<Storage, 'getItem' | 'setItem'>;
 
 interface Config<S> {
   storageFactory: () => SimpleStorage;
   serialize: (state: S) => string;
-  deserialize: (state: string) => S;
+  deserialize: (state: string) => DeepPartial<S>;
 }
 
 export class InMemoryStorage {

ui/frontend/webpack.config.js

@@ -25,15 +25,22 @@ const allKeybindings = allKeybindingNames.concat(['ace']).sort();
 const allThemes = allThemeNames;
 
 // The name is nicer to debug with, but changing names breaks long-term-caching
-const developmentFilenameTemplate = '[name]-[chunkhash]';
-const productionFilenameTemplate = '[chunkhash]';
+const developmentFilenameTemplate = '[name]-[contenthash]';
+const developmentChunkFilenameTemplate = '[name]-[chunkhash]';
+
+const productionFilenameTemplate = '[contenthash]';
+const productionChunkFilenameTemplate = '[chunkhash]';
 
 module.exports = function(_, argv) {
   const isProduction = argv.mode === 'production';
   const filenameTemplate =
         isProduction ?
         productionFilenameTemplate :
         developmentFilenameTemplate;
+  const chunkFilenameTemplate =
+        isProduction ?
+        productionChunkFilenameTemplate :
+        developmentChunkFilenameTemplate;
 
   const devtool =
         isProduction ?
@@ -61,7 +68,7 @@ module.exports = function(_, argv) {
       publicPath: 'assets/',
       path: `${__dirname}/build/assets`,
       filename: `${filenameTemplate}.js`,
-      chunkFilename: `${filenameTemplate}.js`,
+      chunkFilename: `${chunkFilenameTemplate}.js`,
     },
 
     resolve: {
@@ -137,7 +144,7 @@ module.exports = function(_, argv) {
       }),
       new MiniCssExtractPlugin({
         filename: `${filenameTemplate}.css`,
-        chunkFilename: `${filenameTemplate}.css`,
+        chunkFilename: `${chunkFilenameTemplate}.css`,
       }),
       ...(isProduction ? [new CompressionPlugin()] : []),
     ],