documentation

connecting bitty

data-connect

Description

Each <bitty-8> requires a data-connect attribute.
The attribute defines the path to the JavaScript module to load.
Modules must contain an export const b = {} in order to work with bitty.
Multiple <bitty-8> tags can be placed on a single page.
Multiple modules can contain functions with the same name. Each will respond to incoming signals regardless of their source.

Examples

Make a connection to a module.

HTML

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0005-bitty-connection/data-connect/0010-basic-connection/test_javascript.js"></bitty-8>

<div data-r="signal_B1D0F_v1">waiting</div>
<button data-s="signal_B1D0F_v1">Send B1D0F_v1</button>

JavaScript

export const b = {};

export function signal_B1D0F_v1(ev, sender, el) {
  el.innerHTML = b.time();
}

Result

waiting

view test harness

bitty tag for the example

<!-- the bitty tag for this example is embedded directly in the example HTML -->

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0005-bitty-connection/data-connect/0010-basic-connection/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_B1D0F_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_B1D0F_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

Load multiple bitty modules on the same page.

HTML

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0005-bitty-connection/data-connect/0020-multiple-instances/test_javascript.js"></bitty-8>

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0005-bitty-connection/data-connect/0020-multiple-instances/test_javascript_2.js"></bitty-8>

<div data-r="signal_A2EB2_v1">waiting</div>
<button data-s="signal_A2EB2_v1">Send A2EB2_v1</button>

<div data-r="signal_A2EB2_v2">waiting</div>
<button data-s="signal_A2EB2_v2">Send A2EB2_v2</button>

JavaScript

export const b = {};

export function signal_A2EB2_v1(ev, sender, el) {
  el.innerHTML = b.time();
}

export const b = {};

export function signal_A2EB2_v2(ev, sender, el) {
  el.innerHTML = b.time();
}

Result

waiting

view test harness

bitty tag for the example

