kopscript 0.15.0 → 0.17.0

package/LLM.md

@@ -238,12 +238,27 @@ limitation, not a semantic one).
 ```ks
 number[] xs = [1, 2, 3];
 xs.Length
-xs.Push(4)                    // NON-mutating — returns a new array, doesn't modify xs
-xs.Map((number x) => x * 2)   // -> array of whatever the callback returns
+xs.Push(4)                            // NON-mutating — returns a new array, doesn't modify xs
+xs.Map((number x) => x * 2)           // -> array of whatever the callback returns
 xs.Filter((number x) => x > 1)
 xs.ForEach((number x) => { print(x); })
+xs.Find((number x) => x > 1)          // -> T?, null if nothing matches
+xs.FindIndex((number x) => x > 1)     // -> number, -1 if nothing matches
+xs.Includes(2)                        // -> bool
+xs.IndexOf(2)                         // -> number, -1 if not present
+xs.Sort((number a, number b) => a - b)  // NON-mutating, comparator always required
+xs.Reverse()                            // NON-mutating
+xs.Slice(1, 2)                        // both bounds always required, no optional params
+xs.Concat(ys)                         // ys: same element type
+xs.Join(", ")                         // -> string; number[]/string[]/bool[] element types only
+xs.Reduce((number acc, number x) => acc + x, 0)  // (acc, initial) — accumulator type = initial's type
 ```
 
