[Upstream] TGUI Chores (#2543)

code/controllers/subsystem/tgui.dm

@@ -25,6 +25,10 @@ SUBSYSTEM_DEF(tgui)
 
 /datum/controller/subsystem/tgui/PreInit()
 	basehtml = file2text('tgui/public/tgui.html')
+	// Inject inline polyfills
+	var/polyfill = file2text('tgui/public/tgui-polyfill.min.js')
+	polyfill = "<script>\n[polyfill]\n</script>"
+	basehtml = replacetextEx(basehtml, "<!-- tgui:inline-polyfill -->", polyfill)
 
 /datum/controller/subsystem/tgui/Shutdown()
 	close_all_uis()

code/modules/tgui/tgui.dm

@@ -97,7 +97,7 @@
 	if(!window.is_ready())
 		window.initialize(
 			fancy = (user.client.prefs.toggles & PREFTOGGLE_2_FANCY_TGUI),
-			inline_assets = list(
+			assets = list(
 				get_asset_datum(/datum/asset/simple/tgui),
 			))
 	else

code/modules/tgui/tgui_window.dm

@@ -18,8 +18,11 @@
 	var/message_queue
 	var/sent_assets = list()
 	// Vars passed to initialize proc (and saved for later)
-	var/inline_assets
-	var/fancy
+	var/initial_fancy
+	var/initial_assets
+	var/initial_inline_html
+	var/initial_inline_js
+	var/initial_inline_css
 
 /**
  * public
@@ -44,19 +47,24 @@
  * state. You can begin sending messages right after initializing. Messages
  * will be put into the queue until the window finishes loading.
  *
- * optional inline_assets list List of assets to inline into the html.
+ * optional assets list List of assets to inline into the html.
  * optional inline_html string Custom HTML to inject.
  * optional fancy bool If TRUE, will hide the window titlebar.
  */
 /datum/tgui_window/proc/initialize(
-		inline_assets = list(),
+		fancy = FALSE,
+		assets = list(),
 		inline_html = "",
-		fancy = FALSE)
+		inline_js = "",
+		inline_css = "")
 	log_tgui(client, "[id]/initialize")
 	if(!client)
 		return
-	src.inline_assets = inline_assets
-	src.fancy = fancy
+	src.initial_fancy = fancy
+	src.initial_assets = assets
+	src.initial_inline_html = inline_html
+	src.initial_inline_js = inline_js
+	src.initial_inline_css = inline_css
 	status = TGUI_WINDOW_LOADING
 	fatally_errored = FALSE
 	// Build window options
@@ -69,9 +77,9 @@
 	// Generate page html
 	var/html = SStgui.basehtml
 	html = replacetextEx(html, "\[tgui:windowId]", id)
-	// Inject inline assets
+	// Inject assets
 	var/inline_assets_str = ""
-	for(var/datum/asset/asset in inline_assets)
+	for(var/datum/asset/asset in assets)
 		var/mappings = asset.get_url_mappings()
 		for(var/name in mappings)
 			var/url = mappings[name]
@@ -85,8 +93,17 @@
 	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)
+	// Inject inline HTML
+	if (inline_html)
+		html = replacetextEx(html, "<!-- tgui:inline-html -->", inline_html)
+	// Inject inline JS
+	if (inline_js)
+		inline_js = "<script>\n[inline_js]\n</script>"
+		html = replacetextEx(html, "<!-- tgui:inline-js -->", inline_js)
+	// Inject inline CSS
+	if (inline_css)
+		inline_css = "<style>\n[inline_css]\n</style>"
+		html = replacetextEx(html, "<!-- tgui:inline-css -->", inline_css)
 	// Open the window
 	client << browse(html, "window=[id];[options]")
 	// Detect whether the control is a browser
@@ -314,7 +331,12 @@
 			client << link(href_list["url"])
 		if("cacheReloaded")
 			// Reinitialize
-			initialize(inline_assets = inline_assets, fancy = fancy)
+			initialize(
+				fancy = initial_fancy,
+				assets = initial_assets,
+				inline_html = initial_inline_html,
+				inline_js = initial_inline_js,
+				inline_css = initial_inline_css)
 			// Resend the assets
 			for(var/asset in sent_assets)
 				send_asset(asset)

code/modules/tgui_panel/tgui_panel.dm

@@ -42,7 +42,7 @@
 	sleep(1)
 	initialized_at = world.time
 	// Perform a clean initialization
