tgui: Refactor Asset Delivery (tgstation#54895)

* tgui: Refactor Asset Delivery

* Re-enable printing of initial backend update payload

* Fix oopsie woopsie hotkey, tgui.html syntax and ntos flavor

.vscode/extensions.json

@@ -1,8 +1,9 @@
 {
-    "recommendations": [
-        "gbasood.byond-dm-language-support",
-        "platymuus.dm-langclient",
-        "EditorConfig.EditorConfig",
-        "dbaeumer.vscode-eslint"
-    ]
+	"recommendations": [
+		"gbasood.byond-dm-language-support",
+		"platymuus.dm-langclient",
+		"EditorConfig.EditorConfig",
+		"arcanis.vscode-zipfs",
+		"dbaeumer.vscode-eslint"
+	]
 }

.vscode/settings.json

@@ -1,16 +1,18 @@
 {
+	"eslint.nodePath": "tgui/.yarn/sdks",
 	"eslint.workingDirectories": [
 		"./tgui"
 	],
-
+	"search.exclude": {
+		"tgui/.yarn": true,
+		"tgui/.pnp.*": true
+	},
 	"workbench.editorAssociations": [
 		{
 			"filenamePattern": "*.dmi",
 			"viewType": "imagePreview.previewEditor"
 		}
 	],
-
 	"files.eol": "\n",
-
 	"gitlens.advanced.blame.customArguments": ["-w"]
 }

code/modules/tgui/tgui_window.dm

@@ -71,21 +71,21 @@
 	// Generate page html
 	var/html = SStgui.basehtml
 	html = replacetextEx(html, "\[tgui:windowId]", id)
-	// Process inline assets
-	var/inline_styles = ""
-	var/inline_scripts = ""
+	// Inject inline assets
+	var/inline_assets_str = ""
 	for(var/datum/asset/asset in inline_assets)
 		var/mappings = asset.get_url_mappings()
 		for(var/name in mappings)
 			var/url = mappings[name]
-			// Not urlencoding since asset strings are considered safe
+			// Not encoding since asset strings are considered safe
 			if(copytext(name, -4) == ".css")
-				inline_styles += "<link rel=\"stylesheet\" type=\"text/css\" href=\"[url]\">\n"
+				inline_assets_str += "Byond.loadCss('[url]', true);\n"
 			else if(copytext(name, -3) == ".js")
-				inline_scripts += "<script type=\"text/javascript\" defer src=\"[url]\"></script>\n"
+				inline_assets_str += "Byond.loadJs('[url]', true);\n"
 		asset.send(client)
-	html = replacetextEx(html, "<!-- tgui:styles -->\n", inline_styles)
-	html = replacetextEx(html, "<!-- tgui:scripts -->\n", inline_scripts)
+	if(length(inline_assets_str))
+		inline_assets_str = "<script>\n" + inline_assets_str + "</script>\n"
+	html = replacetextEx(html, "<!-- tgui:assets -->\n", inline_assets_str)
 	// Inject custom HTML
 	html = replacetextEx(html, "<!-- tgui:html -->\n", inline_html)
 	// Open the window

tgui/.yarn/sdks/eslint/bin/eslint.js

@@ -0,0 +1,20 @@
+#!/usr/bin/env node
+
+const {existsSync} = require(`fs`);
+const {createRequire, createRequireFromPath} = require(`module`);
+const {resolve, dirname} = require(`path`);
+
+const relPnpApiPath = "../../../../.pnp.js";
+
+const absPnpApiPath = resolve(__dirname, relPnpApiPath);
+const absRequire = (createRequire || createRequireFromPath)(absPnpApiPath);
+
+if (existsSync(absPnpApiPath)) {
+  if (!process.versions.pnp) {
+    // Setup the environment to be able to require eslint/bin/eslint.js
+    require(absPnpApiPath).setup();
+  }
+}
+
+// Defer to the real eslint/bin/eslint.js your application uses
+module.exports = absRequire(`eslint/bin/eslint.js`);

tgui/.yarn/sdks/eslint/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "eslint",
+  "version": "7.4.0-pnpify",
+  "main": "./lib/api.js",
+  "type": "commonjs"
+}

tgui/.yarn/sdks/integrations.yml

@@ -0,0 +1,5 @@
+# This file is automatically generated by PnPify.
+# Manual changes will be lost!
+
+integrations:
+  - vscode

tgui/global.d.ts

@@ -97,11 +97,21 @@ interface ByondType {
   winset(id: string, propName: string, propValue: any): void;
 
   /**
-   * Parses BYOND JSON
+   * Parses BYOND JSON.
    *
    * Uses a special encoding to preverse Infinity and NaN.
    */
   parseJson(text: string): any;
+
+  /**
+   * Loads a stylesheet into the document.
+   */
+  loadCss(url: string): void;
+
+  /**
+   * Loads a script into the document.
+   */
+  loadJs(url: string): void;
 }
 
 declare const Byond: ByondType;

tgui/packages/tgui-panel/styles/main.scss

@@ -30,7 +30,6 @@
 @include meta.load-css('~tgui/styles/components/Dimmer.scss');
 @include meta.load-css('~tgui/styles/components/Divider.scss');
 @include meta.load-css('~tgui/styles/components/Dropdown.scss');
