rooklang 0.0.0-stage → 0.3.0

package/dist/codegen/control-statements.js

@@ -0,0 +1,226 @@
+import { isChan } from "../checker/channel.js";
+import { isMap } from "../checker/iterables.js";
+import { containsBreak } from "../walk.js";
+import { declarationsOf, endsWithJump } from "./analysis.js";
+import { SimpleStatementEmitter } from "./simple-statements.js";
+import { ARROW, BINARY, POSTFIX } from "./syntax.js";
+/** if, for, switch and try. */
+export class ControlStatementEmitter extends SimpleStatementEmitter {
+    ifStatement(node) {
+        let text = `if (${this.expression(node.condition, 0)}) ${this.blockStatement(node.consequent)}`;
+        if (node.alternate?.kind === 'IfStatement') {
+            // The condition of `else if` is evaluated only when the first one is false.
+            const alternate = node.alternate;
+            text += ` else ${this.withHoisting(false, () => this.ifStatement(alternate))}`;
+        }
+        else if (node.alternate) {
+            text += ` else ${this.blockStatement(node.alternate)}`;
+        }
+        return text;
+    }
+    loopBody(body) {
+        return this.withBreakTarget(null, () => this.blockStatement(body));
+    }
+    forStatement(node) {
+        const bindings = node.init?.kind === 'VariableDeclaration'
+            ? node.init.names.map((name) => [name.name, 'let'])
+            : [];
+        this.withScope(bindings, () => {
+            const init = node.init ? this.simpleStatement(node.init) : '';
+            // The condition and the update run on every iteration.
+            const [condition, update] = this.withHoisting(false, () => [
+                node.condition ? this.expression(node.condition, 0) : '',
+                node.update ? this.simpleStatement(node.update) : '',
+            ]);
+            if (node.init === null && node.update === null) {
+                this.line(`while (${condition || 'true'}) ${this.loopBody(node.body)}`);
+                return;
+            }
+            this.line(`for (${init}; ${condition}; ${update}) ${this.loopBody(node.body)}`);
+        });
+    }
+    /** A statement inside a `for` header, without the `;`. */
+    simpleStatement(node) {
+        switch (node.kind) {
+            case 'VariableDeclaration':
+                return this.variableDeclaration(node);
+            case 'AssignmentStatement':
+                return this.assignment(node);
+            case 'IncDecStatement':
+                return `${this.expression(node.target, POSTFIX)}${node.operator}`;
+            case 'DeleteStatement':
+                return `delete ${this.expression(node.target, POSTFIX)}`;
+            case 'ExpressionStatement':
+                return this.expression(node.expression, 0);
+            case 'SendStatement':
+                this.helpers.add('chan');
+                return `await $$send(${this.expression(node.channel, ARROW)}, ${this.expression(node.value, ARROW)})`;
+        }
+    }
+    /**
+     * `for x in xs` → `for (const x of xs)`, `m.values()` for a Map, `seq()` for an iterator;
+     * `for i, x in xs` iterates `xs.entries()`, which gives the keys and values of a Map too.
+     */
+    forInStatement(node) {
+        const bindings = [[node.value.name, 'loop']];
+        if (node.key)
+            bindings.push([node.key.name, 'loop']);
+        this.withScope(bindings, () => {
+            const value = this.name(node.value.name);
+            const iterable = this.options.types?.get(node.iterable);
+            let head;
+            // A channel gives its values as they come, until it is closed.
+            if (iterable && isChan(iterable)) {
+                this.helpers.add('chan');
+                this.line(`for await (const ${value} of $$range(${this.expression(node.iterable, ARROW)})) ${this.loopBody(node.body)}`);
+                return;
+            }
+            // An iterator is a generator function: called, it gives a lazy JS iterator, of pairs if its
+            // yield takes two values.
+            if (iterable?.kind === 'function' && iterable.iterator) {
+                const yieldType = iterable.params[0];
+                const pairs = yieldType?.kind === 'function' && yieldType.params.length === 2;
+                const key = node.key && node.key.name !== '_' ? this.name(node.key.name) : '';
+                const values = `${this.expression(node.iterable, POSTFIX)}()`;
+                head = pairs ? `const [${key}, ${value}] of ${values}` : `const ${value} of ${values}`;
+            }
+            else if (node.key === null) {
+                // A Map gives its values; an untyped value may be a Map, which only the runtime tells.
+                // Code that was not checked is taken as it is written.
+                const untyped = iterable?.kind === 'any' || iterable?.kind === 'unknown';
+                let values = this.expression(node.iterable, untyped ? ARROW : POSTFIX);
+                if (iterable && isMap(iterable))
+                    values += '.values()';
+                else if (untyped) {
+                    this.helpers.add('values');
+                    values = `$$values(${values})`;
+                }
+                head = `const ${value} of ${values}`;
+            }
+            else {
+                const key = node.key.name === '_' ? '' : this.name(node.key.name);
+                const pair = node.value.name === '_' ? `[${key}]` : `[${key}, ${value}]`;
+                head = `const ${pair} of ${this.expression(node.iterable, POSTFIX)}.entries()`;
+            }
+            this.line(`for (${head}) ${this.loopBody(node.body)}`);
+        });
+    }
+    /** Each `case` ends with an implicit `break`; a case with declarations gets its own block. */
+    switchStatement(node, discriminant) {
+        const head = `switch (${this.expression(discriminant, 0)})`;
+        const body = this.withBreakTarget(null, () => this.block(() => {
+            node.cases.forEach((switchCase, i) => {
+                // Case values are evaluated only until one matches.
+                const labels = switchCase.tests.length === 0
+                    ? ['default:']
+                    : this.withHoisting(false, () => switchCase.tests.map((test) => `case ${this.expression(test, 0)}:`));
+                for (const label of labels.slice(0, -1))
+                    this.line(label);
+                const isLast = i === node.cases.length - 1;
+                const needsBreak = !isLast && !endsWithJump(switchCase.body);
+                const declarations = declarationsOf(switchCase.body);
+                const lines = this.capture(() => {
+                    this.withScope(declarations, () => this.statements(switchCase.body));
+                    if (needsBreak)
+                        this.line('break;');
+                });
+                if (declarations.length > 0) {
+                    this.line(`${labels.at(-1)} {\n${lines.join('\n')}\n${this.indent()}}`);
+                }
+                else {
+                    this.line(labels.at(-1));
+                    this.lines.push(...lines);
+                }
+            });
+        }));
+        this.line(`${head} ${body}`);
+    }
+    /**
+     * `select`: $$select gives the index of the case that went on and what it received, and a
+     * switch runs the case; a `break` inside it leaves the select, as in Go. `default` is -1.
+     */
+    selectStatement(node) {
+        this.helpers.add('chan');
+        const operations = node.cases.flatMap(({ operation }) => {
+            if (operation === null)
+                return [];
+            if (operation.kind === 'UnaryExpression') {
+                return [`{ channel: ${this.expression(operation.argument, ARROW)} }`];
+            }
+            const channel = this.expression(operation.channel, ARROW);
+            return [`{ channel: ${channel}, value: ${this.expression(operation.value, ARROW)} }`];
+        });
+        const hasDefault = node.cases.some((selectCase) => selectCase.operation === null);
+        let index = 0;
+        const select = this.block(() => {
+            this.line(`const [$$case, $$received, $$ok] = await $$select([${operations.join(', ')}], ${hasDefault});`);
+            const body = this.withBreakTarget(null, () => this.block(() => {
+                for (const { names, operation, body: statements } of node.cases) {
+                    const label = operation === null ? 'default:' : `case ${index++}:`;
+                    const variables = names.filter((name) => name.name !== '_');
+                    const bindings = [
+                        ...variables.map((name) => [name.name, 'const']),
+                        ...declarationsOf(statements),
+                    ];
+                    const lines = this.capture(() => {
+                        this.withScope(bindings, () => {
+                            names.forEach((name, i) => {
+                                if (name.name === '_')
+                                    return;
+                                this.line(`const ${this.name(name.name)} = ${i === 0 ? '$$received' : '$$ok'};`);
+                            });
+                            this.statements(statements);
+                            if (!endsWithJump(statements))
+                                this.line('break;');
+                        });
+                    });
+                    this.line(`${label} {\n${lines.join('\n')}\n${this.indent()}}`);
+                }
+            }));
+            this.line(`switch ($$case) ${body}`);
+        });
+        this.line(select);
+    }
+    /**
+     * `switch { case cond: ... }` becomes an if/else chain. A `break` inside it must leave the
+     * switch, not an enclosing loop, so then the chain gets a label to break to.
+     */
+    taglessSwitch(node) {
+        const cases = node.cases.filter((switchCase) => switchCase.tests.length > 0);
+        const fallback = node.cases.find((switchCase) => switchCase.tests.length === 0);
+        const label = node.cases.some((switchCase) => containsBreak(switchCase.body))
+            ? `$$switch${++this.labels}`
+            : null;
+        const text = this.withBreakTarget(label, () => {
+            const caseBlock = (body) => this.block(() => this.blockStatements(body));
+            const branches = cases.map((switchCase) => {
+                // Later conditions are evaluated only if the earlier ones are false.
+                const condition = this.withHoisting(false, () => switchCase.tests.length === 1
+                    ? this.expression(switchCase.tests[0], 0)
+                    : switchCase.tests.map((test) => this.expression(test, BINARY['||'] + 1)).join(' || '));
+                return `if (${condition}) ${caseBlock(switchCase.body)}`;
+            });
+            if (fallback)
+                branches.push(caseBlock(fallback.body));
+            return branches.join(' else ');
+        });
+        if (text === '')
+            return;
+        this.line(label ? `${label}: ${text}` : text);
+    }
+    tryStatement(node) {
+        let text = `try ${this.blockStatement(node.block)}`;
+        const { handler } = node;
+        if (handler) {
+            const param = handler.param;
+            const bindings = param ? [[param.name, 'catch']] : [];
+            text += this.withScope(bindings, () => {
+                const head = param ? ` catch (${this.name(param.name)})` : ' catch';
+                return `${head} ${this.blockStatement(handler.body)}`;
+            });
+        }
+        if (node.finalizer)
+            text += ` finally ${this.blockStatement(node.finalizer)}`;
+        return text;
+    }
+}