+`Push`/`Sort`/`Reverse` are non-mutating (return a new array) — the one deliberate
+departure from real JS, where all three mutate in place; everything else here compiles
+straight to its real `Array.prototype` equivalent. `Reduce`'s argument order matches real
+JS (`reducer, initial`, not the other way around).
+
 ### Strings
 
 ```ks
@@ -525,11 +540,16 @@ class Counter : Component {
 - One `template` per class; a class with both `template` and a hand-written `Render()` is a
   compile error.
 - Desugars, between parsing and checking, into the exact same `MethodDecl` AST a
-  hand-written `Render()` would produce — no runtime template engine, no virtual DOM.
-  `{{ }}`/binding contents are real KopScript, parsed and type-checked normally.
-- Bindings: `{{ expr }}` (text interpolation, → `InterpolatedStringLiteral`), `(event)="stmt"`
-  (→ `addEventListener`), `[prop]="expr"` (→ plain assignment, checked like any member
-  assignment), static `attr="..."` (`class` aliases to `className`).
+  hand-written `Render()` would produce — building a `VElement` tree as data, no runtime
+  template engine, no diffing of its own (Kopular's own `Component` base class does that
+  against the tree this produces). `{{ }}`/binding contents are real KopScript, parsed and
+  type-checked normally.
+- Bindings: `{{ expr }}` (text interpolation, → `VElement.TextContent = InterpolatedStringLiteral`),
+  `(event)="stmt"` (→ assignment to one of `VElement`'s four named event fields —
+  `OnClick`/`OnInput`/`OnBlur`/`OnChange`; any other event name is a compile error),
+  `[prop]="expr"` (→ a plain field assignment for `id`/`className`/`value`, or
+  `VElement.SetAttr("prop", expr)` for anything else), static `attr="..."` (`class` aliases
+  to `className`).
 - Structural directives: `*if="expr"` (→ real `if`), `*for="Type varName of expr"` (→ real
   `for..in`; the element type is explicit — no inference, same stance as Generics).
   At most one structural directive per element.
@@ -541,9 +561,9 @@ class Counter : Component {
   element children under one element. No two-way binding, no pipes, no stacked directives.
 - `ks watch` tracks the referenced `.html` file as well as `.ks` dependencies.
 - Layering note: `template from` is kopscript grammar, but what it desugars *to*
-  (`document.createElement`/`.appendChild`/`.textContent`/`.addEventListener`) assumes
-  Kopular's `dom.ks` DOM surface specifically — a deliberate, documented coupling, not a
-  generic pluggable target.
+  (`VElement.Create`/`.AppendChild`/`.TextContent`/`.SetAttr`/the named `On*` event fields)
+  assumes Kopular's `velement.ks` surface specifically — a deliberate, documented coupling,
+  not a generic pluggable target.
 
 ## Keywords (reserved, lowercase, exact match)
 

package/README.md

@@ -538,12 +538,12 @@ class Counter : Component {
     this.Count.Subscribe((number v) => this.Update());
   }
 
-  public override Element Render() {
-    Element button = document.createElement("button");
-    button.textContent = "Count: " + this.Count.Value;
-    button.addEventListener("click", (Event e) => {
+  public override VElement Render() {
+    VElement button = VElement.Create("button");
+    button.TextContent = "Count: " + this.Count.Value;
+    button.OnClick = (Event e) => {
       this.Count.Value = this.Count.Value + 1; // Update() fires automatically
-    });
+    };
     return button;
   }
 }
@@ -587,11 +587,13 @@ class Counter : Component {
 This compiles to exactly the `Render()` method you'd otherwise write by hand — the
 template compiler is a pass that runs between parsing and type-checking, turning the
 markup into ordinary `MethodDecl`/statement/expression AST nodes and splicing the result
-into the class before checking ever runs. There's no separate runtime template engine, no
-virtual DOM diffing, and no interpreted expression language: `{{ Count.Value }}` and
-`(click)="Increment()"` contain real KopScript, parsed and type-checked exactly like
-anything else in the file, with errors reported at their real position in the `.html`
-file, not the `.ks` file.
+into the class before checking ever runs. There's no separate runtime template engine and
+no interpreted expression language: `{{ Count.Value }}` and `(click)="Increment()"`
+contain real KopScript, parsed and type-checked exactly like anything else in the file,
+with errors reported at their real position in the `.html` file, not the `.ks` file. The
+compiler itself does no diffing — it just builds a `VElement` tree as data; Kopular's own
+`Component` base class is what diffs that tree against the previous render and patches
+real DOM (see Kopular's own README/CHANGELOG for that engine).
 
 A class may have a `template` or a hand-written `Render()`, never both — that's a compile
 error. `ks watch` also tracks the referenced `.html` file, so editing markup alone
@@ -601,10 +603,10 @@ Supported bindings and directives:
 
 | Syntax                      | Desugars to                                              |
 | --------------------------- | --------------------------------------------------------- |
-| `{{ expr }}` (in text)       | `el.textContent = $"...{expr}...";` (an `InterpolatedStringLiteral`, same as `$"..."`) |
-| `(event)="stmt"`             | `el.addEventListener("event", (Event e) => { stmt });`   |
-| `[prop]="expr"`              | `el.prop = expr;` — a plain assignment, checked like any other |
-| `class="..."` (static)       | `el.className = "...";` (aliased, since `class` is a KopScript keyword) |
+| `{{ expr }}` (in text)       | `el.TextContent = $"...{expr}...";` (an `InterpolatedStringLiteral`, same as `$"..."`) |
+| `(event)="stmt"`             | `el.OnEvent = (Event e) => { stmt };` — `event` must be one of `click`/`input`/`blur`/`change`, `VElement`'s own fixed set of named event fields |
+| `[prop]="expr"`              | `el.Prop = expr;` for `id`/`className`/`value` (`VElement`'s own named fields); `el.SetAttr("prop", expr);` for anything else |
+| `class="..."` (static)       | `el.ClassName = "...";` (aliased, since `class` is a KopScript keyword) |
 | `*if="expr"`                 | a real `if (expr) { ... }` around the element's creation |
 | `*for="Type var of expr"`    | a real `for (Type var in expr) { ... }` — the element type is explicit, matching KopScript's no-inference stance elsewhere (Generics, Nullable types) |
 
@@ -623,9 +625,10 @@ two-way binding, no pipes, no stacking two structural directives on one element.
 
 **A deliberate layering note**: the `template from` syntax lives in kopscript's own
 grammar (Kopular can't extend a language it doesn't own), but what it desugars *to* —
-`document.createElement`, `.appendChild`, `.textContent`, `.addEventListener` — assumes
-exactly the DOM surface [Kopular](https://dev.azure.com/koppinator/Koppindependence/_git/Kopular)'s
-`dom.ks` declares. That's a real coupling from the compiler to one specific consumer,
+`VElement.Create`, `.AppendChild`, `.TextContent`, `.SetAttr`, the named `On*` event
+fields — assumes exactly the surface
+[Kopular](https://dev.azure.com/koppinator/Koppindependence/_git/Kopular)'s
+`velement.ks` declares. That's a real coupling from the compiler to one specific consumer,
 accepted deliberately rather than building a generic pluggable desugaring-target system
 for a hypothetical second framework that doesn't exist today. If one ever does, that's the
 point to generalize this.
@@ -676,8 +679,9 @@ KopScript's `string` type exposes PascalCase members that map directly onto
 
 ### Array stdlib
 
-Arrays expose `.Length`, plus `Map`/`Filter`/`ForEach`/`Push`, using lambdas or any other
-function-valued expression (a named function, a variable holding one, ...):
+Arrays expose `.Length`, plus `Map`/`Filter`/`ForEach`/`Push`/`Find`/`FindIndex`/
+`Includes`/`IndexOf`/`Sort`/`Reverse`/`Slice`/`Concat`/`Join`/`Reduce`, using lambdas or
+any other function-valued expression (a named function, a variable holding one, ...):
 
 ```ks
 number[] xs = [1, 2, 3, 4];
