Fusion 0.3 JSX Typings

Fork from @rbxts/hotfusion and @rbxts/fusion

Install this fork with your preferred package manager of choice:

``bash


npm


npm i @rbxts/fusion-0.3-temp
`

JSX

Configure the jsx option in your tsconfig.json:

`json
"compilerOptions": {
"jsx": "react",
"jsxFactory": "Fusion.jsx",
}
`

$3

For limitations with JSX, you need to pass a scope as the Scope property for
all instances & components.
For components, the scope should be defined as the 2nd argument since jsx interprets the 1st argument as the props (is there a workaround?)

`ts
declare function Counter(props: {
number: UsedAs
}, scope: Scope): Child


`

$3

Given this code, how do we translate it into JSX syntax?

`lua
local OnHover: SpecialKey = {
type = "SpecialKey",
kind = "OnHover",
stage = "observer",
apply = function(scope, value, applyTo)
-- do something with applyTo
end
}
return scope:New "Frame" {
[Children] = scope:New "TextLabel" {
[OnHover] = true,
[OnEvent "Activated"] = print()
}
}
`

JSX disallows using objects as keys. Therefore, SpecialKeys cannot be specified
as property keys. For this, Hotfusion implements the Uses property allowing
you to use special keys.

Either pass in a tuple of [SpecialKey, value], or an Array<[SpecialKey,
value]>:

`tsx
const OnHover: SpecialKey = {
type: "SpecialKey",
kind: "OnHover",
stage: "observer",
apply(scope, value, applyTo) {
// do something with applyTo
}
}
return (


Uses={[
[OnEvent("Activated"), () => print("clicked")],
[OnHover, true],
]}
/>

)
`

Some built-in special keys can be specified directly:

- OnEvent("eventName") = function can be written as OnEvent:eventName={() =>
{}}
- OnChange("propertyName") = function can be written as
OnChange:propertyName={() => {}}
- Out("propertyName") = setValue can be written as Out:propertyName={setValue}`

Original README

Rediscover the joy of coding.

Code is more dynamic, complex and intertwined than ever before. Errors cascade
out of control, things update in the wrong order, and it's all connected by
difficult, unreadable spaghetti.

No longer. Fusion introduces modern 'reactive' concepts for managing code, so
you can spend more time getting your logic right, and less time implementing
buggy boilerplate code connections.

Starting from simple roots, concepts neatly combine and build up with very little
learning curve. At every stage, you can robustly guarantee what your code will
do, and when you come back in six months, your code is easy to pick back up.

Piqued your interest? Get going in minutes with our on-rails tutorial.

Issues & contributions

Have you read our contribution guide? It's a real page turner!

We highly recommend reading it before opening an issue or pull request.

License

Fusion is licensed freely under MIT. Go do cool stuff with it, and if you feel
like it, give us a shoutout!