package/dist/codegen/creation.d.ts

@@ -0,0 +1,31 @@
+import type * as ast from '../ast.ts';
+import { AttributeEmitter } from './attributes.ts';
+import type { Live } from './reactive.ts';
+/**
+ * The creation of elements. In a module that creates many of them (see ELEMENT_HELPER_LIMIT in
+ * js.ts) an element is created by a helper together with the attributes it has from the start:
+ * `$$element("a", { href: "/", className: "link" }, { "aria-label": label })` takes the place of
+ * a `createElement` and a statement for each attribute. The first object holds properties, the
+ * second attributes set with setAttribute; an SVG element has only attributes.
+ */
+/** Attributes given to the helper that creates an element, which need no statements of their own. */
+export interface Creation {
+    covered: Set<ast.JsxAttribute | ast.JsxSpreadAttribute>;
+    /** Whether the class of the style is given too. */
+    scoped: boolean;
+}
+export declare abstract class CreationEmitter extends AttributeEmitter {
+    /** The elements the code creates, counted where it creates them, not as often as it runs. */
+    createdElements: number;
+    /**
+     * Writes `declaration = <a new element>`. With the helper it is given the attributes before the
+     * first spread, which may override them, except those that need more than a value: handlers,
+     * `bind:`, styles, properties of web components and attributes that may be null. `scopeClass`
+     * is the class of the style for an element without a class attribute.
+     */
+    protected createWith(declaration: string, element: string, tag: string, svg: boolean, attributes: readonly (ast.JsxAttribute | ast.JsxSpreadAttribute)[], live: Live | null, scope: string | null, scopeClass: string | null): Creation;
+    /** What `attribute()` would set, as an entry of the objects of the helper, if it is a value. */
+    private entry;
+    /** An entry whose value may depend on state: then it is also set again on updates. */
+    private valueEntry;
+}

