Documentation

connect

Connect an object or array to the forest so that it can be observed.

We use the default context. If we want to have multiple contexts, we can create them with make which will return a new isolated set of functions (connect, observe, etc.).

import { connect } from "tilia"

const alice = connect({
  name: "Alice",
  birthday: dayjs("2015-05-24"),
  age: 10,
})open Tilia

let alice = connect({
  name: "Alice",
  birthday: dayjs("2015-05-24"),
  age: 10,
})

Alice can now be observed. Who knows what she will be doing?

observe

Observe and react to changes. Every time the callback is run, tilia registers which values are read in the connected objects and arrays and will notify the observer if any of these values changed.

import { observe } from "tilia"

observe(() => {
  console.log("Alice is now", alice.age, "years old !!")
})open Tilia

observe(() => {
  Js.log3("Alice is now", alice.age, "years old !!")
})

Now every time alice's age changes, the callback will be called.

signal

Use signal to represent a value that changes, such as a date, a number, a variant or even the app as it goes through its life cycle.

import { signal } from "tilia"

// Ending signals with '_' can be useful to avoid name collisions and to recognize them.
const [now_, setNow] = signal(dayjs())

setInterval(() => setNow(dayjs()), 1000 * 60)

// To read the value, we simply do
console.log(now_.value)open Tilia

// Ending signals with '_' can be useful to avoid name collisions and to recognize them.
let (now_, setNow) = signal(dayjs())

ignore(setInterval(() => setNow(dayjs()), 1000 * 60))

// To read the value, we simply do
Js.log(now_.value)

function signal<a>(value: a): Signal<a> {
  const s = connect({ value })
  const set = (v) => (s.value = v)
  return [s, set]
}let signal = (value) => {
  let s = connect({ value: value })
  let set = v => s.value = v
  (s, set)
}

Our app knows the date ! Let's see how we can update Alice's age from this value.

computed

Compute a value from other connected objects.

import { computed } from "tilia"

const alice = connect({
  name: "Alice",
  birthday: dayjs("2015-05-24"),
  age: computed(() => now_.value.diff(alice.birthday, "year")),
})open Tilia
open Day

let alice = connect({
  name: "Alice",
  birthday: dayjs("2015-05-24"),
  age: 0,
})
alice.age = computed(() => now_.value->diff(alice.birthday, "year"))

Nice, the age updates automatically, Alice can grow older. Let's wish her a happy birthday when this happens.

observe to update

You can also use observe to update a value from the current value and other connected objects.

import { observe, signal } from "tilia"

const [userAge_, setUserAge] = signal(alice.age)

observe(() => {
  if (alice.age !== userAge_.value) {
    setUserAge(alice.age)
    console.log("Alice is now", alice.age, "years old !!")
    console.log("🥳🩷 Happy Birthday Alice !! 🩷🥳")
  }
})open Tilia

let (userAge_, setUserAge) = signal(alice.age)

observe(() => {
  if alice.age !== userAge_.value {
    setUserAge(alice.age)
    Js.log3("Alice is now", alice.age, "years old !!")
    Js.log("🥳🩷 Happy Birthday Alice !! 🩷🥳")
  }
})

This pattern lets us create state machines that are very useful for initialisation or other complex states. See app.ts for an example.

We feel good with our app now. It only wishes a happy birthday when the age changes, it knows the age of Alice.

Maybe we can use this to manage access to a social media ?

derived

Derive a signal from other connected objects (other signals or values).

import { derived } from "tilia"

const socialMediaAllowed_ = derived(() => userAge_.value > 13)open Tilia

let socialMediaAllowed_ = derived(() => userAge_.value > 13)

function derived<a>(fn: () => a): Signal<a> {
  return connect({ value: computed(fn) })
}let derived = fn =>
  connect({ value: computed(fn) })

useTilia (React Hook)

The useTilia hook registers the component to observe state changes, automatically triggering a re-render whenever any observed value updates.

This hooks makes the component's render function act like an observe callback.

npm install @tilia/react@canary

import { useTilia } from "@tilia/react"

function App() {
  useTilia()

  if (socialMediaAllowed_.value === true) {
    return <SocialMediaApp />
  } else {
    return <NormalApp />
  }
}open TiliaReact

@react.component
let make = () => {
  useTilia()

  if (socialMediaAllowed_.value === true) {
    <SocialMedia />
  } else {
    <NormalApp />
  }
}