rooklang 0.0.0-stage → 0.3.0

package/dist/codegen/calls.js

@@ -0,0 +1,106 @@
+import { typedArrayOf } from "../checker/types.js";
+import { isYieldCall } from "../iterators.js";
+import { TYPED_ARRAYS, TYPED_ELEMENTS } from "../typed-arrays.js";
+import { hasOptionalLink } from "./analysis.js";
+import { ExpressionEmitter } from "./expressions.js";
+import { ARROW, BINARY, POSTFIX } from "./syntax.js";
+// Calls, `new`, array literals and conversions. A `[]byte` is a Uint8Array: a literal where the
+// checker found one expected becomes `new Uint8Array([...])`, and the conversions of Go between
+// text and its UTF-8 bytes use TextEncoder and TextDecoder, `[]byte(s)` and `string(data)`. In an
+// iterator, a generator, `yield(v)` yields: its value is `true`, since a generator that the loop
+// over it leaves is closed at that `yield` and goes no further, so `false` is never seen.
+export class CallEmitter extends ExpressionEmitter {
+    call(node) {
+        // After `?.` the arguments may not be evaluated at all.
+        const conditional = node.optional || hasOptionalLink(node.callee);
+        const args = this.withHoisting(this.hoist && !conditional, () => this.elements(node.arguments));
+        if (this.isBuiltinError(node.callee) && !node.optional)
+            return `new Error(${args})`;
+        if (this.isStringConversion(node.callee))
+            return `new TextDecoder().decode(${args})`;
+        const yielded = this.yielded(node);
+        if (yielded !== null)
+            return `(${yielded}, true)`;
+        return `${this.expression(node.callee, POSTFIX)}${node.optional ? '?.' : ''}(${args})`;
+    }
+    /** `yield v` for `yield(v)` in an iterator, `yield [k, v]` for `yield(k, v)`; else `null`. */
+    yielded(node) {
+        if (!this.fn.iterator || !isYieldCall(node) || this.lookup('yield') !== 'param')
+            return null;
+        const values = node.arguments.map((argument) => this.expression(argument.kind === 'SpreadElement' ? argument.argument : argument, ARROW));
+        return values.length === 1 ? `yield ${values[0]}` : `yield [${values.join(', ')}]`;
+    }
+    expressionStatement(node) {
+        return this.yielded(node) ?? super.expressionStatement(node);
+    }
+    /** `if !yield(v) { return }`, the way an iterator of Go stops: in a generator, `yield v`. */
+    yieldStatement(node) {
+        const [only] = node.consequent.body;
+        const { condition } = node;
+        if (node.alternate ||
+            node.consequent.body.length !== 1 ||
+            only?.kind !== 'ReturnStatement' ||
+            only.values.length > 0 ||
+            condition.kind !== 'UnaryExpression' ||
+            condition.operator !== '!') {
+            return null;
+        }
+        return this.yielded(condition.argument);
+    }
+    /** `string(data)`, unless `string` is the name of a value here. */
+    isStringConversion(callee) {
+        return callee.kind === 'Identifier' && callee.name === 'string' && !this.lookup('string');
+    }
+    newExpression(node) {
+        return `new ${this.newCallee(node.callee)}(${this.elements(node.arguments)})`;
+    }
+    /** `new (f())()` and `new (a?.B)()` need parentheses around the class expression. */
+    newCallee(callee) {
+        let node = callee;
+        let needsParens = false;
+        while (true) {
+            if (node.kind === 'CallExpression') {
+                needsParens = true;
+                break;
+            }
+            if (node.kind !== 'MemberExpression' && node.kind !== 'IndexExpression')
+                break;
+            if (node.optional) {
+                needsParens = true;
+                break;
+            }
+            node = node.object;
+        }
+        return this.expression(callee, POSTFIX, needsParens);
+    }
+    arrayLiteral(node) {
+        const array = `[${this.elements(node.elements)}]`;
+        const type = this.options.types?.get(node);
+        const typed = type && typedArrayOf(type);
+        return typed ? `new ${typed}(${array})` : array;
+    }
+    /**
+     * `make([]float64, n)` → `new Float64Array(n)`; with `shared`, on a SharedArrayBuffer of its
+     * size in bytes, `new Float64Array($$shared(8 * n))`. Without types the name is the one written.
+     */
+    make(node) {
+        const type = this.options.types?.get(node);
+        const written = node.type.kind === 'ArrayType' && node.type.element.kind === 'TypeReference'
+            ? TYPED_ELEMENTS.get(node.type.element.name.name)
+            : node.type.kind === 'TypeReference'
+                ? node.type.name.name
+                : undefined;
+        const typed = (type && typedArrayOf(type)) ?? written ?? 'Array';
+        if (!node.shared)
+            return `new ${typed}(${this.expression(node.length, ARROW)})`;
+        const size = TYPED_ARRAYS.get(typed) ?? 1;
+        const bytes = size === 1
+            ? this.expression(node.length, ARROW)
+            : `${size} * ${this.expression(node.length, BINARY['*'] + 1)}`;
+        this.helpers.add('shared');
+        return `new ${typed}($$shared(${bytes}))`;
+    }
+    conversion(node) {
+        return `new TextEncoder().encode(${this.expression(node.argument, 0)})`;
+    }
+}

