rooklang 0.3.4 → 0.4.0

package/dist/codegen/reactive.d.ts

@@ -1,59 +1,8 @@
 import type * as ast from '../ast.ts';
 import type { Type } from '../checker/types.ts';
+import type { Live, Source } from './live.ts';
 import { readNames } from './mutations.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;
-    readonly kind: 'state' | 'prop';
-    /** 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[];
-}
-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;
-}
+export { Block, type Live, type Source, type Write, updatesOf } from './live.ts';
 /**
  * The reactivity of one inlined component. The analysis goes by names: a local variable that
  * has the name of a state variable can only cause extra updates, never a missed one.
@@ -70,7 +19,7 @@ export declare class Reactive implements Live {
     private readonly functions;
     /** Local functions that the live markup calls: they run while it is created and updated. */
     private readonly renderFunctions;
-    constructor(component: ast.ComponentDeclaration, setup: unknown, props: Iterable<string>, createSource: (name: string, kind: Source['kind']) => Source);
+    constructor(component: ast.ComponentDeclaration, setup: unknown, props: Iterable<string>, createSource: (name: string, kind: Source['kind']) => Source, shared?: ReadonlySet<string>);
     /** Whether a statement of the body declares a function that the live markup calls. */
     declaresRenderFunction(node: ast.Statement): boolean;
     /** Adds a statement that computes a `derived` value again when the sources change. */
