rooklang 0.3.4 → 0.4.1

package/src/runtime/markup.js

@@ -1,10 +1,10 @@
 // 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.
+// `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.
+// Owners of markup that `{if}`, `{switch}` and `{for}` may remove: what the `mount` and `effect`
+// of its components deferred, 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');
@@ -36,15 +36,17 @@ 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
+// `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.
+// before that never mounts. What its `defer`s put into `cleanups` runs when the owner is removed;
+// they are added to the owner once it mounts, so the cleanups of the decorators, which mount after
+// the component, run before those of the component.
 export const $$waiting = new Set();
 export let $$observer = null;
 
-export function $$mount(node, mount) {
-  const entry = { node, mount, owner: globalThis[$$owner] };
+export function $$mount(node, mount, cleanups) {
+  const entry = { node, mount, cleanups, owner: globalThis[$$owner] };
 
   entry.owner?.cleanups.push(() => $$waiting.delete(entry));
   queueMicrotask(() => $$tryMount(entry));
@@ -65,9 +67,8 @@ export function $$tryMount(entry) {
     return;
   }
 
-  const cleanup = entry.mount();
-
-  if (typeof cleanup === 'function') entry.owner?.cleanups.push(cleanup);
+  entry.mount();
+  if (entry.cleanups) entry.owner?.cleanups.push(() => $$runDeferred(entry.cleanups.splice(0)));
 }
 
 export function $$mountWaiting() {
@@ -216,8 +217,10 @@ export function $$dynamic(component, create) {
 
 // `{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) {
+// moved into place, others are created or removed. With `key`, of `with key item.id`, they are
+// found by the key instead, so an item replaced by another with the same key keeps its block,
+// which gets the new item.
+export function $$list(items, create, key = (item) => item) {
   const end = document.createTextNode('');
   const fragment = document.createDocumentFragment();
 
@@ -236,24 +239,25 @@ export function $$list(items, create) {
     const old = new Map();
 
     for (const block of blocks) {
-      const same = old.get(block.item);
+      const same = old.get(block.key);
 
       if (same) same.push(block);
-      else old.set(block.item, [block]);
+      else old.set(block.key, [block]);
     }
 
     const next = [];
     let index = 0;
 
     for (const item of items()) {
-      let block = old.get(item)?.shift();
+      const id = key(item, index);
+      let block = old.get(id)?.shift();
 
       if (block) {
-        block.update?.(index);
+        block.update?.(index, item);
       } else {
         const [[content, blockUpdate], remove] = $$owned(() => create(item, index));
 
-        block = { item, start: document.createTextNode(''), end: document.createTextNode('') };
+        block = { key: id, start: document.createTextNode(''), end: document.createTextNode('') };
         block.update = blockUpdate;
         block.remove = remove;
         block.content = document.createDocumentFragment();
@@ -315,6 +319,12 @@ export function $$svgElement(tag, attributes) {
   return element;
 }
 
+// The class of `class={[styles.tab, active ? styles.active : null]}`: the classes that are not
+// null or empty, separated by spaces.
+export function $$classes(list) {
+  return list.filter((each) => each).join(' ');
+}
+
 // 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);

package/src/runtime/shared.js

@@ -0,0 +1,17 @@
+// State of a module, `state items []Item = []` at its top level: the set of the updates of the
+// components that read it, which every change of it runs.
+
+import { $$onRemove } from './markup.js';
+
+// A component adds its update while it is on the page: `{if}`, `{switch}` or `{for}` that removes
+// it takes the update away.
+export function $$watch(listeners, update) {
+  listeners.add(update);
+  $$onRemove(() => listeners.delete(update));
+}
+
+// After a change of the state: the updates run on a copy, since one may remove a component, or
+// add one, that listens too.
+export function $$changed(listeners) {
+  for (const update of [...listeners]) update();
+}