コンテンツにスキップ
plasma

@sh1n4ps/plasma-react

@sh1n4ps/plasma-react は、ほとんどのアプリが必要とする 4 つの React primitive を提供します: 1 つの provider コンポーネントと 3 つの hook です。 それ以外 — client インスタンス、query builder、mutator — はすべて @sh1n4ps/plasma-client と @sh1n4ps/plasma-core から得られます。

主な内容

Section titled “主な内容”
  • PlasmaProvider — ツリー内でその下にある hook から client を 利用可能にします。アプリのルートで一度だけ構築します。
  • usePlasma() — context から現在の client を取り出します。 直接使うことは稀で、他の hook が内部的に呼び出します。
  • useLiveQuery(factory, deps) — live query を購読し、現在の スナップショットを返します。deps が変わると再実行します。
  • useMutation<M, K>(name) — { mutate, isPending, error, reset } を返します。レンダー間で identity が安定しています (useEffect の依存配列内でも安全)。
  • usePlasmaFile(ref) — FileRef を { status, url } ハンドルに 解決します。null | undefined も問題なく受け付けます。

主要なパターン

Section titled “主要なパターン”
// provider — client はレンダーツリーの外で構築します。
const plasma = createPlasmaClient({ ... })
plasma.start()


<PlasmaProvider client={plasma}>
  <App />
</PlasmaProvider>


// live-list コンポーネント。
function TodoList() {
  const rows = useLiveQuery(
    () => plasma.db.select().from(todos).where(eq(todos.done, 0)),
    [],
  )
  return <ul>{rows.map((t) => <li key={t.id}>{t.title}</li>)}</ul>
}


// pending 状態を持つ mutation ボタン。
function AddTodoButton() {
  const create = useMutation<typeof mutators, "createTodo">("createTodo")
  return (
    <button
      disabled={create.isPending}
      onClick={() => create.mutate({ id: plasma.newId(), title: "hi", updatedAt: Date.now() })}
    >
      Add
    </button>
  )
}


// file() column からのサムネイル。
function Thumb({ ref }: { ref: FileRef | null | undefined }) {
  const handle = usePlasmaFile(ref)
  if (handle?.status !== "ready" && handle?.status !== "local") return null
  return <img src={handle.url} />
}

全 symbol インデックス

Section titled “全 symbol インデックス”

reference/generated/plasma-react/src 配下にあります。

次に読むページ

Section titled “次に読むページ”