rooklang 0.0.0-stage → 0.3.0

package/dist/codegen/mutations.js

@@ -0,0 +1,102 @@
+import { decoratedName } from "../decorators.js";
+import { forEachChild } from "../walk.js";
+// What code reads: the names of values, and the variable a change goes into.
+/** The variable at the start of `a.b[i].c()`, or `null`. */
+export function rootName(node) {
+    switch (node.kind) {
+        case 'Identifier':
+            return node.name;
+        case 'MemberExpression':
+        case 'IndexExpression':
+            return rootName(node.object);
+        case 'CallExpression':
+            return rootName(node.callee);
+        case 'DecoratorGet':
+            return rootName(node.target);
+        case 'DecoratorMember':
+            return decoratedName(node.decorator.name, node.member.name);
+        default:
+            return null;
+    }
+}
+/** Names whose values a node reads, not counting code that runs on events. */
+export function readNames(node, names) {
+    switch (node.kind) {
+        case 'Identifier':
+            names.add(node.name);
+            return;
+        case 'DecoratorMember':
+            names.add(decoratedName(node.decorator.name, node.member.name));
+            return;
+        case 'MemberExpression':
+            readNames(node.object, names);
+            return;
+        case 'Property':
+            readNames(node.value, names);
+            return;
+        case 'ElementExpression':
+            // `<section.content />` and `<Page />` read the value they take the component from.
+            if (node.value)
+                readNames(node.value, names);
+            else if (node.tag && /^[A-Z]/.test(node.tag.name))
+                names.add(node.tag.name);
+            for (const attribute of node.attributes)
+                readNames(attribute, names);
+            for (const child of node.children)
+                readNames(child, names);
+            return;
+        case 'JsxAttribute':
+            if (node.value !== null && !/^on[A-Z]/.test(node.name.name))
+                readNames(node.value, names);
+            return;
+        // Both run later, when the markup exists.
+        case 'EventHandler':
+        case 'MountStatement':
+        case 'EffectStatement':
+            return;
+        default:
+            forEachChild(node, (child) => readNames(child, names));
+    }
+}
+/**
+ * Names an effect reads while it runs: not in the functions it creates, which run later, nor in
+ * its `defer`, nor the variables it writes, or `count++` would run it again.
+ */
+export function effectReads(node, names) {
+    switch (node.kind) {
+        case 'FuncDeclaration':
+        case 'FuncExpression':
+        case 'ArrowFunction':
+        case 'ClassDeclaration':
+        case 'DeferStatement':
+            return;
+        case 'AssignmentStatement':
+            for (const target of node.targets) {
+                if (target.kind !== 'Identifier')
+                    effectReads(target, names);
+            }
+            for (const value of node.values)
+                effectReads(value, names);
+            return;
+        case 'IncDecStatement':
+        case 'DeleteStatement':
+            if (node.target.kind !== 'Identifier')
+                effectReads(node.target, names);
+            return;
+        case 'Identifier':
+        case 'DecoratorMember':
+        case 'ElementExpression':
+        case 'JsxAttribute':
+        case 'EventHandler':
+            readNames(node, names);
+            return;
+        case 'MemberExpression':
+            effectReads(node.object, names);
+            return;
+        case 'Property':
+            effectReads(node.value, names);
+            return;
+        default:
+            forEachChild(node, (child) => effectReads(child, names));
+    }
+}

package/dist/codegen/parallel.d.ts

@@ -0,0 +1,7 @@
+import type * as ast from '../ast.ts';
+import { ControlStatementEmitter } from './control-statements.ts';
+export declare abstract class ParallelLoopEmitter extends ControlStatementEmitter {
+    protected forInStatement(node: ast.ForInStatement): void;
+    /** The loop over a part, in the function of the worker module that runs it. */
+    private partLoop;
+}

package/dist/codegen/parallel.js