package/dist/codegen/creation.js

@@ -0,0 +1,113 @@
+import { domProperty } from "../checker/dom.js";
+import { AttributeEmitter } from "./attributes.js";
+import { ARROW } from "./syntax.js";
+export class CreationEmitter extends AttributeEmitter {
+    /** The elements the code creates, counted where it creates them, not as often as it runs. */
+    createdElements = 0;
+    /**
+     * Writes `declaration = <a new element>`. With the helper it is given the attributes before the
+     * first spread, which may override them, except those that need more than a value: handlers,
+     * `bind:`, styles, properties of web components and attributes that may be null. `scopeClass`
+     * is the class of the style for an element without a class attribute.
+     */
+    createWith(declaration, element, tag, svg, attributes, live, scope, scopeClass) {
+        const covered = new Set();
+        this.createdElements++;
+        if (!this.options.elementHelper) {
+            this.line(`${declaration} = ${this.createElement(tag, svg)};`);
+            return { covered, scoped: false };
+        }
+        const entries = [];
+        for (const attribute of attributes) {
+            if (attribute.kind === 'JsxSpreadAttribute')
+                break;
+            const entry = this.entry(element, tag, attribute, live, svg, scope);
+            if (entry) {
+                entries.push(entry);
+                covered.add(attribute);
+            }
+        }
+        if (scopeClass !== null) {
+            entries.push({
+                attribute: svg,
+                key: svg ? 'class' : 'className',
+                value: JSON.stringify(scopeClass),
+            });
+        }
+        const object = (attribute) => {
+            const fields = entries
+                .filter((entry) => entry.attribute === attribute)
+                .map(({ key, value }) => {
+                if (!/^[A-Za-z_$][\w$]*$/.test(key))
+                    return `${JSON.stringify(key)}: ${value}`;
+                return key === value ? key : `${key}: ${value}`;
+            });
+            return fields.length === 0 ? null : `{ ${fields.join(', ')} }`;
+        };
+        const properties = object(false);
+        const attributesObject = object(true);
+        const args = [JSON.stringify(tag)];
+        if (svg) {
+            this.helpers.add('svgElement');
+            if (attributesObject)
+                args.push(attributesObject);
+            this.line(`${declaration} = $$svgElement(${args.join(', ')});`);
+        }
+        else {
+            this.helpers.add('element');
+            if (properties || attributesObject)
+                args.push(properties ?? '{}');
+            if (attributesObject)
+                args.push(attributesObject);
+            this.line(`${declaration} = $$element(${args.join(', ')});`);
+        }
+        return { covered, scoped: scopeClass !== null };
+    }
+    /** What `attribute()` would set, as an entry of the objects of the helper, if it is a value. */
+    entry(element, tag, attribute, live, svg, scope) {
+        const name = attribute.name.name;
+        const { value } = attribute;
+        if (name === 'ref' || name === 'style' || name.startsWith('bind:') || /^on[A-Z]/.test(name)) {
+            return null;
+        }
+        if (value?.kind === 'EventHandler' || (!svg && this.webComponentProperty(tag, name))) {
+            return null;
+        }
+        if (name === 'class' && scope) {
+            const key = svg ? 'class' : 'className';
+            if (value === null || value.kind === 'StringLiteral') {
+                const classes = `${value?.value ?? ''} ${scope}`.trim();
+                return { attribute: svg, key, value: JSON.stringify(classes) };
+            }
+            const nullable = this.typeOf(value)?.kind !== 'string';
+            return this.valueEntry(element, svg, key, value, live, (text) => {
+                return `\`\${${nullable ? `${text} ?? ""` : text}} ${scope}\``;
+            });
+        }
+        // SVG attributes are set with setAttribute: their properties are objects.
+        const property = svg ? null : domProperty(tag, name);
+        if (value === null) {
+            return property?.type.kind === 'bool'
+                ? { attribute: false, key: property.name, value: 'true' }
+                : { attribute: true, key: name, value: '""' };
+        }
+        if (property)
+            return this.valueEntry(element, false, property.name, value, live);
+        // A null value leaves the attribute out, which takes a statement.
+        if (this.typeOf(value)?.kind === 'nullable')
+            return null;
+        return this.valueEntry(element, true, name, value, live);
+    }
+    /** An entry whose value may depend on state: then it is also set again on updates. */
+    valueEntry(element, attribute, key, value, live, wrap = (text) => text) {
+        const sources = live && value.kind !== 'StringLiteral' ? live.dependencies(value) : null;
+        if (!live || !sources || sources.size === 0) {
+            return { attribute, key, value: wrap(this.expression(value, ARROW)) };
+        }
+        const text = wrap(this.liveExpression(value));
+        live.depend(sources, attribute
+            ? `${element}.setAttribute(${JSON.stringify(key)}, ${text});`
+            : `${element}.${key} = ${text};`);
+        return { attribute, key, value: text };
+    }
+}

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

