rooklang 0.0.0-stage → 0.3.0

package/dist/codegen/component-values.js

@@ -0,0 +1,146 @@
+import { isNullable } from "../checker/types.js";
+import { isConstant, isSimple } from "./analysis.js";
+import { withoutTrailingUndefined } from "./component-helpers.js";
+import { ComponentPropsEmitter } from "./component-props.js";
+import { ARROW, BINARY, lowerFirst, POSTFIX, upperFirst } from "./syntax.js";
+/**
+ * Tags that take the component from a value: `<section.content title={title} />` calls the
+ * function of the component, `section.content(title)`, with the properties in the order of the
+ * type of the value, `comp(title string)`. Like the call of a function component, it returns the
+ * node and, when the parent's state changes a property, the function that sets them again. When
+ * the value itself depends on state, the component is created again each time it changes:
+ * `$$dynamic` keeps it between markers, in a block of its own.
+ */
+export class ComponentValueEmitter extends ComponentPropsEmitter {
+    /** Tags inside the blocks of `$$dynamic`: they call the component the block gets. */
+    fixedComponents = new Map();
+    valueTag(node, value, live) {
+        const type = this.typeOf(value);
+        if (!type) {
+            throw new Error(`<${node.tag.name}> takes its component from a value, whose type gives the order of the properties: compile it with type checking`);
+        }
+        const params = type.kind === 'component' ? type.params : [];
+        const fixed = this.fixedComponents.get(node);
+        if (fixed === undefined && live && live.dependencies(value).size > 0) {
+            return this.dynamicTag(node, value, live);
+        }
+        return this.callValue(node, fixed ?? this.expression(value, POSTFIX), params, live);
+    }
+    /** `$$dynamic(() => page, ($$component3) => { ...; return [block, update]; })` */
+    dynamicTag(node, value, live) {
+        const id = this.nextId();
+        const base = resultName(node);
+        const name = `$$${base}${id}`;
+        const update = `$$update${upperFirst(base)}${id}`;
+        const component = {
+            kind: 'Identifier',
+            name: `$$component${id}`,
+            start: node.start,
+            end: node.start,
+        };
+        const statement = {
+            kind: 'JsxElementStatement',
+            element: node,
+            start: node.start,
+            end: node.end,
+        };
+        this.fixedComponents.set(node, component.name);
+        let create;
+        try {
+            create = this.blockCreator([statement], live, undefined, component);
+        }
+        finally {
+            this.fixedComponents.delete(node);
+        }
+        this.helpers.add('dynamic');
+        this.line(`const [${name}, ${update}] = $$dynamic(${this.liveFunction(value)}, ${create});`);
+        live.depend(live.dependencies(node), `${update}();`);
+        return name;
+    }
+    /** The call of the component; properties that depend on state are set again by its setter. */
+    callValue(node, callee, params, live) {
+        const id = this.nextId();
+        const base = resultName(node);
+        const result = `$$${base}${id}`;
+        const attributes = new Map();
+        const args = [];
+        // The setter takes the properties without `children`, in the same order.
+        const settable = [];
+        const sources = new Set();
+        for (const attribute of node.attributes) {
+            if (attribute.kind === 'JsxAttribute')
+                attributes.set(attribute.name.name, attribute);
+        }
+        for (const param of params) {
+            if (param.name === 'children') {
+                const fragment = `$$children${this.nextId()}`;
+                this.line(`const ${fragment} = document.createDocumentFragment();`);
+                this.children(fragment, node.children, live);
+                args.push(fragment);
+                continue;
+            }
+            const attribute = attributes.get(param.name);
+            const text = attribute ? this.valueArgument(attribute, param) : 'undefined';
+            const value = attribute?.value;
+            const propSources = live && value && value.kind !== 'EventHandler' ? live.dependencies(value) : null;
+            args.push(text);
+            if (value && value.kind !== 'EventHandler' && propSources && propSources.size > 0) {
+                for (const source of propSources)
+                    sources.add(source);
+                settable.push(this.nullAsDefault(this.liveExpression(value, BINARY['??'] + 1), value, param));
+            }
+            else {
+                settable.push(text);
+            }
+        }
+        const call = `${callee}(${withoutTrailingUndefined(args).join(', ')})`;
+        if (!live || sources.size === 0) {
+            this.line(`const [${result}] = ${call};`);
+            return result;
+        }
+        const setter = `$$set${upperFirst(base)}${id}`;
+        this.line(`const [${result}, ${setter}] = ${call};`);
+        live.depend(sources, `${setter}(${withoutTrailingUndefined(settable).join(', ')});`);
+        return result;
+    }
+    /** The value of a property: literals and names as they are, other values in a temporary. */
+    valueArgument(attribute, param) {
+        const { value } = attribute;
+        if (value === null)
+            return 'true';
+        if (value.kind === 'EventHandler') {
+            const temp = this.temp();
+            this.line(`const ${temp} = ${this.handler(value)};`);
+            return temp;
+        }
+        if (isConstant(value) || isSimple(value)) {
+            return this.nullAsDefault(this.expression(value, BINARY['??'] + 1), value, param);
+        }
+        // A function given to the component runs later, not while the markup is being created.
+        const text = value.kind === 'ArrowFunction' || value.kind === 'FuncExpression'
+            ? this.withRendering(0, () => this.expression(value, ARROW))
+            : this.expression(value, ARROW);
+        const temp = this.temp();
+        this.line(`const ${temp} = ${text};`);
+        return this.nullAsDefault(temp, value, param);
+    }
+    /**
+     * A property of type `?T` may belong to one with a default value, which null must give: so null
+     * is passed as undefined, the value that takes the default.
+     */
+    nullAsDefault(text, value, param) {
+        if (!isNullable(param.type))
+            return text;
+        if (value.kind === 'NullLiteral')
+            return 'undefined';
+        const type = this.typeOf(value);
+        return !type || type.kind === 'any' || type.kind === 'unknown' || isNullable(type)
+            ? `${text} ?? undefined`
+            : text;
+    }
+}
+/** `$$sectionContent3` for `<section.content />`, `$$page3` for `<Page />`. */
+function resultName(node) {
+    const parts = (node.tag?.name ?? 'component').split('.');
+    return parts.map((part, i) => (i === 0 ? lowerFirst(part) : upperFirst(part))).join('');
+}

