rooklang 0.3.1 → 0.3.3

package/src/runtime/markup.js

@@ -0,0 +1,336 @@
+// Markup: the owners of the blocks that `{if}`, `{switch}` and `{for}` remove, the
+// `mount()` of components, the blocks themselves, elements and the CSS of components.
+
+import { $$runDeferred } from './core.js';
+
+// Owners of markup that `{if}`, `{switch}` and `{for}` may remove: the functions returned by the
+// `mount()` of its components, and the removal of the blocks inside it, run when it is removed.
+// The current owner is shared by the modules of a page, since the blocks of one module may hold
+// the components of another.
+export const $$owner = Symbol.for('rook.owner');
+
+export function $$owned(create) {
+  const owner = { removed: false, cleanups: [] };
+  const parent = globalThis[$$owner];
+
+  globalThis[$$owner] = owner;
+
+  let result;
+
+  try {
+    result = create();
+  } finally {
+    globalThis[$$owner] = parent;
+  }
+
+  const remove = () => {
+    if (owner.removed) return;
+    owner.removed = true;
+    $$runDeferred(owner.cleanups);
+  };
+
+  return [result, remove];
+}
+
+export function $$onRemove(cleanup) {
+  globalThis[$$owner]?.cleanups.push(cleanup);
+}
+
+// `mount() { ... }` of a component: runs when its markup is in the document. That is checked after
+// the code that creates the component; markup that is not in the document yet is waited for with a
+// MutationObserver, which watches only while some markup waits. Markup that its owner removes
+// before that never mounts. The function `mount` returns runs when the owner is removed.
+export const $$waiting = new Set();
+export let $$observer = null;
+
+export function $$mount(node, mount) {
+  const entry = { node, mount, owner: globalThis[$$owner] };
+
+  entry.owner?.cleanups.push(() => $$waiting.delete(entry));
+  queueMicrotask(() => $$tryMount(entry));
+}
+
+export function $$tryMount(entry) {
+  if (entry.owner?.removed) return;
+
+  const node = entry.node();
+
+  if (node != null && !node.isConnected) {
+    $$waiting.add(entry);
+    if (!$$observer) {
+      $$observer = new MutationObserver($$mountWaiting);
+      $$observer.observe(node.ownerDocument ?? document, { childList: true, subtree: true });
+    }
+
+    return;
+  }
+
+  const cleanup = entry.mount();
+
+  if (typeof cleanup === 'function') entry.owner?.cleanups.push(cleanup);
+}
+
+export function $$mountWaiting() {
+  for (const entry of $$waiting) {
+    if (!entry.node().isConnected) continue;
+    $$waiting.delete(entry);
+    $$tryMount(entry);
+  }
+
+  if ($$waiting.size === 0) {
+    $$observer.disconnect();
+    $$observer = null;
+  }
+}
+
+// Appends element content whose type is not known: null adds nothing, arrays add each item.
+export function $$append(parent, value) {
+  if (value == null || value === false) return;
+  if (Array.isArray(value)) {
+    for (const item of value) $$append(parent, item);
+  } else {
+    parent.append(value);
+  }
+}
+
+// Nodes of markup that change, `{list}` or `{ok ? <b /> : null}`: they are kept before an end
+// marker. Nodes that stay are moved rather than created again. Returns the markers with the first
+// nodes, to be inserted, and the update.
+export function $$content(value) {
+  const end = document.createTextNode('');
+  const fragment = document.createDocumentFragment();
+
+  fragment.append(end);
+
+  let nodes = [];
+  let remove;
+  const update = () => {
+    const next = [];
+    const add = (item) => {
+      if (item == null || item === false) return;
+      if (Array.isArray(item)) {
+        for (const each of item) add(each);
+      } else if (item.nodeType === 11) {
+        next.push(...item.childNodes);
+      } else {
+        next.push(typeof item === 'object' ? item : document.createTextNode(String(item)));
+      }
+    };
+    const [created, removeCreated] = $$owned(value);
+
+    add(created);
+    remove?.();
+    remove = removeCreated;
+
+    const kept = new Set(next);
+
+    for (const node of nodes) if (!kept.has(node)) node.remove();
+    end.before(...next);
+    nodes = next;
+  };
+
+  update();
+  $$onRemove(() => remove?.());
+
+  return [fragment, update];
+}
+
+// `{if ...}` and `{switch ...}` in markup: shows the block that `choose` picks (-1 for none) between
+// two markers. The block is created again only when the choice changes; otherwise it is updated.
+export function $$branches(choose, blocks) {
+  const start = document.createTextNode('');
+  const end = document.createTextNode('');
+  const fragment = document.createDocumentFragment();
+
+  fragment.append(start, end);
+
+  let current = null;
+  let update;
+  let remove;
+  const render = () => {
+    const next = choose();
+
+    if (next === current) {
+      update?.();
+
+      return;
+    }
+
+    current = next;
+    remove?.();
+    while (start.nextSibling !== end) start.nextSibling.remove();
+    update = undefined;
+    remove = undefined;
+    if (next >= 0) {
+      const [[content, blockUpdate], removeBlock] = $$owned(blocks[next]);
+
+      end.before(content);
+      update = blockUpdate;
+      remove = removeBlock;
+    }
+  };
+
+  render();
+  $$onRemove(() => remove?.());
+
+  return [fragment, render];
+}
+
+// `<Page />` whose component is a value that changes: when it does, the block that `create` makes
+// with it is created again between two markers; otherwise the block is updated.
+export function $$dynamic(component, create) {
+  const start = document.createTextNode('');
+  const end = document.createTextNode('');
+  const fragment = document.createDocumentFragment();
+
+  fragment.append(start, end);
+
+  let current;
+  let update;
+  let remove;
+  const render = () => {
+    const next = component();
+
+    if (remove && next === current) {
+      update?.();
+
+      return;
+    }
+
+    current = next;
+    remove?.();
+    while (start.nextSibling !== end) start.nextSibling.remove();
+
+    const [[content, blockUpdate], removeBlock] = $$owned(() => create(next));
+
+    end.before(content);
+    update = blockUpdate;
+    remove = removeBlock;
+  };
+
+  render();
+  $$onRemove(() => remove?.());
+
+  return [fragment, render];
+}
+
+// `{for item in items { ... }}` in markup: a block for each item, between its own markers. On
+// updates the blocks are found again by the item itself: blocks of items that stay are updated and
+// moved into place, others are created or removed.
+export function $$list(items, create) {
+  const end = document.createTextNode('');
+  const fragment = document.createDocumentFragment();
+
+  fragment.append(end);
+
+  let blocks = [];
+  const nodesOf = (block) => {
+    const nodes = [];
+
+    for (let node = block.start; node !== block.end; node = node.nextSibling) nodes.push(node);
+    nodes.push(block.end);
+
+    return nodes;
+  };
+  const update = () => {
+    const old = new Map();
+
+    for (const block of blocks) {
+      const same = old.get(block.item);
+
+      if (same) same.push(block);
+      else old.set(block.item, [block]);
+    }
+
+    const next = [];
+    let index = 0;
+
+    for (const item of items()) {
+      let block = old.get(item)?.shift();
+
+      if (block) {
+        block.update?.(index);
+      } else {
+        const [[content, blockUpdate], remove] = $$owned(() => create(item, index));
+
+        block = { item, start: document.createTextNode(''), end: document.createTextNode('') };
+        block.update = blockUpdate;
+        block.remove = remove;
+        block.content = document.createDocumentFragment();
+        block.content.append(block.start, content, block.end);
+      }
+
+      next.push(block);
+      index++;
+    }
+
+    for (const same of old.values()) {
+      for (const block of same) {
+        block.remove();
+        for (const node of nodesOf(block)) node.remove();
+      }
+    }
+
+    let before = end;
+
+    for (let i = next.length - 1; i >= 0; i--) {
+      const block = next[i];
+
+      if (block.content) {
+        before.before(block.content);
+        block.content = null;
+      } else if (block.end.nextSibling !== before) {
+        before.before(...nodesOf(block));
+      }
+
+      before = block.start;
+    }
+
+    blocks = next;
+  };
+
+  update();
+  $$onRemove(() => {
+    for (const block of blocks) block.remove();
+  });
+
+  return [fragment, update];
+}
+
+// Creates an element with its properties and the attributes that are set with setAttribute.
+export function $$element(tag, properties, attributes) {
+  const element = Object.assign(document.createElement(tag), properties);
+
+  for (const name in attributes) element.setAttribute(name, attributes[name]);
+
+  return element;
+}
+
+// Creates an SVG element with its attributes.
+export function $$svgElement(tag, attributes) {
+  const element = document.createElementNS('http://www.w3.org/2000/svg', tag);
+
+  for (const name in attributes) element.setAttribute(name, attributes[name]);
+
+  return element;
+}
+
+// Sets an attribute whose value may be null: then the attribute is removed.
+export function $$attribute(element, name, value) {
+  if (value == null) element.removeAttribute(name);
+  else element.setAttribute(name, value);
+}
+
+// Adds the CSS of a component to the page once: modules that inline the same component add it with
+// the same id. `styles` keeps the CSS of the module for the shadow roots of its web components,
+// which the styles of the page do not reach.
+export function $$style(styles, id, css) {
+  styles.push(css);
+  if (document.getElementById(id)) return;
+
+  const style = document.createElement('style');
+
+  style.id = id;
+  style.textContent = css;
+  document.head.append(style);
+}

