cyberpresidentvanellope/Aurora.3
1
0
Fork 0
mirror of https://github.com/Aurorastation/Aurora.3.git synced 2026-08-31 00:49:06 +01:00
Code Issues Packages Projects Releases Wiki Activity

Bun, Inferno->React migration (#22529)

Browse Source 
Re-creation of https://github.com/Aurorastation/Aurora.3/pull/21046 to
skip merge conflict hell. Brings us modern TGUI.

**ALTERNATE TITLE: TGUI HELLSCAPE PR
ABANDON ALL HOPE YE WHO ENTER HERE**

- [x] Migrate build tools (javascript -> typescript, bun for package
management).
- [x] Upgrade all TGUI dependencies and associated root files to
TG-congruent versions (axios, babel, dompurify, eslint, highlight,
marked, prettier, sass, source-map, stacktrace-parser, typescript).
- [x] InfernoJS -> React migrations
- [x] React cleanup and polish (migrate all remaining .js files to
appropriate .ts or .tsx filetype, all remaining hooks, linting, error
corrections, etc.)
- [ ] Test all remaining TGUI interfaces
This commit is contained in:
Batrachophreno
2026-06-05 15:55:22 +02:00
committed by GitHub
parent a52729c105
commit 0d92359da7
930 changed files with 23130 additions and 50520 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tgui/docs/tutorial-and-examples.md
+78 -73
View File
@@ -124,31 +124,31 @@ snippet (make sure component name matches the file name):
```jsx
import { useBackend } from '../backend';
import { Button, LabeledList, Section } from '../components';
import { Button, LabeledList, Section } from 'tgui-core/components';
import { Window } from '../layouts';
export const SampleInterface = (props, context) => {
const { act, data } = useBackend(context);
// Extract `health` and `color` variables from the `data` object.
const { health, color } = data;
return (
<Window resizable>
<Window.Content scrollable>
<Section title="Health status">
<LabeledList>
<LabeledList.Item label="Health">{health}</LabeledList.Item>
<LabeledList.Item label="Color">{color}</LabeledList.Item>
<LabeledList.Item label="Button">
<Button
content="Dispatch a 'test' action"
onClick={() => act('test')}
/>
</LabeledList.Item>
</LabeledList>
</Section>
</Window.Content>
</Window>
);
export const SampleInterface = (props) => {
const { act, data } = useBackend(context);
// Extract `health` and `color` variables from the `data` object.
const { health, color } = data;
return (
<Window>
<Window.Content scrollable>
<Section title="Health status">
<LabeledList>
<LabeledList.Item label="Health">{health}</LabeledList.Item>
<LabeledList.Item label="Color">{color}</LabeledList.Item>
<LabeledList.Item label="Button">
<Button
content="Dispatch a 'test' action"
onClick={() => act('test')}
/>
</LabeledList.Item>
</LabeledList>
</Section>
</Window.Content>
</Window>
);
};
```
@@ -188,11 +188,11 @@ After compiling the code above, this is what it becomes:
```js
createElement(
'div',
{ className: 'color-' + status },
'You are in ',
status,
' condition!',
'div',
{ className: 'color-' + status },
'You are in ',
status,
' condition!',
);
```
@@ -227,11 +227,11 @@ and builds a new array based on what was returned by that function.
```jsx
<LabeledList>
{items.map((item) => (
<LabeledList.Item key={item.id} label={item.label}>
{item.content}
</LabeledList.Item>
))}
{items.map((item) => (
<LabeledList.Item key={item.id} label={item.label}>
{item.content}
</LabeledList.Item>
))}
</LabeledList>
```
@@ -246,31 +246,31 @@ JSX code, and wrap it into a second, smaller React component:
```jsx
import { useBackend } from '../backend';
import { Button, LabeledList, Section } from '../components';
import { Button, LabeledList, Section } from 'tgui-core/components';
import { Window } from '../layouts';
export const SampleInterface = (props, context) => {
return (
<Window resizable>
<Window.Content scrollable>
<HealthStatus user="Jerry" />
</Window.Content>
</Window>
);
export const SampleInterface = (props) => {
return (
<Window>
<Window.Content scrollable>
<HealthStatus user="Jerry" />
</Window.Content>
</Window>
);
};
const HealthStatus = (props, context) => {
const { act, data } = useBackend(context);
const { user } = props;
const { health, color } = data;
return (
<Section title={'Health status of: ' + user}>
<LabeledList>
<LabeledList.Item label="Health">{health}</LabeledList.Item>
<LabeledList.Item label="Color">{color}</LabeledList.Item>
</LabeledList>
</Section>
);
const HealthStatus = (props) => {
const { act, data } = useBackend(context);
const { user } = props;
const { health, color } = data;
return (
<Section title={'Health status of: ' + user}>
<LabeledList>
<LabeledList.Item label="Health">{health}</LabeledList.Item>
<LabeledList.Item label="Color">{color}</LabeledList.Item>
</LabeledList>
</Section>
);
};
```
@@ -292,7 +292,7 @@ upon code review):
data["var"] = var
return data
/obj/copypasta/ui_act(action, params)
/obj/copypasta/ui_act(action, list/params, datum/tgui/ui, datum/ui_state/state)
if(..())
return
switch(action)
@@ -308,25 +308,30 @@ And the template:
```jsx
import { useBackend } from '../backend';
import { Button, LabeledList, Section } from '../components';
import { Button, LabeledList, Section } from 'tgui-core/components';
import { Window } from '../layouts';
export type UIData = {
}
export const SampleInterface = (props, context) => {
const { act, data } = useBackend<UIData>(context);
return (
<Window resizable theme="">
<Window.Content scrollable>
<Section title="Title">
</Section>
</Window.Content>
</Window>
);
export const SampleInterface = (props) => {
const { act, data } = useBackend(context);
// Extract `health` and `color` variables from the `data` object.
const { health, color } = data;
return (
<Window>
<Window.Content scrollable>
<Section title="Health status">
<LabeledList>
<LabeledList.Item label="Health">{health}</LabeledList.Item>
<LabeledList.Item label="Color">{color}</LabeledList.Item>
<LabeledList.Item label="Button">
<Button
content="Dispatch a 'test' action"
onClick={() => act('test')}
/>
</LabeledList.Item>
</LabeledList>
</Section>
</Window.Content>
</Window>
);
};
```