## About The Pull Request
The largest change to this is that it updates typescript from 4.3.5 to
4.9.4.
It also does some QoL to update @ types, yarn version, and
typescript-eslint-parser (OPTIONAL)
I did this by:
1. Updating typescript `yarn add typescript`
2. Updating other types `yarn add @types/...`
3. Repackaging typescript (and other) workplace sdks `yarn dlx
@yarnpkg/sdks`
4. Updates yarn via corepack `yarn set version stable`
5. Fixes a couple places where typescript was mad
## Why It's Good For The Game
- I want to do things like make discriminating type unions
- Huge leap into typescript so I can better type out tgui core
- TS >>> JS
## Changelog
N/A Nothing player facing
Co-authored-by: Aleksej Komarov <stylemistake@gmail.com>
## About The Pull Request
**Upgrades:**
- Yarn 3.0
- TypeScript 4.3
- Sass 1.37
- Required some refactoring of `/` into `math.div()` in CSS
**Dependency removals:**
- Removed ESM package, see: https://github.com/standard-things/esm/pull/902
I initially thought it was impossible to stop relying on this package, but fortunately, ES module support in Node 12+ now comes standard and I only had to convert the very few external module imports to `require()` (because Yarn PnP).
I also moved `logging.js` directly into `tgui-dev-server` package, because that's where it is used. One less internal dependency.
**Sidegrades:**
- Removed creation of a common tgui chunk, because in practice it creates unnecessary complexity (devs sometimes get a white screen due to this chunk being invalid) and doesn't really save that much data on CDN, and **definitely** doesn't make tgui load faster.
I think that is all. I tested it a bit and everything seemingly works.
Fixes#56237
Unblocks #56704
Besides fixing the above mentioned issue with ExoFab UI, I fixed a few tgui component bugs and added a few improvements. Not really atomizable, sorry.
Section changes
level property is now gone, section level is automatically calculated.
Nested sections automatically become transparent.
Nested sections are now properly incapsulated and won't inherit properties of parent sections.
This allows using nested non-scrollable sections, while parent is, for example, scrollable.
Tabs changes
Tabs without a parent section will pretend they are a section (and will look as such, with dark background).
Top corners of tabs are a bit rounded to make it look more like a tab.
Background color for selected and hovered tabs (previously it was just an underline).
2px margin around the tabs, to make them stand out a bit from the section background.
Two new props:
fill - Same as <Section fill>
fluid - Tabs use full width of the container.
scrollable property was not implemented because it's a bit complicated (requires converting it into a class, registering its scrollable node with tgui, etc). If you need scrollable, just wrap tabs with a Section like a good man.
Refactoring of Flex, Fix Section scrollable
Getting presets working
wip
Upgrade dependencies
preset notice, tooltip fixes, pod spawnlocation fixes
finishes UI, final polish
quells one travismoment
Apply suggestions from code review
Co-authored-by: Rohesie <rohesie@gmail.com>
better var names
better vars
sound for loop
Further review addressing
runtime fixes
Update code/modules/asset_cache/asset_list_items.dm
Co-authored-by: Rohesie <rohesie@gmail.com>
More review addressing
tgui merge
why was that there
Small improvements
Small Improvements Part 2
dropoff / wall moving improvements
compile!
more fixes
This pull request upgrades Yarn to version 2 (also known as Yarn Berry).
* Update build validator
* Provide inferno in the root level package
* Remove type module from package.json
* Powershell build script
This PR changes the message pipeline a little bit to support list-based messages, which can be annotated with custom data. Function signature of to_chat was slightly changed as well:
// Plain text message
to_chat(client,
type = MESSAGE_TYPE_INFO,
text = "foo")
// HTML message
to_chat(client,
type = MESSAGE_TYPE_INFO,
html = "<span class='notice'>foo</span>")
Old to_chat format is still supported, but handle_whitespace, trailing_newline and confidential flags have no effect. confidential flag could still be revived though, if there is enough merit in it, for example to filter out confidential messages when saving a chat log.
The reason for using /list and not /datum, is because lists are plain faster, and there are minimal data transformations - these lists are fed directly to json_encode and sent to tgchat.
Plain text messages do not need to be HTML-escaped, which makes them safer and more performant than HTML messages. Plain text messages can be made interactive (or formatted with CSS) by custom-handling them in javscript based on message type and annotations.
It would be impossible to annotate every single message in the game (at the moment of writing, there are 9447 to_chat calls in the code), but it could be done selectively, for only those messages that are hard to classify by span classes (and there are still A LOT of them).
Please annotate more messages. Thank you.
Fixes#52943Fixes#52908Fixes#52816
Changelog
cl
add: tgchat: Unread message count is now smarter and won't increase on other tabs if you have already read the same message in the active tab.
add: tgchat: Admin PMs are now properly annotated and can be filtered into separate tabs.
fix: tgchat: Fix: Highlighted message overlay no longer blocks clicks. Clicking a highlighted (F) link should work as it should.
fix: tgui: Fixed NTOS bluescreen due to calling .includes() on a stylesheet href which could be null on certain browsers.
code: tgchat: Chat schema bumped to version 5. All chat-related settings were reset to avoid breakage.
/cl
Replaces goonchat with a tgui based chat panel
Fixes#52898Fixes#52663
It is as fast as goonchat was (if not faster in certain circumstances), and is very extensible. It has all the necessary code for sorting messages into categories, which means that one of the next features will be multiple tab support.
Additional features that you will get with tgchat right now:
Massively faster server-side performance compared to goonchat, especially if batching multiple messages to one client.
Message persistence across rounds and reconnects. (All messages are stored client-side in IndexedDB)
More robust scroll tracking. If you scroll up, it will not change the scroll position on new messages like goonchat did.
Multiple message combining. (Currently set to combine up to 5 messages over last 5 seconds).
If using the highlighting feature, it highlights the whole message as well as the matching word.
"Now playing" widget, with preview of the song title, a knob for adjusting the volume and a stop button.
Architecture is as following:
```
to_chat() -+
|
SSchat
(queue, batching)
|
window.send_message()
|
v
+-------------+
| tgui-panel |
|+-----------+|
|| tgchat ||
|+-----------+|
+-------------+
```
Subsystem is basically goonchat, but without all the garbage that slows the servers down (string concatenation, double urlencoding, sanitizing, etc). Now, instead of all that, it's being slowed down by json_encode in /datum/tgui_window/proc/send_message, which IMO is completely worth it, and allows sending various templates and widgets to tgchat.
/datum/tgui_window abstracts the whole window away from you, establishes a nice message-passing interface between DM and JS, with two message queues on each side, automatically loads js/css assets for you, basically does everything. You as a developer only have to worry about sending/receiving messages and write javascript.
tgui-panel is a slimmed down version of tgui, and functions as a container for various widgets, and tgchat is one of them. It of course can be expanded with more stuff.
It's also a separate entry point and a JS bundle, so it's not bloating the main tgui bundle, and is currently sitting at about 230kB.
