From 68bf2724b5c7ac9332cf7a4a9d5f207d8ebb84fa Mon Sep 17 00:00:00 2001 From: Iajret Creature <122297233+Steals-The-PRs@users.noreply.github.com> Date: Mon, 8 Apr 2024 23:42:50 +0300 Subject: [PATCH] [MIRROR] Reverts reversion: tgui will 516 or else (#2775) * Reverts reversion: tgui will 516 or else (#82527) ## About The Pull Request Context: #82522 Apparently you cant just stuff the byond helper functions into an external js file, but if you do, byond won't even let you know its a problem until the servers crash and you have to run `bin/clean` just to unbork your entire repo This reimplements the changes from #82473 without: - moving the byond helper functions externally - causing a tooltip render issue in panel ## Why It's Good For The Game 516 prep (again this time) * Reverts reversion: tgui will 516 or else --------- Co-authored-by: NovaBot <154629622+NovaBot13@users.noreply.github.com> Co-authored-by: Jeremiah <42397676+jlsnow301@users.noreply.github.com> Co-authored-by: Iajret --- tgui/global.d.ts | 30 ---------- tgui/packages/tgui-panel/chat/renderer.jsx | 28 ++++----- tgui/packages/tgui-panel/panelFocus.js | 2 +- tgui/packages/tgui-say/index.tsx | 21 +++---- tgui/packages/tgui-say/package.json | 2 + tgui/packages/tgui/backend.ts | 4 +- tgui/packages/tgui/components/Flex.tsx | 8 +-- .../packages/tgui/stories/ByondUi.stories.jsx | 2 +- tgui/public/tgui.html | 59 ++++++------------- tgui/yarn.lock | 13 +++- 10 files changed, 57 insertions(+), 112 deletions(-) diff --git a/tgui/global.d.ts b/tgui/global.d.ts index 542788717ab..9cb8e37c2e8 100644 --- a/tgui/global.d.ts +++ b/tgui/global.d.ts @@ -41,36 +41,6 @@ type ByondType = { */ windowId: string; - /** - * True if javascript is running in BYOND. - */ - IS_BYOND: boolean; - - /** - * Version of Trident engine of Internet Explorer. Null if N/A. - */ - TRIDENT: number | null; - - /** - * True if browser is IE8 or lower. - */ - IS_LTE_IE8: boolean; - - /** - * True if browser is IE9 or lower. - */ - IS_LTE_IE9: boolean; - - /** - * True if browser is IE10 or lower. - */ - IS_LTE_IE10: boolean; - - /** - * True if browser is IE11 or lower. - */ - IS_LTE_IE11: boolean; - /** * If `true`, unhandled errors and common mistakes result in a blue screen * of death, which stops this window from handling incoming messages and diff --git a/tgui/packages/tgui-panel/chat/renderer.jsx b/tgui/packages/tgui-panel/chat/renderer.jsx index 0d26061f60b..7e30a0274ac 100644 --- a/tgui/packages/tgui-panel/chat/renderer.jsx +++ b/tgui/packages/tgui-panel/chat/renderer.jsx @@ -6,7 +6,7 @@ import { EventEmitter } from 'common/events'; import { classes } from 'common/react'; -import { render } from 'react-dom'; +import { createRoot } from 'react-dom/client'; import { Tooltip } from 'tgui/components'; import { createLogger } from 'tgui/logging'; @@ -168,7 +168,7 @@ class ChatRenderer { // Find scrollable parent this.scrollNode = findNearestScrollableParent(this.rootNode); this.scrollNode.addEventListener('scroll', this.handleScroll); - setImmediate(() => { + setTimeout(() => { this.scrollToBottom(); }); // Flush the queue @@ -413,14 +413,16 @@ class ChatRenderer { childNode.removeChild(childNode.firstChild); } const Element = TGUI_CHAT_COMPONENTS[targetName]; + + const reactRoot = createRoot(childNode); + /* eslint-disable react/no-danger */ - render( + reactRoot.render( , childNode, ); - /* eslint-enable react/no-danger */ } // Highlight text @@ -455,15 +457,9 @@ class ChatRenderer { message.node = node; // Query all possible selectors to find out the message type if (!message.type) { - // IE8: Does not support querySelector on elements that - // are not yet in the document. - - const typeDef = - !Byond.IS_LTE_IE8 && - MESSAGE_TYPES.find( - (typeDef) => - typeDef.selector && node.querySelector(typeDef.selector), - ); + const typeDef = MESSAGE_TYPES.find( + (typeDef) => typeDef.selector && node.querySelector(typeDef.selector), + ); message.type = typeDef?.type || MESSAGE_TYPE_UNKNOWN; } updateMessageBadge(message); @@ -486,7 +482,7 @@ class ChatRenderer { this.rootNode.appendChild(fragment); } if (this.scrollTracking) { - setImmediate(() => this.scrollToBottom()); + setTimeout(() => this.scrollToBottom()); } } // Notify listeners that we have processed the batch @@ -586,10 +582,6 @@ class ChatRenderer { } saveToDisk() { - // Allow only on IE11 - if (Byond.IS_LTE_IE10) { - return; - } // Compile currently loaded stylesheets as CSS text let cssText = ''; const styleSheets = document.styleSheets; diff --git a/tgui/packages/tgui-panel/panelFocus.js b/tgui/packages/tgui-panel/panelFocus.js index b7cea229314..8cff4a361b3 100644 --- a/tgui/packages/tgui-panel/panelFocus.js +++ b/tgui/packages/tgui-panel/panelFocus.js @@ -15,7 +15,7 @@ import { focusMap } from 'tgui/focus'; // text you can select with the mouse. const MIN_SELECTION_DISTANCE = 10; -const deferredFocusMap = () => setImmediate(() => focusMap()); +const deferredFocusMap = () => setTimeout(() => focusMap()); export const setupPanelFocusHacks = () => { let focusStolen = false; diff --git a/tgui/packages/tgui-say/index.tsx b/tgui/packages/tgui-say/index.tsx index d902ae85cdf..9757cca4ff4 100644 --- a/tgui/packages/tgui-say/index.tsx +++ b/tgui/packages/tgui-say/index.tsx @@ -1,21 +1,18 @@ import './styles/main.scss'; -import { createRenderer } from 'tgui/renderer'; +import { createRoot, Root } from 'react-dom/client'; import { TguiSay } from './TguiSay'; -const renderApp = createRenderer(() => { - return ; -}); +let reactRoot: Root | null = null; -const setupApp = () => { - // Delay setup - if (document.readyState === 'loading') { - document.addEventListener('DOMContentLoaded', setupApp); - return; +document.onreadystatechange = function () { + if (document.readyState !== 'complete') return; + + if (!reactRoot) { + const root = document.getElementById('react-root'); + reactRoot = createRoot(root!); } - renderApp(); + reactRoot.render(); }; - -setupApp(); diff --git a/tgui/packages/tgui-say/package.json b/tgui/packages/tgui-say/package.json index da9ff074d4b..55410500e58 100644 --- a/tgui/packages/tgui-say/package.json +++ b/tgui/packages/tgui-say/package.json @@ -4,8 +4,10 @@ "version": "1.0.0", "dependencies": { "@types/react": "^18.2.74", + "@types/react-dom": "^18.2.24", "common": "workspace:*", "react": "^18.2.0", + "react-dom": "^18.2.0", "tgui": "workspace:*", "tgui-polyfill": "workspace:*" } diff --git a/tgui/packages/tgui/backend.ts b/tgui/packages/tgui/backend.ts index bf75306108a..c85d5153210 100644 --- a/tgui/packages/tgui/backend.ts +++ b/tgui/packages/tgui/backend.ts @@ -177,7 +177,7 @@ export const backendMiddleware = (store) => { Byond.winset(Byond.windowId, { 'is-visible': false, }); - setImmediate(() => focusMap()); + setTimeout(() => focusMap()); } if (type === 'backend/update') { @@ -207,7 +207,7 @@ export const backendMiddleware = (store) => { setupDrag(); // We schedule this for the next tick here because resizing and unhiding // during the same tick will flash with a white background. - setImmediate(() => { + setTimeout(() => { perf.mark('resume/start'); // Doublecheck if we are not re-suspended. const { suspended } = selectBackend(store.getState()); diff --git a/tgui/packages/tgui/components/Flex.tsx b/tgui/packages/tgui/components/Flex.tsx index 50dba277958..41ea6bd8275 100644 --- a/tgui/packages/tgui/components/Flex.tsx +++ b/tgui/packages/tgui/components/Flex.tsx @@ -23,8 +23,6 @@ export const computeFlexClassName = (props: FlexProps) => { return classes([ 'Flex', props.inline && 'Flex--inline', - Byond.IS_LTE_IE10 && 'Flex--iefix', - Byond.IS_LTE_IE10 && props.direction === 'column' && 'Flex--iefix--column', computeBoxClassName(props), ]); }; @@ -65,11 +63,7 @@ export type FlexItemProps = BoxProps & }>; export const computeFlexItemClassName = (props: FlexItemProps) => { - return classes([ - 'Flex__item', - Byond.IS_LTE_IE10 && 'Flex__item--iefix', - computeBoxClassName(props), - ]); + return classes(['Flex__item', computeBoxClassName(props)]); }; export const computeFlexItemProps = (props: FlexItemProps) => { diff --git a/tgui/packages/tgui/stories/ByondUi.stories.jsx b/tgui/packages/tgui/stories/ByondUi.stories.jsx index 0a97be11da7..2203fef23ca 100644 --- a/tgui/packages/tgui/stories/ByondUi.stories.jsx +++ b/tgui/packages/tgui/stories/ByondUi.stories.jsx @@ -34,7 +34,7 @@ const Story = (props) => {