@@ -0,0 +1,59 @@
+import type * as ast from '../ast.ts';
+import { ComponentValueEmitter } from './component-values.ts';
+import type { Live, Reactive } from './reactive.ts';
+import { type EarlyReturns, type Ending } from './component-helpers.ts';
+/** The markup a component returns, with early returns, update functions and setters of properties. */
+/** `effect { ... }` of the component being written: its function and the list of its cleanups. */
+interface Effect {
+    name: string;
+    node: ast.EffectStatement;
+    cleanups: string | null;
+}
+export declare abstract class EarlyReturnEmitter extends ComponentValueEmitter {
+    /** The CSS variables of the component's style, once its markup exists; by StyleEmitter. */
+    protected abstract setStyleValues(result: string): void;
+    /** Their updates, with those of the effects. */
+    protected abstract registerStyleValues(): void;
+    /**
+     * The effects of the component being written. One after an early return may not be created, so
+     * it does not run again on changes, like the markup there.
+     */
+    private effects;
+    /** Whether an early return of the component has been written. */
+    protected returnedEarly: boolean;
+    /**
+     * The updates of the markup a component gives to the wrappers of its decorators, after an early
+     * return: they go into the view of the `return` that follows, with the wrappers' markup.
+     */
+    private wrapped;
+    /** Writes the code of a component with its own reactivity, apart from the enclosing one. */
+    protected inComponent<T>(reactive: Reactive, mountNode: string | null, emit: () => T): T;
+    protected addEffect(effect: Effect): void;
+    /**
+     * An effect runs again after the updates of what it reads, so it is added after the markup, when
+     * the update functions are not written yet.
+     */
+    protected registerEffects(): void;
+    /** Markup for a wrapper is live like returned markup, also where the body may have returned. */
+    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.
+     */
+    protected markupCreated(result: string): void;
+    /** Declarations that every return needs, written before the statements of the body. */
+    protected prepareEarlyReturns(result: string, reactive: Reactive, ending: Ending, label: string | null, component: ast.ComponentDeclaration): EarlyReturns;
+    /** The markup of one `return`: a block with its own update, which `view` keeps. */
+    protected returnedMarkup(value: ast.Expression, early: EarlyReturns): void;
+    /** The last `return` of a component with early returns, then the updates and the setters. */
+    protected lastReturn(value: ast.Expression, ending: Ending, early: EarlyReturns): void;
+    /** Puts the setters of an inlined component with early returns at the top of its block. */
+    protected placeSetters(code: string, result: string): string;
+    /** Functions that update the markup after changes of state; returns how many were written. */
+    protected updateFunctions(result: string, reactive: Reactive): number;
+    /** The markup a component returns, then the functions that update it. */
+    protected markup(value: ast.Expression, result: string, reactive: Reactive, ending: Ending): void;
+}
+export {};

