upgrade packages and such

package.json

@@ -15,18 +15,18 @@
   "author": "Aaron Gutierrez",
   "license": "ISC",
   "dependencies": {
-    "@types/react": "^18.0.26",
+    "react": "^19.1.0",
-    "@types/react-dom": "^18.0.10",
+    "react-dom": "^19.1.0"
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "esbuild": "^0.16.10",
+    "@types/react": "19.1.0",
-    "source-map-loader": "^4.0.1",
+    "@types/react-dom": "19.1.0",
-    "ts-loader": "^9.4.2",
+    "esbuild": "^0.25.4",
-    "typescript": "^4.9.4",
+    "source-map-loader": "^5.0.0",
-    "webpack": "^5.66.0",
+    "ts-loader": "^9.5.2",
-    "webpack-cli": "^5.0.1",
+    "typescript": "^5.8.3",
-    "webpack-dev-server": "^4.7.3"
+    "webpack": "^5.99.9",
+    "webpack-cli": "^6.0.1",
+    "webpack-dev-server": "^5.2.1"
   }
 }

src/components/image_set.tsx

@@ -16,7 +16,7 @@ export interface Props {
 export class ImageSet extends React.PureComponent<Props, {}> {
   static displayName = "ImageSet";
 
-  private divRef: React.RefObject<HTMLDivElement> = React.createRef();
+  private divRef = React.createRef<HTMLDivElement>();
 
   render() {
     return (

src/index.tsx

@@ -1,8 +1,7 @@
 import { Root } from "./components/root";
 
-import * as React from "react";
+import { createRoot } from "react-dom/client";
-import * as ReactDOM from "react-dom";
 
-const body = document.getElementById("mount");
+const body = document.getElementById("mount") as HTMLElement;
-
+const root = createRoot(body);
-ReactDOM.render(<Root />, body);
+root.render(<Root />);

tsconfig.json

@@ -5,9 +5,14 @@
     "sourceMap": true,
     "noImplicitAny": true,
     "strictNullChecks": true,
-    "target": "es6",
+    "strict": true,
-    "jsx": "react",
+    "target": "ES2020",
-    "module": "es6"
+    "jsx": "react-jsx",
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "skipLibCheck": true
   },
   "include": [
     "./src/**/*"

webpack.config.js

@@ -7,16 +7,15 @@ module.exports = (env) => {
     entry: "./src/index.tsx",
     output: {
         filename: "bundle.js",
-        path: path.join(__dirname, "dist")
+        path: path.join(__dirname, "dist"),
+        clean: true,
     },
 
     mode: mode,
+    target: "web",
 
     // Enable sourcemaps for debugging webpack's output.
     devtool: "source-map",
-    performance: {
-      hints: false
-    },
 
     devServer: {
         static: {
@@ -37,5 +36,9 @@ module.exports = (env) => {
             { enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
         ]
     },
+
+    experiments: {
+      topLevelAwait: true
+    }
   }
 };