Starbeam

Starbeam is a library for building reactive data methods that mix natively
with UI frameworks such as React, Vue, Svelte or Ember.

It interoperates natively with React advise administration patterns, Svelte shops,
the Vue composition API, and Ember’s auto-tracking machine.

Starbeam Reactivity

Starbeam’s reactivity is in accordance with a in point of fact easy, but extremely efficient, knowing:

• You label your mutable advise as reactive. Individual pieces of mutable advise are known as data cells.
• You use customary functions (or getters) to compute values in accordance with your mutable advise.
• That you simply may well well flip a characteristic proper into a formula cell to robotically cache it, and this would most probably greatest recompute when the facts cells it uses change.
• You use resources to compute values that require structured cleanup.

We call this sequence of values the data universe. The data universe is repeatedly internally coherent. Whenever you mutate your advise, you may well well most probably be ready to call any characteristic that depends on the mutable advise, and that characteristic will witness an up-to-date model of the advise.

Procedure, too, are repeatedly up to this level. When you change a data cell that a formula depends on, and quiz the formula for its contemporary tag, the formula will repeatedly kind a tag that is up to this level. You by no manner must wretchedness about worn data.

The data universe becomes reactive whereas you happen to lumber it into your UI framework. Whenever you lumber it into your UI framework, any adjustments to the facts universe may well be reflected in your UI robotically.

📝 Collectively, data cells and formula cells are known as cells.

Knowledge Cells and Procedure

Making It In type

Plugging it into your UI

React

import { use } from "@starbeam/react";
import { InchCounter } from "#shared";

export characteristic MeasureInches() {
  const inches = use(InchCounter);

  return (
    <>
      <button onClick={inches.increment}>Increment Inches</button>
      <div>{inches.description}</div>
    </>
  );
}

Svelte

Vue

<script>
import { InchCounter } from "#shared";

export default {
  setup() {
    const inches = InchCounter();

    return {
      inches,
    };
  },
};
script>

<template>
  <button v-on: click="inches.increment">Increment Inchesbutton>
  <div>{{ inches.description }}div>
template>

Sources

So what is a resource? A resource is a reactive tag, merely like our InchCounter above, that requires some cleanup. When you utilize a resource, you link it to an proprietor object, and when the proprietor object is cleaned up, the resource may well be cleaned up as effectively. In note, extra regularly than now not, the proprietor object is a side in your UI framework.

The RemoteData Handy resource

In this situation, we’ll produce a RemoteData resource that will acquire data from a much away server.

Show cover: We produce now not call this the acquire resource, because a resource represents a tag now not a job with a starting and stopping level. Thanks to this, the resource is linked, 1:1, to the proprietor object.

Inner of the RemoteData characteristic, we use the Handy resource characteristic to present a brand unusual resource. The Handy resource constructor takes a characteristic, which we call the “resource constructor”. The resource constructor returns a cell that represents its contemporary tag. When code uses the resource, its tag may well most probably well be the contemporary tag of the reactive tag.

A resource constructor is is named once, when the resource is first conventional. A resource constructor:

• creates interior cells to lend a hand a watch on its advise
• connects to any stateful exterior objects it needs to lend a hand a watch on, such as a network connection
• describes how to disconnect from these exterior objects when the resource is cleaned up
• returns a cell that represents the resource’s contemporary tag

💡 A resource can use mutable advise internally, and it can work collectively with the crucial world, then again it exposes the messy outdoors world as a cell that may well be conventional in the facts universe like several assorted cell, collectively with in assorted formula and even assorted resources.

Using it in React

Now that we bear defined our data universe, we want to lumber it into React to present a reactive machine.

import { use } from "@starbeam/react";

characteristic UserCard({ username }: { username: string }) {
  // when `username` adjustments, we luminous up the conventional `RemoteData` resource and produce a brand unusual one.
  const user = use(
    () => RemoteData(`https://api.github.com/users/${username}`),
    [username]
  );

  if (user.kind === "loading") {
    return <div>Loading...</div>;
  } else if (user.kind === "error") {
    return <div>Error: {user.error.message}</div>;
  } else {
    return <div>{user.data.title}</div>;
  }
}

In precept, we may well most probably well flip RemoteData proper into a React hook that abstracts the dependencies for once and for all. The useRemoteData hook would gain a URL, and at any time when the URL adjustments, it would luminous up the conventional resource and produce a brand unusual one.

import { use } from "@starbeam/react";

characteristic useRemoteData<T>(url: string) {
  return use(() => RemoteData(url), [url]);
}

And now we can use it in our app:

;
} else if (user.kind === “error”) {
return

;
} else {
return

;
}
}”>

import { useRemoteData } from "#hooks/a ways away-data";

characteristic UserCard({ username }: { username: string }) {
  const user = useRemoteData(`https://api.github.com/users/${username}`);

  if (user.kind === "loading") {
    return <div>Loading...</div>;
  } else if (user.kind === "error") {
    return <div>Error: {user.error.message}</div>;
  } else {
    return <div>{user.data.title}</div>;
  }
}