package/src/runtime/queue.js

@@ -0,0 +1,118 @@
+// The class of `queue T`. Its values are a ring in an array: `shift()` and `unshift()` move the
+// start instead of the other values, as they do in an array. A full ring is copied into one twice
+// its size, and one that is mostly empty into one half its size, so each operation costs a few
+// steps on average. The fields are data, so a copy for another thread keeps the queue, and the
+// thread that gets it gives it back its class (threads.js).
+
+export class $$Queue {
+  constructor(items = []) {
+    this.$$queue = [...items];
+    this.$$start = 0;
+    this.$$length = this.$$queue.length;
+  }
+
+  get length() {
+    return this.$$length;
+  }
+
+  push(...items) {
+    for (const item of items) {
+      if (this.$$length === this.$$queue.length) this.$$resize();
+      this.$$queue[(this.$$start + this.$$length++) % this.$$queue.length] = item;
+    }
+
+    return this.$$length;
+  }
+
+  unshift(...items) {
+    for (let i = items.length - 1; i >= 0; i--) {
+      if (this.$$length === this.$$queue.length) this.$$resize();
+      this.$$start = (this.$$start || this.$$queue.length) - 1;
+      this.$$queue[this.$$start] = items[i];
+      this.$$length++;
+    }
+
+    return this.$$length;
+  }
+
+  // An empty queue gives null; a value that is taken out is not held any more.
+  shift() {
+    if (this.$$length === 0) return null;
+
+    const item = this.$$queue[this.$$start];
+
+    this.$$queue[this.$$start] = undefined;
+    this.$$start = (this.$$start + 1) % this.$$queue.length;
+    this.$$length--;
+    this.$$shrink();
+
+    return item;
+  }
+
+  pop() {
+    if (this.$$length === 0) return null;
+
+    const at = (this.$$start + --this.$$length) % this.$$queue.length;
+    const item = this.$$queue[at];
+
+    this.$$queue[at] = undefined;
+    this.$$shrink();
+
+    return item;
+  }
+
+  // A position from the start, or from the end if it is negative, as with an array.
+  at(index) {
+    const i = Math.trunc(index) || 0;
+    const at = i < 0 ? i + this.$$length : i;
+
+    if (at < 0 || at >= this.$$length) return null;
+
+    return this.$$queue[(this.$$start + at) % this.$$queue.length];
+  }
+
+  clear() {
+    this.$$queue = [];
+    this.$$start = 0;
+    this.$$length = 0;
+  }
+
+  *[Symbol.iterator]() {
+    for (let i = 0; i < this.$$length; i++) {
+      yield this.$$queue[(this.$$start + i) % this.$$queue.length];
+    }
+  }
+
+  // Removes a value, for the channels: at the start it costs a step, elsewhere the whole queue.
+  $$delete(item) {
+    if (this.$$length > 0 && this.$$queue[this.$$start] === item) return this.shift();
+
+    const items = [...this];
+    const at = items.indexOf(item);
+
+    if (at >= 0) this.$$keep((_, i) => i !== at);
+  }
+
+  // Keeps the values that pass the test, in their order.
+  $$keep(test) {
+    const items = [...this].filter(test);
+
+    this.$$queue = items;
+    this.$$start = 0;
+    this.$$length = items.length;
+    this.$$shrink();
+  }
+
+  // The values from the start of a new ring with room for as many again, and at least 8.
+  $$resize() {
+    const items = [...this];
+
+    items.length = Math.max(8, this.$$length * 2);
+    this.$$queue = items;
+    this.$$start = 0;
+  }
+
+  $$shrink() {
+    if (this.$$queue.length > 8 && this.$$length * 4 <= this.$$queue.length) this.$$resize();
+  }
+}

