getting started

bitty is loaded from a <script> tag.
it uses a data-connect attribute to connect to a JavaScript module.
elements with data-s attributes send signals.

elements with data-r attributes receive signals.

<script type="module" src="/bitty-v8.0.0.js"></script>
<bitty-8-0 data-connect="/v8-bits/timestamp.js"></bitty-8-0>

<button data-s="theTime">
  get the time
</button>

<div data-r="theTime">
  waiting
</div>

the module exports an empty `b` object for the connection to bitty.

signals are handled by module functions with the same name.

export const b = {};

export function theTime(_, __, el) {
  el.innerHTML = b.time();
}

for example, the code above produces this button you can use to get the time:

waiting

native events and elements

functions receive three arguments:

the event that triggered the signal.
the element with the data-s attribute that sent the signal.
the element with the data-r attribute receiving the signal.

For example:

<script type="module" src="/bitty-v8.0.0.js"></script>
<bitty-8-0 data-connect="/v8-bits/args-example.js"></bitty-8-0>

<button data-name="The Sender" data-s="argsExample">
  get signal details
</button>

<div data-r="argsExample">
  waiting
</div>

export const b = {};

export function argsExample(ev, sender, el) {
  const eventType = ev.type;
  const senderName = sender.dataset.name;
  el.innerHTML = `${senderName} sent a ${eventType}`;
}

waiting

next steps

that's all you need to get started.
check out the documentation for a full list of features.
there are also examples.