@source-crafter/xzor-runtime 0.1.17 → 0.1.19

package/index.d.ts

@@ -68,10 +68,19 @@ type FineHooks = {
     /** A handler of a fine component ran: it re-runs the bindings that read nothing tracked. */
     handled(owner: ComponentBase, result: unknown): void;
 };
-/** @internal On `FineComponent.prototype`: its handlers and callbacks write tracked fields, so nothing re-renders it. */
+/** @internal On a component whose fine root was built (its fine context): its handlers and callbacks write tracked fields, so nothing re-renders it. */
 export declare const FINE: unique symbol;
 /** @internal Set by `fine.ts` (the model entry), so the renderer pays nothing without it. */
 export declare function setFineHooks(h: FineHooks): void;
+type Tracking = {
+    model: {
+        $reader: ((source: any, index: number) => void) | undefined;
+        same(a: unknown, b: unknown): boolean;
+    };
+    notify(dep: object, index: number): void;
+};
+/** @internal Set by the model entry: what a component's tracked fields report to. */
+export declare function setTracking(t: Tracking): void;
 /**
  * @internal A virtual-DOM island inside a fine template: renders `build` before `end`, patching `old`.
  * `scope` is the cascade scope the fine component was mounted in.
@@ -106,17 +115,17 @@ export declare class Route<P = Record<string, unknown>, Tags extends object = Re
     readonly params: P;
     readonly query: URLSearchParams;
     readonly match: Record<string, string>;
-    constructor(path: string, tag: (keyof Tags & string) | undefined, params: P, query: URLSearchParams, match: Record<string, string>, nav?: Navigation);
+    constructor(path: string, tag: (keyof Tags & string) | undefined, params: P, query: URLSearchParams, match: Record<string, string>, nav: Navigation);
     /** Narrows `params` to the routes carrying `tag`. */
     is<K extends keyof Tags & string>(tag: K): this is Route<Tags[K], Tags> & {
         readonly tag: K;
     };
-    /** History navigation under `@ClientRoutes`; `@ServerRoutes` loads the url. */
+    /** Navigates through the browser's history. */
     navigate(url: string, opts?: {
         replace?: boolean;
     }): void;
 }