package/src/runtime/select.js

@@ -0,0 +1,170 @@
+// `select`. Its cases may wait in channels of several threads; a channel that can go on with a case
+// asks the thread of the select to lock it first, so that only one case goes on, as Go locks the
+// channels of a select.
+
+import { $$finish, $$pump, $$zero } from './chan.js';
+import { $$ask, $$ownerOf, $$pin, $$post, $$registry, $$stopped } from './threads.js';
+
+// `select`: the index of the case that went on, and what it received. A case is { channel } to
+// receive or { channel, value } to send; from another thread, { channel, send, value }. One that
+// can go on at once wins, a random one as in Go; else `default`, -1, if there is one; else the
+// first that can go on later. A case with a null channel never goes on.
+export async function $$select(cases, hasDefault) {
+  const registry = $$registry();
+  const all = cases.map((each, i) => ({
+    i,
+    id: typeof each.channel === 'string' ? each.channel : (each.channel?.$$chan ?? null),
+    send: each.send ?? 'value' in each,
+    value: each.value,
+  }));
+  const live = all.filter(({ id }) => id !== null);
+  const owners = new Set(live.map(({ id }) => $$ownerOf(id)));
+
+  // The channels of one other thread: the select runs there.
+  if (owners.size === 1 && !owners.has(registry.key)) {
+    const [owner] = owners;
+
+    return $$ask(owner, {
+      op: 'select',
+      cases: all.map(({ id: channel, send, value }) => ({ channel, send, value })),
+      hasDefault,
+    });
+  }
+
+  const order = live.map(({ i }) => i).sort(() => Math.random() - 0.5);
+
+  for (const i of order) {
+    const { id, send, value } = all[i];
+    const owner = $$ownerOf(id);
+    const ready =
+      owner === registry.key
+        ? $$try(id, send, value)
+        : await $$ask(owner, { op: 'try', channel: id, send, value });
+
+    if (ready) return [i, ...ready];
+  }
+
+  if (hasDefault) return [-1];
+
+  return new Promise((resolve, reject) => {
+    const sid = registry.asks++;
+    const channels = new Map();
+
+    registry.selects.set(sid, { locked: false, resolve, reject, channels });
+    live.forEach(({ i, id, send, value }) => {
+      const owner = $$ownerOf(id);
+
+      if (!channels.has(owner)) channels.set(owner, []);
+      channels.get(owner).push(id);
+      if (owner === registry.key) {
+        const entry = { select: { key: owner, sid }, case: i, value };
+
+        registry.states.get(id)[send ? 'senders' : 'receivers'].push(entry);
+      } else {
+        $$post(owner, { op: 'wait', sid, case: i, channel: id, send, value });
+      }
+    });
+    for (const owner of channels.keys()) if (owner !== registry.key) $$pin(owner, 1);
+    for (const id of channels.get(registry.key) ?? []) $$pump(id);
+  });
+}
+
+// What a case of a select gets at once, if it can go on: [] for a send, [value, ok] for a receive.
+// A receiver or sender that a select of another thread waits with is left to $$pump.
+export function $$try(id, send, value) {
+  const state = $$registry().states.get(id);
+
+  if (!state) throw $$stopped();
+  if (state.busy) return null;
+  if (send && state.closed) throw new Error('send on a closed channel');
+  if (!send && state.buffer.length > 0) {
+    const received = state.buffer.shift();
+
+    $$pump(id);
+
+    return [received, true];
+  }
+
+  const queue = send ? state.receivers : state.senders;
+
+  while (queue.length > 0) {
+    const entry = queue.at(0);
+
+    if (entry.select && entry.select.key !== $$registry().key) break;
+
+    const lock = entry.select ? $$lock(entry.select.sid) : 'locked';
+
+    if (lock === 'busy') break;
+    queue.shift();
+    if (lock === 'done') continue;
+    if (!send) {
+      $$finish(entry);
+
+      return [entry.value, true];
+    }
+
+    $$finish(entry, [value, true]);
+
+    return [];
+  }
+
+  if (send && state.buffer.length < state.size) {
+    state.buffer.push(value);
+    $$pump(id);
+
+    return [];
+  }
+
+  return !send && state.closed ? [$$zero(state), false] : null;
+}
+
+// The thread of a select decides which of its cases goes on: a channel locks the select, then
+// commits a case or unlocks it.
+export function $$lock(sid) {
+  const select = $$registry().selects.get(sid);
+
+  if (!select) return 'done';
+  if (select.locked) return 'busy';
+  select.locked = true;
+
+  return 'locked';
+}
+
+export function $$unlock(sid) {
+  const select = $$registry().selects.get(sid);
+
+  if (select) select.locked = false;
+}
+
+export function $$commit(sid, i, result, error) {
+  const registry = $$registry();
+  const select = registry.selects.get(sid);
+
+  if (!select) return;
+  registry.selects.delete(sid);
+  // The other cases leave the queues of their channels.
+  for (const [owner, channels] of select.channels) {
+    if (owner === registry.key) {
+      $$unwait({ key: owner, sid }, channels);
+    } else {
+      $$post(owner, { op: 'cancel', sid, channels });
+      $$pin(owner, -1);
+    }
+  }
+
+  if (error) select.reject(error);
+  else select.resolve([i, ...(result ?? [])]);
+}
+
+export function $$unwait(select, channels) {
+  const { states } = $$registry();
+  const other = (entry) => entry.select?.key !== select.key || entry.select.sid !== select.sid;
+
+  for (const id of channels) {
+    const state = states.get(id);
+
+    if (!state) continue;
+    state.receivers.$$keep(other);
+    state.senders.$$keep(other);
+  }
+}