package/dist/codegen/chan-helpers.d.ts

@@ -0,0 +1,2 @@
+export type ChanHelper = 'chan' | 'timers';
+export declare const CHAN_HELPERS: Readonly<Record<ChanHelper, readonly string[]>>;

package/dist/codegen/chan-helpers.js

@@ -0,0 +1,253 @@
+// The helpers of channels: sending, receiving and closing, here or in the thread that made the
+// channel (thread-helpers.ts), and the queues of a channel. Receiving from a closed channel gives
+// the zero value of its type, as in Go.
+export const CHAN_HELPERS = {
+    chan: [
+        '$$registry().handle ??= { message: $$message, pump: $$pump };',
+        '',
+        'function $$chan(size, zero) {',
+        '  const registry = $$registry();',
+        '  const id = `${registry.key}:${registry.channels++}`;',
+        '  const channel = { $$chan: id, size, zero };',
+        '  registry.states.set(id, {',
+        '    size,',
+        '    zero,',
+        '    buffer: [],',
+        '    receivers: [],',
+        '    senders: [],',
+        '    closed: false,',
+        '    holders: 1,',
+        '    busy: false,',
+        '  });',
+        '  $$adopt(channel);',
+        '  return channel;',
+        '}',
+        '',
+        '// A local operation waits in the queue of its channel; one of another thread asks the thread',
+        '// that made the channel.',
+        'function $$send(channel, value) {',
+        '  const id = channel.$$chan;',
+        '  const owner = $$ownerOf(id);',
+        '  if (owner !== $$registry().key) return $$ask(owner, { op: "send", channel: id, value });',
+        '  return new Promise((resolve, reject) => $$wait(id, "senders", { value, done: resolve, fail: reject }));',
+        '}',
+        '',
+        'function $$receive(channel, withOk = false) {',
+        '  const id = channel.$$chan;',
+        '  const owner = $$ownerOf(id);',
+        '  const received =',
+        '    owner !== $$registry().key',
+        '      ? $$ask(owner, { op: "receive", channel: id })',
+        '      : new Promise((resolve, reject) => $$wait(id, "receivers", { done: resolve, fail: reject }));',
+        '  return withOk ? received : received.then(([value]) => value);',
+        '}',
+        '',
+        '// Closing a channel of another thread fails this one if it was closed already, as a panic would.',
+        'function $$close(channel) {',
+        '  const id = channel.$$chan;',
+        '  const owner = $$ownerOf(id);',
+        '  if (owner === $$registry().key) return $$closeHere(id);',
+        '  $$ask(owner, { op: "close", channel: id }).catch((error) => {',
+        '    setTimeout(() => {',
+        '      throw error;',
+        '    });',
+        '  });',
+        '}',
+        '',
+        'function $$closeHere(id) {',
+        '  const state = $$registry().states.get(id);',
+        '  if (state.closed) throw new Error("close of a closed channel");',
+        '  state.closed = true;',
+        '  $$pump(id);',
+        '}',
+        '',
+        'async function* $$range(channel) {',
+        '  while (true) {',
+        '    const [value, ok] = await $$receive(channel, true);',
+        '    if (!ok) return;',
+        '    yield value;',
+        '  }',
+        '}',
+        '',
+        'function $$wait(id, queue, entry) {',
+        '  const state = $$registry().states.get(id);',
+        '  if (!state) return entry.fail?.($$stopped());',
+        '  state[queue].push(entry);',
+        '  $$pump(id);',
+        '}',
+        '',
+        '// The operations of other threads on the channels of this one.',
+        'function $$message(from, data) {',
+        '  const answer = (value) => $$post(from, { answer: data.ask, value });',
+        '  const fail = (error) => $$post(from, { answer: data.ask, error });',
+        '  const select = { key: from, sid: data.sid };',
+        '  switch (data.op) {',
+        '    case "send":',
+        '      return $$wait(data.channel, "senders", { from, value: data.value, done: answer, fail });',
+        '    case "receive":',
+        '      return $$wait(data.channel, "receivers", { from, done: answer, fail });',
+        '    case "close":',
+        '      try {',
+        '        $$closeHere(data.channel);',
+        '        return answer();',
+        '      } catch (error) {',
+        '        return fail(error);',
+        '      }',
+        '    case "try":',
+        '      try {',
+        '        return answer($$try(data.channel, data.send, data.value));',
+        '      } catch (error) {',
+        '        return fail(error);',
+        '      }',
+        '    case "select":',
+        '      return $$select(data.cases, data.hasDefault).then(answer, fail);',
+        '    case "wait":',
+        '      return $$wait(data.channel, data.send ? "senders" : "receivers", {',
+        '        select,',
+        '        case: data.case,',
+        '        value: data.value,',
+        '      });',
+        '    case "cancel":',
+        '      return $$unwait(select, data.channels);',
+        '    case "lock":',
+        '      return answer($$lock(data.sid));',
+        '    case "unlock":',
+        '      return $$unlock(data.sid);',
+        '    case "commit":',
+        '      return $$commit(data.sid, data.case, data.result, data.error);',
+        '  }',
+        '}',
+        '',
+        '// Matches what waits in a channel: a receiver with a value of the buffer, a sender or the zero value',
+        '// after close; a sender with room in the buffer. A case of a select goes on only if its select',
+        '// has not gone on with another case, which the thread of the select tells.',
+        'function $$pump(id) {',
+        '  const state = $$registry().states.get(id);',
+        '  while (state && !state.busy) {',
+        '    const [receiver] = state.receivers;',
+        '    const [sender] = state.senders;',
+        '    if (receiver && (state.buffer.length > 0 || state.closed)) {',
+        '      if (!$$pair(id, state, receiver, null)) return;',
+        '    } else if (receiver && sender) {',
+        '      if (!$$pair(id, state, receiver, sender)) return;',
+        '    } else if (sender && (state.closed || state.buffer.length < state.size)) {',
+        '      if (!$$pair(id, state, null, sender)) return;',
+        '    } else {',
+        '      return;',
+        '    }',
+        '  }',
+        '}',
+        '',
+        '// Whether the pump can go on at once: a pair whose selects are all in this thread is decided here.',
+        'function $$pair(id, state, receiver, sender) {',
+        '  const entries = [receiver, sender].filter((entry) => entry !== null);',
+        '  const key = $$registry().key;',
+        '  if (entries.some((entry) => entry.select && entry.select.key !== key)) {',
+        '    $$pairLater(id, state, receiver, sender);',
+        '    return false;',
+        '  }',
+        '  const locks = entries.map((entry) => (entry.select ? $$lock(entry.select.sid) : "locked"));',
+        '  if (locks.every((lock) => lock === "locked")) {',
+        '    $$complete(state, receiver, sender);',
+        '    return true;',
+        '  }',
+        '  entries.forEach((entry, i) => locks[i] === "locked" && $$unlockAt(entry.select));',
+        '  return $$settle(id, state, entries, locks);',
+        '}',
+        '',
+        '// A pair with a select of another thread: the channel waits for the answers of that thread.',
+        'async function $$pairLater(id, state, receiver, sender) {',
+        '  state.busy = true;',
+        '  const entries = [receiver, sender].filter((entry) => entry !== null);',
+        '  const locks = [];',
+        '  for (const { select } of entries) {',
+        '    const lock = !select',
+        '      ? "locked"',
+        '      : select.key === $$registry().key',
+        '        ? $$lock(select.sid)',
+        '        : await $$ask(select.key, { op: "lock", sid: select.sid }).catch(() => "done");',
+        '    locks.push(lock);',
+        '    if (lock !== "locked") break;',
+        '  }',
+        '  state.busy = false;',
+        '  if (locks.length === entries.length && locks.every((lock) => lock === "locked")) {',
+        '    $$complete(state, receiver, sender);',
+        '  } else {',
+        '    entries.forEach((entry, i) => locks[i] === "locked" && $$unlockAt(entry.select));',
+        '    if (!$$settle(id, state, entries, locks)) return;',
+        '  }',
+        '  $$pump(id);',
+        '}',
+        '',
+        '// After a pair that could not go on: a select that has gone on leaves the queue; one that another',
+        '// channel is deciding is tried again a little later.',
+        'function $$settle(id, state, entries, locks) {',
+        '  entries.forEach((entry, i) => {',
+        '    if (locks[i] === "done") $$remove(state, entry);',
+        '  });',
+        '  if (locks.includes("done")) return true;',
+        '  setTimeout(() => $$pump(id), 1 + Math.random() * 4);',
+        '  return false;',
+        '}',
+        '',
+        'function $$remove(state, entry) {',
+        '  for (const queue of [state.receivers, state.senders]) {',
+        '    const at = queue.indexOf(entry);',
+        '    if (at >= 0) queue.splice(at, 1);',
+        '  }',
+        '}',
+        '',
+        '// Takes the pair off the queues and passes the value.',
+        'function $$complete(state, receiver, sender) {',
+        '  if (receiver) $$remove(state, receiver);',
+        '  if (sender) $$remove(state, sender);',
+        '  if (receiver) {',
+        '    const result =',
+        '      state.buffer.length > 0',
+        '        ? [state.buffer.shift(), true]',
+        '        : sender',
+        '          ? [sender.value, true]',
+        '          : [Array.isArray(state.zero) ? [] : state.zero, false];',
+        '    $$finish(receiver, result);',
+        '    if (sender) $$finish(sender);',
+        '  } else if (state.closed) {',
+        '    $$finish(sender, undefined, new Error("send on a closed channel"));',
+        '  } else {',
+        '    state.buffer.push(sender.value);',
+        '    $$finish(sender);',
+        '  }',
+        '}',
+        '',
+        'function $$finish(entry, result, error) {',
+        '  const { select } = entry;',
+        '  if (!select) return error ? entry.fail(error) : entry.done(result);',
+        '  if (select.key === $$registry().key) return $$commit(select.sid, entry.case, result, error);',
+        '  $$post(select.key, { op: "commit", sid: select.sid, case: entry.case, result, error });',
+        '}',
+        '',
+        'function $$unlockAt(select) {',
+        '  if (!select) return;',
+        '  if (select.key === $$registry().key) $$unlock(select.sid);',
+        '  else $$post(select.key, { op: "unlock", sid: select.sid });',
+        '}',
+    ],
+    timers: [
+        '// `after(ms)`: a channel that gets the time once, after `ms`. `tick(ms)`: one that gets it every',
+        '// `ms` until it is closed; a tick that finds the last one still there is dropped, as in Go.',
+        'function $$after(ms) {',
+        '  const channel = $$chan(1, 0);',
+        '  setTimeout(() => $$send(channel, Date.now()), ms);',
+        '  return channel;',
+        '}',
+        '',
+        'function $$tick(ms) {',
+        '  const channel = $$chan(1, 0);',
+        '  const timer = setInterval(() => {',
+        '    const state = $$registry().states.get(channel.$$chan);',
+        '    if (!state || state.closed) clearInterval(timer);',
+        '    else $$try(channel.$$chan, true, Date.now());',
+        '  }, ms);',
+        '  return channel;',
+        '}',
+    ],
+};