package/dist/codegen/components.d.ts

@@ -0,0 +1,53 @@
+import type * as ast from '../ast.ts';
+import type { Reactive } from './reactive.ts';
+import { type Live } from './reactive.ts';
+import { type Ending } from './component-helpers.ts';
+import { StyleEmitter } from './styles.ts';
+/**
+ * Components, inlined where they are used: `<Card title="Hi" />` becomes a block with the code of
+ * `Card`. A component with state also gets the functions that update its markup.
+ *
+ * A recursive component cannot be inlined into itself, so it becomes a function `$$Tree(...)`. It
+ * takes the properties as arguments and returns the node and a function that sets the properties
+ * again, which the parent calls when their values depend on its state.
+ */
+export declare abstract class ComponentEmitter extends StyleEmitter {
+    /** An early `return` in a component: its markup, then the exit from the body. */
+    protected statement(node: ast.Statement): void;
+    /**
+     * `derived double = count * 2` is a variable computed again, first, in the updates of what it
+     * reads; one that reads no state is a constant.
+     */
+    private derivedValue;
+    /**
+     * 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
+     * names they refer to. In live markup, a property whose value depends on the parent's state is
+     * a variable, and the parent's updates call a function that sets it.
+     */
+    protected expand(node: ast.ElementExpression, component: ast.ComponentDeclaration, live: Live | null): string;
+    /**
+     * A recursive component: `function $$Tree(item) { ...; return [node, setItem]; }`. Every property
+     * except `children` may get the caller's state, so all of them are sources here.
+     */
+    protected componentFunction(component: ast.ComponentDeclaration): void;
+    /**
+     * The attributes of a use that are not properties of the component, as a function that sets them
+     * on the element `{...attrs}` is on: `($$target) => { $$target.disabled = true; }`. It is
+     * written here, so their values see the names of the caller; when they depend on its state, the
+     * element is kept for its updates. A class or a style is added to that of the element.
+     */
+    private attrsApplier;
+    /** The statements of the body, then its markup. `label` is for early returns of a block. */
+    protected body(component: ast.ComponentDeclaration, result: string, reactive: Reactive, ending: Ending, label: string | null): void;
+}

package/dist/codegen/components.js

