Sprites.Data

Sprites.Data.Construct Sprites.Reactive.Value

Sprites.Data.Construct(fields)

Build an object from named fields, each a constant or a reactive value. The result reads as the whole object, rebuilt when any field changes, so a set of separate values reads as one.

It is two way: set the whole object and each field whose source is a writable reactive value is written back from the matching field of the new object, so an edit to the object flows out to the parts it was built from. A constant or read only field is left as it is.

Returns a two-way Sprites.Reactive.Value over the assembled object.

const w = Sprites.Reactive.Value(8);
const h = Sprites.Reactive.Value(6);
const size = Sprites.Data.Construct({ w: w, h: h });
const square = Sprites.Reactive.Value(null, () => {
  Sprites.Reactive.Set(size, { w: 16, h: 16 });
});
Sprites.Ui.Input.Number(w, 1, 64);
Sprites.Ui.Input.Number(h, 1, 64);
Sprites.Ui.Button.Act(square, 'Set 16 x 16');
Sprites.Ui.Dom.Text(' size = ', () => {
  const s = Sprites.Reactive.Get(size);
  return s.w + ' x ' + s.h;
});

Sprites.Data.Object Sprites.Reactive.Value

Sprites.Data.Object(fields)

Build a read only object from named fields, each a constant or a reactive value. The result reads as the whole object, rebuilt when any field changes, so a set of separate values reads as one.

It is one way, so unlike Construct it may be built inside a lens or a handler, where it runs once and returns a plain object. Reach for Construct when the object must write its fields back, and Object when the fields are only read.

Returns a read-only Sprites.Reactive.Value over the assembled object.

const col = Sprites.Reactive.Value(5);
const row = Sprites.Reactive.Value(3);
const cell = Sprites.Data.Object({ x: col, y: row });
const x = Sprites.Reactive.Field(cell, 'x');
const y = Sprites.Reactive.Field(cell, 'y');
Sprites.Ui.Input.Number(col);
Sprites.Ui.Input.Number(row);
Sprites.Ui.Dom.Text(' cell = ', x, ', ', y);

Sprites.Data.With Sprites.Reactive.Value

Sprites.Data.With(container, key, value)

A shallow copy of a container with one field or element set to a value, leaving every other reference the same. The container may be an array or an object. When the field already holds the value the container is returned as it is.

Each argument may be a constant or a reactive value, so the copy follows them.

Returns a read-only Sprites.Reactive.Value holding the updated copy.

const point = Sprites.Reactive.Value({ x: 1, y: 2 });
const y = Sprites.Reactive.Value(2);
const moved = Sprites.Data.With(point, 'y', y);
Sprites.Ui.Input.Number(y, 0, 9);
Sprites.Ui.Dom.Text(' moved = ', () => {
  const p = Sprites.Reactive.Get(moved);
  return p.x + ', ' + p.y;
});

Sprites.Data.Array.At Sprites.Reactive.Value

Sprites.Data.Array.At(list, index)

The item of a list at an index, or undefined past the ends. Both may be a constant or a reactive value.

Returns a read-only Sprites.Reactive.Value holding the item at the index.

const list = Sprites.Reactive.Value(['red', 'green', 'blue']);
const index = Sprites.Reactive.Value(0);
const item = Sprites.Data.Array.At(list, index);
Sprites.Ui.Input.Number(index, 0, 2);
Sprites.Ui.Dom.Text(' item = ', item);

Sprites.Data.Array.Build Sprites.Reactive.Value

Sprites.Data.Array.Build(count, map)

A list of count items, each the value that map returns for its index. map is a plain function of an index, run for each position. count may be a constant or a reactive value, so the list follows it.

Returns a read-only Sprites.Reactive.Value holding the built list.

const count = Sprites.Reactive.Value(4);
const squares = Sprites.Data.Array.Build(count, (i) => {
  return i * i;
});
Sprites.Ui.Input.Number(count, 0, 8);
Sprites.Ui.Dom.Text(' squares = ', () => {
  return Sprites.Reactive.Get(squares).join(', ');
});

Sprites.Data.Array.Fill Sprites.Reactive.Value

Sprites.Data.Array.Fill(count, value)

A list of count copies of a value. Each argument may be a constant or a reactive value, so the list follows both.

Returns a read-only Sprites.Reactive.Value holding the filled list.

const count = Sprites.Reactive.Value(3);
const dots = Sprites.Data.Array.Fill(count, '.');
Sprites.Ui.Input.Number(count, 0, 8);
Sprites.Ui.Dom.Text(' dots = ', () => {
  return Sprites.Reactive.Get(dots).join('');
});