package/dist/codegen/component-helpers.d.ts

@@ -0,0 +1,33 @@
+import type * as ast from '../ast.ts';
+import type { Reactive } from './reactive.ts';
+/** How the code of a component ends: inlined into a block, or the body of a function. */
+export type Ending = {
+    kind: 'inline';
+    setters: ReadonlyMap<string, string>;
+} | {
+    kind: 'function';
+    props: readonly ast.Parameter[];
+};
+/**
+ * A component with an early `return`. The body runs once, so which markup it returns is decided
+ * once, when it is created. Each returned markup gets its own update, kept in `view`.
+ */
+export interface EarlyReturns {
+    /** The function context of the body; a `return` in a nested function is that function's. */
+    fn: unknown;
+    result: string;
+    reactive: Reactive;
+    view: string;
+    /** Leaves the body: `break $$body3;` or `return [$$tree4, $$setTree5];` */
+    exit: string;
+    /** In a function: the function that sets the properties, declared once for every return. */
+    setter: string | null;
+}
+/** Marks where the setters of an inlined component with early returns go: before any return. */
+export declare const SETTERS: string;
+/** `f(a, undefined, undefined)` → `f(a)`: missing arguments are undefined anyway. */
+export declare function withoutTrailingUndefined(args: string[]): string[];
+/** Whether a component has `mount() { ... }`. */
+export declare function hasMount(component: ast.ComponentDeclaration): boolean;
+/** Whether a component returns before the end of its body. */
+export declare function hasEarlyReturn(component: ast.ComponentDeclaration): boolean;