-	window.initialize(inline_assets = list(
+	window.initialize(assets = list(
 		get_asset_datum(/datum/asset/simple/tgui_panel),
 	))
 	window.send_asset(get_asset_datum(/datum/asset/simple/namespaced/fontawesome))

dependencies.sh

@@ -14,8 +14,8 @@ export RUST_VERSION=1.54.0
 export RUST_G_VERSION=0.4.7.1
 
 #node version
-export NODE_VERSION=12
-export NODE_VERSION_PRECISE=12.22.4
+export NODE_VERSION=14
+export NODE_VERSION_PRECISE=14.16.1
 
 # SpacemanDMM git tag
 export SPACEMAN_DMM_VERSION=suite-1.7.1

tgui/.gitignore

@@ -16,6 +16,7 @@ package-lock.json
 /public/.tmp/**/*
 /public/**/*
 !/public/*.html
+!/public/tgui-polyfill.min.js
 /coverage
 
 ## Previously ignored locations that are kept to avoid confusing git

tgui/.yarnrc.yml

@@ -10,6 +10,8 @@ plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
     spec: "@yarnpkg/plugin-interactive-tools"
 
+pnpEnableEsmLoader: false
+
 preferAggregateCacheInfo: true
 
 preferInteractive: true

tgui/README.md

@@ -23,6 +23,13 @@ This project uses **Inferno** - a very fast UI rendering engine with a similar A
 
 If you were already familiar with an older, Ractive-based tgui, and want to translate concepts between old and new tgui, read this [interface conversion guide](docs/converting-old-tgui-interfaces.md).
 
+### Other Documentation
+
+- [Component Reference](docs/component-reference.md) - UI building blocks
+- [Using TGUI and Byond API for custom HTML popups](docs/tgui-for-custom-html-popups.md)
+- [Chat Embedded Components](docs/chat-embedded-components.md)
+- [Writing Tests](docs/writing-tests.md)
+
 ## Pre-requisites
 
 If you are using the tooling provided in this repo, everything is included! Feel free to skip this step.
@@ -32,10 +39,11 @@ If you are using the tooling provided in this repo, everything is included! Feel
 - [Git Bash](https://git-scm.com/downloads)
   or [MSys2](https://www.msys2.org/) (optional)
 
-- [Node v12.20+](https://nodejs.org/en/download/)
+- [Node v16.13+](https://nodejs.org/en/download/)
+  - **LTS** release is recommended instead of latest
   - **DO NOT install Chocolatey if Node installer asks you to!**
 - [Yarn v1.22.4+](https://yarnpkg.com/getting-started/install)
-  - You only need to run `npm install -g yarn`.
+  - You can run `npm install -g yarn` to install it.
 
 ## Usage
 
@@ -86,8 +94,10 @@ Run `yarn install` once to install tgui dependencies.
 - `yarn tgui:test` - Run unit and integration tests.
 - `yarn tgui:analyze` - Run a bundle analyzer.
 - `yarn tgui:bench` - Run benchmarks.
+- `yarn tgfont:build` - Build icon fonts.
+- `yarn tgui-polyfill:build` - Build polyfills. You need to run it when updating any of the static (numbered) polyfills.
 
-## Important memo
+## Important Memo
 
 Remember to always run a full build of tgui before submitting a PR, because it comes with the full suite of CI checks, and runs much faster on your computer than on GitHub servers. It will save you some time and possibly a few broken commits! Address the issues that are reported by the tooling as much as possible, because maintainers will beat you with a ruler and force you to address them anyway (unless it's a false positive or something unfixable).
 
@@ -142,10 +152,6 @@ When developing with `tgui-dev-server`, you will have access to certain developm
 - `/packages/tgui/styles/layouts` - Layout-related styles.
 - `/packages/tgui/styles/themes` - Contains themes that you can use in tgui. Each theme must be registered in `/packages/tgui/index.js` file.
 
-## Component Reference
-
-See: [Component Reference](docs/component-reference.md).
-
 ## License
 
 Source code is covered by /tg/station's parent license - **AGPL-3.0** (see the main [README](../README.md)), unless otherwise indicated.

tgui/docs/component-reference.md

@@ -74,8 +74,6 @@ to understand what this is about.
 - Lower case names are native browser events and should be used sparingly,
 for example when you need an explicit IE8 support. **DO NOT** use
 lowercase event handlers unless you really know what you are doing.
-- [Button](#button) component does not support the lowercase `onclick` event.
-Use the camel case `onClick` instead.
 
 ## `tgui/components`