rooklang 0.3.4 → 0.4.1

package/dist/parser/control-flow.js

@@ -69,13 +69,39 @@ export class ControlFlowParser extends StatementParser {
         }
         this.expect('in');
         const iterable = this.parseHeaderExpression();
+        const withKey = this.parseWithKey(go);
+        const keyed = withKey ? { withKey } : {};
         if (!go) {
             const body = this.parseLoopBody();
-            return { kind: 'ForInStatement', key, value, iterable, body, ...this.span(start) };
+            return { kind: 'ForInStatement', key, value, iterable, ...keyed, body, ...this.span(start) };
         }
         // The parts run at once in workers: nothing can leave the loop but `continue`.
         const body = this.withContext({ inLoop: true, inBreakable: false, inGoFor: true, labels: [] }, () => this.parseBlock());
-        return { kind: 'ForInStatement', key, value, iterable, body, go, ...this.span(start) };
+        return {
+            kind: 'ForInStatement',
+            key,
+            value,
+            iterable,
+            ...keyed,
+            body,
+            go,
+            ...this.span(start),
+        };
+    }
+    /**
+     * `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.
+     */
+    parseWithKey(go) {
+        if (!this.checkWord('with'))
+            return null;
+        const start = this.next().start;
+        this.expectWord('key');
+        const key = this.parseHeaderExpression();
+        if (go || !this.context.inMarkup) {
+            this.error('"with key" finds again the blocks of a {for} in markup, and this loop has none: remove it', start, key.end);
+        }
+        return key;
     }
     /** `go for i, v in items { }`: the parts of the array run as goroutines, and the loop waits. */
     parseGoFor() {

package/dist/parser/declarations.d.ts

@@ -1,29 +1,19 @@
 import type * as ast from '../ast.ts';
-import { JumpParser } from './jumps.ts';
-export declare abstract class DeclarationParser extends JumpParser {
+import { ParamParser } from './params.ts';
+export declare abstract class DeclarationParser extends ParamParser {
     protected parseImport(): ast.ImportDeclaration;
     protected parseImportSpecifier(): ast.ImportSpecifier;
+    /** `state items []Item = []` at the top level of a module: state its components share. */
+    protected parseDeclaration(start: number, exported: boolean): ast.Statement | undefined;
     protected parseExport(): ast.Statement;
     protected parseFuncDeclaration(start: number, exported: boolean): ast.FuncDeclaration;
     /**
      * `<T any, U Shape>` after a name; `<K, V any>` gives both the constraint, as in Go.
      */
     protected parseTypeParams(): ast.TypeParameter[];
-    /**
-     * `(a, b number, c string)`. Names without a type take the type of the next typed name, as in
-     * Go; only arrow functions may leave types out entirely. The parameters of a constructor can be
-     * properties: `(private name string)`.
-     */
-    protected parseParams(typesOptional: boolean, allowDefaults?: boolean, allowRest?: boolean, allowProperties?: boolean): ast.Parameter[];
-    /** `private`, `readonly` or both before a parameter that is a property of its class. */
-    private parsePropertyModifiers;
-    /** `...attrs`: the attributes that a component passes on to one of its elements. */
-    private parseRestParam;
-    /** Result types after a parameter list: nothing, `T`, or `(T1, T2)`. */
-    protected parseResults(): ast.TypeNode[];
     /** `comp Name(properties) { ...; return <markup> }`, maybe after decorators. */
     protected parseComponent(start: number, exported: boolean, htmlTag?: ast.HtmlTag | null, decorators?: ast.DecoratorUse[]): ast.ComponentDeclaration;
-    /** Like a function body, but its own statements may also declare `state`, `ref` and `mount()`. */
+    /** Like a function body, but its own statements may also declare `state`, `ref` and `mount`. */
     protected parseComponentBody(): ast.BlockStatement;
     /** A statement at the top level of a component or a decorator. */
     protected parseComponentStatement(): ast.Statement;

package/dist/parser/declarations.js

@@ -1,7 +1,7 @@
-import { JumpParser } from "./jumps.js";
-import { describe, FUNCTION_BODY, VISIBILITIES } from "./syntax.js";
-// Imports and exports, functions and components with their parameters and results.
-export class DeclarationParser extends JumpParser {
+import { ParamParser } from "./params.js";
+import { describe, FUNCTION_BODY } from "./syntax.js";
+// Imports and exports, functions and components.
+export class DeclarationParser extends ParamParser {
     parseImport() {
         const start = this.next().start;
         if (!this.context.topLevel) {
@@ -50,6 +50,16 @@ export class DeclarationParser extends JumpParser {
         }
         return { kind: 'ImportSpecifier', imported, local, ...this.span(token.start) };
     }
+    /** `state items []Item = []` at the top level of a module: state its components share. */
+    parseDeclaration(start, exported) {
+        if (!this.context.topLevel || !this.checkWord('state') || this.peek(1).kind !== 'Identifier') {
+            return super.parseDeclaration(start, exported);
+        }
+        this.requireMarkup('state of a module is');
+        const declaration = this.parseVariableDeclaration(start, exported);
+        this.endStatement();
+        return declaration;
+    }
     parseExport() {
         const start = this.next().start;
         if (!this.context.topLevel) {
@@ -109,120 +119,6 @@ export class DeclarationParser extends JumpParser {
         this.expectTypeClose('">" after the type parameters');
         return params;
     }
-    /**
-     * `(a, b number, c string)`. Names without a type take the type of the next typed name, as in
-     * Go; only arrow functions may leave types out entirely. The parameters of a constructor can be
-     * properties: `(private name string)`.
-     */
-    parseParams(typesOptional, allowDefaults = false, allowRest = false, allowProperties = false) {
-        this.expect('(');
-        const params = [];
-        let untyped = 0;
-        while (!this.check(')')) {
-            if (this.check('...')) {
-                params.push(this.parseRestParam(allowRest));
-                break;
-            }
-            const paramStart = this.peek().start;
-            const property = this.parsePropertyModifiers(allowProperties);
-            const name = this.parseIdentifier('parameter name');
-            const type = this.canStartType() ? this.parseType() : null;
-            const defaultValue = allowDefaults && this.accept('=') ? this.parseExpression() : null;
-            params.push({
-                kind: 'Parameter',
-                name,
-                type,
-                defaultValue,
-                ...(property ? { property } : {}),
-                ...this.span(paramStart),
-            });
-            if (type === null) {
-                untyped++;
-            }
-            else {
-                for (const param of params.slice(params.length - 1 - untyped))
-                    param.type = type;
-                untyped = 0;
-            }
-            if (!this.accept(','))
-                break;
-        }
-        this.expect(')');
-        if (untyped > 0 && !typesOptional) {
-            const param = params[params.length - untyped];
-            this.error(`missing type for parameter "${param.name.name}"`, param.start, param.end);
-        }
-        return params;
-    }
-    /** `private`, `readonly` or both before a parameter that is a property of its class. */
-    parsePropertyModifiers(allowed) {
-        let visibility = null;
-        let readonly = false;
-        const start = this.peek().start;
-        // Elsewhere `readonly number` is a parameter named readonly, and `private x number` an error.
-        while (this.check('Identifier') &&
-            (VISIBILITIES.has(this.peek().text) || this.peek().text === 'readonly') &&
-            this.peek(1).kind === 'Identifier' &&
-            (allowed || this.peek(2).kind === 'Identifier')) {
-            const modifier = this.next();
-            if (modifier.text === 'readonly') {
-                if (readonly)
-                    this.error('duplicate "readonly" modifier', modifier.start, modifier.end);
-                readonly = true;
-            }
-            else {
-                if (visibility)
-                    this.error('duplicate visibility modifier', modifier.start, modifier.end);
-                visibility = modifier.text;
-            }
-        }
-        if (visibility === null && !readonly)
-            return null;
-        if (!allowed) {
-            this.error('only the parameters of a constructor can be properties, e.g. constructor(private name string)', start, this.span(start).end);
-        }
-        return { visibility: visibility ?? 'public', ...(readonly ? { readonly: true } : {}) };
-    }
-    /** `...attrs`: the attributes that a component passes on to one of its elements. */
-    parseRestParam(allowed) {
-        const start = this.next().start;
-        const name = this.parseIdentifier('parameter name');
-        if (!allowed) {
-            this.error(`...${name.name} is only for components: it takes the attributes of an element`, start, name.end);
-        }
-        if (this.canStartType() || this.check('=')) {
-            const at = this.peek().start;
-            // After the error, the type and the default are read, so they are not reported again.
-            if (this.canStartType())
-                this.parseType();
-            if (this.accept('='))
-                this.parseExpression();
-            this.error(`...${name.name} has no type and no default: it gets the type of the element it is spread on`, at, this.span(at).end);
-        }
-        // After the error, the rest of the list is skipped up to the `)`.
-        if (this.check(',')) {
-            this.error(`...${name.name} is the last property of a component`, start, name.end);
-            while (!this.check(')') && !this.check('EOF'))
-                this.next();
-        }
-        return {
-            kind: 'Parameter',
-            name,
-            type: null,
-            defaultValue: null,
-            rest: true,
-            ...this.span(start),
-        };
-    }
-    /** Result types after a parameter list: nothing, `T`, or `(T1, T2)`. */
-    parseResults() {
-        if (this.accept('('))
-            return this.parseList(')', () => this.parseType());
-        // `{` after the parameters starts the body, so an object result type needs parentheses.
-        if (this.canStartType() && !this.check('{'))
-            return [this.parseType()];
-        return [];
-    }
     /** `comp Name(properties) { ...; return <markup> }`, maybe after decorators. */
     parseComponent(start, exported, htmlTag = null, decorators = []) {
         this.requireMarkup('components are');
@@ -248,7 +144,7 @@ export class DeclarationParser extends JumpParser {
             ...this.span(start),
         };
     }
-    /** Like a function body, but its own statements may also declare `state`, `ref` and `mount()`. */
+    /** Like a function body, but its own statements may also declare `state`, `ref` and `mount`. */
     parseComponentBody() {
         const start = this.expect('{').start;
         const body = [];

package/dist/parser/decorators.d.ts

@@ -6,6 +6,10 @@ export declare abstract class DecoratorParser extends DeclarationParser {
     protected parseDecoratorDeclaration(start: number, exported: boolean): ast.DecoratorDeclaration;
     /** `needs cart, auth` after the parameters: `needs` is a keyword only here. */
     protected parseNeeds(): ast.Identifier[];
+    /** `includes visible(margin), cart` after `needs`: `includes` is a keyword only here. */
+    protected parseIncludes(): ast.DecoratorUse[];
+    /** `visible(margin)` or `cart`: like a decorator before `comp`, without the `@`. */
+    protected parseIncluded(): ast.DecoratorUse;
     /** Like the body of a component, but `state`, `const` and `func` may be `public`. */
     protected parseDecoratorBody(): ast.BlockStatement;
     /** `public` followed by a declaration; `public = 1` assigns a variable named `public`. */
@@ -24,7 +28,7 @@ export declare abstract class DecoratorParser extends DeclarationParser {
     /** `@visible.show`: a member of a decorator; a statement may start with it. */
     protected isDecoratorMember(): boolean;
     protected parseDecoratorMember(): ast.DecoratorMember;
-    /** `get(@visible.shown)`: `get` is special only when its argument starts with `@`. */
+    /** `get(@visible.shown)`, the old way to read a member: reported, and read as the member. */
     protected isDecoratorGet(): boolean;
-    protected parseDecoratorGet(): ast.DecoratorGet;
+    protected parseDecoratorGet(): ast.DecoratorMember;
 }

package/dist/parser/decorators.js

@@ -1,8 +1,8 @@
 import { DeclarationParser } from "./declarations.js";
 import { describe, FUNCTION_BODY } from "./syntax.js";
 // Decorators: their declarations `dec name(...) { ... }`, the decorators written before `comp`
-// (`@html-tag` and `@visible("300px")`), and the access to their members, `get(@visible.shown)`
-// and `@visible.show()`.
+// (`@html-tag` and `@visible("300px")`), and the access to their members, `@visible.shown` and
+// `@visible.show()`.
 export class DecoratorParser extends DeclarationParser {
     /** `dec visible(margin string = "0px") { ... }`: `dec` is a keyword only here. */
     isDecoratorDeclaration() {
@@ -17,6 +17,7 @@ export class DecoratorParser extends DeclarationParser {
         const name = this.parseIdentifier('decorator name');
         const params = this.parseParams(false, true);
         const needs = this.parseNeeds();
+        const includes = this.parseIncludes();
         const body = this.withContext({ ...FUNCTION_BODY, inComponent: true }, () => this.parseDecoratorBody());
         return {
             kind: 'DecoratorDeclaration',
@@ -24,6 +25,7 @@ export class DecoratorParser extends DeclarationParser {
             name,
             params,
             needs,
+            includes,
             body,
             ...this.span(start),
         };
@@ -41,6 +43,34 @@ export class DecoratorParser extends DeclarationParser {
             needs.push(this.parseIdentifier('decorator name'));
         return needs;
     }
+    /** `includes visible(margin), cart` after `needs`: `includes` is a keyword only here. */
+    parseIncludes() {
+        if (!this.checkWord('includes'))
+            return [];
+        if (this.peek(1).kind !== 'Identifier') {
+            this.fail('"includes" is followed by the decorators this one applies, e.g. includes cart');
+        }
+        this.next();
+        const includes = [this.parseIncluded()];
+        while (this.accept(','))
+            includes.push(this.parseIncluded());
+        return includes;
+    }
+    /** `visible(margin)` or `cart`: like a decorator before `comp`, without the `@`. */
+    parseIncluded() {
+        const name = this.parseIdentifier('decorator name');
+        const args = this.check('(') ? this.parseArguments() : [];
+        const spread = args.find((arg) => arg.kind === 'SpreadElement');
+        if (spread) {
+            this.error('arguments of a decorator cannot be spread', spread.start, spread.end);
+        }
+        return {
+            kind: 'DecoratorUse',
+            name,
+            arguments: args.filter((arg) => arg.kind !== 'SpreadElement'),
+            ...this.span(name.start),
+        };
+    }
     /** Like the body of a component, but `state`, `const` and `func` may be `public`. */
     parseDecoratorBody() {
         const start = this.expect('{').start;
@@ -71,8 +101,11 @@ export class DecoratorParser extends DeclarationParser {
             declaration.isPublic = true;
             return declaration;
         }
-        if (!this.check('const') && !this.check('let') && !this.isStateDeclaration()) {
-            this.fail(`only state, derived, const and func can be public, not ${describe(this.peek())}`);
+        if (!this.check('const') &&
+            !this.check('let') &&
+            !this.isStateDeclaration() &&
+            !this.isRefDeclaration()) {
+            this.fail(`only state, derived, const, ref and func can be public, not ${describe(this.peek())}`);
         }
         const declaration = this.parseVariableDeclaration(modifier.start, false);
         this.endStatement();
@@ -137,18 +170,7 @@ export class DecoratorParser extends DeclarationParser {
     /** `@visible("300px")` or `@visible`: the arguments are positional, as in a call. */
     parseDecoratorUse() {
         const at = this.expect('@');
-        const name = this.parseIdentifier('decorator name');
-        const args = this.check('(') ? this.parseArguments() : [];
-        const spread = args.find((arg) => arg.kind === 'SpreadElement');
-        if (spread) {
-            this.error('arguments of a decorator cannot be spread', spread.start, spread.end);
-        }
-        return {
-            kind: 'DecoratorUse',
-            name,
-            arguments: args.filter((arg) => arg.kind !== 'SpreadElement'),
-            ...this.span(at.start),
-        };
+        return { ...this.parseIncluded(), ...this.span(at.start) };
     }
     /** `@visible.show`: a member of a decorator; a statement may start with it. */
     isDecoratorMember() {
@@ -162,7 +184,7 @@ export class DecoratorParser extends DeclarationParser {
         const member = this.parsePropertyName('member name');
         return { kind: 'DecoratorMember', decorator, member, ...this.span(at.start) };
     }
-    /** `get(@visible.shown)`: `get` is special only when its argument starts with `@`. */
+    /** `get(@visible.shown)`, the old way to read a member: reported, and read as the member. */
     isDecoratorGet() {
         return this.checkWord('get') && this.peek(1).kind === '(' && this.peek(2).kind === '@';
     }
@@ -170,7 +192,9 @@ export class DecoratorParser extends DeclarationParser {
         const start = this.next().start;
         this.expect('(');
         const target = this.parseDecoratorMember();
-        this.expect(')', '")": get takes one member of a decorator, e.g. get(@visible.shown)');
-        return { kind: 'DecoratorGet', target, ...this.span(start) };
+        const { decorator, member } = target;
+        this.expect(')');
+        this.error(`read a member of a decorator without get: @${decorator.name}.${member.name}`, start, this.span(start).end);
+        return target;
     }
 }

package/dist/parser/params.d.ts

@@ -0,0 +1,21 @@
+import type * as ast from '../ast.ts';
+import { JumpParser } from './jumps.ts';
+export declare abstract class ParamParser extends JumpParser {
+    /**
+     * `(a, b number, c string)`. Names without a type take the type of the next typed name, as in
+     * Go; only arrow functions may leave types out entirely. The parameters of a constructor can be
+     * properties: `(private name string)`.
+     */
+    protected parseParams(typesOptional: boolean, allowDefaults?: boolean, allowRest?: boolean, allowProperties?: boolean): ast.Parameter[];
+    /** `private`, `readonly` or both before a parameter that is a property of its class. */
+    private parsePropertyModifiers;
+    /**
+     * `bind` before a property of a component, `bind active string`. Followed by a name and then
+     * not by `,` or `)`, so a parameter named bind, `(bind Mode)`, stays one.
+     */
+    private parseBindModifier;
+    /** `...attrs`: the attributes that a component passes on to one of its elements. */
+    private parseRestParam;
+    /** Result types after a parameter list: nothing, `T`, or `(T1, T2)`. */
+    protected parseResults(): ast.TypeNode[];
+}

package/dist/parser/params.js

@@ -0,0 +1,143 @@
+import { JumpParser } from "./jumps.js";
+import { VISIBILITIES } from "./syntax.js";
+// The parameters of functions, constructors and components, with their modifiers, and the results
+// of functions.
+export class ParamParser extends JumpParser {
+    /**
+     * `(a, b number, c string)`. Names without a type take the type of the next typed name, as in
+     * Go; only arrow functions may leave types out entirely. The parameters of a constructor can be
+     * properties: `(private name string)`.
+     */
+    parseParams(typesOptional, allowDefaults = false, allowRest = false, allowProperties = false) {
+        this.expect('(');
+        const params = [];
+        let untyped = 0;
+        while (!this.check(')')) {
+            if (this.check('...')) {
+                params.push(this.parseRestParam(allowRest));
+                break;
+            }
+            const paramStart = this.peek().start;
+            const property = this.parsePropertyModifiers(allowProperties);
+            const bind = this.parseBindModifier(allowRest);
+            const name = this.parseIdentifier('parameter name');
+            const type = this.canStartType() ? this.parseType() : null;
+            const defaultValue = allowDefaults && this.accept('=') ? this.parseExpression() : null;
+            if (bind && name.name === 'children') {
+                this.error('children cannot be bound: it is the content between the tags', paramStart, name.end);
+            }
+            params.push({
+                kind: 'Parameter',
+                name,
+                type,
+                defaultValue,
+                ...(property ? { property } : {}),
+                ...(bind ? { bind: true } : {}),
+                ...this.span(paramStart),
+            });
+            if (type === null) {
+                untyped++;
+            }
+            else {
+                for (const param of params.slice(params.length - 1 - untyped))
+                    param.type = type;
+                untyped = 0;
+            }
+            if (!this.accept(','))
+                break;
+        }
+        this.expect(')');
+        if (untyped > 0 && !typesOptional) {
+            const param = params[params.length - untyped];
+            this.error(`missing type for parameter "${param.name.name}"`, param.start, param.end);
+        }
+        return params;
+    }
+    /** `private`, `readonly` or both before a parameter that is a property of its class. */
+    parsePropertyModifiers(allowed) {
+        let visibility = null;
+        let readonly = false;
+        const start = this.peek().start;
+        // Elsewhere `readonly number` is a parameter named readonly, and `private x number` an error.
+        while (this.check('Identifier') &&
+            (VISIBILITIES.has(this.peek().text) || this.peek().text === 'readonly') &&
+            this.peek(1).kind === 'Identifier' &&
+            (allowed || this.peek(2).kind === 'Identifier')) {
+            const modifier = this.next();
+            if (modifier.text === 'readonly') {
+                if (readonly)
+                    this.error('duplicate "readonly" modifier', modifier.start, modifier.end);
+                readonly = true;
+            }
+            else {
+                if (visibility)
+                    this.error('duplicate visibility modifier', modifier.start, modifier.end);
+                visibility = modifier.text;
+            }
+        }
+        if (visibility === null && !readonly)
+            return null;
+        if (!allowed) {
+            this.error('only the parameters of a constructor can be properties, e.g. constructor(private name string)', start, this.span(start).end);
+        }
+        return { visibility: visibility ?? 'public', ...(readonly ? { readonly: true } : {}) };
+    }
+    /**
+     * `bind` before a property of a component, `bind active string`. Followed by a name and then
+     * not by `,` or `)`, so a parameter named bind, `(bind Mode)`, stays one.
+     */
+    parseBindModifier(allowed) {
+        const after = this.peek(2).kind;
+        if (!this.checkWord('bind') ||
+            this.peek(1).kind !== 'Identifier' ||
+            after === ',' ||
+            after === ')') {
+            return false;
+        }
+        const modifier = this.next();
+        if (!allowed) {
+            this.error('only the properties of components can be bound, e.g. comp Tabs(bind active string)', modifier.start, modifier.end);
+        }
+        return true;
+    }
+    /** `...attrs`: the attributes that a component passes on to one of its elements. */
+    parseRestParam(allowed) {
+        const start = this.next().start;
+        const name = this.parseIdentifier('parameter name');
+        if (!allowed) {
+            this.error(`...${name.name} is only for components: it takes the attributes of an element`, start, name.end);
+        }
+        if (this.canStartType() || this.check('=')) {
+            const at = this.peek().start;
+            // After the error, the type and the default are read, so they are not reported again.
+            if (this.canStartType())
+                this.parseType();
+            if (this.accept('='))
+                this.parseExpression();
+            this.error(`...${name.name} has no type and no default: it gets the type of the element it is spread on`, at, this.span(at).end);
+        }
+        // After the error, the rest of the list is skipped up to the `)`.
+        if (this.check(',')) {
+            this.error(`...${name.name} is the last property of a component`, start, name.end);
+            while (!this.check(')') && !this.check('EOF'))
+                this.next();
+        }
+        return {
+            kind: 'Parameter',
+            name,
+            type: null,
+            defaultValue: null,
+            rest: true,
+            ...this.span(start),
+        };
+    }
+    /** Result types after a parameter list: nothing, `T`, or `(T1, T2)`. */
+    parseResults() {
+        if (this.accept('('))
+            return this.parseList(')', () => this.parseType());
+        // `{` after the parameters starts the body, so an object result type needs parentheses.
+        if (this.canStartType() && !this.check('{'))
+            return [this.parseType()];
+        return [];
+    }
+}

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

@@ -18,5 +18,6 @@ export declare abstract class SimpleStatementParser extends ParserBase {
     protected parseExpressionList(): ast.Expression[];
     /** `ref input` is one name, and the markup gives its element. */
     private checkRef;
+    private parseDerivedBlock;
     protected parseVariableDeclaration(start: number, exported: boolean): ast.VariableDeclaration;
 }

package/dist/parser/simple-statements.js

@@ -67,7 +67,6 @@ export class SimpleStatementParser extends ParserBase {
     checkAssignable(target) {
         // Members of decorators are read-only outside them: the checker explains it.
         const assignable = target.kind === 'Identifier' ||
-            target.kind === 'DecoratorGet' ||
             target.kind === 'DecoratorMember' ||
             ((target.kind === 'MemberExpression' || target.kind === 'IndexExpression') &&
                 !target.optional);
@@ -125,6 +124,17 @@ export class SimpleStatementParser extends ParserBase {
             this.error(`ref declares one name, e.g. ref ${name}`, start, end);
         }
     }
+    parseDerivedBlock() {
+        const body = this.parseFunctionBody();
+        return {
+            kind: 'FuncExpression',
+            params: [],
+            results: [],
+            body,
+            start: body.start,
+            end: body.end,
+        };
+    }
     parseVariableDeclaration(start, exported) {
         const token = this.next();
         const keyword = token.kind === 'const'
@@ -135,16 +145,21 @@ export class SimpleStatementParser extends ParserBase {
         const names = [this.parseIdentifier('variable name')];
         while (this.accept(','))
             names.push(this.parseIdentifier('variable name'));
-        const type = this.canStartType() ? this.parseType() : null;
-        const values = this.accept('=') ? this.parseExpressionList() : [];
+        // `derived summary {` starts the block that computes it, as `{` after the parameters of a
+        // function starts its body: an object type goes in parentheses.
+        const block = () => keyword === 'derived' && this.check('{');
+        const type = !block() && this.canStartType() ? this.parseType() : null;
+        const body = block() ? this.parseDerivedBlock() : null;
+        const values = body === null && this.accept('=') ? this.parseExpressionList() : [];
         const { end } = this.span(start);
         if (keyword === 'ref') {
             this.checkRef(names, values.length > 0, start, end);
         }
-        else if (keyword === 'derived' && (names.length !== 1 || values.length !== 1)) {
-            this.error('derived is one name and the expression it is computed from, e.g. derived double = count * 2', start, end);
+        else if (keyword === 'derived' &&
+            (names.length !== 1 || values.length + Number(!!body) !== 1)) {
+            this.error('derived is one name and the expression it is computed from, e.g. derived double = count * 2, or a block that returns it: derived total number { ... return sum }', start, end);
         }
-        else if (values.length === 0 && type === null) {
+        else if (values.length === 0 && type === null && body === null) {
             this.error(`"${names[0].name}" needs a type or a value`, start, end);
         }
         else if (values.length === 0 && keyword === 'const') {
@@ -159,6 +174,7 @@ export class SimpleStatementParser extends ParserBase {
             names,
             type,
             values,
+            body,
             start,
             end,
         };

package/dist/parser/statements.d.ts

@@ -21,9 +21,12 @@ export declare abstract class StatementParser extends SimpleStatementParser {
     protected parseStyle(): ast.StyleStatement;
     /** `effect {`: like `state`, a keyword only at the start of a statement in a component. */
     protected isEffectDeclaration(): boolean;
-    /** `mount() {`: like `state`, a keyword only at the start of a statement in a component. */
+    /**
+     * `mount {`: like `state`, a keyword only at the start of a statement in a component. The old
+     * form `mount() {` is recognized too, so that parseMount can say how to write it now.
+     */
     protected isMountDeclaration(): boolean;
-    /** `mount() { ... }`; its body is a function that runs later, so `return` is its own. */
+    /** `mount { ... }`; its body is a function that runs later, so `return` is its own. */
     protected parseMount(): ast.MountStatement;
     /** `effect { ... }`: its body runs again later, so `return` and `defer` are its own. */
     protected parseEffect(): ast.EffectStatement;