[MIRROR] [MIRROR] react 19.2

dependencies.sh

@@ -15,8 +15,14 @@ export RUST_G_VERSION=3.8.0
 
 #node version
 export NODE_VERSION_LTS=22.14.0
+<<<<<<< HEAD
 # compatiblility mode MUST work with windows 7
 export NODE_VERSION_COMPAT=20.2.0
+=======
+
+# Bun version
+export BUN_VERSION=1.2.23
+>>>>>>> 4f68aff1c5 ([MIRROR] react 19.2 (#11772))
 
 # SpacemanDMM git tag
 export SPACEMAN_DMM_VERSION=suite-1.10

package.json

@@ -0,0 +1,10 @@
+{
+	"devDependencies": {
+		"@biomejs/biome": "^2.2.5",
+		"prettier": "^3.6.2"
+	},
+	"scripts": {
+		"tgui:fix": "biome check --write --unsafe tgui",
+		"tgui:lint": "biome lint tgui"
+	}
+}

tgui/package.json

@@ -1,4 +1,5 @@
 {
+<<<<<<< HEAD
   "private": true,
   "name": "tgui-workspace",
   "version": "6.0.0",
@@ -48,4 +49,34 @@
     "@types/wicg-file-system-access": "^2023.10.6",
     "vitest": "^3.1.1"
   }
+=======
+	"private": true,
+	"name": "tgui-workspace",
+	"version": "6.0.0",
+	"packageManager": "bun@1.2.22",
+	"workspaces": [
+		"packages/*"
+	],
+	"scripts": {
+		"tgui:analyze": "rspack --analyze",
+		"tgui:build": "rspack build",
+		"tgui:dev": "bun --smol packages/tgui-dev-server/index.ts",
+		"tgui:test": "bun test",
+		"tgui:tsc": "tsc"
+	},
+	"devDependencies": {
+		"@happy-dom/global-registrator": "^17.6.3",
+		"@rspack/cli": "^1.5.8",
+		"@rspack/core": "^1.5.8",
+		"@types/bun": "^1.2.23",
+		"@types/react": "^19.2.0",
+		"@types/react-dom": "^19.2.0",
+		"@types/webpack-env": "^1.18.8",
+		"@types/wicg-file-system-access": "^2023.10.6",
+		"css-loader": "^7.1.2",
+		"sass-embedded": "^1.93.2",
+		"sass-loader": "^16.0.5",
+		"typescript": "^5.9.3"
+	}
+>>>>>>> 4f68aff1c5 ([MIRROR] react 19.2 (#11772))
 }

tgui/packages/tgui-panel/package.json

@@ -1,4 +1,5 @@
 {
+<<<<<<< HEAD
   "private": true,
   "name": "tgui-panel",
   "version": "6.0.0",
@@ -15,4 +16,19 @@
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.2"
   }
+=======
+	"name": "tgui-panel",
+	"version": "6.0.0",
+	"dependencies": {
+		"common": "workspace:*",
+		"dompurify": "^3.2.7",
+		"es-toolkit": "^1.39.10",
+		"react": "^19.2.0",
+		"react-dom": "^19.2.0",
+		"tgui": "workspace:*",
+		"tgui-core": "^5.3.2",
+		"tgui-dev-server": "workspace:*"
+	},
+	"private": true
+>>>>>>> 4f68aff1c5 ([MIRROR] react 19.2 (#11772))
 }

tgui/packages/tgui-say/package.json

@@ -1,4 +1,5 @@
 {
+<<<<<<< HEAD
   "private": true,
   "name": "tgui-say",
   "version": "1.0.0",
@@ -14,4 +15,16 @@
     "@types/react-dom": "^19.1.2",
     "vitest": "^3.1.1"
   }
+=======
+	"name": "tgui-say",
+	"version": "1.0.0",
+	"dependencies": {
+		"common": "workspace:*",
+		"react": "^19.2.0",
+		"react-dom": "^19.2.0",
+		"tgui": "workspace:*",
+		"tgui-core": "^5.3.2"
+	},
+	"private": true
+>>>>>>> 4f68aff1c5 ([MIRROR] react 19.2 (#11772))
 }

tgui/packages/tgui/interfaces/ColorPickerModal.tsx

@@ -14,7 +14,18 @@ import {
   rgbaToHsva,
   validHex,
 } from 'common/colorpicker';
+<<<<<<< HEAD
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
+=======
+import React, {
+  useCallback,
+  useEffect,
+  useEffectEvent,
+  useMemo,
+  useState,
+} from 'react';
+import { useBackend } from 'tgui/backend';
+>>>>>>> 4f68aff1c5 ([MIRROR] react 19.2 (#11772))
 import { Pointer } from 'tgui/components';
 import { type Interaction, Interactive } from 'tgui/components/Interactive';
 import {
@@ -67,12 +78,17 @@ export const ColorPickerModal: React.FC<ColorPickerModalProps> = () => {
   const [lastSelectedColor, setLastSelectedColor] = useState<string>('');
   const [allowEditing, setAllowEditing] = useState<boolean>(false);
 
-  useEffect(() => {
+  const updateSelectedColor = useEffectEvent(() => {
     setSelectedColor(hexToHsva(default_color));
-  }, [default_color]);
+  });
 
   useEffect(() => {
+    updateSelectedColor();
+  }, [default_color]);
+
+  const syncColorPreset = useEffectEvent(() => {
     const hexCol = hsvaToHex(selectedColor);
+
     if (
       selectedPreset !== undefined &&
       lastSelectedColor !== hexCol &&
@@ -81,6 +97,10 @@ export const ColorPickerModal: React.FC<ColorPickerModalProps> = () => {
       setLastSelectedColor(hexCol);
       act('preset', { color: hexCol, index: selectedPreset + 1 });
     }
+  });
+
+  useEffect(() => {
+    syncColorPreset();
   }, [selectedColor]);
 
   if (!title) {

tgui/packages/tgui/interfaces/FishingMinigame.tsx

@@ -4,6 +4,7 @@ import {
   type PropsWithChildren,
   type ReactNode,
   useEffect,
+  useEffectEvent,
   useState,
 } from 'react';
 import { Window } from 'tgui/layouts';
@@ -34,18 +35,18 @@ export const GameWindow = (props: {
   const [gameOver, setGameOver] = useState(GameOverState.GameTitle);
   const [score, setScore] = useState((MAX_SCORE + MIN_SCORE) / 2);
 
-  useEffect(() => {
+  const handleGameEnd = useEffectEvent(() => {
     if (score === MIN_SCORE) {
-      if (props.onLose) {
-        props.onLose();
-      }
+      props.onLose?.();
       setGameOver(GameOverState.GameFail);
     } else if (score === MAX_SCORE) {
-      if (props.onWin) {
-        props.onWin();
-      }
+      props.onWin?.();
       setGameOver(GameOverState.GameWin);
     }
+  });
+
+  useEffect(() => {
+    handleGameEnd();
   }, [score]);
 
   return gameOver ? (

tgui/packages/tgui/interfaces/LobbyMenu/LobbyElements.tsx

@@ -13,9 +13,13 @@ export const TimedDivider = () => {
 
   useEffect(() => {
     if (!animationsFinished && !animationsDisabled) {
-      setTimeout(() => {
-        ref.current!.style.display = 'block';
+      const timeoutId = setTimeout(() => {
+        if (ref.current) {
+          ref.current.style.display = 'block';
+        }
       }, 1500);
+
+      return () => clearTimeout(timeoutId);
     }
   }, [animationsFinished, animationsDisabled]);
 

tgui/packages/tgui/interfaces/PreferencesMenu/bay_prefs/helper_components.tsx

@@ -30,26 +30,26 @@ export const CanvasBackedImage = (props: {
   const [bitmap, setBitmap] = useState<string>('');
 
   useEffect(() => {
-    const offscreenCanvas: OffscreenCanvas = new OffscreenCanvas(64, 64);
-
+    const offscreenCanvas = new OffscreenCanvas(64, 64);
     const ctx = offscreenCanvas.getContext('2d');
-    if (!ctx) {
-      return;
-    }
+    if (!ctx) return;
+
+    let active = true;
+    let bitmap = '';
 
     const drawImage = async () => {
-      // Render
       await props.render(offscreenCanvas, ctx);
-
-      // Convert to a blob and put in our <img> tag
-      const bitmap = await offscreenCanvas.convertToBlob();
-      setBitmap(URL.createObjectURL(bitmap));
+      const blob = await offscreenCanvas.convertToBlob();
+      if (!active) return;
+      bitmap = URL.createObjectURL(blob);
+      setBitmap(bitmap);
     };
 
     drawImage();
 
     return () => {
-      if (bitmap !== '') {
+      active = false;
+      if (bitmap) {
         URL.revokeObjectURL(bitmap);
       }
     };

tgui/packages/tgui/interfaces/PublicLibraryWiki/WikiCommon/WikiColorIcon.tsx

@@ -1,4 +1,8 @@
+<<<<<<< HEAD
 import React, { useCallback, useEffect, useState } from 'react';
+=======
+import { useCallback, useEffect, useRef, useState } from 'react';
+>>>>>>> 4f68aff1c5 ([MIRROR] react 19.2 (#11772))
 import { Box, Icon } from 'tgui-core/components';
 
 export const getImage = async (url: string): Promise<HTMLImageElement> => {
@@ -21,39 +25,51 @@ export const CanvasBackedImage = (props: {
 }) => {
   const { dimension } = props;
   const [bitmap, setBitmap] = useState<string>('');
+  const [loadFailed, setLoadFailed] = useState(false);
+  const bitmapRef = useRef<string>('');
 
   useEffect(() => {
-    const offscreenCanvas: OffscreenCanvas = new OffscreenCanvas(
-      dimension,
-      dimension,
-    );
-
+    const offscreenCanvas = new OffscreenCanvas(dimension, dimension);
     const ctx = offscreenCanvas.getContext('2d');
-    if (!ctx) {
-      return;
-    }
+    if (!ctx) return;
+
+    let active = true;
 
     setBitmap('');
+    bitmapRef.current = '';
 
     const drawImage = async () => {
-      // Render
       await props.render(offscreenCanvas, ctx);
+      if (!active) return;
 
-      // Convert to a blob and put in our <img> tag
-      const bitmap = await offscreenCanvas.convertToBlob();
-      setBitmap(URL.createObjectURL(bitmap));
+      const blob = await offscreenCanvas.convertToBlob();
+      const url = URL.createObjectURL(blob);
+
+      setBitmap(url);
+      bitmapRef.current = url;
     };
 
     drawImage();
+    setLoadFailed(false);
 
     return () => {
-      if (bitmap !== '') {
-        URL.revokeObjectURL(bitmap);
+      active = false;
+      if (bitmapRef.current) {
+        URL.revokeObjectURL(bitmapRef.current);
+        bitmapRef.current = '';
       }
     };
   }, [props.render]);
 
-  return <img src={bitmap} width={dimension} height={dimension} />;
+  return (
+    <img
+      src={bitmap}
+      width={dimension}
+      height={dimension}
+      onError={() => setLoadFailed(true)}
+      style={{ visibility: bitmap && !loadFailed ? 'visible' : 'hidden' }}
+    />
+  );
 };
 
 export const ColorizedImage = (props: {

tgui/packages/tgui/interfaces/PublicLibraryWiki/WikiPages/WikiLoadingPage.tsx

@@ -17,10 +17,11 @@ export const WikiLoadingPage = (props: { endTime: number; tipp: string }) => {
 
   useEffect(() => {
     if (ourProgress < endTime - 100) {
-      setTimeout(() => {
-        setOurProgress(ourProgress + 100);
-        setUpdateProgress(!updateProgress);
+      const timer = setTimeout(() => {
+        setOurProgress((prev) => prev + 100);
+        setUpdateProgress((prev) => !prev);
       }, 100);
+      return () => clearTimeout(timer);
     } else {
       setOurProgress(endTime);
     }

tgui/packages/tgui/interfaces/PublicLibraryWiki/WikiPages/WikiSearchPage.tsx

@@ -5,8 +5,8 @@ import { createSearch } from 'tgui-core/string';
 
 import type { PageData } from '../types';
 import { WikiSearchList } from '../WikiCommon/WikiSearchList';
-import { WikiBotanyPage } from './WikiSubPages/WikiBotanyPage';
 import { WikiCatalogPage } from './WikiSubPages/WIkiCatalogPage';
+import { WikiBotanyPage } from './WikiSubPages/WikiBotanyPage';
 import { WikiChemistryPage } from './WikiSubPages/WikiChemistryPage';
 import { WikiFoodPage } from './WikiSubPages/WikiFoodPage';
 import { WikiMaterialPage } from './WikiSubPages/WikiMaterialPage';