Starbeam

リアクティブプログラミングにフォーカスしたJavaScriptのUIフレームワークっぽい。

サイト： https://www.starbeamjs.com/
リポジトリー： https://github.com/starbeamjs/starbeam

wycatsが開発に参加しているっぽい。

ドキュメントの原則のページに書かれている

We believe that reactive programming should feel like regular programming.
（わたしたちは、リアクティブプログラミングが通常のプログラミングのような感じであるべきだと信じている。）

というのが嬉しい。

北市真

ReactとPreactとは一緒に使えるみたいで、Reactのコード例：

import { useReactive, useSetup } from "@starbeam/react";
import { Cell } from "@starbeam/universal";
import { createRoot } from "react-dom/client";
 
export function Counter() {
  const counter = useSetup(() => Cell(0));
 
  return useReactive(() => (
    <div>
      <button onClick={() => counter.update((c) => c + 1)}>
        ++
      </button>
      <p>{counter.current}</p>
    </div>
  ));
}
 
createRoot(document.querySelector("#root")!).render(
  <Counter />,
);

counterという一つのオブジェクトで参照も更新もやるのがuseStateとは違う。

北市真

Cellが基本的なオブジェクトで、これによってリアクティビティを実現している。

import { Cell } from "@starbeam/universal";

const count = Cell(0);

count.current; // => 0
count.current++;
count.current; // => 1
count.current = 12;
count.current; // => 12
count.set(24);
count.current; // => 24

count.update(prev => prev + 1);

という書き方もできるけど、 .current++とか.current =とかができるから別にいらないよ、とのこと。