feat: add peek and roblox-ts types

packages/react-charm/src/__tests__/helpers/renderHook.luau

@@ -13,11 +13,11 @@ local function renderHook<Props, Result>(callback: (Props) -> Result, props: Pro
 	local root = ReactRoblox.createLegacyRoot(Instance.new("Folder"))
 	local hook = {}
 
-	local function Component(props)
+	local function Component(props: Props)
 		hook.result = callback(props)
 	end
 
-	function hook.rerender(newProps)
+	function hook.rerender(newProps: Props?)
 		props = newProps or props
 		ReactRoblox.act(function()
 			root:render(React.createElement(Component, props))

packages/react-charm/src/__tests__/spec.luau

@@ -1,15 +1,11 @@
 local suite = require("../../../../test/suite")
 
-suite.describe("react-charm", function()
-	if not game then
-		return suite.skip()
-	end
-	suite.describe("useAtom", function()
-		require("./useAtom.spec")
-	end)
-	suite.describe("useAtomBinding", function()
-		require("./useAtomBinding.spec")
-	end)
+suite.describe("useAtom", function()
+	require("./useAtom.spec")
+end)
+
+suite.describe("useAtomBinding", function()
+	require("./useAtomBinding.spec")
 end)
 
 return {}

packages/react-charm/src/index.d.ts

@@ -1 +1,29 @@
-export {};
+import { Binding } from "@rbxts/react";
+
+/**
+ * A hook that subscribes to changes in the given atom or selector. The
+ * component is re-rendered with the new state after an update.
+ *
+ * If the `dependencies` array is provided, a new effect is created for the
+ * current `callback` when the dependencies change. Otherwise, the effect is
+ * created only once, when the component is mounted.
+ *
+ * @param callback The atom or selector to watch.
+ * @param dependencies An array of values used to memoize the callback.
+ * @returns The current state.
+ */
+export function useAtom<T>(callback: () => T, dependencies?: any[]): T;
+
+/**
+ * A hook that subscribes to changes in the given atom or selector. Returns
+ * a binding that updates when the state changes.
+ *
+ * If the `dependencies` array is provided, a new effect is created for the
+ * current `callback` when the dependencies change. Otherwise, the effect is
+ * created only once, when the component is mounted.
+ *
+ * @param callback The atom or selector to watch.
+ * @param dependencies An array of values used to memoize the callback.
+ * @returns A binding that stores the current state.
+ */
+export function useAtomBinding<T>(callback: () => T, dependencies?: any[]): Binding<T>;

packages/react-charm/src/init.luau

@@ -8,21 +8,21 @@ local useState = React.useState
 local useMemo = React.useMemo
 
 --- A hook that subscribes to changes in the given atom or selector. The
---- component is re-rendered whenever the state changes.
+--- component is re-rendered with the new state after an update.
 ---
---- If the `dependencies` array is provided, the effect is re-created whenever
---- the dependencies change. Otherwise, the subscription is created once when
---- the component is mounted.
+--- If the `dependencies` array is provided, a new effect is created for the
+--- current `callback` when the dependencies change. Otherwise, the effect is
+--- created only once, when the component is mounted.
 ---
---- @param selector The atom or selector to subscribe to.
---- @param dependencies An array of values that the subscription depends on.
+--- @param callback The atom or selector to watch.
+--- @param dependencies An array of values used to memoize the callback.
 --- @return The current state.
-local function useAtom<State>(selector: () -> State, dependencies: { any }?): State
-	local state, setState = useState(selector)
+local function useAtom<T>(callback: () -> T, dependencies: { any }?): T
+	local state, setState = useState(callback)
 
 	useEffect(function()
 		return effect(function()
-			setState(selector())
+			setState(callback())
 		end)
 	end, dependencies or {})
 
@@ -32,20 +32,20 @@ end
 --- A hook that subscribes to changes in the given atom or selector. Returns
 --- a binding that updates when the state changes.
 ---
---- If the `dependencies` array is provided, the effect is re-created whenever
---- the dependencies change. Otherwise, the subscription is created once when
---- the component is mounted.
+--- If the `dependencies` array is provided, a new effect is created for the
+--- current `callback` when the dependencies change. Otherwise, the effect is
+--- created only once, when the component is mounted.
 ---
---- @param selector The atom or selector to subscribe to.
---- @param dependencies An array of values that the subscription depends on.
+--- @param callback The atom or selector to watch.
+--- @param dependencies An array of values used to memoize the callback.
 --- @return A binding that stores the current state.
-local function useAtomBinding<State>(selector: () -> State, dependencies: { any }?)
-	local initialState = useMemo(selector, {})
+local function useAtomBinding<T>(callback: () -> T, dependencies: { any }?)
+	local initialState = useMemo(callback, {})
 	local binding, setBinding = useBinding(initialState)
 
 	useEffect(function()
 		return effect(function()
-			setBinding(selector())
+			setBinding(callback())
 		end)
 	end, dependencies or {})