# Signals

Source: https://signy.dev/documentation/1/reactivity/signals/

A value that tells the code reading it when it changes.

## Create a signal

Use the class or the factory function. Both make the same thing.

```js
const count = new Signal(0);
const name = signal('Ada');
```

## Read and write

```js
count.value;                 // read, and track it
count.value = 5;             // write
count.set((c) => c + 1);     // write from the previous value
count.peek();                // read without tracking
```

A write with a value equal to the current one, compared with `Object.is`, notifies nobody. Pass `equals` to compare another way.

```js
const point = new Signal({ x: 0, y: 0 }, {
  equals: (a, b) => a.x === b.x && a.y === b.y,
});
```

## In templates

Bind a function to keep a value live. Here the input writes the signal and the paragraph reads it.

```js
const { Component, Signal, application, html } = Signy;

class Greeting extends Component {
  name = new Signal("Ada");

  render() {
    return html`
      <label>
        Name
        <input value="Ada" onInput=${(e) => (this.name.value = e.currentTarget.value)} />
      </label>
      <p>Hello ${() => this.name.value}!</p>
    `;
  }
}

application(Greeting).mount("#signal-name");
```

## Objects and arrays

A signal tracks its value, not what is inside it. Replace an object or array to change it, do not mutate it in place.

```js
todos.set((list) => [...list, newTodo]);          // notifies
todos.value.push(newTodo);                        // does not
```

For nested state you change in place, use a [store](https://signy.dev/documentation/1/reactivity/store/index.html.md).