rooklang 0.3.4 → 0.4.1

package/dist/codegen/component-props.js

@@ -3,6 +3,7 @@ import { declaredNames } from "../names.js";
 import { isConstant, isSimple, rootName } from "./analysis.js";
 import { ControlFlowEmitter } from "./control-flow.js";
 import { Reactive, updatesOf } from "./reactive.js";
+import { rootsOf } from "./shared.js";
 import { ARROW, indentMore, lowerFirst, POSTFIX, upperFirst } from "./syntax.js";
 import { withoutTrailingUndefined } from "./component-helpers.js";
 /** The properties of components: their values, spread objects, and calls of function components. */
@@ -12,7 +13,7 @@ export class ComponentPropsEmitter extends ControlFlowEmitter {
     /** Setters waiting for their place at the top of an inlined component, by its result. */
     pendingSetters = new Map();
     /**
-     * In a component with `mount()`: the variable that gets its first node once the markup is
+     * In a component with `mount`: the variable that gets its first node once the markup is
      * created, so that `$$mount` can wait until that node is in the document.
      */
     mountNode = null;
@@ -20,15 +21,17 @@ export class ComponentPropsEmitter extends ControlFlowEmitter {
      * A use of a recursive component: a call of its function. The parent's updates call the
      * returned function with the new values of the properties that depend on its state.
      */
-    callComponent(component, values, reactiveProps, live, root) {
+    callComponent(component, values, reactiveProps, live, root, binders = new Map()) {
         const name = component.name.name;
         const id = this.nextId();
         const result = `$$${lowerFirst(name)}${id}`;
         // A missing property with a default value is left undefined, so that the default applies.
         const argument = (param) => values.get(param.name.name) ?? (param.defaultValue ? 'undefined' : 'null');
-        // The element a ref created for it goes last, as `$$root`.
+        // The functions that write bound properties into the caller come next, then the element a ref
+        // created for it, as `$$root`.
         const args = withoutTrailingUndefined([
             ...component.params.map(argument),
+            ...boundParams(component).map((param) => binders.get(param.name.name) ?? 'undefined'),
             ...(root === undefined ? [] : [root]),
         ]);
         const fn = this.functionNames.get(component) ?? `$$${name}`;
@@ -49,13 +52,51 @@ export class ComponentPropsEmitter extends ControlFlowEmitter {
         live.depend(sources, `${setter}(${setterArgs.join(', ')});`);
         return result;
     }
+    /**
+     * `bind:active={tab}`: the function that the component calls with the new value of `active`. It
+     * is written in the caller, so it writes the caller's `tab` and updates what reads it there.
+     */
+    binder(target) {
+        const name = `$$bind${this.nextId()}`;
+        const text = this.liveExpression(target);
+        // `todos` of `bind:todos={todos}`, or the state that `bind:open={menu.open}` writes into.
+        const written = [...(this.reactive?.rootSources(target) ?? [])].filter((source) => source.kind === 'state');
+        const body = this.block(() => {
+            this.line(`${text} = $$value;`);
+            for (const name of rootsOf(target, this.shared)) {
+                this.line(`$$changed(${this.shared.listeners.get(name)});`);
+            }
+            for (const source of written)
+                this.line(`${this.write(source)};`);
+        });
+        this.line(`const ${name} = ($$value) => ${body};`);
+        return name;
+    }
+    /** `$$bindActive?.(active);` in a function component, which gets the binders as arguments. */
+    bindersOf(component, reactive) {
+        return boundParams(component).map((param) => {
+            const binder = `$$bind${upperFirst(param.name.name)}`;
+            reactive.sources.get(param.name.name).bound = `${binder}?.(${this.name(param.name.name)});`;
+            return binder;
+        });
+    }
     reactiveOf(component, props) {
+        const shared = new Set(this.shared.listeners.keys());
         return new Reactive(component, this.fn, props, (sourceName, kind) => {
             const id = this.nextId();
             // `$$card$price`, an argument of a decorator, is updated by `$$updateCard$price3`.
             const update = `$$update${upperFirst(sourceName.replace(/^\$\$/, ''))}${id}`;
-            return { id, name: sourceName, kind, update, computations: [], dependents: [], writes: [] };
-        });
+            return {
+                id,
+                name: sourceName,
+                kind,
+                update,
+                computations: [],
+                dependents: [],
+                writes: [],
+                bound: null,
+            };
+        }, shared);
     }
     /**
      * `title, kind = "info"`: parameters with their default values, each name with a prefix. A tag
@@ -171,3 +212,7 @@ export class ComponentPropsEmitter extends ControlFlowEmitter {
         }
     }
 }
+/** The bound properties of a component, `bind active string`, in their order. */
+export function boundParams(component) {
+    return component.params.filter((param) => param.bind);
+}

package/dist/codegen/components.d.ts

@@ -19,16 +19,17 @@ export declare abstract class ComponentEmitter extends StyleEmitter {
      * reads; one that reads no state is a constant.
      */
     private derivedValue;
+    /**
+     * `derived summary { ... }`: the block becomes a function that computes the value, called first
+     * and in the updates of what it reads; one that reads no state runs once. The block computes
+     * while the markup is created or updated, so it calls no updates, as the expressions there.
+     */
+    private derivedBlock;
     /**
      * An argument of a decorator that reads properties of the component: when they change, it is
      * computed again, and what reads it is updated.
      */
     private decoratorArgument;
-    /**
-     * `mount() { ... }` becomes `$$mount(() => { ... })`. Its body runs later, like a handler: what
-     * it changes updates the markup.
-     */
-    protected mountStatement(node: ast.MountStatement): void;
     /**
      * Inlines a component: its code goes into a block where its properties are constants. Attribute
      * values are computed before the block, so that the component's own names cannot hide the

package/dist/codegen/components.js

@@ -50,6 +50,10 @@ export class ComponentEmitter extends StyleEmitter {
         const { reactive } = this;
         const [name] = node.names;
         const [value] = node.values;
+        if (node.body && name) {
+            this.derivedBlock(name, node.body.body);
+            return;
+        }
         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)
@@ -57,6 +61,25 @@ export class ComponentEmitter extends StyleEmitter {
         const expression = this.withHoisting(false, () => this.expression(value, ARROW));
         reactive.compute(sources, `${this.name(name.name)} = ${expression};`);
     }
+    /**
+     * `derived summary { ... }`: the block becomes a function that computes the value, called first
+     * and in the updates of what it reads; one that reads no state runs once. The block computes
+     * while the markup is created or updated, so it calls no updates, as the expressions there.
+     */
+    derivedBlock(name, block) {
+        const { reactive } = this;
+        const sources = reactive ? reactive.dependencies(block) : new Set();
+        const [, body] = this.withRendering(this.rendering + 1, () => this.func([], block));
+        const variable = this.name(name.name);
+        if (!reactive || sources.size === 0) {
+            this.line(`const ${variable} = (() => ${body})();`);
+            return;
+        }
+        const compute = `$$compute${upperFirst(name.name)}${this.nextId()}`;
+        this.line(`const ${compute} = () => ${body};`);
+        this.line(`let ${variable} = ${compute}();`);
+        reactive.compute(sources, `${variable} = ${compute}();`);
+    }
     /**
      * An argument of a decorator that reads properties of the component: when they change, it is
      * computed again, and what reads it is updated.
@@ -67,26 +90,13 @@ export class ComponentEmitter extends StyleEmitter {
         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'));
+        // Properties, or an argument of a decorator that includes this one, which changes with them.
+        const props = new Set([...reactive.dependencies(value)].filter((each) => each !== source));
         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.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
@@ -101,6 +111,7 @@ export class ComponentEmitter extends StyleEmitter {
             this.line(`// <${name}>`);
         const values = new Map();
         const reactiveProps = new Map();
+        const binders = new Map();
         const rest = attrsParam(component);
         const forwarded = [];
         for (const attribute of node.attributes) {
@@ -108,9 +119,12 @@ export class ComponentEmitter extends StyleEmitter {
                 this.spreadProps(attribute.argument, component, live, values, reactiveProps);
                 continue;
             }
-            const prop = attribute.name.name;
+            const bound = attribute.name.name.startsWith('bind:');
+            const prop = bound ? attribute.name.name.slice('bind:'.length) : attribute.name.name;
             if (prop === 'ref')
                 continue;
+            if (bound)
+                binders.set(prop, this.binder(attribute.value));
             if (rest && !component.params.some((param) => param.name.name === prop)) {
                 forwarded.push(attribute);
                 continue;
@@ -133,8 +147,9 @@ export class ComponentEmitter extends StyleEmitter {
         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);
+        if (isFunction) {
+            return this.callComponent(component, values, reactiveProps, live, root?.name, binders);
+        }
         const result = `$$${lowerFirst(name)}${this.nextId()}`;
         const label = hasEarlyReturn(component) ? `$$body${this.nextId()}` : null;
         const mountNode = hasMount(component) ? `$$mountNode${this.nextId()}` : null;
@@ -153,8 +168,12 @@ export class ComponentEmitter extends StyleEmitter {
             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};`);
+                const name = this.name(param.name.name);
+                const binder = binders.get(param.name.name);
+                const keyword = setters.has(param.name.name) || param.bind ? 'let' : 'const';
+                this.line(`${keyword} ${name} = ${value};`);
+                if (binder)
+                    reactive.sources.get(param.name.name).bound = `${binder}(${name});`;
             }
             this.body(component, result, reactive, { kind: 'inline', setters }, label);
         })))));
@@ -182,7 +201,11 @@ export class ComponentEmitter extends StyleEmitter {
             // 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'] : [])]
+            const params = [
+                this.parameters(component.params, ''),
+                ...this.bindersOf(component, reactive),
+                ...(preset ? ['$$root'] : []),
+            ]
                 .filter((each) => each !== '')
                 .join(', ');
             const body = this.withRefs(component, preset, () => this.withStyles(component, result, () => this.inComponent(reactive, mountNode, () => this.block(() => {

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

@@ -20,6 +20,8 @@ export declare abstract class ControlFlowEmitter extends ElementEmitter {
      * 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;
+    /** The key of a list, `with key todo.id`: `(todo) => todo.id`, which its blocks are found by. */
+    private listKey;
     /** A classic `for` loop in live markup: a function that runs it and returns the content. */
     private loopContent;
 }

package/dist/codegen/control-flow.js

@@ -31,7 +31,9 @@ export class ControlFlowEmitter extends ElementEmitter {
             }
             case 'ForInStatement': {
                 const items = this.liveFunction(statement.iterable);
-                call = `$$list(${items}, ${this.blockCreator(statement.body.body, live, statement)})`;
+                const create = this.blockCreator(statement.body.body, live, statement);
+                const key = statement.withKey ? `, ${this.listKey(statement, statement.withKey)}` : '';
+                call = `$$list(${items}, ${create}${key})`;
                 break;
             }
             case 'ForStatement':
@@ -85,20 +87,22 @@ export class ControlFlowEmitter extends ElementEmitter {
      */
     blockCreator(statements, parent, loop, component) {
         const block = new Block(parent);
-        const params = loop
-            ? [loop.value, ...(loop.key ? [loop.key] : [])].map(parameter)
-            : component
-                ? [parameter(component)]
-                : [];
+        const params = loop ? loopParameters(loop) : 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.
+                // The block of an item that stays gets the item's new position, and with a key the
+                // item itself, which may be another object with the same key.
                 const key = loop?.key && loop.key.name !== '_' ? this.name(loop.key.name) : null;
-                const updates = [...(key ? [`${key} = $$index;`] : []), ...block.statements];
+                const item = loop?.withKey && loop.value.name !== '_' ? this.name(loop.value.name) : null;
+                const updates = [
+                    ...(key ? [`${key} = $$index;`] : []),
+                    ...(item ? [`${item} = $$item;`] : []),
+                    ...block.statements,
+                ];
                 if (updates.length === 0) {
                     this.line(`return [${fragment}];`);
                     return;
@@ -107,11 +111,17 @@ export class ControlFlowEmitter extends ElementEmitter {
                     for (const statement of updates)
                         this.line(indentMore(statement));
                 });
-                this.line(`return [${fragment}, (${key ? '$$index' : ''}) => ${update}];`);
+                const args = item ? '$$index, $$item' : key ? '$$index' : '';
+                this.line(`return [${fragment}, (${args}) => ${update}];`);
             }));
             return `(${paramList}) => ${body}`;
         }));
     }
