rooklang 0.3.4 → 0.4.1

package/dist/checker/loops.js

@@ -1,4 +1,3 @@
-import { assignedNames } from "../names.js";
 import { BytesChecker } from "./bytes.js";
 import { chanDirection, elementOf, isChan } from "./channel.js";
 import { asyncIterated, isMap, loopEntry } from "./iterables.js";
@@ -78,13 +77,22 @@ export class LoopChecker extends BytesChecker {
             if (node.key)
                 this.declareValue(node.key, 'loop', key);
             this.declareValue(node.value, 'loop', value);
-            this.dropNarrowing(assignedNames(node.body));
+            if (node.withKey)
+                this.checkListKey(node.withKey);
+            this.dropNarrowing(node.body);
             const entry = this.flow;
             this.flow = new Map(entry);
             this.checkBlock(node.body.body);
             this.flow = entry;
         });
     }
+    /** `with key todo.id`: a string or a number, by which the blocks of the list are found again. */
+    checkListKey(key) {
+        const type = this.checkValue(key);
+        if (!isListKey(type)) {
+            this.error(`the key of a list must be a string or a number, not ${typeToString(type)}: e.g. "with key todo.id"`, key);
+        }
+    }
     /**
      * The key and the value of a loop over an iterator: what its `yield` takes. Of two, one variable
      * gets the second, as with a Map; of one, there is no key.
@@ -100,3 +108,20 @@ export class LoopChecker extends BytesChecker {
         return [UNKNOWN, taken[0] ?? UNKNOWN];
     }
 }
+/** A key of a list: a string, a number, a literal of one or a union of them. */
+function isListKey(type) {
+    switch (type.kind) {
+        case 'string':
+        case 'number':
+        case 'bigint':
+        case 'any':
+        case 'unknown':
+            return true;
+        case 'literal':
+            return typeof type.value !== 'boolean';
+        case 'union':
+            return type.types.every(isListKey);
+        default:
+            return false;
+    }
+}

package/dist/checker/markup.js

@@ -4,8 +4,10 @@ import { domProperty, elementType } from "./dom.js";
 import { svgElementType } from "./dom-svg.js";
 import { isContent, isAttributeValue, isUntyped } from "./helpers.js";
 import { OperatorChecker } from "./operators.js";
-import { BOOL, func, STRING, typeToString } from "./types.js";
+import { arrayOf, BOOL, func, nullable, STRING, typeToString } from "./types.js";
 // Markup: elements, their children and attributes, `bind:` and event handlers.
