Yet Another Roblox UI Library
Yaruil is fairly simple, it's similar to reactjs and solidjs.
If you want JSX, then you will have to install the transformer.
With JSX, you'll always want to have the Yauril module imported, import * as Yaruil from "@rbxts/yaruil"
Creating an element looks like this: Yaruil.createElement("ScreenGui, {/* props */}, [/* children */])
.
The value of a prop can be a function or a literal.
() => (`count: ${count()}`)
or just simply `count: ${count()}`
Here is an example of a basic component.
import { Players } from "@rbxts/services";
import * as Yaruil from "@rbxts/yaruil";
import { createSignal, render } from "@rbxts/yaruil";
import { childrenLike } from "@rbxts/yaruil/out/util/types";
function Button({ children }: { children?: childrenLike }) {
const [count, setCount] = createSignal(0);
return (
<screengui>
<textbutton
on:MouseButton1Click={() => {
setCount(count() + 1);
}}
Size={new UDim2(0, 100, 0, 100)}
Text={`count: ${count()}`}
>
// we dont know if children is defined
{...children || []}
</textbutton>
</screengui>
);
}
render(
<Button>
<uicorner />
</Button>,
Players.LocalPlayer.WaitForChild("PlayerGui"),
);
It's relatively easy to communicate state.
import { Players } from "@rbxts/services";
import * as Yaruil from "@rbxts/yaruil";
import { createDependency, render } from "@rbxts/yaruil";
import { externalSignal } from "@rbxts/yaruil/out/hooks/externalSignal";
import { childrenLike } from "@rbxts/yaruil/out/util/types";
export const countSignal = externalSignal(1);
// some event happens...
Event.connect((newValue) => countSignal.set(999))
function Button({ children }: { children?: childrenLike }) {
const [count, setCount] = createDependency(countSignal);
return (
<screengui>
<textbutton
on:MouseButton1Click={() => {
setCount(count() + 1);
}}
Size={new UDim2(0, 100, 0, 100)}
Text={() => `count: ${count()}`}
>
{...children || []}
</textbutton>
</screengui>
);
}