## About The Pull Request
This started out as just a small fix for dev server crashing but lo, I
cannot keep my hands off of such a juicy rework, it now uses Bun's own
websocket server and is written entirely in typescript. It makes much
more use of console.log (you can see these in client) as well
## Why It's Good For The Game
Lets devs use tgui-dev again
## Changelog
Prettier (an auto formatter) is set to only run within the tgui folder
currently. This removes that limitation, allowing it to automatically
format all supported files in the repo (.js, .html, .yml
[etc](https://prettier.io/docs/))
I made a few exceptions for bundled and generated files
I'm of the opinion that code should look uniform and am lazy enough to
want CTRL-S to format files without having to think beyond that
<!-- Write **BELOW** The Headers and **ABOVE** The comments else it may
not be viewable. -->
<!-- You can view Contributing.MD for a detailed description of the pull
request process. -->
## About The Pull Request
a) updates some dependencies in the project, hopefully fixing this
server lockup bug
b) if a. does not fix it, this uses two separate build methods for tgui.
it's kind of gross, I really dislike that this needs to exist, but
experimental css breaks tgui-dev and css-extract breaks tgui live.
<!-- Describe The Pull Request. Please be sure every change is
documented or this can delay review and even discourage maintainers from
merging your PR! -->
## Why It's Good For The Game
So the server doesn't lock up sometimes
<!-- Argue for the merits of your changes and how they benefit the game,
especially if they are controversial and/or far reaching. If you can't
actually explain WHY what you are doing will improve the game, then it
probably isn't good for the game in the first place. -->
## Changelog
<!-- If your PR modifies aspects of the game that can be concretely
observed by players or admins you should add a changelog. If your change
does NOT meet this description, remove this section. Be sure to properly
mark your PRs to prevent unnecessary GBP loss. You can read up on GBP
and its effects on PRs in the tgstation guides for contributors. Please
note that maintainers freely reserve the right to remove and add tags
should they deem it appropriate. You can attempt to finagle the system
all you want, but it's best to shoot for clear communication right off
the bat. -->
<!-- Write **BELOW** The Headers and **ABOVE** The comments else it may
not be viewable. -->
<!-- You can view Contributing.MD for a detailed description of the pull
request process. -->
## About The Pull Request
The dev server has had an issue where it required devs to press F5 just
to link in for quite some time. Now with 516, it required F5 for *every*
update and would bluescreen at random due to a css issue. This PR fixes
those problems, making the dev server hook in and load updates like it
should. It's interesting to see that both the 515 issue and the 516
issue were simple url problems that have compounded in the same place.
If you're on a downstream and wish to make this change without the
additional typings and conversions to esm, it's just the url - there's
an extra slash in the base url and the dummy file must be dummy.htm /
dummy.html.
Other changes:
- bumps rspack minor version
- readds file system caching that was on webpack
- removes a deprecated module w/ warnings
- converts the debug tgui kitchensink to TS
<!-- Describe The Pull Request. Please be sure every change is
documented or this can delay review and even discourage maintainers from
merging your PR! -->
## Why It's Good For The Game
The tgui dev server should work
Fixes#89387
<!-- Argue for the merits of your changes and how they benefit the game,
especially if they are controversial and/or far reaching. If you can't
actually explain WHY what you are doing will improve the game, then it
probably isn't good for the game in the first place. -->
## About The Pull Request
Old project that I have been waiting on for some time. We can swap out
our javascript bundler with a rust version. We still have webpack to
some extent because sass-loader requests it, but it's unused.
This was originally suggested by stylemistake years ago but it depended
on tgui using a modern browser #90397 and rspack supporting yarn pnp
https://github.com/web-infra-dev/rspack/pull/7639.
I want to also replace jest with vitest for this PR since it's deep
internals and no one else is really tinkering here. Drafting for now
## Why It's Good For The Game
Both of these tools are the drop in replacement of the modern decade
Makes the dev server borderline instant
https://rspack.dev/misc/faq#what-are-the-advantages-of-rspack-compared-to-webpack--swc-loader
## Changelog
## About The Pull Request
> [!IMPORTANT]
> This PR need's a tgui-core v2 release
> Until then, and until I'm sure everything is fine and I'm satisfied,
PR will be in the draft.
> Also TestMerge would be useful as there are quite a lot of changes and
I might have made a mistake somewhere
Moving all SCSS variables to 21th century technology - [CSS
Variables](https://developer.mozilla.org/en-US/docs/Web/CSS/var)
All variables are taken from and depend on tgui-core. However, you are
free to create completely new variables as well as tgui-core-dependent
variables.
This step gives you much more flexibility when creating themes and
manipulating colors
For more details, go
[here](https://github.com/tgstation/tgui-core/pull/112)
Also a few little things:
- Links in chat got a new colors and no underline on hover
- TGsay scrollbar replaced with thin default scrollbar
### Themes
Some themes started to look a little different, as well as more
coherent, since the replaced color changes in all components, not just
the imported ones
<details> <summary> Examples </summary>
Terminal
| Before | After | Before - KitchenSink | After - KitchenSink
| - | - | - | - |
|
|
|
|
|
NTOS95
| Before | After | Before - KitchenSink | After - KitchenSink
| - | - | - | - |
|
|
|
|
|
</details>
These are not all the themes that have received improvements, but in the
rest of them they are small
There may also be bugs, so TestMerge is highly recommended
### TGchat unread counter
I've made some changes into the chat tab unread coutner, you can see it
bellow
It now takes up no space in the tab and has absolute positioning in the
top right corner
### TODO
- [x] Migrate all themes to CSS Variables
- [x] Migrate all UI styles to CSS Variables
- [x] _Test everything I can get with my hands on to make sure nothing
is missing or broken_
Also, I think in the future it would be good to drop color.scss,
base.scss and functions.scss files from the repository and use tgui-core
files.
### Removed as unused style files
I can't find any defined in it classes as used
1. PersonalCrafting.scss
2. TachyonArray.scss
3. UtilityModulesPane.scss
## Why It's Good For The Game
All compiled styles have a much smaller size, as there is no need to use
SCSS to compile themes, in fact it is enough just to change the values
of variables
It also gives you the ability to use custom cursors in themes if you
override --cursor-xxx variables
After all themes migration: 763kb -> 210kb tgui.bundle.css
As well as more consistent colors in the theme and the ability to create
MORE diverse themes, of varying degrees of complexity
And... maybe... light theme for TGUI
## Changelog
🆑
refactor: All TGUI styles was migrated to CSS Variables, if you find
something odd in styles, feel free to make an issue on GitHub
/🆑
---------
Co-authored-by: jlsnow301 <jlsnow301@pm.me>
## About The Pull Request
This
Apparently this was connecting http for ie8 support, which we dropped a
long time ago in #79974.
I added some early returns to the code as well
## Why It's Good For The Game
Code cleanup
## Changelog
n/a
## About The Pull Request
Updates some of the dependencies in tgui. Should have zero gameplay
impact at all.
This puts our typescript version up to 5.4.3! And it detected errors
immediately
## Why It's Good For The Game
Bzzz here comes the airplane
## Changelog
N/A
## About The Pull Request
Moves us from Inferno 7.4.11 to React 18.2. This is a big project! You
might find errors here. Sometimes I get carried away fixing external
issues, I'll try to atomize them into separate PRs.
- [x] Implements React
- [x] CSS kebab to camel case
- [x] Some typescript refactors
- [x] Atomize what I can
- [x] Fix dropdowns (opens in the wrong location)
- [x] Fix wonky button placement in a few UIs
- [x] Cleanup
## Why It's Good For The Game
- It'd be nice to just have real hooks. Our implementation is probably
the best possible for Inferno, don't get me wrong.
- React is just easier to maintain and easier to read. It's the web dev
standard.
Closes#78221
## Changelog
🆑
refactor: TGUI V5: The UI has had its entire engine replaced with React
v18.2. This might cause obvious or laughably broken UIs in places you
wouldn't expect. Please report any issues you find to the repo!
/🆑
---------
Co-authored-by: Mothblocks <35135081+Mothblocks@users.noreply.github.com>
<!-- Write **BELOW** The Headers and **ABOVE** The comments else it may
not be viewable. -->
<!-- You can view Contributing.MD for a detailed description of the pull
request process. -->
## About The Pull Request
We currently transpile TGUI down into ie8. This was primarily for Linux
compatibility, which, to my understanding, hasn't worked for quite some
time. As we approach 2024, consider that ie8 is nearly 15 years old and
had its support ended in 2016. I believe sunsetting ie8 is in order.
>I have no objections to remove IE8 support and fully target IE11.
https://github.com/tgstation/tgstation/issues/79943#issuecomment-1826735705_
<!-- Describe The Pull Request. Please be sure every change is
documented or this can delay review and even discourage maintainers from
merging your PR! -->
## Why It's Good For The Game
- Probably improves performance to some degree, you're only as slow as
your weakest link.
- Reduced maintenance burden
<!-- Argue for the merits of your changes and how they benefit the game,
especially if they are controversial and/or far reaching. If you can't
actually explain WHY what you are doing will improve the game, then it
probably isn't good for the game in the first place. -->
## Changelog
<!-- If your PR modifies aspects of the game that can be concretely
observed by players or admins you should add a changelog. If your change
does NOT meet this description, remove this section. Be sure to properly
mark your PRs to prevent unnecessary GBP loss. You can read up on GBP
and it's effects on PRs in the tgstation guides for contributors. Please
note that maintainers freely reserve the right to remove and add tags
should they deem it appropriate. You can attempt to finagle the system
all you want, but it's best to shoot for clear communication right off
the bat. -->
N/A if they can even see this message it doesn't affect them
<!-- Both 🆑's are required for the changelog to work! You can put
your name to the right of the first 🆑 if you want to overwrite your
GitHub username as author ingame. -->
<!-- You can use multiple of the same prefix (they're only used for the
icon ingame) and delete the unneeded ones. Despite some of the tags,
changelogs should generally represent how a player might be affected by
the changes rather than a summary of the PR's contents. -->
## About The Pull Request
Glob package wasn't resolving tmp folder. Javascript does not clue you
in that the arguments have changed at all. I downgraded the package and
it works.
## Why It's Good For The Game
Dev server is 100% confirmed working I swear if it breaks again I
will... I will...
## Changelog
N/A nothing player facing
## About The Pull Request
Woah! Shiny!
Updates most of tgui's internals. Nothing player facing. Tested and
working
## Why It's Good For The Game
Good housekeeping
## Changelog
N/A nothing player facing
## 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.