-@include meta.load-css('~tgui/styles/components/FatalError.scss');
 @include meta.load-css('~tgui/styles/components/Flex.scss');
 @include meta.load-css('~tgui/styles/components/Input.scss');
 @include meta.load-css('~tgui/styles/components/Knob.scss');

tgui/packages/tgui/assets.js

@@ -4,76 +4,17 @@
  * @license MIT
  */
 
-import { loadCSS as fgLoadCss } from 'fg-loadcss';
-import { createLogger } from './logging';
-
-const logger = createLogger('assets');
-
 const EXCLUDED_PATTERNS = [/v4shim/i];
-const RETRY_ATTEMPTS = 5;
-const RETRY_INTERVAL = 3000;
-
-const loadedStyleSheetByUrl = {};
 const loadedMappings = {};
 
-export const loadStyleSheet = (url, attempt = 1) => {
-  if (loadedStyleSheetByUrl[url]) {
-    return;
-  }
-  loadedStyleSheetByUrl[url] = true;
-  logger.log(`loading stylesheet '${url}'`);
-  /** @type {HTMLLinkElement} */
-  let node = fgLoadCss(url);
-  node.addEventListener('load', () => {
-    if (!isStyleSheetReallyLoaded(node, url)) {
-      node.parentNode.removeChild(node);
-      node = null;
-      loadedStyleSheetByUrl[url] = null;
-      if (attempt >= RETRY_ATTEMPTS) {
-        logger.error(`Error: Failed to load the stylesheet `
-          + `'${url}' after ${RETRY_ATTEMPTS} attempts.\nIt was either `
-          + `not found, or you're trying to load an empty stylesheet `
-          + `that has no CSS rules in it.`);
-        return;
-      }
-      setTimeout(() => loadStyleSheet(url, attempt + 1), RETRY_INTERVAL);
-      return;
-    }
-  });
-};
-
-/**
- * Checks whether the stylesheet was registered in the DOM
- * and is not empty.
- */
-const isStyleSheetReallyLoaded = (node, url) => {
-  // Method #1 (works on IE10+)
-  const styleSheet = node.sheet;
-  if (styleSheet) {
-    return styleSheet.rules.length > 0;
-  }
-  // Method #2
-  const styleSheets = document.styleSheets;
-  const len = styleSheets.length;
-  for (let i = 0; i < len; i++) {
-    const styleSheet = styleSheets[i];
-    if (styleSheet.href.includes(url)) {
-      return styleSheet.rules.length > 0;
-    }
-  }
-  // All methods failed
-  logger.warn(`Warning: stylesheet '${url}' was not found in the DOM`);
-  return false;
-};
-
 export const resolveAsset = name => (
   loadedMappings[name] || name
 );
 
 export const assetMiddleware = store => next => action => {
   const { type, payload } = action;
   if (type === 'asset/stylesheet') {
-    loadStyleSheet(payload);
+    Byond.loadCss(payload);
     return;
   }
   if (type === 'asset/mappings') {
@@ -86,7 +27,10 @@ export const assetMiddleware = store => next => action => {
       const ext = name.split('.').pop();
       loadedMappings[name] = url;
       if (ext === 'css') {
-        loadStyleSheet(url);
+        Byond.loadCss(url);
+      }
+      if (ext === 'js') {
+        Byond.loadJs(url);
       }
     }
     return;

tgui/packages/tgui/backend.js

@@ -189,6 +189,9 @@ export const backendMiddleware = store => {
 
     // Resume on incoming update
     if (type === 'backend/update' && suspended) {
+      // Show the payload
+      logger.log('backend/update', payload);
+      // Signal renderer that we have resumed
       resumeRenderer();
       // Setup drag
       setupDrag();

tgui/packages/tgui/debug/middleware.js

@@ -24,7 +24,7 @@ export const debugMiddleware = store => {
     if (key.code === KEY_F12) {
       store.dispatch(toggleKitchenSink());
     }
-    if (key.ctrl && key.shift && key.code === KEY_BACKSPACE) {
+    if (key.ctrl && key.alt && key.code === KEY_BACKSPACE) {
       // NOTE: We need to call this in a timeout, because we need a clean
       // stack in order for this to be a fatal error.
       setTimeout(() => {

tgui/packages/tgui/package.json

@@ -5,7 +5,6 @@
   "dependencies": {
     "common": "workspace:*",
     "dompurify": "^2.0.12",
-    "fg-loadcss": "^3.1.0",
     "inferno": "^7.4.2",
     "inferno-vnode-flags": "^7.4.2",
     "marked": "^1.1.1",

tgui/packages/tgui/styles/main.scss

@@ -23,7 +23,6 @@
 @include meta.load-css('./components/Dimmer.scss');
 @include meta.load-css('./components/Divider.scss');
 @include meta.load-css('./components/Dropdown.scss');
-@include meta.load-css('./components/FatalError.scss');
 @include meta.load-css('./components/Flex.scss');
 @include meta.load-css('./components/Icon.scss');
 @include meta.load-css('./components/Input.scss');