+    /** The key of a list, `with key todo.id`: `(todo) => todo.id`, which its blocks are found by. */
+    listKey(loop, key) {
+        const params = loopParameters(loop);
+        return this.withFunction('none', params, () => `(${this.params(params)}) => ${this.expression(key, CONDITIONAL)}`);
+    }
     /** 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, () => {
@@ -136,6 +146,10 @@ function returnNumber(value, at) {
     };
     return { kind: 'ReturnStatement', values: [number], start: at.start, end: at.start };
 }
+/** The variables of a loop, `(todo, i)`, as the parameters of its blocks and of its key. */
+function loopParameters(loop) {
+    return [loop.value, ...(loop.key ? [loop.key] : [])].map(parameter);
+}
 /** A loop variable as a parameter of the function that creates the loop's blocks. */
 function parameter(name) {
     return {

package/dist/codegen/creation.js

@@ -70,11 +70,14 @@ export class CreationEmitter extends AttributeEmitter {
                 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}\``;
+                return `\`\${${this.classText(value, text)}} ${scope}\``;
             });
         }
+        if (name === 'class' && value !== null && this.isClassList(value)) {
+            const key = svg ? 'class' : 'className';
+            return this.valueEntry(element, svg, key, value, live, (text) => `$$classes(${text})`);
+        }
         // SVG attributes are set with setAttribute: their properties are objects.
         const property = svg ? null : domProperty(tag, name);
         if (value === null) {

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

@@ -3,6 +3,7 @@ import { type LocalizedPackage } from './imported.ts';
 import type { Root } from '../refs.ts';
 import type { BindingKind } from './analysis.ts';
 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 {
@@ -30,6 +31,8 @@ interface FunctionContext {
 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;

package/dist/codegen/emitter.js

@@ -4,6 +4,7 @@ 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
@@ -19,6 +20,8 @@ import { JS_RESERVED, JS_UNDECLARABLE } from "./syntax.js";
 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 = [];
@@ -68,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) => {

package/dist/codegen/expressions.js

@@ -80,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.

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/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;
+}