package/src/runtime/streams.js

@@ -0,0 +1,61 @@
+// Streams and channels: `chan(stream, size)` and `stream(ch)`.
+
+import { $$chan, $$closeHere, $$receive, $$send } from './chan.js';
+import { $$try } from './select.js';
+import { $$registry } from './threads.js';
+
+// `chan(stream, size)`: a channel of the chunks of a stream and one of its error. The next chunk is
+// read only when the last one is in the channel, so a full channel stops the stream; closing
+// the channel cancels it.
+export function $$fromStream(stream, size, zero) {
+  const channel = $$chan(size, zero);
+  const failed = $$chan(1, null);
+  const id = channel.$$chan;
+
+  (async () => {
+    const reader = stream?.getReader();
+    let failure = null;
+
+    while (reader) {
+      let chunk;
+
+      try {
+        chunk = await reader.read();
+      } catch (error) {
+        failure = error;
+        break;
+      }
+
+      if (chunk.done) break;
+      try {
+        await $$send(channel, chunk.value);
+      } catch {
+        reader.cancel().catch(() => {});
+        break;
+      }
+    }
+
+    // The pump holds both channels, so they are not forgotten; the one of the error has room.
+    if (!$$registry().states.get(id).closed) $$closeHere(id);
+    $$try(failed.$$chan, true, failure);
+    $$closeHere(failed.$$chan);
+  })();
+
+  return [channel, failed];
+}
+
+// `stream(ch)`: a stream that reads one value of the channel for each read, so the room of the
+// channel is all it buffers, and ends when the channel is closed.
+export function $$stream(channel) {
+  return new ReadableStream(
+    {
+      async pull(controller) {
+        const [value, ok] = await $$receive(channel, true);
+
+        if (ok) controller.enqueue(value);
+        else controller.close();
+      },
+    },
+    { highWaterMark: 0 },
+  );
+}