refactor: embrace scope cleanup, restructure code

pkgs/react-charm/__tests__/helpers/renderHook.luau

@@ -0,0 +1,42 @@
+local ReplicatedStorage = game:GetService("ReplicatedStorage")
+
+_G.__ROACT_17_MOCK_SCHEDULER__ = true
+
+local React = require(ReplicatedStorage.Packages.React)
+local ReactRoblox = require(ReplicatedStorage.Packages.ReactRoblox)
+
+type RenderedHook<Props, Result> = {
+	result: Result,
+	rerender: (Props?) -> (),
+	unmount: () -> (),
+}
+
+local function renderHook<Props, Result>(callback: (Props) -> Result, props: Props?): RenderedHook<Props, Result>
+	local root = ReactRoblox.createLegacyRoot(Instance.new("Folder"))
+	local hook = {}
+
+	local function Component(props)
+		hook.result = callback(props)
+	end
+
+	function hook.rerender(newProps)
+		props = newProps or props
+		ReactRoblox.act(function()
+			root:render(React.createElement(Component, props))
+		end)
+	end
+
+	function hook.unmount()
+		ReactRoblox.act(function()
+			root:unmount()
+		end)
+	end
+
+	ReactRoblox.act(function()
+		hook.rerender(props)
+	end)
+
+	return hook
+end
+
+return renderHook

pkgs/react-charm/__tests__/spec.luau

@@ -0,0 +1,15 @@
+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
+	end)
+end
+
+spec("useAtom")
+
+return {}

pkgs/react-charm/__tests__/useAtom.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 useAtom = ReactCharm.useAtom
+local test = suite.test
+
+test("tracks atom state", function()
+	local state = atom(0)
+	local hook = renderHook(function()
+		return useAtom(state)
+	end)
+	assert(hook.result == 0)
+	state(1)
+	assert(hook.result == 1)
+end)
+
+test("accepts a selector", function()
+	local state = atom(0)
+	local hook = renderHook(function()
+		return useAtom(function()
+			return 2 * state()
+		end)
+	end)
+	assert(hook.result == 0)
+	state(1)
+	assert(hook.result == 2)
+end)
+
+test("tracks dependencies", function()
+	local state = atom(0)
+	local hook = renderHook(function()
+		return useAtom(state, { state })
+	end)
+	assert(hook.result == 0)
+	state(1)
+	assert(hook.result == 1)
+	state = atom(0)
+	hook.rerender()
+	assert(hook.result == 0)
+	state(1)
+	assert(hook.result == 1)
+end)
+
+return {}

pkgs/react-charm/default.project.json

@@ -0,0 +1,6 @@
+{
+	"name": "ReactCharm",
+	"tree": {
+		"$path": "src"
+	}
+}

pkgs/react-charm/src/init.luau

@@ -0,0 +1,32 @@
+local Charm = require(script.Parent.Charm)
+local React = require(script.Parent.React)
+
+local listen = Charm.listen
+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)
+
+	useEffect(function()
+		return listen(callback, setState)
+	end, dependencies or {})
+
+	return state
+end
+
+return {
+	useAtom = useAtom,
+}

pkgs/react-charm/wally.toml

@@ -0,0 +1,10 @@
+[package]
+name = "littensy/react-charm"
+version = "0.3.0"
+registry = "https://github.com/UpliftGames/wally-index"
+realm = "shared"
+exclude = ["Charm.luau", "React.luau"]
+
+[dependencies]
+Charm = "littensy/charm@^0.10"
+React = "jsdotlua/react@^17"