@@ -0,0 +1,268 @@
+import { isDecoratorArgument } from "../decorators.js";
+import { attrsParam, attrsTarget } from "../attrs.js";
+import { ownRoot } from "../refs.js";
+import { isSvgElement } from "../svg.js";
+import {} from "./reactive.js";
+import { ARROW, lowerFirst, upperFirst } from "./syntax.js";
+import { resolveMarkers } from "./updates.js";
+import { hasEarlyReturn, hasMount } from "./component-helpers.js";
+import { StyleEmitter } from "./styles.js";
+/**
+ * Components, inlined where they are used: `<Card title="Hi" />` becomes a block with the code of
+ * `Card`. A component with state also gets the functions that update its markup.
+ *
+ * A recursive component cannot be inlined into itself, so it becomes a function `$$Tree(...)`. It
+ * takes the properties as arguments and returns the node and a function that sets the properties
+ * again, which the parent calls when their values depend on its state.
+ */
+export class ComponentEmitter extends StyleEmitter {
+    /** An early `return` in a component: its markup, then the exit from the body. */
+    statement(node) {
+        const early = this.earlyReturns;
+        if (early && node.kind === 'ReturnStatement' && this.fn === early.fn) {
+            const [value] = node.values;
+            if (value)
+                this.withHoisting(true, () => this.returnedMarkup(value, early));
+            this.line(early.exit);
+            this.returnedEarly = true;
+            return;
+        }
+        if (node.kind === 'VariableDeclaration' && node.keyword === 'derived') {
+            this.derivedValue(node);
+            return;
+        }
+        if (node.kind === 'VariableDeclaration' && node.keyword === 'ref') {
+            this.refDeclaration(node);
+            return;
+        }
+        // The CSS goes to the start of the module, its values to the element the component creates.
+        if (node.kind === 'StyleStatement')
+            return;
+        super.statement(node);
+        if (isDecoratorArgument(node))
+            this.decoratorArgument(node);
+    }
+    /**
+     * `derived double = count * 2` is a variable computed again, first, in the updates of what it
+     * reads; one that reads no state is a constant.
+     */
+    derivedValue(node) {
+        const { reactive } = this;
+        const [name] = node.names;
+        const [value] = node.values;
+        const sources = reactive && value ? reactive.dependencies(value) : new Set();
+        super.statement(sources.size > 0 ? node : { ...node, keyword: 'const' });
+        if (!reactive || !name || !value || sources.size === 0)
+            return;
+        const expression = this.withHoisting(false, () => this.expression(value, ARROW));
+        reactive.compute(sources, `${this.name(name.name)} = ${expression};`);
+    }
+    /**
+     * An argument of a decorator that reads properties of the component: when they change, it is
+     * computed again, and what reads it is updated.
+     */
+    decoratorArgument(node) {
+        const { reactive } = this;
+        const [value] = node.values;
+        const source = reactive?.sources.get(node.names[0].name);
+        if (!reactive || !value || !source)
+            return;
+        const props = new Set([...reactive.dependencies(value)].filter((s) => s.kind === 'prop'));
+        if (props.size === 0)
+            return;
+        const assignment = `${this.name(source.name)} = ${this.expression(value, ARROW)};`;
+        reactive.depend(props, `${assignment}\n${this.indent()}${this.write(source)};`);
+    }
+    /**
+     * `mount() { ... }` becomes `$$mount(() => { ... })`. Its body runs later, like a handler: what
+     * it changes updates the markup.
+     */
+    mountStatement(node) {
+        this.helpers.add('mount');
+        this.inHandler++;
+        try {
+            const [, body] = this.withRendering(0, () => this.func([], node.body));
+            this.line(`$$mount(() => ${this.mountNode ?? 'null'}, () => ${body});`);
+        }
+        finally {
+            this.inHandler--;
+        }
+    }
+    /**
+     * Inlines a component: its code goes into a block where its properties are constants. Attribute
+     * values are computed before the block, so that the component's own names cannot hide the
+     * names they refer to. In live markup, a property whose value depends on the parent's state is
+     * a variable, and the parent's updates call a function that sets it.
+     */
+    expand(node, component, live) {
+        const name = component.name.name;
+        const isFunction = this.functionComponents.has(component);
+        const start = this.lines.length;
+        if (!isFunction)
+            this.line(`// <${name}>`);
+        const values = new Map();
+        const reactiveProps = new Map();
+        const rest = attrsParam(component);
+        const forwarded = [];
+        for (const attribute of node.attributes) {
+            if (attribute.kind === 'JsxSpreadAttribute') {
+                this.spreadProps(attribute.argument, component, live, values, reactiveProps);
+                continue;
+            }
+            const prop = attribute.name.name;
+            if (prop === 'ref')
+                continue;
+            if (rest && !component.params.some((param) => param.name.name === prop)) {
+                forwarded.push(attribute);
+                continue;
+            }
+            values.set(prop, this.prop(attribute, component));
+            reactiveProps.delete(prop);
+            const { value } = attribute;
+            if (live && value && value.kind !== 'EventHandler') {
+                const sources = live.dependencies(value);
+                if (sources.size > 0)
+                    reactiveProps.set(prop, [this.liveExpression(value), sources]);
+            }
+        }
+        if (component.params.some((param) => param.name.name === 'children')) {
+            const fragment = `$$children${this.nextId()}`;
+            this.line(`const ${fragment} = document.createDocumentFragment();`);
+            this.children(fragment, node.children, live);
+            values.set('children', fragment);
+        }
+        if (rest)
+            values.set(rest.name.name, this.attrsApplier(component, forwarded, live));
+        const root = this.rootFor(node);
+        if (isFunction)
+            return this.callComponent(component, values, reactiveProps, live, root?.name);
+        const result = `$$${lowerFirst(name)}${this.nextId()}`;
+        const label = hasEarlyReturn(component) ? `$$body${this.nextId()}` : null;
+        const mountNode = hasMount(component) ? `$$mountNode${this.nextId()}` : null;
+        this.line(mountNode ? `let ${result}, ${mountNode};` : `let ${result};`);
+        const setters = new Map();
+        for (const [prop, [text, sources]] of reactiveProps) {
+            const setter = `$$set${upperFirst(prop)}${this.nextId()}`;
+            this.line(`let ${setter};`);
+            live?.depend(sources, `${setter}(${text});`);
+            setters.set(prop, setter);
+        }
+        const reactive = this.reactiveOf(component, setters.keys());
+        const props = component.params.map((param) => [param.name.name, 'const']);
+        const preset = this.inlineRoot(component, root);
+        const block = this.withRefs(component, preset, () => this.withStyles(component, result, () => this.inComponent(reactive, mountNode, () => this.block(() => this.withScope(props, () => {
+            for (const param of component.params) {
+                const value = values.get(param.name.name) ??
+                    (param.defaultValue ? this.expression(param.defaultValue, ARROW) : 'null');
+                const keyword = setters.has(param.name.name) ? 'let' : 'const';
+                this.line(`${keyword} ${this.name(param.name.name)} = ${value};`);
+            }
+            this.body(component, result, reactive, { kind: 'inline', setters }, label);
+        })))));
+        // The setters may change arguments of decorators, so their markers are resolved too.
+        const code = resolveMarkers(this.placeSetters(block, result), reactive);
+        this.line(label ? `${label}: ${code}` : code);
+        const copy = this.lines.slice(start).join('\n').split('\n').length;
+        // By the tag: a component of another module has one of its own here.
+        const tag = node.tag?.name ?? name;
+        const inlined = this.inlined.get(tag) ?? { copies: 0, lines: 0 };
+        this.inlined.set(tag, { copies: inlined.copies + 1, lines: inlined.lines + copy });
+        return result;
+    }
+    /**
+     * A recursive component: `function $$Tree(item) { ...; return [node, setItem]; }`. Every property
+     * except `children` may get the caller's state, so all of them are sources here.
+     */
+    componentFunction(component) {
+        // `children` and `...attrs` are given once: the setter does not take them.
+        const props = component.params.filter((param) => param.name.name !== 'children' && !param.rest);
+        this.withFunction('none', component.params, () => {
+            const reactive = this.reactiveOf(component, props.map((param) => param.name.name));
+            const result = `$$${lowerFirst(component.name.name)}${this.nextId()}`;
+            const mountNode = hasMount(component) ? `$$mountNode${this.nextId()}` : null;
+            // A ref to the component created the element at its top: `$$root`, undefined without one.
+            const own = this.takesRoot(component) ? ownRoot(component) : null;
+            const preset = own && typeof own !== 'string' ? { node: own, name: '$$root', created: false } : null;
+            const params = [this.parameters(component.params, ''), ...(preset ? ['$$root'] : [])]
+                .filter((each) => each !== '')
+                .join(', ');
+            const body = this.withRefs(component, preset, () => this.withStyles(component, result, () => this.inComponent(reactive, mountNode, () => this.block(() => {
+                this.line(mountNode ? `let ${result}, ${mountNode};` : `let ${result};`);
+                this.body(component, result, reactive, { kind: 'function', props }, null);
+            }))));
+            // Other modules import an exported component under the name of its function.
+            const exported = component.exported ? 'export ' : '';
+            this.line(`${exported}function $$${component.name.name}(${params}) ${resolveMarkers(body, reactive)}`);
+        });
+    }
+    /**
+     * The attributes of a use that are not properties of the component, as a function that sets them
+     * on the element `{...attrs}` is on: `($$target) => { $$target.disabled = true; }`. It is
+     * written here, so their values see the names of the caller; when they depend on its state, the
+     * element is kept for its updates. A class or a style is added to that of the element.
+     */
+    attrsApplier(component, attributes, live) {
+        const tag = attrsTarget(component)?.tag?.name;
+        if (!tag || attributes.length === 0)
+            return 'null';
+        const svg = isSvgElement(tag, false);
+        const id = this.nextId();
+        const reactive = attributes.some(({ value }) => live !== null &&
+            value !== null &&
+            value.kind !== 'EventHandler' &&
+            live.dependencies(value).size > 0);
+        const element = reactive ? `$$attrsElement${id}` : '$$target';
+        if (reactive)
+            this.line(`let ${element};`);
+        const body = this.block(() => {
+            if (reactive)
+                this.line(`${element} = $$target;`);
+            for (const attribute of attributes) {
+                const { name, value } = attribute;
+                if (name.name === 'class' && value?.kind === 'StringLiteral') {
+                    const classes = value.value.split(/\s+/).filter(Boolean);
+                    this.line(`${element}.classList.add(${classes.map((each) => JSON.stringify(each)).join(', ')});`);
+                }
+                else if (name.name === 'style' && value?.kind === 'StringLiteral') {
+                    this.line(`${element}.style.cssText += ${JSON.stringify(`; ${value.value}`)};`);
+                }
+                else {
+                    this.attribute(element, tag, attribute, live, svg);
+                }
+            }
+        });
+        const applier = `$$attrs${id}`;
+        this.line(`const ${applier} = ($$target) => ${body};`);
+        return applier;
+    }
+    /** The statements of the body, then its markup. `label` is for early returns of a block. */
+    body(component, result, reactive, ending, label) {
+        const body = component.body.body;
+        const last = body.at(-1);
+        const setup = last?.kind === 'ReturnStatement' ? body.slice(0, -1) : body;
+        const early = hasEarlyReturn(component)
+            ? this.prepareEarlyReturns(result, reactive, ending, label, component)
+            : null;
+        const saved = this.earlyReturns;
+        this.earlyReturns = early;
+        try {
+            this.blockStatements(setup, () => {
+                if (last?.kind !== 'ReturnStatement' || !last.values[0])
+                    return;
+                const previous = setup.at(-1);
+                if (previous && this.blankLineBetween(previous, last))
+                    this.blankLine();
+                const value = last.values[0];
+                this.withHoisting(true, () => {
+                    if (early)
+                        this.lastReturn(value, ending, early);
+                    else
+                        this.markup(value, result, reactive, ending);
+                });
+            });
+        }
+        finally {
+            this.earlyReturns = saved;
+        }
+    }
+}

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