Sprites.Data.Array.FindIndex Sprites.Reactive.Value

Sprites.Data.Array.FindIndex(list, match, fallback)

The index of the first item that match returns true for, or a fallback when none do. match is a plain function of an item. list and fallback may each be a constant or a reactive value.

Returns a read-only Sprites.Reactive.Value holding the found index or the fallback.

const list = Sprites.Reactive.Value([3, 7, 4, 9]);
const limit = Sprites.Reactive.Value(5);
const found = Sprites.Data.Array.FindIndex(list, (n) => {
  return n > Sprites.Reactive.Get(limit);
}, -1);
Sprites.Ui.Input.Number(limit, 0, 9);
Sprites.Ui.Dom.Text(' index = ', found);

Sprites.Data.Array.IndexOf Sprites.Reactive.Value

Sprites.Data.Array.IndexOf(list, value)

The index of a value in a list, or minus one when it is absent. Both may be a constant or a reactive value, so the result follows them.

Returns a read-only Sprites.Reactive.Value holding the index, or minus one.

const list = Sprites.Reactive.Value(['red', 'green', 'blue']);
const value = Sprites.Reactive.Value('green');
const at = Sprites.Data.Array.IndexOf(list, value);
Sprites.Ui.Input.Dropdown(value, () => {
  Sprites.Ui.Input.Option('red', 'Red');
  Sprites.Ui.Input.Option('green', 'Green');
  Sprites.Ui.Input.Option('blue', 'Blue');
});
Sprites.Ui.Dom.Text(' index = ', at);

Sprites.Data.Array.IsEmpty Sprites.Reactive.Value

Sprites.Data.Array.IsEmpty(list)

True when a list holds no items. A missing list counts as empty.

Returns a read-only Sprites.Reactive.Value, true while the list holds no items.

const list = Sprites.Reactive.Value([]);
const empty = Sprites.Data.Array.IsEmpty(list);
Sprites.Ui.Button.Push(list, () => {
  return 'item';
}, 'Add item');
Sprites.Ui.Button.SetValue(list, [], 'Clear');
Sprites.Ui.Dom.Text(' empty = ', empty);

Sprites.Data.Array.Length Sprites.Reactive.Value

Sprites.Data.Array.Length(list)

The length of a list.

Returns a read-only Sprites.Reactive.Value holding the length.

const list = Sprites.Reactive.Value(['a', 'b']);
const length = Sprites.Data.Array.Length(list);
Sprites.Ui.Button.Push(list, () => {
  return 'x';
}, 'Add');
Sprites.Ui.Dom.Text(' length = ', length);

Sprites.Data.Array.Map Sprites.Reactive.Value

Sprites.Data.Array.Map(list, map)

A list with map applied to each item. map is a plain function of an item and its index. list may be a constant or a reactive value, so the result follows it.

Returns a read-only Sprites.Reactive.Value holding the mapped list.

const list = Sprites.Reactive.Value([1, 2, 3]);
const doubled = Sprites.Data.Array.Map(list, (n) => {
  return n * 2;
});
Sprites.Ui.Button.Push(list, () => {
  return 4;
}, 'Add 4');
Sprites.Ui.Dom.Text(' doubled = ', () => {
  return Sprites.Reactive.Get(doubled).join(', ');
});

Sprites.Data.Array.Slice Sprites.Reactive.Value

Sprites.Data.Array.Slice(list, start, end)

A shallow slice of a list, from start up to end. Leave end out for the rest. Each argument may be a constant or a reactive value.

Returns a read-only Sprites.Reactive.Value holding the slice.

const list = Sprites.Reactive.Value([1, 2, 3, 4, 5]);
const count = Sprites.Reactive.Value(3);
const head = Sprites.Data.Array.Slice(list, 0, count);
Sprites.Ui.Input.Number(count, 0, 5);
Sprites.Ui.Dom.Text(' head = ', () => {
  return Sprites.Reactive.Get(head).join(', ');
});

Sprites.Data.Array.Some Sprites.Reactive.Value

Sprites.Data.Array.Some(list, match)

True when match returns true for some item. match is a plain function of an item. list may be a constant or a reactive value, so the result follows it.

Returns a read-only Sprites.Reactive.Value, true while some item matches.

const list = Sprites.Reactive.Value([2, 4, 6]);
const hasOdd = Sprites.Data.Array.Some(list, (n) => {
  return n % 2 === 1;
});
Sprites.Ui.Button.Push(list, () => {
  return 7;
}, 'Add 7');
Sprites.Ui.Dom.Text(' hasOdd = ', hasOdd);