+/** The type of a list of classes, `class={[styles.tab, active ? styles.active : null]}`. */
+const CLASS_LIST = arrayOf(nullable(STRING));
 export class MarkupChecker extends OperatorChecker {
     /** Whether the markup being checked is inside `<svg>`: its elements are SVG then. */
     inSvg = false;
@@ -98,7 +100,17 @@ export class MarkupChecker extends OperatorChecker {
         }
         if (value?.kind === 'EventHandler')
             return;
-        const valueType = value === null ? BOOL : value.kind === 'StringLiteral' ? STRING : this.checkValue(value);
+        const list = name === 'class' && value?.kind === 'ArrayLiteral' ? CLASS_LIST : null;
+        const valueType = value === null
+            ? BOOL
+            : value.kind === 'StringLiteral'
+                ? STRING
+                : this.checkValue(value, list);
+        // `class={[styles.tab, active ? styles.active : null]}`: the classes that are not null.
+        if (name === 'class' && valueType.kind === 'array') {
+            this.expectAssignable(valueType, CLASS_LIST, value, ' for attribute "class"');
+            return;
+        }
         if (name === 'style') {
             if (!isUntyped(valueType) && valueType.kind !== 'string' && valueType.kind !== 'object') {
                 this.error(`style must be a string or an object, not ${typeToString(valueType)}`, attribute);

package/dist/checker/members.js

@@ -16,6 +16,7 @@ export class MemberChecker extends DecoratorMemberChecker {
                 return [this.checkSuperCall(node), false];
             let [callee, shortCircuits] = this.chainPart(node.callee);
             this.checkDecoratorMutation(node);
+            this.checkSharedMutation(node);
             if (isNullable(callee)) {
                 if (node.optional)
                     shortCircuits = true;
@@ -46,7 +47,8 @@ export class MemberChecker extends DecoratorMemberChecker {
             else if (member !== 'any' && member?.abstract && node.object.kind === 'SuperExpression') {
                 this.error(`super.${name} is abstract in ${member.owner?.name ?? 'the base class'}: it has no code to run`, node.property);
             }
-            return [member === 'any' ? ANY : (member?.type ?? UNKNOWN), shortCircuits];
+            const type = member === 'any' ? ANY : (member?.type ?? UNKNOWN);
+            return [this.pathType(node, object, type), shortCircuits];
         }
         const keyed = this.keyedIndex(object, node.index);
         if (keyed)

package/dist/checker/shared-state.d.ts

@@ -0,0 +1,11 @@
+import type * as ast from '../ast.ts';
+import { ImportChecker } from './imports.ts';
+export declare abstract class SharedStateChecker extends ImportChecker {
+    /** `items = []` or `items[0].done = true` in a module that imported `items`. */
+    protected checkSharedWrite(target: ast.Expression): boolean;
+    /** `items.push(x)`: a method that changes state that another module shares. */
+    protected checkSharedMutation(node: ast.CallExpression): void;
+    /** The import that a target writes into, `items` of `items[0].done`, if it is shared state. */
+    private importedShared;
+    private sharedError;
+}

package/dist/checker/shared-state.js

@@ -0,0 +1,37 @@
+import { mayChange } from "../methods.js";
+import { ImportChecker } from "./imports.js";
+// State shared by components: `state items []Item = []` at the top level of a module. Its module
+// changes it anywhere; other modules import it to read, and change it only by calling a function
+// of its module, so that the module keeps its data consistent, as a decorator keeps its state.
+export class SharedStateChecker extends ImportChecker {
+    /** `items = []` or `items[0].done = true` in a module that imported `items`. */
+    checkSharedWrite(target) {
+        const shared = this.importedShared(target);
+        if (shared)
+            this.sharedError(shared, target);
+        return shared !== null;
+    }
+    /** `items.push(x)`: a method that changes state that another module shares. */
+    checkSharedMutation(node) {
+        const { callee } = node;
+        if (callee.kind !== 'MemberExpression')
+            return;
+        const shared = this.importedShared(callee.object);
+        if (shared && mayChange(this.typeOfChecked(callee.object), callee.property.name)) {
+            this.sharedError(shared, node);
+        }
+    }
+    /** The import that a target writes into, `items` of `items[0].done`, if it is shared state. */
+    importedShared(target) {
+        let root = target;
+        while (root.kind === 'MemberExpression' || root.kind === 'IndexExpression')
+            root = root.object;
+        if (root.kind !== 'Identifier')
+            return null;
+        const binding = this.lookupValue(root.name);
+        return binding?.shared ? binding : null;
+    }
+    sharedError(binding, node) {
+        this.error(`"${binding.name}" is state of "${binding.shared}", which is read-only here; change it with a function that "${binding.shared}" exports`, node);
+    }
+}

package/dist/checker/statements.d.ts

@@ -12,10 +12,11 @@ export declare abstract class StatementChecker extends AssignmentChecker {
      */
     protected checkEffect(node: ast.EffectStatement): void;
     /**
-     * `mount() { ... }`: a function that runs once the markup is in the document, like a handler.
-     * It may return the function that cleans up, or nothing.
+     * `mount { ... }`: a function that runs once the markup is in the document, like a handler. It
+     * cleans up with `defer`, as an effect does, so it returns nothing.
      */
     protected checkMount(node: ast.MountStatement): void;
+    private checkDeferring;
     /**
      * `delete scores[name]` removes a key of an object used as a map, `{ [string]: T }`, or a field
      * that may be missing, of type `?T`; values of type `any` are not checked.
@@ -30,4 +31,6 @@ export declare abstract class StatementChecker extends AssignmentChecker {
     private linkError;
     /** The types of the variables of a declaration: the written one, or those of their values. */
     private initializerTypes;
+    /** `derived total number { ... }`: the block runs like the body of a closure and returns the value. */
+    private derivedBlockType;
 }

package/dist/checker/statements.js

@@ -1,8 +1,10 @@
 import { guardedByError } from "./error-results.js";
 import { AssignmentChecker } from "./assignments.js";
+import { placeOf } from "./context.js";
+import { isTerminating } from "./flow.js";
 import { isUntyped, isNumeric, ownStatements } from "./helpers.js";
 import { func, hasZeroValue, isNullable, nonNull, nullable, typeToString, UNKNOWN, } from "./types.js";
-// Statements: declarations of variables, blocks, `mount()`, `effect`. Assignments and `return`
+// Statements: declarations of variables, blocks, `mount`, `effect`. Assignments and `return`
 // are in assignments.ts.
 export class StatementChecker extends AssignmentChecker {
     checkStatement(node) {
@@ -92,30 +94,22 @@ export class StatementChecker extends AssignmentChecker {
      * a handler. It cleans up with `defer`, so it returns nothing.
      */
     checkEffect(node) {
-        for (const statement of ownStatements(node.body)) {
-            if (statement.kind === 'ReturnStatement' && statement.values.length > 0) {
-                this.error('an effect returns nothing; clean up with defer, e.g. defer clearInterval(timer)', statement.values[0]);
-            }
-        }
-        this.checkFunction([], func([], []), null, node.body, { closure: true });
+        this.checkDeferring(node.body, 'an effect');
     }
     /**
-     * `mount() { ... }`: a function that runs once the markup is in the document, like a handler.
-     * It may return the function that cleans up, or nothing.
+     * `mount { ... }`: a function that runs once the markup is in the document, like a handler. It
+     * cleans up with `defer`, as an effect does, so it returns nothing.
      */
     checkMount(node) {
-        const results = this.checkFunction([], func([], []), null, node.body, { closure: true });
-        if (results.length === 0)
-            return;
-        const result = results.length === 1 ? nonNull(results[0]) : null;
-        const cleans = result !== null &&
-            (isUntyped(result) ||
-                result.kind === 'never' ||
-                (result.kind === 'function' && result.required === 0));
-        if (!cleans) {
-            const returned = results.length === 1 ? typeToString(results[0]) : `${results.length} values`;
-            this.error(`mount() returns the function that cleans up, e.g. return () => clearInterval(timer), not ${returned}`, { start: node.start, end: node.start + 'mount'.length });
+        this.checkDeferring(node.body, 'mount');
+    }
+    checkDeferring(body, what) {
+        for (const statement of ownStatements(body)) {
+            if (statement.kind === 'ReturnStatement' && statement.values.length > 0) {
+                this.error(`${what} returns nothing; clean up with defer, e.g. defer clearInterval(timer)`, statement.values[0]);
+            }
         }
+        this.checkFunction([], func([], []), null, body, { closure: true });
     }
     /**
      * `delete scores[name]` removes a key of an object used as a map, `{ [string]: T }`, or a field
@@ -133,6 +127,8 @@ export class StatementChecker extends AssignmentChecker {
                 : null;
         if (target.kind === 'IndexExpression')
             this.checkValue(target.index);
+        // `delete user.boss` makes the field null again.
+        this.forget(target);
         if (isUntyped(object))
             return;
         if (object.kind === 'array') {
@@ -180,7 +176,7 @@ export class StatementChecker extends AssignmentChecker {
                 binding.type = type;
                 const value = values.length === names.length ? values[i] : undefined;
                 if (value && isNullable(type) && !isNullable(this.typeOfChecked(value))) {
-                    this.flow.set(binding, nonNull(type));
+                    this.flow.set(placeOf(binding), nonNull(type));
                 }
             });
             if (node.keyword === 'const' && !declared)
@@ -207,7 +203,10 @@ export class StatementChecker extends AssignmentChecker {
     initializerTypes(node, declared) {
         const { names, values } = node;
         let types;
-        if (values.length === 0) {
+        if (node.body) {
+            types = [this.derivedBlockType(names[0].name, node.body.body, declared)];
+        }
+        else if (values.length === 0) {
             if (declared && !hasZeroValue(declared) && declared.kind !== 'unknown') {
                 const type = typeToString(declared);
                 this.error(`${type} has no zero value: give "${names[0].name}" a value or make it nullable with ${typeToString(nullable(declared))}`, node.type ?? node);
@@ -228,4 +227,34 @@ export class StatementChecker extends AssignmentChecker {
         }
         return types;
     }
+    /** `derived total number { ... }`: the block runs like the body of a closure and returns the value. */
+    derivedBlockType(name, body, declared) {
+        const ends = isTerminating(body);
+        if (!ends) {
+            this.error(`derived "${name}" must return its value at the end of the block, e.g. return total`, {
+                start: body.end - 1,
+                end: body.end,
+            });
+        }
+        const saved = this.derivedBlock;
+        const results = declared ? [declared] : null;
+        this.derivedBlock = name;
+        try {
+            const types = this.checkFunction([], func([], results ?? []), results, body, {
+                closure: true,
+            });
+            if (types.length === 1)
+                return types[0];
+            // A block that does not end with a return is reported above.
+            if (ends) {
+                this.error(types.length === 0
+                    ? `derived "${name}" returns no value: return it, e.g. return total`
+                    : `derived "${name}" is one value, but its block returns ${types.length}`, body);
+            }
+            return UNKNOWN;
+        }
+        finally {
+            this.derivedBlock = saved;
+        }
+    }
 }

package/dist/checker/tagged-unions.d.ts

@@ -0,0 +1,37 @@
+import type * as ast from '../ast.ts';
+import { type Narrowing, type Place } from './context.ts';
+import { ControlFlowChecker } from './control-flow.ts';
+import { type LiteralType, type Member, type Type } from './types.ts';
+type Value = LiteralType['value'];
+export declare abstract class TaggedUnionChecker extends ControlFlowChecker {
+    /** The paths among the checked member expressions, with the types of their fields. */
+    private readonly paths;
+    /** The types of the fields of the paths, before narrowing: what their tags are found in. */
+    private readonly declared;
+    protected isTagOf(place: Place, field: string): boolean;
+    protected narrowable(node: ast.Expression): {
+        place: Place;
+        type: Type;
+    } | undefined;
+    /**
+     * The type of `object.field` read by `node`, which is `type` unless the expression is a path
+     * narrowed here. Getters and methods are not paths: they may give another value each time.
+     */
+    protected pathType(node: ast.MemberExpression, object: Type, type: Type): Type;
+    /** The field `name` of an object or a class instance, unless it is a method or an accessor. */
+    protected dataField(type: Type, name: string): Member | undefined;
+    /** The values of the tag `name` in each member of a union; `null` when `name` is not a tag. */
+    protected tagValues(members: readonly Type[], name: string): Value[][] | null;
+    /** `d.kind == "courier"` narrows `d` too: the members with this tag, or the others. */
+    protected narrow(node: ast.Expression, assumeTrue: boolean): Narrowing;
+    /** `switch d.kind`: in a case the members with its tags, in `default` those of no case. */
+    protected narrowCase(node: ast.SwitchStatement, switchCase: ast.SwitchCase): Narrowing;
+    private narrowTag;
+    /**
+     * `{ kind: "pickup", shop: "Main st." }` where one of several objects is expected: the member
+     * that a tag of the literal chooses, or `null` when no tag chooses one. A tag of no member is
+     * reported, and the literal then gets `UNKNOWN`, so that it is not reported again.
+     */
+    protected taggedMember(node: ast.ObjectLiteral, objects: readonly Type[], union: Type): Type | null;
+}
+export {};

package/dist/checker/tagged-unions.js

@@ -0,0 +1,132 @@
+import { placeOf } from "./context.js";
+import { ControlFlowChecker } from "./control-flow.js";
+import { literalValue, narrowByTag } from "./flow.js";
+import { findClassMember, memberTypeOf, nonNull, typeToString, unionMembers, UNKNOWN, } from "./types.js";
+export class TaggedUnionChecker extends ControlFlowChecker {
+    /** The paths among the checked member expressions, with the types of their fields. */
+    paths = new WeakMap();
+    /** The types of the fields of the paths, before narrowing: what their tags are found in. */
+    declared = new WeakMap();
+    isTagOf(place, field) {
+        const type = place.path === '' ? place.binding.type : this.declared.get(place);
+        return type != null && this.tagValues(unionMembers(nonNull(type)), field) !== null;
+    }
+    narrowable(node) {
+        if (node.kind === 'Identifier') {
+            const binding = this.narrowableBinding(node);
+            if (!binding?.type)
+                return undefined;
+            const place = placeOf(binding);
+            return { place, type: this.flow.get(place) ?? binding.type };
+        }
+        const path = node.kind === 'MemberExpression' ? this.paths.get(node) : undefined;
+        return path && { place: path.place, type: this.flow.get(path.place) ?? path.type };
+    }
+    /**
+     * The type of `object.field` read by `node`, which is `type` unless the expression is a path
+     * narrowed here. Getters and methods are not paths: they may give another value each time.
+     */
+    pathType(node, object, type) {
+        const parent = node.optional ? undefined : this.narrowable(node.object)?.place;
+        const { name } = node.property;
+        if (!parent || !unionMembers(object).every((member) => this.dataField(member, name))) {
+            this.paths.delete(node);
+            return type;
+        }
+        const place = placeOf(parent.binding, parent.path === '' ? name : `${parent.path}.${name}`);
+        this.paths.set(node, { place, type });
+        this.declared.set(place, type);
+        return this.flow.get(place) ?? type;
+    }
+    /** The field `name` of an object or a class instance, unless it is a method or an accessor. */
+    dataField(type, name) {
+        let member;
+        if (type.kind === 'object') {
+            member = type.members.get(name);
+        }
+        else if (type.kind === 'class') {
+            this.ensureClassResolved(type.info);
+            member = findClassMember(type.info, name, false);
+            if (member && type.args)
+                member = { ...member, type: memberTypeOf(type, member) };
+        }
+        return member && !member.method && member.accessor === undefined ? member : undefined;
+    }
+    /** The values of the tag `name` in each member of a union; `null` when `name` is not a tag. */
+    tagValues(members, name) {
+        if (members.length < 2)
+            return null;
+        const tags = [];
+        for (const member of members) {
+            const field = this.dataField(member, name);
+            const types = field ? unionMembers(field.type) : [];
+            if (!types.every((type) => type.kind === 'literal'))
+                return null;
+            if (types.length === 0)
+                return null;
+            tags.push(types.map((type) => type.value));
+        }
+        return tags;
+    }
+    /** `d.kind == "courier"` narrows `d` too: the members with this tag, or the others. */
+    narrow(node, assumeTrue) {
+        const narrowing = super.narrow(node, assumeTrue);
+        if (node.kind !== 'BinaryExpression')
+            return narrowing;
+        if (node.operator !== '==' && node.operator !== '!=')
+            return narrowing;
+        const right = literalValue(node.right);
+        const value = right ?? literalValue(node.left);
+        if (value === undefined)
+            return narrowing;
+        const target = right !== undefined ? node.left : node.right;
+        const equal = (node.operator === '==') === assumeTrue;
+        return [...narrowing, ...this.narrowTag(target, [value], equal)];
+    }
+    /** `switch d.kind`: in a case the members with its tags, in `default` those of no case. */
+    narrowCase(node, switchCase) {
+        const narrowing = super.narrowCase(node, switchCase);
+        if (!node.discriminant)
+            return narrowing;
+        const isDefault = switchCase.tests.length === 0;
+        const tests = isDefault ? node.cases.flatMap((each) => each.tests) : switchCase.tests;
+        const values = tests.map(literalValue);
+        if (!isDefault && values.includes(undefined))
+            return narrowing;
+        const known = values.filter((value) => value !== undefined);
+        return [...narrowing, ...this.narrowTag(node.discriminant, known, !isDefault)];
+    }
+    narrowTag(target, values, equal) {
+        if (target.kind !== 'MemberExpression' || target.optional)
+            return [];
+        const owner = this.narrowable(target.object);
+        const tags = owner && this.tagValues(unionMembers(nonNull(owner.type)), target.property.name);
+        return owner && tags ? [[owner.place, narrowByTag(owner.type, tags, values, equal)]] : [];
+    }
+    /**
+     * `{ kind: "pickup", shop: "Main st." }` where one of several objects is expected: the member
+     * that a tag of the literal chooses, or `null` when no tag chooses one. A tag of no member is
+     * reported, and the literal then gets `UNKNOWN`, so that it is not reported again.
+     */
+    taggedMember(node, objects, union) {
+        for (const property of node.properties) {
+            if (property.kind === 'SpreadElement')
+                continue;
+            const name = property.key.kind === 'Identifier' ? property.key.name : property.key.value;
+            const value = literalValue(property.value);
+            const tags = value === undefined ? null : this.tagValues(objects, name);
+            if (value === undefined || !tags)
+                continue;
+            const chosen = objects.filter((_, i) => tags[i].includes(value));
+            if (chosen.length === 1)
+                return chosen[0];
+            if (chosen.length > 1)
+                continue;
+            const known = [...new Set(tags.flat())].map((each) => JSON.stringify(each));
+            const choices = known.length > 1 ? `${known.slice(0, -1).join(', ')} or ${known.at(-1)}` : known[0];
+            this.error(`${JSON.stringify(value)} is not a kind of ${typeToString(union)}: write ${choices}`, property.value);
+            return UNKNOWN;
+        }
+        return null;
+    }
+}

package/dist/checker/untyped-globals.d.ts

@@ -1 +1,2 @@
 export declare const UNTYPED_GLOBALS: readonly string[];
+export declare const UNTYPED_CLASSES: readonly string[];

package/dist/checker/untyped-globals.js

@@ -32,7 +32,6 @@ export const UNTYPED_GLOBALS = [
     'Response',
     'Request',
     'Headers',
-    'AbortController',
     'fetch',
     'structuredClone',
     'queueMicrotask',
@@ -45,3 +44,6 @@ export const UNTYPED_GLOBALS = [
     'crypto',
     'performance',
 ];
+// Classes that are names of types too, `any` in both: `new AbortController()` and
+// `signal AbortSignal`. TypeScript's lib files replace them as they replace the DOM.
+export const UNTYPED_CLASSES = ['AbortController', 'AbortSignal', 'ImageData'];

package/dist/codegen/attributes.d.ts

@@ -20,6 +20,10 @@ export declare abstract class AttributeEmitter extends UpdateEmitter {
     protected attribute(element: string, tag: string | null, attribute: ast.JsxAttribute | ast.JsxSpreadAttribute, live: Live | null, svg?: boolean, scope?: string | null): void;
     /** The class of an element with the class of its style: `"card rook-card-1x9k2az"`. */
     private scopedClass;
+    /** Whether `class={...}` is a list of classes, `[styles.tab, active ? styles.active : null]`. */
+    protected isClassList(value: ast.Expression): boolean;
+    /** The classes of `class={...}` as a string, before the class of the style is added to them. */
+    protected classText(value: ast.Expression, text: string): string;
     /** Sets the class of an element: `className`, or the attribute of an SVG element. */
     protected scopeClass(element: string, classes: string, svg: boolean): void;
     /** `<app-card item-count={1} />`: the property of a web component of this module, if it has one. */

package/dist/codegen/attributes.js

@@ -3,6 +3,7 @@ import { attributeName } from "../html-tag.js";
 import { SVG_NAMESPACE } from "../svg.js";
 import { eventName, mentions } from "./element-helpers.js";
 import { ARROW } from "./syntax.js";
+import { rootsOf } from "./shared.js";
 import { UpdateEmitter } from "./updates.js";
 // Attributes of elements: properties, setAttribute, styles, `bind:` and event handlers.
 export class AttributeEmitter extends UpdateEmitter {
@@ -46,6 +47,15 @@ export class AttributeEmitter extends UpdateEmitter {
             this.scopedClass(element, value, live, svg, scope);
             return;
         }
+        if (name === 'class' &&
+            value !== null &&
+            value.kind !== 'EventHandler' &&
+            this.isClassList(value)) {
+            this.setLive(live, value, (text) => svg
+                ? `${element}.setAttribute("class", $$classes(${text}));`
+                : `${element}.className = $$classes(${text});`);
+            return;
+        }
         const webProperty = tag === null || svg ? null : this.webComponentProperty(tag, name);
         if (webProperty) {
             this.webComponentAttribute(element, webProperty, value, live);
@@ -102,15 +112,24 @@ export class AttributeEmitter extends UpdateEmitter {
             this.scopeClass(element, `${value?.value ?? ''} ${scope}`.trim(), svg);
         }
         else if (value.kind !== 'EventHandler') {
-            const nullable = this.typeOf(value)?.kind !== 'string';
             this.setLive(live, value, (text) => {
-                const scoped = `\`\${${nullable ? `${text} ?? ""` : text}} ${scope}\``;
+                const scoped = `\`\${${this.classText(value, text)}} ${scope}\``;
                 return svg
                     ? `${element}.setAttribute("class", ${scoped});`
                     : `${element}.className = ${scoped};`;
             });
         }
     }
+    /** Whether `class={...}` is a list of classes, `[styles.tab, active ? styles.active : null]`. */
+    isClassList(value) {
+        return value.kind === 'ArrayLiteral' || this.typeOf(value)?.kind === 'array';
+    }
+    /** The classes of `class={...}` as a string, before the class of the style is added to them. */
+    classText(value, text) {
+        if (this.isClassList(value))
+            return `$$classes(${text})`;
+        return this.typeOf(value)?.kind === 'string' ? text : `${text} ?? ""`;
+    }
     /** Sets the class of an element: `className`, or the attribute of an SVG element. */
     scopeClass(element, classes, svg) {
         const text = JSON.stringify(classes);
@@ -178,6 +197,9 @@ export class AttributeEmitter extends UpdateEmitter {
         try {
             const body = this.block(() => {
                 this.line(`${target} = ${current};`);
+                for (const name of rootsOf(value, this.shared)) {
+                    this.line(`$$changed(${this.shared.listeners.get(name)});`);
+                }
                 for (const source of written) {
                     // The element already shows what was entered: its own update is skipped.
                     const own = live && dependsOn.has(source) ? live.ownIndex(source) : null;

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

@@ -25,9 +25,14 @@ export interface EarlyReturns {
 }
 /** Marks where the setters of an inlined component with early returns go: before any return. */
 export declare const SETTERS: string;
+/**
+ * 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 declare const LISTEN: string;
 /** `f(a, undefined, undefined)` → `f(a)`: missing arguments are undefined anyway. */
 export declare function withoutTrailingUndefined(args: string[]): string[];
-/** Whether a component has `mount() { ... }`. */
+/** Whether a component has `mount { ... }`. */
 export declare function hasMount(component: ast.ComponentDeclaration): boolean;
 /** Whether a component returns before the end of its body. */
 export declare function hasEarlyReturn(component: ast.ComponentDeclaration): boolean;

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[];