refactor: improve logic

pkgs/react-charm/src/init.luau

@@ -1,32 +1,56 @@
 local Charm = require(script.Parent.Charm)
 local React = require(script.Parent.React)
 
-local listen = Charm.listen
+local effect = Charm.effect
+local useBinding = React.useBinding
 local useEffect = React.useEffect
 local useState = React.useState
 
---[=[
-	A hook that subscribes to changes in the given atom or selector. The
-	component is re-rendered whenever the state changes.
-	
-	If the `dependencies` array is provided, the subscription to the atom or
-	selector is re-created whenever the dependencies change. Otherwise, the
-	subscription is created once when the component is mounted.
-	
-	@param callback The atom or selector to subscribe to.
-	@param dependencies An array of values that the subscription depends on.
-	@return The current state.
-]=]
-local function useAtom<State>(callback: () -> State, dependencies: { any }?): State
-	local state, setState = useState(callback)
+--- A hook that subscribes to changes in the given atom or selector. The
+--- component is re-rendered whenever 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.
+---
+--- @param selector The atom or selector to subscribe to.
+--- @param dependencies An array of values that the subscription depends on.
+--- @return The current state.
+local function useAtom<State>(selector: () -> State, dependencies: { any }?): State
+	local state, setState = useState(selector)
 
 	useEffect(function()
-		return listen(callback, setState)
+		return effect(function()
+			setState(selector())
+		end)
 	end, dependencies or {})
 
 	return state
 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.
+---
+--- @param selector The atom or selector to subscribe to.
+--- @param dependencies An array of values that the subscription depends on.
+--- @return A binding that stores the current state.
+local function useAtomBinding<State>(selector: () -> State, dependencies: { any }?)
+	local binding, setBinding = useBinding(selector)
+
+	useEffect(function()
+		return effect(function()
+			setBinding(selector())
+		end)
+	end, dependencies or {})
+
+	return binding
+end
+
 return {
 	useAtom = useAtom,
+	useAtomBinding = useAtomBinding,
 }

pkgs/react-charm/tests/spec.luau

@@ -2,16 +2,13 @@ local ServerScriptService = game:GetService("ServerScriptService")
 
 local suite = require(ServerScriptService.Tests.suite)
 
-local describe = suite.describe
-
-local function spec(name: string)
-	describe(name, function()
-		return require(`./{name}.spec`) :: any
+suite.describe("react-charm", function()
+	suite.describe("useAtom", function()
+		require("./useAtom.spec")
+	end)
+	suite.describe("useAtomBinding", function()
+		require("./useAtomBinding.spec")
 	end)
-end
-
-describe("react-charm", function()
-	spec("useAtom")
 end)
 
 return {}

pkgs/react-charm/tests/useAtomBinding.spec.luau

@@ -0,0 +1,50 @@
+local ReplicatedStorage = game:GetService("ReplicatedStorage")
+local ServerScriptService = game:GetService("ServerScriptService")
+
+local Charm = require(ReplicatedStorage.Packages.Charm)
+local ReactCharm = require(ReplicatedStorage.Packages.ReactCharm)
+local renderHook = require(script.Parent.helpers.renderHook)
+local suite = require(ServerScriptService.Tests.suite)
+
+local atom = Charm.atom
+local useAtomBinding = ReactCharm.useAtomBinding
+local test = suite.test
+
+test("tracks atom state", function()
+	local state = atom(0)
+	local hook = renderHook(function()
+		return useAtomBinding(state)
+	end)
+	assert(hook.result:getValue() == 0, "should return 0")
+	state(1)
+	assert(hook.result:getValue() == 1, "should return 1")
+end)
+
+test("accepts a selector", function()
+	local state = atom(0)
+	local hook = renderHook(function()
+		return useAtomBinding(function()
+			return 2 * state()
+		end)
+	end)
+	assert(hook.result:getValue() == 0, "should return 0")
+	state(1)
+	assert(hook.result:getValue() == 2, "should return 2")
+end)
+
+test("tracks dependencies", function()
+	local state = atom(0)
+	local hook = renderHook(function()
+		return useAtomBinding(state, { state })
+	end)
+	assert(hook.result:getValue() == 0, "should return 0")
+	state(1)
+	assert(hook.result:getValue() == 1, "should return 1")
+	state = atom(0)
+	hook.rerender()
+	assert(hook.result:getValue() == 0, "should return 0")
+	state(1)
+	assert(hook.result:getValue() == 1, "should return 1")
+end)
+
+return {}