package/dist/codegen/component-helpers.js

@@ -0,0 +1,18 @@
+import { containsReturn } from "../recursion.js";
+/** Marks where the setters of an inlined component with early returns go: before any return. */
+export const SETTERS = String.fromCharCode(0xe002);
+/** `f(a, undefined, undefined)` → `f(a)`: missing arguments are undefined anyway. */
+export function withoutTrailingUndefined(args) {
+    let end = args.length;
+    while (end > 0 && args[end - 1] === 'undefined')
+        end--;
+    return args.slice(0, end);
+}
+/** Whether a component has `mount() { ... }`. */
+export function hasMount(component) {
+    return component.body.body.some((statement) => statement.kind === 'MountStatement');
+}
+/** Whether a component returns before the end of its body. */
+export function hasEarlyReturn(component) {
+    return component.body.body.slice(0, -1).some(containsReturn);
+}

package/dist/codegen/component-props.d.ts

@@ -0,0 +1,42 @@
+import type * as ast from '../ast.ts';
+import { ControlFlowEmitter } from './control-flow.ts';
+import { Reactive, type Live, type Source } from './reactive.ts';
+import { type EarlyReturns } from './component-helpers.ts';
+/** The properties of components: their values, spread objects, and calls of function components. */
+export declare abstract class ComponentPropsEmitter extends ControlFlowEmitter {
+    protected readonly componentNames: Map<ast.ComponentDeclaration, Set<string>>;
+    protected earlyReturns: EarlyReturns | null;
+    /** Setters waiting for their place at the top of an inlined component, by its result. */
+    protected readonly pendingSetters: Map<string, string[]>;
+    /**
+     * In a component with `mount()`: the variable that gets its first node once the markup is
+     * created, so that `$$mount` can wait until that node is in the document.
+     */
+    protected mountNode: string | null;
+    /**
+     * A use of a recursive component: a call of its function. The parent's updates call the
+     * returned function with the new values of the properties that depend on its state.
+     */
+    protected callComponent(component: ast.ComponentDeclaration, values: ReadonlyMap<string, string>, reactiveProps: ReadonlyMap<string, [string, Set<Source>]>, live: Live | null, root?: string): string;
+    protected reactiveOf(component: ast.ComponentDeclaration, props: Iterable<string>): Reactive;
+    /**
+     * `title, kind = "info"`: parameters with their default values, each name with a prefix. A tag
+     * that takes the component from a value may leave out `children`: they are empty then.
+     */
+    protected parameters(params: readonly ast.Parameter[], prefix: string): string;
+    /** `{ title = $$title; ...updates of what reads it... }` */
+    protected setterBody(props: readonly string[], reactive: Reactive): string;
+    /** `return [node, (...) => { ... }]`: the node and the function that sets the properties. */
+    protected functionResult(result: string, reactive: Reactive, props: readonly ast.Parameter[]): void;
+    /**
+     * The value of a component property. Literals and names that the component does not redeclare
+     * go into its code as they are; anything else is computed before the block into a temporary.
+     */
+    protected prop(attribute: ast.JsxAttribute, component: ast.ComponentDeclaration): string;
+    protected propValue(value: ast.Expression, component: ast.ComponentDeclaration): string;
+    /**
+     * `<Product {...product} />`: properties that the object has get their values from it. Later
+     * attributes override them. The object is computed once, before the component's block.
+     */
+    protected spreadProps(argument: ast.Expression, component: ast.ComponentDeclaration, live: Live | null, values: Map<string, string>, reactiveProps: Map<string, [string, Set<Source>]>): void;
+}

