[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 <[email protected]> Co-authored-by: Jeremiah <[email protected]> Co-authored-by: Iajret <[email protected]>
Fluffy-Frontier · Apr 8, 2024 · 68bf272 · 68bf272
1 parent 7f93b6e
commit 68bf272
Show file tree

Hide file tree

Showing 10 changed files with 57 additions and 112 deletions.
diff --git 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
@@ -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(
             <Element {...outputProps}>
               <span dangerouslySetInnerHTML={oldHtml} />
             </Element>,
             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
@@ -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
@@ -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 <TguiSay />;
-});
+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(<TguiSay />);
 };
-
-setupApp();
diff --git 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
@@ -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
@@ -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
@@ -34,7 +34,7 @@ const Story = (props) => {
           <Button
             icon="chevron-right"
             onClick={() =>
-              setImmediate(() => {
+              setTimeout(() => {
                 try {
                   const result = new Function('return (' + code + ')')();
                   if (result && result.then) {

diff --git a/tgui/public/tgui.html b/tgui/public/tgui.html
@@ -52,19 +52,22 @@
       : null;
   })();
 
+  // Blink engine version
+  Byond.BLINK = (function () {
+    var groups = navigator.userAgent.match(/Chrome\/(\d+)\./);
+    var majorVersion = groups && groups[1];
+    return majorVersion ? parseInt(majorVersion, 10) : null;
+  })();
+
   // Basic checks to detect whether this page runs in BYOND
-  var isByond = (Byond.TRIDENT !== null || window.cef_to_byond)
+  var isByond = (Byond.TRIDENT !== null || Byond.BLINK !== null || window.cef_to_byond)
     && location.hostname === '127.0.0.1'
     && location.search !== '?external';
     //As of BYOND 515 the path doesn't seem to include tmp dir anymore if you're trying to open tgui in external browser and looking why it doesn't work
     //&& location.pathname.indexOf('/tmp') === 0
 
   // Version constants
   Byond.IS_BYOND = isByond;
-  Byond.IS_LTE_IE8 = Byond.TRIDENT !== null && Byond.TRIDENT <= 4;
-  Byond.IS_LTE_IE9 = Byond.TRIDENT !== null && Byond.TRIDENT <= 5;
-  Byond.IS_LTE_IE10 = Byond.TRIDENT !== null && Byond.TRIDENT <= 6;
-  Byond.IS_LTE_IE11 = Byond.TRIDENT !== null && Byond.TRIDENT <= 7;
 
   // Strict mode flag
   Byond.strictMode = Boolean(Number(parseMetaTag('tgui:strictMode')));
@@ -73,17 +76,12 @@
   Byond.__callbacks__ = [];
 
   // Reviver for BYOND JSON
-  // IE8: No reviver for you!
-  // See: https://stackoverflow.com/questions/1288962
-  var byondJsonReviver;
-  if (!Byond.IS_LTE_IE8) {
-    byondJsonReviver = function (key, value) {
-      if (typeof value === 'object' && value !== null && value.__number__) {
-        return parseFloat(value.__number__);
-      }
-      return value;
-    };
-  }
+  var byondJsonReviver = function (key, value) {
+    if (typeof value === 'object' && value !== null && value.__number__) {
+      return parseFloat(value.__number__);
+    }
+    return value;
+  };
 
   // Makes a BYOND call.
   // See: https://secure.byond.com/docs/ref/skinparams.html
@@ -244,23 +242,10 @@
   var loadedAssetByUrl = {};
 
   var isStyleSheetLoaded = function (node, url) {
-    // Method #1 (works on IE10+)
     var styleSheet = node.sheet;
     if (styleSheet) {
       return styleSheet.rules.length > 0;
     }
-    // Method #2
-    var styleSheets = document.styleSheets;
-    var len = styleSheets.length;
-    for (var i = 0; i < len; i++) {
-      var styleSheet = styleSheets[i];
-      if(styleSheet.href === undefined)
-        continue;
-      if (styleSheet.href.indexOf(url) !== -1) {
-        return styleSheet.rules.length > 0;
-      }
-    }
-    // All methods failed
     return false;
   };
 
@@ -307,11 +292,8 @@
     if (type === 'js') {
       var node = document.createElement('script');
       node.type = 'text/javascript';
-      node.crossOrigin = 'anonymous';
-      // IE8: Prefer non-https protocols
-      node.src = Byond.IS_LTE_IE9
-        ? url.replace('https://', 'http://')
-        : url;
+      node.crossOrigin = 'anonymous';      
+      node.src = url;
       if (sync) {
         node.defer = true;
       }
@@ -331,11 +313,8 @@
     if (type === 'css') {
       var node = document.createElement('link');
       node.type = 'text/css';
-      node.rel = 'stylesheet';
-      // IE8: Prefer non-https protocols
-      node.href = Byond.IS_LTE_IE9
-        ? url.replace('https://', 'http://')
-        : url;
+      node.rel = 'stylesheet';      
+      node.href = url;
       // Temporarily set media to something inapplicable
       // to ensure it'll fetch without blocking render
       if (!sync) {
@@ -395,7 +374,7 @@
       else {
         window.onerror.__stack__ = stack;
       }
-      var textProp = Byond.IS_LTE_IE8 ? 'innerText' : 'textContent';
+      var textProp = 'textContent';
       errorStack[textProp] = window.onerror.__stack__;
     }
     // Set window geometry

diff --git a/tgui/yarn.lock b/tgui/yarn.lock
@@ -1460,7 +1460,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react@npm:^18.2.74":
+"@types/react-dom@npm:^18.2.24":
+  version: 18.2.24
+  resolution: "@types/react-dom@npm:18.2.24"
+  dependencies:
+    "@types/react": "npm:*"
+  checksum: 10c0/9ec38e5ab4727c56ef17bd8e938ead88748ba19db314b8d9807714a5cae430f5b799514667b221b4f2dc8d9b4ca17dd1c3da8c41c083c2de9eddcc31bec6b8ff
+  languageName: node
+  linkType: hard
+
+"@types/react@npm:*, @types/react@npm:^18.2.74":
   version: 18.2.74
   resolution: "@types/react@npm:18.2.74"
   dependencies:
@@ -8316,8 +8325,10 @@ __metadata:
   resolution: "tgui-say@workspace:packages/tgui-say"
   dependencies:
     "@types/react": "npm:^18.2.74"
+    "@types/react-dom": "npm:^18.2.24"
     common: "workspace:*"
     react: "npm:^18.2.0"
+    react-dom: "npm:^18.2.0"
     tgui: "workspace:*"
     tgui-polyfill: "workspace:*"
   languageName: unknown