docs: rewrite documentation (#25)

* docs: rewrite documentation

* refactor: rename `Molecule` to `Selector`

* refactor: replace all references to molecules

* docs: rephrase intro

* docs: remove italics

* docs: fix typo

* docs: update atom module names

* docs: link example, add file names
This commit is contained in:
richard 2024-10-25 19:53:46 -07:00 • committed by GitHub
parent 833d5f8e86
commit 73ae0e6de4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
17 changed files with 399 additions and 350 deletions

View file

@ -1,15 +1,15 @@
import { Molecule } from "@rbxts/charm";
import { Selector } from "@rbxts/charm";
/**
* A hook that subscribes to changes in the given atom or molecule. The
* 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
* molecule is re-created whenever the dependencies change. Otherwise, the
* selector is re-created whenever the dependencies change. Otherwise, the
* subscription is created once when the component is mounted.
*
* @param molecule The atom or molecule to subscribe to.
* @param callback The atom or selector to subscribe to.
* @param dependencies An array of values that the subscription depends on.
* @returns The current state.
*/
export function useAtom<State>(molecule: Molecule<State>, dependencies?: unknown[]): State;
export function useAtom<State>(callback: Selector<State>, dependencies?: unknown[]): State;

View file

@ -4,23 +4,23 @@ local React = if script.Parent:FindFirstChild("react")
else require(script.Parent.React)
--[=[
A hook that subscribes to changes in the given atom or molecule. The
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
molecule is re-created whenever the dependencies change. Otherwise, the
selector is re-created whenever the dependencies change. Otherwise, the
subscription is created once when the component is mounted.
@param molecule The atom or molecule to subscribe to.
@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>(molecule: Charm.Molecule<State>, dependencies: { any }?): State
local state, setState = React.useState(molecule)
local function useAtom<State>(callback: Charm.Selector<State>, dependencies: { any }?): State
local state, setState = React.useState(callback)
React.useEffect(function()
setState(molecule())
return Charm.subscribe(molecule, setState)
setState(callback())
return Charm.subscribe(callback, setState)
end, dependencies or {})
return state