refactor!: minimal react api

README.md

@@ -65,11 +65,7 @@ Charm = "littensy/charm@VERSION"
 
 ### React
 
-#### `useAtom(atom, selector?)`
+#### `useAtom(atom, dependencies?)`
-
-#### `useAtomState(atom)`
-
-#### `useSetAtom(atom)`
 
 ### Sync
 

src/__tests__/react/useAtom.spec.luau

@@ -0,0 +1,42 @@
+local atom = require(script.Parent.Parent.Parent.atom)
+local useAtom = require(script.Parent.Parent.Parent.react.useAtom)
+local renderHook = require(script.Parent.helpers.renderHook)
+
+return function()
+	it("tracks atom state", function()
+		local source = atom(0)
+		local hook = renderHook(function()
+			return useAtom(source)
+		end)
+		expect(hook.result).to.equal(0)
+		source(1)
+		expect(hook.result).to.equal(1)
+	end)
+
+	it("accepts a molecule", function()
+		local source = atom(0)
+		local hook = renderHook(function()
+			return useAtom(function()
+				return 2 * source()
+			end)
+		end)
+		expect(hook.result).to.equal(0)
+		source(1)
+		expect(hook.result).to.equal(2)
+	end)
+
+	it("tracks dependencies", function()
+		local source = atom(0)
+		local hook = renderHook(function()
+			return useAtom(source, { source })
+		end)
+		expect(hook.result).to.equal(0)
+		source(1)
+		expect(hook.result).to.equal(1)
+		source = atom(0)
+		hook.rerender()
+		expect(hook.result).to.equal(0)
+		source(1)
+		expect(hook.result).to.equal(1)
+	end)
+end

src/__tests__/react/useAtomState.spec.luau

@@ -1,27 +0,0 @@
-local atom = require(script.Parent.Parent.Parent.atom)
-local useAtomState = require(script.Parent.Parent.Parent.react.useAtomState)
-local renderHook = require(script.Parent.helpers.renderHook)
-
-return function()
-	it("tracks atom state", function()
-		local source = atom(0)
-		local hook = renderHook(function()
-			return useAtomState(source)
-		end)
-		expect(hook.result).to.equal(0)
-		source(1)
-		expect(hook.result).to.equal(1)
-	end)
-
-	it("receives a selector", function()
-		local source = atom(0)
-		local hook = renderHook(function()
-			return useAtomState(source, function(value)
-				return 2 * value
-			end)
-		end)
-		expect(hook.result).to.equal(0)
-		source(1)
-		expect(hook.result).to.equal(2)
-	end)
-end

src/__tests__/react/useSetAtom.spec.luau

@@ -1,34 +0,0 @@
-local atom = require(script.Parent.Parent.Parent.atom)
-local useSetAtom = require(script.Parent.Parent.Parent.react.useSetAtom)
-local renderHook = require(script.Parent.helpers.renderHook)
-
-return function()
-	it("sets atom state", function()
-		local source = atom(0)
-		local hook = renderHook(function()
-			return useSetAtom(source)
-		end)
-		expect(hook.result).to.be.a("function")
-		hook.result(1)
-		expect(source()).to.equal(1)
-	end)
-
-	it("returns a stable function", function()
-		local source = atom(0)
-		local hook = renderHook(function()
-			return useSetAtom(source)
-		end)
-		local fn = hook.result
-		hook.rerender()
-		expect(hook.result).to.equal(fn)
-	end)
-
-	it("memoizes the function", function()
-		local hook = renderHook(function(props)
-			return useSetAtom(props.source)
-		end, { source = atom(0) })
-		local fn = hook.result
-		hook.rerender({ source = atom(1) })
-		expect(hook.result).to.never.equal(fn)
-	end)
-end

src/index.d.ts

