rooklang 0.3.3 → 0.4.0

package/dist/codegen/decode.js

@@ -0,0 +1,93 @@
+import { isText } from "../checker/json.js";
+import { memberNames, typeToString } from "../checker/types.js";
+import { CallEmitter } from "./calls.js";
+import { ARROW } from "./syntax.js";
+// `decode<User>(body)`: the type, which the checker found, becomes data that the runtime checks the
+// value against (runtime/decode.js). An object type is a constant of the module, `$$typeUser`,
+// written before its code (js.ts), so that types that refer to themselves or each other can do so,
+// and the value of each call is only its name: `$$decodeJson(body, $$typeUser)`.
+const IDENTIFIER = /^[A-Za-z_$][\w$]*$/;
+export class DecodeEmitter extends CallEmitter {
+    /** The constants of the object types that decode checks against, by type, in order. */
+    decodeTypes = new Map();
+    /** `$$decodeJson(text, type)` for a string, `$$decode(value, type)` for a value from JS. */
+    decode(node) {
+        const argument = this.expression(node.argument, ARROW);
+        const result = this.options.types?.get(node);
+        const type = result?.kind === 'tuple' ? result.types[0] : undefined;
+        // Without the types of the checker nothing is checked (runtime/decode.js).
+        if (type === undefined)
+            return `$$decode(${argument}, null)`;
+        const given = this.options.types?.get(node.argument);
+        const decode = given !== undefined && isText(given) ? '$$decodeJson' : '$$decode';
+        return `${decode}(${argument}, ${this.shape(type)})`;
+    }
+    /** The constants of the object types, for the start of the module. */
+    decodeTypeLines() {
+        return [...this.decodeTypes.values()].flatMap(({ lines }) => lines);
+    }
+    /** A type as runtime/decode.js has it: `"string"`, `{ array: "number" }`, `$$typeUser`. */
+    shape(type) {
+        switch (type.kind) {
+            case 'number':
+            case 'string':
+            case 'bool':
+            case 'any':
+                return `"${type.kind}"`;
+            case 'null':
+                return '{ literal: [null] }';
+            case 'literal':
+                return `{ literal: [${JSON.stringify(type.value)}] }`;
+            case 'nullable':
+                return `{ nullable: ${this.shape(type.type)} }`;
+            case 'array':
+                return `{ array: ${this.shape(type.element)} }`;
+            case 'union': {
+                // The literals of a union are one list, as `"admin" | "user"` reads.
+                const literals = type.types.flatMap((each) => each.kind === 'literal' ? [each.value] : []);
+                const others = type.types.filter((each) => each.kind !== 'literal');
+                const shapes = [
+                    ...(literals.length > 0 ? [`{ literal: [${literals.map(json).join(', ')}] }`] : []),
+                    ...others.map((each) => this.shape(each)),
+                ];
+                return shapes.length === 1 ? shapes[0] : `{ union: [${shapes.join(', ')}] }`;
+            }
+            case 'object':
+                return type.index && [...memberNames(type.members)].length === 0
+                    ? `{ record: ${this.shape(type.index)} }`
+                    : this.objectType(type);
+            // The checker lets no other type through.
+            default:
+                return '"any"';
+        }
+    }
+    /** The constant of an object type, made the first time it is used. */
+    objectType(type) {
+        const known = this.decodeTypes.get(type);
+        if (known)
+            return known.name;
+        // `$$type` itself is the function of the runtime that makes them.
+        const written = type.instanceOf?.template.name ?? type.name ?? 'Object';
+        const base = `$$type${written.replace(/[^\w$]/g, '')}`;
+        const taken = new Set([...this.decodeTypes.values()].map(({ name }) => name));
+        let name = base;
+        for (let i = 2; taken.has(name); i++)
+            name = `${base}${i}`;
+        const entry = { name, lines: [] };
+        // Registered before its fields, which may refer to it.
+        this.decodeTypes.set(type, entry);
+        const fields = [...memberNames(type.members)].flatMap((field) => {
+            const member = type.members.get(field);
+            const key = IDENTIFIER.test(field) ? field : json(field);
+            return member ? [`  ${key}: ${this.shape(member.type)},`] : [];
+        });
+        entry.lines =
+            fields.length === 0
+                ? [`const ${name} = $$type(${json(typeToString(type))}, () => ({}));`]
+                : [`const ${name} = $$type(${json(typeToString(type))}, () => ({`, ...fields, '}));'];
+        return name;
+    }
+}
+function json(value) {
+    return JSON.stringify(value);
+}