@@ -0,0 +1,63 @@
+import { arrayName, arrayUses, partOf, writesArray } from "../go-for.js";
+import { goCaptures, goTarget } from "../goroutines.js";
+import { declaredIn } from "../names.js";
+import { ControlStatementEmitter } from "./control-statements.js";
+import { ARROW } from "./syntax.js";
+// `go for i, v in items { ... }`: `await $$goFor("$$goroutine0", items, ...)` splits the array into
+// parts and runs each as a goroutine (go-helpers.ts). In the worker module, the function of a part
+// loops over it: `i` is the index in the whole array, from `$$from`, the index of the part's first
+// element, and `items[i]` is `items[$$i]`, the index in the part. The part goes back if the body
+// writes into it; a typed array is moved back, not copied.
+export class ParallelLoopEmitter extends ControlStatementEmitter {
+    forInStatement(node) {
+        const loop = partOf(node);
+        if (loop) {
+            this.partLoop(node, loop);
+            return;
+        }
+        if (!node.go) {
+            super.forInStatement(node);
+            return;
+        }
+        const args = [
+            JSON.stringify(goTarget(this.program, node)),
+            this.expression(node.iterable, ARROW),
+            ...goCaptures(this.program, node).map((name) => this.name(name)),
+        ];
+        this.helpers.add('goFor');
+        this.helpers.add(this.inWorker ? 'goLocal' : 'go');
+        this.line(`await $$goFor(${args.join(', ')});`);
+    }
+    /** The loop over a part, in the function of the worker module that runs it. */
+    partLoop(node, loop) {
+        const array = this.name(arrayName(loop) ?? '$$items');
+        const uses = arrayUses(loop);
+        const key = node.key && node.key.name !== '_' ? node.key.name : null;
+        const value = node.value.name === '_' ? null : node.value.name;
+        const bindings = [key, value].flatMap((name) => name === null ? [] : [[name, 'loop']]);
+        // A declaration of the same name in the body would clash with the loop's in one block.
+        const hidden = declaredIn(node.body.body).some((name) => name === key || name === value);
+        for (const element of uses.elements)
+            this.partElements.add(element);
+        this.withScope(bindings, () => {
+            const body = this.withBreakTarget(null, () => this.block(() => {
+                if (key !== null)
+                    this.line(`const ${this.name(key)} = $$from + $$i;`);
+                if (value !== null)
+                    this.line(`const ${this.name(value)} = ${array}[$$i];`);
+                if (hidden)
+                    this.line(this.blockStatement(node.body));
+                else
+                    this.blockStatements(node.body.body);
+            }));
+            this.line(`for (let $$i = 0; $$i < ${array}.length; $$i++) ${body}`);
+        });
+        for (const element of uses.elements)
+            this.partElements.delete(element);
+        if (!writesArray(loop, uses))
+            return;
+        // The part of a typed array moves back; without types, $$transfer leaves an array as it is.
+        const plain = this.options.types?.get(loop.iterable)?.kind === 'array';
+        this.line(plain ? `return ${array};` : `return $$transfer(${array});`);
+    }
+}

package/dist/codegen/reactive.d.ts

@@ -0,0 +1,95 @@
+import type * as ast from '../ast.ts';
+import type { Type } from '../checker/types.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;
+}
+/**
+ * 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.
+ */
+export declare class Reactive implements Live {
+    readonly sources: Map<string, Source>;
+    /** The function context the body runs in; code in other functions runs later. */
+    readonly setup: unknown;
+    /** Markup declared at the top level of the body, `const input = <input />`: created once. */
+    readonly topLevel: Set<ast.ElementExpression>;
+    /** Variables that refer into a source's value: `for todo in todos`, `todos.map(t => ...)`. */
+    private readonly aliases;
+    /** Local functions: what they read counts where they are mentioned. */
+    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);
+    /** 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. */
+    compute(sources: ReadonlySet<Source>, statement: string): void;
+    depend(sources: ReadonlySet<Source>, statement: string): void;
+    ownIndex(source: Source): number;
+    /**
+     * Sources whose values an expression reads, directly or through local functions. `read` finds
+     * 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.
+     */
+    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>;
+    /** Repeats until nothing changes, since an alias of an alias is an alias too. */
+    private findAliases;
+}

package/dist/codegen/reactive.js