@@ -65,20 +65,7 @@ declare namespace Charm {
 
 	// React
 
-	function useAtomState<State>(molecule: Molecule<State>): State;
+	function useAtom<State>(molecule: Molecule<State>, dependencies?: unknown[]): State;
-
-	function useAtomState<State, Result>(molecule: Molecule<State>, selector: (state: State) => Result): Result;
-
-	function useSetAtom<State>(molecule: Molecule<State>): (state: State | ((prev: State) => State)) => void;
-
-	function useAtom<State>(
-		molecule: Molecule<State>,
-	): LuaTuple<[state: State, setState: (state: State | ((prev: State) => State)) => void]>;
-
-	function useAtom<State, Result>(
-		molecule: Molecule<State>,
-		selector: (state: State) => Result,
-	): LuaTuple<[state: Result, setState: (state: Result | ((prev: Result) => Result)) => void]>;
 
 	// Sync
 

src/init.luau

@@ -7,8 +7,6 @@ local map = require(script.map)
 local observe = require(script.observe)
 local peek = require(script.peek)
 local useAtom = require(script.react.useAtom)
-local useAtomState = require(script.react.useAtomState)
-local useSetAtom = require(script.react.useSetAtom)
 local store = require(script.store)
 local subscribe = require(script.subscribe)
 local sync = require(script.sync)
@@ -26,8 +24,6 @@ return {
 	observe = observe,
 	peek = peek,
 	useAtom = useAtom,
-	useAtomState = useAtomState,
-	useSetAtom = useSetAtom,
 	batch = store.batch,
 	capture = store.capture,
 	notify = store.notify,

src/modules/ReactRoblox.luau

@@ -5,5 +5,5 @@ local Packages = if Package.Parent:FindFirstChild("ReactRoblox")
 
 type ReactRoblox = typeof(require(Package.Parent.ReactRoblox))
 
--- [INFO] It's safe to require this module since it's only used in unit tests.
+-- It's safe to require this module since it's only used in unit tests.
 return (if Packages then require(Packages.ReactRoblox) else nil) :: ReactRoblox

src/react/useAtom.luau

@@ -1,18 +1,19 @@
+local requireReact = require(script.Parent.Parent.modules.React)
+local subscribe = require(script.Parent.Parent.subscribe)
 local types = require(script.Parent.Parent.types)
-type Atom<T> = types.Atom<T>
+type Molecule<T> = types.Molecule<T>
-local useAtomState = require(script.Parent.useAtomState)
-local useSetAtom = require(script.Parent.useSetAtom)
 
-type UseAtom =
+local function useAtom<State>(molecule: Molecule<State>, dependencies: { any }?): State
-	(<State>(atom: Atom<State>) -> (State, useSetAtom.SetState<State>))
+	local React = requireReact()
-	& (<State, Result>(
-		atom: Atom<State>,
-		selector: ((State) -> Result)?
-	) -> (State | Result, useSetAtom.SetState<State | Result>))
-	& (<State, Result>(atom: Atom<State>, selector: (State) -> Result) -> (Result, useSetAtom.SetState<State>))
 
-local function useAtom<State>(atom: Atom<State>, selector: ((State) -> State)?): (State, useSetAtom.SetState<State>)
+	local state, setState = React.useState(molecule)
-	return useAtomState(atom, selector), useSetAtom(atom)
+
+	React.useEffect(function()
+		setState(molecule())
+		return subscribe(molecule, setState)
+	end, dependencies or {})
+
+	return state
 end
 
-return useAtom :: UseAtom
+return useAtom

src/react/useAtomState.luau

@@ -1,31 +0,0 @@
-local requireReact = require(script.Parent.Parent.modules.React)
-local subscribe = require(script.Parent.Parent.subscribe)
-local types = require(script.Parent.Parent.types)
-type Atom<T> = types.Atom<T>
-
-type UseAtomState =
-	(<State>(atom: Atom<State>) -> State)
-	& (<State, Result>(atom: Atom<State>, ((State) -> Result)?) -> State | Result)
-	& (<State, Result>(atom: Atom<State>, selector: (State) -> Result) -> Result)
-
-local function useAtomState<State>(atom: Atom<State>, selector: ((State) -> State)?): State
-	local React = requireReact()
-
-	local state, setState = React.useState(function()
-		return if selector then selector(atom()) else atom()
-	end)
-
-	local latestSelector = React.useRef(selector)
-	latestSelector.current = selector
-
-	React.useEffect(function()
-		return subscribe(atom, function(state)
-			local selector = latestSelector.current
-			setState(if selector then selector(state) else state)
-		end)
-	end, { atom })
-
-	return state
-end
-
-return useAtomState :: UseAtomState

src/react/useSetAtom.luau

@@ -1,15 +0,0 @@
-local requireReact = require(script.Parent.Parent.modules.React)
-local types = require(script.Parent.Parent.types)
-type Atom<T> = types.Atom<T>
-
-export type SetState<T> = (T | ((T) -> T)) -> ()
-
-local function useSetAtom<State>(atom: Atom<State>): SetState<State>
-	local React = requireReact()
-
-	return React.useCallback(function(state: State | ((State) -> State)): ()
-		atom(state)
-	end, { atom })
-end
-
-return useSetAtom