-/** One section of a `@ClientRoutes`/`@ServerRoutes` block; xzor emits these in source order. */
+/** One section of a `@Routes` block; xzor emits these in source order. */
 export type RouteSection = {
     kind: "tag";
     tag: string;
@@ -141,7 +150,7 @@ export type RouteSection = {
     kind: "default";
     render: (route: Route, page: RenderFragment) => RenderFragment;
 };
-/** How `@ClientRoutes` reaches the browser's history; `setNavigationForTests` swaps it. */
+/** How navigation reaches the browser's history; `setNavigationForTests` swaps it. */
 export type Navigation = {
     current(): URL;
     navigate(url: string, replace: boolean): void;
@@ -151,6 +160,8 @@ export type Navigation = {
 };
 /** Commits each navigation inside `document.startViewTransition` where the browser has it. */
 export declare function viewTransitions(on: boolean): void;
+/** @internal The longest a view transition waits for a page's data, in ms; `undefined` restores 1500. */
+export declare function setTransitionCapForTests(ms: number | undefined): void;
 /** @internal Swaps in a memory navigation; set it before mounting the routes block. */
 export declare function setNavigationForTests(nav: Navigation | undefined): void;
 /** The path of `<base href>` without its last segment: "" without one, "/docs" under `<base href="/docs/">`. */
@@ -165,12 +176,25 @@ type Mounted = {
     pass: number;
     nav?: number;
 };
-/** Builds components that need injected services; generated by xzor from `@Mount` and `@ServiceProvider`. */
+/** Builds components that need injected services; generated by xzor from `@Run` and `@ServiceProvider`. */
 export interface IApplication {
     onStarted?(): void | Promise<void>;
     /** Consulted only for component classes with a non-empty `static inject`; returns the component, a promise for it, or `undefined` (the runtime then throws). */
     createComponent?(type: Function): ComponentBase | Promise<ComponentBase> | undefined;
 }
+/** A contract as browser code sees it: every method's result `R` becomes `Promise<Awaited<R>>`, other members `never`. */
+export type Remote<T> = {
+    [K in keyof T]: T[K] extends (...args: infer A) => infer R ? (...args: A) => Promise<Awaited<R>> : never;
+};
+/** Thrown from an endpoint to answer with `status`; a generated client throws it for a non-2xx answer. */
+export declare class HttpError extends Error {
+    readonly status: number;
+    constructor(status: number, message?: string);
+}
+/** One request of a generated contract client: 404 and an empty body resolve `undefined`, other non-2xx statuses reject with `HttpError`. */
+export declare function call(method: string, path: string, query: Record<string, unknown> | undefined, body: unknown): Promise<unknown>;
+/** A path parameter of a generated client, encoded; `""`, `.` and `..` throw `HttpError(400)` before any request (URL normalization would turn them into another route). */
+export declare function segment(value: string | number | boolean): string;
 type DisposeSymbols = {
     dispose: symbol;
     asyncDispose: symbol;
@@ -182,7 +206,15 @@ type ServiceDecorator = {
     <T>(key: string, factory: (...a: any[]) => T | Promise<T>): ClassDecorator;
 };
 export declare const ServiceProvider: () => ClassDecorator;
-export declare const Mount: (_component: Function, _target: string) => ClassDecorator;
+type RunDecorator = {
+    /** Browser app: mounts `component` on `target`. */
+    (component: Function, target: string): ClassDecorator;
+    /** Server app with a page shell. */
+    (component: Function): ClassDecorator;
+    /** Server app, API only. */
+    (): ClassDecorator;
+};
+export declare const Run: RunDecorator;
 export declare const Import: (..._providers: Function[]) => ClassDecorator;
 export declare const Singleton: ServiceDecorator;
 export declare const Scoped: ServiceDecorator;
@@ -199,9 +231,25 @@ export type Renderer = RenderFragment;
 export type EventCallback<T = void> = (arg: T) => unknown;
 /** The DOM element type for a tag name, as `document.createElement` would return it. */
 export type ElementOf<T extends string> = T extends keyof HTMLElementTagNameMap ? HTMLElementTagNameMap[T] : T extends keyof SVGElementTagNameMap ? SVGElementTagNameMap[T] : HTMLElement;
+/**
+ * Base of every component. A `.xzor` component's fields are tracked like a model's (the bundle rewrites them), so a
+ * handler that writes one updates what reads it; `stateHasChanged()` re-runs every binding.
+ */
 export declare abstract class ComponentBase {
+    #private;
     /** @internal Set by components that use `@leave`: until then, removal skips the `data-leave` check. */
     static $leaves: boolean;
+    /** @internal What tracked getters report to; the bundle emits `ComponentBase.$reader?.(this, i)`. */
+    static get $reader(): ((source: object, index: number) => void) | undefined;
+    static same(a: unknown, b: unknown): boolean;
+    /** @internal Records a class's tracked fields after its base's; where they start is the class's `$at`. */
+    static $define(cls: Function, names: string[]): number;
+    /** @internal */
+    $watch(dep: object): void;
+    /** @internal */
+    $unwatch(dep: object): void;
+    /** @internal What a tracked setter reports once it stored a different value. */
+    protected $changed(index: number, _previous: unknown): void;
     /** Wraps builder calls as a RenderFragment; xzor emits this for markup used as a value. */
     static fragment(build: (builder: RenderTreeBuilder) => void): RenderFragment;
     /** Reads a bound input's new value, converted to the bound field's current type. */
@@ -237,8 +285,8 @@ export declare class RenderTreeBuilder {
     /** `@cascade:name(value)`: a region whose children see `value` under `name`; `fixed` keeps the first value. */
     openCascade(name: string, value: unknown, fixed?: boolean): void;
     closeRegion(): void;
-    /** `@ClientRoutes`/`@ServerRoutes`: renders the section that matches the current navigation. */
-    addRoutes(engine: "client" | "server", table: RouteTable, sections: readonly RouteSection[]): void;
+    /** `@Routes`: renders the section that matches the current navigation. */
+    addRoutes(table: RouteTable, sections: readonly RouteSection[]): void;
     addAttribute(name: string, value: unknown): void;
     /** `class:name="@on"`: adds `name` to the open element's class while `on` is truthy. */
     toggleClass(name: string, on: unknown): void;

package/index.js

@@ -4,11 +4,12 @@ import {
   $leave,
   ComponentBase,
   FINE,
+  HttpError,
   Import,
-  Mount,
   NavLink,
   RenderTreeBuilder,
   Route,
+  Run,
   SVG,
   Scoped,
   ServiceProvider,
@@ -16,27 +17,32 @@ import {
   Singleton,
   Transient,
   basePath,
+  call,
   disposeIsland,
   lazy,
   mount,
   patchIsland,
   polyfillDisposeSymbols,
+  segment,
   setFineHooks,
   setNavigationForTests,
   setRenderObserver,
+  setTracking,
+  setTransitionCapForTests,
   viewTransitions
-} from "./index-45b6cjyv.js";
+} from "./index-960nssa4.js";
 export {
   $inSvg,
   $isFragment,
   $leave,
   ComponentBase,
   FINE,
+  HttpError,
   Import,
-  Mount,
   NavLink,
   RenderTreeBuilder,
   Route,
+  Run,
   SVG,
   Scoped,
   ServiceProvider,
@@ -44,16 +50,20 @@ export {
   Singleton,
   Transient,
   basePath,
+  call,
   disposeIsland,
   lazy,
   mount,
   patchIsland,
   polyfillDisposeSymbols,
+  segment,
   setFineHooks,
   setNavigationForTests,
   setRenderObserver,
+  setTracking,
+  setTransitionCapForTests,
   viewTransitions
 };
 
-//# debugId=5539239CA86FB80264756E2164756E21
+//# debugId=3529EB678D53AF3D64756E2164756E21
 //# sourceMappingURL=index.js.map

package/index.js.map

@@ -4,6 +4,6 @@
   "sourcesContent": [
   ],
   "mappings": "",
-  "debugId": "5539239CA86FB80264756E2164756E21",
+  "debugId": "3529EB678D53AF3D64756E2164756E21",
   "names": []
 }

package/model.js

@@ -8,8 +8,9 @@ import {
   disposeIsland,
   patchIsland,
   setFineHooks,
-  setRenderObserver
-} from "./index-45b6cjyv.js";
+  setRenderObserver,
+  setTracking
+} from "./index-960nssa4.js";
 
 // runtime/entity-set.ts
 class EntitySet extends Array {
@@ -572,9 +573,29 @@ function track(b) {
   b.stateHasChanged();
 }
 function disposeAll(h) {
-  for (let b = h.bindings;b !== undefined; b = b.next)
+  let loose = false;
+  for (let b = h.bindings;b !== undefined; b = b.next) {
+    if ((b.flags & LOOSE) !== 0)
+      loose = true;
     b.dispose();
+  }
   h.bindings = undefined;
+  if (loose)
+    sweepLoose(h.ctx);
+}
+function sweepLoose(ctx) {
+  if (ctx.sweep)
+    return;
+  ctx.sweep = true;
+  queueMicrotask(() => {
+    ctx.sweep = false;
+    const loose = ctx.loose;
+    let kept = 0;
+    for (const b of loose)
+      if ((b.flags & DEAD) === 0)
+        loose[kept++] = b;
+    loose.length = kept;
+  });
 }
 function refreshAll(h) {
   for (let b = h.bindings;b !== undefined; b = b.next) {
@@ -707,7 +728,7 @@ function removeRange(head, tail) {
 }
 function newRow(ctx, item, reads, build) {
   const frag = document.createDocumentFragment();
-  const row = { bindings: undefined, ctx, head: frag, tail: frag, item, reads };
+  const row = { bindings: undefined, ctx, head: frag, tail: frag, item, reads, set: undefined };
   within(row, () => build(frag, item));
   seal(row, frag);
   return row;
@@ -768,11 +789,21 @@ function reconcile(list, items) {
         throw duplicate(keys[i]);
       at.set(keys[i], next[i]);
     }
-    for (const [key, row] of rows)
-      if (!at.has(key) || at.get(key) !== row.item) {
+    for (const [key, row] of rows) {
+      if (!at.has(key)) {
         dropRow(row);
         rows.delete(key);
+        continue;
       }
+      const item = at.get(key);
+      if (item === row.item)
+        continue;
+      if (row.set === undefined && state.build.length > 1) {
+        dropRow(row);
+        rows.delete(key);
+      } else
+        retake(row, item);
+    }
   }
   const order = [];
   for (let i = 0;i < next.length; i++) {
@@ -787,6 +818,21 @@ function reconcile(list, items) {
   place(list.node, state.order, order);
   state.order = order;
 }
+function retake(row, item) {
+  row.item = item;
+  if (row.set !== undefined)
+    row.set(item);
+  for (let b = row.bindings;b !== undefined; b = b.next) {
+    if ((b.flags & ITEM) === 0)
+      continue;
+    if ((b.flags & KIND) === REGION)
+      b.data.item = item;
+    if (row.set === undefined)
+      b.stateHasChanged();
+  }
+  if (row.set !== undefined)
+    refreshAll(row);
+}
 function sameValues(a, b) {
   if (a.length !== b.length)
     return false;
@@ -823,7 +869,7 @@ function runKeyed(s, end, run) {
         return;
       }
       const frag = document.createDocumentFragment();
-      row = { bindings: undefined, ctx: s.ctx, head: frag, tail: frag, item: values, reads: undefined };
+      row = { bindings: undefined, ctx: s.ctx, head: frag, tail: frag, item: values, reads: undefined, set: undefined };
       s.rows.set(key, row);
       order.push(row);
       building = row;
@@ -1094,10 +1140,20 @@ var fine = {
     anchor(parent);
     return anchor(parent);
   },
+  rowItem(set) {
+    holder.set = set;
+  },
   regionItem(end, i) {
     const row = holder;
     region(end.previousSibling, end, row.reads[i], row.item, ITEM);
   },
+  branchItem(end, i) {
+    const row = holder;
+    const read = row.reads[i];
+    const state = { bindings: undefined, ctx: row.ctx, start: end.previousSibling, item: row.item, branch: undefined, index: -1 };
+    state.branch = (p) => read(state.item, p);
+    track(new Binding(REGION | ITEM, end, read, state));
+  },
   list(parent, items, build) {
     list(anchor(parent), items, undefined, build);
   },
@@ -1118,52 +1174,13 @@ var fine = {
   }
 };
 var noop = () => {};
-var FIELDS = Symbol("xzor.fine.fields");
-
-class FineComponent extends ComponentBase {
-  #subs;
-  static get $reader() {
-    return Model.$reader;
-  }
-  static same(a, b) {
-    return Model.same(a, b);
-  }
-  static $define(cls, names) {
-    const counts = cls;
-    const at = counts[FIELDS] ?? 0;
-    counts[FIELDS] = at + names.length;
-    return at;
-  }
-  $watch(dep) {
-    const subs = this.#subs ??= [];
-    dep.slot = subs.length;
-    subs.push(dep);
-  }
-  $unwatch(dep) {
-    const subs = this.#subs;
-    if (subs === undefined || subs.length === 0)
-      return;
-    const last = subs.pop();
-    if (last !== dep) {
-      subs[dep.slot] = last;
-      last.slot = dep.slot;
-    }
-  }
-  $changed(index, _previous) {
-    const subs = this.#subs;
-    if (subs !== undefined)
-      for (let i = 0;i < subs.length; i++)
-        $notify(subs[i], index);
-  }
-}
-FineComponent.prototype[FINE] = true;
-var CTX = Symbol("xzor.fine.ctx");
+var FineComponent = ComponentBase;
 setFineHooks({
   create(build, owner, app, scope) {
     const frag = document.createDocumentFragment();
     const start = frag.appendChild(document.createComment(""));
-    const ctx = { owner, app, scope, loose: [] };
-    owner[CTX] = ctx;
+    const ctx = { owner, app, scope, loose: [], sweep: false };
+    owner[FINE] = ctx;
     const root = { bindings: undefined, ctx, start, end: start };
     const reader = Model.$reader;
     Model.$reader = undefined;
@@ -1192,7 +1209,7 @@ setFineHooks({
     disposeAll(root);
   },
   handled(owner, result) {
-    const ctx = owner[CTX];
+    const ctx = owner[FINE];
     if (ctx !== undefined)
       afterHandler(ctx, result);
   }
@@ -1285,7 +1302,9 @@ class Model extends EventTarget {
       pendingIgnored = undefined;
     }
     Object.defineProperty(cls, meta, { value: own });
-    return base ? base.names.length : 0;
+    const at = base ? base.names.length : 0;
+    Object.defineProperty(cls, "$at", { value: at });
+    return at;
   }
   static same(a, b) {
     if (Object.is(a, b))
@@ -1806,6 +1825,7 @@ function flush() {
 }
 var $notify = changed;
 var $flush = flush;
+setTracking({ model: Model, notify: $notify });
 function sweep(own) {
   const more = own.more;
   if (more !== undefined) {
@@ -1900,5 +1920,5 @@ export {
   requiredIdValue
 };
 
-//# debugId=E7409C03C0112EDB64756E2164756E21
+//# debugId=A289C126D860800164756E2164756E21
 //# sourceMappingURL=model.js.map