@@ -0,0 +1,25 @@
+import type * as ast from '../ast.ts';
+import { ElementEmitter, type ControlStatement } from './elements.ts';
+import { type Live, type Source } from './reactive.ts';
+/**
+ * `{if ...}`, `{switch ...}` and `{for ...}` in live markup that depend on state. Markup that does
+ * not change compiles to plain control flow (see ElementEmitter.children); here helpers keep the
+ * content between markers instead, and each block is a function that creates its content and
+ * returns its update.
+ */
+export declare abstract class ControlFlowEmitter extends ElementEmitter {
+    /** Writes the code that creates the content and returns what to append; see the class. */
+    protected liveControl(statement: ControlStatement, live: Live, sources: ReadonlySet<Source>): string;
+    /** The choice of an if/else chain, `() => a ? 0 : b ? 1 : -1`, and its blocks. */
+    private ifBranches;
+    /** The choice of a switch: the same switch, returning the number of the case. */
+    private switchBranches;
+    /**
+     * The function that creates a block of markup control flow:
+     * `(item, index) => { ...; return [fragment, update]; }`. Parts of the block that depend on
+     * state go into its update. The block of `<Page />` gets the component, `($$component3) => ...`.
+     */
+    protected blockCreator(statements: readonly ast.Statement[], parent: Live, loop?: ast.ForInStatement, component?: ast.Identifier): string;
+    /** A classic `for` loop in live markup: a function that runs it and returns the content. */
+    private loopContent;
+}

