npm - kopular - Versions diffs - 1.0.1 → 1.1.1 - Mend

kopular 1.0.1 → 1.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (17) hide show

package/bin/kp.mjs CHANGED Viewed

@@ -1,25 +1,18 @@
 #!/usr/bin/env node
 // Kopular's own scaffolding CLI — separate from kopscript's `ks` (build/run/
 // watch/check), which stays a pure-language tool with no knowledge of any
-// framework built on top of it. `kp new` generates a *Kopular* app skeleton
-// (a Component, the ambient extern bindings its Render()/Mount() calls
-// need, and the vendor/serve scripts a Kopular app needs to run in a real
-// browser), so it lives here instead — in the package that actually knows
-// what a Kopular app looks like.
+// framework built on top of it.
 //
 // Hand-written plain JS, not compiled from a .ks source, the same as
-// src/http_runtime.js: filesystem scaffolding isn't a Kopular Component, and
-// KopScript has no object-literal syntax to build the file-content map this
-// needs anyway.
+// src/http_runtime.js: filesystem scaffolding isn't a Kopular Component.
 import { writeFileSync, mkdirSync, existsSync, readdirSync, readFileSync } from "node:fs";
 import { basename, dirname, join, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
 const packageRoot = join(dirname(fileURLToPath(import.meta.url)), "..");
 const kopularPkg = JSON.parse(readFileSync(join(packageRoot, "package.json"), "utf-8"));
-// Read the ranges to generate from Kopular's own package.json rather than
-// hardcoding them a second time here — this file only has to change when the
-// *shape* of a scaffolded project changes, not on every kopular/kopscript release.
+// Read from Kopular's own package.json rather than hardcoded, so this file only
+// changes when the *shape* of a scaffolded project changes.
 const KOPULAR_RANGE = `^${kopularPkg.version}`;
 const KOPSCRIPT_RANGE = kopularPkg.devDependencies.kopscript;
@@ -48,35 +41,33 @@ function packageJsonTemplate(name) {
 `;
 }
-const INDEX_HTML_TEMPLATE = `<!doctype html>
+// Every browser entry point in Kopular's own exports map, so an app can use
+// any of them (Http, forms, timers, ...) without ever editing index.html.
+function indexHtmlTemplate() {
+  const imports = Object.fromEntries(
+    Object.entries(kopularPkg.exports)
+      .filter(([key]) => key.startsWith("./") && key !== "./testing")
+      .map(([key, target]) => [`kopular/${key.slice(2)}`, `/vendor/kopular/${basename(target)}`])
+  );
+  const importMap = JSON.stringify({ imports }, null, 2).replace(/\n/g, "\n      ");
+  return `<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
     <title>Kopular app</title>
   </head>
   <body>
-    <!--
-      Compiled output imports Kopular's classes as bare specifiers
-      ("kopular/component", "kopular/router") — real Node module resolution
-      understands that natively via node_modules, but a browser needs an
-      explicit import map, since "kopular/component" isn't a URL on its own.
-      This points at vendor/kopular/ (see scripts/vendor-kopular.mjs), not
-      node_modules/kopular/src/ directly, so the browser never has to be
-      served the whole node_modules tree just to reach two files inside it.
-    -->
+    <!-- Maps Kopular's bare module specifiers to the files
+         scripts/vendor-kopular.mjs copies into vendor/ — a browser can't
+         resolve node_modules on its own. -->
     <script type="importmap">
-      {
-        "imports": {
-          "kopular/velement": "/vendor/kopular/velement.js",
-          "kopular/component": "/vendor/kopular/component.js",
-          "kopular/router": "/vendor/kopular/router.js"
-        }
-      }
+      ${importMap}
     </script>
     <script type="module" src="/src/app.js"></script>
   </body>
 </html>
 `;
+}
 const GITIGNORE_TEMPLATE = `node_modules/
 *.js
@@ -87,23 +78,27 @@ const GITIGNORE_TEMPLATE = `node_modules/
 function readmeTemplate(name) {
   return `# ${name}
-A [KopScript](https://www.npmjs.com/package/kopscript) + [Kopular](https://www.npmjs.com/package/kopular) app, scaffolded with \`kp new\`.
+A [Kopular](https://www.npmjs.com/package/kopular) app, written in [KopScript](https://www.npmjs.com/package/kopscript) and scaffolded with \`kp new\`.
 ## Commands
 - \`npm install\`
-- \`npm run build\` — compiles \`src/*.ks\` to JS and vendors Kopular's browser files into \`vendor/\`
+- \`npm run build\` — compiles \`src/app.ks\` (and every file it \`using\`s) to JS, and copies Kopular's browser files into \`vendor/\`
 - \`npm run serve\` — serves the app at http://localhost:8080/
-- \`npm start\` — both of the above
+- \`npm start\` — both
+## Docs
-## Where to go next
+**Start with \`node_modules/kopular/GUIDE.md\`**: one page covering the KopScript you need, components and templates, and working recipes for forms, lists, HTTP, and routing. It's written to be read by AI coding agents as well as people.
-- \`src/counter.ks\` + \`src/counter.html\` is a real, working Kopular \`Component\` — start there. Its markup lives in \`counter.html\` (interpolation, \`(click)="..."\`) via KopScript's \`template from\`; \`counter.ks\` holds only state and logic. See \`node_modules/kopscript/LLM.md\`'s "Templates" section for the full binding/directive syntax, and Kopular's own README/LLM.md for the hand-written-\`Render()\` alternative.
-- \`src/kopular_bindings.ks\` declares the ambient DOM and Kopular types this project builds on (see the comments inside it for why these have to be redeclared per-project rather than imported).
-- For routing, dependency injection ("Pure DI" / a composition root), structural directives, or the \`Http\` client, see Kopular's own README and \`node_modules/kopular/LLM.md\`.
-- For the full language reference, see \`node_modules/kopscript/LLM.md\`.
+Complete references: \`node_modules/kopular/LLM.md\` (framework) and \`node_modules/kopscript/LLM.md\` (language).
-**Working with an AI agent on this project?** Point it at \`node_modules/kopscript/LLM.md\` and \`node_modules/kopular/LLM.md\` first — they're dense, example-verified references written specifically to be loaded as context, not narrative docs.
+## Layout
+- \`src/app.ks\` — the entry point; mounts the root component.
+- \`src/counter.ks\` + \`src/counter.html\` — an example component and its template.
+- Every \`.ks\` file starts with \`using "kopular";\` (the DOM and every Kopular type), plus \`using "./other_file";\` for each project file it needs.
+- \`index.html\` already maps every Kopular module, so it never needs editing.
 `;
 }
@@ -163,121 +158,25 @@ server.listen(port, () => {
 `;
 const VENDOR_KOPULAR_MJS_TEMPLATE = `#!/usr/bin/env node
-// Copies the Kopular files the browser actually needs out of node_modules
-// into a small local vendor/ directory — the import map in index.html points
-// here instead of into node_modules directly, since shipping (or even
-// locally serving) the whole node_modules tree just to get a few files out
-// of it is unnecessary.
-//
-// dom.js and vdom.js aren't in the import map themselves, but component.js/
-// router.js/velement.js each import one or both internally via a relative
-// "./dom.js"/"./vdom.js" — Kopular's own compiled files reference each other
-// as siblings, so all five have to land in the same vendor/kopular/
-// directory together, not just the three the import map names explicitly.
-import { copyFileSync, mkdirSync } from "node:fs";
+// Copies Kopular's browser runtime out of node_modules into vendor/, where
+// index.html's import map points. Every runtime file comes along, since
+// Kopular's modules import each other as siblings; only the Node-only test
+// helper is skipped.
+import { copyFileSync, mkdirSync, readdirSync } from "node:fs";
 import { dirname, join } from "node:path";
 import { fileURLToPath } from "node:url";
 const root = join(dirname(fileURLToPath(import.meta.url)), "..");
+const srcDir = join(root, "node_modules", "kopular", "src");
 const outDir = join(root, "vendor", "kopular");
 mkdirSync(outDir, { recursive: true });
-for (const file of ["dom.js", "vdom.js", "velement.js", "component.js", "router.js"]) {
-  copyFileSync(join(root, "node_modules", "kopular", "src", file), join(outDir, file));
-}
-console.log(\`Vendored kopular/{dom,vdom,velement,component,router}.js into \${outDir}\`);
-`;
-// Ambient DOM bindings, plus Kopular's own classes redeclared as `extern` —
-// copied verbatim from a real project's working copy. `using` only resolves
-// relative paths within a project (KopScript has no package-import mechanism
-// yet), so it can't reach across the node_modules boundary into Kopular's
-// own .ks sources — every consuming project redeclares this ambient surface
-// once, here.
-const KOPULAR_BINDINGS_KS_TEMPLATE = `// Ambient DOM bindings — describing standing browser globals, not anything
-// Kopular itself exports, so this is just describing the platform. Copy
-// this block rather than trimming it down: a compile error only ever names
-// the one member actually missing, never warns that a sibling feature (a
-// [(value)]="Field" binding, a placeholder="..." attribute) will need one
-// you didn't happen to include.
-extern class Event {
-  Element target { get; }
-  void preventDefault();
-};
-extern class Element {
-  string textContent { get; set; }
-  string innerHTML { get; set; }
-  string id { get; set; }
-  string className { get; set; }
-  string href { get; set; }
-  string src { get; set; }
-  string alt { get; set; }
-  string value { get; set; }
-  string placeholder { get; set; }
-  void appendChild(Element child);
-  void replaceChild(Element newChild, Element oldChild);
-  void insertBefore(Element newChild, Element? referenceChild);
-  void removeChild(Element child);
-  void setAttribute(string name, string value);
-  void addEventListener(string eventType, (Event) => void handler);
-  void removeEventListener(string eventType, (Event) => void handler);
-  Element querySelector(string selector);
-  Element? closest(string selector);
-};
-extern class Document {
-  Element createElement(string tagName);
-  Element getElementById(string id);
-  Element body { get; }
-};
-extern Document document;
-// A description of one DOM element, built instead of real DOM — Render()
-// below returns this, not an Element, so Kopular's own Component base class
-// can diff a render against the previous one and patch only what changed.
-extern class VElement {
-  static VElement Create(string tag);
-  string TextContent { get; set; }
-  string ClassName { get; set; }
-  string Id { get; set; }
-  string Value { get; set; }
-  string RawHtml { get; set; }
-  (Event) => void OnClick { get; set; }
-  (Event) => void OnInput { get; set; }
-  (Event) => void OnBlur { get; set; }
-  (Event) => void OnChange { get; set; }
-  void AppendChild(VElement child);
-  void SetAttr(string name, string value);
-} from "kopular/velement";
-// Kopular's real classes, consumed from the real published "kopular" npm
-// package. \`virtual\` on Render() is what lets a class here \`override\` it.
-extern class Component {
-  constructor();
-  virtual VElement Render();
-  virtual void AfterRender(Element root);
-  void Mount(Element parent);
-  void Update();
-} from "kopular/component";
-extern class Router {
-  constructor(Component notFoundPage);
-  void AddRoute(string path, Component page);
-  void Navigate(string path);
-  void Mount(Element parent);
-} from "kopular/router";
+const files = readdirSync(srcDir).filter((f) => f.endsWith(".js") && f !== "testing.js");
+for (const file of files) copyFileSync(join(srcDir, file), join(outDir, file));
+console.log(\`Vendored \${files.length} Kopular files into \${outDir}\`);
 `;
-// The same Counter shown in Kopular's own README/LLM.md — real, verified
-// example code, not a placeholder. Uses a template (see counter.html below)
-// rather than a hand-written Render(), since that's the more common style
-// today; Kopular's/KopScript's own docs show the equivalent hand-written
-// form too, for the case a component needs one (e.g. Subscribe-ing to state
-// reached indirectly, through an injected service).
-const COUNTER_KS_TEMPLATE = `using "./kopular_bindings";
+const COUNTER_KS_TEMPLATE = `using "kopular";
 class Counter : Component {
   public state<number> Count;
@@ -297,12 +196,9 @@ class Counter : Component {
 const COUNTER_HTML_TEMPLATE = `<button (click)="Increment()">Count: {{ Count.Value }}</button>
 `;
-const APP_KS_TEMPLATE = `using "./kopular_bindings";
+const APP_KS_TEMPLATE = `using "kopular";
 using "./counter";
-// The app's root: mounts straight to document.body since there's nothing
-// else in the shell yet. Add a Router and a composition root (see Kopular's
-// README on "Pure DI") once there's more than one page.
 Counter app = new Counter();
 app.Mount(document.body);
 `;
@@ -319,12 +215,11 @@ function scaffoldProject(dirPath) {
   mkdirSync(join(dirPath, "scripts"), { recursive: true });
   writeFileSync(join(dirPath, "package.json"), packageJsonTemplate(name), "utf-8");
-  writeFileSync(join(dirPath, "index.html"), INDEX_HTML_TEMPLATE, "utf-8");
+  writeFileSync(join(dirPath, "index.html"), indexHtmlTemplate(), "utf-8");
   writeFileSync(join(dirPath, ".gitignore"), GITIGNORE_TEMPLATE, "utf-8");
   writeFileSync(join(dirPath, "README.md"), readmeTemplate(name), "utf-8");
   writeFileSync(join(dirPath, "scripts", "serve.mjs"), SERVE_MJS_TEMPLATE, "utf-8");
   writeFileSync(join(dirPath, "scripts", "vendor-kopular.mjs"), VENDOR_KOPULAR_MJS_TEMPLATE, "utf-8");
-  writeFileSync(join(dirPath, "src", "kopular_bindings.ks"), KOPULAR_BINDINGS_KS_TEMPLATE, "utf-8");
   writeFileSync(join(dirPath, "src", "counter.ks"), COUNTER_KS_TEMPLATE, "utf-8");
   writeFileSync(join(dirPath, "src", "counter.html"), COUNTER_HTML_TEMPLATE, "utf-8");
   writeFileSync(join(dirPath, "src", "app.ks"), APP_KS_TEMPLATE, "utf-8");

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "kopular",
-  "version": "1.0.1",
+  "version": "1.1.1",
   "description": "Kopular: a small component framework for KopScript — components, reactive state, constructor-injected services, routing, real compiled templates, and HTTP, with no DI container",
   "type": "module",
   "license": "MIT",
@@ -21,6 +21,7 @@
     "agent"
   ],
   "main": "./src/component.js",
+  "kopscript": "./src/kopular.ks",
   "bin": {
     "kp": "./bin/kp.mjs"
   },
@@ -36,12 +37,14 @@
     "./computed": "./src/computed.js",
     "./resource": "./src/resource.js",
     "./vdom": "./src/vdom.js",
+    "./timers": "./src/timers.js",
     "./testing": "./src/testing.js"
   },
   "files": [
     "src",
     "bin",
     "assets",
+    "GUIDE.md",
     "LLM.md"
   ],
   "scripts": {
@@ -63,7 +66,7 @@
     "@types/jsdom": "^30.0.0",
     "@types/node": "^20.14.0",
     "jsdom": "^25.0.1",
-    "kopscript": "^1.0.0",
+    "kopscript": "^1.1.0",
     "typescript": "^5.5.0",
     "vitest": "^4.1.11"
   },

package/src/dom.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dom.js","sources":["dom.ks"],"sourcesContent":["// Minimal browser DOM bindings. All ambient (no `from` clause) — document,\n// Element, and Event genuinely exist as globals in a browser, no import\n// needed. Member names use the real JS casing exactly (camelCase), since\n// extern declarations describe an existing external contract rather than\n// idiomatic KopScript code — there's no per-member rename mechanism. `extern\n// class` declarations end in `;`, like the other two extern forms.\n\nextern class Event {\n Element target { get; }\n void preventDefault();\n};\n\nextern class Element {\n string textContent { get; set; }\n string id { get; set; }\n string className { get; set; }\n // The one property the vdom patch engine (src/vdom.ks) always sets via\n // direct property assignment, never setAttribute — setAttribute(\"value\",\n // x) sets the DEFAULT value attribute, not the current live one, a real\n // DOM footgun (and the exact property behind the original typing bug\n // this whole diffing effort traces back to).\n string value { get; set; }\n // Only ever assigned by the vdom patch engine for a VElement.RawHtml leaf\n // — never diffed into, an opaque blob the same way `raw string` is.\n string innerHTML { get; set; }\n void appendChild(Element child);\n void replaceChild(Element newChild, Element oldChild);\n // `referenceChild` is nullable — real DOM insertBefore(node, null) means\n // \"append at the end,\" used by the patch engine's child-reordering step.\n void insertBefore(Element newChild, Element? referenceChild);\n void removeChild(Element child);\n // The generic escape hatch VElement.SetAttr's ExtraNames/ExtraValues\n // patch through — real HTML attributes only (href, src, alt,\n // placeholder, ...), never `value` (see above).\n void setAttribute(string name, string value);\n void addEventListener(string eventType, (Event) => void handler);\n void removeEventListener(string eventType, (Event) => void handler);\n};\n\nextern class Document {\n Element createElement(string tagName);\n Element getElementById(string id);\n Element body { get; }\n // Where ScopedStyles.Inject (vdom.ks) puts a component type's own\n // rewritten <style> — a scoped stylesheet is global infrastructure\n // (injected once per type, never removed), not page content, so it\n // belongs in <head>, not wherever a given instance happens to mount.\n Element head { get; }\n};\n\nextern class Location {\n string pathname { get; }\n // The real query string including its leading \"?\" (e.g. \"?sort=name\"),\n // or \"\" if the current URL has none — see Router.ParseQuery/Query.\n string search { get; }\n};\n\nextern class History {\n // Param named `historyState`, not `state` — `state` is a KopScript\n // keyword (state<T>), not a valid parameter name.\n void pushState(string historyState, string title, string url);\n};\n\nextern class Window {\n void addEventListener(string eventType, (Event) => void handler);\n};\n\nextern Document document;\nextern Location location;\nextern History history;\nextern Window window;\n"],"names":[],"mappings":"AAOA;AAKA;~~AA2BA~~;AAWA;AAOA;AAMA;AAIA;AACA;AACA;AACA"}
1	+ {"version":3,"file":"dom.js","sources":["dom.ks"],"sourcesContent":["// Minimal browser DOM bindings. All ambient (no `from` clause) — document,\n// Element, and Event genuinely exist as globals in a browser, no import\n// needed. Member names use the real JS casing exactly (camelCase), since\n// extern declarations describe an existing external contract rather than\n// idiomatic KopScript code — there's no per-member rename mechanism. `extern\n// class` declarations end in `;`, like the other two extern forms.\n\nextern class Event {\n Element target { get; }\n void preventDefault();\n};\n\nextern class Element {\n string textContent { get; set; }\n string id { get; set; }\n string className { get; set; }\n // The one property the vdom patch engine (src/vdom.ks) always sets via\n // direct property assignment, never setAttribute — setAttribute(\"value\",\n // x) sets the DEFAULT value attribute, not the current live one, a real\n // DOM footgun (and the exact property behind the original typing bug\n // this whole diffing effort traces back to).\n string value { get; set; }\n // Only ever assigned by the vdom patch engine for a VElement.RawHtml leaf\n // — never diffed into, an opaque blob the same way `raw string` is.\n string innerHTML { get; set; }\n void appendChild(Element child);\n void replaceChild(Element newChild, Element oldChild);\n // `referenceChild` is nullable — real DOM insertBefore(node, null) means\n // \"append at the end,\" used by the patch engine's child-reordering step.\n void insertBefore(Element newChild, Element? referenceChild);\n void removeChild(Element child);\n // The generic escape hatch VElement.SetAttr's ExtraNames/ExtraValues\n // patch through — real HTML attributes only (href, src, alt,\n // placeholder, ...), never `value` (see above).\n void setAttribute(string name, string value);\n void removeAttribute(string name);\n bool disabled { get; set; }\n bool checked { get; set; }\n void addEventListener(string eventType, (Event) => void handler);\n void removeEventListener(string eventType, (Event) => void handler);\n};\n\nextern class Document {\n Element createElement(string tagName);\n Element getElementById(string id);\n Element body { get; }\n // Where ScopedStyles.Inject (vdom.ks) puts a component type's own\n // rewritten <style> — a scoped stylesheet is global infrastructure\n // (injected once per type, never removed), not page content, so it\n // belongs in <head>, not wherever a given instance happens to mount.\n Element head { get; }\n};\n\nextern class Location {\n string pathname { get; }\n // The real query string including its leading \"?\" (e.g. \"?sort=name\"),\n // or \"\" if the current URL has none — see Router.ParseQuery/Query.\n string search { get; }\n};\n\nextern class History {\n // Param named `historyState`, not `state` — `state` is a KopScript\n // keyword (state<T>), not a valid parameter name.\n void pushState(string historyState, string title, string url);\n};\n\nextern class Window {\n void addEventListener(string eventType, (Event) => void handler);\n};\n\nextern Document document;\nextern Location location;\nextern History history;\nextern Window window;\n"],"names":[],"mappings":"AAOA;AAKA;AA8BA;AAWA;AAOA;AAMA;AAIA;AACA;AACA;AACA"}

package/src/dom.ks CHANGED Viewed

@@ -33,6 +33,9 @@ extern class Element {
   // patch through — real HTML attributes only (href, src, alt,
   // placeholder, ...), never `value` (see above).
   void setAttribute(string name, string value);
+  void removeAttribute(string name);
+  bool disabled { get; set; }
+  bool checked { get; set; }
   void addEventListener(string eventType, (Event) => void handler);
   void removeEventListener(string eventType, (Event) => void handler);
 };

package/src/forms.js CHANGED Viewed

@@ -17,7 +17,7 @@ class __KopState {
 export function CombineValidators2(v1, v2) {
   return (value) => {
   let r1 = v1(value);
-  if ((r1 !== null)) {
+  if ((r1 != null)) {
     return r1;
   }
   return v2(value);
@@ -26,11 +26,11 @@ export function CombineValidators2(v1, v2) {
 export function CombineValidators3(v1, v2, v3) {
   return (value) => {
   let r1 = v1(value);
-  if ((r1 !== null)) {
+  if ((r1 != null)) {
     return r1;
   }
   let r2 = v2(value);
-  if ((r2 !== null)) {
+  if ((r2 != null)) {
     return r2;
   }
   return v3(value);
@@ -51,7 +51,7 @@ export class FormField {
   }
   Valid() {
-    return (this.Error.Value === null);
+    return (this.Error.Value == null);
   }
 }
 export class Validators {

package/src/kopular.ks ADDED Viewed

@@ -0,0 +1,179 @@
+// KopScript declarations for the kopular package — what `using "kopular";`
+// resolves to (package.json's "kopscript" field). Never compiled itself: a
+// consuming file imports exactly the bindings it uses, straight from the
+// modules named below. test/declarations.test.ts checks every Kopular
+// declaration here against the real source it describes.
+// ---------- Browser globals ----------
+extern class Event {
+  Element target { get; }
+  string key { get; }
+  void preventDefault();
+  void stopPropagation();
+};
+extern class Element {
+  string textContent { get; set; }
+  string innerHTML { get; set; }
+  string id { get; set; }
+  string className { get; set; }
+  string value { get; set; }
+  string placeholder { get; set; }
+  string href { get; set; }
+  string src { get; set; }
+  string alt { get; set; }
+  bool disabled { get; set; }
+  bool checked { get; set; }
+  void appendChild(Element child);
+  void replaceChild(Element newChild, Element oldChild);
+  void insertBefore(Element newChild, Element? referenceChild);
+  void removeChild(Element child);
+  void setAttribute(string name, string value);
+  string? getAttribute(string name);
+  void removeAttribute(string name);
+  void addEventListener(string eventType, (Event) => void handler);
+  void removeEventListener(string eventType, (Event) => void handler);
+  Element querySelector(string selector);
+  Element? closest(string selector);
+  void focus();
+};
+extern class Document {
+  Element createElement(string tagName);
+  Element getElementById(string id);
+  Element querySelector(string selector);
+  Element body { get; }
+  Element head { get; }
+  string title { get; set; }
+};
+extern class Location {
+  string pathname { get; }
+  string search { get; }
+  string href { get; }
+};
+extern class History {
+  void pushState(string historyState, string title, string url);
+  void back();
+};
+extern class Window {
+  void addEventListener(string eventType, (Event) => void handler);
+};
+// What fetch() resolves to — see Http below.
+extern class Response {
+  bool ok { get; }
+  number status { get; }
+  task<string> text();
+};
+extern Document document;
+extern Location location;
+extern History history;
+extern Window window;
+extern number SetTimeout(() => void callback, number ms) as "setTimeout";
+extern void ClearTimeout(number timerId) as "clearTimeout";
+extern number ParseFloat(string text) as "parseFloat";
+// ---------- Kopular ----------
+extern class VElement {
+  static VElement Create(string tag);
+  // Embeds a live child Component as this slot's content.
+  static VElement Mount(Component component);
+  string TextContent { get; set; }
+  string ClassName { get; set; }
+  string Id { get; set; }
+  string Value { get; set; }
+  string RawHtml { get; set; }
+  bool Disabled { get; set; }
+  bool Checked { get; set; }
+  (Event) => void OnClick { get; set; }
+  (Event) => void OnInput { get; set; }
+  (Event) => void OnBlur { get; set; }
+  (Event) => void OnChange { get; set; }
+  void AppendChild(VElement child);
+  void SetAttr(string name, string value);
+} from "kopular/velement";
+extern class Component {
+  constructor();
+  virtual VElement Render();
+  virtual VElement RenderError(string message);
+  virtual void AfterRender(Element root);
+  virtual void OnUnmount();
+  void Mount(Element parent);
+  void Update();
+} from "kopular/component";
+// The runtime half of `styles from "./x.css";` — the compiler calls it for you.
+extern class ScopedStyles {
+  static void Inject(string scopeId, string css);
+} from "kopular/vdom";
+extern class Router : Component {
+  constructor(Component notFoundPage);
+  void AddRoute(string path, Component page);
+  void AddLazyRoute(string path, () => task<Component> loader);
+  string[] AllPaths();
+  void SetGuard(string redirectPath, (string) => bool guard);
+  void Navigate(string path);
+  string Param { get; }
+  string Params(string name);
+  string Query(string key);
+  virtual VElement BuildLoadingPlaceholder();
+} from "kopular/router";
+extern VElement If(bool condition, () => VElement whenTrue, () => VElement whenFalse) from "kopular/directives";
+extern class Http {
+  static task<Response> Get(string url);
+  static task<Response> Post(string url, string jsonBody);
+  static task<Response> Put(string url, string jsonBody);
+  static task<Response> Patch(string url, string jsonBody);
+  static task<Response> Delete(string url);
+} from "kopular/http";
+extern class FormField<T> {
+  constructor(T initial, (T) => string? validate);
+  state<T> Value { get; }
+  state<string?> Error { get; }
+  state<bool> Touched { get; }
+  void Touch();
+  bool Valid();
+} from "kopular/forms";
+extern class Validators {
+  static string? Required(string value);
+  static string? MinLength(string value, number min);
+  static string? MaxLength(string value, number max);
+  static string? Email(string value);
+  static string? Min(number value, number min);
+  static string? Max(number value, number max);
+} from "kopular/forms";
+extern class Computed1<A, R> {
+  constructor(state<A> source, (A) => R compute);
+  state<R> Value { get; }
+} from "kopular/computed";
+extern class Computed2<A, B, R> {
+  constructor(state<A> a, state<B> b, (A, B) => R compute);
+  state<R> Value { get; }
+} from "kopular/computed";
+extern enum AsyncStatus { Loading, Success, Failure } from "kopular/resource";
+extern class Resource<T> {
+  constructor(task<T> operation);
+  state<AsyncStatus> Status { get; }
+  state<T?> Data { get; }
+  state<string?> Error { get; }
+} from "kopular/resource";
+// Resolves after `ms` milliseconds: `await Delay(500);`
+extern task Delay(number ms) from "kopular/timers";

package/src/router.js CHANGED Viewed

@@ -27,7 +27,7 @@ export class LazyPage {
   async Resolve() {
     let maybeCached = this.CachedValue;
-    if ((maybeCached !== null)) {
+    if ((maybeCached != null)) {
       let cached = maybeCached;
       return cached;
     }
@@ -191,13 +191,13 @@ export class Router extends Component {
     let outlet = VElement.Create("div");
     outlet.ClassName = "router-outlet";
     let maybeResolved = provider.Peek();
-    if ((maybeResolved !== null)) {
+    if ((maybeResolved != null)) {
       let resolved = maybeResolved;
       outlet.AppendChild(VElement.Mount(resolved));
     } else {
       let alreadyLoadingThisProvider = false;
       let maybeLoadingProvider = this.LoadingProvider;
-      if ((maybeLoadingProvider !== null)) {
+      if ((maybeLoadingProvider != null)) {
         let loadingProvider = maybeLoadingProvider;
         if ((loadingProvider === provider)) {
           alreadyLoadingThisProvider = true;

package/src/timers.js ADDED Viewed

@@ -0,0 +1,5 @@
+// Hand-written, like http_runtime.js: KopScript can't construct a task<T> from
+// a callback, so a promise-based delay has to come from plain JS.
+export function Delay(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}