package/dist/codegen/early-returns.d.ts

@@ -38,9 +38,10 @@ export declare abstract class EarlyReturnEmitter extends ComponentValueEmitter {
     protected declaredLive(node: ast.ElementExpression): Live | null;
     /**
      * After the markup of a component is created, before anything inserts it: the first node for
-     * `mount()` (a fragment is empty once inserted, so its first child is taken now), the CSS
-     * variables of its style, and the first run of the effects, whose cleanups also run when the
-     * component is removed.
+     * `mount` (a fragment is empty once inserted, so its first child is taken now), the CSS
+     * variables of its style, the first run of the effects, whose cleanups also run when the
+     * component is removed, and the updates that listen to the state of the module it reads. Those
+     * are kept only if something depends on the state, which is known at the end (resolveMarkers).
      */
     protected markupCreated(result: string): void;
     /** Declarations that every return needs, written before the statements of the body. */

package/dist/codegen/early-returns.js

@@ -4,7 +4,7 @@ import { effectReads } from "./mutations.js";
 import { Block, updatesOf } from "./reactive.js";
 import { ARROW, indentMore } from "./syntax.js";
 import { inlinesUpdate, needed } from "./updates.js";
-import { SETTERS } from "./component-helpers.js";
+import { LISTEN, SETTERS } from "./component-helpers.js";
 export class EarlyReturnEmitter extends ComponentValueEmitter {
     /**
      * The effects of the component being written. One after an early return may not be created, so
@@ -81,9 +81,10 @@ export class EarlyReturnEmitter extends ComponentValueEmitter {
     }
     /**
      * After the markup of a component is created, before anything inserts it: the first node for
-     * `mount()` (a fragment is empty once inserted, so its first child is taken now), the CSS
-     * variables of its style, and the first run of the effects, whose cleanups also run when the
-     * component is removed.
+     * `mount` (a fragment is empty once inserted, so its first child is taken now), the CSS
+     * variables of its style, the first run of the effects, whose cleanups also run when the
+     * component is removed, and the updates that listen to the state of the module it reads. Those
+     * are kept only if something depends on the state, which is known at the end (resolveMarkers).
      */
     markupCreated(result) {
         if (this.mountNode) {
@@ -96,6 +97,12 @@ export class EarlyReturnEmitter extends ComponentValueEmitter {
                 continue;
             this.line(`$$onRemove(() => $$runDeferred(${effect.cleanups}.splice(0)));`);
         }
+        for (const source of this.reactive?.sources.values() ?? []) {
+            if (source.kind !== 'shared')
+                continue;
+            const listeners = this.shared.listeners.get(source.name);
+            this.line(`${LISTEN}${source.id}${LISTEN}$$watch(${listeners}, ${source.update});`);
+        }
     }
     /** Declarations that every return needs, written before the statements of the body. */
     prepareEarlyReturns(result, reactive, ending, label, component) {
@@ -182,13 +189,18 @@ export class EarlyReturnEmitter extends ComponentValueEmitter {
         let functions = 0;
         for (const source of reactive.sources.values()) {
             const called = source.writes.some((write) => needed(source, write).length > 0);
-            if (source.kind !== 'state' || !called || inlinesUpdate(source))
+            // State of the module: the changes are elsewhere, and they run the update it listens with.
+            const listened = source.kind === 'shared' && updatesOf(source).length > 0;
+            if (!listened && (source.kind !== 'state' || !called || inlinesUpdate(source)))
                 continue;
             const body = this.block(() => {
                 // Derived values are computed again even before the markup exists, which a function of
                 // the body may change the state before.
                 for (const computation of source.computations)
                     this.line(indentMore(computation));
+                // The parent gets the value of a bound property even before the markup exists.
+                if (source.bound)
+                    this.line(source.bound);
                 if (source.writes.some((write) => write.early))
                     this.line(`if (!${result}) return;`);
                 for (const dependent of source.dependents)

package/dist/codegen/emitter.d.ts

@@ -1,42 +1,9 @@
 import type * as ast from '../ast.ts';
-import type { Type } from '../checker/types.ts';
-import { type DecoratorSource } from '../decorators.ts';
-import type { InlinePackage } from '../inline-packages.ts';
-import { type ImportedComponent, type LocalizedPackage } from './imported.ts';
+import { type LocalizedPackage } from './imported.ts';
 import type { Root } from '../refs.ts';
-import type { StyleModule } from '../style-modules.ts';
 import type { BindingKind } from './analysis.ts';
-import type { RuntimeMode } from './runtime.ts';
-export interface JsOptions {
-    /** The Rook source, used to keep the blank lines between statements. */
-    source: string;
-    /** Replace `.rk` with `.js` in relative import paths, for output written next to the sources. */
-    rewriteImports: boolean;
-    /** Types from the checker, when it ran; without them the generated code is more general. */
-    types?: WeakMap<ast.Expression, Type> | undefined;
-    /** Decorators imported from other modules, by name: their code is inlined here. */
-    decorators?: ReadonlyMap<string, ImportedDecorator> | undefined;
-    /** Components imported from other modules, by name: called, or inlined when they are small. */
-    components?: ReadonlyMap<string, ImportedComponent> | undefined;
-    /** Components of the module that become functions, since inlining them adds too many lines. */
-    functions?: ReadonlySet<string> | undefined;
-    /** The CSS modules the module imports, by their paths as written. */
-    styleModules?: ReadonlyMap<string, StyleModule> | undefined;
-    /** For `go`: where the worker module is (`./app.worker.js`), or in it, the functions it runs. */
-    goroutines?: {
-        workerUrl: string;
-    } | {
-        targets: readonly string[];
-    } | undefined;
-    /** How the module gets the runtime it uses: imported, by default, or in it (runtime.ts). */
-    runtime?: RuntimeMode | undefined;
-}
-/** A decorator of another module, with the types of the expressions of that module. */
-export interface ImportedDecorator extends DecoratorSource {
-    types: WeakMap<ast.Expression, Type> | null;
-    /** The components of that module its code uses, which go with it into the components here. */
-    inline: InlinePackage | null;
-}
+import type { JsOptions } from './options.ts';
+import { type SharedState } from './shared.ts';
 /** How a function implements its `defer` statements. */
 export type DeferMode = 'none' | 'try' | 'stack' | 'effect';
 interface FunctionContext {
@@ -54,15 +21,18 @@ interface FunctionContext {
  * The base of the JS generator: the output buffer, scopes of declared names and the state of the
  * current function. The generator is split into layers, each adding to the previous one:
  *
- *     Emitter → ExpressionEmitter → CallEmitter → SimpleStatementEmitter → ControlStatementEmitter
- *       → ParallelLoopEmitter → StatementEmitter → UpdateEmitter → AttributeEmitter
- *       → CreationEmitter → ElementEmitter → ControlFlowEmitter → ComponentPropsEmitter
- *       → ComponentValueEmitter → EarlyReturnEmitter → RefEmitter
+ *     Emitter → ExpressionEmitter → CallEmitter → DecodeEmitter → TryEmitter
+ *       → SimpleStatementEmitter → ControlStatementEmitter → ParallelLoopEmitter
+ *       → StatementEmitter → UpdateEmitter → AttributeEmitter → CreationEmitter → ElementEmitter
+ *       → ControlFlowEmitter → ComponentPropsEmitter → ComponentValueEmitter
+ *       → EarlyReturnEmitter → RefEmitter
  *       → StyleEmitter → ComponentEmitter → WebComponentEmitter → FunctionEmitter → JsGenerator
  */
 export declare abstract class Emitter {
     protected readonly program: ast.Program;
     protected readonly options: JsOptions;
+    /** The state of the module that its components share, and that of other modules it reads. */
+    protected readonly shared: SharedState;
     protected lines: string[];
     private level;
     private readonly scopes;
@@ -100,7 +70,7 @@ export declare abstract class Emitter {
     /** The decorators that components of the module apply, by name. */
     protected readonly appliedDecorators: Set<string>;
     /** Copies of the code of other modules: their positions are in the sources of those. */
-    private readonly foreign;
+    protected readonly foreign: WeakSet<ast.Node>;
     /** Components of other modules inlined here, by name, with what their packages bring. */
     protected readonly inlinedImports: Map<string, LocalizedPackage>;
     /** The components that decorators of other modules bring, by the names of the decorators. */
@@ -123,6 +93,8 @@ export declare abstract class Emitter {
     protected lookup(name: string): BindingKind | undefined;
     /** The JS name for a Rook name. */
     protected name(name: string): string;
+    /** Labels are names of their own in JS, which cannot be reserved words either. */
+    protected label(name: ast.Identifier): string;
     protected params(params: ast.Parameter[]): string;
     protected withFunction<T>(mode: DeferMode, params: ast.Parameter[], emit: () => T): T;
     protected withHoisting<T>(hoist: boolean, emit: () => T): T;

package/dist/codegen/emitter.js

@@ -4,20 +4,24 @@ import { localize } from "./imported.js";
 import { assignedNames, collectValueNames } from "../names.js";
 import { recursiveComponents } from "../recursion.js";
 import { forEachChild } from "../walk.js";
+import { sharedState } from "./shared.js";
 import { JS_RESERVED, JS_UNDECLARABLE } from "./syntax.js";
 /**
  * The base of the JS generator: the output buffer, scopes of declared names and the state of the
  * current function. The generator is split into layers, each adding to the previous one:
  *
- *     Emitter → ExpressionEmitter → CallEmitter → SimpleStatementEmitter → ControlStatementEmitter
- *       → ParallelLoopEmitter → StatementEmitter → UpdateEmitter → AttributeEmitter
- *       → CreationEmitter → ElementEmitter → ControlFlowEmitter → ComponentPropsEmitter
- *       → ComponentValueEmitter → EarlyReturnEmitter → RefEmitter
+ *     Emitter → ExpressionEmitter → CallEmitter → DecodeEmitter → TryEmitter
+ *       → SimpleStatementEmitter → ControlStatementEmitter → ParallelLoopEmitter
+ *       → StatementEmitter → UpdateEmitter → AttributeEmitter → CreationEmitter → ElementEmitter
+ *       → ControlFlowEmitter → ComponentPropsEmitter → ComponentValueEmitter
+ *       → EarlyReturnEmitter → RefEmitter
  *       → StyleEmitter → ComponentEmitter → WebComponentEmitter → FunctionEmitter → JsGenerator
  */
 export class Emitter {
     program;
     options;
+    /** The state of the module that its components share, and that of other modules it reads. */
+    shared;
     lines = [];
     level = 0;
     scopes = [];
@@ -67,16 +71,27 @@ export class Emitter {
     constructor(program, options) {
         this.program = program;
         this.options = options;
+        this.shared = sharedState(program, options.shared);
         const decorators = new Map(options.decorators);
         const imported = [...(options.decorators?.values() ?? [])];
         for (const statement of program.body) {
             if (statement.kind === 'DecoratorDeclaration') {
                 decorators.set(statement.name.name, { node: statement, moduleNames: [] });
             }
-            else if (statement.kind === 'ComponentDeclaration') {
-                for (const use of statement.decorators)
-                    this.appliedDecorators.add(use.name.name);
-            }
+        }
+        // Those that the applied ones include are applied too.
+        const apply = (name) => {
+            if (this.appliedDecorators.has(name))
+                return;
+            this.appliedDecorators.add(name);
+            for (const use of decorators.get(name)?.node.includes ?? [])
+                apply(use.name.name);
+        };
+        for (const statement of program.body) {
+            if (statement.kind !== 'ComponentDeclaration')
+                continue;
+            for (const use of statement.decorators)
+                apply(use.name.name);
         }
         const originals = new WeakSet();
         const collect = (node) => {
@@ -250,6 +265,10 @@ export class Emitter {
         const rename = JS_RESERVED.has(name) || (JS_UNDECLARABLE.has(name) && this.lookup(name) !== undefined);
         return rename ? `${name}$` : name;
     }
+    /** Labels are names of their own in JS, which cannot be reserved words either. */
+    label(name) {
+        return JS_RESERVED.has(name.name) ? `${name.name}$` : name.name;
+    }
     params(params) {
         // Several `_` parameters would be duplicate names in JS.
         const blanks = params.filter((param) => param.name.name === '_').length;

package/dist/codegen/expressions.d.ts

@@ -21,6 +21,15 @@ export declare abstract class ExpressionEmitter extends Emitter {
     protected abstract chan(node: ast.ChanExpression): string;
     protected abstract streamChan(node: ast.StreamChanExpression): string;
     protected abstract queue(node: ast.QueueExpression): string;
+    protected abstract topic(node: ast.TopicExpression): string;
+    /** `go f(x)`; implemented by CallEmitter. */
+    protected abstract go(node: ast.GoExpression): string;
+    /** `decode<T>(x)`; implemented by DecodeEmitter. */
+    protected abstract decode(node: ast.DecodeExpression): string;
+    /** `try x`, with the precedence of its code; implemented by TryEmitter. */
+    protected abstract tryValue(node: ast.TryExpression): [string, number];
+    /** `<-x` without its `await`; implemented by CallEmitter. */
+    protected abstract receive(node: ast.Expression, withOk: boolean): string;
     /** `<-ch` that gives `[value, ok]`, in `v, ok = <-ch`. */
     protected readonly commaOk: WeakSet<ast.Expression>;
     /** `items[i]` in a part of `go for`, which is `items[$$i]` there (parallel.ts). */

package/dist/codegen/expressions.js

@@ -1,5 +1,4 @@
 import { decoratedName } from "../decorators.js";
-import { goCaptures, goParams, goTarget } from "../goroutines.js";
 import { isIterator, usesThis } from "../iterators.js";
 import { containsElement, startsWithObjectLiteral } from "./analysis.js";
 import { Emitter } from "./emitter.js";
@@ -59,8 +58,9 @@ export class ExpressionEmitter extends Emitter {
                     return [this.functionNames.get(component) ?? `$$${component.name.name}`, PRIMARY];
                 }
                 // `close(ch)` and the like are predeclared; JS has a `close` of its own, the window's.
-                if (PREDECLARED.has(node.name) && this.lookup(node.name) === undefined) {
-                    return [`$$${node.name}`, PRIMARY];
+                const predeclared = PREDECLARED.get(node.name);
+                if (predeclared !== undefined && this.lookup(node.name) === undefined) {
+                    return [predeclared, PRIMARY];
                 }
                 // The predeclared `error` used as a value is JS's `Error`, which also works without `new`.
                 return [this.isBuiltinError(node) ? 'Error' : this.name(node.name), PRIMARY];
@@ -69,6 +69,8 @@ export class ExpressionEmitter extends Emitter {
             case 'BigIntLiteral':
             case 'StringLiteral':
                 return [node.raw, PRIMARY];
+            case 'RegExpLiteral':
+                return [`/${node.pattern}/${node.flags}`, PRIMARY];
             case 'TemplateLiteral':
                 return [this.template(node), PRIMARY];
             case 'BooleanLiteral':
@@ -78,8 +80,6 @@ export class ExpressionEmitter extends Emitter {
             // The member is a variable of the component's code: see decorate().
             case 'DecoratorMember':
                 return [decoratedName(node.decorator.name, node.member.name), PRIMARY];
-            case 'DecoratorGet':
-                return [decoratedName(node.target.decorator.name, node.target.member.name), PRIMARY];
             case 'ThisExpression':
                 return ['this', PRIMARY];
             // `as` is only for the checker.
@@ -112,23 +112,14 @@ export class ExpressionEmitter extends Emitter {
                 return [this.streamChan(node), POSTFIX];
             case 'QueueExpression':
                 return [this.queue(node), POSTFIX];
-            // The worker module has the function under the same name, a literal under the name given to
-            // it, after the local names it uses; the arguments are copied there. In the worker module a
-            // literal runs in the same worker, with copies of those names as its first parameters.
-            case 'GoExpression': {
-                const { callee } = node.call;
-                const literal = callee.kind === 'FuncExpression' ? callee : null;
-                const captured = literal ? goCaptures(this.program, node) : [];
-                const args = [
-                    ...captured.map((name) => this.name(name)),
-                    this.elements(node.call.arguments),
-                ];
-                // Without type checking, a callee that is neither fails when the call runs.
-                const fn = literal && this.inWorker
-                    ? this.expression({ ...literal, params: [...goParams(literal, captured), ...literal.params] }, ARROW)
-                    : JSON.stringify(goTarget(this.program, node));
-                return [`$$go(${fn}, [${args.filter((arg) => arg !== '').join(', ')}])`, POSTFIX];
-            }
+            case 'TopicExpression':
+                return [this.topic(node), POSTFIX];
+            case 'GoExpression':
+                return [this.go(node), POSTFIX];
+            case 'DecodeExpression':
+                return [this.decode(node), POSTFIX];
+            case 'TryExpression':
+                return this.tryValue(node);
             case 'UnaryExpression':
                 return [this.unary(node), UNARY];
             case 'BinaryExpression':
@@ -221,10 +212,8 @@ export class ExpressionEmitter extends Emitter {
         });
     }
     unary(node) {
-        if (node.operator === '<-') {
-            const channel = this.expression(node.argument, ARROW);
-            return `await $$receive(${channel}${this.commaOk.has(node) ? ', true' : ''})`;
-        }
+        if (node.operator === '<-')
+            return `await ${this.receive(node.argument, this.commaOk.has(node))}`;
         const argument = this.expression(node.argument, UNARY);
         if (node.operator === 'typeof' || node.operator === 'await') {
             return `${node.operator} ${argument}`;

package/dist/codegen/functions.d.ts

@@ -10,7 +10,17 @@ export declare abstract class FunctionEmitter extends WebComponentEmitter {
      * it runs again, and when `{if}`, `{switch}` or `{for}` removes the component.
      */
     protected effectStatement(node: ast.EffectStatement): void;
-    private effectBody;
+    /**
+     * `mount { ... }` becomes `$$mount(() => node, () => { ... })`. Its body runs later, like a
+     * handler: what it changes updates the markup. What it defers goes into a list that the runtime
+     * runs when `{if}`, `{switch}` or `{for}` removes the component.
+     */
+    protected mountStatement(node: ast.MountStatement): void;
+    /**
+     * The body of an effect or of `mount`, whose `defer`s put their calls into `cleanups`. An effect
+     * that runs again first runs what it deferred before.
+     */
+    private deferringBody;
     /** A `defer` in 'stack' and 'effect' modes; in 'try' mode statementsWithDefers handles them. */
     protected deferStatement(node: ast.DeferStatement): void;
     /** Statements of a body whose `defer`s are all at its top level: one try/finally per `defer`. */

package/dist/codegen/functions.js

@@ -46,7 +46,7 @@ export class FunctionEmitter extends WebComponentEmitter {
         const cleanups = findDefers(node.body).length > 0 ? `$$cleanups${id}` : null;
         this.inHandler++;
         try {
-            const body = this.withRendering(0, () => cleanups === null ? this.func([], node.body)[1] : this.effectBody(node.body, cleanups));
+            const body = this.withRendering(0, () => cleanups === null ? this.func([], node.body)[1] : this.deferringBody(node.body, cleanups));
             if (cleanups !== null)
                 this.line(`const ${cleanups} = [];`);
             this.line(`const ${name} = () => ${body};`);
@@ -56,11 +56,39 @@ export class FunctionEmitter extends WebComponentEmitter {
         }
         this.addEffect({ name, node, cleanups });
     }
-    effectBody(body, cleanups) {
+    /**
+     * `mount { ... }` becomes `$$mount(() => node, () => { ... })`. Its body runs later, like a
+     * handler: what it changes updates the markup. What it defers goes into a list that the runtime
+     * runs when `{if}`, `{switch}` or `{for}` removes the component.
+     */
+    mountStatement(node) {
+        const cleanups = findDefers(node.body).length > 0 ? `$$cleanups${this.nextId()}` : null;
+        this.inHandler++;
+        try {
+            const body = this.withRendering(0, () => cleanups === null
+                ? this.func([], node.body)[1]
+                : this.deferringBody(node.body, cleanups, false));
+            const args = [`() => ${this.mountNode ?? 'null'}`, `() => ${body}`];
+            if (cleanups !== null) {
+                this.line(`const ${cleanups} = [];`);
+                args.push(cleanups);
+            }
+            this.line(`$$mount(${args.join(', ')});`);
+        }
+        finally {
+            this.inHandler--;
+        }
+    }
+    /**
+     * The body of an effect or of `mount`, whose `defer`s put their calls into `cleanups`. An effect
+     * that runs again first runs what it deferred before.
+     */
+    deferringBody(body, cleanups, again = true) {
         return this.withFunction('effect', [], () => {
             this.fn.deferList = cleanups;
             return this.block(() => this.withScope(declarationsOf(body.body), () => {
-                this.line(`$$runDeferred(${cleanups}.splice(0));`);
+                if (again)
+                    this.line(`$$runDeferred(${cleanups}.splice(0));`);
                 this.statements(body.body);
             }));
         });

package/dist/codegen/js.d.ts

@@ -1,6 +1,6 @@
 import type * as ast from '../ast.ts';
-import type { JsOptions } from './emitter.ts';
-export type { JsOptions } from './emitter.ts';
+import type { JsOptions } from './options.ts';
+export type { JsOptions } from './options.ts';
 /** A component whose inlined copies add more lines than this to its module becomes a function. */
 export declare const INLINE_LIMIT = 100;
 /**

package/dist/codegen/js.js

@@ -62,12 +62,14 @@ class JsGenerator extends FunctionEmitter {
         // What is the module's own: its `go`, and the CSS of its components for their shadow roots.
         const own = [
             ...(/(?<![.\w$])\$\$go(?![\w$])/.test(rest.join('\n'))
-                ? moduleGo(inWorker ? null : (goroutines?.workerUrl ?? ''))
+                ? moduleGo(inWorker ? null : (goroutines?.workerUrl ?? ''), goroutines && 'nodeLoader' in goroutines ? goroutines.nodeLoader : undefined)
                 : []),
             ...(styles.length > 0 ? ['const $$styles = [];'] : []),
         ];
+        // The types that decode checks against, before the code that may decode at the top level.
+        const types = this.decodeTypeLines();
         const mode = this.options.runtime ?? 'import';
-        const runtime = runtimeCode(runtimeNames([...own, ...styles, ...rest].join('\n')), mode);
+        const runtime = runtimeCode(runtimeNames([...own, ...types, ...styles, ...rest].join('\n')), mode);
         if (runtime.length === 0 && own.length === 0 && styles.length === 0) {
             return this.lines.length === 0 ? '' : `${this.lines.join('\n')}\n`;
         }
@@ -79,6 +81,7 @@ class JsGenerator extends FunctionEmitter {
             mode === 'import' ? [...head, ...runtime] : head,
             mode === 'inline' ? runtime : [],
             own,
+            types,
             styles,
             rest,
         ].filter((section) => section.length > 0);

package/dist/codegen/live.d.ts

@@ -0,0 +1,60 @@
+import type * as ast from '../ast.ts';
+/** What markup can depend on: a `state` variable, or a property that gets the parent's state. */
+export interface Source {
+    /** Unique in the module; marks the places that change the source in the generated code. */
+    readonly id: number;
+    readonly name: string;
+    /** `shared` is state of the module, which the component reads and listens to. */
+    readonly kind: 'state' | 'prop' | 'shared';
+    /** The function that brings dependent nodes up to date, e.g. `$$updateCount3`. */
+    readonly update: string;
+    /**
+     * Statements that compute again the `derived` values that read it: `double = count * 2`. They
+     * run first, also before the markup exists, so that the values are right whenever they are read.
+     */
+    readonly computations: string[];
+    /** Statements that bring the nodes depending on it up to date. */
+    readonly dependents: string[];
+    /** Places that change it. */
+    readonly writes: Write[];
+    /**
+     * A bound property, `bind active string`: the call that gives the parent its new value,
+     * `$$bindActive?.(active);`. Places that change it make the call; the parent setting it does not.
+     */
+    bound: string | null;
+}
+export interface Write {
+    /** Whether it may run before the markup exists: in a function of the body, not in a handler. */
+    early: boolean;
+    /** A dependent it does not need: `bind:` does not update its own element. */
+    skip: number | null;
+}
+/** Everything a change of the source runs: the computations, then the updates of the nodes. */
+export declare function updatesOf(source: Source): string[];
+/**
+ * Where the updates of live markup go: the update functions of a component's state, or the update
+ * of a block of `{if ...}` / `{for ...}`.
+ */
+export interface Live {
+    /** Sources whose values an expression reads. */
+    dependencies(node: ast.Node): Set<Source>;
+    /** Adds a statement that brings a part of the markup up to date when the sources change. */
+    depend(sources: ReadonlySet<Source>, statement: string): void;
+    /** The index that the next statement for a source gets, for `bind:` to skip its own update. */
+    ownIndex(source: Source): number | null;
+}
+/**
+ * A block of markup control flow: a branch of `{if ...}` or the content for one item of
+ * `{for ...}`. It is created again when needed, so its updates go into a function of its own,
+ * which runs when any source that the block reads changes.
+ */
+export declare class Block implements Live {
+    readonly statements: string[];
+    /** Sources that any statement depends on. */
+    readonly sources: Set<Source>;
+    private readonly parent;
+    constructor(parent: Live);
+    dependencies(node: ast.Node): Set<Source>;
+    depend(sources: ReadonlySet<Source>, statement: string): void;
+    ownIndex(): null;
+}

package/dist/codegen/live.js

@@ -0,0 +1,29 @@
+/** Everything a change of the source runs: the computations, then the updates of the nodes. */
+export function updatesOf(source) {
+    return [...source.computations, ...source.dependents];
+}
+/**
+ * A block of markup control flow: a branch of `{if ...}` or the content for one item of
+ * `{for ...}`. It is created again when needed, so its updates go into a function of its own,
+ * which runs when any source that the block reads changes.
+ */
+export class Block {
+    statements = [];
+    /** Sources that any statement depends on. */
+    sources = new Set();
+    parent;
+    constructor(parent) {
+        this.parent = parent;
+    }
+    dependencies(node) {
+        return this.parent.dependencies(node);
+    }
+    depend(sources, statement) {
+        this.statements.push(statement);
+        for (const source of sources)
+            this.sources.add(source);
+    }
+    ownIndex() {
+        return null;
+    }
+}

package/dist/codegen/mutations.d.ts

@@ -1,4 +1,5 @@
 import type * as ast from '../ast.ts';
+import type { Type } from '../checker/types.ts';
 /** The variable at the start of `a.b[i].c()`, or `null`. */
 export declare function rootName(node: ast.Expression): string | null;
 /** Names whose values a node reads, not counting code that runs on events. */
@@ -8,3 +9,9 @@ export declare function readNames(node: ast.Node, names: Set<string>): void;
  * its `defer`, nor the variables it writes, or `count++` would run it again.
  */
 export declare function effectReads(node: ast.Node, names: Set<string>): void;
+/**
+ * What a statement (or an expression body) changes: the targets of assignments, `++` and
+ * `delete`, and the values that a method that may change them is called on, such as `push`.
+ * Nested blocks and functions are not included: their statements are handled on their own.
+ */
+export declare function writeTargets(node: ast.Node, typeOf: (node: ast.Expression) => Type | undefined): ast.Expression[];