rooklang 0.3.4 → 0.4.0

package/README.md

@@ -58,6 +58,8 @@ close(results)
 The guide with examples and a playground: <https://qwern-9876r.github.io/RookLang/>.
 Specification: [docs/spec.md](docs/spec.md), design of components:
 [docs/components.md](docs/components.md), an example: [examples/hello.rk](examples/hello.rk).
+Where Rook stands and the road to 1.0: [docs/roadmap.md](docs/roadmap.md); what changed in each
+version: [CHANGELOG.md](CHANGELOG.md).
 
 ## Installation
 

package/README.ru.md

@@ -58,6 +58,8 @@ close(results)
 Руководство с примерами и песочницей: <https://qwern-9876r.github.io/RookLang/ru/>.
 Спецификация: [docs/spec.ru.md](docs/spec.ru.md), концепция компонентов:
 [docs/components.ru.md](docs/components.ru.md), пример: [examples/hello.rk](examples/hello.rk).
+Где Rook сейчас и путь к 1.0: [docs/roadmap.ru.md](docs/roadmap.ru.md); что изменилось в каждой
+версии: [CHANGELOG.ru.md](CHANGELOG.ru.md).
 
 ## Установка
 

package/dist/ast/declarations.d.ts

@@ -1,4 +1,4 @@
-import type { Expression, Identifier, StringLiteral } from './expressions.ts';
+import type { Expression, FuncExpression, Identifier, StringLiteral } from './expressions.ts';
 import type { TypeMember, TypeNode, TypeReference } from './markup.ts';
 import type { BlockStatement, Statement } from './statements.ts';
 export interface NodeBase {
@@ -57,6 +57,11 @@ export interface Parameter extends NodeBase {
      * properties, which `{...attrs}` puts on one of its elements.
      */
     rest?: true;
+    /**
+     * `bind active string`: a property of a component that it may change. `bind:active={tab}`
+     * writes the changes into the parent's `tab`; without it the property is the component's state.
+     */
+    bind?: true;
     /**
      * `constructor(private name string)`: the parameter is a property too, which the constructor
      * assigns, as in TypeScript.
@@ -97,6 +102,11 @@ export interface DecoratorDeclaration extends NodeBase {
     params: Parameter[];
     /** `needs cart, auth`: the decorators whose public members it uses; they are applied above it. */
     needs: Identifier[];
+    /**
+     * `includes visible(margin), cart`: decorators applied with it, above its own body, whose
+     * arguments see its parameters. Their public members are its own for the component, `@shop.count`.
+     */
+    includes: DecoratorUse[];
     body: BlockStatement;
 }
 /** `@visible("300px")` or `@visible` before `comp`; the arguments are positional. */
@@ -118,14 +128,20 @@ export interface VariableDeclaration extends NodeBase {
     exported: boolean;
     keyword: 'let' | 'const' | 'state' | 'derived' | 'ref';
     /**
-     * `public state`, `public derived` or `public const` in a decorator: the component reads it with
-     * `get(@name.x)`.
+     * `public state`, `public derived` or `public const` in a decorator: the component reads it as
+     * `@name.x`.
      */
     isPublic: boolean;
     /** `_` is an ordinary identifier here; the checker treats it as "skip this value". */
     names: Identifier[];
     type: TypeNode | null;
     values: Expression[];
+    /**
+     * `derived summary string { ...; return text }`: the block that computes a derived value, a
+     * function without parameters, so that what looks for the `return`s, `defer`s and `break`s of a
+     * component stops at it, as at other functions. Its result type is `type`; `values` is empty.
+     */
+    body: FuncExpression | null;
 }
 /** `class Admin extends User implements Shape { ... }` */
 export interface ClassDeclaration extends NodeBase {

package/dist/ast/expressions.d.ts

@@ -1,7 +1,7 @@
 import type { NodeBase, Parameter } from './declarations.ts';
 import type { ElementExpression, TypeNode } from './markup.ts';
 import type { BlockStatement } from './statements.ts';
-export type Expression = Identifier | NumberLiteral | BigIntLiteral | StringLiteral | RegExpLiteral | TemplateLiteral | BooleanLiteral | NullLiteral | ThisExpression | SuperExpression | ArrayLiteral | ObjectLiteral | FuncExpression | ArrowFunction | UnaryExpression | BinaryExpression | ConditionalExpression | CallExpression | NewExpression | MemberExpression | IndexExpression | ElementExpression | DecoratorMember | DecoratorGet | AsExpression | GoExpression | ChanExpression | StreamChanExpression | QueueExpression | TopicExpression | DecodeExpression | TryExpression | ConversionExpression | MakeExpression;
+export type Expression = Identifier | NumberLiteral | BigIntLiteral | StringLiteral | RegExpLiteral | TemplateLiteral | BooleanLiteral | NullLiteral | ThisExpression | SuperExpression | ArrayLiteral | ObjectLiteral | FuncExpression | ArrowFunction | UnaryExpression | BinaryExpression | ConditionalExpression | CallExpression | NewExpression | MemberExpression | IndexExpression | ElementExpression | DecoratorMember | AsExpression | GoExpression | ChanExpression | StreamChanExpression | QueueExpression | TopicExpression | DecodeExpression | TryExpression | ConversionExpression | MakeExpression;
 /**
  * `[]byte("rook")`: the UTF-8 bytes of a string. `string(data)`, the way back, is a call, since
  * `string` may be the name of a value.
@@ -231,16 +231,12 @@ export interface IndexExpression extends NodeBase {
     optional: boolean;
 }
 /**
- * `@visible.shown`: a public member of a decorator applied to the component. The names belong to
- * the decorator, not to any scope, so walkers do not visit them as identifiers.
+ * `@visible.shown` or `@visible.show()`: a public member of a decorator applied to the component,
+ * read or called. The names belong to the decorator, not to any scope, so walkers do not visit them
+ * as identifiers.
  */
 export interface DecoratorMember extends NodeBase {
     kind: 'DecoratorMember';
     decorator: Identifier;
     member: Identifier;
 }
-/** `get(@visible.shown)`: reads public state or a constant of a decorator. */
-export interface DecoratorGet extends NodeBase {
-    kind: 'DecoratorGet';
-    target: DecoratorMember;
-}

package/dist/ast/statements.d.ts

@@ -86,6 +86,8 @@ export interface ForInStatement extends NodeBase {
     key: Identifier | null;
     value: Identifier;
     iterable: Expression;
+    /** `with key todo.id` of a `{for}` in markup: what its blocks are found again by. */
+    withKey?: Expression;
     body: BlockStatement;
     go?: boolean;
 }
@@ -156,7 +158,7 @@ export interface DeferStatement extends NodeBase {
     body: CallExpression | BlockStatement;
 }
 /**
- * `mount() { ... }` at the top level of a component: runs once the component's markup is in the
+ * `mount { ... }` at the top level of a component: runs once the component's markup is in the
  * document. It may return a function, which runs when `{if}`, `{switch}` or `{for}` removes the
  * markup.
  */

package/dist/checker/assignments.d.ts

@@ -2,6 +2,8 @@ import type * as ast from '../ast.ts';
 import { InitializerChecker } from './initializers.ts';
 import { type Type } from './types.ts';
 export declare abstract class AssignmentChecker extends InitializerChecker {
+    /** The name of the `derived` whose block is being checked: it computes, so it changes no state. */
+    protected derivedBlock: string | null;
     /**
      * `a, b = f()` or `return f()`: the call must return exactly `count` values. Returns their
      * types.

package/dist/checker/assignments.js

@@ -1,3 +1,4 @@
+import { placeOf } from "./context.js";
 import { guardedByError, unpackedResults } from "./error-results.js";
 import { isUntyped, countValues, callName, isCall } from "./helpers.js";
 import { InitializerChecker } from "./initializers.js";
@@ -5,6 +6,8 @@ import { BOOL, ANY, isAssignable, isNullable, nonNull, nullable, typeToString, U
 // Where values go: assignments to variables, fields and elements, and `return`. Both unpack a call
 // that returns several values.
 export class AssignmentChecker extends InitializerChecker {
+    /** The name of the `derived` whose block is being checked: it computes, so it changes no state. */
+    derivedBlock = null;
     /**
      * `a, b = f()` or `return f()`: the call must return exactly `count` values. Returns their
      * types.
@@ -66,13 +69,13 @@ export class AssignmentChecker extends InitializerChecker {
             const binding = this.narrowableBinding(target);
             const declared = binding?.type;
             if (binding && declared && isNullable(declared) && !isNullable(valueTypes[i] ?? UNKNOWN)) {
-                this.flow.set(binding, nonNull(declared));
+                this.flow.set(placeOf(binding), nonNull(declared));
             }
         });
     }
     /** The type a value assigned to `target` must have. */
     checkTarget(target) {
-        if (this.checkDecoratorWrite(target))
+        if (this.checkDecoratorWrite(target) || this.checkSharedWrite(target))
             return UNKNOWN;
         switch (target.kind) {
             case 'Identifier': {
@@ -92,13 +95,16 @@ export class AssignmentChecker extends InitializerChecker {
                 else if (binding.kind === 'ref') {
                     this.error(`cannot assign to "${target.name}": a ref always points to its element`, target);
                 }
+                else if (binding.kind === 'state' && this.derivedBlock !== null) {
+                    this.error(`derived "${this.derivedBlock}" cannot change the state "${target.name}": change it in an event handler or an effect`, target);
+                }
                 else if (binding.kind === 'loop') {
                     this.error(`cannot assign to loop variable "${target.name}"`, target);
                 }
                 else if (binding.kind === 'prop') {
                     this.error(this.decorator
                         ? `cannot assign to "${target.name}": parameters of a decorator are read-only`
-                        : `cannot assign to "${target.name}": component properties are read-only; to change the parent's state, pass a function`, target);
+                        : `cannot assign to "${target.name}": component properties are read-only; to change it, declare it with bind, e.g. comp ${this.component?.node.name.name ?? 'Tabs'}(bind ${target.name} ...)`, target);
                 }
                 else if (binding.kind !== 'let' &&
                     binding.kind !== 'state' &&

package/dist/checker/base.d.ts

@@ -1,6 +1,6 @@
 import type * as ast from '../ast.ts';
 import type { Diagnostic } from '../diagnostics.ts';
-import { type CheckOptions, type BindingKind, type Binding, type ComponentInfo, type DecoratorInfo, type AliasEntry, Scope, type FunctionContext, type ClassContext, type Flow } from './context.ts';
+import { type CheckOptions, type BindingKind, type Binding, type ComponentInfo, type DecoratorInfo, type AliasEntry, Scope, type FunctionContext, type ClassContext, type Flow, type Place } from './context.ts';
 import { type ClassInfo, type FunctionType, type Member, type Type, type TypeParam } from './types.ts';
 export declare abstract class CheckerBase {
     protected abstract checkClassBodies(node: ast.ClassDeclaration, info: ClassInfo): void;
@@ -18,6 +18,13 @@ export declare abstract class CheckerBase {
     protected abstract checkTry(node: ast.TryStatement): void;
     protected abstract forget(target: ast.Expression): void;
     protected abstract narrowableBinding(node: ast.Expression): Binding | undefined;
+    /** A variable or a path of data fields that conditions narrow, with its type at this point. */
+    protected abstract narrowable(node: ast.Expression): {
+        place: Place;
+        type: Type;
+    } | undefined;
+    /** Whether an assignment to `field` of `place` may change the member of a union it is. */
+    protected abstract isTagOf(place: Place, field: string): boolean;
     /** The error for a value that may be null where it must not be. */
     protected abstract nullError(node: ast.Expression): void;
     protected abstract checkFunction(params: readonly ast.Parameter[], type: FunctionType, results: Type[] | null, body: ast.BlockStatement | ast.Expression, options?: {
@@ -44,7 +51,6 @@ export declare abstract class CheckerBase {
     protected abstract orderByNeeds(decorators: readonly DecoratorInfo[]): DecoratorInfo[];
     protected abstract wrappedType(info: ComponentInfo, own: Type, seen: Set<ComponentInfo>): Type;
     protected abstract checkDecoratorMember(node: ast.DecoratorMember): Type;
-    protected abstract checkDecoratorGet(node: ast.DecoratorGet): Type;
     protected abstract checkDecoratorWrite(target: ast.Expression): boolean;
     protected abstract checkComponentUse(node: ast.ElementExpression, tag: ast.Identifier): Type;
     protected abstract checkRefDeclaration(node: ast.VariableDeclaration): void;

package/dist/checker/base.js

@@ -4,9 +4,9 @@ import { Scope, globalScope, } from "./context.js";
 import { DOCUMENT_FRAGMENT, eventType, HTML_ELEMENT, NODE } from "./dom.js";
 import { explainMismatch, isAssignable, LazyMap, memberNames, nonNull, property, typeToString, UNKNOWN, } from "./types.js";
 // The type checker is a chain of layers, one per area, like the code generator: base → imports →
-// declarations → class members → classes → resolution → initializers → assignments → statements → control flow →
-// functions → expressions → array literals → operators → markup → forwarding → components → component values →
-// refs → styles → decorator wrappers → decorator exports → decorators → decorator members →
+// shared state → declarations → class members → classes → resolution → initializers → assignments → statements → control flow →
+// tagged unions → functions → expressions → array literals → operators → markup → forwarding → component bindings → components → component values →
+// refs → styles → decorator wrappers → decorator exports → decorators → decorator includes → decorator members →
 // members → calls → goroutines → channels → signals → queues → topics → decode → try → bytes → loops → go for →
 // iterators → closing → completion → Checker (checker.ts). Statements, expressions and markup
 // check each other recursively, so methods of later layers that earlier ones call are declared

package/dist/checker/builtins.js

@@ -6,7 +6,7 @@ import { chanOf } from "./channel.js";
 import { CHANNEL_OBJECT, TOPIC_OBJECT } from "./channel-objects.js";
 import { PROMISE } from "./promise.js";
 import { BUFFERS } from "./transfer.js";
-import { UNTYPED_GLOBALS } from "./untyped-globals.js";
+import { UNTYPED_CLASSES, UNTYPED_GLOBALS } from "./untyped-globals.js";
 import { ANY, arrayOf, BIGINT, BOOL, ERROR, ERROR_CLASS, func, method, NUMBER, nullable, property, STRING, topicOf, union, } from "./types.js";
 // Types of the JS standard library that Rook programs use most. Anything not listed here
 // can still be reached through the untyped globals below.
@@ -249,7 +249,10 @@ export const GLOBAL_VALUES = new Map([
     ['cancel', func([ANY], [])],
     ['Channel', CHANNEL_OBJECT],
     ['Topic', TOPIC_OBJECT],
-    ...[...UNTYPED_GLOBALS, ...BUFFERS].map((name) => [name, ANY]),
+    ...[...UNTYPED_GLOBALS, ...UNTYPED_CLASSES, ...BUFFERS].map((name) => [
+        name,
+        ANY,
+    ]),
 ]);
 /** Built-in types that a library from TypeScript's lib files replaces: untyped ones and the DOM. */
 export const LIBRARY_TYPES = new Set([
@@ -260,6 +263,7 @@ export const LIBRARY_TYPES = new Set([
     'Promise',
     'URL',
     'Event',
+    ...UNTYPED_CLASSES,
     ...BUFFERS,
     ...[...DOM_TYPES.keys()].filter((name) => name !== 'Content'),
     ...SVG_TYPES.keys(),
@@ -278,7 +282,7 @@ export const GLOBAL_TYPES = new Map([
     ['any', ANY],
     ['error', ERROR],
     ['Error', ERROR_CLASS.instance],
-    ...['Date', 'RegExp', 'Map', 'Set', 'URL', ...BUFFERS].map((name) => [name, ANY]),
+    ...['Date', 'RegExp', 'Map', 'Set', 'URL', ...UNTYPED_CLASSES, ...BUFFERS].map((name) => [name, ANY]),
     ['Promise', PROMISE],
     ...DOM_TYPES,
     ...SVG_TYPES,

package/dist/checker/channels.js

@@ -1,4 +1,3 @@
-import { assignedNames } from "../names.js";
 import { cannotWait } from "../parser/syntax.js";
 import { chanDirection, chanOf, elementOf, isChan } from "./channel.js";
 import { GoroutineChecker } from "./goroutines.js";
@@ -115,7 +114,7 @@ export class ChannelChecker extends GoroutineChecker {
             : ANY;
     }
     checkSelect(node) {
-        this.dropNarrowing(assignedNames(node));
+        this.dropNarrowing(node);
         const entry = this.flow;
         for (const { names, operation, body } of node.cases) {
             this.flow = new Map(entry);

package/dist/checker/classes.js

@@ -195,6 +195,7 @@ export class ClassChecker extends ClassMemberChecker {
             types: new Map(),
             decorators: new Map(),
             components: new Map(),
+            shared: new Set(),
         };
         const declarations = { values: new Map(), types: new Map() };
         const valueOf = (name) => this.moduleScope.values.get(name)?.type ?? UNKNOWN;
@@ -217,6 +218,8 @@ export class ClassChecker extends ClassMemberChecker {
                 case 'VariableDeclaration':
                     for (const name of statement.names) {
                         add(statement.exported, 'values', name.name, valueOf(name.name));
+                        if (statement.exported && statement.keyword === 'state')
+                            exports.shared.add(name.name);
                     }
                     break;
                 case 'ClassDeclaration':
@@ -230,7 +233,10 @@ export class ClassChecker extends ClassMemberChecker {
                 case 'ComponentDeclaration': {
                     const info = this.moduleScope.values.get(statement.name.name)?.component;
                     if (statement.exported && info?.node === statement) {
-                        info.inline = this.modulePackages().components.get(info.node.name.name) ?? null;
+                        const found = this.modulePackages().components.get(info.node.name.name) ?? null;
+                        // Code that reads state another module shares listens to it here, so it stays here.
+                        const shared = found?.moduleNames.some((name) => this.moduleScope.values.get(name)?.shared !== undefined);
+                        info.inline = shared ? null : found;
                         info.expressionTypes = this.checkedTypes;
                         exports.components.set(statement.name.name, info);
                     }

package/dist/checker/closing.js

@@ -4,7 +4,7 @@ import { IteratorChecker } from "./iterators.js";
 const OPERATIONS = new Set(['send', 'receive', 'range', 'stream', 'publish', 'listen', 'try']);
 const MESSAGES = {
     chan: (name) => `"${name}" is never closed: close it when nothing more is sent, e.g. close(${name})`,
-    topic: (name) => `"${name}" is never closed, and a topic listens until it is closed: close it when it is no longer needed, e.g. close(${name}), in a component in the function that mount() returns`,
+    topic: (name) => `"${name}" is never closed, and a topic listens until it is closed: close it when it is no longer needed, e.g. close(${name}); a component closes it with defer close(${name}) in mount`,
     tick: (name) => `"${name}" is never closed, and a tick runs until it is closed: e.g. close(${name})`,
     signal: (name) => `"${name}" is never closed, and it keeps the program running until it is: close it once the signal has come, e.g. close(${name})`,
 };

package/dist/checker/completion.d.ts

@@ -1,6 +1,6 @@
 import type * as ast from '../ast.ts';
 import { ClosingChecker } from './closing.ts';
-import type { CompletionResult } from './context.ts';
+import { type CompletionResult } from './context.ts';
 import { type Type } from './types.ts';
 export declare abstract class CompletionChecker extends ClosingChecker {
     protected completion: CompletionResult | null;

package/dist/checker/completion.js

@@ -1,5 +1,6 @@
 import { ClosingChecker } from "./closing.js";
 import { ARRAY_MEMBERS, ATTRIBUTE_NAMES, BIGINT_MEMBERS, BOOL_MEMBERS, EVENT_ATTRIBUTES, HTML_TAGS, NUMBER_MEMBERS, STRING_MEMBERS, } from "./completion-names.js";
+import { placeOf, } from "./context.js";
 import { isSubclass, literalBase, memberNames, memberTypeOf, nonNull, typeToString, union, UNKNOWN, } from "./types.js";
 // Completion in editors (src/completion.ts): the editor writes the name `options.completion` where
 // the cursor is, and this layer lists what can be written there when the check reaches that name:
@@ -79,7 +80,7 @@ export class CompletionChecker extends ClosingChecker {
         if (component) {
             return { name, kind: 'component', detail: typeToString(this.componentValue(component)) };
         }
-        const type = binding.type && (this.flow.get(binding) ?? binding.type);
+        const type = binding.type && (this.flow.get(placeOf(binding)) ?? binding.type);
         const detail = type ? { detail: typeToString(type) } : {};
         if (kind === 'function' || type?.kind === 'function')
             return { name, kind: 'function', ...detail };

package/dist/checker/component-bindings.d.ts

@@ -0,0 +1,7 @@
+import type * as ast from '../ast.ts';
+import type { ComponentInfo } from './context.ts';
+import { ForwardingChecker } from './forwarding.ts';
+export declare abstract class ComponentBindingChecker extends ForwardingChecker {
+    /** `bind:active={tab}` on a component; adds the name of the property to `given`. */
+    protected checkPropBinding(attribute: ast.JsxAttribute, info: ComponentInfo, component: string, given: Set<string>): void;
+}

package/dist/checker/component-bindings.js

@@ -0,0 +1,45 @@
+import { attrsParam } from "../attrs.js";
+import { ForwardingChecker } from "./forwarding.js";
+import { isUntyped } from "./helpers.js";
+import { isAssignable, typeToString } from "./types.js";
+// Bound properties: `comp Tabs(bind active string)` may change `active`, and
+// `<Tabs bind:active={tab} />` writes those changes into the parent's `tab`, as `bind:value` of an
+// input does. The value goes both ways, so the variable and the property have the same type.
+export class ComponentBindingChecker extends ForwardingChecker {
+    /** `bind:active={tab}` on a component; adds the name of the property to `given`. */
+    checkPropBinding(attribute, info, component, given) {
+        const name = attribute.name.name.slice('bind:'.length);
+        const prop = info.props.get(name);
+        const { value } = attribute;
+        if (given.has(name))
+            this.error(`duplicate property "${name}"`, attribute.name);
+        given.add(name);
+        if (!prop) {
+            this.error(attrsParam(info.node)
+                ? `${attribute.name.name} does not go through the attributes of <${component}>`
+                : `<${component}> has no property "${name}" to bind`, attribute.name);
+        }
+        else if (!prop.bind) {
+            this.error(`"${name}" of <${component}> is not bound: the component declares it with bind to change it, e.g. comp ${component}(bind ${name} ...)`, attribute.name);
+        }
+        if (value === null || value.kind === 'StringLiteral' || value.kind === 'EventHandler') {
+            this.error(`"bind:${name}" needs a variable in braces, e.g. bind:${name}={${name}}`, attribute);
+            return;
+        }
+        const bindable = (value.kind === 'Identifier' && value.name !== '_') ||
+            ((value.kind === 'MemberExpression' || value.kind === 'IndexExpression') && !value.optional);
+        if (!bindable) {
+            this.checkValue(value);
+            this.error(`"bind:${name}" needs a variable or a field to write to`, value);
+            return;
+        }
+        const type = this.checkTarget(value);
+        this.checkedTypes.set(value, type);
+        if (!prop?.bind || isUntyped(type) || isUntyped(prop.type))
+            return;
+        // The parent gives its value, and the component writes its own back.
+        if (!isAssignable(type, prop.type) || !isAssignable(prop.type, type)) {
+            this.error(`cannot bind ${typeToString(type)} to "${name}" of <${component}>, which is ${typeToString(prop.type)}`, value);
+        }
+    }
+}

package/dist/checker/component-values.js

@@ -1,6 +1,5 @@
 import { ComponentChecker } from "./components.js";
 import { isUntyped } from "./helpers.js";
-const upperFirst = (name) => name.charAt(0).toUpperCase() + name.slice(1);
 import { isNullable, typeToString, UNKNOWN, } from "./types.js";
 // Components as values: `content: Intro` has the type `comp()`, and a tag takes the component
 // from a value, `<section.content />`, or `<Page />` when `Page` is a variable. Such a tag passes
@@ -20,12 +19,8 @@ export class ComponentValueChecker extends ComponentChecker {
         const name = tag.name;
         if (isUntyped(type) || type.kind !== 'component') {
             if (isNullable(type)) {
-                // Only variables are narrowed, so a path goes into one first.
-                const variable = /^[A-Z]/.test(name) ? name : upperFirst(name.split('.').at(-1));
-                const show = `{if ${variable} != null { <${variable} /> }}`;
-                this.error(name === variable
-                    ? `<${name}> may be null: show it with {if}, e.g. ${show}`
-                    : `<${name}> may be null: put it into a variable and show it with {if}, e.g. const ${variable} = ${name}, then ${show}`, tag);
+                // A path of fields is narrowed like a variable: `{if page.other != null { <page.other /> }}`.
+                this.error(`<${name}> may be null: show it with {if}, e.g. {if ${name} != null { <${name} /> }}`, tag);
             }
             else if (!isUntyped(type)) {
                 this.error(`<${name}> is ${typeToString(type)}, not a component: give it a type like comp(title string)`, tag);
@@ -58,6 +53,14 @@ export class ComponentValueChecker extends ComponentChecker {
                 this.error(`ref cannot point to <${name}>: its component is a value, so its element is not known in advance`, attribute);
                 continue;
             }
+            // The type of the value does not say which properties are bound.
+            if (attributeName.startsWith('bind:')) {
+                const { value } = attribute;
+                if (value && value.kind !== 'EventHandler')
+                    this.checkValue(value);
+                this.error(`<${name}> takes its component from a value, so it cannot bind its properties; pass a function, e.g. onChange={...}`, attribute.name);
+                continue;
+            }
             if (given.has(attributeName)) {
                 this.error(`duplicate property "${attributeName}"`, attribute.name);
             }

package/dist/checker/components.d.ts

@@ -1,8 +1,8 @@
 import type * as ast from '../ast.ts';
 import type { ComponentInfo } from './context.ts';
-import { ForwardingChecker } from './forwarding.ts';
+import { ComponentBindingChecker } from './component-bindings.ts';
 import { type Type } from './types.ts';
-export declare abstract class ComponentChecker extends ForwardingChecker {
+export declare abstract class ComponentChecker extends ComponentBindingChecker {
     protected resolveProps(info: ComponentInfo): void;
     /** The body runs once where the component is used and must end with `return <markup>`. */
     protected checkComponentBody(info: ComponentInfo): void;

package/dist/checker/components.js

@@ -3,10 +3,11 @@ import { freeNames } from "../names.js";
 import { endlessRecursion } from "../recursion.js";
 import { CONTENT } from "./dom.js";
 import { lookupIn, ownStatements, isUntyped, callSignature } from "./helpers.js";
-import { ATTRIBUTES, ForwardingChecker } from "./forwarding.js";
+import { ComponentBindingChecker } from "./component-bindings.js";
+import { ATTRIBUTES } from "./forwarding.js";
 import { BOOL, func, hasZeroValue, isAssignable, isNullable, nonNull, spreadFields, typesEqual, typeToString, UNKNOWN, } from "./types.js";
 // Components: their bodies and uses, properties and spread, names they use from the module, recursion.
-export class ComponentChecker extends ForwardingChecker {
+export class ComponentChecker extends ComponentBindingChecker {
     resolveProps(info) {
         for (const param of info.node.params) {
             // `...attrs` takes the attributes that are not properties.
@@ -20,7 +21,7 @@ export class ComponentChecker extends ForwardingChecker {
             if (info.props.has(name))
                 this.error(`duplicate property "${name}"`, param.name);
             const optional = param.defaultValue !== null || isNullable(type) || name === 'children';
-            info.props.set(name, { type, optional });
+            info.props.set(name, { type, optional, ...(param.bind ? { bind: true } : {}) });
         }
     }
     /** The body runs once where the component is used and must end with `return <markup>`. */
@@ -96,6 +97,10 @@ export class ComponentChecker extends ForwardingChecker {
                 this.checkRefAttribute(attribute, node);
                 continue;
             }
+            if (name.startsWith('bind:')) {
+                this.checkPropBinding(attribute, info, tag.name, given);
+                continue;
+            }
             if (given.has(name))
                 this.error(`duplicate property "${name}"`, attribute.name);
             given.add(name);

package/dist/checker/context.d.ts

@@ -11,6 +11,8 @@ export interface ModuleExports {
     decorators?: Map<string, DecoratorInfo>;
     /** `export comp`: components are used as tags, not as values. */
     components?: Map<string, ComponentInfo>;
+    /** `export state`: other modules read it, and change it only with the functions of its module. */
+    shared?: Set<string>;
 }
 /** What `importModule` found: the module's exports, an error for the import, or nothing (untyped). */
 export type ImportResult = {
@@ -100,6 +102,8 @@ export interface Binding {
     type: Type | null;
     /** For components, which exist only at compile time and are used as tags. */
     component?: ComponentInfo;
+    /** State of another module, `state items` there, which is read-only here: its module's path. */
+    shared?: string;
     /**
      * `const user, err = loadUser(id)` of `(User, error)`: the error has the values that are not null
      * once it is null, and each of them has the error (error-results.ts).
@@ -113,6 +117,7 @@ export interface ComponentInfo {
     props: Map<string, {
         type: Type;
         optional: boolean;
+        bind?: true;
     }>;
     /** Names from the module that the component's code uses, computed when first needed. */
     freeNames: Set<string> | null;
@@ -160,6 +165,8 @@ export interface DecoratorInfo {
     } | null;
     /** The decorators after `needs` that exist; they are applied above it. */
     needed: DecoratorInfo[];
+    /** The decorators after `includes` that exist: applied with it, above its own body. */
+    included: DecoratorInfo[];
     /**
      * For an exported decorator: the names of its module that its code uses, which other modules get
      * through hidden exports, and the types of its expressions, for the code generator there.
@@ -170,9 +177,15 @@ export interface DecoratorInfo {
     inline: InlinePackage | null;
 }
 export interface PublicMember {
-    kind: 'state' | 'derived' | 'const' | 'func';
+    kind: 'state' | 'derived' | 'const' | 'ref' | 'func';
     type: Type;
 }
+/**
+ * The decorators applied with those they include, which come before them: `@shop` of
+ * `dec shop() includes visible, cart` gives visible, cart, shop. A cycle of includes is reported
+ * where the decorators are declared; here it stops.
+ */
+export declare function withIncluded(decorators: readonly DecoratorInfo[], seen?: ReadonlySet<DecoratorInfo>): DecoratorInfo[];
 /** A `type` alias, resolved when first used. */
 export interface AliasEntry {
     kind: 'alias';
@@ -205,11 +218,21 @@ export interface ClassContext {
     isStatic: boolean;
 }
 /**
- * Types of variables narrowed by the code before the current point, e.g. `?User` → `User`
- * after `if user == null { return }`.
+ * A variable, or a path of data fields from it that is narrowed like one: `order.delivery` is the
+ * binding of `order` with the path `"delivery"`. The path of the variable itself is empty.
+ */
+export interface Place {
+    binding: Binding;
+    path: string;
+}
+/** The same object for the same variable and path, so that it is a key of a `Flow`. */
+export declare function placeOf(binding: Binding, path?: string): Place;
+/**
+ * Types of variables and paths narrowed by the code before the current point, e.g. `?User` →
+ * `User` after `if user == null { return }`.
  */
-export type Flow = Map<Binding, Type>;
-export type Narrowing = [Binding, Type][];
+export type Flow = Map<Place, Type>;
+export type Narrowing = [Place, Type][];
 export declare const NARROWABLE: ReadonlySet<BindingKind>;
 /** Built-in globals. With a library, the untyped ones and the DOM types come from it instead. */
 export declare function globalScope(library: Library | undefined): Scope;

package/dist/checker/context.js

@@ -1,5 +1,13 @@
 import { GLOBAL_TYPES, GLOBAL_VALUES, LIBRARY_TYPES } from "./builtins.js";
 import {} from "./types.js";
+/**
+ * The decorators applied with those they include, which come before them: `@shop` of
+ * `dec shop() includes visible, cart` gives visible, cart, shop. A cycle of includes is reported
+ * where the decorators are declared; here it stops.
+ */
+export function withIncluded(decorators, seen = new Set()) {
+    return decorators.flatMap((each) => seen.has(each) ? [] : [...withIncluded(each.included, new Set([...seen, each])), each]);
+}
 export class Scope {
     parent;
     values = new Map();
@@ -8,6 +16,21 @@ export class Scope {
         this.parent = parent;
     }
 }
+const places = new WeakMap();
+/** The same object for the same variable and path, so that it is a key of a `Flow`. */
+export function placeOf(binding, path = '') {
+    let byPath = places.get(binding);
+    if (!byPath) {
+        byPath = new Map();
+        places.set(binding, byPath);
+    }
+    let place = byPath.get(path);
+    if (!place) {
+        place = { binding, path };
+        byPath.set(path, place);
+    }
+    return place;
+}
 export const NARROWABLE = new Set([
     'let',
     'const',

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

@@ -1,5 +1,5 @@
 import type * as ast from '../ast.ts';
-import { type Binding, type Flow, type Narrowing } from './context.ts';
+import { type Binding, type Narrowing } from './context.ts';
 import { StatementChecker } from './statements.ts';
 export declare abstract class ControlFlowChecker extends StatementChecker {
     protected checkIf(node: ast.IfStatement): void;
@@ -15,16 +15,17 @@ export declare abstract class ControlFlowChecker extends StatementChecker {
      * `switch filter { case "all": ... default: ... }`: in a case the discriminant has the literals
      * of its tests, in `default` the literals of no case.
      */
-    protected narrowCase(node: ast.SwitchStatement, switchCase: ast.SwitchCase, entry: Flow): Narrowing;
+    protected narrowCase(node: ast.SwitchStatement, switchCase: ast.SwitchCase): Narrowing;
     protected checkTry(node: ast.TryStatement): void;
     protected checkCondition(node: ast.Expression): void;
-    /** Variables whose type is narrowed when `node` evaluates to `assumeTrue`. */
+    /** Variables and paths whose type is narrowed when `node` evaluates to `assumeTrue`. */
     protected narrow(node: ast.Expression, assumeTrue: boolean): Narrowing;
     /** `x instanceof Date`: an instance of the class when true, the rest of a union when false. */
     protected narrowInstanceof(left: ast.Expression, right: ast.Expression, assumeTrue: boolean): Narrowing;
     protected nullError(node: ast.Expression): void;
     protected narrowableBinding(node: ast.Expression): Binding | undefined;
-    /** An assignment to a variable ends its narrowing. */
+    /** An assignment to a variable ends its narrowing; one to a path, that of the paths it changes. */
     protected forget(target: ast.Expression): void;
-    protected dropNarrowing(names: ReadonlySet<string>): void;
+    /** Ends the narrowing of what `node` assigns: before a loop, or a statement with several ways. */
+    protected dropNarrowing(node: ast.Node): void;
 }