rooklang 0.3.3 → 0.4.0

package/dist/codegen/component-helpers.js

@@ -1,6 +1,11 @@
 import { containsReturn } from "../recursion.js";
 /** Marks where the setters of an inlined component with early returns go: before any return. */
 export const SETTERS = String.fromCharCode(0xe002);
+/**
+ * Marks the `$$watch(...)` of a component that reads state of the module, around the id of the
+ * source: it stays only if something depends on the state (resolveMarkers).
+ */
+export const LISTEN = String.fromCharCode(0xe004);
 /** `f(a, undefined, undefined)` → `f(a)`: missing arguments are undefined anyway. */
 export function withoutTrailingUndefined(args) {
     let end = args.length;
@@ -8,7 +13,7 @@ export function withoutTrailingUndefined(args) {
         end--;
     return args.slice(0, end);
 }
-/** Whether a component has `mount() { ... }`. */
+/** Whether a component has `mount { ... }`. */
 export function hasMount(component) {
     return component.body.body.some((statement) => statement.kind === 'MountStatement');
 }

package/dist/codegen/component-props.d.ts

@@ -9,7 +9,7 @@ export declare abstract class ComponentPropsEmitter extends ControlFlowEmitter {
     /** Setters waiting for their place at the top of an inlined component, by its result. */
     protected readonly pendingSetters: Map<string, string[]>;
     /**
-     * In a component with `mount()`: the variable that gets its first node once the markup is
+     * In a component with `mount`: the variable that gets its first node once the markup is
      * created, so that `$$mount` can wait until that node is in the document.
      */
     protected mountNode: string | null;
@@ -17,7 +17,14 @@ export declare abstract class ComponentPropsEmitter extends ControlFlowEmitter {
      * A use of a recursive component: a call of its function. The parent's updates call the
      * returned function with the new values of the properties that depend on its state.
      */
-    protected callComponent(component: ast.ComponentDeclaration, values: ReadonlyMap<string, string>, reactiveProps: ReadonlyMap<string, [string, Set<Source>]>, live: Live | null, root?: string): string;
+    protected callComponent(component: ast.ComponentDeclaration, values: ReadonlyMap<string, string>, reactiveProps: ReadonlyMap<string, [string, Set<Source>]>, live: Live | null, root?: string, binders?: ReadonlyMap<string, string>): string;
+    /**
+     * `bind:active={tab}`: the function that the component calls with the new value of `active`. It
+     * is written in the caller, so it writes the caller's `tab` and updates what reads it there.
+     */
+    protected binder(target: ast.Expression): string;
+    /** `$$bindActive?.(active);` in a function component, which gets the binders as arguments. */
+    protected bindersOf(component: ast.ComponentDeclaration, reactive: Reactive): string[];
     protected reactiveOf(component: ast.ComponentDeclaration, props: Iterable<string>): Reactive;
     /**
      * `title, kind = "info"`: parameters with their default values, each name with a prefix. A tag
@@ -40,3 +47,5 @@ export declare abstract class ComponentPropsEmitter extends ControlFlowEmitter {
      */
     protected spreadProps(argument: ast.Expression, component: ast.ComponentDeclaration, live: Live | null, values: Map<string, string>, reactiveProps: Map<string, [string, Set<Source>]>): void;
 }
+/** The bound properties of a component, `bind active string`, in their order. */
+export declare function boundParams(component: ast.ComponentDeclaration): ast.Parameter[];

package/dist/codegen/component-props.js

@@ -3,6 +3,7 @@ import { declaredNames } from "../names.js";
 import { isConstant, isSimple, rootName } from "./analysis.js";
 import { ControlFlowEmitter } from "./control-flow.js";
 import { Reactive, updatesOf } from "./reactive.js";
+import { rootsOf } from "./shared.js";
 import { ARROW, indentMore, lowerFirst, POSTFIX, upperFirst } from "./syntax.js";
 import { withoutTrailingUndefined } from "./component-helpers.js";
 /** The properties of components: their values, spread objects, and calls of function components. */
@@ -12,7 +13,7 @@ export class ComponentPropsEmitter extends ControlFlowEmitter {
     /** Setters waiting for their place at the top of an inlined component, by its result. */
     pendingSetters = new Map();
     /**
-     * In a component with `mount()`: the variable that gets its first node once the markup is
+     * In a component with `mount`: the variable that gets its first node once the markup is
      * created, so that `$$mount` can wait until that node is in the document.
      */
     mountNode = null;
@@ -20,15 +21,17 @@ export class ComponentPropsEmitter extends ControlFlowEmitter {
      * A use of a recursive component: a call of its function. The parent's updates call the
      * returned function with the new values of the properties that depend on its state.
      */
-    callComponent(component, values, reactiveProps, live, root) {
+    callComponent(component, values, reactiveProps, live, root, binders = new Map()) {
         const name = component.name.name;
         const id = this.nextId();
         const result = `$$${lowerFirst(name)}${id}`;
         // A missing property with a default value is left undefined, so that the default applies.
         const argument = (param) => values.get(param.name.name) ?? (param.defaultValue ? 'undefined' : 'null');
-        // The element a ref created for it goes last, as `$$root`.
+        // The functions that write bound properties into the caller come next, then the element a ref
+        // created for it, as `$$root`.
         const args = withoutTrailingUndefined([
             ...component.params.map(argument),
+            ...boundParams(component).map((param) => binders.get(param.name.name) ?? 'undefined'),
             ...(root === undefined ? [] : [root]),
         ]);
         const fn = this.functionNames.get(component) ?? `$$${name}`;
@@ -49,13 +52,51 @@ export class ComponentPropsEmitter extends ControlFlowEmitter {
         live.depend(sources, `${setter}(${setterArgs.join(', ')});`);
         return result;
     }
+    /**
+     * `bind:active={tab}`: the function that the component calls with the new value of `active`. It
+     * is written in the caller, so it writes the caller's `tab` and updates what reads it there.
+     */
+    binder(target) {
+        const name = `$$bind${this.nextId()}`;
+        const text = this.liveExpression(target);
+        // `todos` of `bind:todos={todos}`, or the state that `bind:open={menu.open}` writes into.
+        const written = [...(this.reactive?.rootSources(target) ?? [])].filter((source) => source.kind === 'state');
+        const body = this.block(() => {
+            this.line(`${text} = $$value;`);
+            for (const name of rootsOf(target, this.shared)) {
+                this.line(`$$changed(${this.shared.listeners.get(name)});`);
+            }
+            for (const source of written)
+                this.line(`${this.write(source)};`);
+        });
+        this.line(`const ${name} = ($$value) => ${body};`);
+        return name;
+    }
+    /** `$$bindActive?.(active);` in a function component, which gets the binders as arguments. */
+    bindersOf(component, reactive) {
+        return boundParams(component).map((param) => {
+            const binder = `$$bind${upperFirst(param.name.name)}`;
+            reactive.sources.get(param.name.name).bound = `${binder}?.(${this.name(param.name.name)});`;
+            return binder;
+        });
+    }
     reactiveOf(component, props) {
+        const shared = new Set(this.shared.listeners.keys());
         return new Reactive(component, this.fn, props, (sourceName, kind) => {
             const id = this.nextId();
             // `$$card$price`, an argument of a decorator, is updated by `$$updateCard$price3`.
             const update = `$$update${upperFirst(sourceName.replace(/^\$\$/, ''))}${id}`;
-            return { id, name: sourceName, kind, update, computations: [], dependents: [], writes: [] };
-        });
+            return {
+                id,
+                name: sourceName,
+                kind,
+                update,
+                computations: [],
+                dependents: [],
+                writes: [],
+                bound: null,
+            };
+        }, shared);
     }
     /**
      * `title, kind = "info"`: parameters with their default values, each name with a prefix. A tag
@@ -171,3 +212,7 @@ export class ComponentPropsEmitter extends ControlFlowEmitter {
         }
     }
 }
+/** The bound properties of a component, `bind active string`, in their order. */
+export function boundParams(component) {
+    return component.params.filter((param) => param.bind);
+}

package/dist/codegen/components.d.ts

@@ -19,16 +19,17 @@ export declare abstract class ComponentEmitter extends StyleEmitter {
      * reads; one that reads no state is a constant.
      */
     private derivedValue;
+    /**
+     * `derived summary { ... }`: the block becomes a function that computes the value, called first
+     * and in the updates of what it reads; one that reads no state runs once. The block computes
+     * while the markup is created or updated, so it calls no updates, as the expressions there.
+     */
+    private derivedBlock;
     /**
      * An argument of a decorator that reads properties of the component: when they change, it is
      * computed again, and what reads it is updated.
      */
     private decoratorArgument;
-    /**
-     * `mount() { ... }` becomes `$$mount(() => { ... })`. Its body runs later, like a handler: what
-     * it changes updates the markup.
-     */
-    protected mountStatement(node: ast.MountStatement): void;
     /**
      * Inlines a component: its code goes into a block where its properties are constants. Attribute
      * values are computed before the block, so that the component's own names cannot hide the

package/dist/codegen/components.js

@@ -50,6 +50,10 @@ export class ComponentEmitter extends StyleEmitter {
         const { reactive } = this;
         const [name] = node.names;
         const [value] = node.values;
+        if (node.body && name) {
+            this.derivedBlock(name, node.body.body);
+            return;
+        }
         const sources = reactive && value ? reactive.dependencies(value) : new Set();
         super.statement(sources.size > 0 ? node : { ...node, keyword: 'const' });
         if (!reactive || !name || !value || sources.size === 0)
@@ -57,6 +61,25 @@ export class ComponentEmitter extends StyleEmitter {
         const expression = this.withHoisting(false, () => this.expression(value, ARROW));
         reactive.compute(sources, `${this.name(name.name)} = ${expression};`);
     }
+    /**
+     * `derived summary { ... }`: the block becomes a function that computes the value, called first
+     * and in the updates of what it reads; one that reads no state runs once. The block computes
+     * while the markup is created or updated, so it calls no updates, as the expressions there.
+     */
+    derivedBlock(name, block) {
+        const { reactive } = this;
+        const sources = reactive ? reactive.dependencies(block) : new Set();
+        const [, body] = this.withRendering(this.rendering + 1, () => this.func([], block));
+        const variable = this.name(name.name);
+        if (!reactive || sources.size === 0) {
+            this.line(`const ${variable} = (() => ${body})();`);
+            return;
+        }
+        const compute = `$$compute${upperFirst(name.name)}${this.nextId()}`;
+        this.line(`const ${compute} = () => ${body};`);
+        this.line(`let ${variable} = ${compute}();`);
+        reactive.compute(sources, `${variable} = ${compute}();`);
+    }
     /**
      * An argument of a decorator that reads properties of the component: when they change, it is
      * computed again, and what reads it is updated.
@@ -67,26 +90,13 @@ export class ComponentEmitter extends StyleEmitter {
         const source = reactive?.sources.get(node.names[0].name);
         if (!reactive || !value || !source)
             return;
-        const props = new Set([...reactive.dependencies(value)].filter((s) => s.kind === 'prop'));
+        // Properties, or an argument of a decorator that includes this one, which changes with them.
+        const props = new Set([...reactive.dependencies(value)].filter((each) => each !== source));
         if (props.size === 0)
             return;
         const assignment = `${this.name(source.name)} = ${this.expression(value, ARROW)};`;
         reactive.depend(props, `${assignment}\n${this.indent()}${this.write(source)};`);
     }
-    /**
-     * `mount() { ... }` becomes `$$mount(() => { ... })`. Its body runs later, like a handler: what
-     * it changes updates the markup.
-     */
-    mountStatement(node) {
-        this.inHandler++;
-        try {
-            const [, body] = this.withRendering(0, () => this.func([], node.body));
-            this.line(`$$mount(() => ${this.mountNode ?? 'null'}, () => ${body});`);
-        }
-        finally {
-            this.inHandler--;
-        }
-    }
     /**
      * Inlines a component: its code goes into a block where its properties are constants. Attribute
      * values are computed before the block, so that the component's own names cannot hide the
@@ -101,6 +111,7 @@ export class ComponentEmitter extends StyleEmitter {
             this.line(`// <${name}>`);
         const values = new Map();
         const reactiveProps = new Map();
+        const binders = new Map();
         const rest = attrsParam(component);
         const forwarded = [];
         for (const attribute of node.attributes) {
@@ -108,9 +119,12 @@ export class ComponentEmitter extends StyleEmitter {
                 this.spreadProps(attribute.argument, component, live, values, reactiveProps);
                 continue;
             }
-            const prop = attribute.name.name;
+            const bound = attribute.name.name.startsWith('bind:');
+            const prop = bound ? attribute.name.name.slice('bind:'.length) : attribute.name.name;
             if (prop === 'ref')
                 continue;
+            if (bound)
+                binders.set(prop, this.binder(attribute.value));
             if (rest && !component.params.some((param) => param.name.name === prop)) {
                 forwarded.push(attribute);
                 continue;
@@ -133,8 +147,9 @@ export class ComponentEmitter extends StyleEmitter {
         if (rest)
             values.set(rest.name.name, this.attrsApplier(component, forwarded, live));
         const root = this.rootFor(node);
-        if (isFunction)
-            return this.callComponent(component, values, reactiveProps, live, root?.name);
+        if (isFunction) {
+            return this.callComponent(component, values, reactiveProps, live, root?.name, binders);
+        }
         const result = `$$${lowerFirst(name)}${this.nextId()}`;
         const label = hasEarlyReturn(component) ? `$$body${this.nextId()}` : null;
         const mountNode = hasMount(component) ? `$$mountNode${this.nextId()}` : null;
@@ -153,8 +168,12 @@ export class ComponentEmitter extends StyleEmitter {
             for (const param of component.params) {
                 const value = values.get(param.name.name) ??
                     (param.defaultValue ? this.expression(param.defaultValue, ARROW) : 'null');
-                const keyword = setters.has(param.name.name) ? 'let' : 'const';
-                this.line(`${keyword} ${this.name(param.name.name)} = ${value};`);
+                const name = this.name(param.name.name);
+                const binder = binders.get(param.name.name);
+                const keyword = setters.has(param.name.name) || param.bind ? 'let' : 'const';
+                this.line(`${keyword} ${name} = ${value};`);
+                if (binder)
+                    reactive.sources.get(param.name.name).bound = `${binder}(${name});`;
             }
             this.body(component, result, reactive, { kind: 'inline', setters }, label);
         })))));
@@ -182,7 +201,11 @@ export class ComponentEmitter extends StyleEmitter {
             // A ref to the component created the element at its top: `$$root`, undefined without one.
             const own = this.takesRoot(component) ? ownRoot(component) : null;
             const preset = own && typeof own !== 'string' ? { node: own, name: '$$root', created: false } : null;
-            const params = [this.parameters(component.params, ''), ...(preset ? ['$$root'] : [])]
+            const params = [
+                this.parameters(component.params, ''),
+                ...this.bindersOf(component, reactive),
+                ...(preset ? ['$$root'] : []),
+            ]
                 .filter((each) => each !== '')
                 .join(', ');
             const body = this.withRefs(component, preset, () => this.withStyles(component, result, () => this.inComponent(reactive, mountNode, () => this.block(() => {

package/dist/codegen/control-flow.d.ts

@@ -20,6 +20,8 @@ export declare abstract class ControlFlowEmitter extends ElementEmitter {
      * state go into its update. The block of `<Page />` gets the component, `($$component3) => ...`.
      */
     protected blockCreator(statements: readonly ast.Statement[], parent: Live, loop?: ast.ForInStatement, component?: ast.Identifier): string;
+    /** The key of a list, `with key todo.id`: `(todo) => todo.id`, which its blocks are found by. */
+    private listKey;
     /** A classic `for` loop in live markup: a function that runs it and returns the content. */
     private loopContent;
 }

package/dist/codegen/control-flow.js

@@ -31,7 +31,9 @@ export class ControlFlowEmitter extends ElementEmitter {
             }
             case 'ForInStatement': {
                 const items = this.liveFunction(statement.iterable);
-                call = `$$list(${items}, ${this.blockCreator(statement.body.body, live, statement)})`;
+                const create = this.blockCreator(statement.body.body, live, statement);
+                const key = statement.withKey ? `, ${this.listKey(statement, statement.withKey)}` : '';
+                call = `$$list(${items}, ${create}${key})`;
                 break;
             }
             case 'ForStatement':
@@ -85,20 +87,22 @@ export class ControlFlowEmitter extends ElementEmitter {
      */
     blockCreator(statements, parent, loop, component) {
         const block = new Block(parent);
-        const params = loop
-            ? [loop.value, ...(loop.key ? [loop.key] : [])].map(parameter)
-            : component
-                ? [parameter(component)]
-                : [];
+        const params = loop ? loopParameters(loop) : component ? [parameter(component)] : [];
         return this.withFunction('none', params, () => this.withRendering(this.rendering + 1, () => {
             const paramList = this.params(params);
             const fragment = `$$block${this.nextId()}`;
             const body = this.block(() => this.withScope(declarationsOf(statements), () => {
                 this.line(`const ${fragment} = document.createDocumentFragment();`);
                 this.children(fragment, statements, block);
-                // The block of an item that stays gets the item's new position.
+                // The block of an item that stays gets the item's new position, and with a key the
+                // item itself, which may be another object with the same key.
                 const key = loop?.key && loop.key.name !== '_' ? this.name(loop.key.name) : null;
-                const updates = [...(key ? [`${key} = $$index;`] : []), ...block.statements];
+                const item = loop?.withKey && loop.value.name !== '_' ? this.name(loop.value.name) : null;
+                const updates = [
+                    ...(key ? [`${key} = $$index;`] : []),
+                    ...(item ? [`${item} = $$item;`] : []),
+                    ...block.statements,
+                ];
                 if (updates.length === 0) {
                     this.line(`return [${fragment}];`);
                     return;
@@ -107,11 +111,17 @@ export class ControlFlowEmitter extends ElementEmitter {
                     for (const statement of updates)
                         this.line(indentMore(statement));
                 });
-                this.line(`return [${fragment}, (${key ? '$$index' : ''}) => ${update}];`);
+                const args = item ? '$$index, $$item' : key ? '$$index' : '';
+                this.line(`return [${fragment}, (${args}) => ${update}];`);
             }));
             return `(${paramList}) => ${body}`;
         }));
     }
+    /** The key of a list, `with key todo.id`: `(todo) => todo.id`, which its blocks are found by. */
+    listKey(loop, key) {
+        const params = loopParameters(loop);
+        return this.withFunction('none', params, () => `(${this.params(params)}) => ${this.expression(key, CONDITIONAL)}`);
+    }
     /** A classic `for` loop in live markup: a function that runs it and returns the content. */
     loopContent(statement) {
         return this.withFunction('none', [], () => this.withRendering(this.rendering + 1, () => {
@@ -136,6 +146,10 @@ function returnNumber(value, at) {
     };
     return { kind: 'ReturnStatement', values: [number], start: at.start, end: at.start };
 }
+/** The variables of a loop, `(todo, i)`, as the parameters of its blocks and of its key. */
+function loopParameters(loop) {
+    return [loop.value, ...(loop.key ? [loop.key] : [])].map(parameter);
+}
 /** A loop variable as a parameter of the function that creates the loop's blocks. */
 function parameter(name) {
     return {

package/dist/codegen/control-statements.d.ts

@@ -2,6 +2,13 @@ import type * as ast from '../ast.ts';
 import { SimpleStatementEmitter } from './simple-statements.ts';
 export declare abstract class ControlStatementEmitter extends SimpleStatementEmitter {
     protected ifStatement(node: ast.IfStatement): string;
+    /**
+     * `if const v = f(); v > 0 { }` → `{ const v = f(); if (v > 0) { } }`: a block keeps the
+     * variables of the initializer to the statement, which `emit` writes.
+     */
+    private withInit;
+    /** `outer: for (...)`: the label goes on the loop itself, after what is hoisted before it. */
+    private labeled;
     protected loopBody(body: ast.BlockStatement): string;
     protected forStatement(node: ast.ForStatement): void;
     /** A statement inside a `for` header, without the `;`. */
@@ -20,8 +27,9 @@ export declare abstract class ControlStatementEmitter extends SimpleStatementEmi
      * a name that cannot change.
      */
     private indexLoop;
+    protected switchStatement(node: ast.SwitchStatement): void;
     /** Each `case` ends with an implicit `break`; a case with declarations gets its own block. */
-    protected switchStatement(node: ast.SwitchStatement, discriminant: ast.Expression): void;
+    private valueSwitch;
     /**
      * `select`: $$select gives the index of the case that went on and what it received, and a
      * switch runs the case; a `break` inside it leaves the select, as in Go. `default` is -1.
@@ -31,6 +39,6 @@ export declare abstract class ControlStatementEmitter extends SimpleStatementEmi
      * `switch { case cond: ... }` becomes an if/else chain. A `break` inside it must leave the
      * switch, not an enclosing loop, so then the chain gets a label to break to.
      */
-    protected taglessSwitch(node: ast.SwitchStatement): void;
+    private taglessSwitch;
     protected tryStatement(node: ast.TryStatement): string;
 }

package/dist/codegen/control-statements.js

@@ -1,8 +1,8 @@
 import { isChan } from "../checker/channel.js";
-import { isMap } from "../checker/iterables.js";
-import { typedArrayOf } from "../checker/types.js";
+import { asyncIterated, isMap } from "../checker/iterables.js";
+import { isTopic, typedArrayOf } from "../checker/types.js";
 import { declaredIn } from "../names.js";
-import { containsBreak } from "../walk.js";
+import { containsBreak } from "../breaks.js";
 import { declarationsOf, endsWithJump } from "./analysis.js";
 import { SimpleStatementEmitter } from "./simple-statements.js";
 import { ARROW, BINARY, POSTFIX } from "./syntax.js";
@@ -11,6 +11,9 @@ import { ARROW, BINARY, POSTFIX } from "./syntax.js";
 const FIXED = new Set(['const', 'import', 'loop']);
 export class ControlStatementEmitter extends SimpleStatementEmitter {
     ifStatement(node) {
+        const { init } = node;
+        if (init)
+            return this.withInit(init, () => this.line(this.ifStatement({ ...node, init: null })));
         let text = `if (${this.expression(node.condition, 0)}) ${this.blockStatement(node.consequent)}`;
         if (node.alternate?.kind === 'IfStatement') {
             // The condition of `else if` is evaluated only when the first one is false.
@@ -22,6 +25,20 @@ export class ControlStatementEmitter extends SimpleStatementEmitter {
         }
         return text;
     }
+    /**
+     * `if const v = f(); v > 0 { }` → `{ const v = f(); if (v > 0) { } }`: a block keeps the
+     * variables of the initializer to the statement, which `emit` writes.
+     */
+    withInit(init, emit) {
+        return this.block(() => this.withScope(declarationsOf([init]), () => {
+            this.statement(init);
+            this.withHoisting(true, emit);
+        }));
+    }
+    /** `outer: for (...)`: the label goes on the loop itself, after what is hoisted before it. */
+    labeled(node, text) {
+        return node.label ? `${this.label(node.label)}: ${text}` : text;
+    }
     loopBody(body) {
         return this.withBreakTarget(null, () => this.blockStatement(body));
     }
@@ -37,10 +54,10 @@ export class ControlStatementEmitter extends SimpleStatementEmitter {
                 node.update ? this.simpleStatement(node.update) : '',
             ]);
             if (node.init === null && node.update === null) {
-                this.line(`while (${condition || 'true'}) ${this.loopBody(node.body)}`);
+                this.line(this.labeled(node, `while (${condition || 'true'}) ${this.loopBody(node.body)}`));
                 return;
             }
-            this.line(`for (${init}; ${condition}; ${update}) ${this.loopBody(node.body)}`);
+            this.line(this.labeled(node, `for (${init}; ${condition}; ${update}) ${this.loopBody(node.body)}`));
         });
     }
     /** A statement inside a `for` header, without the `;`. */
@@ -57,7 +74,7 @@ export class ControlStatementEmitter extends SimpleStatementEmitter {
             case 'ExpressionStatement':
                 return this.expression(node.expression, 0);
             case 'SendStatement':
-                return `await $$send(${this.expression(node.channel, ARROW)}, ${this.expression(node.value, ARROW)})`;
+                return this.send(node);
         }
     }
     /**
@@ -72,9 +89,14 @@ export class ControlStatementEmitter extends SimpleStatementEmitter {
             const value = this.name(node.value.name);
             const iterable = this.options.types?.get(node.iterable);
             let head;
-            // A channel gives its values as they come, until it is closed.
-            if (iterable && isChan(iterable)) {
-                this.line(`for await (const ${value} of $$range(${this.expression(node.iterable, ARROW)})) ${this.loopBody(node.body)}`);
+            // An async iterable, such as a stream of Node, gives its values as their Promises do.
+            if (iterable && asyncIterated(iterable) !== null) {
+                this.line(this.labeled(node, `for await (const ${value} of ${this.expression(node.iterable, POSTFIX)}) ${this.loopBody(node.body)}`));
+                return;
+            }
+            // A channel gives its values as they come, until it is closed, and so does a topic.
+            if (iterable && (isChan(iterable) || isTopic(iterable))) {
+                this.line(this.labeled(node, `for await (const ${value} of $$Channel.range(${this.receivedFrom(node.iterable)})) ${this.loopBody(node.body)}`));
                 return;
             }
             // An iterator is a generator function: called, it gives a lazy JS iterator, of pairs if its
@@ -117,7 +139,7 @@ export class ControlStatementEmitter extends SimpleStatementEmitter {
             else {
                 head = `const ${this.pair(node.key, node.value)} of ${this.expression(node.iterable, POSTFIX)}.entries()`;
             }
-            this.line(`for (${head}) ${this.loopBody(node.body)}`);
+            this.line(this.labeled(node, `for (${head}) ${this.loopBody(node.body)}`));
         });
     }
     /** `[i, v]` of a loop over pairs; `_` leaves its place empty. */
@@ -148,10 +170,20 @@ export class ControlStatementEmitter extends SimpleStatementEmitter {
             else
                 this.blockStatements(node.body.body);
         }));
-        this.line(`for (let ${key} = 0${init}; ${key} < ${items}.length; ${key}++) ${body}`);
+        this.line(this.labeled(node, `for (let ${key} = 0${init}; ${key} < ${items}.length; ${key}++) ${body}`));
+    }
+    switchStatement(node) {
+        const { init, discriminant } = node;
+        if (init) {
+            this.line(this.withInit(init, () => this.switchStatement({ ...node, init: null })));
+        }
+        else if (discriminant === null)
+            this.taglessSwitch(node);
+        else
+            this.valueSwitch(node, discriminant);
     }
     /** Each `case` ends with an implicit `break`; a case with declarations gets its own block. */
-    switchStatement(node, discriminant) {
+    valueSwitch(node, discriminant) {
         const head = `switch (${this.expression(discriminant, 0)})`;
         const body = this.withBreakTarget(null, () => this.block(() => {
             node.cases.forEach((switchCase, i) => {
@@ -178,7 +210,7 @@ export class ControlStatementEmitter extends SimpleStatementEmitter {
                 }
             });
         }));
-        this.line(`${head} ${body}`);
+        this.line(this.labeled(node, `${head} ${body}`));
     }
     /**
      * `select`: $$select gives the index of the case that went on and what it received, and a
@@ -189,7 +221,10 @@ export class ControlStatementEmitter extends SimpleStatementEmitter {
             if (operation === null)
                 return [];
             if (operation.kind === 'UnaryExpression') {
-                return [`{ channel: ${this.expression(operation.argument, ARROW)} }`];
+                const zero = this.receivedZero(operation.argument);
+                return [
+                    `{ channel: ${this.receivedFrom(operation.argument)}${zero !== 'null' ? `, zero: ${zero}` : ''} }`,
+                ];
             }
             const channel = this.expression(operation.channel, ARROW);
             return [`{ channel: ${channel}, value: ${this.expression(operation.value, ARROW)} }`];
@@ -197,7 +232,7 @@ export class ControlStatementEmitter extends SimpleStatementEmitter {
         const hasDefault = node.cases.some((selectCase) => selectCase.operation === null);
         let index = 0;
         const select = this.block(() => {
-            this.line(`const [$$case, $$received, $$ok] = await $$select([${operations.join(', ')}], ${hasDefault});`);
+            this.line(`const [$$case, $$received, $$ok] = await $$Channel.select([${operations.join(', ')}], ${hasDefault});`);
             const body = this.withBreakTarget(null, () => this.block(() => {
                 for (const { names, operation, body: statements } of node.cases) {
                     const label = operation === null ? 'default:' : `case ${index++}:`;
@@ -223,7 +258,7 @@ export class ControlStatementEmitter extends SimpleStatementEmitter {
             }));
             this.line(`switch ($$case) ${body}`);
         });
-        this.line(select);
+        this.line(this.labeled(node, select));
     }
     /**
      * `switch { case cond: ... }` becomes an if/else chain. A `break` inside it must leave the
@@ -232,9 +267,11 @@ export class ControlStatementEmitter extends SimpleStatementEmitter {
     taglessSwitch(node) {
         const cases = node.cases.filter((switchCase) => switchCase.tests.length > 0);
         const fallback = node.cases.find((switchCase) => switchCase.tests.length === 0);
-        const label = node.cases.some((switchCase) => containsBreak(switchCase.body))
-            ? `$$switch${++this.labels}`
-            : null;
+        const label = node.label
+            ? this.label(node.label)
+            : node.cases.some((switchCase) => containsBreak(switchCase.body))
+                ? `$$switch${++this.labels}`
+                : null;
         const text = this.withBreakTarget(label, () => {
             const caseBlock = (body) => this.block(() => this.blockStatements(body));
             const branches = cases.map((switchCase) => {

package/dist/codegen/creation.js

@@ -70,11 +70,14 @@ export class CreationEmitter extends AttributeEmitter {
                 const classes = `${value?.value ?? ''} ${scope}`.trim();
                 return { attribute: svg, key, value: JSON.stringify(classes) };
             }
-            const nullable = this.typeOf(value)?.kind !== 'string';
             return this.valueEntry(element, svg, key, value, live, (text) => {
-                return `\`\${${nullable ? `${text} ?? ""` : text}} ${scope}\``;
+                return `\`\${${this.classText(value, text)}} ${scope}\``;
             });
         }
+        if (name === 'class' && value !== null && this.isClassList(value)) {
+            const key = svg ? 'class' : 'className';
+            return this.valueEntry(element, svg, key, value, live, (text) => `$$classes(${text})`);
+        }
         // SVG attributes are set with setAttribute: their properties are objects.
         const property = svg ? null : domProperty(tag, name);
         if (value === null) {

package/dist/codegen/decode.d.ts

@@ -0,0 +1,14 @@
+import type * as ast from '../ast.ts';
+import { CallEmitter } from './calls.ts';
+export declare abstract class DecodeEmitter extends CallEmitter {
+    /** The constants of the object types that decode checks against, by type, in order. */
+    private readonly decodeTypes;
+    /** `$$decodeJson(text, type)` for a string, `$$decode(value, type)` for a value from JS. */
+    protected decode(node: ast.DecodeExpression): string;
+    /** The constants of the object types, for the start of the module. */
+    protected decodeTypeLines(): string[];
+    /** A type as runtime/decode.js has it: `"string"`, `{ array: "number" }`, `$$typeUser`. */
+    private shape;
+    /** The constant of an object type, made the first time it is used. */
+    private objectType;
+}