work in prod pleeeease

packages/selenium-ide/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seleniumhq/selenium-ide",
-  "version": "4.0.0-alpha.44",
+  "version": "4.0.0-alpha.45",
   "private": true,
   "description": "Selenium IDE electron app",
   "author": "Todd <[email protected]>",
@@ -93,12 +93,11 @@
     "hoistingLimits": "workspaces"
   },
   "dependencies": {
-    "@emotion/react": "^11.8.1",
-    "@emotion/styled": "^11.8.1",
-    "@fontsource/roboto": "^4.5.0",
-    "@mui/icons-material": "^5.5.0",
-    "@mui/lab": "^5.0.0-alpha.72",
-    "@mui/material": "^5.5.0",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@fontsource/roboto": "^5.0.5",
+    "@mui/icons-material": "^5.14.1",
+    "@mui/material": "^5.14.1",
     "@seleniumhq/code-export-csharp-nunit": "^4.0.0-alpha.1",
     "@seleniumhq/code-export-csharp-xunit": "^4.0.0-alpha.1",
     "@seleniumhq/code-export-java-junit": "^4.0.0-alpha.1",
@@ -110,17 +109,17 @@
     "@seleniumhq/side-api": "^4.0.0-alpha.25",
     "@seleniumhq/side-model": "^4.0.0-alpha.4",
     "@seleniumhq/side-runtime": "^4.0.0-alpha.25",
-    "dnd-core": "16.0.1",
+    "dnd-core": "^16.0.1",
     "electron-chromedriver": "^25.3.0",
     "electron-log": "^4.4.8",
     "electron-store": "^8.1.0",
     "electron-unhandled": "^4.0.1",
     "fs-extra": "^11.1.1",
     "lodash": "4.17.21",
-    "react": "^17.0.2",
-    "react-dnd": "^15.1.1",
-    "react-dnd-html5-backend": "^15.1.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1",
+    "react-dom": "^18.2.0",
     "v8-compile-cache": "^2.3.0"
   },
   "devDependencies": {
@@ -130,16 +129,17 @@
     "@types/electron-devtools-installer": "^2.2.2",
     "@types/fs-extra": "^11.0.1",
     "@types/lodash": "^4.14.186",
-    "@types/react": "^17.0.14",
-    "@types/react-dom": "^17.0.9",
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.7",
     "@types/webpack-env": "^1.16.0",
     "copy-webpack-plugin": "^10.2.4",
-    "css-loader": "^6.1.0",
+    "css-loader": "^6.8.1",
     "electron": "^25.2.0",
     "electron-builder": "^24.4.0",
     "electron-devtools-installer": "^3.2.0",
     "fork-ts-checker-webpack-plugin": "^8.0.0",
     "html-webpack-plugin": "^5.5.3",
+    "mini-css-extract-plugin": "^2.7.6",
     "npm-run-all": "^4.1.5",
     "run-script-os": "^1.1.6",
     "scroll-into-view-if-needed": "^3.0.10",

packages/selenium-ide/src/browser/components/AppPanelWrapper.tsx

@@ -3,7 +3,7 @@ import React, { FC } from 'react'
 import AppWrapper from './AppWrapper'
 import PanelNav from './PanelNav'
 
-interface AppPanelWrapperProps {
+interface AppPanelWrapperProps extends React.HTMLAttributes<HTMLDivElement> {
   horizontal?: boolean
 }
 

packages/selenium-ide/src/browser/components/AppWrapper.tsx

@@ -8,14 +8,14 @@ import '@fontsource/roboto/500.css'
 import '@fontsource/roboto/700.css'
 import React, { FC } from 'react'
 
-interface AppWrapperProps {
+interface AppWrapperProps extends React.HTMLAttributes<HTMLDivElement> {
   className?: string
 }
 
 const AppWrapper: FC<AppWrapperProps> = ({ children }) => {
   const [themePref, setThemePref] = React.useState<ThemePref>('System')
   React.useEffect(() => {
-    if (!window?.sideAPI?.state) return;
+    if (!window?.sideAPI?.state) return
     window.sideAPI.state
       .getUserPrefs()
       .then((prefs) => setThemePref(prefs.themePref || 'System'))

packages/selenium-ide/src/browser/components/PanelNav.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Paper } from '@mui/material'
 
-interface PanelNavProps {
+interface PanelNavProps extends React.HTMLAttributes<HTMLDivElement> {
   horizontal?: boolean
 }
 

packages/selenium-ide/src/browser/windows/ProjectEditor/tabs/Suites/Editor/CurrentSuiteTestRow.tsx

@@ -1,4 +1,4 @@
-import { Close } from '@mui/icons-material'
+import Close from '@mui/icons-material/Close'
 import { IconButton } from '@mui/material'
 import Box from '@mui/material/Box'
 import ListItemText from '@mui/material/ListItemText'

packages/selenium-ide/webpack.config.ts

@@ -3,26 +3,33 @@ import fs from 'fs'
 import CopyWebpackPlugin from 'copy-webpack-plugin'
 import HtmlWebpackPlugin from 'html-webpack-plugin'
 import kebabCase from 'lodash/fp/kebabCase'
+import MiniCssExtractPlugin from 'mini-css-extract-plugin'
 import path from 'path'
 import {
   Configuration,
   SourceMapDevToolPlugin,
   WebpackPluginInstance,
 } from 'webpack'
 
+const isProduction = process.env.NODE_ENV === 'production'
+
 const commonPlugins: WebpackPluginInstance[] = [
   new ForkTsCheckerWebpackPlugin(),
   new SourceMapDevToolPlugin({
     filename: '[file].map',
   }),
 ]
+if (isProduction) {
+  commonPlugins.push(new MiniCssExtractPlugin())
+}
+
 const commonConfig: Pick<
   Configuration,
   'devtool' | 'externals' | 'mode' | 'module' | 'resolve' | 'output'
 > = {
   devtool: 'source-map',
   externals: ['utf-8-validate', 'bufferutil'],
-  mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
+  mode: isProduction ? 'production' : 'development',
   module: {
     rules: [
       {
@@ -40,7 +47,10 @@ const commonConfig: Pick<
       },
       {
         test: /\.css$/i,
-        use: ['style-loader', 'css-loader'],
+        use: [
+          isProduction ? MiniCssExtractPlugin.loader : 'style-loader',
+          'css-loader',
+        ],
       },
       {
         test: /\.(png|woff|woff2|eot|ttf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
@@ -53,6 +63,11 @@ const commonConfig: Pick<
       api: path.resolve(__dirname, 'src/api'),
       browser: path.resolve(__dirname, 'src/browser'),
       main: path.resolve(__dirname, 'src/main'),
+      '@mui/base': '@mui/base/modern',
+      '@mui/material': '@mui/material/modern',
+      '@mui/styled-engine': '@mui/styled-engine/modern',
+      '@mui/system': '@mui/system/modern',
+      '@mui/utils': '@mui/utils/modern',
     },
     extensions: ['.tsx', '.ts', '.js'],
   },
@@ -138,7 +153,13 @@ function getBrowserPlugin(filename: string) {
       <html>
         <head>
           <title>${title}</title>
+          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
           <link rel="stylesheet" href="index.css" type="text/css">
+          ${
+            isProduction
+              ? `<link rel="stylesheet" href="${filename}.css" type="text/css">\n`
+              : ''
+          }
           <script defer src="${filename}-bundle.js"></script>
         </head>
         <body>