littensy / rbxts-roact-hooked Goto Github PK

View Code? Open in Web Editor NEW

16.0 2.0 3.0 179 KB

Roact hooks based on Kampfkarren's implementation & React Hooks

License: MIT License

TypeScript 54.80% Lua 45.20%

rbxts-roact-hooked's Introduction

@rbxts/roact-hooked

Roact hooks based on Kampfkarren's hooks & React Hooks

Install

npm install @rbxts/roact-hooked

Usage with hook detection

Version 2.4.0 adds the withHookDetection function to allow hooks in function components without manually using HOCs.

It modifies Roact.createElement to detect hook use and wrap them in withHooks or withHooksPure HOCs.

// MyComponent.tsx
import Roact from "@rbxts/roact";
import { markPureComponent, useEffect, useState } from "@rbxts/roact-hooked";

interface Props {
	name?: string;
}

export default function MyComponent({ name = "David Baszucki" }: Props) {
	const [count, setCount] = useState(0);

	useEffect(() => {
		print("Counter: " + count);
	}, [count]);

	return (
		<textbutton
			Size={new UDim2(1, 0, 1, 0)}
			Text={`${name} pressed ${count} times`}
			Event={{
				Activated: () => setCount((value) => value + 1),
			}}
		/>
	);
}

// Optional: mark the component as a PureComponent
markPureComponent(MyComponent);

// mount.client.ts
import Roact from "@rbxts/roact";
import { withHookDetection } from "@rbxts/roact-hooked";
import { Players } from "@rbxts/services";
import MyComponent from "./MyComponent";

withHookDetection(Roact);

Roact.mount(<MyComponent />, Players.LocalPlayer.WaitForChild("PlayerGui"));

Usage with HOCs

Using the HOCs directly is still possible if you do not want to modify Roact.createElement for hook detection.

import Roact from "@rbxts/roact";
import { withHooks, withHooksPure, useEffect, useState } from "@rbxts/roact-hooked";

interface Props {
	name?: string;
}

function MyComponent({ name = "David Baszucki" }: Props) {
	const [count, setCount] = useState(0);

	useEffect(() => {
		print("Counter: " + count);
	}, [count]);

	return (
		<textbutton
			Size={new UDim2(1, 0, 1, 0)}
			Text={`${name} pressed ${count} times`}
			Event={{
				Activated: () => setCount((value) => value + 1),
			}}
		/>
	);
}

export default withHooks(MyComponent);

// Optional: wrap the FC in a PureComponent instead
export default withHooksPure(MyComponent);

rbxts-roact-hooked's People

Contributors

Stargazers

Watchers

Forkers

spectrius qromp firere

rbxts-roact-hooked's Issues

Move `stories` outside of `src`

I don't want to keep this directory in src, but I do not know how to move it outside while also including it in roblox-ts for testing in Roblox Studio

withHookDetection returns `void`

Looking at the source code, withHookDetection() should return Roact?.

Version conflicts result in unusual behavior with Hooks

Functions like resolveCurrentComponent() do not return the same component between different versions of roact-hooked. So, packages that provide useful hooks should use roact-hooked as a peer dependency.

However, should resolveCurrentComponent() be consistent between different instances, anyways? It would keep track of rendering components with _G to make it less error-prone.

Is this change worth it, or would a descriptive error message be enough?

useState set function types are incorrect

const [attributeValue, setAttributeValue] = useState(instance?.GetAttribute(attribute));
useEffect(() => setAttributeValue(instance?.GetAttribute(attribute)), [instance, attribute]);

setAttributeValue() claims it returns void, but actually returns the new state.

In my case, this caused effect.destroy to become true:
https://github.com/littensy/rbxts-roact-hooked/blob/master/src/hooks.lua#L156

Which then caused this check to pass:
https://github.com/littensy/rbxts-roact-hooked/blob/master/src/hooks.lua#L150

Which then throws an error here, because it's doing coroutine.create(true):
https://github.com/littensy/rbxts-roact-hooked/blob/master/src/NoYield.lua#L30