@@ -82,11 +31,7 @@ export declare class Reactive implements Live {
      * the names that the node itself reads.
      */
     dependencies(node: ast.Node, read?: typeof readNames): Set<Source>;
-    /**
-     * `state` variables that a statement (or an expression body) changes: by assignment, `++`,
-     * or a method that may change the value, such as `push`. Nested blocks and functions are not
-     * included: their statements are handled on their own.
-     */
+    /** `state` variables that a statement changes, by assignment, `++` or a method like `push`. */
     writtenBy(node: ast.Node, typeOf: (node: ast.Expression) => Type | undefined): Set<Source>;
     /** Sources whose value `node` refers into: `todos`, `todos[i].tags`, `todos.find(...)`. */
     rootSources(node: ast.Expression): ReadonlySet<Source>;

package/dist/codegen/reactive.js

@@ -1,38 +1,11 @@
+import { ownStatements } from "../checker/helpers.js";
 import { wrappedMarkup } from "../decorators.js";
 import { containsReturn, returnedMarkup } from "../recursion.js";
 import { forEachChild } from "../walk.js";
-import { mayChange } from "../methods.js";
-import { readNames, rootName } from "./mutations.js";
+import { readNames, rootName, writeTargets } from "./mutations.js";
+// Reactivity of components: which markup depends on which state, and which code changes it.
+export { Block, updatesOf } from "./live.js";
 const EMPTY = new Set();
-/** Everything a change of the source runs: the computations, then the updates of the nodes. */
-export function updatesOf(source) {
-    return [...source.computations, ...source.dependents];
-}
-/**
- * A block of markup control flow: a branch of `{if ...}` or the content for one item of
- * `{for ...}`. It is created again when needed, so its updates go into a function of its own,
- * which runs when any source that the block reads changes.
- */
-export class Block {
-    statements = [];
-    /** Sources that any statement depends on. */
-    sources = new Set();
-    parent;
-    constructor(parent) {
-        this.parent = parent;
-    }
-    dependencies(node) {
-        return this.parent.dependencies(node);
-    }
-    depend(sources, statement) {
-        this.statements.push(statement);
-        for (const source of sources)
-            this.sources.add(source);
-    }
-    ownIndex() {
-        return null;
-    }
-}
 /**
  * The reactivity of one inlined component. The analysis goes by names: a local variable that
  * has the name of a state variable can only cause extra updates, never a missed one.
@@ -49,10 +22,22 @@ export class Reactive {
     functions = new Map();
     /** Local functions that the live markup calls: they run while it is created and updated. */
     renderFunctions = new Set();
-    constructor(component, setup, props, createSource) {
+    constructor(component, setup, props, createSource, shared = new Set()) {
         this.setup = setup;
+        // State of the module that the component reads; its own names, set after, hide it.
+        const read = new Set();
+        readNames(component, read);
+        for (const name of read) {
+            if (shared.has(name))
+                this.sources.set(name, createSource(name, 'shared'));
+        }
         for (const name of props)
             this.sources.set(name, createSource(name, 'prop'));
+        // A bound property changes as state does, whether the parent sets it or not.
+        for (const param of component.params) {
+            if (param.bind)
+                this.sources.set(param.name.name, createSource(param.name.name, 'state'));
+        }
         // Markup declared after an early return may never be created, so it is not updated.
         let returned = false;
         for (const statement of component.body.body) {
@@ -146,52 +131,15 @@ export class Reactive {
         visit(node, read);
         return found;
     }
-    /**
-     * `state` variables that a statement (or an expression body) changes: by assignment, `++`,
-     * or a method that may change the value, such as `push`. Nested blocks and functions are not
-     * included: their statements are handled on their own.
-     */
+    /** `state` variables that a statement changes, by assignment, `++` or a method like `push`. */
     writtenBy(node, typeOf) {
         const found = new Set();
-        const write = (target) => {
+        for (const target of writeTargets(node, typeOf)) {
             for (const source of this.rootSources(target)) {
                 if (source.kind === 'state')
                     found.add(source);
             }
-        };
-        const visit = (node) => {
-            switch (node.kind) {
-                case 'BlockStatement':
-                case 'EventHandler':
-                case 'FuncDeclaration':
-                case 'FuncExpression':
-                case 'ArrowFunction':
-                case 'ClassDeclaration':
-                    return;
-                case 'SwitchCase':
-                    node.tests.forEach(visit);
-                    return;
-                case 'AssignmentStatement':
-                    node.targets.forEach(write);
-                    break;
-                case 'IncDecStatement':
-                case 'DeleteStatement':
-                    write(node.target);
-                    break;
-                case 'CallExpression': {
-                    const { callee } = node;
-                    if (callee.kind === 'MemberExpression' &&
-                        mayChange(typeOf(callee.object), callee.property.name)) {
-                        write(callee.object);
-                    }
-                    break;
-                }
-                default:
-                    break;
-            }
-            forEachChild(node, visit);
-        };
-        visit(node);
+        }
         return found;
     }
     /** Sources whose value `node` refers into: `todos`, `todos[i].tags`, `todos.find(...)`. */
@@ -241,8 +189,22 @@ export class Reactive {
                     add(node.value.name, this.rootSources(node.iterable));
                     if (node.key && inMarkup)
                         add(node.key.name, this.dependencies(node.iterable));
+                    // With a key, the block of an item may get another object with the same key.
+                    if (node.withKey && inMarkup)
+                        add(node.value.name, this.dependencies(node.iterable));
                     break;
                 case 'VariableDeclaration':
+                    // `derived first { return todos[0] }` points into what it returns.
+                    if (node.body) {
+                        const name = node.names[0].name;
+                        add(name, this.dependencies(node.body));
+                        for (const statement of ownStatements(node.body.body)) {
+                            if (statement.kind !== 'ReturnStatement')
+                                continue;
+                            for (const value of statement.values)
+                                add(name, this.rootSources(value));
+                        }
+                    }
                     node.names.forEach((name, i) => {
                         const value = node.values.length === node.names.length ? node.values[i] : node.values[0];
                         if (!value)

package/dist/codegen/runtime.js

@@ -59,9 +59,14 @@ export function runtimeCode(names, mode) {
         add(owners.get(name));
     // The files only declare, but for a few that register what a thread shares, so their order does
     // not matter: the one of RUNTIME_FILES.
-    return [...files]
+    const code = [...files]
         .filter(([file]) => needed.has(file))
         .flatMap(([, { code }], i) => [...(i > 0 ? [''] : []), ...code.split('\n')]);
+    const list = names.join(', ');
+    // A function of its own keeps the names of the runtime that are not `$$`, such as check() of
+    // decode, apart from those of the program, which may declare a check() too: only the names that
+    // the code uses come out of it.
+    return [`const { ${list} } = (() => {`, ...code, '', `return { ${list} };`, '})();'];
 }
 /**
  * The `go` of a module: in a module, a call in a worker that starts with its worker module; in the

package/dist/codegen/shared.d.ts

@@ -0,0 +1,22 @@
+import type * as ast from '../ast.ts';
+import type { Type } from '../checker/types.ts';
+export interface SharedState {
+    /** The sets of updates by the name of the state here: its own, and those it imports. */
+    readonly listeners: ReadonlyMap<string, string>;
+    /** The states of this module, which only it changes. */
+    readonly own: ReadonlySet<string>;
+    /** Names that refer into the value of a state of this module: `for item in items`. */
+    readonly aliases: ReadonlyMap<string, ReadonlySet<string>>;
+}
+/** The set of updates of a state: `$$listeners$items`, or that of its local name for an import. */
+export declare function listenersName(name: string): string;
+/** The states of the program and those it imports, `local → name in its module`. */
+export declare function sharedState(program: ast.Program, imported: ReadonlyMap<string, string> | undefined): SharedState;
+/**
+ * The states of this module that a statement changes, through them or through names that refer
+ * into them. The analysis goes by names, as that of components: a local variable with the name of
+ * a state only causes an extra run of the updates.
+ */
+export declare function sharedWrites(node: ast.Node, shared: SharedState, typeOf: (node: ast.Expression) => Type | undefined): string[];
+/** The states of this module whose value `node` refers into: `items`, `items[0]`, `item.tags`. */
+export declare function rootsOf(node: ast.Expression, shared: SharedState): ReadonlySet<string>;

package/dist/codegen/shared.js

@@ -0,0 +1,93 @@
+import { forEachChild } from "../walk.js";
+import { rootName, writeTargets } from "./mutations.js";
+/** The set of updates of a state: `$$listeners$items`, or that of its local name for an import. */
+export function listenersName(name) {
+    return `$$listeners$${name}`;
+}
+/** The states of the program and those it imports, `local → name in its module`. */
+export function sharedState(program, imported) {
+    const own = new Set();
+    for (const statement of program.body) {
+        if (statement.kind !== 'VariableDeclaration' || statement.keyword !== 'state')
+            continue;
+        for (const name of statement.names)
+            if (name.name !== '_')
+                own.add(name.name);
+    }
+    const listeners = new Map();
+    for (const name of [...own, ...(imported?.keys() ?? [])])
+        listeners.set(name, listenersName(name));
+    return { listeners, own, aliases: own.size > 0 ? aliasesOf(program, own) : new Map() };
+}
+/**
+ * The states of this module that a statement changes, through them or through names that refer
+ * into them. The analysis goes by names, as that of components: a local variable with the name of
+ * a state only causes an extra run of the updates.
+ */
+export function sharedWrites(node, shared, typeOf) {
+    if (shared.own.size === 0)
+        return [];
+    const found = new Set();
+    for (const target of writeTargets(node, typeOf)) {
+        for (const name of rootsOf(target, shared))
+            found.add(name);
+    }
+    return [...found];
+}
+/** The states of this module whose value `node` refers into: `items`, `items[0]`, `item.tags`. */
+export function rootsOf(node, shared) {
+    const name = rootName(node);
+    if (name === null)
+        return new Set();
+    if (shared.own.has(name))
+        return new Set([name]);
+    return shared.aliases.get(name) ?? new Set();
+}
+/**
+ * Names that refer into the states anywhere in the module: the items of `for item in items`, a
+ * variable given `items[0]`, the parameters of a callback of `items.find(item => ...)`. Repeats
+ * until nothing changes, since an alias of an alias is one too.
+ */
+function aliasesOf(program, own) {
+    const aliases = new Map();
+    const roots = (node) => rootsOf(node, { listeners: new Map(), own, aliases });
+    let changed = true;
+    const add = (name, states) => {
+        if (name === '_' || own.has(name))
+            return;
+        for (const state of states) {
+            const set = aliases.get(name) ?? new Set();
+            if (set.has(state))
+                continue;
+            set.add(state);
+            aliases.set(name, set);
+            changed = true;
+        }
+    };
+    const visit = (node) => {
+        if (node.kind === 'ForInStatement')
+            add(node.value.name, roots(node.iterable));
+        if (node.kind === 'VariableDeclaration' && node.keyword !== 'state') {
+            node.names.forEach((name, i) => {
+                const value = node.values.length === node.names.length ? node.values[i] : node.values[0];
+                if (value)
+                    add(name.name, roots(value));
+            });
+        }
+        if (node.kind === 'CallExpression' && node.callee.kind === 'MemberExpression') {
+            const states = roots(node.callee.object);
+            for (const arg of node.arguments) {
+                if (arg.kind !== 'ArrowFunction' && arg.kind !== 'FuncExpression')
+                    continue;
+                for (const param of arg.params)
+                    add(param.name.name, states);
+            }
+        }
+        forEachChild(node, visit);
+    };
+    while (changed) {
+        changed = false;
+        visit(program);
+    }
+    return aliases;
+}

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

@@ -14,7 +14,7 @@ export declare abstract class SimpleStatementEmitter extends TryEmitter {
     protected labels: number;
     /** A `defer` inside an if/loop/switch; implemented by FunctionEmitter. */
     protected abstract deferStatement(node: ast.DeferStatement): void;
-    /** `mount() { ... }` of a component (see ComponentEmitter). */
+    /** `mount { ... }` of a component (see FunctionEmitter). */
     protected abstract mountStatement(node: ast.MountStatement): void;
     /** `effect { ... }` of a component (see FunctionEmitter). */
     protected abstract effectStatement(node: ast.EffectStatement): void;

package/dist/codegen/statements.d.ts

@@ -9,6 +9,11 @@ import { ParallelLoopEmitter } from './parallel.ts';
 export declare abstract class StatementEmitter extends ParallelLoopEmitter {
     /** A CSS module: its object and CSS go with the styles (StyleEmitter), not to an import. */
     protected abstract styleModuleImport(node: ast.ImportDeclaration): boolean;
+    private sharedReads;
+    /** State of the module: the updates of the components that read it are kept beside it. */
+    protected emitStatement(node: ast.Statement): void;
+    /** Whether the components or decorators of the module read `name`, and so listen to it. */
+    protected readsShared(name: string): boolean;
     protected importDeclaration(node: ast.ImportDeclaration): void;
     /**
      * `export { log as $$visible$log }`: the names of the module that the code of exported

package/dist/codegen/statements.js

@@ -3,7 +3,9 @@ import { isIterator } from "../iterators.js";
 import { decoratedName, moduleNamesOf } from "../decorators.js";
 import { inlinePackages } from "../inline-packages.js";
 import { packageExports } from "./imported.js";
+import { readNames } from "./mutations.js";
 import { ParallelLoopEmitter } from "./parallel.js";
+import { listenersName } from "./shared.js";
 import { ARROW, POSTFIX } from "./syntax.js";
 /**
  * Imports and classes; with the layers below, all statements and declarations. A decorator of
@@ -12,6 +14,34 @@ import { ARROW, POSTFIX } from "./syntax.js";
  * So does an inlined component of another module; a called one brings its function, `$$Card`.
  */
 export class StatementEmitter extends ParallelLoopEmitter {
+    sharedReads = null;
+    /** State of the module: the updates of the components that read it are kept beside it. */
+    emitStatement(node) {
+        super.emitStatement(node);
+        if (node.kind !== 'VariableDeclaration' || node.keyword !== 'state')
+            return;
+        if (!this.program.body.includes(node))
+            return;
+        const exported = node.exported ? 'export ' : '';
+        for (const name of node.names) {
+            const listeners = this.shared.listeners.get(name.name);
+            if (listeners)
+                this.line(`${exported}const ${listeners} = new Set();`);
+        }
+    }
+    /** Whether the components or decorators of the module read `name`, and so listen to it. */
+    readsShared(name) {
+        if (!this.sharedReads) {
+            this.sharedReads = new Set();
+            for (const statement of this.program.body) {
+                if (statement.kind === 'ComponentDeclaration' ||
+                    statement.kind === 'DecoratorDeclaration') {
+                    readNames(statement, this.sharedReads);
+                }
+            }
+        }
+        return this.sharedReads.has(name);
+    }
     importDeclaration(node) {
         if (this.styleModuleImport(node))
             return;
@@ -36,6 +66,11 @@ export class StatementEmitter extends ParallelLoopEmitter {
         const hidden = (exported, local) => named.push(exported === local ? exported : `${exported} as ${local}`);
         for (const specifier of node.namedImports) {
             const component = this.options.components?.get(specifier.local.name);
+            const state = this.options.shared?.get(specifier.local.name);
+            // State of that module: the components here that read it listen to its changes.
+            if (state !== undefined && this.readsShared(specifier.local.name)) {
+                hidden(listenersName(state), this.shared.listeners.get(specifier.local.name));
+            }
             const inlined = this.inlinedImports.get(specifier.local.name);
             if (inlined) {
                 for (const [exported, local] of inlined.imports)

package/dist/codegen/updates.d.ts

@@ -1,6 +1,6 @@
 import type * as ast from '../ast.ts';
 import { type Type } from '../checker/types.ts';
-import type { Reactive, Source, Write } from './reactive.ts';
+import { type Reactive, type Source, type Write } from './reactive.ts';
 import { StatementEmitter } from './statements.ts';
 /**
  * Updates after changes of component state. Each state variable gets an update function; every
@@ -19,8 +19,13 @@ export declare abstract class UpdateEmitter extends StatementEmitter {
      * the markup, which would update it again; code that runs later (handlers) is not included.
      */
     protected rendering: number;
-    /** After a statement that changes state, the update of what depends on it. */
+    /**
+     * After a statement that changes state of the module, the updates of the components that read
+     * it; code that renders markup changes none, as with the state of a component.
+     */
     protected statement(node: ast.Statement): void;
+    /** After a statement that changes state, the update of what depends on it. */
+    private statementWithUpdates;
     protected changesState(body: ast.Expression): boolean;
     protected withRendering<T>(rendering: number, emit: () => T): T;
     /** Records a place that changes a source and returns its marker; see resolveMarkers. */
@@ -45,7 +50,10 @@ export declare abstract class UpdateEmitter extends StatementEmitter {
  * update statement, or by nothing when no markup depends on the source.
  */
 export declare function resolveMarkers(block: string, reactive: Reactive): string;
-/** The update statements that a place changing the source needs, the computations first. */
+/**
+ * The update statements that a place changing the source needs: the computations, the call that
+ * gives a bound property to the parent, then the updates of the nodes.
+ */
 export declare function needed(source: Source, write: Write): string[];
 /** One place changes the source, after the markup exists, and needs one update statement. */
 export declare function inlinesUpdate(source: Source): boolean;

package/dist/codegen/updates.js

@@ -1,6 +1,8 @@
 import { widenLiterals } from "../checker/types.js";
+import { updatesOf } from "./reactive.js";
 import { StatementEmitter } from "./statements.js";
 import { startsWithObjectLiteral } from "./analysis.js";
+import { sharedWrites } from "./shared.js";
 import { ARROW } from "./syntax.js";
 /**
  * Updates after changes of component state. Each state variable gets an update function; every
@@ -19,8 +21,37 @@ export class UpdateEmitter extends StatementEmitter {
      * the markup, which would update it again; code that runs later (handlers) is not included.
      */
     rendering = 0;
-    /** After a statement that changes state, the update of what depends on it. */
+    /**
+     * After a statement that changes state of the module, the updates of the components that read
+     * it; code that renders markup changes none, as with the state of a component.
+     */
     statement(node) {
+        const shared = this.rendering > 0 ? [] : sharedWrites(node, this.shared, (each) => this.typeOf(each));
+        if (shared.length === 0) {
+            this.statementWithUpdates(node);
+            return;
+        }
+        const notify = () => {
+            for (const name of shared)
+                this.line(`$$changed(${this.shared.listeners.get(name)});`);
+        };
+        if (node.kind !== 'ReturnStatement' && node.kind !== 'ThrowStatement') {
+            this.statementWithUpdates(node);
+            notify();
+            return;
+        }
+        // The value is computed first, then the updates run, then the function leaves.
+        const values = node.kind === 'ThrowStatement' ? [node.argument] : node.values;
+        const temp = this.temp();
+        this.withHoisting(true, () => {
+            const rendered = values.map((value) => this.expression(value, ARROW));
+            this.line(`const ${temp} = ${rendered.length === 1 ? rendered[0] : `[${rendered.join(', ')}]`};`);
+        });
+        notify();
+        this.line(`${node.kind === 'ThrowStatement' ? 'throw' : 'return'} ${temp};`);
+    }
+    /** After a statement that changes state, the update of what depends on it. */
+    statementWithUpdates(node) {
         const { reactive } = this;
         if (reactive && this.fn === reactive.setup && reactive.declaresRenderFunction(node)) {
             this.withRendering(this.rendering + 1, () => super.statement(node));
@@ -33,6 +64,9 @@ export class UpdateEmitter extends StatementEmitter {
             for (const source of changed) {
                 for (const computation of source.computations)
                     this.line(computation);
+                // The parent of a bound property gets the value the body gave it.
+                if (source.bound)
+                    this.line(source.bound);
             }
             return;
         }
@@ -137,7 +171,14 @@ export function resolveMarkers(block, reactive) {
     const sources = new Map();
     for (const source of reactive.sources.values())
         sources.set(source.id, source);
-    return block.replace(/^([ \t]*)\uE000(\d+)(?::(\d+))?\uE001;\n/gm, (line, indent, id, skip) => {
+    // `$$watch(...)` of state of the module stays if something depends on it.
+    const listened = block.replace(/^([ \t]*)\uE004(\d+)\uE004(.*)\n/gm, (line, indent, id, text) => {
+        const source = sources.get(Number(id));
+        if (!source)
+            return line;
+        return updatesOf(source).length > 0 ? `${indent}${text}\n` : '';
+    });
+    return listened.replace(/^([ \t]*)\uE000(\d+)(?::(\d+))?\uE001;\n/gm, (line, indent, id, skip) => {
         const source = sources.get(Number(id));
         if (!source)
             return line;
@@ -148,9 +189,16 @@ export function resolveMarkers(block, reactive) {
         return `${indent}${text}\n`;
     });
 }
-/** The update statements that a place changing the source needs, the computations first. */
+/**
+ * The update statements that a place changing the source needs: the computations, the call that
+ * gives a bound property to the parent, then the updates of the nodes.
+ */
 export function needed(source, write) {
-    return [...source.computations, ...source.dependents.filter((_, i) => i !== write.skip)];
+    return [
+        ...source.computations,
+        ...(source.bound ? [source.bound] : []),
+        ...source.dependents.filter((_, i) => i !== write.skip),
+    ];
 }
 /** One place changes the source, after the markup exists, and needs one update statement. */
 export function inlinesUpdate(source) {

package/dist/codegen/web-components.d.ts

@@ -6,8 +6,8 @@ import { ComponentEmitter } from './components.ts';
  * have their values.
  *
  * The element renders the component into its shadow root when it is connected. When it is
- * disconnected and not put back in the same task, the component is removed: the functions
- * returned by `mount()` run. Moving the element keeps its markup.
+ * disconnected and not put back in the same task, the component is removed: what its
+ * `mount` deferred runs. Moving the element keeps its markup.
  *
  * Every property except `children` is a JS property of the element; its setter updates the markup.
  * Strings, numbers and bools also have attributes: `item-count="3"` sets `itemCount` to 3, and a

package/dist/codegen/web-components.js

@@ -6,8 +6,8 @@ import { ComponentEmitter } from "./components.js";
  * have their values.
  *
  * The element renders the component into its shadow root when it is connected. When it is
- * disconnected and not put back in the same task, the component is removed: the functions
- * returned by `mount()` run. Moving the element keeps its markup.
+ * disconnected and not put back in the same task, the component is removed: what its
+ * `mount` deferred runs. Moving the element keeps its markup.
  *
  * Every property except `children` is a JS property of the element; its setter updates the markup.
  * Strings, numbers and bools also have attributes: `item-count="3"` sets `itemCount` to 3, and a

package/dist/compile.js

@@ -102,11 +102,12 @@ export function prepareCheck(program, options) {
 }
 /**
  * What the module imports from other `.rk` modules for the generator: decorators, whose code is
- * inlined, and components, which are called or inlined.
+ * inlined, components, which are called or inlined, and state, whose changes it listens to.
  */
 function importedCode(program, importModule) {
     const found = new Map();
     const components = new Map();
+    const shared = new Map();
     for (const statement of program.body) {
         if (statement.kind !== 'ImportDeclaration' || !statement.source.value.endsWith('.rk')) {
             continue;
@@ -116,6 +117,9 @@ function importedCode(program, importModule) {
         const decorators = exports?.decorators;
         for (const specifier of statement.namedImports) {
             const component = exports?.components?.get(specifier.imported.name);
+            if (exports?.shared?.has(specifier.imported.name)) {
+                shared.set(specifier.local.name, specifier.imported.name);
+            }
             if (component) {
                 components.set(specifier.local.name, {
                     node: component.node,
@@ -135,7 +139,7 @@ function importedCode(program, importModule) {
             });
         }
     }
-    return { decorators: found, components };
+    return { decorators: found, components, shared };
 }
 /** The CSS modules that the program imports, read and parsed, or what is wrong with them. */
 function readStyleModules(program, read) {

package/dist/decorator-copy.d.ts

@@ -5,7 +5,7 @@ export type CopyListener = (copy: ast.Node, original: ast.Node) => void;
 export declare function originOf(node: ast.Node): ast.Node;
 /**
  * Renames of the names that are not values: tags of components, `<Icon />`, and decorators,
- * `get(@visible.shown)`. Code of another module refers to those of its own module.
+ * `@visible.shown`. Code of another module refers to those of its own module.
  */
 export interface OtherNames {
     tags?: ReadonlyMap<string, string>;

package/dist/decorator-copy.js

@@ -143,6 +143,7 @@ export function renamer(renames, copied, other = {}) {
                 return done({
                     ...node,
                     iterable: copy(node.iterable, hidden),
+                    ...(node.withKey ? { withKey: copy(node.withKey, scoped(names, hidden)) } : {}),
                     body: copy(node.body, scoped(names, hidden)),
                 }, node);
             }