kopular 0.11.2 → 0.11.4

package/LLM.md

@@ -128,6 +128,14 @@ w.Bump();                // re-render
   reconciliation. Compose independent components into stable slots (see `Router`'s own
   pattern of keeping page instances alive) to avoid this rather than nesting components
   that both re-render.
+- **`Update()` before `Mount()` is a safe no-op**, not an error. This matters for two
+  sibling `Component`s (e.g. two `Router` pages) that share one injected service's
+  `state<T>` and both `Subscribe()` it — every route's page is constructed eagerly (see
+  `Router.AddRoute`), so at any given time most of them are constructed but never
+  `Mount()`ed. Changing that shared state fires `Subscribe` on all of them, including the
+  ones that aren't the currently-routed page — `Update()` just skips the render/replace
+  for those, since `Mount()` will run a fresh `Render()` anyway whenever one of them
+  actually becomes routed.
 - `RenderError(string message)`: `virtual`, called by `Mount()`/`Update()` (via a private
   `SafeRender()` wrapper) when `Render()` throws, instead of letting the exception
   propagate uncaught and crash whatever triggered the render (a click handler, a `Router`

package/README.md

@@ -543,3 +543,5 @@ mounted children, those children aren't automatically re-mounted into the parent
 tree (real reconciliation, the way React/Vue handle this, is real vdom-diffing work well
 beyond v1). Compose independent components into stable slots (see `Router`'s own pattern
 of keeping page instances alive rather than rebuilding them) to avoid the issue.
+`Update()` called before `Mount()` is a safe no-op — see `LLM.md`'s `Component` section
+for exactly when that happens (sibling pages sharing one injected service's `state<T>`).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kopular",
-  "version": "0.11.2",
+  "version": "0.11.4",
   "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",

package/src/component.js

@@ -1,6 +1,10 @@
 import { Event, Element, Document, Location, History, Window, document, location, history, window } from "./dom.js";
 
 export class Component {
+  constructor() {
+    this.IsMounted = false;
+  }
+
   Render() {
     return document.createElement("div");
   }
@@ -21,9 +25,13 @@ export class Component {
     this.ParentElement = parent;
     this.Root = this.SafeRender();
     parent.appendChild(this.Root);
+    this.IsMounted = true;
   }
 
   Update() {
+    if (!this.IsMounted) {
+      return;
+    }
     let newRoot = this.SafeRender();
     this.ParentElement.replaceChild(newRoot, this.Root);
     this.Root = newRoot;

package/src/component.ks

@@ -16,6 +16,19 @@ using "./dom";
 class Component {
   protected Element Root;
   private Element ParentElement;
+  // Set true only once Mount() actually runs. A page Component is commonly
+  // constructed eagerly (e.g. Router.AddRoute takes an already-built
+  // instance — see Router's own header comment) long before it's ever
+  // Mount()ed, and two sibling pages sharing one injected service's
+  // state<T> (Pure DI — both Subscribe() the same field) both get notified
+  // on any change regardless of which one is actually the currently-routed,
+  // mounted page. Update() guards on this so that notification is a safe
+  // no-op for the unmounted one, instead of a crash (see Update() below).
+  private bool IsMounted;
+
+  constructor() {
+    this.IsMounted = false;
+  }
 
   public virtual Element Render() {
     return document.createElement("div");
@@ -45,9 +58,21 @@ class Component {
     this.ParentElement = parent;
     this.Root = this.SafeRender();
     parent.appendChild(this.Root);
+    this.IsMounted = true;
   }
 
+  // A no-op, not an error, when called before Mount() — see the class-level
+  // comment on IsMounted for exactly when this happens for real (a
+  // shared-service state change reaching a sibling page that isn't the one
+  // currently routed/mounted). Nothing is lost: SafeRender() would only be
+  // thrown away unread since there's no live DOM parent to put it in, and
+  // Mount() itself always calls SafeRender() fresh whenever this component
+  // does become the routed page, picking up whatever the current state is
+  // at that point.
   protected void Update() {
+    if (!this.IsMounted) {
+      return;
+    }
     Element newRoot = this.SafeRender();
     this.ParentElement.replaceChild(newRoot, this.Root);
     this.Root = newRoot;