hakowork/charm
3
0
Fork 0
mirror of https://github.com/littensy/charm.git synced 2026-10-20 17:51:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor!: minimal react api

Browse source
This commit is contained in:
Richard 2024-05-03 01:02:42 -07:00
parent 047be71eaa
commit f2f7a16599
10 changed files with 59 additions and 144 deletions
Download patch file Download diff file Expand all files Collapse all files

42
src/__tests__/react/useAtom.spec.luau Normal file
View file

@ -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

27
src/__tests__/react/useAtomState.spec.luau
View file

@ -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

34
src/__tests__/react/useSetAtom.spec.luau
View file

@ -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

15
src/index.d.ts vendored
View file

@ -65,20 +65,7 @@ declare namespace Charm {
// React
function useAtomState<State>(molecule: Molecule<State>): 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]>;
function useAtom<State>(molecule: Molecule<State>, dependencies?: unknown[]): State;
// Sync

4
src/init.luau
View file

@ -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,

2
src/modules/ReactRoblox.luau
View file

@ -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

27
src/react/useAtom.luau
View file

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

31
src/react/useAtomState.luau
View file

@ -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

15
src/react/useSetAtom.luau
View file

@ -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