@@ -0,0 +1,280 @@
+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";
+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.
+ */
+export class Reactive {
+    sources = new Map();
+    /** The function context the body runs in; code in other functions runs later. */
+    setup;
+    /** Markup declared at the top level of the body, `const input = <input />`: created once. */
+    topLevel = new Set();
+    /** Variables that refer into a source's value: `for todo in todos`, `todos.map(t => ...)`. */
+    aliases = new Map();
+    /** Local functions: what they read counts where they are mentioned. */
+    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) {
+        this.setup = setup;
+        for (const name of props)
+            this.sources.set(name, createSource(name, 'prop'));
+        // 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) {
+            if (statement.kind === 'VariableDeclaration') {
+                for (const name of statement.names) {
+                    if (statement.keyword === 'state' && name.name !== '_') {
+                        this.sources.set(name.name, createSource(name.name, 'state'));
+                    }
+                }
+                const [value] = statement.values;
+                if (statement.names.length === 1 && value?.kind === 'ElementExpression' && !returned) {
+                    this.topLevel.add(value);
+                }
+                if (statement.keyword === 'const' &&
+                    statement.names.length === 1 &&
+                    (value?.kind === 'ArrowFunction' || value?.kind === 'FuncExpression')) {
+                    this.functions.set(statement.names[0].name, value);
+                }
+            }
+            else if (statement.kind === 'FuncDeclaration') {
+                this.functions.set(statement.name.name, statement);
+            }
+            returned ||= containsReturn(statement);
+        }
+        this.findAliases(component.body);
+        const markup = [
+            ...this.topLevel,
+            ...returnedMarkup(component),
+            ...wrappedMarkup(component),
+        ];
+        const seen = new Set();
+        const visit = (node) => {
+            const names = new Set();
+            readNames(node, names);
+            for (const name of names) {
+                const fn = this.functions.get(name);
+                if (!fn || seen.has(name))
+                    continue;
+                seen.add(name);
+                this.renderFunctions.add(fn);
+                visit(fn);
+            }
+        };
+        markup.forEach(visit);
+    }
+    /** Whether a statement of the body declares a function that the live markup calls. */
+    declaresRenderFunction(node) {
+        if (node.kind === 'FuncDeclaration')
+            return this.renderFunctions.has(node);
+        const [value] = node.kind === 'VariableDeclaration' ? node.values : [];
+        return value !== undefined && this.renderFunctions.has(value);
+    }
+    /** Adds a statement that computes a `derived` value again when the sources change. */
+    compute(sources, statement) {
+        for (const source of sources)
+            source.computations.push(statement);
+    }
+    depend(sources, statement) {
+        for (const source of sources) {
+            if (!source.dependents.includes(statement))
+                source.dependents.push(statement);
+        }
+    }
+    ownIndex(source) {
+        return source.dependents.length;
+    }
+    /**
+     * Sources whose values an expression reads, directly or through local functions. `read` finds
+     * the names that the node itself reads.
+     */
+    dependencies(node, read = readNames) {
+        const found = new Set();
+        const seen = new Set();
+        const visit = (node, read) => {
+            const names = new Set();
+            read(node, names);
+            for (const name of names) {
+                if (seen.has(name))
+                    continue;
+                seen.add(name);
+                const source = this.sources.get(name);
+                if (source)
+                    found.add(source);
+                for (const aliased of this.aliases.get(name) ?? EMPTY)
+                    found.add(aliased);
+                const fn = this.functions.get(name);
+                if (fn)
+                    visit(fn, readNames);
+            }
+        };
+        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.
+     */
+    writtenBy(node, typeOf) {
+        const found = new Set();
+        const write = (target) => {
+            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(...)`. */
+    rootSources(node) {
+        const name = rootName(node);
+        if (name === null)
+            return EMPTY;
+        const source = this.sources.get(name);
+        return source ? new Set([source]) : (this.aliases.get(name) ?? EMPTY);
+    }
+    /** Repeats until nothing changes, since an alias of an alias is an alias too. */
+    findAliases(body) {
+        let changed = true;
+        const add = (name, sources) => {
+            if (name === '_' || this.sources.has(name))
+                return;
+            let set = this.aliases.get(name);
+            for (const source of sources) {
+                if (set?.has(source))
+                    continue;
+                set ??= new Set();
+                set.add(source);
+                this.aliases.set(name, set);
+                changed = true;
+            }
+        };
+        // In markup, a loop index and a `const` change with what they are computed from.
+        let inMarkup = false;
+        const visit = (node) => {
+            switch (node.kind) {
+                case 'JsxStatementContainer': {
+                    const saved = inMarkup;
+                    inMarkup = true;
+                    visit(node.statement);
+                    inMarkup = saved;
+                    return;
+                }
+                case 'FuncExpression':
+                case 'ArrowFunction': {
+                    const saved = inMarkup;
+                    inMarkup = false;
+                    forEachChild(node, visit);
+                    inMarkup = saved;
+                    return;
+                }
+                case 'ForInStatement':
+                    add(node.value.name, this.rootSources(node.iterable));
+                    if (node.key && inMarkup)
+                        add(node.key.name, this.dependencies(node.iterable));
+                    break;
+                case 'VariableDeclaration':
+                    node.names.forEach((name, i) => {
+                        const value = node.values.length === node.names.length ? node.values[i] : node.values[0];
+                        if (!value)
+                            return;
+                        add(name.name, this.rootSources(value));
+                        // A derived value changes with all it is computed from.
+                        if (inMarkup || node.keyword === 'derived')
+                            add(name.name, this.dependencies(value));
+                    });
+                    break;
+                case 'CallExpression': {
+                    if (node.callee.kind !== 'MemberExpression')
+                        break;
+                    const sources = this.rootSources(node.callee.object);
+                    if (sources.size === 0)
+                        break;
+                    for (const arg of node.arguments) {
+                        if (arg.kind === 'ArrowFunction' || arg.kind === 'FuncExpression') {
+                            for (const param of arg.params)
+                                add(param.name.name, sources);
+                        }
+                    }
+                    break;
+                }
+                default:
+                    break;
+            }
+            forEachChild(node, visit);
+        };
+        while (changed) {
+            changed = false;
+            visit(body);
+        }
+    }
+}

package/dist/codegen/refs.d.ts

@@ -0,0 +1,62 @@
+import type * as ast from '../ast.ts';
+import { EarlyReturnEmitter } from './early-returns.ts';
+/**
+ * Refs: `ref input` creates the element of `<input ref={input} />` where it is declared, with its
+ * constant attributes, and the markup fills that element in instead of creating one.
+ *
+ * `<Card ref={card} />` creates the element at the top of what `Card` returns. An inlined `Card`
+ * fills it in under a name of its own, `$$root4`, since its own names may hide `card`; the
+ * function of `Card` gets it as its last argument, `$$root`, which is undefined without a ref.
+ */
+/** The element at the top of the markup of the component being written, created by a ref. */
+export interface RootPreset {
+    /** The element, or the use of a component, at the top of the component's own markup. */
+    node: ast.ElementExpression;
+    /** The variable with the element. */
+    name: string;
+    /** False for `$$root` of a function: the element is created when the caller gave none. */
+    created: boolean;
+}
+export declare abstract class RefEmitter extends EarlyReturnEmitter {
+    /** The elements that the refs of the component being written are bound to. */
+    private refElements;
+    /** Those of them that are SVG elements. */
+    private svgTargets;
+    private rootPreset;
+    /** Tags of components that refs point to or that are at the top of components: lazily. */
+    private rootTags;
+    /** Writes the code of a component: its refs, and the element at its top if a ref created it. */
+    protected withRefs<T>(component: ast.ComponentDeclaration, preset: RootPreset | null, emit: () => T): T;
+    /** `ref input`: `const input = document.createElement("input");` and its constant attributes. */
+    protected refDeclaration(node: ast.VariableDeclaration): void;
+    /**
+     * The element that markup fills in instead of creating one: that of its ref, which has its
+     * constant attributes already, or the one a ref to the component created.
+     */
+    protected presetElement(node: ast.ElementExpression): {
+        name: string;
+        created: boolean;
+    } | null;
+    /**
+     * What a use of a component gives it as the element at its top: the element of a ref on the use,
+     * or the one given to the component being written, when the use is at its top.
+     */
+    protected rootFor(use: ast.ElementExpression): {
+        name: string;
+        created: boolean;
+    } | null;
+    /** The preset of an inlined component, whose names may hide the variable with the element. */
+    protected inlineRoot(component: ast.ComponentDeclaration, given: {
+        name: string;
+        created: boolean;
+    } | null): RootPreset | null;
+    /**
+     * Whether the function of a component takes `$$root`: when the element at its top is known, and
+     * a ref may point to it, here or in another module, or a component that does returns it.
+     */
+    protected takesRoot(component: ast.ComponentDeclaration): boolean;
+    private findRootTags;
+    /** The element that markup creates: itself, or the one at the top of the component it uses. */
+    private elementOf;
+    private componentRootOf;
+}