package/dist/codegen/control-flow.js

@@ -0,0 +1,152 @@
+import { declarationsOf } from "./analysis.js";
+import { ElementEmitter } from "./elements.js";
+import { Block } from "./reactive.js";
+import { CONDITIONAL, indentMore, upperFirst } from "./syntax.js";
+/**
+ * `{if ...}`, `{switch ...}` and `{for ...}` in live markup that depend on state. Markup that does
+ * not change compiles to plain control flow (see ElementEmitter.children); here helpers keep the
+ * content between markers instead, and each block is a function that creates its content and
+ * returns its update.
+ */
+export class ControlFlowEmitter extends ElementEmitter {
+    /** Writes the code that creates the content and returns what to append; see the class. */
+    liveControl(statement, live, sources) {
+        const id = this.nextId();
+        const kind = statement.kind === 'IfStatement'
+            ? 'if'
+            : statement.kind === 'SwitchStatement'
+                ? 'switch'
+                : 'for';
+        const name = `$$${kind}${id}`;
+        const update = `$$update${upperFirst(kind)}${id}`;
+        let call;
+        switch (statement.kind) {
+            case 'IfStatement':
+            case 'SwitchStatement': {
+                const [choose, blocks] = statement.kind === 'IfStatement'
+                    ? this.ifBranches(statement, live)
+                    : this.switchBranches(statement, live);
+                this.helpers.add('branches');
+                call = `$$branches(${choose}, [${blocks.join(', ')}])`;
+                break;
+            }
+            case 'ForInStatement': {
+                this.helpers.add('list');
+                const items = this.liveFunction(statement.iterable);
+                call = `$$list(${items}, ${this.blockCreator(statement.body.body, live, statement)})`;
+                break;
+            }
+            case 'ForStatement':
+                // Without items to find the blocks by, the loop runs again and creates new content.
+                this.helpers.add('content');
+                call = `$$content(${this.loopContent(statement)})`;
+                break;
+        }
+        this.line(`const [${name}, ${update}] = ${call};`);
+        live.depend(sources, `${update}();`);
+        return name;
+    }
+    /** The choice of an if/else chain, `() => a ? 0 : b ? 1 : -1`, and its blocks. */
+    ifBranches(node, live) {
+        const conditions = [];
+        const blocks = [];
+        let current = node;
+        while (current?.kind === 'IfStatement') {
+            conditions.push(this.liveExpression(current.condition, CONDITIONAL + 1));
+            blocks.push(this.blockCreator(current.consequent.body, live));
+            current = current.alternate;
+        }
+        if (current)
+            blocks.push(this.blockCreator(current.body, live));
+        let choose = current ? String(conditions.length) : '-1';
+        for (let i = conditions.length - 1; i >= 0; i--)
+            choose = `${conditions[i]} ? ${i} : ${choose}`;
+        return [`() => ${choose}`, blocks];
+    }
+    /** The choice of a switch: the same switch, returning the number of the case. */
+    switchBranches(node, live) {
+        const blocks = node.cases.map((switchCase) => this.blockCreator(switchCase.body, live));
+        const choice = {
+            ...node,
+            cases: node.cases.map((switchCase, i) => ({
+                ...switchCase,
+                body: [returnNumber(i, switchCase)],
+            })),
+        };
+        const hasDefault = node.cases.some((switchCase) => switchCase.tests.length === 0);
+        const body = this.withFunction('none', [], () => this.withRendering(this.rendering + 1, () => this.block(() => {
+            this.statement(choice);
+            if (!hasDefault)
+                this.line('return -1;');
+        })));
+        return [`() => ${body}`, blocks];
+    }
+    /**
+     * The function that creates a block of markup control flow:
+     * `(item, index) => { ...; return [fragment, update]; }`. Parts of the block that depend on
+     * state go into its update. The block of `<Page />` gets the component, `($$component3) => ...`.
+     */
+    blockCreator(statements, parent, loop, component) {
+        const block = new Block(parent);
+        const params = loop
+            ? [loop.value, ...(loop.key ? [loop.key] : [])].map(parameter)
+            : component
+                ? [parameter(component)]
+                : [];
+        return this.withFunction('none', params, () => this.withRendering(this.rendering + 1, () => {
+            const paramList = this.params(params);
+            const fragment = `$$block${this.nextId()}`;
+            const body = this.block(() => this.withScope(declarationsOf(statements), () => {
+                this.line(`const ${fragment} = document.createDocumentFragment();`);
+                this.children(fragment, statements, block);
+                // The block of an item that stays gets the item's new position.
+                const key = loop?.key && loop.key.name !== '_' ? this.name(loop.key.name) : null;
+                const updates = [...(key ? [`${key} = $$index;`] : []), ...block.statements];
+                if (updates.length === 0) {
+                    this.line(`return [${fragment}];`);
+                    return;
+                }
+                const update = this.block(() => {
+                    for (const statement of updates)
+                        this.line(indentMore(statement));
+                });
+                this.line(`return [${fragment}, (${key ? '$$index' : ''}) => ${update}];`);
+            }));
+            return `(${paramList}) => ${body}`;
+        }));
+    }
+    /** A classic `for` loop in live markup: a function that runs it and returns the content. */
+    loopContent(statement) {
+        return this.withFunction('none', [], () => this.withRendering(this.rendering + 1, () => {
+            const fragment = `$$block${this.nextId()}`;
+            const body = this.block(() => {
+                this.line(`const ${fragment} = document.createDocumentFragment();`);
+                this.withContentTarget(fragment, () => this.statement(statement));
+                this.line(`return ${fragment};`);
+            });
+            return `() => ${body}`;
+        }));
+    }
+}
+/** `return 2` for the choice of a switch case. */
+function returnNumber(value, at) {
+    const number = {
+        kind: 'NumberLiteral',
+        value,
+        raw: String(value),
+        start: at.start,
+        end: at.start,
+    };
+    return { kind: 'ReturnStatement', values: [number], start: at.start, end: at.start };
+}
+/** A loop variable as a parameter of the function that creates the loop's blocks. */
+function parameter(name) {
+    return {
+        kind: 'Parameter',
+        name,
+        type: null,
+        defaultValue: null,
+        start: name.start,
+        end: name.end,
+    };
+}

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

@@ -0,0 +1,28 @@
+import type * as ast from '../ast.ts';
+import { SimpleStatementEmitter } from './simple-statements.ts';
+/** if, for, switch and try. */
+export declare abstract class ControlStatementEmitter extends SimpleStatementEmitter {
+    protected ifStatement(node: ast.IfStatement): string;
+    protected loopBody(body: ast.BlockStatement): string;
+    protected forStatement(node: ast.ForStatement): void;
+    /** A statement inside a `for` header, without the `;`. */
+    protected simpleStatement(node: ast.SimpleStatement): string;
+    /**
+     * `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.
+     */
+    protected forInStatement(node: ast.ForInStatement): void;
+    /** Each `case` ends with an implicit `break`; a case with declarations gets its own block. */
+    protected switchStatement(node: ast.SwitchStatement, discriminant: ast.Expression): void;
+    /**
+     * `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.
+     */
+    protected selectStatement(node: ast.SelectStatement): void;
+    /**
+     * `switch { case cond: ... }` becomes an if/else chain. A `break` inside it must leave the
+     * switch, not an enclosing loop, so then the chain gets a label to break to.
+     */
+    protected taglessSwitch(node: ast.SwitchStatement): void;
+    protected tryStatement(node: ast.TryStatement): string;
+}