package/dist/codegen/early-returns.js

@@ -0,0 +1,244 @@
+import { isWrappedContent } from "../decorators.js";
+import { ComponentValueEmitter } from "./component-values.js";
+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";
+export class EarlyReturnEmitter extends ComponentValueEmitter {
+    /**
+     * The effects of the component being written. One after an early return may not be created, so
+     * it does not run again on changes, like the markup there.
+     */
+    effects = [];
+    /** Whether an early return of the component has been written. */
+    returnedEarly = false;
+    /**
+     * The updates of the markup a component gives to the wrappers of its decorators, after an early
+     * return: they go into the view of the `return` that follows, with the wrappers' markup.
+     */
+    wrapped = null;
+    /** Writes the code of a component with its own reactivity, apart from the enclosing one. */
+    inComponent(reactive, mountNode, emit) {
+        const saved = {
+            reactive: this.reactive,
+            inHandler: this.inHandler,
+            rendering: this.rendering,
+            earlyReturns: this.earlyReturns,
+            mountNode: this.mountNode,
+            wrapped: this.wrapped,
+            effects: this.effects,
+            returnedEarly: this.returnedEarly,
+        };
+        this.reactive = reactive.sources.size > 0 ? reactive : null;
+        this.inHandler = 0;
+        this.rendering = 0;
+        this.earlyReturns = null;
+        this.mountNode = mountNode;
+        this.wrapped = null;
+        this.effects = [];
+        this.returnedEarly = false;
+        try {
+            return emit();
+        }
+        finally {
+            this.reactive = saved.reactive;
+            this.inHandler = saved.inHandler;
+            this.rendering = saved.rendering;
+            this.earlyReturns = saved.earlyReturns;
+            this.mountNode = saved.mountNode;
+            this.wrapped = saved.wrapped;
+            this.effects = saved.effects;
+            this.returnedEarly = saved.returnedEarly;
+        }
+    }
+    addEffect(effect) {
+        this.effects.push({ ...effect, live: !this.returnedEarly, registered: false });
+    }
+    /**
+     * An effect runs again after the updates of what it reads, so it is added after the markup, when
+     * the update functions are not written yet.
+     */
+    registerEffects() {
+        const { reactive } = this;
+        if (!reactive)
+            return;
+        this.registerStyleValues();
+        for (const effect of this.effects) {
+            if (effect.registered || !effect.live)
+                continue;
+            effect.registered = true;
+            reactive.depend(reactive.dependencies(effect.node.body, effectReads), `${effect.name}();`);
+        }
+    }
+    /** Markup for a wrapper is live like returned markup, also where the body may have returned. */
+    declaredLive(node) {
+        const early = this.earlyReturns;
+        if (!early || !this.reactive || !isWrappedContent(node) || this.reactive.topLevel.has(node)) {
+            return super.declaredLive(node);
+        }
+        return (this.wrapped ??= new Block(early.reactive));
+    }
+    /**
+     * 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.
+     */
+    markupCreated(result) {
+        if (this.mountNode) {
+            this.line(`${this.mountNode} = ${result}?.nodeType === 11 ? ${result}.firstChild : ${result};`);
+        }
+        this.setStyleValues(result);
+        for (const effect of this.effects) {
+            this.line(`${effect.name}();`);
+            if (effect.cleanups === null)
+                continue;
+            this.helpers.add('owner');
+            this.line(`$$onRemove(() => $$runDeferred(${effect.cleanups}.splice(0)));`);
+        }
+    }
+    /** Declarations that every return needs, written before the statements of the body. */
+    prepareEarlyReturns(result, reactive, ending, label, component) {
+        const id = this.nextId();
+        const view = `$$view${id}`;
+        let exit = `break ${label};`;
+        let setter = null;
+        if (ending.kind === 'function') {
+            setter = ending.props.length > 0 ? `$$set${component.name.name}${id}` : null;
+            exit = `return [${result}${setter ? `, ${setter}` : ''}];`;
+        }
+        else if (ending.setters.size > 0) {
+            this.line(`${SETTERS}${result}${SETTERS}`);
+        }
+        if (reactive.sources.size > 0)
+            this.line(`let ${view};`);
+        return { fn: this.fn, result, reactive, view, exit, setter };
+    }
+    /** The markup of one `return`: a block with its own update, which `view` keeps. */
+    returnedMarkup(value, early) {
+        const { result, reactive, view } = early;
+        if (reactive.sources.size === 0) {
+            if (value.kind === 'ElementExpression' && this.isElement(value)) {
+                this.build(value, result, null);
+            }
+            else {
+                this.line(`${result} = ${this.expression(value, ARROW)};`);
+            }
+            this.markupCreated(result);
+            return;
+        }
+        // A wrapper returns once, so what was given to it updates in this view.
+        const block = this.wrapped ?? new Block(reactive);
+        this.wrapped = null;
+        const root = value.kind === 'ElementExpression'
+            ? this.create(value, block)
+            : this.expression(value, ARROW);
+        this.registerEffects();
+        if (block.statements.length > 0) {
+            const body = this.block(() => {
+                for (const statement of block.statements)
+                    this.line(indentMore(statement));
+            });
+            this.line(`${view} = () => ${body};`);
+            reactive.depend(block.sources, `${view}?.();`);
+        }
+        this.line(`${result} = ${root};`);
+        this.markupCreated(result);
+    }
+    /** The last `return` of a component with early returns, then the updates and the setters. */
+    lastReturn(value, ending, early) {
+        const { result, reactive } = early;
+        this.returnedMarkup(value, early);
+        const functions = this.updateFunctions(result, reactive);
+        if (ending.kind === 'inline') {
+            // An early return leaves the block, so the setters are assigned at its top.
+            const texts = [...ending.setters].map(([prop, setter]) => `${setter} = ($$${prop}) => ${this.setterBody([prop], reactive)};`);
+            if (texts.length > 0)
+                this.pendingSetters.set(result, texts);
+            return;
+        }
+        if (early.setter) {
+            this.blankLine();
+            const params = this.parameters(ending.props, '$$');
+            const names = ending.props.map((param) => param.name.name);
+            this.line(`function ${early.setter}(${params}) ${this.setterBody(names, reactive)}`);
+        }
+        else if (functions > 0) {
+            this.blankLine();
+        }
+        this.line(early.exit);
+    }
+    /** Puts the setters of an inlined component with early returns at the top of its block. */
+    placeSetters(code, result) {
+        const texts = this.pendingSetters.get(result);
+        const marker = `${SETTERS}${result}${SETTERS}`;
+        if (!code.includes(marker))
+            return code;
+        this.pendingSetters.delete(result);
+        return code.replace(new RegExp(`^([ \\t]*)${marker.replace(/\$/g, '\\$')}\n`, 'm'), (_, indent) => (texts ?? []).map((text) => `${indent}${text}\n`).join(''));
+    }
+    /** Functions that update the markup after changes of state; returns how many were written. */
+    updateFunctions(result, reactive) {
+        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))
+                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));
+                if (source.writes.some((write) => write.early))
+                    this.line(`if (!${result}) return;`);
+                for (const dependent of source.dependents)
+                    this.line(indentMore(dependent));
+            });
+            this.blankLine();
+            this.line(`function ${source.update}() ${body}`);
+            functions++;
+        }
+        return functions;
+    }
+    /** The markup a component returns, then the functions that update it. */
+    markup(value, result, reactive, ending) {
+        if (reactive.sources.size === 0) {
+            if (value.kind === 'ElementExpression' && this.isElement(value)) {
+                this.build(value, result, null);
+            }
+            else {
+                this.line(`${result} = ${this.expression(value, ARROW)};`);
+            }
+            this.markupCreated(result);
+            if (ending.kind === 'function')
+                this.line(`return [${result}];`);
+            return;
+        }
+        const root = value.kind === 'ElementExpression'
+            ? this.create(value, reactive)
+            : this.expression(value, ARROW);
+        this.registerEffects();
+        let functions = 0;
+        const setters = ending.kind === 'inline' ? ending.setters : new Map();
+        for (const [prop, setter] of setters) {
+            const source = reactive.sources.get(prop);
+            const param = `$$${prop}`;
+            const body = this.block(() => {
+                this.line(`${this.name(prop)} = ${param};`);
+                for (const dependent of updatesOf(source))
+                    this.line(indentMore(dependent));
+            });
+            this.blankLine();
+            this.line(`${setter} = (${param}) => ${body};`);
+            functions++;
+        }
+        functions += this.updateFunctions(result, reactive);
+        if (functions > 0)
+            this.blankLine();
+        this.line(`${result} = ${root};`);
+        this.markupCreated(result);
+        if (ending.kind === 'function')
+            this.functionResult(result, reactive, ending.props);
+    }
+}