rooklang 0.3.4 → 0.4.0

package/dist/walk.js

@@ -47,19 +47,18 @@ export function forEachChild(node, visit) {
             // The names after `needs` are other decorators', not values in scope.
             visit(node.name);
             each(node.params);
+            each(node.includes);
             visit(node.body);
             break;
         case 'DecoratorUse':
             // The name is the decorator's, not a value in scope.
             each(node.arguments);
             break;
-        case 'DecoratorGet':
-            visit(node.target);
-            break;
         case 'VariableDeclaration':
             each(node.names);
             optional(node.type);
             each(node.values);
+            optional(node.body);
             break;
         case 'ClassDeclaration':
             visit(node.name);
@@ -143,6 +142,7 @@ export function forEachChild(node, visit) {
             optional(node.key);
             visit(node.value);
             visit(node.iterable);
+            optional(node.withKey ?? null);
             visit(node.body);
             break;
         case 'SwitchStatement':

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rooklang",
-  "version": "0.3.4",
+  "version": "0.4.0",
   "description": "A language with JavaScript semantics, Go-style syntax, goroutines on real threads and static types that compiles to readable JavaScript",
   "keywords": [
     "rooklang",
@@ -57,7 +57,7 @@
   "scripts": {
     "rook": "node src/cli.ts",
     "site:dev": "vite",
-    "site:build": "vite build",
+    "site:build": "vite build && node scripts/prerender.ts",
     "site": "npm run site:build && node src/cli.ts run site/server.rk",
     "site:images": "node scripts/og-image.ts",
     "vscode:build": "node scripts/build-vscode.ts",

package/src/runtime/decode.js

@@ -48,13 +48,22 @@ export function $$decode(value, type) {
 
 const PRIMITIVES = { number: 'number', string: 'string', bool: 'boolean' };
 
-/** Where and how the value does not fit the type, or null if it does. */
-function check(value, type, path) {
+/**
+ * Where and how the value does not fit the type, or null if it does. For a member of a union,
+ * `tagsFirst` checks its fields of literal types first: a member whose tag does not fit reports
+ * that, not another field.
+ */
+function check(value, type, path, tagsFirst = false) {
   if (typeof type === 'string') {
     return type === 'any' || typeof value === PRIMITIVES[type] ? null : mismatch(value, type, path);
   }
 
-  if ('literal' in type) return type.literal.includes(value) ? null : mismatch(value, type, path);
+  if ('literal' in type) {
+    // Remembered for unions: a tag that fits no member lists the tags of all of them.
+    return type.literal.includes(value)
+      ? null
+      : { ...mismatch(value, type, path), literal: type.literal, value };
+  }
 
   if ('nullable' in type) {
     if (value == null) return null;
@@ -92,7 +101,11 @@ function check(value, type, path) {
     return null;
   }
 
-  for (const [name, field] of Object.entries(type.fields)) {
+  const fields = Object.entries(type.fields);
+
+  if (tagsFirst) fields.sort(([, a], [, b]) => Number(isLiteral(b)) - Number(isLiteral(a)));
+
+  for (const [name, field] of fields) {
     // Only own fields: a field named `toString` is not the method of every object.
     if (!Object.hasOwn(value, name)) {
       if (isOptional(field)) continue;
@@ -110,26 +123,44 @@ function check(value, type, path) {
 
 /**
  * The value fits one of the types. If none fits, the type whose check went deepest into the value
- * is most likely the one meant, `{ kind: "circle", r: "2" }` of `Circle | Square`, so its problem
- * is the one reported.
+ * is most likely the one meant, and of those the one whose tag fits: `{ kind: "circle", r: "2" }`
+ * of `Circle | Square` is a Circle, so its problem is the one reported. When no tag fits, the
+ * message lists them all: `kind: expected "circle" | "square", got "oval"`.
  */
 function checkUnion(value, type, path) {
-  let deepest = null;
+  const problems = [];
 
   for (const member of type.union) {
-    const problem = check(value, member, path);
+    const problem = check(value, member, path, true);
 
     if (problem === null) return null;
-    if (problem.path.length > (deepest?.path.length ?? path.length)) deepest = problem;
+    problems.push(problem);
   }
 
-  return deepest ?? mismatch(value, type, path);
+  const depth = Math.max(...problems.map((problem) => problem.path.length));
+
+  if (depth === path.length) return mismatch(value, type, path);
+
+  const deepest = problems.filter((problem) => problem.path.length === depth);
+  const fitting = deepest.find((problem) => !problem.literal);
+
+  if (fitting) return fitting;
+
+  const [first] = deepest;
+  const same = deepest.filter((problem) => pathText(problem.path) === pathText(first.path));
+  const literal = [...new Set(same.flatMap((problem) => problem.literal))];
+
+  return { ...mismatch(first.value, { literal }, first.path), literal, value: first.value };
 }
 
 function isObject(value) {
   return typeof value === 'object' && value !== null && !Array.isArray(value);
 }
 
+function isLiteral(type) {
+  return typeof type === 'object' && 'literal' in type;
+}
+
 function isOptional(type) {
   return type === 'any' || (typeof type === 'object' && 'nullable' in type);
 }

package/src/runtime/index.js

@@ -11,6 +11,7 @@ export * from './go.js';
 export * from './markup.js';
 export * from './queue.js';
 export * from './select.js';
+export * from './shared.js';
 export * from './signals.js';
 export * from './streams.js';
 export * from './threads.js';

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();
+}