rooklang 0.3.4 → 0.4.0

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

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