package/dist/codegen/component-props.js

@@ -0,0 +1,173 @@
+import { spreadFields } from "../checker/types.js";
+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 { 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. */
+export class ComponentPropsEmitter extends ControlFlowEmitter {
+    componentNames = new Map();
+    earlyReturns = null;
+    /** 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
+     * created, so that `$$mount` can wait until that node is in the document.
+     */
+    mountNode = null;
+    /**
+     * 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) {
+        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`.
+        const args = withoutTrailingUndefined([
+            ...component.params.map(argument),
+            ...(root === undefined ? [] : [root]),
+        ]);
+        const fn = this.functionNames.get(component) ?? `$$${name}`;
+        const call = `${fn}(${args.join(', ')})`;
+        if (!live || reactiveProps.size === 0) {
+            this.line(`const [${result}] = ${call};`);
+            return result;
+        }
+        const setter = `$$set${name}${id}`;
+        this.line(`const [${result}, ${setter}] = ${call};`);
+        const sources = new Set();
+        for (const [, propSources] of reactiveProps.values()) {
+            for (const source of propSources)
+                sources.add(source);
+        }
+        const settable = component.params.filter((param) => param.name.name !== 'children' && !param.rest);
+        const setterArgs = withoutTrailingUndefined(settable.map((param) => reactiveProps.get(param.name.name)?.[0] ?? argument(param)));
+        live.depend(sources, `${setter}(${setterArgs.join(', ')});`);
+        return result;
+    }
+    reactiveOf(component, props) {
+        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: [] };
+        });
+    }
+    /**
+     * `title, kind = "info"`: parameters with their default values, each name with a prefix. A tag
+     * that takes the component from a value may leave out `children`: they are empty then.
+     */
+    parameters(params, prefix) {
+        return params
+            .map((param) => {
+            const name = `${prefix}${prefix ? param.name.name : this.name(param.name.name)}`;
+            if (param.defaultValue)
+                return `${name} = ${this.expression(param.defaultValue, ARROW)}`;
+            return param.name.name === 'children' && !param.rest
+                ? `${name} = document.createDocumentFragment()`
+                : name;
+        })
+            .join(', ');
+    }
+    /** `{ title = $$title; ...updates of what reads it... }` */
+    setterBody(props, reactive) {
+        const dependents = new Set();
+        for (const prop of props) {
+            const source = reactive.sources.get(prop);
+            for (const dependent of source ? updatesOf(source) : [])
+                dependents.add(dependent);
+        }
+        return this.block(() => {
+            for (const prop of props)
+                this.line(`${this.name(prop)} = $$${prop};`);
+            for (const dependent of dependents)
+                this.line(indentMore(dependent));
+        });
+    }
+    /** `return [node, (...) => { ... }]`: the node and the function that sets the properties. */
+    functionResult(result, reactive, props) {
+        if (props.length === 0) {
+            this.line(`return [${result}];`);
+            return;
+        }
+        const dependents = new Set();
+        for (const param of props) {
+            const source = reactive.sources.get(param.name.name);
+            for (const dependent of source ? updatesOf(source) : [])
+                dependents.add(dependent);
+        }
+        const setter = this.block(() => {
+            for (const param of props)
+                this.line(`${this.name(param.name.name)} = $$${param.name.name};`);
+            for (const dependent of dependents)
+                this.line(indentMore(dependent));
+        });
+        this.line(`return [${result}, (${this.parameters(props, '$$')}) => ${setter}];`);
+    }
+    /**
+     * The value of a component property. Literals and names that the component does not redeclare
+     * go into its code as they are; anything else is computed before the block into a temporary.
+     */
+    prop(attribute, component) {
+        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;
+        }
+        return this.propValue(value, component);
+    }
+    propValue(value, component) {
+        // Arguments of a function component cannot be hidden by its names: they are not inlined.
+        let declared = this.functionComponents.has(component)
+            ? new Set()
+            : this.componentNames.get(component);
+        if (!declared) {
+            declared = declaredNames(component);
+            this.componentNames.set(component, declared);
+        }
+        const root = rootName(value);
+        if (isConstant(value) || (isSimple(value) && root !== null && !declared.has(root))) {
+            return this.expression(value, ARROW);
+        }
+        // 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 temp;
+    }
+    /**
+     * `<Product {...product} />`: properties that the object has get their values from it. Later
+     * attributes override them. The object is computed once, before the component's block.
+     */
+    spreadProps(argument, component, live, values, reactiveProps) {
+        const type = this.typeOf(argument);
+        // Without a type, the object may have any of the properties.
+        const fields = type && type.kind !== 'any' && type.kind !== 'unknown' ? spreadFields(type) : null;
+        const params = component.params.filter((param) => param.name.name !== 'children' && (fields === null || fields.has(param.name.name)));
+        if (params.length === 0)
+            return;
+        const object = this.propValue(argument, component);
+        const sources = live?.dependencies(argument);
+        const liveObject = sources && sources.size > 0 ? this.liveExpression(argument, POSTFIX) : null;
+        for (const param of params) {
+            const { name } = param.name;
+            const read = `${object}.${name}`;
+            values.set(name, fields === null && param.defaultValue
+                ? `${read} ?? ${this.expression(param.defaultValue, POSTFIX)}`
+                : read);
+            if (sources && liveObject)
+                reactiveProps.set(name, [`${liveObject}.${name}`, sources]);
+            else
+                reactiveProps.delete(name);
+        }
+    }
+}

package/dist/codegen/component-values.d.ts

@@ -0,0 +1,27 @@
+import type * as ast from '../ast.ts';
+import { ComponentPropsEmitter } from './component-props.ts';
+import type { Live } from './reactive.ts';
+/**
+ * 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 declare abstract class ComponentValueEmitter extends ComponentPropsEmitter {
+    /** Tags inside the blocks of `$$dynamic`: they call the component the block gets. */
+    private readonly fixedComponents;
+    protected valueTag(node: ast.ElementExpression, value: ast.Expression, live: Live | null): string;
+    /** `$$dynamic(() => page, ($$component3) => { ...; return [block, update]; })` */
+    private dynamicTag;
+    /** The call of the component; properties that depend on state are set again by its setter. */
+    private callValue;
+    /** The value of a property: literals and names as they are, other values in a temporary. */
+    private valueArgument;
+    /**
+     * 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.
+     */
+    private nullAsDefault;
+}