<!-- the bitty tags for this example is embedded directly in the example HTML -->

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0005-bitty-connection/data-connect/0020-multiple-instances/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_A2EB2_v1]").click();
  b.qs("[data-s~=signal_A2EB2_v2]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;

  const checkEls = b.qsa("[data-r~=signal_A2EB2_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });

  const checkEls2 = b.qsa("[data-r~=signal_A2EB2_v2]");
  checkEls2.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

All modules with a signal function name respond to it.

HTML

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0005-bitty-connection/data-connect/0030-same-name/test_javascript.js"></bitty-8>

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0005-bitty-connection/data-connect/0030-same-name/test_javascript_2.js"></bitty-8>

<div data-r="signal_9E5B8_v2" class="example">waiting</div>
<div data-r="signal_9E5B8_v3" class="example">waiting</div>

<button data-s="signal_9E5B8_v1">Send 9E5B8_v1</button>

JavaScript

export const b = {};

export function signal_9E5B8_v1(ev, sender, el) {
  /************************************************
   * This function receives the initial
   * `signal_9E5B8_v1` then triggers `signal_9E5B8_v2`
   * which is unique to this module.
   ************************************************/
  b.trigger("signal_9E5B8_v2");
}

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

export const b = {};

export function signal_9E5B8_v1(ev, sender, el) {
  /************************************************
   * This function receives the initial
   * `signal_9E5B8_v1` then triggers `signal_9E5B8_v3`
   * which is unique to this module.
   ************************************************/
  b.trigger("signal_9E5B8_v3");
}

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

Result

waiting

Notes

[x] Each of these modules contains the same function named signal_9E5B8_v1.
[x] When that signal is received, each one triggers another signal to an independent function (signal_9E5B8_v2 in the first module and signal_9E5B8_v3 in the second).

view test harness

bitty tag for the example

<!-- the bitty tags for this example is embedded directly in the example HTML -->

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0005-bitty-connection/data-connect/0030-same-name/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_9E5B8_v1]").click();
  b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;

  const checkEls = b.qsa("[data-r~=signal_9E5B8_v2]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });

  const checkEls2 = b.qsa("[data-r~=signal_9E5B8_v3]");
  checkEls2.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

initialization functions

Description

[x] An init key can be passed in the export const b = {} to run initialization functions.
[x] The value can one or more functions to call.
[x] Functions can be async but are not awaited (i.e. if you need for things to happen only after the initialization process you can use b.trigger() at the end to first the other functions).

Examples

Run an initialize function.

HTML

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

JavaScript

export const b = {
  init: "init_DD933_v1",
};

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

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0005-bitty-connection/init-functions/0010-init-function/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0005-bitty-connection/init-functions/0010-init-function/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=init_DD933_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

Run multiple initialization functions.

HTML

<div data-r="init_03BAD_v1">waiting</div>
<div data-r="init_03BAD_v2">waiting</div>

JavaScript

export const b = {
  init: "init_03BAD_v1 init_03BAD_v2",
};

export function init_03BAD_v1(ev, sender, el) {
  el.innerHTML = b.time();
}

export function init_03BAD_v2(ev, sender, el) {
  el.innerHTML = b.time();
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0005-bitty-connection/init-functions/0020-init-functions/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0005-bitty-connection/init-functions/0020-init-functions/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=init_03BAD_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
  const checkEls2 = b.qsa("[data-r~=init_03BAD_v2]");
  checkEls2.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

await async init functions.

HTML

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

JavaScript

export const b = {
  init: "init_235BC_v1",
};

export async function init_235BC_v1(_, __, el) {
  const t1 = performance.now();
  await b.sleep(100);
  const t2 = performance.now();
  if ((t2 - t1) > 80) {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0005-bitty-connection/init-functions/0030-init-async/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0005-bitty-connection/init-functions/0030-init-async/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=init_235BC_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

html attributes

data-listen

Description

bitty listens for click and input events on data-s elements by default.
The data-listen attribute can be used to change the events that an element listens for.
If a data-listen attribute is used the element stops listening for the default click and input events.
The default click and input events can be added back in as part of the data-listen to continue listening for them.

Examples

Listen for a different type of event.

HTML

<div data-r="signal_0C853_v1" class="example">waiting</div>
<div 
  data-listen="keydown" 
  data-s="signal_0C853_v1" 
  contenteditable="true"
  class="style_signal_0C853_v1"
></div>

JavaScript

export const b = {};

export function signal_0C853_v1(ev, sender, el) {
  el.innerHTML = b.time();
}

Result

waiting

Notes

This example uses a keydown listener to allow automated testing (e.g. compared to a mouseover which is harder to automate)
bitty provides a mapKey() function that's likely to be of more use if you need to monitor key presses. Details on it are below.

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0010-data-attributes/data-listen/0010-custom-signal/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0010-data-attributes/data-listen/0010-custom-signal/test_verification_javascript.js"></bitty-8>

<style>
.style_signal_0C853_v1 {
  background-color: var(--faded-info-color);
  border-radius: var(--default-border-radius);
  border: var(--accent-border);
  height: 3rem;
  padding: var(--default-padding);
  width: 10rem;
}
</style>

Verification JavaScript

export const b = {};

export async function runTest() {
  await b.sleep(200);

  const event_signal_0C853_v1 = new KeyboardEvent("keydown", {
    key: "a",
    bubbles: true,
    cancelable: true,
  });
  b.qs("[data-s~=signal_0C853_v1]").dispatchEvent(event_signal_0C853_v1);

  // add to innerHTML as well for the visual update.
  // It doesn't affect the test. It helps avoid
  // confusion that would occur if there was
  // nothing in the div after the test was run.
  b.qs("[data-s~=signal_0C853_v1]").innerHTML = "a";

  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_0C853_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

The default event types (i.e. `click` and `input`) don't trigger if there's a `data-listeners` attribute exists on a `data-s` element and the value does not contain the default event types.

HTML

<div data-r="signal_66EA5_v1">won't change on click</div>
<button data-listen="keydown" data-s="signal_66EA5_v1">Click does nothing for 66EA5_v1</button>

JavaScript

export const b = {};

export function signal_66EA5_v1(ev, sender, el) {
  // el.dataset.solo = true;
  el.innerHTML = "todo";
  // el.innerHTML = b.time();
}

Result

won't change on click

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0010-data-attributes/data-listen/0020-defaults-removed/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0010-data-attributes/data-listen/0020-defaults-removed/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest(_, __, ___) {
  b.qs("[data-s~=signal_66EA5_v1]").click();
  b.sleep(200);
  const pattern = /won't change on click/;
  const checkEls = b.qsa("[data-r~=signal_66EA5_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

The default `click` and `input` event types can be added back into `data-listeners` to continue listening for them.

HTML

<div data-r="signal_70830_v1">waiting</div>
<button data-listen="keydown click" data-s="signal_70830_v1">Send 70830_v1</button>

JavaScript

export const b = {};

export function signal_70830_v1(ev, sender, el) {
  el.innerHTML = b.time();
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0010-data-attributes/data-listen/0030-defaults-added/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0010-data-attributes/data-listen/0030-defaults-added/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_70830_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_70830_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

data-r

Examples

Receive a single signal.

HTML

<div data-r="signal_E9FCA_v1">waiting</div>
<button data-s="signal_E9FCA_v1">Send E9FCA_v1</button>

JavaScript

export const b = {};

export function signal_E9FCA_v1(ev, sender, el) {
  el.innerHTML = b.time();
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0010-data-attributes/data-r/0010-basic-receive/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0010-data-attributes/data-r/0010-basic-receive/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_E9FCA_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_E9FCA_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

data-s

Description

The data-s attribute defines what signals an element sends when an event it's associated with fires.
Multiple signals can be sent at the same time.
Signals sent that have no corresponding receivers trigger their related function once with a null value for the third/element argument.

Examples

Send one signal to a single receiver.

HTML

<div data-r="signal_B28CE_v1">waiting</div>
<button data-s="signal_B28CE_v1">Send B28CE_v1</button>

JavaScript

export const b = {};

export function signal_B28CE_v1(ev, sender, el) {
  el.innerHTML = b.time();
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0010-data-attributes/data-s/0010-single-signal/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0010-data-attributes/data-s/0010-single-signal/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_B28CE_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_B28CE_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

Send one signal to multiple receivers.

HTML

<div data-r="signal_294BF_v1" class="example">waiting</div>
<div data-r="signal_294BF_v1" class="example">waiting</div>
<button data-s="signal_294BF_v1">
  Send 294BF_v1
</button>

JavaScript

export const b = {};

export function signal_294BF_v1(ev, sender, el) {
  el.innerHTML = b.time();
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0010-data-attributes/data-s/0015-single-to-multiple/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0010-data-attributes/data-s/0015-single-to-multiple/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_294BF_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_294BF_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

Send multiple signals to multiple receivers.

HTML

<div data-r="signal_91921_v1" class="example">waiting</div>
<div data-r="signal_91921_v2" class="example">waiting</div>
<button data-s="signal_91921_v1 signal_91921_v2">
  Send 91921_v1
</button>

JavaScript

export const b = {};

export function signal_91921_v1(ev, sender, el) {
  el.innerHTML = b.time();
}

export function signal_91921_v2(ev, sender, el) {
  el.innerHTML = b.time();
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0010-data-attributes/data-s/0020-multiple-signals/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0010-data-attributes/data-s/0020-multiple-signals/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest(_, __, ___) {
  b.qs("[data-s~=signal_91921_v1").click();
  b.qs("[data-s~=signal_91921_v2").click();
  b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_91921_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
  const checkEls2 = b.qsa("[data-r~=signal_91921_v2]");
  checkEls2.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

bitty functions

b.addListener(event, signals)

Description

[x] Adds an event listener for a given event and sets it up to send the corresponding signals when it occurs.
[x] Can be used to fire signals for events that aren't associated with an element.
[x] Can be used to fire signals that could be associated with an element (e.g. you can add a click listener that listens for any click on the page)
[x] Signal functions are called with the three arguments. If there's no receiver, it's signalName(event, null, element). If there's a receiver, it's signalName(event, null, element)

Examples

Connect events to signals.

HTML

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

JavaScript

export const b = {
  init: "initialize_signal_376FE_v1",
};

export function initialize_signal_376FE_v1() {
  b.addListener("event_signal_376FE_v1", "signal_376FE_v1");
}

export function signal_376FE_v1(ev, sender, el) {
  el.innerHTML = b.time();
}

Result

waiting

Notes

This test uses a custom event to automate the demo.
The featured uses addEventListener() and can use any event that works with the method (e.g. resize events on the window).

view test harness

bitty tag for the example

<bitty-8 
  data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/addListener/0010-set-up-listner/test_javascript.js"
></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/addListener/0010-set-up-listner/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  const testEvent = new TestEvent_signal_376FE_v1();
  dispatchEvent(testEvent);
  await b.sleep(100);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_376FE_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

class TestEvent_signal_376FE_v1 extends Event {
  constructor(signals) {
    super("event_signal_376FE_v1", { bubbles: true });
  }
}

b.addStyles(css)

Examples

Add a set of styles

HTML

<div data-r="signal_E3859_v1" class="test_E3859_v1">waiting</div>
<button data-s="signal_E3859_v1">Send E3859_v1</button>

JavaScript

export const b = {};

export function signal_E3859_v1(ev, sender, el) {
  b.addStyles(`:root { --test_E3859_v1: crimson }`);
  const checkValue = getComputedStyle(document.documentElement)
    .getPropertyValue("--test_E3859_v1").trim();
  if (checkValue === "crimson") {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/addStyles/0010-add-stylesheet/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/addStyles/0010-add-stylesheet/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_E3859_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_E3859_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

b.ce(tag, options)

Description

An alias for document.createElement(tag, options)

Examples

create an element

HTML

<div data-r="signal_FDC74_v1">waiting</div>
<button data-s="signal_FDC74_v1">Send FDC74_v1</button>

JavaScript

export const b = {};

export function signal_FDC74_v1(ev, sender, el) {
  const newEl = b.ce("div");
  if (newEl.tagName.toLowerCase() === "div") {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/ce/0010-create-element/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/ce/0010-create-element/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_FDC74_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_FDC74_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

config

Description

[x] Configuration values.
[x] Defaults for b.getState() are set and can be overridden here.

Examples

Check the default config.

HTML

<div data-r="signal_3FE8F_v1">waiting</div>
<button data-s="signal_3FE8F_v1">Send 3FE8F_v1</button>

JavaScript

export const b = {};

export function signal_3FE8F_v1(ev, sender, el) {
  if (b.config.getState !== undefined) {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/config/0010-check-default-config/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/config/0010-check-default-config/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_3FE8F_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_3FE8F_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

b.copy(selector)

Description

[x] Copies the text from the given selector via document.querySelector().
[x] The copied text comes from a .value if the element has one.
[x] Otherwise, the text copied text comes from .innerHTML.
[x] Returns true if the copy succeeded.
[x] Returns false if the copy failed.

Examples

Copy text from a `.value`

HTML

<input type="text" id="text_signal_D0CD6_v1" value="Test .value content for signal_D0CD6_v1" />

<p>
  This example uses the OS copy/paste board. It can't
  be properly tested from inside the browser. 
  Use this button to copy the text from above
  and paste it into another location 
  to watch it in action.
</p>

<button data-s="signal_D0CD6_v1">Copy Text D0CD6_v1</button>

<div data-test-status="-1"></div>

JavaScript

export const b = {};

export function signal_D0CD6_v1(_, __, ___) {
  b.copy("#text_signal_D0CD6_v1");
}

Result

This example uses the OS copy/paste board. It can't be properly tested from inside the browser. Use this button to copy the text from above and paste it into another location to watch it in action.

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/copy/0010-copy-from-value/test_javascript.js"></bitty-8>

bitty tag for the test verification

<!--
  Testing this example is done manually
-->

Verification JavaScript

// There is no test script for this example.
// Testing is performed manually.

Copy text from `.innerHTML` if no `.value` is available.

HTML

<div id="text_signal_85F23_v1">Test .innerHTML content for signal_85F23_v1</div>

<p>
  This example uses the OS copy/paste board. It can't
  be properly tested from inside the browser. 
  Use this button to copy the text from above
  and paste it into another location 
  to watch it in action.
</p>

<button data-s="signal_85F23_v1">Copy Text 85F23_v1</button>

<div data-test-status="-1"></div>

JavaScript

export const b = {};

export function signal_85F23_v1(_, __, ___) {
  b.copy("#text_signal_85F23_v1");
}

Result

Test .innerHTML content for signal_85F23_v1

This example uses the OS copy/paste board. It can't be properly tested from inside the browser. Use this button to copy the text from above and paste it into another location to watch it in action.

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/copy/0020-copy-from-inner-html/test_javascript.js"></bitty-8>

bitty tag for the test verification

<!--
  Testing this example is done manually
-->

Verification JavaScript

// There is no test script for this example.
// Testing is performed manually.

b.data

Description

[x] The storage location for data that's pulled in from <script type="application/json" id="ID"> tags on the page and data retreived via b.getData(url)

Examples

Access stored data.

HTML

<div data-r="signal_3A374_v1">waiting</div>
<button data-s="signal_3A374_v1">Send 3A374_v1</button>

<script type="application/json" data-template="data_3A374_v1">
{ "key": "value_3A374_v1" }
</script>

JavaScript

export const b = {};

export function signal_3A374_v1(ev, sender, el) {
  if (b.data.data_3A374_v1.key === "value_3A374_v1") {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/data/0010-ingest-page-data/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/data/0010-ingest-page-data/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_3A374_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_3A374_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

b.debounce(key, signals, ms, payload = {})

Description

Provides debouncing for triggering signals.
Signals are triggered via b.send(payload, signals) when the debounce resolves.
The payload is optional. If one isn't defined when calling the function an empty object is sent automatically.

Examples

Debounce triggering a second signal.

HTML

<div data-r="signal_AF23A_v2 signal_AF23A_v3">waiting to start debounce</div>
<button data-s="signal_AF23A_v1">Start debounce AF23A_v1</button>

JavaScript

export const b = {};

export function signal_AF23A_v1(_, __, ___) {
  b.trigger("signal_AF23A_v2");
  b.debounce("AF23A_v1", "signal_AF23A_v3", 2000);
}

export function signal_AF23A_v2(payload, __, el) {
  el.innerHTML = `debounce started: ${b.time()}`;
}

export function signal_AF23A_v3(payload, __, el) {
  el.innerHTML = `debounce resolved: ${b.time()}`;
}

Result

waiting to start debounce

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/debounce/0010-do-debounce/test_javascript.js"></bitty-8>

bitty tag for the test verification

<!-- debounce is tested manually  -->
<div data-test-status="0"></div>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_AF23A_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_AF23A_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

b.dedupe(array)

Description

[x] Takes an array of strings and returns a new array with duplicates removed.
[x] The values are de-duplicated by adding them to a Set then turning the set back into an array.
[x] The insertion order of items is maintained with the first instance of a duplicate value determining

Examples

Dedup an array

HTML

<div data-r="signal_12A9F_v1">waiting</div>
<button data-s="signal_12A9F_v1">Send 12A9F_v1</button>

JavaScript

export const b = {};

export function signal_12A9F_v1(ev, sender, el) {
  const input_array = ["d", "a", "b", "b", "a", "c", "d"];
  const check_array = b.dedupe(input_array);
  if (JSON.stringify(check_array) === JSON.stringify(["d", "a", "b", "c"])) {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/dedupe/0010-do-dedup/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/dedupe/0010-do-dedup/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_12A9F_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_12A9F_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

b.deletePageData(key)

Description

[x] Delete the data and associated key from the page specific storage.

Examples

Delete data from the page specific storage.

HTML

<div data-r="signal_C1884_v1">waiting</div>
<button data-s="signal_C1884_v1">Send C1884_v1</button>

JavaScript

export const b = {};

export async function signal_C1884_v1(_, __, el) {
  const key = "C1884_v1";
  const value = "alfa";
  await b.savePageData(value, key);
  const result1 = await b.loadPageData(key);
  await b.deletePageData(key);
  const result2 = await b.loadPageData(key);
  if (result1 === value && result2 === undefined) {
    el.innerHTML = b.time();
  } else {
    el.innerHTML = "data did not delete properly";
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/deletePageData/0010-delete-page-data/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/deletePageData/0010-delete-page-data/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_C1884_v1]").click();
  await b.sleep(800);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_C1884_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

b.deleteSiteData(key)

Description

[] Deletes the data for the given key from the site wide storage.

Examples

TKTKTK: Test name

HTML

<div data-r="signal_203EF_v1">waiting</div>
<button data-s="signal_203EF_v1">Send 203EF_v1</button>

JavaScript

export const b = {};

export async function signal_203EF_v1(_, __, el) {
  const key = "203EF_v1";
  const value = "alfa";
  await b.saveSiteData(value, key);
  const result1 = await b.loadSiteData(key);
  await b.deleteSiteData(key);
  const result2 = await b.loadSiteData(key);
  if (result1 === value && result2 === undefined) {
    el.innerHTML = b.time();
  } else {
    el.innerHTML = "data did not delete properly";
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/deleteSiteData/0010-delete-data/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/deleteSiteData/0010-delete-data/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_203EF_v1]").click();
  await b.sleep(800);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_203EF_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

b.forwardSender(el)

Description

[x] Triggers a new function with the el passed in the sender position (i.e. the second argument).
[x] Implement to provide a native way to initialize content that requires one element to send to another that would otherwise require a click or some other interaction.
[x] undefined is passed for the ev position (i.e. the first argument).

Examples

Forward an element to another function in the `sender` location (i.e. the second argument)

HTML

<div data-r="signal_0F980_v2">waiting</div>
<div data-r="signal_0F980_v1" data-key="value_0F980_v1">0F980_v1 in run automatically</div>

JavaScript

export const b = {
  init: "signal_0F980_v1",
};

export function signal_0F980_v1(_, __, el) {
  b.forwardSender(el, "signal_0F980_v2");
}

export function signal_0F980_v2(_, sender, el) {
  if (sender.prop("key") === "value_0F980_v1") {
    el.innerHTML = b.time();
  }
}

Result

waiting

0F980_v1 in run automatically

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/forwardSender/0010-forward-sender/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/forwardSender/0010-forward-sender/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  // no click necessary. this is triggered via
  // the b = { init: "signal_0F980_v1" }
  //b.qs("[data-s~=signal_0F980_v1]").click();
  await b.sleep(400);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_0F980_v2]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

b.getData(url, options = {});

Description

[x] Fetches a JSON from a URL.
[x] Returns the JSON object if the fetch succeeds and the response parses as JSON.
[x] Returns undefined if either the fetch fails or the JSON fails to parse.
[x] Accepts and optional options object which is passed to the fetch call (e.g. for headers).
[x] Logs any errors to the console.

Examples

Fetch and return a JSON object.

HTML

<div data-r="signal_AD8E1_v1">waiting</div>
<button data-s="signal_AD8E1_v1">Send AD8E1_v1</button>

JavaScript

export const b = {};

export async function signal_AD8E1_v1(ev, sender, el) {
  const json = await b.getData("/versions/8/0/0/documentation/samples/valid-json.json");
  if (json.alfa === "bravo") {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/getData/0010-basic-fetch/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/getData/0010-basic-fetch/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_AD8E1_v1]").click();
  await b.sleep(1500);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_AD8E1_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

Return `undefined` if the fetch fails.

HTML

<div data-r="signal_F791C_v1">waiting</div>
<button data-s="signal_F791C_v1">Send F791C_v1</button>

JavaScript

export const b = {};

export async function signal_F791C_v1(ev, sender, el) {
  console.warn(
    "EXPECTED ERROR F791C_v1: the 404 missing error for intentionally-missing-file.json is an expected error from testing.",
  );
  const response = await b.getData(
    "/versions/8/0/0/documentation/samples/intentionally-missing-file.json",
  );
  if (response === undefined) {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/getData/0020-fetch-fail-is-error/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/getData/0020-fetch-fail-is-error/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTestWithErrors() {
  b.qs("[data-s~=signal_F791C_v1]").click();
  await b.sleep(1500);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_F791C_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

Return `undefined` if JSON fails to parse.

HTML

<div data-r="signal_E732B_v1">waiting</div>
<button data-s="signal_E732B_v1">Send E732B_v1</button>

JavaScript

export const b = {};

export async function signal_E732B_v1(ev, sender, el) {
  console.warn(
    "EXPECTED ERROR E732B_v1: The JSON parsing error for this test is expected. It confirms an error is raised if the JSON can't be parsed.",
  );
  const response = await b.getData("/versions/8/0/0/documentation/samples/invalid-json.xjson");
  if (response === undefined) {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/getData/0030-parse-fail-is-error/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/getData/0030-parse-fail-is-error/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTestWithErrors() {
  b.qs("[data-s~=signal_E732B_v1]").click();
  await b.sleep(1500);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_E732B_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

Pass options to the fetch call.

HTML

<div data-r="signal_05109_v1">waiting</div>
<button data-s="signal_05109_v1">Send 05109_v1</button>

JavaScript

export const b = {};

export async function signal_05109_v1(ev, sender, el) {
  const options = {
    method: "GET",
  };
  const json = await b.getData("/versions/8/0/0/documentation/samples/valid-json.json", options);
  if (json.alfa === "bravo") {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/getData/0040-pass-options/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/getData/0040-pass-options/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_05109_v1]").click();
  await b.sleep(1500);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_05109_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

b.getMarks(key)

Description

[] Returns an array of the performance.now() marks for the given key.

Examples

Get the array of marks for a given key.

HTML

<div data-r="signal_F7BED_v1">waiting</div>
<button data-s="signal_F7BED_v1">Send F7BED_v1</button>

JavaScript

export const b = {};

export function signal_F7BED_v1(ev, sender, el) {
  b.mark("F7BED_v1");
  b.mark("F7BED_v1");
  if (b.getMarks("F7BED_v1").length === 2) {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/getMarks/0010-get-marks/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/getMarks/0010-get-marks/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_F7BED_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_F7BED_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

b.getState()

Description

[x] Produces an object with the state of input values and specific attributes on elements.
[x] Elements with both an id and a data-save="true" attribute are included.
[x] The object can be used with b.setState() to reset the state of a page when it's reloaded.
[x] The specific attributes that are captured are available in b.config.getState.
[x] The b.config.getState object contains two categories: b.config.getState.attributes and b.config.getState.keys that hold their corresponding keys.
[x] aria attributes are stored in b.config.getState.attributes with the full JavaScript version of their name (e.g. aria-hidden).
[x] Items that aren't set with el.setAttribute() are defined in b.config.getState.keys (e.g. value, checked).

Examples

Store an input value.

HTML

<div data-r="signal_4ED33_v1">waiting</div>
<input type="text" data-save="true" id="target_4ED33_v1" value="value_4ED33_v1" data-key="key_4ED33_v1" aria-hidden="false" />
<button data-s="signal_4ED33_v1">Send 4ED33_v1</button>

JavaScript

export const b = {};

export function signal_4ED33_v1(_, __, el) {
  b.config.getState.attributes.push("data-key");
  const pageState = b.getState();
  for (const savedValues of pageState) {
    if (savedValues.id === "target_4ED33_v1") {
      if (
        savedValues.keys.value === "value_4ED33_v1" &&
        savedValues.attributes["aria-hidden"] === "false" &&
        savedValues.attributes["data-key"] === "key_4ED33_v1"
      ) {
        el.innerHTML = b.time();
      }
    }
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/getState/0010-get-attribute/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/getState/0010-get-attribute/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_4ED33_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_4ED33_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

b.getTemplates(url, options = {})

Description

[x] Fetches a URL to get templates from.
[x] Each <script> tag on the page is processed to determeine if it's a template.
[x] Any <script> tags with a type of tetx/html and an id attribute is used for an HTML template.
[x] Any <script> tags with a type of image/svg and an id attribute is used for an SVG template.
[x] Any <script> tags with a type of application/json and an id is stored as data.
[x] HTML templates are stored as strings inside the b.templates object with the id acting as the key in the object.
[x] SVG templates are stored as strings inside the b.svgs object with the id acting as the key in the object.
[x] The application/json strings are run through JSON.parse() and stored inside b.data if the string parses successfully.
[x] Options can be passed to the fetch call with the optional section argument.
[x] The source file that's being fetched shouldn't be a full HTML file. It should only contain one or more script tags that are all siblings of each other.

Examples

getTemplates(url, options)

HTML

<div data-r="signal_D33B5_v1">waiting</div>
<button data-s="signal_D33B5_v1">Send D33B5_v1</button>

JavaScript

export const b = {};

export async function signal_D33B5_v1(_, __, el) {
  await b.getTemplates(
    "/versions/8/0/0/documentation/samples/templates/index.html",
  );
  if (
    b.templates["test_html"] !== undefined &&
    b.data["test_data"] !== undefined &&
    b.svgs["test_svg"] !== undefined
  ) {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/getTemplates/0010-fetch-templates/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/getTemplates/0010-fetch-templates/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_D33B5_v1]").click();
  await b.sleep(1500);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_D33B5_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

Notes

The source template file used is /versions/8/0/0/documentation/samples/templates/
You'll have to view source on the page to see anything since the script tags don't render anything to the page.

b.loadPageData(key, fallback = undefined);

Description

[x] Returns an object from the page specific IndexedDB object store with the given key.
[x] Returns a string from the page specific IndexedDB object store with the given key.
[x] Provides for an optional object fallback to use if there's nothing in storage with the given key.
[x] If the fallback is used, it gets saved automatically.
[x] Returns undefined if there's no value for the key and there's no fallback.

Examples

Restore page data.

HTML

<div data-r="signal_BB235_v1">waiting</div>
<button data-s="signal_BB235_v1">Send BB235_v1</button>

JavaScript

export const b = {};

export async function signal_BB235_v1(ev, sender, el) {
  const key = "BB235_v1";
  await b.savePageData({ alfa: "bravo" }, key);
  const data = await b.loadPageData(key);
  if (data.alfa === "bravo") {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/loadPageData/0010-load-page-object/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/loadPageData/0010-load-page-object/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_BB235_v1]").click();
  await b.sleep(800);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_BB235_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

Load a string from the page storage.

HTML

<div data-r="signal_80ADA_v1">waiting</div>
<button data-s="signal_80ADA_v1">Send 80ADA_v1</button>

JavaScript

export const b = {};

export async function signal_80ADA_v1(_, __, el) {
  const key = "80ADA_v1";
  const value = "value_80ADA_v1";
  const result = await b.savePageData(value, key);
  const data = await b.loadPageData(key);
  if (result === "80ADA_v1" && data === value) {
    el.innerHTML = b.time();
  } else {
    el.innerHTML = "error loading page data.";
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/loadPageData/0020-load-page-string/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/loadPageData/0020-load-page-string/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_80ADA_v1]").click();
  await b.sleep(800);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_80ADA_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

Return a fallback if the given key isn't in the page's storage.

HTML

<div data-r="signal_72ACD_v1">waiting</div>
<button data-s="signal_72ACD_v1">Send 72ACD_v1</button>

JavaScript

export const b = {};

export async function signal_72ACD_v1(_, __, el) {
  const key = "72ACD_v1";
  const data = await b.loadPageData(key, []);
  if (JSON.stringify(data) === "[]") {
    el.innerHTML = b.time();
  } else {
    el.innerHTML = "error loading page data.";
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/loadPageData/0030-provide-fallback/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/loadPageData/0030-provide-fallback/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_72ACD_v1]").click();
  await b.sleep(800);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_72ACD_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

Fallback is saved automatically if it's used.

HTML

<div data-r="signal_23ABD_v1">waiting</div>
<button data-s="signal_23ABD_v1">Send 23ABD_v1</button>

JavaScript

export const b = {};

export async function signal_23ABD_v1(_, __, el) {
  const key = "23ABD_v1";
  await b.loadPageData(key, []);
  const data = await b.loadPageData(key);
  if (JSON.stringify(data) === "[]") {
    el.innerHTML = b.time();
  } else {
    el.innerHTML = "error loading page data.";
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/loadPageData/0040-fallback-is-auto-saved/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/loadPageData/0040-fallback-is-auto-saved/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_23ABD_v1]").click();
  await b.sleep(800);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_23ABD_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

Return `undefined` if there's no key and no fallback.

HTML

<div data-r="signal_33173_v1">waiting</div>
<button data-s="signal_33173_v1">Send 33173_v1</button>

JavaScript

export const b = {};

export async function signal_33173_v1(_, __, el) {
  const key = "33173_v1";
  const data = await b.loadPageData(key);
  if (data === undefined) {
    el.innerHTML = b.time();
  } else {
    el.innerHTML = "error loading page data.";
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/loadPageData/0050-undefined-if-no-fallback/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/loadPageData/0050-undefined-if-no-fallback/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_33173_v1]").click();
  await b.sleep(800);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_33173_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

b.loadSiteData(key, fallback = undefined)

Description

[x] Returns an object from the site wide IndexedDB object store with the given key.
[x] Returns a string from the site wide IndexedDB object store with the given key.
[x] Provides for an optional object fallback to use if there's nothing in storage with the given key.
[x] If the fallback is used, it gets saved automatically.
[x] Returns undefined if there's no value for the key and there's no fallback.

Examples

Load existing JSON

HTML

<div data-r="signal_B31DA_v1">waiting</div>
<button data-s="signal_B31DA_v1">Send B31DA_v1</button>

JavaScript

export const b = {};

export async function signal_B31DA_v1(_, __, el) {
  const key = "B31DA_v1";
  await b.saveSiteData({ alfa: "bravo" }, key);
  const data = await b.loadSiteData(key);
  if (data.alfa === "bravo") {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/loadSiteData/0010-load-site-object/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/loadSiteData/0010-load-site-object/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_B31DA_v1]").click();
  await b.sleep(800);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_B31DA_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

Load a string from the site storage.

HTML

<div data-r="signal_B85B7_v1">waiting</div>
<button data-s="signal_B85B7_v1">Send B85B7_v1</button>

JavaScript

export const b = {};

export async function signal_B85B7_v1(_, __, el) {
  const key = "B85B7_v1";
  await b.saveSiteData("bravo", key);
  const data = await b.loadSiteData(key);
  if (data === "bravo") {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/loadSiteData/0020-load-site-string/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/loadSiteData/0020-load-site-string/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_B85B7_v1]").click();
  await b.sleep(800);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_B85B7_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

Use an optional object fallback if there is nothing in storage for the given key.

HTML

<div data-r="signal_6E439_v1">waiting</div>
<button data-s="signal_6E439_v1">Send 6E439_v1</button>

JavaScript

export const b = {};

export async function signal_6E439_v1(_, __, el) {
  const key = "6E439_v1";
  const data = await b.loadSiteData(key, []);
  if (JSON.stringify(data) === "[]") {
    el.innerHTML = b.time();
  } else {
    el.innerHTML = "error loading data.";
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/loadSiteData/0030-provide-fallback/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/loadSiteData/0030-provide-fallback/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_6E439_v1]").click();
  await b.sleep(800);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_6E439_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

Fallback is automatically saved into storage if it's used.

HTML

<div data-r="signal_284A3_v1">waiting</div>
<button data-s="signal_284A3_v1">Send 284A3_v1</button>

JavaScript

export const b = {};

export async function signal_284A3_v1(_, __, el) {
  const key = "284A3_v1";
  await b.loadSiteData(key, []);
  const data = await b.loadSiteData(key);
  if (JSON.stringify(data) === "[]") {
    el.innerHTML = b.time();
  } else {
    el.innerHTML = "error loading data.";
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/loadSiteData/0040-fallback-auto-save/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/loadSiteData/0040-fallback-auto-save/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_284A3_v1]").click();
  await b.sleep(800);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_284A3_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

Return `undefined` if there's not a value in storage for the key and there's no fallback.

HTML

<div data-r="signal_E4425_v1">waiting</div>
<button data-s="signal_E4425_v1">Send E4425_v1</button>

JavaScript

export const b = {};

export async function signal_E4425_v1(_, __, el) {
  const key = "E4425_v1";
  const data = await b.loadSiteData(key);
  if (data === undefined) {
    el.innerHTML = b.time();
  } else {
    el.innerHTML = "error loading data.";
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/loadSiteData/0050-undefined-if-no-storage-or-fallback/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/loadSiteData/0050-undefined-if-no-storage-or-fallback/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_E4425_v1]").click();
  await b.sleep(800);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_E4425_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

b.mapKey(key, signals, modKeys = [], options = {})

Description

[x] Maps a key event to a signal signal.
[x] Maps a key event to multiple signals.
[x] Uses keydown by default.
[x] Listener can be set to keyup.
[x] Modifier keys can be defined (see modKeyAliases() for the list of keys).
[x] The event won't trigger if unknown modifier keys are specified.
[x] Prevents the browser from responding to the key press via preventDefault.
[x] preventDefault can be turned off.
[x] Key Codes can be used instead of strings by using a number instead of the character.

Examples

Map a single key to a single signal

HTML

<div data-r="signal_07868_v1">waiting</div>
<div>Press `q`</div>

JavaScript

export const b = {
  init: "setKey_signal_07868_v1",
};

export function setKey_signal_07868_v1() {
  b.mapKey("q", "signal_07868_v1");
}

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

Result

waiting

Press `q`

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/mapKey/0010-map-single-to-single/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/mapKey/0010-map-single-to-single/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  await b.sleep(200);
  const event_signal_6E38F = new KeyboardEvent("keydown", {
    key: "q",
    bubbles: true,
    cancelable: true,
  });
  document.dispatchEvent(event_signal_6E38F);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_07868_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

Map a single key to multiple signals.

HTML

<div data-r="signal_CFB66_v1">waiting</div>
<div data-r="signal_CFB66_v2">waiting</div>
<div>Press `w`</div>

JavaScript

export const b = {
  init: "init_CFB66_v1",
};

export function init_CFB66_v1() {
  b.mapKey("w", "signal_CFB66_v1");
}

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

Result

waiting

Press `w`

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/mapKey/0020-map-single-to-multiple/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/mapKey/0020-map-single-to-multiple/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  await b.sleep(200);
  const event_signal_6E38F = new KeyboardEvent("keydown", {
    key: "w",
    bubbles: true,
    cancelable: true,
  });
  document.dispatchEvent(event_signal_6E38F);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_CFB66_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

Map a key with modifier keys (e.g. "shift", "alt", etc...)

HTML

<div data-r="signal_DE6CE_v1">waiting</div>
<div>Press `ctrl + e`</div>

JavaScript

export const b = {
  init: "init_DE6CE_v1",
};

export function init_DE6CE_v1() {
  b.mapKey("e", "signal_DE6CE_v1", ["ctrlKey"]);
}

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

Result

waiting

Press `ctrl + e`

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/mapKey/0030-mod-keys/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/mapKey/0030-mod-keys/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  await b.sleep(200);
  const event_signal_6E38F = new KeyboardEvent("keydown", {
    key: "e",
    ctrlKey: true,
    bubbles: true,
    cancelable: true,
  });
  document.dispatchEvent(event_signal_6E38F);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_DE6CE_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

Aliases (e.g. `ALT`) can be used in place of the explicit JavaScript event names (e.g. `altKey`). The full list of options is available in `modKeyAliases()`.

HTML

<div data-r="signal_6B685_v1">waiting</div>
<div>Press `ctrl + r`</div>

JavaScript

export const b = {
  init: "init_6B685_v1",
};

export function init_6B685_v1() {
  b.mapKey("r", "signal_6B685_v1", ["CTRL"]);
}

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

Result

waiting

Press `ctrl + r`

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/mapKey/0035-mod-aliases/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/mapKey/0035-mod-aliases/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  await b.sleep(200);
  const event_signal_6E38F = new KeyboardEvent("keydown", {
    key: "r",
    ctrlKey: true,
    bubbles: true,
    cancelable: true,
  });
  document.dispatchEvent(event_signal_6E38F);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_6B685_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

Unknown modifier keys are not allowed.

HTML

<div data-r="signal_273EF_v1" class="manual-test">there's no output from this example.</div>

JavaScript

export const b = {};

export function init_273EF_v1() {
  console.warn(
    `EXPECTED ERROR 273EF_v1: The mapKey() error for test 273EF_v1 is expected. It confirms an error is logged to the console when an attempt is made to use an invalid modifier key`,
  );
  b.mapKey("t", "signal_273EF_v1", ["invalidModKey"]);
}

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

Result

there's no output from this example.

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/mapKey/0038-unknow-mods-fail/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/mapKey/0038-unknow-mods-fail/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTestWithErrors() {
  await b.sleep(100);
  b.trigger("init_273EF_v1");
  const event_signal_6E38F = new KeyboardEvent("keydown", {
    key: "t",
    bubbles: true,
    cancelable: true,
  });
  document.dispatchEvent(event_signal_6E38F);
  await b.sleep(100);
  const pattern = /there's no output from this example./;
  const checkEls = b.qsa("[data-r~=signal_273EF_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

Allow default action to occur (i.e. don't apply `preventDefault()` to the event).

HTML

<div data-r="signal_9EAED_v1">waiting</div>
<div>Press `/`</div>

JavaScript

export const b = {
  init: "init_9EAED_v1",
};

export function init_9EAED_v1() {
  b.mapKey("/", "signal_9EAED_v1", [], { preventDefault: false });
}

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

Result

waiting

Press `/`

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/mapKey/0050-allow-default/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/mapKey/0050-allow-default/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  await b.sleep(200);
  const event_signal_6E38F = new KeyboardEvent("keydown", {
    key: "/",
    bubbles: true,
    cancelable: true,
  });
  document.dispatchEvent(event_signal_6E38F);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_9EAED_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

Use `keyup` instead of `keydown`

HTML

<div data-r="signal_78314_v1">waiting</div>
<div>Press `b`</div>

JavaScript

export const b = {
  init: "init_78314_v1",
};

export function init_78314_v1() {
  b.mapKey("b", "signal_78314_v1", [], { listener: "keyup" });
}

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

Result

waiting

Press `b`

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/mapKey/0060-keyup/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/mapKey/0060-keyup/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  await b.sleep(200);
  const event_signal_6E38F = new KeyboardEvent("keyup", {
    key: "b",
    bubbles: true,
    cancelable: true,
  });
  document.dispatchEvent(event_signal_6E38F);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_78314_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

Use a key code instead number of a character string.

HTML

<div data-r="signal_80715_v1">waiting</div>
<div>Press `y`</div>

JavaScript

export const b = {
  init: "init_80715_v1",
};

export function init_80715_v1() {
  b.mapKey(89, "signal_80715_v1");
}

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

Result

waiting

Press `y`

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/mapKey/0080-key-codes/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/mapKey/0080-key-codes/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  await b.sleep(200);
  const event_signal_6E38F = new KeyboardEvent("keydown", {
    keyCode: 89,
    bubbles: true,
    cancelable: true,
  });
  document.dispatchEvent(event_signal_6E38F);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_80715_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

Notes

preventDefault() is applied unless otherwise specified.
If preventDefault() occurs for any key via mapKey() it affects all the other uses of that key (i.e. trying to use preventDefault() for a key in one place and not in another causes a race condition with undefined behaviour).

b.mark(key, note = null)

Description

[x] Used for basic performance measuring.
[x] Marks are created with a key.
[x] The array for a given mark can be retrieved with b.getMarks(key)

Examples

Create a mark for a key without a note.

HTML

<div data-r="signal_D2586_v1">waiting</div>
<button data-s="signal_D2586_v1">Send D2586_v1</button>

JavaScript

export const b = {};

export function signal_D2586_v1(ev, sender, el) {
  b.mark("D2586_v1");
  if (b._marks["D2586_v1"].length === 1) {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/mark/0010-mark-without-note/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/mark/0010-mark-without-note/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_D2586_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_D2586_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

b.modKeyAlises()

Description

[x] Returns the object that holds the available aliases for modifier keys used with mapKey()
[x] The values sent to mapKey() are case insensitive (they always transformed to lowercase when doing the mapping).

Examples

Get the aliases

HTML

<div data-r="signal_13C5D_v1">waiting</div>
<button data-s="signal_13C5D_v1">Send 13C5D_v1</button>

JavaScript

export const b = {};

export function signal_13C5D_v1(_, __, el) {
  if (b.modKeyAliases().alt === "altKey") {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/modKeyAliases/0010-get-aliases/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/modKeyAliases/0010-get-aliases/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_13C5D_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_13C5D_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

b.qs(selector, el = null)

Description

[x] Alias for document.querySelector(selector) if no second argument is passed.
[x] Alias for el.querySelector(selector) if an element is passed as the second argument.

Examples

Get an element from the document.

HTML

<div id="target_signal_B7BA2_v1"></div>

<div data-r="signal_B7BA2_v1">waiting</div>
<button data-s="signal_B7BA2_v1">Send B7BA2_v1</button>

JavaScript

export const b = {};

export function signal_B7BA2_v1(_, __, el) {
  const fromDefault = document.querySelector("#target_signal_B7BA2_v1");
  const fromBitty = b.qs("#target_signal_B7BA2_v1");
  if (fromBitty.isSameNode(fromDefault)) {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/qs/0010-get-element/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/qs/0010-get-element/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_B7BA2_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_B7BA2_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

Get an element from another element.

HTML

<div id="target_alfa_signal_A9BED_v1">
  <div id="target_bravo_signal_A9BED_v1"></div>
</div>

<div data-r="signal_A9BED_v1">waiting</div>
<button data-s="signal_A9BED_v1">Send A9BED_v1</button>

JavaScript

export const b = {};

export function signal_A9BED_v1(ev, sender, el) {
  const fromNative = document.querySelector("#target_bravo_signal_A9BED_v1");
  const alfa = b.qs("#target_alfa_signal_A9BED_v1");
  const bravo = b.qs("#target_bravo_signal_A9BED_v1", alfa);
  if (bravo.isSameNode(fromNative)) {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/qs/0020-from-element/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/qs/0020-from-element/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_A9BED_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_A9BED_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

b.qsa(selector, el = null)

Description

[] Alias for document.querySelectorAll(selector)

Examples

Get a group of elements from the document.

HTML

<div class="target_signal_00C0F_v1">alfa signal_00C0F_v1</div>
<div class="target_signal_00C0F_v1">bravo signal_00C0F_v1</div>
<div class="target_signal_00C0F_v1">charlie signal_00C0F_v1</div>

<div data-r="signal_00C0F_v1">waiting</div>
<button data-s="signal_00C0F_v1">Send 00C0F_v1</button>

JavaScript

export const b = {};

export function signal_00C0F_v1(ev, sender, el) {
  const els = b.qsa(".target_signal_00C0F_v1");
  if (els[2].innerHTML === "charlie signal_00C0F_v1") {
    el.innerHTML = b.time();
  }
}

Result

alfa signal_00C0F_v1

bravo signal_00C0F_v1

charlie signal_00C0F_v1

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/qsa/0010-get-elements/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/qsa/0010-get-elements/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_00C0F_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_00C0F_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

Get a group of elements from another element.

HTML

<div id="container_signal_C0EE2_v1">
  <div class="target_signal_C0EE2_v1">alfa signal_C0EE2_v1</div>
  <div class="target_signal_C0EE2_v1">bravo signal_C0EE2_v1</div>
  <div class="target_signal_C0EE2_v1">charlie signal_C0EE2_v1</div>
</div>

<div data-r="signal_C0EE2_v1">waiting</div>
<button data-s="signal_C0EE2_v1">Send C0EE2_v1</button>

JavaScript

export const b = {};

export function signal_C0EE2_v1(ev, sender, el) {
  const container = b.qs("#container_signal_C0EE2_v1");
  const els = b.qsa(".target_signal_C0EE2_v1");
  if (els[2].innerHTML === "charlie signal_C0EE2_v1") {
    el.innerHTML = b.time();
  }
}

Result

alfa signal_C0EE2_v1

bravo signal_C0EE2_v1

charlie signal_C0EE2_v1

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/qsa/0020-from-element/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/qsa/0020-from-element/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_C0EE2_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_C0EE2_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

b.quickCopy(el, sender, options = {})

Description

[x] Copies the contents of el.
[x] Captures the innerHTML of sender and replaces it with Copied if successful
[x] Replaces it with Could not copy if it failed.
[x] Debounces and then restores the innerHTML when the debounce resolves.

Examples

Do a quick copy

HTML

<div data-r="signal_49568_v1">this is content on 49568_v1 for quickCopy</div>
<button data-s="signal_49568_v1">Send 49568_v1</button>
<div data-test-status="-1"></div>

JavaScript

export const b = {};

export function signal_49568_v1(_, sender, el) {
  b.quickCopy(el, sender);
}

Result

this is content on 49568_v1 for quickCopy

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/quickCopy/0010-do-quick-copy/test_javascript.js"></bitty-8>

bitty tag for the test verification

<!--
  Testing this example is done manually
-->

Verification JavaScript

// There is no test script for this example.
// Testing is performed manually.

b.randomFloat(min, max)

Examples

Get a random float.

HTML

<div data-r="signal_D3AE7_v1">waiting</div>
<button data-s="signal_D3AE7_v1">Send D3AE7_v1</button>

JavaScript

export const b = {};

export function signal_D3AE7_v1(_, __, el) {
  const float = b.randomFloat(1, 10);
  if (float > 0) {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/randomFloat/0010-get-float/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/randomFloat/0010-get-float/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_D3AE7_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_D3AE7_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

b.randomInt(min, max)

Examples

Get a random int.

HTML

<div data-r="signal_D1016_v1">waiting</div>
<button data-s="signal_D1016_v1">Send D1016_v1</button>

JavaScript

export const b = {};

export function signal_D1016_v1(ev, sender, el) {
  const int = b.randomInt(2, 10);
  if (int > 1) {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/randomInt/0010-get-int/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/randomInt/0010-get-int/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_D1016_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_D1016_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

b.render(source, substitutions = {})

Description

[x] Input can be the key for a template in b.templates in which case that template gets used.
[x] Input can be the key for a template in b.svgs in which case an SVG is generated.
[x] Input can be a HTML string.
[x] Input can be an array of HTML strings which get joined via .join("").
[x] Input can be an HTML element.
[x] Input can be an array of HTML element.
[x] Input can be a document fragment.
[x] Input can be an array of document fragments.
[x] Input can be an array of different types (i.e. strings, elements, and document fragments).
[x] If the input is a string, it's first checked to see if it matches a key in b.templates. If not, bitty looks for a key in b.svgs. If one isn't found there either then the string is processed as a raw input string. (Inputs processed as strings are always treated as HTML. SVGs can only be rendered by including them in b.svgs which can be loaded via script type="image/svg" tags on the page, from b.getTemplates(), or by adding one to b.svgs by hand.)
[x] An object with find/replace values can be sent as an optional section argument.
[x] The keys in the object are the values to find.
[x] The values in the object are what replaces the found keys.
[x] The find/replace is done by converting the input into a string if it's not already then using .replaceAll().
[x] Replacement values can be a string.
[x] Replacement values can can be an array of strings which get joined via .join("").
[x] Replacement values can be an HTML Element.
[x] Replacement values can be an array of HTML Elements.
[x] Replacement values can be a Document Fragment.
[x] Replacement values can be an array of Document Fragments.
[x] Replacement values can be an array of different types (i.e. strings, elements, and document fragments).
[x] Elements and document fragments are turned into strings for find/replace (i.e. if you hold them in a variable and update the variable the replaced values does not change.)
[x] The output is a document fragment if the input is an HTML template, strings, html elements, or document fragments.
[x] The output is an SVG element if the input is an template from b.svgs.

Examples

From a template in `b.templates`

HTML

<script type="text/html" data-template="input">
  <div>266A8_v1</div>
</script>

<div data-r="signal_266A8_v1">waiting</div>
<button data-s="signal_266A8_v1">Send 266A8_v1</button>

JavaScript

export const b = {};

export function signal_266A8_v1(_, __, el) {
  const output = b.render("input");
  if (output.children[0].innerHTML === "266A8_v1") {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/render/0010-from-template/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/render/0010-from-template/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_266A8_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_266A8_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

From a string.

HTML

<div data-r="signal_87F58_v1">waiting</div>
<button data-s="signal_87F58_v1">Send 87F58_v1</button>

JavaScript

export const b = {};

export function signal_87F58_v1(_, __, el) {
  const input = "<div>87F58_v1</div>";
  const output = b.render(input);
  if (output.children[0].innerHTML === "87F58_v1") {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/render/0011-from-string/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/render/0011-from-string/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_87F58_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_87F58_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

From an array of strings.

HTML

<div data-r="signal_EDB2D_v1">waiting</div>
<button data-s="signal_EDB2D_v1">Send EDB2D_v1</button>

JavaScript

export const b = {};

export function signal_EDB2D_v1(_, __, el) {
  const input = ["<div></div>", "<div>EDB2D_v1</div>"];
  const output = b.render(input);
  if (output.children[1].innerHTML === "EDB2D_v1") {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/render/0012-from-string-array/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/render/0012-from-string-array/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_EDB2D_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_EDB2D_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

From an element.

HTML

<div data-r="signal_46394_v1">waiting</div>
<button data-s="signal_46394_v1">Send 46394_v1</button>

JavaScript

export const b = {};

export function signal_46394_v1(_, __, el) {
  const input = document.createElement("div");
  input.innerHTML = "46394_v1";
  const output = b.render(input);
  if (output.children[0].innerHTML === "46394_v1") {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/render/0013-from-el/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/render/0013-from-el/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_46394_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_46394_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

From an array of elements.

HTML

<div data-r="signal_8F598_v1">waiting</div>
<button data-s="signal_8F598_v1">Send 8F598_v1</button>

JavaScript

export const b = {};

export function signal_8F598_v1(_, __, el) {
  const input = [
    document.createElement("div"),
    document.createElement("div"),
  ];
  input[1].innerHTML = "8F598_v1";
  const output = b.render(input);
  if (output.children[1].innerHTML === "8F598_v1") {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/render/0014-from-el-array/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/render/0014-from-el-array/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_8F598_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_8F598_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

From a document fragment.

HTML

<div data-r="signal_07A1D_v1">waiting</div>
<button data-s="signal_07A1D_v1">Send 07A1D_v1</button>

JavaScript

export const b = {};

export function signal_07A1D_v1(_, __, el) {
  const input = document.createDocumentFragment();
  const newEl = document.createElement("div");
  newEl.innerHTML = "07A1D_v1";
  input.appendChild(newEl);
  const output = b.render(input);
  if (output.children[0].innerHTML === "07A1D_v1") {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/render/0015-from-frag/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/render/0015-from-frag/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_07A1D_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_07A1D_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

From an array of document fragments.

HTML

<div data-r="signal_7F9A6_v1">waiting</div>
<button data-s="signal_7F9A6_v1">Send 7F9A6_v1</button>

JavaScript

export const b = {};

export function signal_7F9A6_v1(_, __, el) {
  const input = [
    document.createDocumentFragment(),
    document.createDocumentFragment(),
  ];
  const child0 = document.createElement("div");
  input[0].appendChild(child0);
  const child1 = document.createElement("div");
  child1.innerHTML = "7F9A6_v1";
  input[1].appendChild(child1);
  const output = b.render(input);
  if (output.children[1].innerHTML === "7F9A6_v1") {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/render/0016-from-frag-array/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/render/0016-from-frag-array/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_7F9A6_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_7F9A6_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

From an array of mixed types.

HTML

<div data-r="signal_8CA16_v1">waiting</div>
<button data-s="signal_8CA16_v1">Send 8CA16_v1</button>

JavaScript

export const b = {};

const input = [
  "<div>8CA16_v1</div>",
  document.createElement("div"),
  document.createDocumentFragment(),
];
input[1].innerHTML = "8CA16_v1";
const child2 = document.createElement("div");
child2.innerHTML = "8CA16_v1";
input[2].appendChild(child2);

export function signal_8CA16_v1(_, __, el) {
  const output = b.render(input);
  if (
    output.children[0].innerHTML === "8CA16_v1" &&
    output.children[1].innerHTML === "8CA16_v1" &&
    output.children[2].innerHTML === "8CA16_v1"
  ) {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/render/0017-from-multi-array/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/render/0017-from-multi-array/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_8CA16_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_8CA16_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

Replace with string.

HTML

<div data-r="signal_A40A5_v1">waiting</div>
<button data-s="signal_A40A5_v1">Send A40A5_v1</button>

JavaScript

export const b = {};

const input = "<div>NEEDLE</div>";

export function signal_A40A5_v1(_, __, el) {
  const output = b.render(input, { "NEEDLE": "A40A5_v1" });
  if (output.children[0].innerHTML === "A40A5_v1") {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/render/0040-sub-string/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/render/0040-sub-string/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_A40A5_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_A40A5_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

Replace with an array of strings.

HTML

<div data-r="signal_8E653_v1">waiting</div>
<button data-s="signal_8E653_v1">Send 8E653_v1</button>

JavaScript

export const b = {};

const input = "<div>NEEDLE</div>";

export function signal_8E653_v1(ev, sender, el) {
  const output = b.render(input, {
    "NEEDLE": ["8E653_v1", "8E653_v1"],
  });
  if (output.children[0].innerHTML === "8E653_v18E653_v1") {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/render/0041-sub-string-array/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/render/0041-sub-string-array/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_8E653_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_8E653_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

Replace with an element.

HTML

<div data-r="signal_E7902_v1">waiting</div>
<button data-s="signal_E7902_v1">Send E7902_v1</button>

JavaScript

export const b = {};

const input = document.createDocumentFragment();
const newEl = document.createElement("div");
newEl.innerHTML = "TARGET_signal_E7902_v1";
input.appendChild(newEl);

const subEl = document.createElement("div");
subEl.innerHTML = "UPDATED_signal_E7902_v1";

const subs = {
  "TARGET_signal_E7902_v1": subEl,
};

export function signal_E7902_v1(ev, sender, el) {
  const output = b.render(input, subs);
  const checkEl = output.firstChild;
  if (checkEl.firstChild.innerHTML === "UPDATED_signal_E7902_v1") {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/render/0042-sub-el/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/render/0042-sub-el/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_E7902_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_E7902_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

Replace with an array of elements.

HTML

<div data-r="signal_91C63_v1">waiting</div>
<button data-s="signal_91C63_v1">Send 91C63_v1</button>

JavaScript

export const b = {};

const input = document.createDocumentFragment();
const newEl = document.createElement("div");
newEl.innerHTML = "TARGET_signal_91C63_v1";
input.appendChild(newEl);

const subEl1 = document.createElement("div");
subEl1.innerHTML = "UPDATED";
const subEl2 = document.createElement("div");
subEl2.innerHTML = "signal_91C63_v1";

const subs = {
  "TARGET_signal_91C63_v1": [subEl1, subEl2],
};

export function signal_91C63_v1(ev, sender, el) {
  const output = b.render(input, subs);
  if (output.firstChild.children[1].innerHTML === "signal_91C63_v1") {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/render/0043-sub-el-array/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/render/0043-sub-el-array/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_91C63_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_91C63_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

Replace with a document fragment.

HTML

<div data-r="signal_AC976_v1">waiting</div>
<button data-s="signal_AC976_v1">Send AC976_v1</button>

JavaScript

export const b = {};

const input = document.createDocumentFragment();
const newEl = document.createElement("div");
newEl.innerHTML = "TARGET_signal_AC976_v1";
input.appendChild(newEl);

const subFragment = document.createElement("template");
subFragment.innerHTML = "<div>UPDATED_signal_AC976_v1</div>";

const subs = {
  "TARGET_signal_AC976_v1": subFragment.content,
};

export function signal_AC976_v1(ev, sender, el) {
  const output = b.render(input, subs);
  if (output.firstChild.firstChild.innerHTML === "UPDATED_signal_AC976_v1") {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/render/0044-sub-frag/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/render/0044-sub-frag/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_AC976_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_AC976_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

Replace with an array of document fragments.

HTML

<div data-r="signal_76437_v1">waiting</div>
<button data-s="signal_76437_v1">Send 76437_v1</button>

JavaScript

export const b = {};

const input = document.createDocumentFragment();
const newEl = document.createElement("div");
newEl.innerHTML = "TARGET_signal_76437_v1";
input.appendChild(newEl);

const subFragment1 = document.createElement("template");
subFragment1.innerHTML = "<div>UPDATED</div>";

const subFragment2 = document.createElement("template");
subFragment2.innerHTML = "<div>signal_76437_v1</div>";

const subs = {
  "TARGET_signal_76437_v1": [subFragment1.content, subFragment2.content],
};

export function signal_76437_v1(ev, sender, el) {
  const output = b.render(input, subs);
  const result = output.firstChild.children[1].innerHTML;
  if (result === "signal_76437_v1") {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/render/0045-sub-frag-array/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/render/0045-sub-frag-array/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_76437_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_76437_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

Replace with an array of mixed types.

HTML

<div data-r="signal_68377_v1">waiting</div>
<button data-s="signal_68377_v1">Send 68377_v1</button>

JavaScript

export const b = {};

export function signal_68377_v1(_, __, el) {
  const input = "<div>NEEDLE</div>";
  const replacements = [
    "<div>68377_v1</div>",
    document.createElement("div"),
    document.createDocumentFragment(),
  ];
  replacements[1].innerHTML = "68377_v2";
  const child2 = document.createElement("div");
  child2.innerHTML = "68377_v3";
  replacements[2].appendChild(child2);

  const output = b.render(input, {
    "NEEDLE": replacements,
  }).firstChild;
  if (
    output.children[0].innerHTML === "68377_v1" &&
    output.children[1].innerHTML === "68377_v2" &&
    output.children[2].innerHTML === "68377_v3"
  ) {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/render/0046-sub-multi/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/render/0046-sub-multi/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_68377_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_68377_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

Render an SVG.

HTML

<div data-r="signal_58881_v1">waiting</div>
<button data-s="signal_58881_v1">Send 58881_v1</button>

<script type="image/svg" data-template="svg_58881_v1">
  <svg version="1.1" width="60" height="40" xmlns="http://www.w3.org/2000/svg">
    <text x="30" y="24" font-size="20" text-anchor="middle" fill="goldenrod">__TEXT__</text>
  </svg>
</script>

JavaScript

export const b = {};

export function signal_58881_v1(_, sender, el) {
  const subs = { __TEXT__: "svg" };
  const svg = b.render("svg_58881_v1", subs);
  if (b.qs("text", svg).textContent === "svg") {
    el.innerHTML = b.time();
    sender.replaceChildren(svg);
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/render/0050-svg/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/render/0050-svg/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_58881_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_58881_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

Boolean values sent in replacements turn into strings.

HTML

<div data-r="signal_A9D87_v1">waiting</div>
<button data-s="signal_A9D87_v1">Send A9D87_v1</button>


<script type="text/html" data-template="template_A9D87_v1">
  <div>__BOOLEAN__</div>
</script>

JavaScript

export const b = {};

export function signal_A9D87_v1(ev, sender, el) {
  const checkEl = b.render("template_A9D87_v1", {
    __BOOLEAN__: true,
  });
  if (checkEl.firstChild.innerHTML === "true") {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/render/0060-bools-work/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/render/0060-bools-work/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_A9D87_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_A9D87_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

Numbers used as replacement values are converted to strings.

HTML

<div data-r="signal_58E28_v1">waiting</div>
<button data-s="signal_58E28_v1">Send 58E28_v1</button>

<script type="text/html" data-id="template_58E28_v1">
  <div>__FLOAT__</div>
</script>

JavaScript

export const b = {};

export function signal_58E28_v1(_, __, el) {
  const checkEl = b.render("test_58E28_v1", {
    __FLOAT__: 1.1,
  });
  if (checkEl.firstChild.innerHTML = "1.1") {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/render/0065-numbers-work/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/render/0065-numbers-work/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_58E28_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_58E28_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

null is converted to a string when it's used as a replacement value.

HTML

<div data-r="signal_9F4E9_v1">waiting</div>
<button data-s="signal_9F4E9_v1">Send 9F4E9_v1</button>

<script type="text/html" data-template="template_9F4E9_v1">
  <div>__NULL__</div>
</script>

JavaScript

export const b = {};

export function signal_9F4E9_v1(ev, sender, el) {
  const checkEl = b.render("template_9F4E9_v1", {
    __NULL__: null,
  });
  if (checkEl.firstChild.innerHTML === "null") {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/render/0067-null-works/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/render/0067-null-works/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_9F4E9_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_9F4E9_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

b.savePageData(data, key)

Description

[x] Saves a string to a page specific IndexedDB object store with the given key.
[x] Saves an object to a page specific IndexedDB object store with the given key.
[x] Returns the value of the result from the IndexedDB put (which is the key if the insert succeeded. TBD on what is returned if there's an error).

Examples

Save page data.

HTML

<div data-r="signal_09889_v1">waiting</div>
<button data-s="signal_09889_v1">Send 09889_v1</button>

JavaScript

export const b = {};

export async function signal_09889_v1(_, __, el) {
  const key = "09889_v1";
  const result = await b.savePageData({ alfa: "bravo" }, key);
  const data = await b.loadPageData(key);
  if (result === "09889_v1" && data.alfa === "bravo") {
    el.innerHTML = b.time();
  } else {
    el.innerHTML = "error loading page data.";
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/savePageData/0010-save-page-object/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/savePageData/0010-save-page-object/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_09889_v1]").click();
  await b.sleep(800);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_09889_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

Save a string to the site wide storage.

HTML

<div data-r="signal_054ED_v1">waiting</div>
<button data-s="signal_054ED_v1">Send 054ED_v1</button>

JavaScript

export const b = {};

export async function signal_054ED_v1(_, __, el) {
  const key = "054ED_v1";
  const result = await b.savePageData("bravo", key);
  const data = await b.loadPageData(key);
  if (result === "054ED_v1" && data === "bravo") {
    el.innerHTML = b.time();
  } else {
    el.innerHTML = "error loading page data.";
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/savePageData/0020-save-page-string/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/savePageData/0020-save-page-string/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_054ED_v1]").click();
  await b.sleep(800);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_054ED_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

b.saveSiteData(data, key)

Description

[x] Saves a string to a site wide IndexedDB object store with the given key.
[x] Saves an object to a site wide IndexedDB object store with the given key.
[x] Returns the value of the result from the IndexedDB put (which is the key if the insert succeeded. TBD on what is returned if there's an error).

Examples

saveJSON(key, data)

HTML

<div data-r="signal_C087F_v1">waiting</div>
<button data-s="signal_C087F_v1">Send C087F_v1</button>

JavaScript

export const b = {};

export async function signal_C087F_v1(ev, sender, el) {
  const result = await b.saveSiteData({}, "C087F_v1");
  const data = await b.loadSiteData("C087F_v1");
  if (result === "C087F_v1" && JSON.stringify(data) === "{}") {
    el.innerHTML = b.time();
  } else {
    el.innerHTML = "data did not save properly";
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/saveSiteData/0010-save-object/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/saveSiteData/0010-save-object/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_C087F_v1]").click();
  await b.sleep(800);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_C087F_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

TKTKTK: Test name

HTML

<div data-r="signal_38755_v1">waiting</div>
<button data-s="signal_38755_v1">Send 38755_v1</button>

JavaScript

export const b = {};

export async function signal_38755_v1(ev, sender, el) {
  const result = await b.saveSiteData("bravo", "38755_v1");
  const data = await b.loadSiteData("38755_v1");
  if (result === "38755_v1" && data === "bravo") {
    el.innerHTML = b.time();
  } else {
    el.innerHTML = "data did not save properly";
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/saveSiteData/0020-save-string/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/saveSiteData/0020-save-string/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_38755_v1]").click();
  await b.sleep(800);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_38755_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

b.send(payload, signal)

Description

[x] Sends a payload to a single from inside another function.
[x] One more signals can be sent at the same time.
[x] Signals are sent as events that travel up the DOM. They can be received and run by any bitty related function in any order (i.e. the signals might execute in an order different to the initial list).
[x] The first argument passed to a signal function is the payload from the .send(payload, signals) call.
[x] The second argument is always undefined.
[x] If there are receiving elements, then the function is called once for each with the element passed in for the third argument.
[x] If there are no receiving elements, then the function is called one time with a undefined value for the third argument.
[x] Payloads can be strings, arrays, or objects.

Examples

Used `.send()` to pass a payload to a signal function.

HTML

<div data-r="signal_8919E_v2">waiting</div>
<button data-s="signal_8919E_v1">Send 8919E_v1</button>

JavaScript

export const b = {};

export function signal_8919E_v1(_, __, ___) {
  b.send({ key_signal_8919E_v1: "value_signal_8919E_v1" }, "signal_8919E_v2");
}

export function signal_8919E_v2(payload, __, el) {
  if (payload.key_signal_8919E_v1 === "value_signal_8919E_v1") {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/send/0010-basic-send/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/send/0010-basic-send/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_8919E_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_8919E_v2]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

Send a string as the payload

HTML

<div data-r="signal_52B45_v2">waiting</div>
<button data-s="signal_52B45_v1">Send 52B45_v1</button>

JavaScript

export const b = {};

export function signal_52B45_v1(ev, sender, el) {
  b.send("test_52B45_v1", "signal_52B45_v2");
}

export function signal_52B45_v2(payload, __, el) {
  if (payload === "test_52B45_v1") {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/send/0015-send-string/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/send/0015-send-string/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_52B45_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_52B45_v2]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

Send the same payload to multiple signals.

HTML

<div data-r="signal_A8E3D_v2">waiting</div>
<div data-r="signal_A8E3D_v3">waiting</div>
<button data-s="signal_A8E3D_v1">Send A8E3D_v1</button>

JavaScript

export const b = {};

export function signal_A8E3D_v1(_, __, ___) {
  b.send({ key_signal_A8E3D_v1: "value_signal_A8E3D_v1" }, "signal_A8E3D_v2 signal_A8E3D_v3");
}

export function signal_A8E3D_v2(payload, __, el) {
  if (payload.key_signal_A8E3D_v1 === "value_signal_A8E3D_v1") {
    el.innerHTML = b.time();
  }
}

export function signal_A8E3D_v3(payload, __, el) {
  if (payload.key_signal_A8E3D_v1 === "value_signal_A8E3D_v1") {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/send/0020-multiple-sends/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/send/0020-multiple-sends/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_A8E3D_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_A8E3D_v2]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
  const checkEls3 = b.qsa("[data-r~=signal_A8E3D_v3]");
  checkEls3.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

The second argument passed to a signal function from `.send()` is always `null`.

HTML

<div data-r="signal_88408_v2">waiting</div>
<button data-s="signal_88408_v1">Send 88408_v1</button>

JavaScript

export const b = {};

export function signal_88408_v1(_, __, ___) {
  b.send({}, "signal_88408_v2");
}

export function signal_88408_v2(_, sender, el) {
  if (sender === undefined) {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/send/0030-arg2-is-undefined/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/send/0030-arg2-is-undefined/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_88408_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_88408_v2]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

If there are no receiving elements that correspond to a `.send()` call the function is passed a `null` for the third argument and fires exactly one time.

HTML

<div data-r="signal_03E2A_v3">waiting</div>
<button data-s="signal_03E2A_v1">Send 03E2A_v1</button>

JavaScript

export const b = {};

export function signal_03E2A_v1(_, __, ___) {
  b.send({}, "signal_03E2A_v2");
}

export function signal_03E2A_v2(_, __, el) {
  if (el === undefined) {
    b.send({}, "signal_03E2A_v3");
  }
}

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

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/send/0040-arg3-null-if-no-receiver/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/send/0040-arg3-null-if-no-receiver/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_03E2A_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_03E2A_v3]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

b.setCSS(key, value)

Description

Sets a custom CSS property variable to the given value.

Examples

Set a custom CSS property variable.

HTML

<div data-r="signal_7D5A1_v1">waiting</div>
<button data-s="signal_7D5A1_v1">Send 7D5A1_v1</button>

JavaScript

export const b = {};

export function signal_7D5A1_v1(ev, sender, el) {
  b.setCSS("--test_signal_7D5A1_v1", "crimson");
  if (
    getComputedStyle(document.documentElement).getPropertyValue(
      "--test_signal_7D5A1_v1",
    ) === "crimson"
  ) {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/setCSS/0010-set-prop/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/setCSS/0010-set-prop/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_7D5A1_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_7D5A1_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

b.setState(payload)

Description

[x] Takes an object and updates the attributes of elements captured in it by id.
[x] The b.getState() method produces the object.
[x] The object consists of an array of objects containing values for keys (e.g. value, checked) and attributes (e.g. data-key, aria-hidden). There are no function in the object (i.e. it can be produced outside of b.getState()).

Examples

Update elements via `g.setState(payload)`

HTML

<div data-r="signal_95950_v1">waiting</div>
<div data-save="true" id="target_95950_v1"></div>
<button data-s="signal_95950_v1">Send 95950_v1</button>

JavaScript

export const b = {};

export function signal_95950_v1(_, __, el) {
  const payload = [
    { id: "target_95950_v1", attributes: { "aria-hidden": "true" } },
  ];
  b.setState(payload);
  const checkEl = b.qs("#target_95950_v1");
  if (checkEl.getAttribute("aria-hidden") === "true") {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/setState/0010-update-attributes/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/setState/0010-update-attributes/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_95950_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_95950_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

Update keys (e.g. `value`, `checked`, etc... See `b.config.getState.keys` for the full list which can also be updated as needed)>

HTML

<div data-r="signal_37935_v1">waiting</div>
<input type="text" id="target_37935_v1" data-save="true" />
<button data-s="signal_37935_v1">Send 37935_v1</button>

JavaScript

export const b = {};

export function signal_37935_v1(_, __, el) {
  const payload = [
    { id: "target_37935_v1", keys: { value: "update_37935_v1" } },
  ];
  b.setState(payload);
  const checkEl = b.qs("#target_37935_v1");
  if (checkEl.value === "update_37935_v1") {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/setState/0020-update-keys/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/setState/0020-update-keys/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_37935_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_37935_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

b.shuffle

Description

[x] Shuffles an array by modifying it to reorder the items.

Examples

Shuffle an array.

HTML

<div data-r="signal_622FB_v1">waiting</div>
<button data-s="signal_622FB_v1">Send 622FB_v1</button>

JavaScript

export const b = {};

const items = ["alfa", "bravo", "charlie", "delta", "echo", "foxtrot"];

export function signal_622FB_v1(ev, sender, el) {
  const initialLength = items.length;
  b.shuffle(items);
  sender.innerHTML = items.join(" - ");
  if (items.length === initialLength) {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/shuffle/0010-do-shuffle/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/shuffle/0010-do-shuffle/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_622FB_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_622FB_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

b.sleep(ms)

Description

Provides an async sleep for the given number of milliseconds.

Examples

Sleep for N milliseconds.

HTML

<div data-r="signal_B5E30_v1">waiting</div>
<button data-s="signal_B5E30_v1">Send B5E30_v1</button>

JavaScript

export const b = {};

export async function signal_B5E30_v1(ev, sender, el) {
  const t1 = performance.now();
  await b.sleep(100);
  const t2 = performance.now();
  if (t2 - t1 > 80) {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/sleep/0010-do-sleep/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/sleep/0010-do-sleep/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_B5E30_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_B5E30_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

b.sort

Description

[x] A function to be used with Array.prototype.sort() that does a case insensitive sort on strings.
[x] The method's signature is .sort(a, b) but is called without the params when used in an array .sort() call (i.e. items.sort(b.sort)).

Examples

Do a case insensitive sort of an array (updating the array itself)

HTML

<div data-r="signal_FBF54_v1">waiting</div>
<button data-s="signal_FBF54_v1">Send FBF54_v1</button>

JavaScript

export const b = {};

export function signal_FBF54_v1(ev, sender, el) {
  const items = [
    "bravo",
    "Alfa",
    "Delta",
    "charlie",
  ];
  items.sort(b.sort);
  if (items[1] === "bravo") {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/sort/0010-do-sort/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/sort/0010-do-sort/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_FBF54_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_FBF54_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

b.switch(subs)

Description

[x] bitty provides a default b.templates.switch template with HTML designed to be combined with custom CSS to produce a toggle switch.
[x] The b.templates.switch value can be overwritten with another template.
[x] The b.switch(subs) method renders an instance of the switch with the given substitutions.
[x] You can output the b.templates.switch template without any substitutions to see the raw template.
[x] The keys that can be substituted in the default template are:
- __BACK_LABEL__ - Text inside the label after the button.
- __CLASS__ - Populates the class on the label.
- __FRONT_LABEL__ - Text inside the label in front of the button.
- __ID__ - Populates for on the label and id on the button.
- __KEY__ - Populates data-key
- __RECEIVE__ - Populates data-r
- __SEND__ - Populates data-s
- __STATE__ - Populates aria-checked
[x] An __ID__ gets automatically generated if one isn't passed in as a substitution.
[x] The __STATE__ is set to false if a substitution isn't provided.
[x] The default __CLASS__ is bitty-switch.
[x] Because the data-key attribute is on the button's parent label it can be used by both the button and the label (e.g. via el.prop("key")).
[x] The aria-checked value can be updated via the sender argument in the signal function (i.e. from export function someSignal(ev, sender, el) {}.

Examples

Render a switch with no label.

HTML

<div data-r="signal_09C63_v1">waiting</div>
<div data-r="init_09C63_v1"></div>

JavaScript

export const b = { init: "init_09C63_v1" };

export function init_09C63_v1(_, __, el) {
  const subs = { __SEND__: "signal_09C63_v1" };
  el.replaceWith(b.switch(subs));
}

export function signal_09C63_v1(_, sender, el) {
  sender.setAria("checked", !sender.ariaAsBool("checked"));
  el.innerHTML = b.time();
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/switch/0010-default-switch/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/switch/0010-default-switch/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_09C63_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_09C63_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

Render a switch with a label in front.

HTML

<div data-r="signal_D462E_v1">waiting</div>
<div data-r="init_D462E_v1"></div>

JavaScript

export const b = { init: "init_D462E_v1" };

export function init_D462E_v1(_, __, el) {
  const subs = {
    __FRONT_LABEL__: "test D462E_v1",
    __SEND__: "signal_D462E_v1",
  };
  el.replaceWith(b.switch(subs));
}

export function signal_D462E_v1(_, sender, el) {
  sender.setAria("checked", !sender.ariaAsBool("checked"));
  el.innerHTML = b.time();
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/switch/0020-front-label/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/switch/0020-front-label/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_D462E_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_D462E_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

Render a label after a switch.

HTML

<div data-r="signal_28678_v1">waiting</div>
<div data-r="init_28678_v1"></div>

JavaScript

export const b = { init: "init_28678_v1" };

export function init_28678_v1(_, __, el) {
  const subs = {
    __BACK_LABEL__: "test 28678_v1",
    __SEND__: "signal_28678_v1",
  };
  el.replaceWith(b.switch(subs));
}

export function signal_28678_v1(_, sender, el) {
  sender.setAria("checked", !sender.ariaAsBool("checked"));
  el.innerHTML = b.time();
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/switch/0030-back-label/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/switch/0030-back-label/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_28678_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_28678_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

Set a switch to 'on' while loading.

HTML

<div data-r="signal_6CE21_v1">waiting</div>
<div data-r="init_6CE21_v1"></div>

JavaScript

export const b = { init: "init_6CE21_v1" };

export function init_6CE21_v1(_, __, el) {
  const subs = {
    __STATE__: "true",
    __SEND__: "signal_6CE21_v1",
  };
  el.replaceWith(b.switch(subs));
}

export function signal_6CE21_v1(_, sender, el) {
  sender.setAria("checked", !sender.ariaAsBool("checked"));
  el.innerHTML = b.time();
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/switch/0040-default-on/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/switch/0040-default-on/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_6CE21_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_6CE21_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

Notes

This is the stylesheet that's used for the switch examples on this page and on the rest of the site.

view stylesheet

:root {
  --bitty-switch-off: #778;
  --bitty-switch-on: #0a0;
  --bitty-switch-text: white;
}

.bitty-switch {
  display: block;
}

.bitty-switch button {  
  background-color: var(--bitty-switch-off);
  border: 1px solid rgb(255 255 255 / 0);
  border-radius: 1rem;
  color: var(--bitty-switch-text);
  height: 1.2rem;
  padding: 0;
  position: relative;
  transform: translateY(0.25rem);
  width: 3.1rem;
}

.bitty-switch button:hover {  
  border: 1px solid var(--bitty-switch-text);
  color: var(--bitty-switch-text);
}

.bitty-switch button[aria-checked="true"]  {
  background-color: var(--bitty-switch-on);
}

.bitty-switch button :nth-child(1):after,
.bitty-switch button :nth-child(1):before {
  position: absolute;
  top: 50%;
  transform: translateY(-53%);
}

.bitty-switch button :nth-child(2):after,
.bitty-switch button :nth-child(2):before {
  border-radius: 1rem;
  height: 1rem;
  width: 1rem;
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.bitty-switch button[aria-checked="true"] :nth-child(1):before {
  content: "on";
  left: 0.35rem;
}

.bitty-switch button[aria-checked="true"] :nth-child(2):before {
  background: var(--bitty-switch-text);
  right: 0.25rem;
}

.bitty-switch button[aria-checked="false"] :nth-child(1):after {
  content: "off";
  right: 0.35rem;
}

.bitty-switch button[aria-checked="false"] :nth-child(2):after {
  background: var(--bitty-switch-text);
  left: 0.25rem;
}

b.tee(input, log = true)

Description

The b.tee() method is modeled after the tee command line tool.
Input sent to see is returned without modification.
By default, the input is also sent to content.log.
The log output can be turned off by setting the second argument to false or 0.

Examples

Return the input passed to tee while also logging it out to the console.

HTML

<div data-r="signal_78164_v1">waiting</div>
<button data-s="signal_78164_v1">Send 78164_v1</button>

JavaScript

export const b = {};

export function signal_78164_v1(ev, sender, el) {
  el.innerHTML = b.tee(b.time());
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/tee/0010-demo-tee/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/tee/0010-demo-tee/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_78164_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_78164_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

b.time(date = new Date())

Description

Outputs a timestamp in the format YYYY-MM-DDTHH:MM:SS for the current locale.
The hour in HH is based of a 24 hour clock (e.g. 3PM is 15).
If a Date is passed to the function the output is based off it.
If no argument is provided the function uses new Date() for the time.

Examples

Display the current time.

HTML

<div data-r="signal_010EE_v1">waiting</div>
<button data-s="signal_010EE_v1">Send 010EE_v1</button>

JavaScript

export const b = {};

export function signal_010EE_v1(ev, sender, el) {
  const timestamp = b.time();
  el.innerHTML = timestamp;
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/time/0010-current-time/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/time/0010-current-time/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_010EE_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_010EE_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

Display a specific time.

HTML

<div data-r="signal_05431_v1">waiting</div>
<button data-s="signal_05431_v1">Send 05431_v1</button>

JavaScript

export const b = {};

export function signal_05431_v1(ev, sender, el) {
  const date = new Date(2026, 0, 1, 13, 45, 55);
  const timestamp = b.time(date);
  el.innerHTML = timestamp;
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/time/0020-specific-time/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/time/0020-specific-time/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_05431_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_05431_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

Notes

The purpose of this function is to provide a concise display of a time for the current locale. It is not a valid ISO 8601, RFC 3339, or RFC 9557 timestamp.

b.timeMs(date = new Date())

Description

Operates the same as time() but adds milliseconds to the end of the string.

Examples

Display the current time with milliseconds.

HTML

<div data-r="signal_5415A_v1">waiting</div>
<button data-s="signal_5415A_v1">Send 5415A_v1</button>

JavaScript

export const b = {};

export function signal_5415A_v1(ev, sender, el) {
  const timestamp = b.timeMs();
  el.innerHTML = timestamp;
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/timeMs/0010-current-time/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/timeMs/0010-current-time/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_5415A_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_5415A_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

Display a specific time with milliseconds.

HTML

<div data-r="signal_85842_v1">waiting</div>
<button data-s="signal_85842_v1">Send 85842_v1</button>

JavaScript

export const b = {};

export function signal_85842_v1(ev, sender, el) {
  const date = new Date(2026, 0, 1, 13, 45, 55);
  const timestamp = b.timeMs(date);
  el.innerHTML = timestamp;
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/timeMs/0020-specific-time/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/timeMs/0020-specific-time/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_85842_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_85842_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

b.trigger(signals)

Description

[x] Used to trigger a signal from inside another function.
[x] Can trigger one single or multiple.
[x] If a signal is triggered and there are corresponding receiver elements (i.e. they have a matching data-r attribute), each one is processed individually (the process is the same as what happens with data-s).
[x] The first argument passed to a triggered signal is a custom event with the type bittytrigger.
[x] The internal details of the bittytrigger event type is an implementation detail with no public API and may change without notice.
[x] The second argument argument to a triggered signal that normally holds the sender is undefined.
[x] If a signal is triggered and there's no corresponding receiver it is run a single time without an element passed to the third argument (this is the same as data-s as well).
[x] Triggers are sent as events that bubble up the DOM and processed individually by an bitty instance that has a corresponding function (i.e. there is no guarantee that the triggers will occur in the order they are added. Processing things in a given order can be done by triggering a single function at a time with each function calling the next one in the chain when it's done).

Examples

Trigger a signal from inside another function.

HTML

<div data-r="signal_9FE51_v2">waiting</div>
<button data-s="signal_9FE51_v1">Send 9FE51_v1</button>

JavaScript

export const b = {};

export function signal_9FE51_v1(_, __, ___) {
  b.trigger("signal_9FE51_v2");
}

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

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/trigger/0010-single-trigger/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/trigger/0010-single-trigger/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_9FE51_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_9FE51_v2]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

Trigger multiple signals.

HTML

<div data-r="signal_68843_v2">waiting</div>
<div data-r="signal_68843_v3">waiting</div>
<button data-s="signal_68843_v1">Send 68843_v1</button>

JavaScript

export const b = {};

export function signal_68843_v1(_, __, ___) {
  b.trigger("signal_68843_v2 signal_68843_v3");
}

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

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

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/trigger/0020-multiple-triggers/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/trigger/0020-multiple-triggers/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_68843_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_68843_v2]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });

  const checkEls2 = b.qsa("[data-r~=signal_68843_v3]");
  checkEls2.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

Triggered signals without a receiver fire once.

HTML

<div data-r="signal_EC577_v3">waiting</div>
<button data-s="signal_EC577_v1">Send EC577_v1</button>

JavaScript

export const b = {};

export function signal_EC577_v1(_, __, ___) {
  b.trigger("signal_EC577_v2");
}

export function signal_EC577_v2(_, __, ___) {
  b.trigger("signal_EC577_v3");
}

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

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/trigger/0030-no-receiver/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/trigger/0030-no-receiver/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_EC577_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_EC577_v3]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

The incoming event type is `bittytrigger`. (Note that the internals of the event itself are private implementation details that may change without notice.)

HTML

<div data-r="signal_94F67_v2">waiting</div>
<button data-s="signal_94F67_v1">Send 94F67_v1</button>

JavaScript

export const b = {};

export function signal_94F67_v1(_, __, ___) {
  b.trigger("signal_94F67_v2");
}

export function signal_94F67_v2(ev, __, el) {
  if (ev.type === "bittytrigger") {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/trigger/0040-event-type-check/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/trigger/0040-event-type-check/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_94F67_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_94F67_v2]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

The second argument (i.e. the `sender` argument) is `null` from `.trigger()`.

HTML

<div data-r="signal_9BBC3_v2">waiting</div>
<button data-s="signal_9BBC3_v1">Send 9BBC3_v1</button>

JavaScript

export const b = {};

export function signal_9BBC3_v1(_, __, ___) {
  b.trigger("signal_9BBC3_v2");
}

export function signal_9BBC3_v2(_, sender, el) {
  if (sender === undefined) {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/trigger/0050-arg2-is-undefined/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/trigger/0050-arg2-is-undefined/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_9BBC3_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_9BBC3_v2]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

The third argument passed to a function from trigger is `null` if there is no corresponding receiver (i.e. element with a `data-r` that has the value of the signal).

HTML

<div data-r="signal_0D36A_v3">waiting</div>
<button data-s="signal_0D36A_v1">Send 0D36A_v1</button>

JavaScript

export const b = {};

export function signal_0D36A_v1(_, __, ___) {
  b.trigger("signal_0D36A_v2");
}

export function signal_0D36A_v2(_, __, el) {
  if (el === undefined) {
    b.trigger("signal_0D36A_v3");
  }
}

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

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/trigger/0060-arg3-undefined-if-no-receiver/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/trigger/0060-arg3-undefined-if-no-receiver/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_0D36A_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_0D36A_v3]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

b.uuid(dashes = true)

Description

[x] Generates a random UUID with self.crypto.randomUUID().
[] Passing false for the optional argument removes the dashes from the UUID.

Examples

Get a standard v4 UUID.

HTML

<div data-r="signal_B5C78_v1">waiting</div>
<button data-s="signal_B5C78_v1">Send B5C78_v1</button>

JavaScript

export const b = {};

export function signal_B5C78_v1(_, __, el) {
  el.innerHTML = b.uuid();
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/uuid/0010-uuid-with-dashes/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/uuid/0010-uuid-with-dashes/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_B5C78_v1]").click();
  await b.sleep(200);
  const pattern = /\w{8}-\w{4}-\w{4}-\w{4}-\w{12}/;
  const checkEls = b.qsa("[data-r~=signal_B5C78_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

Generate a 32 character string from a UUID with the dashes removed.

HTML

<div data-r="signal_26E12_v1">waiting</div>
<button data-s="signal_26E12_v1">Send 26E12_v1</button>

JavaScript

export const b = {};

export function signal_26E12_v1(_, __, el) {
  el.innerHTML = b.uuid(false);
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/uuid/0020-uuid-without-dashes/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0030-bitty-functions/uuid/0020-uuid-without-dashes/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_26E12_v1]").click();
  await b.sleep(200);
  const pattern = /\w{32}/;
  const checkEls = b.qsa("[data-r~=signal_26E12_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

default listeners

button

Examples

click a button

HTML

<div data-r="signal_E5B7B_v1">waiting</div>
<button data-s="signal_E5B7B_v1">Send E5B7B_v1</button>

JavaScript

export const b = {};

export function signal_E5B7B_v1(ev, sender, el) {
  el.innerHTML = b.time();
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0032-default-listeners/button/0010-click-button/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0032-default-listeners/button/0010-click-button/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_E5B7B_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_E5B7B_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

clickable elements

Description

[] non-form, non-contenteditable elements pass click events by default when they have a data-s attribute on them.

Examples

click div

HTML

<div data-r="signal_7E9F1_v1">waiting</div>
<div data-s="signal_7E9F1_v1">Send 7E9F1_v1</div>

JavaScript

export const b = {};

let activations = 0;

export function signal_7E9F1_v1(ev, __, el) {
  activations += 1;
  if (activations === 1 && ev.type === "click") {
    el.innerHTML = b.time();
  } else {
    el.innerHTML = "got more than one activation";
  }
}

Result

waiting

Send 7E9F1_v1

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0032-default-listeners/clickable-elements/0010-click-div/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0032-default-listeners/clickable-elements/0010-click-div/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_7E9F1_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_7E9F1_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

clicking a nested div only sends one signal

HTML

<div data-r="signal_7E96C_v1">waiting</div>
<div>
  <div>
    <div data-s="signal_7E96C_v1">Send 7E96C_v1</div>
  </div>
</div>

JavaScript

export const b = {};

let activations = 0;

export function signal_7E96C_v1(ev, __, el) {
  activations += 1;
  if (activations === 1 && ev.type === "click") {
    el.innerHTML = b.time();
  } else {
    el.innerHTML = "got more than one activation";
  }
}

Result

waiting

Send 7E96C_v1

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0032-default-listeners/clickable-elements/0020-click-lower-nested/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0032-default-listeners/clickable-elements/0020-click-lower-nested/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_7E96C_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_7E96C_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

click top div only sends one signal

HTML

<div data-r="signal_A1A49_v1">waiting</div>
<div data-s="signal_A1A49_v1">
  <div>
    <div>Send A1A49_v1</div>
  </div>
</div>

JavaScript

export const b = {};

let activations = 0;

export function signal_A1A49_v1(ev, __, el) {
  activations += 1;
  if (activations === 1 && ev.type === "click") {
    el.innerHTML = b.time();
  } else {
    el.innerHTML = "got more than one activation";
  }
}

Result

waiting

Send A1A49_v1

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0032-default-listeners/clickable-elements/0030-click-upper-nested/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0032-default-listeners/clickable-elements/0030-click-upper-nested/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_A1A49_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_A1A49_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

contenteditable

Description

[] Elements with contenteditable pass input events.

It would be preferable to pass change events. But, those aren't provided by contenteditable.

It's not possible to listen for blur events at the top of the DOM either. Those events don't bubble.

For brief testing it looks like an ev.inputType === "insertParagraph" check can be used as a proxy for when the enter key is hit that could stand in for a change event if the element should only provide a single line. That needs more investigation though.

It's possible to listen for blur events by attaching the listener directly to an element. bitty doesn't try to do that because race conditions may occur when adding elements and trying to coordinate between multiple possible bitty instances on a page is outside of scope.

Examples

contenteditable sends input events by default

HTML

<div>Input:</div>
<div data-s="signal_BA43D_v1" contenteditable="true"></div>

<div>Output:</div>
<div data-r="signal_BA43D_v1">waiting</div>

<style>
[data-s=signal_BA43D_v1], [data-r=signal_BA43D_v1] {
  border: var(--faded-accent-border);
}
</style>

JavaScript

export const b = {};

export function signal_BA43D_v1(ev, sender, el) {
  el.innerHTML = sender.innerHTML;
}

Result

Input:

Output:

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0032-default-listeners/contenteditable/0010-listen-for-input/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0032-default-listeners/contenteditable/0010-listen-for-input/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  await b.sleep(200);
  const checkEls = b.qsa("[data-r~=signal_BA43D_v1]");
  checkEls.forEach((checkEl) => {
    checkEl.dataset.testStatus = -1;
  });
}

contenteditable elements can listen for click events

HTML

<div data-r="signal_DD34F_v1">waiting</div>
<div data-listen="click" data-s="signal_DD34F_v1" contenteditable="plaintext-only">Send DD34F_v1 on click</div>

JavaScript

export const b = {};

export function signal_DD34F_v1(ev, sender, el) {
  el.innerHTML = b.time();
}

Result

waiting

Send DD34F_v1 on click

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0032-default-listeners/contenteditable/0020-can-listen-for-click/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0032-default-listeners/contenteditable/0020-can-listen-for-click/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_DD34F_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_DD34F_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

form

Examples

submit form

HTML

<div data-r="signal_3B25A_v1">waiting</div>
<form data-s="signal_3B25A_v1">
  <input id="target_3B25A_v1" type="submit" value="Send 3B25A_v1" />
</form>

JavaScript

export const b = {};

export function signal_3B25A_v1(ev, __, el) {
  if (ev.type === "submit") {
    el.innerHTML = b.time();
    ev.preventDefault();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0032-default-listeners/form/0010-submit-form/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0032-default-listeners/form/0010-submit-form/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("#target_3B25A_v1").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_3B25A_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

input: button

Examples

Clicking an `input type="button"` sends signals.

HTML

<div data-r="signal_7AF58_v1">waiting</div>
<input type="button" data-s="signal_7AF58_v1" value="Send 7AF58_v1" />

JavaScript

export const b = {};

let activations = 0;

export function signal_7AF58_v1(ev, __, el) {
  activations += 1;
  if (ev.type === "click" && activations === 1) {
    el.innerHTML = b.time();
  } else {
    el.innerHTML =
      "got more than one activation or something other than a click";
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0032-default-listeners/input-button/0010-click-button/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0032-default-listeners/input-button/0010-click-button/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_7AF58_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_7AF58_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

input: checkbox

Examples

Tick a checkbox.

HTML

<div data-r="signal_7F250_v1">waiting</div>
<label>
  <input type="checkbox" data-s="signal_7F250_v1" autocomplete="off">
  Send 7F250_v1
</label>

JavaScript

export const b = {};

let activations = 0;

export function signal_7F250_v1(ev, sender, el) {
  activations += 1;
  if (activations === 1 && ev.type === "change") {
    el.innerHTML = b.time();
  } else {
    el.innerHTML =
      "got more than one activation or something other than a change event";
  }
}

Result

waiting

Send 7F250_v1

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0032-default-listeners/input-checkbox/0010-check-checkbox/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0032-default-listeners/input-checkbox/0010-check-checkbox/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_7F250_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_7F250_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

Using the label works to update the checkbox and send the signals

HTML

<div data-r="signal_1B139_v1">waiting</div>
<label id="target_1B139_v1">
  <input type="checkbox" data-s="signal_1B139_v1" autocomplete="off">
  Send 1B139_v1
</label>

JavaScript

export const b = {};

let activations = 0;

export function signal_1B139_v1(ev, sender, el) {
  activations += 1;
  if (activations === 1 && ev.type === "change") {
    el.innerHTML = b.time();
  } else {
    el.innerHTML =
      "got more than one activation or something other than a change event";
  }
}

Result

waiting

Send 1B139_v1

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0032-default-listeners/input-checkbox/0020-label-works/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0032-default-listeners/input-checkbox/0020-label-works/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_1B139_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_1B139_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

input: color

Examples

Choose a color

HTML

<div data-r="signal_8AAB1_v1">waiting</div>
<input type="color" data-s="signal_8AAB1_v1" value="eea6a6" />

JavaScript

export const b = {};

const targetType = "change";
let gotBadEvent = false;

export function signal_8AAB1_v1(ev, sender, el) {
  if (ev.type !== targetType) {
    gotBadEvent = true;
  }
  if (gotBadEvent === true) {
    el.innerHTML = `got an invalid event that is not ` + targetType;
  } else {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0032-default-listeners/input-color/0010-choose-color/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0032-default-listeners/input-color/0010-choose-color/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  await b.sleep(200);
  const checkEls = b.qsa("[data-r~=signal_8AAB1_v1]");
  checkEls.forEach((checkEl) => {
    checkEl.dataset.testStatus = -1;
  });
}

input: date

Examples

date sends signals on `change` events.

HTML

<div data-r="signal_6934D_v1">waiting</div>
<input type="date" data-s="signal_6934D_v1" autocomplete="off" />

JavaScript

export const b = {};

const targetType = "change";
let gotBadEvent = false;

export function signal_6934D_v1(ev, sender, el) {
  if (ev.type !== targetType) {
    gotBadEvent = true;
  }
  if (gotBadEvent === true) {
    el.innerHTML = `got an invalid event that is not ` + targetType;
  } else {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0032-default-listeners/input-date/0010-select-date/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0032-default-listeners/input-date/0010-select-date/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  await b.sleep(200);
  const checkEls = b.qsa("[data-r~=signal_6934D_v1]");
  checkEls.forEach((checkEl) => {
    checkEl.dataset.testStatus = -1;
  });
}

input local datetime

Examples

Test local datetime

HTML

<div data-r="signal_57616_v1">waiting</div>
<input type="datetime-local" data-s="signal_57616_v1" autocomplete="off"/>

JavaScript

export const b = {};

const targetType = "change";
let gotBadEvent = false;

export function signal_57616_v1(ev, sender, el) {
  if (ev.type !== targetType) {
    gotBadEvent = true;
  }
  if (gotBadEvent === true) {
    el.innerHTML = `got an invalid event that is not ` + targetType;
  } else {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0032-default-listeners/input-datetime-local/0010-test-input/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0032-default-listeners/input-datetime-local/0010-test-input/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  await b.sleep(200);
  const checkEls = b.qsa("[data-r~=signal_57616_v1]");
  checkEls.forEach((checkEl) => {
    checkEl.dataset.testStatus = -1;
  });
}

input: email

Examples

Test input

HTML

<div data-r="signal_23B79_v1">waiting</div>
<input type="email" data-s="signal_23B79_v1" autocomplete="off" />

JavaScript

export const b = {};

const targetType = "keydown";
let gotBadEvent = false;

export function signal_23B79_v1(ev, sender, el) {
  if (ev.type !== targetType) {
    gotBadEvent = true;
  }
  if (gotBadEvent === true) {
    el.innerHTML = `got an invalid event that is not ` + targetType;
  } else {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0032-default-listeners/input-email/0010-test-input/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0032-default-listeners/input-email/0010-test-input/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  await b.sleep(200);
  const checkEls = b.qsa("[data-r~=signal_23B79_v1]");
  checkEls.forEach((checkEl) => {
    checkEl.dataset.testStatus = -1;
  });
}

input: file

Examples

Test input

HTML

<div data-r="signal_E0BC3_v1">waiting</div>
<input type="file" data-s="signal_E0BC3_v1" autocomplete="off" />

JavaScript

export const b = {};

const targetType = "change";
let gotBadEvent = false;

export function signal_E0BC3_v1(ev, sender, el) {
  if (ev.type !== targetType) {
    gotBadEvent = true;
  }
  if (gotBadEvent === true) {
    el.innerHTML = `got an invalid event that is not ` + targetType;
  } else {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0032-default-listeners/input-file/0010-test-input/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0032-default-listeners/input-file/0010-test-input/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  await b.sleep(200);
  const checkEls = b.qsa("[data-r~=signal_E0BC3_v1]");
  checkEls.forEach((checkEl) => {
    checkEl.dataset.testStatus = -1;
  });
}

input: image

Examples

Test input

HTML

<div data-r="signal_F3E96_v1">waiting</div>
<input 
  type="image" 
  alt="Submit"
  src="/versions&#x2f;8&#x2f;0&#x2f;0&#x2f;documentation/samples/submit-button.jpg"
  data-s="signal_F3E96_v1" 
  autocomplete="off" />

JavaScript

export const b = {};

const targetType = "click";
let gotBadEvent = false;

export function signal_F3E96_v1(ev, sender, el) {
  if (ev.type !== targetType) {
    gotBadEvent = true;
  }
  if (gotBadEvent === true) {
    el.innerHTML = `got an invalid event that is not ` + targetType;
  } else {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0032-default-listeners/input-image/0010-test-input/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0032-default-listeners/input-image/0010-test-input/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  await b.sleep(200);
  const checkEls = b.qsa("[data-r~=signal_F3E96_v1]");
  checkEls.forEach((checkEl) => {
    checkEl.dataset.testStatus = -1;
  });
}

input: month

Examples

Test input

HTML

<div data-r="signal_85664_v1">waiting</div>
<input type="month" data-s="signal_85664_v1" autocomplete="off" />

JavaScript

export const b = {};

const targetType = "keydown";
let gotBadEvent = false;

export function signal_85664_v1(ev, sender, el) {
  if (ev.type !== targetType) {
    gotBadEvent = true;
  }
  if (gotBadEvent === true) {
    el.innerHTML = `got an invalid event that is not ` + targetType;
  } else {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0032-default-listeners/input-month/0010-test-input/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0032-default-listeners/input-month/0010-test-input/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  await b.sleep(200);
  const checkEls = b.qsa("[data-r~=signal_85664_v1]");
  checkEls.forEach((checkEl) => {
    checkEl.dataset.testStatus = -1;
  });
}

input: number

Examples

Test input

HTML

<div data-r="signal_5ADC2_v1">waiting</div>
<input type="number" data-s="signal_5ADC2_v1" autocomplete="off" />

JavaScript

export const b = {};

const targetTypes = ["input", "keydown"];
let gotBadEvent = false;

export function signal_5ADC2_v1(ev, sender, el) {
  if (!targetTypes.includes(ev.type)) {
    gotBadEvent = true;
  }
  if (gotBadEvent === true) {
    el.innerHTML = `got an invalid event that is not ` + targetTypes;
  } else {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0032-default-listeners/input-number/0010-test-input/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0032-default-listeners/input-number/0010-test-input/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  await b.sleep(200);
  const checkEls = b.qsa("[data-r~=signal_5ADC2_v1]");
  checkEls.forEach((checkEl) => {
    checkEl.dataset.testStatus = -1;
  });
}

input: password

Examples

Test input

HTML

<div data-r="signal_A49B4_v1">waiting</div>
<input type="password" data-s="signal_A49B4_v1" autocomplete="off" />

JavaScript

export const b = {};

const targetType = "keydown";
let gotBadEvent = false;

export function signal_A49B4_v1(ev, sender, el) {
  if (ev.type !== targetType) {
    gotBadEvent = true;
  }
  if (gotBadEvent === true) {
    el.innerHTML = `got an invalid event that is not ` + targetType;
  } else {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0032-default-listeners/input-password/0010-test-input/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0032-default-listeners/input-password/0010-test-input/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  await b.sleep(200);
  const checkEls = b.qsa("[data-r~=signal_A49B4_v1]");
  checkEls.forEach((checkEl) => {
    checkEl.dataset.testStatus = -1;
  });
}

input: radio

Examples

Test input

HTML

<div data-r="signal_0A634_v1">waiting</div>
<input type="radio" name="test_0A634_v1" data-s="signal_0A634_v1" autocomplete="off" value="alfa" checked />
<input type="radio" name="test_0A634_v1" data-s="signal_0A634_v1" autocomplete="off" value="bravo" />

JavaScript

export const b = {};

const targetType = "change";
let gotBadEvent = false;

export function signal_0A634_v1(ev, sender, el) {
  if (ev.type !== targetType) {
    gotBadEvent = true;
  }
  if (gotBadEvent === true) {
    el.innerHTML = `got an invalid event that is not ` + targetType;
  } else {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0032-default-listeners/input-radio/0010-test-input/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0032-default-listeners/input-radio/0010-test-input/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  await b.sleep(200);
  const checkEls = b.qsa("[data-r~=signal_0A634_v1]");
  checkEls.forEach((checkEl) => {
    checkEl.dataset.testStatus = -1;
  });
}

input: range

Examples

Test input

HTML

<div data-r="signal_33821_v1">waiting</div>
<input type="range" data-s="signal_33821_v1" autocomplete="off" />

JavaScript

export const b = {};

const targetType = "input";
let gotBadEvent = false;

export function signal_33821_v1(ev, sender, el) {
  if (ev.type !== targetType) {
    gotBadEvent = true;
  }
  if (gotBadEvent === true) {
    el.innerHTML = `got an invalid event that is not ` + targetType;
  } else {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0032-default-listeners/input-range/0010-test-input/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0032-default-listeners/input-range/0010-test-input/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  await b.sleep(200);
  const checkEls = b.qsa("[data-r~=signal_33821_v1]");
  checkEls.forEach((checkEl) => {
    checkEl.dataset.testStatus = -1;
  });
}

input: reset

Examples

Test input

HTML

<div data-r="signal_A6C9D_v1">waiting</div>
<input type="reset" data-s="signal_A6C9D_v1" autocomplete="off" />

JavaScript

export const b = {};

const targetType = "click";
let gotBadEvent = false;

export function signal_A6C9D_v1(ev, sender, el) {
  if (ev.type !== targetType) {
    gotBadEvent = true;
  }
  if (gotBadEvent === true) {
    el.innerHTML = `got an invalid event that is not ` + targetType;
  } else {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0032-default-listeners/input-reset/0010-test-input/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0032-default-listeners/input-reset/0010-test-input/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  await b.sleep(200);
  const checkEls = b.qsa("[data-r~=signal_A6C9D_v1]");
  checkEls.forEach((checkEl) => {
    checkEl.dataset.testStatus = -1;
  });
}

input: search

Examples

Test input

HTML

<div data-r="signal_981A5_v1">waiting</div>
<input type="search" data-s="signal_981A5_v1" autocomplete="off" />

JavaScript

export const b = {};

const targetTypes = ["input", "keydown"];
let gotBadEvent = false;

export function signal_981A5_v1(ev, sender, el) {
  if (!targetTypes.includes(ev.type)) {
    gotBadEvent = true;
  }
  if (gotBadEvent === true) {
    el.innerHTML = `got an invalid event that is not ` + targetTypes;
  } else {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0032-default-listeners/input-search/0010-test-input/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0032-default-listeners/input-search/0010-test-input/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  await b.sleep(200);
  const checkEls = b.qsa("[data-r~=signal_981A5_v1]");
  checkEls.forEach((checkEl) => {
    checkEl.dataset.testStatus = -1;
  });
}

input: select

Examples

Test input

HTML

<div data-r="signal_4EC6B_v1">waiting</div>
<select data-s="signal_4EC6B_v1" autocomplete="off">
  <option value="alfa">alfa</option>
  <option value="bravo">bravo</option>
  <option value="charlie">charlie</option>
</select>

JavaScript

export const b = {};

const targetTypes = ["change"];
let gotBadEvent = false;

export function signal_4EC6B_v1(ev, sender, el) {
  if (!targetTypes.includes(ev.type)) {
    gotBadEvent = true;
  }
  if (gotBadEvent === true) {
    el.innerHTML = `got an invalid event that is not ` + targetTypes;
  } else {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0032-default-listeners/input-select/0010-test-input/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0032-default-listeners/input-select/0010-test-input/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  await b.sleep(200);
  const checkEls = b.qsa("[data-r~=signal_4EC6B_v1]");
  checkEls.forEach((checkEl) => {
    checkEl.dataset.testStatus = -1;
  });
}

input: submit

Examples

Test input

HTML

<div data-r="signal_EC355_v1">waiting</div>
<input type="submit" data-s="signal_EC355_v1" autocomplete="off" />

JavaScript

export const b = {};

const targetTypes = ["click"];
let gotBadEvent = false;

export function signal_EC355_v1(ev, sender, el) {
  if (!targetTypes.includes(ev.type)) {
    gotBadEvent = true;
  }
  if (gotBadEvent === true) {
    el.innerHTML = `got an invalid event that is not ` + targetTypes;
  } else {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0032-default-listeners/input-submit/0010-test-input/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0032-default-listeners/input-submit/0010-test-input/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  await b.sleep(200);
  const checkEls = b.qsa("[data-r~=signal_EC355_v1]");
  checkEls.forEach((checkEl) => {
    checkEl.dataset.testStatus = -1;
  });
}

input: tel

Examples

Test input

HTML

<div data-r="signal_CEEB4_v1">waiting</div>
<input type="tel" data-s="signal_CEEB4_v1" autocomplete="off" />

JavaScript

export const b = {};

const targetTypes = ["keydown"];
let gotBadEvent = false;

export function signal_CEEB4_v1(ev, sender, el) {
  if (!targetTypes.includes(ev.type)) {
    gotBadEvent = true;
  }
  if (gotBadEvent === true) {
    el.innerHTML = `got an invalid event that is not ` + targetTypes;
  } else {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0032-default-listeners/input-tel/0010-test-input/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0032-default-listeners/input-tel/0010-test-input/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  await b.sleep(200);
  const checkEls = b.qsa("[data-r~=signal_CEEB4_v1]");
  checkEls.forEach((checkEl) => {
    checkEl.dataset.testStatus = -1;
  });
}

input: text

Description

Triggers for input tags with type="text" are triggered when the Enter key is pressed (via keyCode=13).
It does not respond to every character that's input. Use type="search" if you need to do that.

Examples

Test input

HTML

<div data-r="signal_19C73_v1">waiting</div>
<input type="text" data-s="signal_19C73_v1" autocomplete="off" />

JavaScript

export const b = {};

const targetTypes = ["keydown"];
let gotBadEvent = false;

export function signal_19C73_v1(ev, sender, el) {
  if (!targetTypes.includes(ev.type)) {
    gotBadEvent = true;
  }
  if (gotBadEvent === true) {
    el.innerHTML = `got an invalid event that is not ` + targetTypes;
  } else {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0032-default-listeners/input-text/0010-test-input/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0032-default-listeners/input-text/0010-test-input/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  await b.sleep(200);
  const checkEls = b.qsa("[data-r~=signal_19C73_v1]");
  checkEls.forEach((checkEl) => {
    checkEl.dataset.testStatus = -1;
  });
}

input: time

Examples

Test input

HTML

<div data-r="signal_CBC22_v1">waiting</div>
<input type="time" data-s="signal_CBC22_v1" autocomplete="off" />

JavaScript

export const b = {};

const targetTypes = ["change"];
let gotBadEvent = false;

export function signal_CBC22_v1(ev, sender, el) {
  if (!targetTypes.includes(ev.type)) {
    gotBadEvent = true;
  }
  if (gotBadEvent === true) {
    el.innerHTML = `got an invalid event that is not ` + targetTypes;
  } else {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0032-default-listeners/input-time/0010-test-input/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0032-default-listeners/input-time/0010-test-input/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  await b.sleep(200);
  const checkEls = b.qsa("[data-r~=signal_CBC22_v1]");
  checkEls.forEach((checkEl) => {
    checkEl.dataset.testStatus = -1;
  });
}

input: url

Examples

Test input

HTML

<div data-r="signal_D3EA6_v1">waiting</div>
<input type="url" data-s="signal_D3EA6_v1" autocomplete="off" />

JavaScript

export const b = {};

const targetTypes = ["keydown"];
let gotBadEvent = false;

export function signal_D3EA6_v1(ev, sender, el) {
  if (!targetTypes.includes(ev.type)) {
    gotBadEvent = true;
  }
  if (gotBadEvent === true) {
    el.innerHTML = `got an invalid event that is not ` + targetTypes;
  } else {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0032-default-listeners/input-url/0010-test-input/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0032-default-listeners/input-url/0010-test-input/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  await b.sleep(200);
  const checkEls = b.qsa("[data-r~=signal_D3EA6_v1]");
  checkEls.forEach((checkEl) => {
    checkEl.dataset.testStatus = -1;
  });
}

input: week

Examples

Test input

HTML

<div data-r="signal_78B06_v1">waiting</div>
<input type="week" data-s="signal_78B06_v1" autocomplete="off" />

JavaScript

export const b = {};

const targetTypes = ["keydown"];
let gotBadEvent = false;

export function signal_78B06_v1(ev, sender, el) {
  if (!targetTypes.includes(ev.type)) {
    gotBadEvent = true;
  }
  if (gotBadEvent === true) {
    el.innerHTML = `got an invalid event that is not ` + targetTypes;
  } else {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0032-default-listeners/input-week/0010-test-input/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0032-default-listeners/input-week/0010-test-input/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  await b.sleep(200);
  const checkEls = b.qsa("[data-r~=signal_78B06_v1]");
  checkEls.forEach((checkEl) => {
    checkEl.dataset.testStatus = -1;
  });
}

input: textarea

Examples

Test input

HTML

<div data-r="signal_838A5_v1">waiting</div>
<textarea data-s="signal_838A5_v1" autocomplete="off"></textarea>

JavaScript

export const b = {};

const targetTypes = ["change", "input"];
let gotBadEvent = false;

export function signal_838A5_v1(ev, sender, el) {
  if (!targetTypes.includes(ev.type)) {
    gotBadEvent = true;
  }
  if (gotBadEvent === true) {
    el.innerHTML = `got an invalid event that is not ` + targetTypes;
  } else {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0032-default-listeners/textarea/0010-test-input/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0032-default-listeners/textarea/0010-test-input/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  await b.sleep(200);
  const checkEls = b.qsa("[data-r~=signal_838A5_v1]");
  checkEls.forEach((checkEl) => {
    checkEl.dataset.testStatus = -1;
  });
}

page assets

auto loaded page data

Description

[] data can be added directly to a page by including a string of JSON in a <script> tag with a type of applicaiton/json and an id attribute.
[] The data can be accessed from b.data["id"] where id is the value of the id attribute.

Examples

Auto load data from the page.

HTML

<script data-template="data_signal_A4B07_v1" type="application/json">
{ "key_signal_A4B07_v1": "value_signal_A4B07_v1" }
</script>

<div data-r="signal_A4B07_v1">waiting</div>
<button data-s="signal_A4B07_v1">Send A4B07_v1</button>

JavaScript

export const b = {};

export function signal_A4B07_v1(ev, sender, el) {
  const checkValue = b.data["data_signal_A4B07_v1"].key_signal_A4B07_v1;
  if (checkValue === "value_signal_A4B07_v1") {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0035-page-assets/page-data/0010-load-page-data/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0035-page-assets/page-data/0010-load-page-data/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_A4B07_v1]").click();
  await b.sleep(1000);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_A4B07_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

auto loaded page SVGs

Description

[x] SVGs can be included on the page by placing them as the first element inside a <template> tag on the page with an id attribute.
[x] SVGs loaded this way are available in b.svg["id"] where id is the value of the id attribute.

Examples

Auto load SVGs from the page.

HTML

<script type="image/svg" data-template="svg_signal_24CEF_v1">
  <svg version="1.1" width="60" height="40" xmlns="http://www.w3.org/2000/svg">
    <rect width="100%" height="100%" fill="green" />
    <text x="30" y="24" font-size="20" text-anchor="middle" fill="white">svg</text>
  </svg>
</script>

<div data-r="signal_24CEF_v1">waiting</div>
<button data-s="signal_24CEF_v1">Send 24CEF_v1</button>

JavaScript

export const b = {};

export function signal_24CEF_v1(ev, sender, el) {
  if (b.svgs["svg_signal_24CEF_v1"] !== undefined) {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0035-page-assets/page-svgs/0010-load-svgs/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0035-page-assets/page-svgs/0010-load-svgs/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_24CEF_v1]").click();
  await b.sleep(1000);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_24CEF_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

auto loaded page templates

Examples

Use an auto loaded template.

HTML

<script type="text/html" data-template="template_A6DC9_v1">
  <div>Content A6DC9_v1</div>
</script>

<div data-r="signal_A6DC9_v1">waiting</div>
<button data-s="signal_A6DC9_v1">Send signal_A6DC9_v1</button>

JavaScript

export const b = {};

export function signal_A6DC9_v1(ev, sender, el) {
  if (b.templates["template_A6DC9_v1"] !== undefined) {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0035-page-assets/page-templates/0010-load-page-template/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0035-page-assets/page-templates/0010-load-page-template/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_A6DC9_v1]").click();
  await b.sleep(1000);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_A6DC9_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

module templates

Examples

Use templates from the module.

HTML

<div data-r="signal_C847E_v1">waiting</div>
<div data-r="init_C847E_v1"></div>

JavaScript

export const b = {
  init: "init_C847E_v1",
  templates: {
    template_C847E_v1:
      `<button data-s="signal_C847E_v1">Send C847E_v1 from module template</button>`,
  },
};

export function init_C847E_v1(_, __, el) {
  el.replaceChildren(
    b.render("template_C847E_v1"),
  );
}

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

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0036-module-templates/module-templates/0010-use-module-template/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0036-module-templates/module-templates/0010-use-module-template/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_C847E_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_C847E_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

Templates from the page overwrite module templates.

HTML

<div data-r="signal_35974_v1">waiting</div>
<div data-r="init_35974_v1"></div>

<script type="text/html" id="template_35974_v1">
  <button data-s="signal_35974_v1">Send from template 35974_v1</button>
</script>

JavaScript

export const b = {
  init: "init_35974_v1",
  templates: {
    template_35974_v1: `<div>Error loading page template in 35974_v1</div>`,
  },
};

export function init_35974_v1(_, __, el) {
  el.replaceChildren(
    b.render("template_35974_v1"),
  );
}

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

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0036-module-templates/module-templates/0020-page-templates-override/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0036-module-templates/module-templates/0020-page-templates-override/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_35974_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_35974_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

Templates from `.getTemplates()` overwrite module templates.

HTML

<div data-r="signal_moduleTemplateOverwrite">waiting</div>
<div data-r="init_D5306_v1"></div>

JavaScript

export const b = {
  init: "init_D5306_v1",
  templates: {
    moduleTemplateOverwrite:
      `<div>Error loading page template in D5306_v1</div>`,
  },
};

export async function init_D5306_v1(_, __, el) {
  const url = `/versions/8/0/0/documentation/samples/module-template-override/`;
  await b.getTemplates(url);
  el.replaceChildren(
    b.render("moduleTemplateOverwrite"),
  );
}

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

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0036-module-templates/module-templates/0030-get-templates-overrides/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0036-module-templates/module-templates/0030-get-templates-overrides/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  await b.sleep(200);
  b.qs("[data-s~=signal_moduleTemplateOverwrite]").click();
  await b.sleep(400);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_moduleTemplateOverwrite]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

element methods

.aria(key)

Description

[x] Gets the aria-key value from the current element as a string if one exists.
[x] If the current element doesn't have the aria-key, then it's pulled from an ancestor if it exists on one of them.

Examples

Get aria value as a string.

HTML

<div data-r="signal_7EB28_v1" aria-hidden="false">waiting</div>
<button data-s="signal_7EB28_v1">Send 7EB28_v1</button>

JavaScript

export const b = {};

export function signal_7EB28_v1(_, __, el) {
  if (el.aria("hidden") === "false") {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0060-element-extras/aria/0010-get-value/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0060-element-extras/aria/0010-get-value/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_7EB28_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_7EB28_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

Get the `aria-key` value from an ancestor if the current element doesn't have it.

HTML

<div aria-label="alfa">
  <div data-r="signal_C0635_v1">waiting</div>
</div>
<button data-s="signal_C0635_v1">Send C0635_v1</button>

JavaScript

export const b = {};

export function signal_C0635_v1(ev, sender, el) {
  if (el.aria("label") === "alfa") {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0060-element-extras/aria/0020-from-parent/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0060-element-extras/aria/0020-from-parent/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_C0635_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_C0635_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

.ariaAsBool(key)

Description

[x] Gets the aria-key value from the current element as a boolean if one exists.
[x] If the current element doesn't have the aria-key, then it's pulled from an ancestor if it exists on one of them.

Examples

Get aria value as boolean.

HTML

<div data-r="signal_11F44_v1" aria-label="false">waiting</div>
<button data-s="signal_11F44_v1">Send 11F44_v1</button>

JavaScript

export const b = {};

export function signal_11F44_v1(_, __, el) {
  if (el.ariaAsBool("label") === false) {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0060-element-extras/ariaAsBool/0010-get-value/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0060-element-extras/ariaAsBool/0010-get-value/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_11F44_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_11F44_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

Get the value from an ancestor if it doesn't exist on the current element.

HTML

<div aria-label="true">
  <div data-r="signal_46CF0_v1">waiting</div>
</div>
<button data-s="signal_46CF0_v1">Send 46CF0_v1</button>

JavaScript

export const b = {};

export function signal_46CF0_v1(_, __, el) {
  if (el.ariaAsBool("label") === true) {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0060-element-extras/ariaAsBool/0020-get-ancestor/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0060-element-extras/ariaAsBool/0020-get-ancestor/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_46CF0_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_46CF0_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

.ariaAsFloat(key)

Description

[x] Gets the aria-key value from the current element as a float if one exists.
[x] If the current element doesn't have the aria-key, then it's pulled from an ancestor if it exists on one of them.

Examples

Get aria value as a float.

HTML

<div data-r="signal_7AB43_v1" aria-valuenow="1.1">waiting</div>
<button data-s="signal_7AB43_v1">Send 7AB43_v1</button>

JavaScript

export const b = {};

export function signal_7AB43_v1(_, __, el) {
  if (el.ariaAsFloat("valuenow") === 1.1) {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0060-element-extras/ariaAsFloat/0010-get-value/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0060-element-extras/ariaAsFloat/0010-get-value/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_7AB43_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_7AB43_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

Get the value from an ancestor if it doesn't exist on the current element.

HTML

<div aria-label="1.1">
  <div data-r="signal_4CD55_v1">waiting</div>
</div>
<button data-s="signal_4CD55_v1">Send 4CD55_v1</button>

JavaScript

export const b = {};

export function signal_4CD55_v1(_, __, el) {
  if (el.ariaAsFloat("label") === 1.1) {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0060-element-extras/ariaAsFloat/0020-get-ancestor/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0060-element-extras/ariaAsFloat/0020-get-ancestor/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_4CD55_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_4CD55_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

.ariaAsInt(key)

Description

[x] Gets the aria-key value from the current element as a int if one exists.
[x] If the current element doesn't have the aria-key, then it's pulled from an ancestor if it exists on one of them.

Examples

Get aria value as int

HTML

<div data-r="signal_3EC3E_v1" aria-valuenow="10">waiting</div>
<button data-s="signal_3EC3E_v1">Send 3EC3E_v1</button>

JavaScript

export const b = {};

export function signal_3EC3E_v1(_, __, el) {
  if (el.ariaAsInt("valuenow") === 10) {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0060-element-extras/ariaAsInt/0010-get-value/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0060-element-extras/ariaAsInt/0010-get-value/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_3EC3E_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_3EC3E_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

Get the value from an ancestor if it doesn't exist on the current element.

HTML

<div aria-label="1">
  <div data-r="signal_A70B4_v1">waiting</div>
</div>
<button data-s="signal_A70B4_v1">Send A70B4_v1</button>

JavaScript

export const b = {};

export function signal_A70B4_v1(_, __, el) {
  if (el.ariaAsInt("label") === 1) {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0060-element-extras/ariaAsInt/0020-get-ancestor/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0060-element-extras/ariaAsInt/0020-get-ancestor/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_A70B4_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_A70B4_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

.copy()

Description

[x] Copies the contents of the .target from the incoming event to the operating system copy/paste board.
[x] The .value is copied if it exists.
[] Otherwise, the .innerHTML is copied.

Examples

Copy the `.value` of the incoming event's `.target` if it exists.

HTML

<input type="text" data-r="signal_D81DD_v1"  value="Content from element D81DD_v1" / >
<button data-s="signal_D81DD_v1">Send D81DD_v1</button>

JavaScript

export const b = {};

export function signal_D81DD_v1(_, __, el) {
  el.copy();
}

Result

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0060-element-extras/copy/0010-copy-value/test_javascript.js"></bitty-8>
<div data-test-status="0"></div>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0060-element-extras/copy/0010-copy-value/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

// This example must be tested manually since
// it deals with the operating system's
// copy/paste system.

Copy the contents of the .innerHTML.

HTML

<div data-r="signal_AE5C9_v1">Content from element AE5C9_v1</div>
<button data-s="signal_AE5C9_v1">Send AE5C9_v1</button>

JavaScript

export const b = {};

export function signal_AE5C9_v1(_, __, el) {
  el.copy();
}

Result

Content from element AE5C9_v1

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0060-element-extras/copy/0020-copy-inner-html/test_javascript.js"></bitty-8>
<div data-test-status="0"></div>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0060-element-extras/copy/0020-copy-inner-html/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

// This example must be tested manually since it
// deals with the copy/paste system of
// the operating system.

.innerHTMLAsBool()

Examples

Get float from innerHTML

HTML

<div data-r="signal_4E481_v1">true</div>
<div data-r="signal_4E481_v2">waiting</div>
<button data-s="signal_4E481_v1">Send 4E481_v1</button>

JavaScript

export const b = {};

export function signal_4E481_v1(_, __, el) {
  if (el.innerHTMLAsBool() === true) {
    b.trigger("signal_4E481_v2");
  }
}

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

Result

true

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0060-element-extras/innerHTMLAsBool/0010-get-bool/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0060-element-extras/innerHTMLAsBool/0010-get-bool/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_4E481_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_4E481_v2]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

.innerHTMLAsFloat()

Examples

Get float from innerHTML

HTML

<div data-r="signal_F0485_v1">1.1</div>
<div data-r="signal_F0485_v2">waiting</div>
<button data-s="signal_F0485_v1">Send F0485_v1</button>

JavaScript

export const b = {};

export function signal_F0485_v1(_, __, el) {
  if (el.innerHTMLAsFloat() === 1.1) {
    b.trigger("signal_F0485_v2");
  }
}

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

Result

1.1

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0060-element-extras/innerHTMLAsFloat/0010-get-float/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0060-element-extras/innerHTMLAsFloat/0010-get-float/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_F0485_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_F0485_v2]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

Commas are removed and empty space is trimmed before parsing.

HTML

<div data-r="signal_69365_v1">
  9,000.1
</div>
<div data-r="signal_69365_v2">waiting</div>
<button data-s="signal_69365_v1">Send 69365_v1</button>

JavaScript

export const b = {};

export function signal_69365_v1(_, __, el) {
  if (el.innerHTMLAsFloat() === 9000.1) {
    b.trigger("signal_69365_v2");
  }
}

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

Result

9,000.1

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0060-element-extras/innerHTMLAsFloat/0020-remove-commas/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0060-element-extras/innerHTMLAsFloat/0020-remove-commas/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_69365_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_69365_v2]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

.innerHTMLAsInt()

Examples

Get innerHTML as an int.

HTML

<div data-r="signal_C7219_v1">100</div>
<div data-r="signal_C7219_v2">waiting</div>
<button data-s="signal_C7219_v1">Send C7219_v1</button>

JavaScript

export const b = {};

export function signal_C7219_v1(_, __, el) {
  if (el.innerHTMLAsInt() === 100) {
    b.trigger("signal_C7219_v2");
  }
}

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

Result

100

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0060-element-extras/innerHTMLAsInt/0010-get-int/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0060-element-extras/innerHTMLAsInt/0010-get-int/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_C7219_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_C7219_v2]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

Commas are removed and empty space is trimmed before parsing.

HTML

<div data-r="signal_43120_v1"> 
  9,000 
</div>
<div data-r="signal_43120_v2">waiting</div>
<button data-s="signal_43120_v1">Send 43120_v1</button>

JavaScript

export const b = {};

export function signal_43120_v1(_, __, el) {
  if (el.innerHTMLAsInt() === 9000) {
    b.trigger("signal_43120_v2");
  }
}

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

Result

9,000

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0060-element-extras/innerHTMLAsInt/0020-remove-commas/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0060-element-extras/innerHTMLAsInt/0020-remove-commas/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_43120_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_43120_v2]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

.prop(key)

Description

[x] Returns the value of a data-KEY attribute as a string if it exist on the target.
[x] If there is no data-KEY on the event target the method searches ancestors for the first one with a data-KEY attribute and returns its value.
[x] If neither the target element or any of its ancestors have a data-KEY attribute then undefined is returned.

Examples

Get the value from a `data-KEY` attribute as a string.

HTML

<div data-r="signal_0C6A4_v1" data-key="prop_0C6A4_v1">waiting</div>
<button data-s="signal_0C6A4_v1">Send 0C6A4_v1</button>

JavaScript

export const b = {};

export function signal_0C6A4_v1(_, __, el) {
  if (el.prop("key") === "prop_0C6A4_v1") {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0060-element-extras/prop/0010-get-prop-on-target/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0060-element-extras/prop/0010-get-prop-on-target/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_0C6A4_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_0C6A4_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

Return undefined if neither the event target or any of its ancestors have the requested `data-KEY` attribute.

HTML

<div data-r="signal_A40D2_v1">waiting</div>
<button data-s="signal_A40D2_v1">Send A40D2_v1</button>

JavaScript

export const b = {};

export function signal_A40D2_v1(_, __, el) {
  if (el.prop("key") === undefined) {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0060-element-extras/prop/0030-undefined-if-no-prop/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0060-element-extras/prop/0030-undefined-if-no-prop/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_A40D2_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_A40D2_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

.propAsBool(key)

Examples

Get element dataset property as a boolean.

HTML

<div data-r="signal_1AAB0_v1" data-key="true">waiting</div>
<button data-s="signal_1AAB0_v1">Send 1AAB0_v1</button>

JavaScript

export const b = {};

export function signal_1AAB0_v1(_, __, el) {
  if (el.propAsBool("key") === true) {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0060-element-extras/propAsBool/0010-get-value/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0060-element-extras/propAsBool/0010-get-value/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_1AAB0_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_1AAB0_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

.propAsFloat(key)

Description

[x] Returns the value of a data-KEY attribute as a float if it exist on the target.
[x] If there is no data-KEY on the event target the method searches ancestors for the first one with a data-KEY attribute and returns its value.
[x] If neither the target element or any of its ancestors have a data-KEY attribute then undefined is returned.

Examples

Get the value of a `data-KEY` attribute as a float.

HTML

<div data-r="signal_9E204_v1" data-key="1.1">waiting</div>
<button data-s="signal_9E204_v1">Send 9E204_v1</button>

JavaScript

export const b = {};

export function signal_9E204_v1(_, __, el) {
  if (el.propAsFloat("key") === 1.1) {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0060-element-extras/propAsFloat/0010-get-prop-on-target/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0060-element-extras/propAsFloat/0010-get-prop-on-target/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_9E204_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_9E204_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

Return undefined if neither the event target or any of its ancestors have the requested `data-KEY` attribute.

HTML

<div data-r="signal_046FC_v1">waiting</div>
<button data-s="signal_046FC_v1">Send 046FC_v1</button>

JavaScript

export const b = {};

export function signal_046FC_v1(_, __, el) {
  if (el.prop("key") === undefined) {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0060-element-extras/propAsFloat/0030-undefined-if-no-prop/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0060-element-extras/propAsFloat/0030-undefined-if-no-prop/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_046FC_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_046FC_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

.propAsInt(key)

Description

[x] Returns the value of a data-KEY attribute as a float if it exist on the target.
[x] If there is no data-KEY on the event target the method searches ancestors for the first one with a data-KEY attribute and returns its value.
[x] If neither the target element or any of its ancestors have a data-KEY attribute then undefined is returned.

Examples

TKTKTK: Test name

HTML

<div data-r="signal_1CD4F_v1" data-key="100">waiting</div>
<button data-s="signal_1CD4F_v1">Send 1CD4F_v1</button>

JavaScript

export const b = {};

export function signal_1CD4F_v1(_, __, el) {
  if (el.propAsInt("key") === 100) {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0060-element-extras/propAsInt/0010-get-prop-on-target/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0060-element-extras/propAsInt/0010-get-prop-on-target/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_1CD4F_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_1CD4F_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

Return undefined if neither the event target or any of its ancestors have the requested `data-KEY` attribute.

HTML

<div data-r="signal_B7ED7_v1">waiting</div>
<button data-s="signal_B7ED7_v1">Send B7ED7_v1</button>

JavaScript

export const b = {};

export function signal_B7ED7_v1(_, __, el) {
  if (el.propAsInt("key") === undefined) {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0060-element-extras/propAsInt/0030-undefined-if-no-prop/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0060-element-extras/propAsInt/0030-undefined-if-no-prop/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_B7ED7_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_B7ED7_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

.setAria(key, value)

Examples

TKTKTK: Test name

HTML

<div data-r="signal_E12AF_v1" aria-hidden="true">waiting</div>
<button data-s="signal_E12AF_v1">Send E12AF_v1</button>

JavaScript

export const b = {};

export function signal_E12AF_v1(ev, sender, el) {
  el.setAria("hidden", "false");
  if (el.ariaAsBool("hidden") === false) {
    el.innerHTML = b.time();
  }
}

Result

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0060-element-extras/setAria/0010-set-value/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0060-element-extras/setAria/0010-set-value/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_E12AF_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_E12AF_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

Set the aria-key value of an ancestor if one exists.

HTML

<div aria-label="alfa">
  <div data-r="signal_64DC0_v1">waiting</div>
</div>
<button data-s="signal_64DC0_v1">Send 64DC0_v1</button>

JavaScript

export const b = {};

export function signal_64DC0_v1(ev, sender, el) {
  el.setAria("label", "bravo");
  if (el.parentElement.getAttribute("aria-label") === "bravo") {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0060-element-extras/setAria/0020-set-parent/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0060-element-extras/setAria/0020-set-parent/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_64DC0_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_64DC0_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

.setProp(key, value)

Description

[x] Sets or updates the el.dataset.KEY to the specified value.
[] Sets the value of the first ancestor that has the dataset key if the current element does not have it.

Examples

TKTKTK: Test name

HTML

<div data-r="signal_A090D_v1">waiting</div>
<div data-s="signal_A090D_v1">
  <button>Send A090D_v1</button>
</div>

JavaScript

export const b = {};

export function signal_A090D_v1(_, __, el) {
  el.setProp("update", "A090D_v1");
  if (el.dataset.update === "A090D_v1") {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0060-element-extras/setProp/0010-set-prop/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0060-element-extras/setProp/0010-set-prop/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_A090D_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_A090D_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

TKTKTK: Test name

HTML

<div data-key="alfa">
  <div data-r="signal_0019A_v1">waiting</div>
</div>
<button data-s="signal_0019A_v1">Send 0019A_v1</button>

JavaScript

export const b = {};

export function signal_0019A_v1(ev, sender, el) {
  el.setProp("key", "bravo");
  if (el.parentElement.dataset.key === "bravo") {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0060-element-extras/setProp/0020-set-parent/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0060-element-extras/setProp/0020-set-parent/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_0019A_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_0019A_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

toggleAria(key)

Description

[x] Toggles the value of an aria- attribute from true, on, yes, or 1 to: false, off, no, or 0, respectively.
[x] .closest() is used to search for an existing aria-key attribute on ancestors if the current element doesn't have it. The ancestor if updated if one is found. Otherwise, a new aria-key attribute is added to the current element.

Examples

TKTKTK: Test name

HTML

<div data-r="signal_25E12_v1" aria-label="true">waiting</div>
<button data-s="signal_25E12_v1">Send 25E12_v1</button>

JavaScript

export const b = {};

export function signal_25E12_v1(_, __, el) {
  el.toggleAria("label");
  if (el.ariaAsBool("label") === false) {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0060-element-extras/toggleAria/0010-do-toggle/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0060-element-extras/toggleAria/0010-do-toggle/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_25E12_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_25E12_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

Toggle the aria value on a parent if the current element doesn't have they attribute.

HTML

<div aria-label="false">
  <div data-r="signal_D7E5C_v1">waiting</div>
</div>
<button data-s="signal_D7E5C_v1">Send D7E5C_v1</button>

JavaScript

export const b = {};

export function signal_D7E5C_v1(ev, sender, el) {
  el.toggleAria("label");
  const ancestor = el.closest("[aria-label]");
  if (ancestor.getAttribute("aria-label") === "true") {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0060-element-extras/toggleAria/0020-toggle-parent/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0060-element-extras/toggleAria/0020-toggle-parent/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_D7E5C_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_D7E5C_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

toggleProp(key)

Description

[x] Toggles a dataset (prop) value from true, on, yes, or 1 to: false, off, no, or 0, respectively.
[x] The function uses .closest() and will change the dataset on parent elements if the element itself doesn't have the property.

Examples

Toggle a dataset property.

HTML

<div data-r="signal_599B9_v1" data-key="true">waiting</div>
<button data-s="signal_599B9_v1">Send 599B9_v1</button>

JavaScript

export const b = {};

export function signal_599B9_v1(ev, sender, el) {
  el.toggleProp("key");
  if (el.propAsBool("key") === false) {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0060-element-extras/toggleProp/0010-do-toggle/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0060-element-extras/toggleProp/0010-do-toggle/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_599B9_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_599B9_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

If the current element doesn't have a data- attribute with the key, then toggle the value on an ancestor if one exists.

HTML

<div data-key="false">
  <div data-r="signal_C7BF0_v1">waiting</div>
</div>
<button data-s="signal_C7BF0_v1">Send C7BF0_v1</button>

JavaScript

export const b = {};

export function signal_C7BF0_v1(_, __, el) {
  el.toggleProp("key");
  if (el.parentElement.dataset.key === "true") {
    el.innerHTML = b.time();
  }
}

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0060-element-extras/toggleProp/0020-toggle-parent/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0060-element-extras/toggleProp/0020-toggle-parent/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_C7BF0_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_C7BF0_v1]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

.valueBool()

Examples

Get a boolean from a value

HTML

<div data-r="signal_72290_v2">waiting</div>
<input type="hidden" data-r="signal_72290_v1" value="true" />
<button data-s="signal_72290_v1">Send 72290_v1</button>

JavaScript

export const b = {};

export function signal_72290_v1(_, __, el) {
  if (el.valueAsBool() === true) {
    b.trigger("signal_72290_v2");
  }
}

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

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0060-element-extras/valueAsBool/0010-get-value/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0060-element-extras/valueAsBool/0010-get-value/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_72290_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_72290_v2]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

.valueFloat()

Description

[x] Returns the .value of the incoming events .target as a float.

Examples

TKTKTK: Test name

HTML

<div data-r="signal_02356_v2">waiting</div>
<div>
  <input type="text" data-r="signal_02356_v1" value="1.1" />
</div>
<button data-s="signal_02356_v1">Send 02356_v1</button>

JavaScript

export const b = {};

export function signal_02356_v1(_, __, el) {
  if (el.valueAsFloat() === 1.1) {
    b.trigger("signal_02356_v2");
  }
}

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

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0060-element-extras/valueAsFloat/0010-value-as-float/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0060-element-extras/valueAsFloat/0010-value-as-float/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_02356_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_02356_v2]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

.valueInt()

Description

[x] Returns the .value of the incoming event's .target as an integer.

Examples

Return the value as an integer.

HTML

<div data-r="signal_8B4F2_v2">waiting</div>
<div>
  <input type="text" data-r="signal_8B4F2_v1" value="100" />
</div>
<button data-s="signal_8B4F2_v1">Send 8B4F2_v1</button>

JavaScript

export const b = {};

export function signal_8B4F2_v1(_, __, el) {
  if (el.valueAsInt() === 100) {
    b.trigger("signal_8B4F2_v2");
  }
}

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

Result

waiting

view test harness

bitty tag for the example

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0060-element-extras/valueAsInt/0010-value-as-int/test_javascript.js"></bitty-8>

bitty tag for the test verification

<bitty-8 data-connect="/versions/8/0/0/documentation/sections/0060-element-extras/valueAsInt/0010-value-as-int/test_verification_javascript.js"></bitty-8>

Verification JavaScript

export const b = {};

export async function runTest() {
  b.qs("[data-s~=signal_8B4F2_v1]").click();
  await b.sleep(200);
  const pattern = /\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d/;
  const checkEls = b.qsa("[data-r~=signal_8B4F2_v2]");
  checkEls.forEach((checkEl) => {
    if (checkEl.innerHTML === "todo") {
      checkEl.dataset.testStatus = 1;
    } else {
      const match = checkEl.innerHTML.match(pattern);
      if (match !== null) {
        checkEl.dataset.testStatus = 0;
      } else {
        checkEl.dataset.testStatus = 2;
      }
    }
  });
}

Release Notes

view release notes

v8.0.0.md

Version 8.0.0

May 8, 2026

Release - no changes since beta-8

v8.0.0-beta8.md

Version 8.0.0-beta-8

April 9, 2026

Switched to using data-template instead of id on <script> templates (e.g. <script type="text/html" data-template="someName"></script>) to avoid possible conflict the ids on the page.

v8.0.0-beta7.md

Version 8.0.0-beta-7

April 7, 2026

Changed tag name from <bitty-MAJOR-MINOR> to <bitty-MAJOR> since the API for the major version will stay the same. MINOR version updates just add features. The idea being that you won't implement features that your version of bitty doesn't have.
Updated form input listeners for better defaults. Text style fields listen for the enter key. type="search" listens for both input and the enter key. Other inputs listen for change events.
Renamed b.get() to b.getData() for clarity.
Reversed the arguments for b.save() and b.savePage() so the value saved comes first then the key so it reads in the order of "Save Value as Key". This is different from the order of localStorage.setItem(key, value) That order feels less natural though. Putting the value first is also the way that indexedDB works.
Switched backend for b.save() and friends to from localStorage to IndexedDB. The methods use a default database and allow sending in key/value pairs.
Renamed b.save() to b.saveData() for clarity.
Renamed b.savePage() to b.savePageData() for clarity.
Renamed b.load() to b.loadData() for clarity.
Renamed b.loadData() to b.loadPageData() for clarity.
Set the default for b.mapKey() to not .preventDefault on the event. It'll be up to the signal function to make that switch. (The option still exists to implement .prevendDefault when defining the b.mapKey() through its options.)
Renamed .valueInt() to .valueAsInt() and similar for .prop...(), .aria...(), and .innerHTML...() with ...AsBool() and ...AsFloat().
Added __SAVE__ to b.switch() that outputs data-save="" with the value if it exists.
Added b.deletePageData() to remove page specific data from the default IndexedDB object store.
Added b.deleteSiteData() to remove site wide data from the default IndexedDB object store.
Updated the built in switch template so that it doesn't output empty data-r, data-s, or data-key attributes if no values are provided for them.
Added a __LABEL_MISC__ and __BUTTON_MISC__ keys to b.switch() that lets you send an arbitrary payloads to the respective elements.
Added b.getState() which creates an object with selected attributes from elements on the page which have a data-save="true" attribute and an id.
Added b.setState() which takes an object created by b.getState() and restores the given attributes to the corresponding elements via their id attributes.
Added b.config to hold configuration values. Currently, the config consists solely of the attributes for b.getState().
Renamed b.dedup to b.dedupe because that's what I type every time.
Added b.forwardSender to pass elements in the sender slot (i.e. second argument) to another function. The impetus goal being to make it easier to initialize content that sends an event that would otherwise require some interaction (e.g. a click).
Changed null arguments to undefined when triggering signals without corresponding arguments so every check can be for undefined instead of having to make a decision about checking for null in some cases and undefined in others.

v8.0.0-beta6.md

Version 8.0.0-beta-6

March 19, 2026

Added SVG output to .render from templates in b.svgs.
Added b.addStyles(css) that creates an adopted stylesheet with the css and attaches it to the document.
Added b.savePage(key, data) that forwards to b.save(key, data) after prepending the key with the .pathname for the page's URL the same way b.loadPage() does.
Added b.loadPage(key, fallback) that works like b.load() but prepends the key with the .pathname from the page's URL to automatically associated it with the page.
Renamed b.restore() to b.load() for loading data from localStorage.
Added tests to verify that templates can be added with export const b = { templates: { } } and that they are overwritten by templates from the page or loaded with .getTemplates().
Added b.switch which renders an HTML label and button with classes designed for a stylesheet to hook into to make it appear like a toggle switch. The template for the switch is stored in b.templates.switch so it can be overwritten.
Moved additional bitty features from being placed on the ev event to the ev.target element itself. This keeps the API consistent across ev.target, sender, and el.
Renamed .propAsFloat(key) to .propFloat(key).
Renamed .propAsInt(key) to .propInt(key).
Added .propBool(key) to get a dataset property as a boolean.
Added .toggleProp(key) which lowercases the value of an data-* attribute and if it's true, on, yes, or 1, then it toggles it to false, off, no, or 0, respectively. The method uses .closest() to update the property either directly on the element or on an ancestor if one is available.
Updated .setProp(key, value) so that it searches ancestors for the dataset property if the current element doesn't have it. If an ancestor if found that has it, the ancestor's value gets updated. Otherwise, the element itself is given the dataset key with the value.
Added .valBool() to get the value of an element as a boolean.
Renamed .valAsFloat() to .valFloat()
Renamed .valAsInt() to .valInt()
Added .aria(key) to ev, sender, and el. It returns the value from aria-key as a string.
Added .ariaBool(key) to ev, sender, and el. It returns the value from aria-key as a boolean.
Added .ariaFloat(key) to ev, sender, and el. It returns the value from aria-key as a float.
Added .ariaInt(key) to ev, sender, and el. It returns the value from aria-key as an integer.
The .ariaXXX() methods use .closest() to pull the value from the current element or the nearest ancestor depending on what's available.
Added .setAria(key, value) to ev, sender, and el to set the given aria-key attribute on an element.
The .setAria(key, value) will search for ancestor elements with the given aria key if the current element doesn't have it. It will set the aria value ancestor if it finds one. Otherwise, it sets the value on the element itself.
The .aria methods use .closest() to search parent elements for an aria value if the current element doesn't have on.
Added .toggleAria(key) which lowercases the value of an aria value and if it's true, on, yes, or 1, then it toggles it to false, off, no, or 0, respectively.
When true, false, and null are passed to a find/replace in .render they are turned into strings for the output.
When numbers are passed to a find/replace in .render they are turned into strings for the output.
Removed .isSender and .isTarget. It's just as easy to do something like sender === el and removes the complexity of trying to maintain the state during function calls.
Set up .innerHTMLAsBool() as a method.
Set up .innerHTMLAsFloat() as a method.
Set up .innerHTMLAsInt() as a method.
Removed .val() in favor of just using .value. The original goal of having .val() was to maintain consistency with .valueAsBool(), etc.. so they were all methods. With this move, .value is a property. The rest are methods. That adds a little friction having to remember which one is which. But, it reduces it by using the native .value. The later being more beneficial than the former was detrimental.
Updated b.mark() and b.getMarks() so it's a single level array insteadf of an array of arrays. (The original idea was to provide a place to pass notes along with the benchmarks. That requires more processing when using the marks since you have to dig into the nested array. It's less friction to keep everything at the top and use naming of the keys or some other indexing.)

v8.0.0-beta5.md

Version 8.0.0-beta-5

March 14, 2026

Added b.quickCopy(el, sender, options) that provides a default copy function for a button. It copies the .value or .innerHTML from the el. It updated the .innerHTML of sender to Copied by default. It debounces interactions with the button and restores the sender text to its original value when the debouncer resolves.
Refined default listeners for form controls (e.g. <input type="text" /> don't send signals from click events). See the default listeners section of the docs for details on all the elements.
Moved b.init runner after the listeners are set up to ensure things get picked up properly on initial load. (e.g. b.send() works as expected if it's in a function run from b.init)
Renamed loadData to get.
Renamed loadTemplates to getTemplates.
Added b.randomInt(min, max) to get a random integer between the min and max (inclusive of the min and max numbers themselves)
Added b.randomFloat(min, max) to get a random float between the min and max (inclusive of the min and max numbers themselves)
Added b.ce as an alias for document.createElement();

v8.0.0-beta4.md

Version 8.0.0-beta-4

March 11, 2026

This was a fundamental overhaul that change from using a class based system to using functions.

Details

Modules are still connected to via a data-connect attribute on a <bitty-8-0> tag.
bitty modules must export b object like: export const b = {} that bitty connects to.
Instead of using data-run on a <bitty-8-0> to send initial signals an init key can be added to the exported b object like: export const b = { init: "signal1 signal2" }
The ev.sender has been removed from events and is sent as its own argument.
The signature for signal functions is now: export function signalName(ev, sender, el) {}
The data-send attribute has bee renamed to data-s.
The data-receive attribute has bee renamed to data-r.
The data-listener attribute has bee renamed to data-listen.
The list of function available on the b bitty object is:
- addListener
- copy
- debounce
- dedup
- getMarks
- innerHTMLAsFloat
- innerHTMLAsInt
- loadData
- loadTemplates
- mapKey
- mark
- modKeyAliases
- qs
- qsa
- render
- restore
- save
- send
- setCSS
- sleep
- sort
- tee
- time
- timeMs
- trigger
- uuid
See the documentation for details on each.
<script> tags can be used as data blocks directly on the page to provide templates by setting their type to text/html and providing an id attribute.
<script> tags can be used as data blocks directly on the page to provide data by setting their type to application/json and providing an id attribute.
<script> tags can be used as data blocks directly on the page to provide SVGs by setting their type to image/svg and providing an id attribute.
Events sent as the first argument have the following additional features:
- copy
- prop
- propAsFloat
- propAsInt
- setProp
- val
- valAsFloat
- valAsInt
See the documentation for details on each.
The sender element sent as the second argument to signal functions has the following additional features:
- copy
- prop
- propAsFloat
- propAsInt
- setProp
- val
- valAsFloat
- valAsInt
See the documentation for details on each.
The el element sent as the third argument to signal functions has the following additional features:
- copy
- isSender
- isTarget
- prop
- propAsFloat
- propAsInt
- setProp
- val
- valAsFloat
- valAsInt
See the documentation for details on each.
Divided details on how to use bitty into four categories:
- snippets - for short pieces of code that are like Lego blocks.
- examples - which are complete applications of bitty with varying complexity.
- documentation - which is the details and tests for each of bitty's features.
- tutorials - walk-throughs of how to build different features and apps with bitty.

v8.0.0-beta3.md

Version 8.0.0-beta-3

DATE N/A

Unreleased prototype with undocumented changes that are obviated in beta-4.

v8.0.0-beta2.md

Version 8.0.0-beta2

DATE N/A

Unreleased prototype.

This is a complete overhaul of the bitty approach. Instead of wrapping other elements in a bitty tag, it's added independently somewhere on the page. Functionality is pulled in and everything on the page can both send and receive.

The documentation has been updated with all the functionality (listing it here would simply be repeating the docs).

v8.0.0-beta1.md

Version 8.0.0-beta-1

DATE N/A

Unreleased prototype with these changes

Added this.api.sleep(MS) function that sleeps for a number of milliseconds via await this.api.sleep(MS).
Added this.api.htmlTemplate(KEY, SUBS) that is an alias for: this.api.makeHTML(this.api.template(KEY), subs))
Added this.api.elementTemplate(KEY, SUBS) that is an alias for: this.api.makeElement(this.api.template(KEY), subs))
Added this.api.svgFromTemplate(KEY, SUBS) that is an alias for: this.api.makeSVG(this.api.template(KEY), subs))
Added feature that loads any <script></script> tags with type="application/json" and an id="ID" attribute into a data store available in this.api.data(ID) after passing it through JSON.parse().
Added feature that loads any <script></script> tags with type="text/html" and an id="ID" attribute into a set of plain text templates available in this.api.template(ID).
Added feature that loads any <script></script> tags with type="text/plain" and an id="ID" attribute into a set of plain text templates available in this.api.template(ID).
Added el.copyText() which copies the text of and element to the copy/pasteboard. If the element has a el.value (e.g. it's from a form input), the value gets copied. Otherwise it copies the innerHTML from the element.
Added el.setProp(KEY, VALUE) that adds or updates a dataset-KEY value on an el. If the value already exists and hasn't changed no update is made.
Updated the bitty-#-# tag so it can receive signals via data-receive.
Renamed this.api.getTXT() to this.api.getTEXT() so it's the actual word and has better separation from the extension (e.g. you could pull a .html file as TEXT) and better matches this.api.getHTML() etc...
Renamed this.api.makeTXT() to this.api.makeTEXT() so it's the actual word and has better separation from the extension (e.g. you could pull a .html file as TEXT) and better matches this.api.getHTML() etc...
Renamed this.api.setProp(KEY, VALUE) to this.api.setCSS(KEY, VALUE) to avoid confusion with el.setProp(KEY, VALUE).
Renamed ...ToInt() to ...AsInt() for clarity.
Renamed ...ToFloat() to ...AsFloat() for clarity.
Deprecated and removed data-use. It added too much mental overhead since it created a different send/receive mode that only affected a single element. That can be done with the various .matchXXX methods in a way that's simpler to reason about.
Deprecated and removed data-init. It was more confusing to work with than just using data-send and data-receive and using bittyReady() to run things for initialization.

v7.0.0.md

Version: 7.0.0

Dec. 10, 2025

Version 7.0.0 release.
No changes since 7.0.0-rc2.

v7.0.0-rc2.md

Version: 7.0.0-rc2

Dec. 7, 2025

This change primarily moves .target and .sender items from el to ev. And moves the sending element into ev.sender with extra the features added.

Renamed ev.val to ev.value
Renamed ev.valInt to ev.intValue
Renamed ev.valFloat to ev.floatValue
Renamed ev.ds to ev.prop
Renamed ev.dsInt to ev.propToInt
Renamed ev.dsFloat to ev.propToFloat
Added ev.sender.value
Added ev.sender.valueToInt
Added ev.sender.valueToFloat
Moved el.targetBittyId to ev.bittyId
Renamed el.ds to el.prop
Renamed el.dsInt to el.propToInt
Renamed el.dsFloat to el.propToFloat
Removed el.targetDs() in favor of existing ev.prop()
Removed el.targetDsInt() in favor of existing ev.propToInt()
Removed el.targetDsFloat() in favor of existing ev.propToFloat()
Moved el.senderBittyId to ev.sender.bittyId
Removed el.senderDs() in favor of existing ev.sender.prop()
Removed el.senderDsInt() in favor of existing ev.sender.propToInt()
Removed el.senderDsFloat() in favor of existing ev.sender.propToFloat()
Removed el.val in favor of the standard el.value
Renamed el.valInt to el.valueToInt
Renamed el.valFloat to el.valueToFloat
Removed el.targetVal in favor of ev.value
Removed el.targetValInt in favor of ev.valueToInt
Removed el.targetValFloat in favor of ev.valueToFloat
Removed el.senderVal in favor of ev.sender.value
Removed el.senderValInt in favor of ev.sender.valueToInt
Removed el.senderValueFloat in favor of ev.sender.valueToFloat
Renamed el.matchTargetDs to el.propMatchesTarget
Renamed el.matchSenderDs to el.propMatchesSender
Fixed bug where el.isSender was checking against el.sender instead of ev.sender.
Removed deprecated el.sender code.
Fixed bug where forwared signals required a receiver. They now fire once if there isn't a receiver the same way data-send works.
The bitty element is used as the ev.sender on a this.api.tigger(SIGNAL) call (previously, a null value was sent)
Removed el.bittyParentBittyId. Use this.api.bittyId or el.bittyParent.bittyId instead.
Refactored to use centralized processEvent method.

v7.0.0-rc1.md

Version: 7.0.0-rc1

This update is a largely a set of API refinements to make things more obvious and consistent.

It also adds data-use which allows an element to send a signal that only it uses.

Improved error messages with more details when connections can't be made.
Renamed the bitty-#.#.#.min.js file to bitty-#.#.#.js to highlight that it's the one that should be used in production.
Renamed the bitty-#.#.#.full.js file to bitty-#.#.#.dev.js for clarity that it's the source code and not what should be used in production.
TODO: Added this.api.makeSVG which takes a text string and turns it into an SVG.
Moved bittyInit back to inline instead of running as an event to allow proper async/await functionality.
Moved bittyReady back to inline instead of running as an event to allow proper async/await functionality.
Added data-use which sends a signal from an element which is only processed by the element itself (e.g. if there are several elements with the same data-use or data-send values the other aren't processed). This means you don't have to check .isSender or isTarget if you don't need to update other elements from a signal. (You'd still need them for doing different things when every element needs to be updated differently depending on if it's the sender/target or not.)

The data-use attribute picks up events from child element the same way data-send does.
Moved ev.sender to el.sender The sender element is no longer appended to the event. It's added to the element instead so that all general usage can be done through the element (e.g. el) argument.
Renamed el.getString(KEY) to el.ds(KEY)
Renamed el.getInt(KEY) to el.dsInt(KEY)
Renamed el.getFloat(KEY) to el.dsFloat(KEY)
Removed ev.target.getString(KEY)
Added: el.targetDs(KEY)
Removed ev.target.getInt(KEY)
Added: el.targetDsInt(KEY)
Removed ev.target.getFloat(KEY)
Added: el.targetDsFloat(KEY)
Removed ev.target.stringValue(KEY)
Added: el.targetVal(KEY)
Removed ev.target.intValue(KEY)
Added: el.targetValInt(KEY)
Removed ev.target.floatValue(KEY)
Added: el.targetValFloat(KEY)
Removed ev.sender.getString(KEY)
Added: el.senderDs(KEY)
Removed ev.sender.getInt(KEY)
Added: el.senderDsInt(KEY)
Removed ev.sender.getFloat(KEY)
Added: el.senderDsFloat(KEY)
Removed ev.sender.stringValue(KEY)
Added: el.senderVal(KEY)
Removed ev.sender.intValue(KEY)
Added: el.senderValInt(KEY)
Removed ev.sender.floatValue(KEY)
Added: el.senderValFloat(KEY)
Added el.val
Added el.valInt
Added el.valFloat
Added el.targetBittyId
Added el.senderBittyId
Renamed el.bittyParentId to el.bittyParentBittyId to be consistent with other ...BittyId properties.
Renamed el.matchTarget(KEY) to el.matchTargetDs(KEY)
Renamed el.matchSender(KEY) to el.matchSenderDs(KEY)
Added ev.val these are for when a method is run without a receiver and the target is an input.
Added ev.valInt these are for when a method is run without a receiver and the target is an input.
Added ev.valFloat these are for when a method is run without a receiver and the target is an input.
Added ev.ds(KEY) these are for when a method is run without a receiver and the target is an input.
Added ev.dsInt(KEY) these are for when a method is run without a receiver and the target is an input.
Added ev.dsFloat(KEY) these are for when a method is run without a receiver and the target is an input.
Added el.ds(KEY) which is an alias to el.dataset.key which gets returns as a string.
Added el.senderDs(KEY) which is an alias to el.sender.dataset.key which gets returns as a string.
Added el.targetDs(KEY) which is an alias to ev.sender.dataset.key which gets returns as a string.
Improved error message when data-connect doesn't make a connection.

v6.0.0-rc3.md

Version: 6.0.0-rc3

DATE TBD

Added event.target.stringValue the returns the event.target.value as a string. (this is effectively an alias that's only here to keep the mental model with .intValue and .floatValue consistent)
Added event.target.intValue the returns the event.target.value as an integer.
Added event.target.floatValue the returns the event.target.value as an float.
Added event.sender.stringValue the returns the event.sender.value as a string. (this is effectively an alias that's only here to keep the mental model with .intValue and .floatValue consistent)
Added event.sender.intValue the returns the event.sender.value as an integer.
Added event.sender.floatValue the returns the event.sender.value as an float.
Added event.target.getString(KEY)
Added event.target.getInt(KEy)
Added event.target.getFloat(KEY)
Added event.sender.getString(KEY)
Added event.sender.getInt(KEY)
Added event.sender.getFloat(KEY)
Added el.matchTarget(KEY) Note that there is no string/int/float because the values are always stored as strings so the comparison doesn't have to convert them since it would just be the same thing anyway
Added el.matchSender(KEY) Note that there is no string/int/float because the values are always stored as strings so the comparison doesn't have to convert them since it would just be the same thing anyway
Remove setting style="display: block;". Leaving this as a decision at implementation time.

v6.0.0-rc2.md

Version: 6.0.0-rc2

Nov. 25, 2025

Updated the data-connect process so that URLs that start with a / get updated with the origin of the window.location.href to avoid issues when using CDNs for the bitty-#.#.#... file.

At this time, relative URLs that start with a . are not yet supported.

v6.0.0-rc1.md

Version 6.0.0-rc1

Nov. 24, 2025

Updated license to CC0 for the public domain.
Added this.api.getBittyParent(el) that returns the bitty element that contains the el element. If the el element is a bitty tag it returns itself.
Added data-bittyid attrs to everything so they can be used for comparisons.
Events are captured from every element (not just those with data-send and data-receive). Events bubble up the document where bitty looks for them on the window object.
For the bitty events, the target that the event happened on and then the sender that is the element that had the data-send on it are both included. (e.g. event.target is where the event happened at event.sender i the element with data-send that sent the signal. The event.target and event.sender will be the same element if the event.target is what had the data-send attribute. Otherwise, they are different.
Added el.bittyParent that contains a reference to the bitty parent element
Added el.bittyParentId that contains a reference to the bitty parent element's data-bittyid
Removed this.api.match() in favor of el.isTarget and el.isSender. (this.api.matchTarget() and this.api.matchSender() existed briefly but were also removed as part of the transition to el.isTarget and el.isSender.
Added el.isTarget() which is boolean that indicates if the element is the one that generated the event.
Added el.isSender() which is boolean that indicates if the element is the one with data-send that sent the event (which may or may not be the same as the target identified by el.isTarget()
Events bubble up until they hit an element with a data-send attribute. (e.g. you can click an element that doesn't have a data-send attribute that's inside a div that does and the one from the div will fire)
Renamed data-send to data-init on the <bitty-#-#> tags to match data-init behavior on child elements (i.e. only fires once when the element is initialized)
data-send attributes on <bitty-#-#> elements now send events (e.g. from clicks) the same way they do for child elements.
Converted bitty... pseudo-events to classes extended from Event. All events are set to bubble up the document.
Created this.api.localTrigger(SIGNAL_STRING) that only sends the signal to the local element without bubbling and without descending into child bitty elements.
Added el.getString(KEY) which goes up the DOM looking for a matching dataset.KEY that's a String.
Added el.getInt(KEY) which goes up the DOM looking for a matching dataset.KEY that's an Int.
Added el.getFloat(KEY) which goes up the DOM looking for a matching dataset.KEY that's a Float.
Removed bittyCatch() functionality. It's not necessary now that all events are examined by this listener without extra filtering.
Removed adopted stylesheet to set `` to block. This saves loading duplicate stylesheets for each instance.

Using thie.style.display to set element to block. That way it can be changed easier by editing the style directly (e.g. by updated the style in the bittyInit function)
Cleaned up tests

v5.1.0-rc6.md

Version: 5.1.0-rc6

Nov. 22, 2025

Fixed bug where Text Nodes didn't work properly with replaceAll in this.api.makeHTML(), etc...

v5.1.0-rc5.md

Version 5.1.0-rc5

Nov. 22, 2025

Set up this.api.trigger(SIGNAL) to send event that bubbles up to the document root
Set up this.api.forward(EVENT, SIGNAL) to send event that bubbles up to the document root
Set up so data-bittyid attrs are added on connectedCallback instead of at each event call.
Set up so data-bittyid attrs are added on this.api.makeElement()
Set up so data-bittyid attrs are added on this.api.getElement()
Set up so data-bittyid attrs are added on this.api.makeHTML()
Set up so data-bittyid attrs are added on this.api.getHTML()
The net result is the data-bittyid updates is that anything added with the this.api.WHATEVER that has a data-send, data-receive, or data-init, will have a data-bittyid added. Anything that's added outside the API won't, event if it has one of the bitty data-* attributes.

(The prior behavior was to look query for elements with data-* attrs on every event. This was the first approach to deal with mutation observer having a race condition when trying to add them. Doing everything explicitly through the API prevents thrashing for things like moving input range sliders)

v5.1.0-rc4.md

Version: 5.1.0-rc4

Nov. 21, 2025

Refactor to process elements with data-receive directly instead of adding them to a list that gets processed as a batch.

v5.1.0-rc3.md

Version: 5.1.0-rc3

Nov. 20, 2025

Added the ability to convert single HTML Elements to text for find and replace in makeTXT()
Added the ability to convert arrays of HTML Elements to text for find and replace in makeTXT()
Added the ability to convert single Document Fragments to text for find and replace in makeTXT()
Added the ability to convert arrays of Document Fragments to text for find and replace in makeTXT()
Added the ability to convert arrays of String to text for find and replace in makeTXT()
Added the ability to convert single HTML Elements to text for find and replace in makeHTML()
Added the ability to convert arrays of HTML Elements to text for find and replace in makeHTML()
Added the ability to convert single Document Fragments to text for find and replace in makeHTML()
Added the ability to convert arrays of Document Fragments to text for find and replace in makeHTML()
Added the ability to convert arrays of String to text for find and replace in makeHTML()
Added the ability to convert single HTML Elements to text for find and replace in makeElement()
Added the ability to convert arrays of HTML Elements to text for find and replace in makeElement()
Added the ability to convert single Document Fragments to text for find and replace in makeElement()
Added the ability to convert arrays of Document Fragments to text for find and replace in makeElement()
Added the ability to convert arrays of String to text for find and replace in makeElement()
Added the ability to convert single HTML Elements to text for getTXT()
Added the ability to send HTML elements as substitutions for getElement().
Added the ability to send HTML elements as substitutions for getHTML().
Added the ability to send Document Fragments as substitutions for getElement().
Added the ability to send Document Fragments as substitutions for getHTML().
Added the ability to send Arrays of HTML elements as substitutions for getElement().
Added the ability to send Arrays of HTML elements as substitutions for getHTML().
Added the ability to send Arrays of Document Fragments as substitutions for getElement().
Added the ability to send Arrays of Document Fragments as substitutions for getHTML().
Added data-init for elements that fires a signal that they receive when bitty first initializes.
Only add data-bittyid to elements that have a data-send, data-receive, data-init attributes.
Stopped adding bittyid with UUID from events.
Removed data-r alias for data-receive. Better to have things be explicit and only have a single way to do it. (data-s was removed in -rc2)

v5.1.0-rc2.md

Version: 5.1.0-rc2

Nov. 17, 2025

Removed mutation observer and querying data-receive directly to prevent race condition on events.
Removed data-s alias for data-send. Better to have things be explicit and only have a single way to do it.

v5.1.0-rc1.md

Version: 5.1.0-rc1

Nov. 13, 2025

Added bittyReady() call that works like bittyInit() but happens after this.runSendFromComponent();
If bittyReady() is defined as async (i.e. async bittyReady()) it's called with await
Added this.api.trigger(signal) which works like this.api.forward(null, signal). The event type is bittytrigger
With this.api.trigger(signal) using this.api.forward(event, signal) with event set to null is now an error. It's explicitly for forwarding an existing event.
Added await:signal to data-send and this.api.forward(event, "await:signal"), and this.api.trigger("await:signal") to await async methods.
Added makeTXT() which returns a text value from a template after running substitutions over it.
Refactored makeHTML() and makeElement() to use makeTXT()
Added data-s alias for data-send and data-r alias for data-receive

v5.0.0.md

Version 5.0.0

Nov. 7, 2025

This is a collection of renames for clarity and to help avoid collisions with other code that might add data- attributes. No actual functionality is changed, but the renames require a version number bump.

Renamed getElements to getHTML for clarity. (getElement remains the same and pulls individual HTML elements vs getHTML which pulls document fragments.)
Renamed makeElements to makeHTML for clarity. (makeElement remains the same and makes individual HTML elements vs makeHTML which makes document fragments.)
Renamed response.ok to response.value for clarity and to avoid confusion with things like response.ok === false. (i.e. response.value === false takes less mental overhead)
Renamed data-uuid to data-bittyid to namespace and prevent collisions with anything else the wants to use data-uuid

v4.0.0.md

Version: 4.0.0

Nov. 6, 2025

Bumping the version number. No changes since v4.0.0-rc1.

v4.0.0-rc1.md

Version: 4.0.0-rc1

Oct. 30, 2025

Renamed this.api.getFragment to this.api.getElements (this is a breaking change so it's a major version bump)
Renamed this.api.makeFragment to this.api.makeElements (with the this.api.getFragment change)
Added bittyCatch(event) that catches any events that don't have a .target.dataset.send value. This provides a way to catch message like from .postMessage() and decided what to do with them.
Removed the this.api.fn set up. It's not worth the overhead compared to just using functions directly.
Using a space instead of a | to separate signals and class names. This mimics class="some things" from CSS and is easier to type. Each keys must be a set of characters without spaces so there's no need for an explicit |.
Changed listeners to be on the window to catch things like .postMessage(). TODO: Make sure that's cool to listen on the window instead of the document.
Changed internal use of event.target.dataset.forward key for this.api.forward to event.bitty.forward to avoid collisions on the event.target.dataset
Fixed bug in this.api.forward where an event that doesn't have a .target or .target.dataset gets overridden.
UUID are added to events that are being forwarded if they don't already exist.
Migrated docs site to use variables to make it easier to upgrade versions moving forward.

v3.0.0.md

Version: 3.0.0

Oct. 26, 2025

This isn't a huge jump from Version 2.x, but there are breaking changes so it gets a new number. These are quality of life improvements that make it easier to get external content while providing better errors if something goes wrong.

The details:

Did the following renames and additions for consistent API names for getting and adding documet fragments and elements:
- Renamed this.api.getHTML() to this.api.getFragment() which pulls in an external file and returns it as a document fragment.
- Added this.api.getElement() which pulls in an external file and retuns it as a single HTML Element (if there's more than one node at the top of the file only the first one gets returned).
- Renamed this.api.useTemplate() to this.api.makeFragment() which takes a string to use as a template and returns a document fragment.
- Added this.api.makeElement() which takes a string to use as a template and returns a single HTML Element.
TODO: Added getCSS() which pulls an external CSS file and loads it into the document as an adopted stylesheet.
Added custom BittyError class for better error handling with this.api.getTHING calls that use .fetch and for JSON parsing errors.
When returning values from fetches return an object with either { ok: PAYLOAD }, or { error: { /* details */ } } with extra data coming down in the error object like status codes for HTML errors.
Added connectedMoveCallback() to prevent connectedCallback() from firing if a component is moved.
Moved everything in the init into the conditional check to see if the component makes a connection to a class. Previous a few things happend prior to the connection attempt. Moving them in prevents UUIDs from being added until a conneciton has been made. Shouldn't make any real difference. It just feels more natural.
Added and refined the test suite for increased coverage.

v2.0.0-rc2.md

Version: 2.0.0-rc2

Oct. 21, 2025

Properly returned undefined if there's a problem pulling an external HTML from getHTML().
Properly returned undefined if there's a problem pulling an external JSON from getJSON().
Properly returned undefined if there's a problem pulling an external SVG from getSVG().
Properly returned undefined if there's a problem pulling an external TXT from getTXT().

v2.0.0-rc1.md

Version: 2.0.0-rc1

Oct. 19.2025

Renamed this.api.fetchJSON() to this.api.getJSON() to match case used with JSON.stringify(), and switch from fetch to get prelude.
Added substitutions param to this.api.getJSON(url, subs=[]) so all .getTHING(url, subs=[]) methods have the same behavior.
Added options={} to this.api.getJSON() to pass options to the fetch call. The signature is this.api.getJSON(url, subs=[], options={}).
Added this.api.getHTML(url, subs=[], options={}) that loads an HTML file and does find replace with subs on the initial string where subs is an array of arrays with the patterns to match and replace. The patterns can be strings or regex.
Added this.api.getSVG(url, subs=[], options={}) that loads an SVG file and does find replace with subs which is an array of arrays with the patterns to match and replace. The patterns can be strings or regex.
Added this.api.getTXT(url, subs=[], options={}) that returns the text content of an external file.
Switched to array or arrays for find replace strings for this.api.useTemplate(templateString, subs=[]) and defaulting to an empty array so the argument doesn't have be sent which is consistent with the .getTHING(url, subs=[])
Added an adoptedStylesheet that sets the <bitty-x-x> tag to display: block.
Added this.api.match(event, el, key=""). If a key exists, it's used to check the dataset of the event and the el and returns true if they match. If no key is provided the uuid of the event and el are compared instead.
Allowing whitespace around data-send attributes.
Allowing whitespace around data-receive attributes.
Added .useHTML(content, subs = []) that converts a string from content into an HTML template (doing the substitutions) then returns the first element from it as an HTML element instead of a document fragment.
Ingesting window.bittyFunctions from the page and const functions inside the module and providing access the them via this.api.fn.FUNCTION()
Ingest local const functions functions from the bitty component file that get added as this.api.fn.FUNCTION()
Ingested functions are bound with .bind() so that their this. is the bitty component's element itself.
Combined this.config and this.metadata in the constructor().

v1.3.0.md

Version: 1.3.0

Oct. 13, 2025

Releasing v1.3.0. No changes from v1.3.0-rc1.

v1.3.0-rc1.md

Version: 1.3.0-rc1

Oct. 6, 2025

Added fetchJson(url) method which can be called with this.api.fetchJson(url). Returns the data object if everything works. Otherwise, throws an error and returns undefined.
Added useTemplate() to assemble a example while doing a find and replace of text

v1.2.0-rc1.md

Version: 1.2.0-rc1

Oct. 6, 2025

When using data-connect if the value matches a class on the window object it's used. For example: data-connect="ExampleClass" connects to window.ExampleClass.

Previously, the class had to be in a window.bittyClasses object (e.g. window.bittyClasses = { ExampleClass: class {} };

v1.1.0-rc2.md

Version: 1.1.0-rc2

Oct. 6, 2025

Updated console error message if no class to connect to can be found.

v1.1.0-rc1.md

Version: 1.1.0-rc1

Oct. 4, 2025

<bitty-COMPONENT_VERSION> can be called without a data-connect attribute. When it is, it looks for a window.BittyClass on the page and uses it if it's available.
Removed .error() method in favor of calling console.error() directly in order to get useful line numbers.

v1.0.0.md

Version: 1.0.0

Oct. 4, 2025

Moved v1.0.0-rc5 to v1.0.0
Tag name is <bitty-1-0>

v1.0.0-rc5.md

Version: 1.0.0-rc5

Oct. 4, 2025

Fixed bug with events not being passed to signal processing.

v1.0.0-rc4.md

Version: 1.0.0-rc4

Oct. 1, 2025

Renamed <bitty-js> component tag to <bitty-MAJOR_VERSION> for semantic versioning.
Call bittyInit() with await if it's an async function.
Moved bittyInit() before the data-send calls from the component so the module can set things up before the signals start being sent.
Allowing this.api.forward() to be called with a null event (e.g. this.api.forward(null, "anotherFunction");). This is done to allow things like forwarding a signal from bittyInit() or any other function where there isn't an event to pass along.
Fixed bug where new receivers weren't being added properly when they were child nodes of new nodes being added (and the top layer didn't have a data- attr in it)
Added tests for this.api.querySelector() and document.querySelector()
Update site to use variables for version numbers to make them easier to maintain instead of having them in multiple places for different displays.
Made this.metadata an object and moved version into it (along with copyright and license)

v1.0.0-rc3.md

Version: 1.0.0-rc3

Sept. 23, 2025

Fixed bug where this.api.send() would update the data-send attribute on the original element so it no longer send the same signal. The method is now called this.api.forward().
Removed data-watch. Any element can receive a signal from anywhere else on the page without extra overhead. The biggest negative to this approach is that you have to be a little more careful to avoid naming collisions. But, the ease of use is well worth that minor trade off.
Added Test Suite Results Report to site for easier viewing.
Applying passed and failed colors to individual tests for quicker scanning.
Updated tests to use unique signal names to avoid collisions.

v1.0.0-rc2.md

Version: 1.0.0-rc2

Sept. 19, 2025

data-watch is applied to bitty-js elements directly instead of individual elements. The signals are send back down the tree when one is received via data-watch
Refactored multiple UUID() calls to single function to save a few characters.

v1.0.0-rc1.md

Version: 1.0.0-rc1

Sept. 18, 2025

Initial release candidate for version 1.0.0.

No changes since v0.4.0.

v0.4.0.md

Version: 0.4.0

Sept. 17, 2025

Flipped module arguments from example(el, event) to example(event, el) since that lines up better with the order of send/receive. (i.e. the event is what gets sent from data-send and the el is the element from data-receive
Remove HTML output of error message. They're nice during debug but wouldn't want them showing up in prod. Could use a debug flag but that's more overhead than I want to add. So, message just go to the console.

v0.3.0.md

Version: 0.3.0

Sept. 17, 2025

Big refactor based on experience using 0.2.0.

Added more generic error handing where you just send a message and it outputs to the page along with the UUID of the element that had the problem. The elements have bitty-js-error style classes on them so their display can be controlled via CSS.
Updated to use the name data-connect instead of data-module
The data-connect can point to either a module or to a class in a global bittyClasses window object.
Alternate module classes are selected by passing a | followed by the desired class name instead of using data-use. (e.g. data-connect="./module.js|AltClass)
If there's an bittyInit() function in a module it's the first thing that gets called once bitty is loaded.
Removed data-call. The data-send attribute is used for everything. Nothing would fire from it in prior versions if there wasn't at least one element with a data-receive with the same name. Now it calls the function once with no element if there's no associated data-receive
Added test suite.
The biggest update is changing data-b, data-c, data-r, and data-s to data-batch, data-call, data-receive, and data-send, respectively. I originally use the shorter names to reduce the text length. The increased clarity of the longer names is worth the few extra characters.
Remove expanded error messages. They were nice, but added a bunch of size without a significant improvement.
The other big change is removing the leading _ and $ characters from function names. They were originally put in place to create a naming convention that differentiated between functions that were hit with data-call and data-send. In practice, that wasn't necessary.
Removed the data-batch attribute. While there are some use cases where it might be nice, the extra complexity, mental overhead, and maintance aren't worth it.
Added Mutation Observer so data-* functionality works on elements that are added after initialization.
Added Mutation Observer to watch for removed elements to pull them out of the mix when they get gone.
Split the web site page up into individual template for sections. Much nicer to work with.
Updated example functions to always use (el, _event) instead of (el, _) for clarity.
Removed inert/include/ignore from the top level components then remove them. This was originally a way to tell parent components to ignore specific calls and signals from children. After using it a bit, I don't think the complexity is worth it. Better to just name functions an signals so they don't collide.
Isolated default signal travel to only go down the DOM. That is, if there are nested bitty-js tags, signals from the child tags don't propagate to the parent by default. (see data-watch for how to send signals up and to siblings)
Added data-watch so parents and siblings can receive signals from their children and other siblings. With this, signals can be sent up, down, and to siblings.
Ignore events directly from bitty-js elements (i.e. only process events from child elements). This is done to prevent data-send attributes on bitty-js elements from firing repeatedly when things inside the element send events (e.g. clicks).
Renamed scripts directory to modules.
Moved bitty source script file under bitty-versions/bitty-v0.3.0.js and copying to prod at the root of the site (i.e. /bitty-v0.3.0.js) so examples look cleaner.
Renamed data-bridge to data-connect for clarity.
Renamed this.widget.bridge to this.module.api in bitty-js
Added this.api.send(key, event) to send/forward events from inside modules.
Added Progressive Enhancement and JavaScript Data comparison examples.
Added/polished a bunch of other examples.

v0.2.3.md

Version: 0.2.3

June 5, 2025

Lots of error handling work in this one.

Moved UUID generation for the bitty-js and all data-* reactive elements to the first thing in connectedCallback() to aid in error messaging.
Made connectedCallback() and async function to throw loading the widget module into its own funcitoun
Created an #errors private var to store error messages and help by ID.
Added the first few error messages
Added this.error() for outputting errors. It takes two optional arguments: an ID and an Element. The ID maps to the IDs in #errors. They're used to add detail and help message to the error output.

The ID defaults to 0 which is an unclassified error type. The message for that ID includes a note to the developer to use an ID to classify the error. I consider it a bug if an appropriate ID doesn't exist and request an issue be open to fix it.

The this.error() method dumps the bitty-js elemnet after the message.

If an element was passed to this.error() it's dumped out as well.

The error message end up being pretty long. The end up adding a bunch of lines to the source file. That's an explicit decision aimed at making bitty easier to work with.
Added top level debug function that uses a debug search query param from the window.location to see if it should output.

Only thing I don't like about it is that it shows the function's line number instead of the line number from where it was called. Something to look into.
The debug function takes an optional element. It dumps it to the console if one comes in.
Renamed data-wires to data-bridge. Fits better and maps nicer to the .bridge coming back in from the support class.
Set up to load the default class exported from a widget module if no other class is defined (which happens with 'data-widget')
Moved all examples to use a default class export instead of a named class
Added a data-widget attribute to the bitty-js elements to allow using multiple classes from inside a single supporting .js module file.
bitty-component-error and bitty-element-error classes are added to the class list of elements where errors occur.

v0.2.2.md

Version: 0.2.2

June 4, 2025

Added UUIDs for pending error handling. Shuffeld a bunch of stuff around to make the examples look nicer.

Added uuids as data-uuid attrs to all elements with related data-* attributes. Added them to the bitty-js elements too. I was originally thinking I'd add the UUIDs on the elements internally (i.e. el.uuid instead of el.dataset.uuid).

I decided on the attribute approach because it offers two benefits: 1. You can see the IDs in the Element tree view of developer consoles, and 2. You can address them with CSS to update styles based on the UUID. Both of those thing will go to supporting better error messages and bug hunting.
Mostly content updates largely focused on detailing the opening counter example.
Added CONTRIBUTING file.
Added watcher script to build site when files change.
Refined the initial counter example to remove the text and change the private variable to this.num to make the examples look nicer.
Moved the Examples section directly below the initial basic functionality overview section.
Added reminders all over the place to edit the template and instead of the output for HTML page (which would be overwritten. ask me how I know).
Started adding prettier-ignore comments to code snippets to prevent the display output from being mangled.
Started stripping prettier-ignore comments from the HTML output so it doesn't show in the example
Same goes for // deno-fmt-ignore-file in .js files
Added script to maintain the open open/closed states of the section details elements across page loads. (Having them close every time I made a change was maddening)
Moved all the example .js files into the site root. Not a fan of that in general, but it makes the examples look better since the path is shorter.

v0.2.1.md

Version: 0.2.1

June 3, 2025

Some more wiring and some support tools for making the demo/docs site.

Made a Hello, World example that shows basic features. (Compared to the single button press from the prior first example.)
Showing Hello, World code as part of the example.
Load templates automatically.
Throttling via .requestAnimationFrame().
Renamed data-f to data-c (i.e. "call") for clarity.
Renamed data-prep attribute on bitty-js tag to data-call (i.e. "call") for clarity.
Renamed data-init attribute on bitty-js tag to data-send so it matches data-s more closely.
Made basic site builder for landing page.
Moved everything into details elements for the landing page.

v0.2.0.md

Version: 0.2.0

June 3, 2025

Setting up a bunch of the basic wiring.

Rewrite to provide direct access to receiving elements. They are fully accessible in the send/receive functions. (As compared to the 0.1.0 approach which required explicitly defining what would happen via an update (e.g. update .innerHTML or .value).
Renamed data-wrapper and the target Wrapper class to data-wires and Wires. (bitty.js is the wrapper. The Wires class is how things are hooked up.).
Added data-call attribute parsing to bitty-js tag. It runs functions like data-c but does so prior to adding the event listeners to the element.
Added data-batch attribute processing to bitty-js tags. It operates like data-b but fires before event listeners are added.
Added data-ignore attribute to allow components to avoid calls to the named functions. (Send signals bubble up to parents of nested components by default. This provides a way to ignore them).
The bitty-js element looks for an .init() method in the Wires class. If it finds one it calls it during the initialization process.
Passing both the element and the triggering event to the send/receive functions.
Moved to using data-b explicitly to separate block calls from individual function calls.
Order of operations is: function calls, batch calls, single send calls.
Temporarily removed preflight check until global functionality is defined.
Created example of loading a template via the .init() call back to the Wires class.
Created example with nested components.
Created example with parent of child components pulling data from the children to do a calculation.
Created example showing parent ignoring send signals from children.
Created example showing on components loading a child component via a template that becomes fully reactive.

v0.1.0.md

Version: 0.1.0

June 2, 2025

Getting the project started.

Initial prototype.
<bitty-js>; wraps elements to provide them with reactive capabilities.
Basic data-c, data-s, and data-r in place to call functions, send, and receive updates, respectively.
Functionality is loaded using data-wrapper to point to a module to load. The module must export a Wrapper class that gets loaded and used to provide functions and send/receive callbacks.
Uses string prefixes to make determinations about how to handle data through the send/receive channels (e.g. htmlSOMETHING updates .innerHTML of an element while valueSOMETHING updates the .value).
Defined convention for functions. data-c maps to functions in the Wrapper class that start with a _ (underscore). The data-s and data-r attributes map to functions in the Wrapper class that start with a $ (dollar sign).
Decided against using data-c data-s and data-r on the bitty.js tags. That would involved a lot of extra overhead in parsing to differentiate between the top level element and the content it wraps. Using data-send instead as a replacement for data-c. Others, TBD.
Set up data-c="batchSOMETHIGN" functionality to send a single single that gets turned into multiple signals in the Wrapper.
Defined convention of using .batches to look for batches. It must be a hash where the keys match the incoming request and the value is an array of functions to run.
Defined .bridge to allow Wrapper functions to access the parent bitty-js element.
Scoped event listeners to the bitty-js elements.
Set up data-listeners attribute on bitty-js tags to override the default listeners (which are input and click).
Created example that stores its own state.
Created example that updates an element with the same content it sent (i.e. verified feedback can be avoided).
Created example using data-send to load initial values.
Created example that sends multiple signals.
Created example with multiple elements receiving the same signal.
Created example showing how to update global CSS variables/properties.
Created example showing custom event listeners.
Created example showing how to update CSS variables/properties scoped to the content of individual bitty-js tags.
Examples use parent page's CSS for styling. It confirms I'm happy with the choice to use the light DOM instead of the shadow DOM.
Set up initial preflight check to ensure functions are in place.