@@ -685,21 +689,44 @@ string[] labels = xs.Map((number x) => "n" + x);      // ["n1", "n2", "n3", "n4"
 number[] evens = xs.Filter((number x) => x % 2 == 0);  // [2, 4]
 xs.ForEach((number x) => print(x));
 number[] grown = xs.Push(5);                           // [1, 2, 3, 4, 5]; xs itself is untouched
-```
 
-`Map`/`Filter`/`ForEach` compile straight to their real `Array.prototype` equivalents.
-`Push` is the one departure from JS: it's **non-mutating** (returns a new array; `xs`
-itself is unchanged), unlike JS's own `Array.prototype.push` — chosen for consistency with
-`Map`/`Filter` (already non-mutating) and because nothing else in KopScript's type system models
-aliasing/mutable-reference semantics, so a silently-mutating `Push` would be a surprising
-outlier. It compiles to a plain spread (`[...xs, 5]`), not a `.push()` call.
+number? found = xs.Find((number x) => x > 2);          // 3, or null if nothing matches
+number idx = xs.FindIndex((number x) => x > 2);        // 2, or -1 if nothing matches
+bool has = xs.Includes(3);                              // true
+number at = xs.IndexOf(3);                              // 2, or -1 if not present
+
+number[] sorted = xs.Sort((number a, number b) => a - b);  // new array; xs untouched
+number[] rev = xs.Reverse();                                // new array; xs untouched
+number[] mid = xs.Slice(1, 3);                              // [2, 3]
+number[] joined = xs.Concat([5, 6]);                         // [1, 2, 3, 4, 5, 6]
+string csv = xs.Join(", ");                                 // "1, 2, 3, 4"
+
+number sum = xs.Reduce((number acc, number x) => acc + x, 0);  // 10
+```
+
+`Map`/`Filter`/`ForEach`/`Find`/`FindIndex`/`Includes`/`IndexOf`/`Slice`/`Concat`/`Join`/
+`Reduce` compile straight to their real `Array.prototype` equivalents. `Push`/`Sort`/
+`Reverse` are the departures from JS: all three are **non-mutating** (return a new array;
+the original is unchanged) — unlike JS's own `push`/`sort`/`reverse`, which all mutate in
+place — chosen for consistency and because nothing else in KopScript's type system models
+aliasing/mutable-reference semantics, so a silently-mutating method would be a surprising
+outlier. `Sort`/`Reverse` compile to a spread-copy first (`[...xs].sort(...)`), not a
+direct `.sort()`/`.reverse()` call. `Sort`'s comparator is always required (no
+optional-parameter support in KopScript to fall back on, and it sidesteps real JS
+`Array.sort`'s own well-known footgun — lexicographic-by-default on non-strings). `Slice`'s
+both bounds are likewise always required. `Join` is scoped to primitive element types
+(`number[]`/`string[]`/`bool[]`) only — a class/interface element has no way to customize
+`toString()` in KopScript, so allowing it there would just produce `"[object Object]"`.
 
 `Map`'s result type is the one genuinely polymorphic piece of the whole language — the
 result element type is whatever the callback actually returns, not a fixed signature.
 A plain function reference (`xs.Map(SomeFunction)`) already carries a fully-known type, so
 that case is exact; an inline expression-bodied lambda (`xs.Map((number x) => ...)`) has
 its return type inferred from the body. A block-bodied lambda passed to `Map` is a known
