Merge pull request #151 from streamwall/bump-dependencies

Bump-dependencies

jest.config.js

@@ -7,10 +7,12 @@ module.exports = {
     '\\.(css|less)$': 'identity-obj-proxy',
     "^preact(/(.*)|$)": "preact$1"
   },
-  testEnvironment: 'node',
   transform: {
     '^.+\\.jsx?$': 'babel-jest',
   },
+  transformIgnorePatterns: [
+    'node_modules/(?!(jsondiffpatch)/)',
+  ],
   testPathIgnorePatterns: ['/node_modules/'],
   coveragePathIgnorePatterns: ['/node_modules/'],
   collectCoverage: true,

package.json

@@ -16,62 +16,63 @@
   "license": "MIT",
   "dependencies": {
     "@iarna/toml": "^2.2.5",
-    "@repeaterjs/repeater": "^3.0.4",
-    "@sentry/electron": "^4.4.0",
-    "base-x": "^4.0.0",
-    "chokidar": "^3.5.3",
+    "@repeaterjs/repeater": "^3.0.6",
+    "@sentry/electron": "^5.3.0",
+    "base-x": "^5.0.0",
+    "chokidar": "^3.6.0",
     "color": "^4.2.3",
-    "dank-twitch-irc": "^3.3.0",
-    "ejs": "^3.1.9",
-    "electron": "^24.1.2",
-    "hls.js": "^1.4.0",
-    "jsondiffpatch": "^0.4.1",
-    "koa": "^2.14.2",
+    "dank-twitch-irc": "^4.3.0",
+    "ejs": "^3.1.10",
+    "electron": "^31.3.1",
+    "hls.js": "^1.5.14",
+    "jsondiffpatch": "^0.6.0",
+    "koa": "^2.15.3",
     "koa-basic-auth": "^4.0.0",
     "koa-easy-ws": "^2.1.0",
-    "koa-route": "^3.2.0",
+    "koa-route": "^4.0.1",
     "koa-static": "^5.0.0",
-    "koa-views": "^8.0.0",
+    "koa-views": "^8.1.0",
     "lodash": "^4.17.21",
-    "luxon": "^3.3.0",
-    "node-fetch": "^3.3.1",
+    "luxon": "^3.5.0",
+    "node-fetch": "^3.3.2",
     "node-simple-cert": "0.0.1",
-    "preact": "^10.13.2",
-    "react-hotkeys-hook": "^4.4.0",
+    "preact": "^10.23.1",
+    "react-hotkeys-hook": "^4.5.0",
     "reconnecting-websocket": "^4.4.0",
-    "styled-components": "^5.3.9",
+    "styled-components": "^6.1.12",
     "svg-loaders-react": "^2.2.1",
-    "webpack-dev-server": "^4.13.2",
-    "ws": "^8.13.0",
+    "webpack-dev-server": "^5.0.4",
+    "ws": "^8.18.0",
     "xstate": "^4.37.1",
-    "yargs": "^17.7.1",
-    "yjs": "^13.5.52"
+    "yargs": "^17.7.2",
+    "yjs": "^13.6.18"
   },
   "devDependencies": {
-    "@babel/core": "^7.21.4",
-    "@babel/plugin-proposal-decorators": "^7.24.1",
+    "@babel/core": "^7.25.2",
+    "@babel/plugin-proposal-decorators": "^7.24.7",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
     "@babel/plugin-proposal-optional-chaining": "^7.21.0",
-    "@babel/plugin-transform-react-jsx": "^7.21.0",
-    "@babel/preset-env": "^7.24.5",
-    "@svgr/webpack": "^7.0.0",
+    "@babel/plugin-transform-react-jsx": "^7.25.2",
+    "@babel/preset-env": "^7.25.3",
+    "@svgr/webpack": "^8.1.0",
     "babel-jest": "^29.7.0",
-    "babel-loader": "^9.1.2",
-    "babel-plugin-styled-components": "^2.1.1",
+    "babel-loader": "^9.1.3",
+    "babel-plugin-styled-components": "^2.1.4",
     "bufferutil": "^4.0.8",
-    "copy-webpack-plugin": "^11.0.0",
-    "css-loader": "^6.7.3",
+    "copy-webpack-plugin": "^12.0.2",
+    "css-loader": "^7.1.2",
     "file-loader": "^6.2.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^29.5.0",
+    "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-junit": "^16.0.0",
-    "prettier": "2.8.7",
-    "style-loader": "^3.3.2",
-    "supertest": "^6.3.3",
-    "utf-8-validate": "^5.0.10",
-    "webpack": "^5.79.0",
-    "webpack-cli": "^5.0.1"
+    "npm-check-updates": "^17.0.6",
+    "prettier": "3.3.3",
+    "style-loader": "^4.0.0",
+    "supertest": "^7.0.0",
+    "utf-8-validate": "^6.0.4",
+    "webpack": "^5.93.0",
+    "webpack-cli": "^5.1.4"
   },
   "browserslist": [
     "electron 9.0"

src/node/auth.js

@@ -6,7 +6,8 @@ import { validRoles } from '../roles'
 
 const scrypt = promisify(scryptCb)
 
-const base62 = require('base-x')(
+import baseX from 'base-x'
+const base62 = baseX(
   '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ',
 )
 

src/web/control.js

@@ -13,6 +13,8 @@ import {
   useRef,
 } from 'preact/hooks'
 import { State } from 'xstate'
+import isPropValid from '@emotion/is-prop-valid';
+import { StyleSheetManager } from 'styled-components';
 import styled, { createGlobalStyle } from 'styled-components'
 import { useHotkeys } from 'react-hotkeys-hook'
 import Color from 'color'
@@ -580,6 +582,7 @@ function App({ wsEndpoint, role }) {
   }
 
   return (
+    <StyleSheetManager shouldForwardProp={(prop) => isPropValid(prop) && !prop.startsWith('$')}>
       <Stack flex="1">
         <Stack>
           <StyledHeader>
@@ -788,6 +791,7 @@ function App({ wsEndpoint, role }) {
           </StyledDataContainer>
         </Stack>
       </Stack>
+    </StyleSheetManager>
   )
 }
 
@@ -888,9 +892,9 @@ function StreamLine({
   return (
     <StyledStreamLine>
       <StyledId
-        disabled={disabled}
+        $disabled={disabled}
         onMouseDown={disabled ? null : handleMouseDownId}
-        color={idColor(id)}
+        $color={idColor(id)}
       >
         {id}
       </StyledId>
@@ -1120,7 +1124,7 @@ function GridControls({
         {roleCan(role, 'set-listening-view') && (
           <StyledButton
             isActive={isListening || isBackgroundListening}
-            activeColor={isListening ? 'red' : Color('red').desaturate(0.5)}
+            activeColor={isListening ? 'red' : Color('red').desaturate(0.5).hsl().string()}
             onClick={handleListeningClick}
             tabIndex={1}
           >
@@ -1234,8 +1238,8 @@ const StyledButton = styled.button`
   ${({ isActive, activeColor = 'red' }) =>
     isActive &&
     `
-      border-color: ${activeColor};
-      background: ${Color(activeColor).desaturate(0.5).lighten(0.5)};
+      border-color: ${Color(activeColor).hsl().string()};
+      background: ${Color(activeColor).desaturate(0.5).lighten(0.5).hsl().string()};
     `};
 
   &:focus {
@@ -1271,8 +1275,8 @@ const StyledGridPreviewBox = styled.div.attrs((props) => ({
   align-items: center;
   justify-content: center;
   position: absolute;
-  background: ${({ color }) => color.lightness(50) || '#333'};
-  border: 0 solid ${({ isError }) => (isError ? 'red' : 'black')};
+  background: ${({ color }) => Color(color).lightness(50).hsl().string() || '#333'};
+  border: 0 solid ${({ isError }) => (isError ? Color('red').hsl().string() : Color('black').hsl().string() )};
   border-left-width: ${({ pos, borderWidth }) =>
     pos.x === 0 ? 0 : borderWidth}px;
   border-right-width: ${({ pos, borderWidth, windowWidth }) =>
@@ -1331,7 +1335,7 @@ const StyledGridInput = styled(LazyChangeInput)`
   border: none;
   padding: 0;
   background: ${({ color, isHighlighted }) =>
-    isHighlighted ? color.lightness(90) : color.lightness(75)};
+    isHighlighted ? Color(color).lightness(90).hsl().string() : Color(color).lightness(75).hsl().string() };
   font-size: 20px;
   text-align: center;
 
@@ -1368,13 +1372,13 @@ const StyledGridContainer = styled.div.attrs((props) => ({
 const StyledId = styled.div`
   flex-shrink: 0;
   margin-right: 5px;
-  background: ${({ color }) => color.lightness(50) || '#333'};
+  background: ${({ $color }) => Color($color).lightness(50).hsl().string() || '#333'};
   color: white;
   padding: 3px;
   border-radius: 5px;
   width: 3em;
   text-align: center;
-  cursor: ${({ disabled }) => (disabled ? 'normal' : 'pointer')};
+  cursor: ${({ $disabled }) => ($disabled ? 'normal' : 'pointer')};
 `
 
 const StyledStreamLine = styled.div`