rooklang 0.3.4 → 0.4.1

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-file.d.ts

@@ -6,6 +6,9 @@ export declare class CompileError extends Error {
 export declare function compileFile(path: string, options: {
     rewriteImports: boolean;
     typeCheck: boolean;
-    markup?: boolean;
+    markup?: boolean | undefined;
     quiet?: boolean;
+    /** Where the worker module of `go` is, and what its worker imports first (bun.ts). */
+    workerUrl?: string;
+    nodeLoader?: string;
 }): CompileResult;

package/dist/compile.d.ts

@@ -23,7 +23,7 @@ export interface CoreCompileOptions {
     readStyleModule?: ((specifier: string) => string | null) | undefined;
     /** Where the worker module of `go` is, relative to the module; see workerUrl(). */
     workerUrl?: string | undefined;
-    /** A module that a worker thread of Node imports first, to load `.rk` files (vite.ts). */
+    /** A module that a worker of Node or Bun imports first, to load `.rk` files (vite.ts, bun.ts). */
     nodeLoader?: string | undefined;
     /**
      * How the code gets the runtime of Rook: `import`, the default, imports it from

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);
             }

package/dist/decorator-names.d.ts

@@ -0,0 +1,14 @@
+import type * as ast from './ast.ts';
+import type { DecoratorSource } from './decorators.ts';
+/** The JS name of a member or a parameter of a decorator, in the components it is applied to. */
+export declare function decoratedName(decorator: string, member: string): string;
+/**
+ * The public members that a decorator gives the components it is applied to: its own and those of
+ * the decorators it includes, each with whether it changes (state and derived values do).
+ */
+export declare function publicMembers(decorator: ast.DecoratorDeclaration, decorators: ReadonlyMap<string, DecoratorSource>, seen?: ReadonlySet<ast.DecoratorDeclaration>): Map<string, boolean>;
+/**
+ * `@shop.count` of a member that `shop` gets from the `cart` it includes: a variable of `shop`
+ * that is that of `cart`, `derived` when it changes, so that what reads it is updated.
+ */
+export declare function aliases(included: DecoratorSource, use: ast.DecoratorUse, prefix: string, decorators: ReadonlyMap<string, DecoratorSource>, prefixes: ReadonlyMap<string, string> | undefined): ast.VariableDeclaration[];

package/dist/decorator-names.js

@@ -0,0 +1,56 @@
+// The names of the members of decorators in the components they are applied to, and the members
+// that a decorator gives with those of the decorators it includes.
+/** The JS name of a member or a parameter of a decorator, in the components it is applied to. */
+export function decoratedName(decorator, member) {
+    return `$$${decorator}$${member}`;
+}
+/**
+ * The public members that a decorator gives the components it is applied to: its own and those of
+ * the decorators it includes, each with whether it changes (state and derived values do).
+ */
+export function publicMembers(decorator, decorators, seen = new Set()) {
+    const members = new Map();
+    const inner = new Set([...seen, decorator]);
+    for (const use of decorator.includes) {
+        const included = decorators.get(use.name.name);
+        if (!included || inner.has(included.node))
+            continue;
+        for (const [name, changes] of publicMembers(included.node, decorators, inner)) {
+            members.set(name, changes);
+        }
+    }
+    for (const statement of decorator.body.body) {
+        if (statement.kind === 'FuncDeclaration' && statement.isPublic) {
+            members.set(statement.name.name, false);
+        }
+        else if (statement.kind === 'VariableDeclaration' && statement.isPublic) {
+            const changes = statement.keyword === 'state' || statement.keyword === 'derived';
+            for (const name of statement.names)
+                members.set(name.name, changes);
+        }
+    }
+    return members;
+}
+/**
+ * `@shop.count` of a member that `shop` gets from the `cart` it includes: a variable of `shop`
+ * that is that of `cart`, `derived` when it changes, so that what reads it is updated.
+ */
+export function aliases(included, use, prefix, decorators, prefixes) {
+    const from = prefixes?.get(included.node.name.name) ?? included.node.name.name;
+    return [...publicMembers(included.node, decorators)].map(([member, changes]) => ({
+        kind: 'VariableDeclaration',
+        exported: false,
+        isPublic: false,
+        keyword: changes ? 'derived' : 'const',
+        names: [
+            { kind: 'Identifier', name: decoratedName(prefix, member), start: use.start, end: use.end },
+        ],
+        type: null,
+        values: [
+            { kind: 'Identifier', name: decoratedName(from, member), start: use.start, end: use.end },
+        ],
+        body: null,
+        start: use.start,
+        end: use.end,
+    }));
+}

package/dist/decorators.d.ts

@@ -1,7 +1,6 @@
 import type * as ast from './ast.ts';
 import { type CopyListener } from './decorator-copy.ts';
-/** The JS name of a member or a parameter of a decorator, in the components it is applied to. */
-export declare function decoratedName(decorator: string, member: string): string;
+export { decoratedName, publicMembers } from './decorator-names.ts';
 /**
  * Whether a declaration of an applied component gets an argument of a decorator. When the
  * argument reads the component's properties, the declaration is a `state` that the properties
@@ -45,7 +44,7 @@ export declare function moduleNamesOf(decorator: ast.DecoratorDeclaration, progr
  * The component with its decorators applied. Its body first declares the arguments of each
  * decorator and runs its body, from the top decorator down, then runs the component's own body.
  * The names of a decorator get its prefix, `$$visible$shown`, so they clash neither with each other
- * nor with the component's names, and `get(@visible.shown)` reads that variable. The `mount()` of
+ * nor with the component's names, and `@visible.shown` reads that variable. The `mount` of
  * the decorators runs after the component's own, from the inside out, so it goes before every
  * `return` of the component's body.
  *

package/dist/decorators.js

@@ -1,14 +1,12 @@
 import { renamer } from "./decorator-copy.js";
+import { aliases, decoratedName } from "./decorator-names.js";
 import { declaredIn, freeNames, mentionsName, topLevelNames } from "./names.js";
 import { containsReturn } from "./recursion.js";
 import { forEachChild } from "./walk.js";
 // Applying decorators: a component with decorators becomes one component whose body runs the
 // bodies of its decorators first. The checker uses it to see what the inlined code uses, the
 // generator to write it.
-/** The JS name of a member or a parameter of a decorator, in the components it is applied to. */
-export function decoratedName(decorator, member) {
-    return `$$${decorator}$${member}`;
-}
+export { decoratedName, publicMembers } from "./decorator-names.js";
 const argumentDeclarations = new WeakSet();
 const wrappedContents = new WeakSet();
 /**
@@ -69,7 +67,7 @@ export function moduleNamesOf(decorator, program) {
  * The component with its decorators applied. Its body first declares the arguments of each
  * decorator and runs its body, from the top decorator down, then runs the component's own body.
  * The names of a decorator get its prefix, `$$visible$shown`, so they clash neither with each other
- * nor with the component's names, and `get(@visible.shown)` reads that variable. The `mount()` of
+ * nor with the component's names, and `@visible.shown` reads that variable. The `mount` of
  * the decorators runs after the component's own, from the inside out, so it goes before every
  * `return` of the component's body.
  *
@@ -83,37 +81,55 @@ export function moduleNamesOf(decorator, program) {
 export function decorate(component, decorators, copied, prefixes) {
     if (component.decorators.length === 0)
         return component;
-    const props = new Set(component.params.map((param) => param.name.name));
+    // Arguments that read the properties, or such arguments of a decorator that includes another,
+    // are state: they change with them.
+    const reactive = new Set(component.params.map((param) => param.name.name));
     const setup = [];
     const mounts = [];
     const wrappers = [];
-    for (const use of component.decorators) {
-        const source = decorators.get(use.name.name);
-        if (!source)
-            continue;
+    // `argument` copies an argument into the component: one of the component stays as it is, one of
+    // a decorator it includes is that decorator's code.
+    const apply = (source, args, argument, applying) => {
         const decorator = source.node;
+        // A decorator that includes itself, through others too, is reported by the checker.
+        const inner = new Set([...applying, decorator]);
         const prefix = prefixes?.get(decorator.name.name) ?? decorator.name.name;
         const names = [...decoratorNames(decorator), ...source.moduleNames];
         const renames = membersOf(prefix, names);
         const copy = renamer(renames, copied, { decorators: prefixes, tags: source.tags });
         decorator.params.forEach((param, i) => {
-            // A default value is the decorator's code, an argument the component's.
-            const value = use.arguments[i] ?? (param.defaultValue && copy(param.defaultValue, new Set()));
+            const given = args[i];
+            // A default value is the decorator's code.
+            const value = given
+                ? argument(given)
+                : param.defaultValue && copy(param.defaultValue, new Set());
+            const name = renames.get(param.name.name);
+            const changes = value !== null && value !== undefined && mentionsName(value, reactive);
             const declaration = {
                 kind: 'VariableDeclaration',
                 exported: false,
                 isPublic: false,
-                keyword: value && mentionsName(value, props) ? 'state' : 'const',
-                names: [{ ...param.name, name: renames.get(param.name.name) }],
+                keyword: changes ? 'state' : 'const',
+                names: [{ ...param.name, name }],
                 type: param.type,
                 values: value ? [value] : [],
+                body: null,
                 start: param.start,
                 end: param.end,
             };
+            if (changes)
+                reactive.add(name);
             argumentDeclarations.add(declaration);
             copied?.(declaration, param);
             setup.push(declaration);
         });
+        for (const use of decorator.includes) {
+            const included = decorators.get(use.name.name);
+            if (!included || inner.has(included.node))
+                continue;
+            apply(included, use.arguments, (value) => copy(value, new Set()), inner);
+            setup.push(...aliases(included, use, prefix, decorators, prefixes));
+        }
         const wrapper = wrapperOf(decorator);
         const own = [];
         for (const statement of decorator.body.body) {
@@ -128,6 +144,11 @@ export function decorate(component, decorators, copied, prefixes) {
         mounts.push(own);
         if (wrapper)
             wrappers.push(applyWrapper(source, wrapper, copied, prefix, prefixes));
+    };
+    for (const use of component.decorators) {
+        const source = decorators.get(use.name.name);
+        if (source)
+            apply(source, use.arguments, (value) => value, new Set());
     }
     const inside = mounts.reverse().flat();
     const chain = wrappers.reverse();
@@ -186,6 +207,7 @@ function wrapped(node, chain) {
         names: [{ ...wrapper.content }],
         type: wrapper.type,
         values: [value],
+        body: null,
         start: node.start,
         end: node.end,
     };

package/dist/index.d.ts

@@ -20,7 +20,7 @@ export interface CompileOptions {
     declarations?: boolean;
     /** Where the worker module of `go` is, relative to the module; see workerUrl() in compile.ts. */
     workerUrl?: string;
-    /** A module that a worker thread of Node imports first, to load `.rk` files (vite.ts). */
+    /** A module that a worker of Node or Bun imports first, to load `.rk` files (vite.ts, bun.ts). */
     nodeLoader?: string;
     /** Markup and components; by default as the package.json of the file says (src/config.ts). */
     markup?: boolean;

package/dist/inline-packages.d.ts

@@ -27,6 +27,7 @@ export interface ModulePackages {
  * recursive or a web component cannot be inlined, and neither can one that reaches components or
  * decorators the module imports: those would bring the names of a third module. Nor can code that
  * uses a component of the module as a value, which is the function in the module, or that assigns
- * a variable of the module: another module could only read it.
+ * a variable of the module: another module could only read it. Nor can code that reads state of
+ * the module, `state items` at its top level: it listens to the changes there.
  */
 export declare function inlinePackages(program: ast.Program): ModulePackages;

package/dist/inline-packages.js

@@ -7,7 +7,8 @@ import { forEachChild } from "./walk.js";
  * recursive or a web component cannot be inlined, and neither can one that reaches components or
  * decorators the module imports: those would bring the names of a third module. Nor can code that
  * uses a component of the module as a value, which is the function in the module, or that assigns
- * a variable of the module: another module could only read it.
+ * a variable of the module: another module could only read it. Nor can code that reads state of
+ * the module, `state items` at its top level: it listens to the changes there.
  */
 export function inlinePackages(program) {
     const components = new Map();
@@ -30,9 +31,13 @@ export function inlinePackages(program) {
     };
     const topLevel = topLevelNames(program);
     const usesComponentValues = (node) => componentValues(node, (name) => components.has(name)).length > 0;
-    const assignsModuleNames = (node) => {
+    const states = new Set(program.body.flatMap((statement) => statement.kind === 'VariableDeclaration' && statement.keyword === 'state'
+        ? statement.names.map((name) => name.name)
+        : []));
+    // It assigns a variable of the module or reads its state, which only the module can do.
+    const needsItsModule = (node) => {
         const assigned = assignedNames(node);
-        return [...freeNames(node)].some((name) => topLevel.has(name) && assigned.has(name));
+        return [...freeNames(node)].some((name) => topLevel.has(name) && (assigned.has(name) || states.has(name)));
     };
     /** The package of a component, or of the tags in the code of a decorator. */
     const build = (root, tags) => {
@@ -69,7 +74,7 @@ export function inlinePackages(program) {
             found.components.set(current, component);
             if (usesComponentValues(expanded.get(current)))
                 return false;
-            if (assignsModuleNames(expanded.get(current)))
+            if (needsItsModule(expanded.get(current)))
                 return false;
             for (const use of component.decorators) {
                 const source = sources.get(use.name.name);

package/dist/loader.js

@@ -1,11 +1,10 @@
-import { createHash } from 'node:crypto';
-import { appendFileSync, existsSync, readFileSync, statSync, writeFileSync } from 'node:fs';
+import { existsSync, readFileSync, writeFileSync } from 'node:fs';
 import { createRequire, registerHooks } from 'node:module';
-import { dirname, extname, join, resolve } from 'node:path';
+import { dirname, extname, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { isMainThread } from 'node:worker_threads';
 import { RUNTIME_MODULE } from "./runtime-module.js";
-import { sourceMapComment } from "./source-map.js";
+import { cachedFile, listFiles, withMap } from "./run-cache.js";
 // `rook run` imports this module first (`node --import`): Node then imports `.rk` files,
 // compiled when they load, and `app.rk?goroutines` is the worker module of `go` in app.rk.
 // The worker threads of `go` import it too, since they get the `--import` of the process. The main
@@ -24,7 +23,7 @@ const markup = markupSetting === undefined ? undefined : markupSetting === '1';
 const cache = process.env['ROOK_RUN_CACHE'];
 /** The file of the cache for the code of a URL, query included. */
 function cached(url) {
-    return cache ? join(cache, `${createHash('sha1').update(url).digest('hex')}.js`) : null;
+    return cache ? cachedFile(cache, url) : null;
 }
 // The compiled code imports the runtime of this compiler, wherever the program is.
 const runtime = import.meta.resolve(RUNTIME_MODULE);
@@ -50,7 +49,7 @@ registerHooks({
         const { compileFile } = require(`./compile-file${extension}`);
         const path = displayPath(fileURLToPath(moduleUrl));
         if (isMainThread && cache)
-            list([resolve(path)]);
+            listFiles(cache, [resolve(path)]);
         const result = compileFile(path, {
             rewriteImports: false,
             typeCheck,
@@ -62,7 +61,7 @@ registerHooks({
         if (isMainThread && cache) {
             // The CSS modules it imports; the .rk modules are listed when they are loaded.
             const read = result.dependencies.map((each) => resolve(dirname(path), each));
-            list(read.filter((each) => existsSync(each)));
+            listFiles(cache, read.filter((each) => existsSync(each)));
             writeFileSync(cached(moduleUrl), code);
             if (worker !== undefined)
                 writeFileSync(cached(`${moduleUrl}?goroutines`), worker);
@@ -71,15 +70,3 @@ registerHooks({
         return { format: 'module', source, shortCircuit: true };
     },
 });
-/** The code with its source map in it. */
-function withMap(code, map) {
-    if (map === undefined || code === '')
-        return code;
-    const data = Buffer.from(JSON.stringify(map)).toString('base64');
-    return `${code}${sourceMapComment(`data:application/json;base64,${data}`)}`;
-}
-/** Adds files to the list of the run: a line of the path and the time it was changed. */
-function list(paths) {
-    const lines = paths.map((path) => `${path}\t${statSync(path).mtimeMs}\n`);
-    appendFileSync(join(cache, 'files'), lines.join(''));
-}

package/dist/names.d.ts

@@ -1,6 +1,10 @@
 import type * as ast from './ast.ts';
 /** Names assigned anywhere inside `node`: `x = ...`, `x += ...`, `x++`. */
 export declare function assignedNames(node: ast.Node, names?: Set<string>): Set<string>;
+/** `order.delivery.kind`: the variable and the fields of a path, or `null` for other expressions. */
+export declare function pathOf(node: ast.Expression): string[] | null;
+/** Paths of fields assigned anywhere inside `node`, e.g. `order.delivery` of `order.delivery = d`. */
+export declare function assignedPaths(node: ast.Node, paths?: Set<string>): Set<string>;
 /** Whether an identifier with one of `names` occurs in `node`, whatever it refers to. */
 export declare function mentionsName(node: ast.Node, names: ReadonlySet<string>): boolean;
 /** Every name declared inside `node`: parameters and all local declarations, nested ones too. */

package/dist/names.js

@@ -19,6 +19,30 @@ export function assignedNames(node, names = new Set()) {
     forEachChild(node, (child) => assignedNames(child, names));
     return names;
 }
+/** `order.delivery.kind`: the variable and the fields of a path, or `null` for other expressions. */
+export function pathOf(node) {
+    if (node.kind === 'Identifier')
+        return [node.name];
+    if (node.kind !== 'MemberExpression' || node.optional)
+        return null;
+    const object = pathOf(node.object);
+    return object && [...object, node.property.name];
+}
+/** Paths of fields assigned anywhere inside `node`, e.g. `order.delivery` of `order.delivery = d`. */
+export function assignedPaths(node, paths = new Set()) {
+    const targets = node.kind === 'AssignmentStatement'
+        ? node.targets
+        : node.kind === 'IncDecStatement'
+            ? [node.target]
+            : [];
+    for (const target of targets) {
+        const path = pathOf(target);
+        if (path && path.length > 1)
+            paths.add(path.join('.'));
+    }
+    forEachChild(node, (child) => assignedPaths(child, paths));
+    return paths;
+}
 /** Whether an identifier with one of `names` occurs in `node`, whatever it refers to. */
 export function mentionsName(node, names) {
     if (node.kind === 'Identifier')
@@ -99,6 +123,7 @@ export function freeNames(component) {
                 for (const name of node.names)
                     declared.add(name.name);
                 node.values.forEach(visit);
+                visit(node.body);
                 return;
             case 'SelectCase':
                 for (const name of node.names)
@@ -120,6 +145,8 @@ export function freeNames(component) {
                 if (node.key)
                     declared.add(node.key.name);
                 visit(node.iterable);
+                if (node.withKey)
+                    visit(node.withKey);
                 visit(node.body);
                 return;
             case 'CatchClause':
@@ -195,6 +222,7 @@ export function collectValueNames(node, names, isComponent = () => true) {
             return;
         case 'VariableDeclaration':
             node.values.forEach(visit);
+            visit(node.body);
             return;
         case 'FuncDeclaration':
         case 'MethodDeclaration':
@@ -237,6 +265,7 @@ export function collectValueNames(node, names, isComponent = () => true) {
             return;
         case 'ForInStatement':
             visit(node.iterable);
+            visit(node.withKey ?? null);
             visit(node.body);
             return;
         case 'CatchClause':

package/dist/parser/base.d.ts

@@ -25,6 +25,7 @@ export declare abstract class ParserBase {
     protected abstract parseClass(start: number, exported: boolean): ast.ClassDeclaration;
     protected abstract parseInterface(start: number, exported: boolean): ast.InterfaceDeclaration;
     protected abstract parseTypeAlias(start: number, exported: boolean): ast.TypeAliasDeclaration;
+    protected abstract parseFunctionBody(async?: boolean): ast.BlockStatement;
     protected abstract canStartType(offset?: number): boolean;
     protected abstract parseType(): ast.TypeNode;
     protected abstract parseTypeArgs(): ast.TypeNode[];

package/dist/parser/base.js

@@ -1,6 +1,6 @@
 import { STATEMENT_KEYWORDS, BRACKETS, ParseError, describe } from "./syntax.js";
 // The parser is a chain of layers, one per area: base → simple statements → statements → control
-// flow → jumps → declarations → decorators → classes → types → expressions → literals → markup → Parser
+// flow → jumps → params → declarations → decorators → classes → types → expressions → literals → markup → Parser
 // (parser.ts). Statements, expressions and markup contain each other, so methods of later layers
 // that earlier ones call are declared here as abstract.
 //

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

@@ -17,6 +17,11 @@ export declare abstract class ControlFlowParser extends StatementParser {
         ast.SimpleStatement | null
     ];
     protected parseForIn(start: number, go?: boolean): ast.ForInStatement;
+    /**
+     * `with key todo.id` after the items of a `{for}` in markup: its blocks are found again by the
+     * key instead of the item. `with` and `key` are words only here, not keywords.
+     */
+    private parseWithKey;
     /** `go for i, v in items { }`: the parts of the array run as goroutines, and the loop waits. */
     protected parseGoFor(): ast.ForStatement | ast.ForInStatement;
     protected parseLoopBody(): ast.BlockStatement;