-v1 gap — its result type can't be inferred that way yet.
+v1 gap — its result type can't be inferred that way yet. `Reduce` is similarly
+polymorphic, but simpler to infer: its accumulator type comes directly from the `initial`
+argument (`xs.Reduce(reducer, initial)`, matching real JS's own argument order), not from
+inspecting the callback body.
 
 ### Control flow
 

package/dist/checker.js

@@ -1714,8 +1714,9 @@ export class Checker {
             return info.returnType;
         }
         if (expr.callee.kind === "MemberExpr") {
-            // Array.Map's result type is polymorphic (derived from the callback),
-            // which doesn't fit checkMember's fixed-signature methodInfo shape —
+            // Array.Map/Reduce's result types are polymorphic (derived from the
+            // callback and, for Reduce, the initial-value argument), which
+            // doesn't fit checkMember's fixed-signature methodInfo shape —
             // handled here instead, before the generic member/call path below.
             if (expr.callee.property === "Map") {
                 const objectType = this.checkExpression(expr.callee.object, scope, ctx);
@@ -1724,6 +1725,13 @@ export class Checker {
                     return this.checkArrayMap(expr, objectType.element, scope, ctx);
                 }
             }
+            if (expr.callee.property === "Reduce") {
+                const objectType = this.checkExpression(expr.callee.object, scope, ctx);
+                if (objectType.kind === "array") {
+                    expr.callee.isBuiltin = true;
+                    return this.checkArrayReduce(expr, objectType.element, scope, ctx);
+                }
+            }
             const { type: methodType, methodInfo } = this.checkMember(expr.callee, scope, ctx);
             if (methodInfo) {
                 this.checkArgs(expr, methodInfo.params, scope, ctx);
@@ -1911,6 +1919,48 @@ export class Checker {
             // nothing else in the type system models. Compiles to `[...arr, x]`.
             return { ...method, params: [elementType], returnType: T.arrayOf(elementType) };
         }
+        if (name === "Find") {
+            // `null` for "no match" rather than throwing/needing a sentinel —
+            // the natural fit given nullable types already exist.
+            return { ...method, params: [T.functionType([elementType], T.BOOL)], returnType: T.nullableOf(elementType) };
+        }
+        if (name === "FindIndex" || name === "IndexOf") {
+            // -1 for "not found", matching real JS — no nullable number needed,
+            // and keeps codegen a plain passthrough with no wrapping/unwrapping.
+            return { ...method, params: name === "FindIndex" ? [T.functionType([elementType], T.BOOL)] : [elementType], returnType: T.NUMBER };
+        }
+        if (name === "Includes") {
+            return { ...method, params: [elementType], returnType: T.BOOL };
+        }
+        if (name === "Sort") {
+            // No optional-parameter support in KopScript, so the comparator is
+            // always required — deliberately avoids real JS Array.sort's own
+            // well-known footgun (lexicographic-by-default on non-strings) by
+            // never having an implicit comparator to fall back to. Non-mutating,
+            // like Push — see genCall's own comment for the codegen shape.
+            return { ...method, params: [T.functionType([elementType, elementType], T.NUMBER)], returnType: T.arrayOf(elementType) };
+        }
+        if (name === "Reverse") {
+            return { ...method, params: [], returnType: T.arrayOf(elementType) };
+        }
+        if (name === "Slice") {
+            // Both bounds always required, same "no optional params" reasoning
+            // as Sort's always-required comparator.
+            return { ...method, params: [T.NUMBER, T.NUMBER], returnType: T.arrayOf(elementType) };
+        }
+        if (name === "Concat") {
+            return { ...method, params: [T.arrayOf(elementType)], returnType: T.arrayOf(elementType) };
+        }
+        if (name === "Join") {
+            // Real JS Array.join stringifies every element via implicit toString
+            // — fine for primitives (numbers/bools stringify sensibly), a real
+            // footgun for a class/interface element with no toString override
+            // ("[object Object]"), which KopScript has no way to customize.
+            // Scoped to primitive element types only, a deliberate v1 cut.
+            if (elementType.kind !== "string" && elementType.kind !== "number" && elementType.kind !== "bool")
+                return null;
+            return { ...method, params: [T.STRING], returnType: T.STRING };
+        }
         return null;
     }
     // Array.Map: `arr.Map(f)` where f: (T) => U, result: U[]. U is whatever
@@ -1939,6 +1989,34 @@ export class Checker {
         }
         return T.arrayOf(argType.returnType);
     }
+    // Array.Reduce: `arr.Reduce(reducer, initial)` where `reducer: (U, T) =>
+    // U`, matching real JS Array.prototype.reduce's own argument order.
+    // Simpler than Map's own inference — U comes directly from `initial`'s
+    // checked type, no partial-lambda-type inference needed at all.
+    checkArrayReduce(expr, elementType, scope, ctx) {
+        if (expr.args.length !== 2) {
+            this.diagnostics.error("KS4102", `Reduce expects exactly 2 arguments, got ${expr.args.length}`, expr.line, expr.col);
+            expr.args.forEach((a) => this.checkExpression(a, scope, ctx));
+            return T.UNKNOWN;
+        }
+        const [reducerArg, initialArg] = expr.args;
+        const accumulatorType = this.checkExpression(initialArg, scope, ctx);
+        const expectedReducerType = T.functionType([accumulatorType, elementType], accumulatorType);
+        const reducerType = this.checkExpressionExpecting(reducerArg, expectedReducerType, scope, ctx);
+        if (reducerType.kind !== "function") {
+            if (reducerType.kind !== "unknown") {
+                this.diagnostics.error("KS4103", `Reduce expects a function as its first argument, got '${T.typeToString(reducerType)}'`, reducerArg.line, reducerArg.col);
+            }
+            return accumulatorType;
+        }
+        const paramsOk = reducerType.params.length === 2 &&
+            this.isAssignableType(accumulatorType, reducerType.params[0]) &&
+            this.isAssignableType(elementType, reducerType.params[1]);
+        if (!paramsOk || !this.isAssignableType(reducerType.returnType, accumulatorType)) {
+            this.diagnostics.error("KS4104", `Reduce callback must take '(${T.typeToString(accumulatorType)}, ${T.typeToString(elementType)})' and return '${T.typeToString(accumulatorType)}', got '${T.typeToString(reducerType)}'`, reducerArg.line, reducerArg.col);
+        }
+        return accumulatorType;
+    }
     checkMember(expr, scope, ctx, isAssignTarget = false) {
         const result = this.checkMemberInner(expr, scope, ctx, isAssignTarget);
         const text = result.methodInfo
@@ -2003,12 +2081,13 @@ export class Checker {
             const method = this.arrayMethod(objectType.element, expr.property);
             if (method)
                 return { type: method.returnType, methodInfo: method };
-            // Map isn't handled here at all — its result type is polymorphic
-            // (derived from the callback passed at the call site), which doesn't
-            // fit this fixed-signature lookup. checkCall special-cases it before
-            // ever reaching checkMember, so `arr.Map(f)` works; `arr.Map` used as
-            // a bare value (not called) falls through to this error, same as an
-            // unknown member — a known v1 restriction.
+            // Map/Reduce aren't handled here at all — their result types are
+            // polymorphic (derived from the callback, and for Reduce the initial
+            // value, passed at the call site), which doesn't fit this
+            // fixed-signature lookup. checkCall special-cases both before ever
+            // reaching checkMember, so `arr.Map(f)`/`arr.Reduce(f, init)` work;
+            // either used as a bare value (not called) falls through to this
+            // error, same as an unknown member — a known v1 restriction.
             this.diagnostics.error("KS4080", `Unknown array member '${expr.property}'`, expr.line, expr.col);
             return { type: T.UNKNOWN, methodInfo: null };
         }

package/dist/codegen.js

@@ -10,10 +10,15 @@ function countNewlines(text) {
 // blind syntactic rename (codegen has no type information, so this fires on
 // any member access with a matching name, string/array/user-class alike;
 // same pre-existing risk as any of the entries below, going back to the
-// original string stdlib). Map/Filter/ForEach need nothing beyond the
-// rename — the callback and everything else already codegens generically.
-// Push is handled separately in genCall, since it's non-mutating in KopScript
-// (unlike JS's own Array.push) and needs a different call shape entirely.
+// original string stdlib). Map/Filter/ForEach/Find/FindIndex/Includes/
+// IndexOf/Slice/Concat/Join/Reduce need nothing beyond the rename — the
+// callback and everything else already codegens generically, and every one
+// of these is already non-mutating in real JS, so a plain passthrough is
+// correct as-is. Push/Sort/Reverse are handled separately in genCall
+// instead: Push because it's non-mutating in KopScript (unlike JS's own
+// Array.push) and needs a different call shape entirely; Sort/Reverse for
+// the same reason — JS's own versions mutate in place, and KopScript's
+// don't, matching Push's own non-mutating convention.
 const MEMBER_METHOD_MAP = {
     Contains: "includes",
     StartsWith: "startsWith",
@@ -26,6 +31,14 @@ const MEMBER_METHOD_MAP = {
     Map: "map",
     Filter: "filter",
     ForEach: "forEach",
+    Find: "find",
+    FindIndex: "findIndex",
+    Includes: "includes",
+    IndexOf: "indexOf",
+    Slice: "slice",
+    Concat: "concat",
+    Join: "join",
+    Reduce: "reduce",
 };
 const BINARY_OP_MAP = {
     "+": "+",
@@ -461,6 +474,17 @@ export class CodeGenerator {
         if (expr.callee.kind === "MemberExpr" && expr.callee.isBuiltin && expr.callee.property === "Push" && expr.args.length === 1) {
             return `[...${this.genExpr(expr.callee.object)}, ${this.genExpr(expr.args[0])}]`;
         }
+        // Sort/Reverse are non-mutating in KopScript too, same reasoning as
+        // Push — JS's own Array.prototype.sort/reverse both mutate in place
+        // *and* return the same array, so a plain rename would silently make
+        // KopScript code alias its own "immutable" array. Copy first (`[...arr]`),
+        // then call the real JS method on the copy.
+        if (expr.callee.kind === "MemberExpr" && expr.callee.isBuiltin && expr.callee.property === "Sort" && expr.args.length === 1) {
+            return `[...${this.genExpr(expr.callee.object)}].sort(${this.genExpr(expr.args[0])})`;
+        }
+        if (expr.callee.kind === "MemberExpr" && expr.callee.isBuiltin && expr.callee.property === "Reverse" && expr.args.length === 0) {
+            return `[...${this.genExpr(expr.callee.object)}].reverse()`;
+        }
         return `${this.genExpr(expr.callee)}(${expr.args.map((a) => this.genExpr(a)).join(", ")})`;
     }
     genMember(expr) {

package/dist/template_compiler.js

@@ -1,6 +1,16 @@
-const ELEMENT_TYPE = { kind: "NamedType", name: "Element", typeArgs: null, line: 0, col: 0 };
+const VELEMENT_TYPE = { kind: "NamedType", name: "VElement", typeArgs: null, line: 0, col: 0 };
 const VOID_TYPE = { kind: "NamedType", name: "void", typeArgs: null, line: 0, col: 0 };
 const EVENT_TYPE = { kind: "NamedType", name: "Event", typeArgs: null, line: 0, col: 0 };
+// The only attrs/prop bindings with a real named VElement field — anything
+// else goes through SetAttr instead (see buildAttrAssignment). Keys are
+// post-alias names (see template_parser.ts's PROPERTY_ALIASES — "class" is
+// already "className" by the time it reaches here).
+const KNOWN_FIELD_NAMES = { id: "Id", className: "ClassName", value: "Value" };
+// VElement's own fixed, named event slots (see velement.ks) — there's no
+// generic addEventListener on VElement (event handlers are part of the
+// VNode's own data, not wired against a live DOM node), so a template can
+// only bind one of these four.
+const KNOWN_EVENT_NAMES = { click: "OnClick", input: "OnInput", blur: "OnBlur", change: "OnChange" };
 function ident(name, at) {
     return { kind: "Identifier", name, line: at.line, col: at.col };
 }
@@ -20,7 +30,7 @@ function assign(target, value, at) {
     return exprStatement({ kind: "AssignExpr", target, value, line: at.line, col: at.col }, at);
 }
 function varDecl(name, init, at) {
-    return { kind: "VarDecl", isConst: false, name, nameLine: at.line, nameCol: at.col, type: ELEMENT_TYPE, init, line: at.line, col: at.col };
+    return { kind: "VarDecl", isConst: false, name, nameLine: at.line, nameCol: at.col, type: VELEMENT_TYPE, init, line: at.line, col: at.col };
 }
 function block(statements, at) {
     return { kind: "Block", statements, line: at.line, col: at.col };
@@ -181,7 +191,7 @@ export class TemplateCompiler {
             nameLine: templateDeclAt.line,
             nameCol: templateDeclAt.col,
             params: [],
-            returnType: ELEMENT_TYPE,
+            returnType: VELEMENT_TYPE,
             body: block(statements, templateDeclAt),
             line: templateDeclAt.line,
             col: templateDeclAt.col,
@@ -200,14 +210,19 @@ export class TemplateCompiler {
         const varName = this.freshVar();
         const statements = [];
         const self = ident(varName, at);
-        statements.push(varDecl(varName, call(member(ident("document", at), "createElement", at), [stringLiteral(node.tag, at)], at), at));
+        statements.push(varDecl(varName, call(member(ident("VElement", at), "Create", at), [stringLiteral(node.tag, at)], at), at));
         for (const attr of node.staticAttrs)
-            statements.push(assign(member(self, attr.name, attr), stringLiteral(attr.value, attr), attr));
+            statements.push(this.buildAttrAssignment(self, attr.name, stringLiteral(attr.value, attr), attr));
         for (const bind of node.propBindings) {
             const value = this.resolve(bind.value, localScope);
-            statements.push(assign(member(self, bind.name, bind), value, bind));
+            statements.push(this.buildAttrAssignment(self, bind.name, value, bind));
         }
         for (const bind of node.eventBindings) {
+            const fieldName = KNOWN_EVENT_NAMES[bind.name];
+            if (!fieldName) {
+                this.diagnostics.error("KS5016", `Unsupported event binding '(${bind.name})' — a template can only bind (click), (input), (blur), or (change), the same fixed set of named event fields VElement itself has`, bind.line, bind.col);
+                continue;
+            }
             const handler = this.resolve(bind.handler, localScope);
             const handlerParam = { name: "e", type: EVENT_TYPE };
             const lambda = {
@@ -217,7 +232,7 @@ export class TemplateCompiler {
                 line: bind.line,
                 col: bind.col,
             };
-            statements.push(exprStatement(call(member(self, "addEventListener", bind), [stringLiteral(bind.name, bind), lambda], bind), bind));
+            statements.push(assign(member(self, fieldName, bind), lambda, bind));
         }
         const elementChildren = node.children.filter((c) => c.kind === "element");
         const textChildren = node.children.filter((c) => c.kind === "text");
@@ -227,7 +242,7 @@ export class TemplateCompiler {
         else if (textChildren.length > 0) {
             const parts = textChildren.flatMap((t) => t.parts).map((p) => (p.kind === "Expr" ? { kind: "Expr", expression: this.resolve(p.expression, localScope) } : p));
             const interpolated = { kind: "InterpolatedStringLiteral", parts, line: at.line, col: at.col };
-            statements.push(assign(member(self, "textContent", at), interpolated, at));
+            statements.push(assign(member(self, "TextContent", at), interpolated, at));
         }
         else {
             for (const child of elementChildren)
@@ -271,6 +286,19 @@ export class TemplateCompiler {
         return [...statements, this.appendChild(parentVar, elVar, node)];
     }
     appendChild(parentVar, childVar, at) {
-        return exprStatement(call(member(ident(parentVar, at), "appendChild", at), [ident(childVar, at)], at), at);
+        return exprStatement(call(member(ident(parentVar, at), "AppendChild", at), [ident(childVar, at)], at), at);
+    }
+    // A known name (post-alias — "class" already reads "className" by here)
+    // becomes a direct assignment to VElement's own named field; anything
+    // else — href, src, alt, placeholder, ... — goes through VElement.SetAttr
+    // instead, under its original, real HTML attribute name (SetAttr's own
+    // name argument is exactly what gets passed to a real setAttribute call
+    // at patch time — see vdom.ks).
+    buildAttrAssignment(self, name, value, at) {
+        const fieldName = KNOWN_FIELD_NAMES[name];
+        if (fieldName) {
+            return assign(member(self, fieldName, at), value, at);
+        }
+        return exprStatement(call(member(self, "SetAttr", at), [stringLiteral(name, at), value], at), at);
     }
 }

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "kopscript",
-  "version": "0.15.0",
+  "version": "0.17.0",
   "description": "KopScript: a small OOP, strongly-typed language that transpiles to JavaScript, with generics and nullable types",
   "type": "module",
   "license": "MIT",
   "author": "Joe Koppin <koppinjo@gmail.com>",
   "repository": {
     "type": "git",
-    "url": "https://dev.azure.com/koppinator/Koppindependence/_git/Kop"
+    "url": "https://dev.azure.com/koppinator/Koppindependence/_git/KopScript"
   },
   "homepage": "https://kopular.dev",
   "keywords": [