@lightspeed-js/core 0.4.7 → 0.4.9

package/dist/compile.js

@@ -913,9 +913,9 @@ class BindingEvaluator {
   compileExpression(expr, params = []) {
     return this.compile(expr, params);
   }
-  evaluate(expr, instance, locals = []) {
+  evaluate(expr, instance, locals = [], params = []) {
     try {
-      return this.compile(expr, [])(instance.state, instance.props, this.cells.createReadProxy(), this.pendingProbe(), ...locals);
+      return this.compile(expr, params)(instance.state, instance.props, this.cells.createReadProxy(), this.pendingProbe(), ...locals);
     } catch (error) {
       warn(`Error evaluating "${expr}" in ${instance.id}:`, error);
       return;
@@ -1359,6 +1359,13 @@ class ForBlock {
   async reconcile(items) {
     const keys = this.keysFor(items);
     const next = new Map;
+    const keep = new Set(keys);
+    this.rows.forEach((row, key) => {
+      if (!keep.has(key)) {
+        this.rows.delete(key);
+        this.renderer.destroyRow(this, row);
+      }
+    });
     for (let i = 0;i < items.length; i++) {
       const key = keys[i];
       const existing = this.rows.get(key);
@@ -1374,7 +1381,6 @@ class ForBlock {
         next.set(key, row);
       }
     }
-    this.rows.forEach((row) => this.renderer.destroyRow(this, row));
     this.rows = next;
     this.order = keys;
     this.position();
@@ -1388,17 +1394,30 @@ class ForBlock {
       const row = this.rows.get(this.order[i]);
       if (!row)
         continue;
+      const nestedByAnchor = row.topLevelBlocks();
       for (let j = row.nodes.length - 1;j >= 0; j--) {
         const node = row.nodes[j];
         if (node.nextSibling !== reference || node.parentNode !== parent) {
           parent.insertBefore(node, reference);
         }
         reference = node;
+        const nested = nestedByAnchor.get(node);
+        if (nested)
+          reference = nested.place();
       }
     }
     if (parent.isConnected)
       this.renderer.connected?.();
   }
+  place() {
+    this.position();
+    for (const key of this.order) {
+      const row = this.rows.get(key);
+      if (row?.nodes.length)
+        return row.nodes[0];
+    }
+    return this.anchor;
+  }
   destroy() {
     this.pendingItems = null;
     this.rows.forEach((row) => this.renderer.destroyRow(this, row));

package/dist/index.js

@@ -485,9 +485,9 @@ class BindingEvaluator {
   compileExpression(expr, params = []) {
     return this.compile(expr, params);
   }
-  evaluate(expr, instance, locals = []) {
+  evaluate(expr, instance, locals = [], params = []) {
     try {
-      return this.compile(expr, [])(instance.state, instance.props, this.cells.createReadProxy(), this.pendingProbe(), ...locals);
+      return this.compile(expr, params)(instance.state, instance.props, this.cells.createReadProxy(), this.pendingProbe(), ...locals);
     } catch (error) {
       warn(`Error evaluating "${expr}" in ${instance.id}:`, error);
       return;
@@ -1103,6 +1103,22 @@ class Row {
   set item(value) {
     this.locals[this.locals.length - 1] = value;
   }
+  topLevelBlocks() {
+    const byAnchor = new Map;
+    for (const block of this.blocks) {
+      if (this.nodes.includes(block.anchor))
+        byAnchor.set(block.anchor, block);
+    }
+    return byAnchor;
+  }
+  disownNestedRows() {
+    const owned = new Set;
+    for (const block of this.topLevelBlocks().values()) {
+      block.rows.forEach((row) => row.nodes.forEach((node) => owned.add(node)));
+    }
+    if (owned.size)
+      this.nodes = this.nodes.filter((node) => !owned.has(node));
+  }
 }
 var TAG_NAME = /^[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/;
 var REFUSED_TAGS = new Set([
@@ -1266,6 +1282,13 @@ class ForBlock {
   async reconcile(items) {
     const keys = this.keysFor(items);
     const next = new Map;
+    const keep = new Set(keys);
+    this.rows.forEach((row, key) => {
+      if (!keep.has(key)) {
+        this.rows.delete(key);
+        this.renderer.destroyRow(this, row);
+      }
+    });
     for (let i = 0;i < items.length; i++) {
       const key = keys[i];
       const existing = this.rows.get(key);
@@ -1281,7 +1304,6 @@ class ForBlock {
         next.set(key, row);
       }
     }
-    this.rows.forEach((row) => this.renderer.destroyRow(this, row));
     this.rows = next;
     this.order = keys;
     this.position();
@@ -1295,17 +1317,30 @@ class ForBlock {
       const row = this.rows.get(this.order[i]);
       if (!row)
         continue;
+      const nestedByAnchor = row.topLevelBlocks();
       for (let j = row.nodes.length - 1;j >= 0; j--) {
         const node = row.nodes[j];
         if (node.nextSibling !== reference || node.parentNode !== parent) {
           parent.insertBefore(node, reference);
         }
         reference = node;
+        const nested = nestedByAnchor.get(node);
+        if (nested)
+          reference = nested.place();
       }
     }
     if (parent.isConnected)
       this.renderer.connected?.();
   }
+  place() {
+    this.position();
+    for (const key of this.order) {
+      const row = this.rows.get(key);
+      if (row?.nodes.length)
+        return row.nodes[0];
+    }
+    return this.anchor;
+  }
   destroy() {
     this.pendingItems = null;
     this.rows.forEach((row) => this.renderer.destroyRow(this, row));
@@ -1569,7 +1604,8 @@ class Mounter {
       outlet.replaceWith(holder);
     }
     for (const [name, nodes] of byName) {
-      if (!nodes.length)
+      const dropped = nodes.filter((node) => node.nodeType === 1 || node.nodeType === 3 && (node.textContent ?? "").trim() !== "");
+      if (!dropped.length)
         continue;
       warn(name ? `No <slot name="${name}"> to receive this content - it was dropped.` : "Content passed to a component with no unnamed <slot> - it was dropped.");
     }
@@ -1920,7 +1956,7 @@ class Mounter {
     return block;
   }
   adoptRows(block, slices, context) {
-    const value = this.bindings.evaluate(block.itemsExpr, context.owner, context.locals);
+    const value = this.bindings.evaluate(block.itemsExpr, context.owner, context.locals, block.params);
     const items = block.toItems(value);
     if (items.length !== slices.length)
       return false;
@@ -1943,6 +1979,7 @@ class Mounter {
       if (!this.adoptNodes(templateNodes, content, rowContext, markers)) {
         return false;
       }
+      row.disownNestedRows();
       for (const marker of markers) {
         this.mountMarker(marker, block.owner, rowContext).then((child) => {
           if (child)
@@ -2006,6 +2043,7 @@ class Mounter {
     row.instances.forEach((child) => this.bindings.updateTree(child));
     await Promise.all(row.blocks.map((nested) => nested.settled()));
     row.nodes = Array.from(fragment.childNodes);
+    row.disownNestedRows();
     return row;
   }
   connected() {
@@ -2941,6 +2979,9 @@ class LightspeedRuntime {
   seedState(values) {
     this.cells.seed(values);
   }
+  get signals() {
+    return createSignalAPI(this.globalSignals);
+  }
   shared(key, init, options) {
     const cell = this.cells.get(key, init, options);
     return {
@@ -2992,11 +3033,16 @@ class LightspeedRuntime {
   }
   async mount(componentId, target, props = {}, slotHtml) {
     const container = this.resolveTarget(target);
-    if (!container)
+    if (!container) {
+      warn(`mount(${componentId}): no element matches ${String(target)}`);
       return null;
+    }
+    componentId = componentId.toLowerCase();
     const instance = await this.mounter.mountRoot(componentId, container, props, this.parseSlotHtml(slotHtml));
-    if (!instance)
+    if (!instance) {
+      warn(`mount(${componentId}): no component with that id is registered. Known: ${[...new Set([...this.componentRegistry.getAllIds(), ...this.loaders.keys()])].join(", ") || "(none)"}`);
       return null;
+    }
     const handle = {
       id: `root#${++this.rootCounter}`,
       componentId,

package/dist/ssg.js

@@ -504,9 +504,9 @@ class BindingEvaluator {
   compileExpression(expr, params = []) {
     return this.compile(expr, params);
   }
-  evaluate(expr, instance, locals = []) {
+  evaluate(expr, instance, locals = [], params = []) {
     try {
-      return this.compile(expr, [])(instance.state, instance.props, this.cells.createReadProxy(), this.pendingProbe(), ...locals);
+      return this.compile(expr, params)(instance.state, instance.props, this.cells.createReadProxy(), this.pendingProbe(), ...locals);
     } catch (error) {
       warn(`Error evaluating "${expr}" in ${instance.id}:`, error);
       return;
@@ -1122,6 +1122,22 @@ class Row {
   set item(value) {
     this.locals[this.locals.length - 1] = value;
   }
+  topLevelBlocks() {
+    const byAnchor = new Map;
+    for (const block of this.blocks) {
+      if (this.nodes.includes(block.anchor))
+        byAnchor.set(block.anchor, block);
+    }
+    return byAnchor;
+  }
+  disownNestedRows() {
+    const owned = new Set;
+    for (const block of this.topLevelBlocks().values()) {
+      block.rows.forEach((row) => row.nodes.forEach((node) => owned.add(node)));
+    }
+    if (owned.size)
+      this.nodes = this.nodes.filter((node) => !owned.has(node));
+  }
 }
 var TAG_NAME = /^[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/;
 var REFUSED_TAGS = new Set([
@@ -1285,6 +1301,13 @@ class ForBlock {
   async reconcile(items) {
     const keys = this.keysFor(items);
     const next = new Map;
+    const keep = new Set(keys);
+    this.rows.forEach((row, key) => {
+      if (!keep.has(key)) {
+        this.rows.delete(key);
+        this.renderer.destroyRow(this, row);
+      }
+    });
     for (let i = 0;i < items.length; i++) {
       const key = keys[i];
       const existing = this.rows.get(key);
@@ -1300,7 +1323,6 @@ class ForBlock {
         next.set(key, row);
       }
     }
-    this.rows.forEach((row) => this.renderer.destroyRow(this, row));
     this.rows = next;
     this.order = keys;
     this.position();
@@ -1314,17 +1336,30 @@ class ForBlock {
       const row = this.rows.get(this.order[i]);
       if (!row)
         continue;
+      const nestedByAnchor = row.topLevelBlocks();
       for (let j = row.nodes.length - 1;j >= 0; j--) {
         const node = row.nodes[j];
         if (node.nextSibling !== reference || node.parentNode !== parent) {
           parent.insertBefore(node, reference);
         }
         reference = node;
+        const nested = nestedByAnchor.get(node);
+        if (nested)
+          reference = nested.place();
       }
     }
     if (parent.isConnected)
       this.renderer.connected?.();
   }
+  place() {
+    this.position();
+    for (const key of this.order) {
+      const row = this.rows.get(key);
+      if (row?.nodes.length)
+        return row.nodes[0];
+    }
+    return this.anchor;
+  }
   destroy() {
     this.pendingItems = null;
     this.rows.forEach((row) => this.renderer.destroyRow(this, row));
@@ -1592,7 +1627,8 @@ class Mounter {
       outlet.replaceWith(holder);
     }
     for (const [name, nodes] of byName) {
-      if (!nodes.length)
+      const dropped = nodes.filter((node) => node.nodeType === 1 || node.nodeType === 3 && (node.textContent ?? "").trim() !== "");
+      if (!dropped.length)
         continue;
       warn(name ? `No <slot name="${name}"> to receive this content - it was dropped.` : "Content passed to a component with no unnamed <slot> - it was dropped.");
     }
@@ -1943,7 +1979,7 @@ class Mounter {
     return block;
   }
   adoptRows(block, slices, context) {
-    const value = this.bindings.evaluate(block.itemsExpr, context.owner, context.locals);
+    const value = this.bindings.evaluate(block.itemsExpr, context.owner, context.locals, block.params);
     const items = block.toItems(value);
     if (items.length !== slices.length)
       return false;
@@ -1966,6 +2002,7 @@ class Mounter {
       if (!this.adoptNodes(templateNodes, content, rowContext, markers)) {
         return false;
       }
+      row.disownNestedRows();
       for (const marker of markers) {
         this.mountMarker(marker, block.owner, rowContext).then((child) => {
           if (child)
@@ -2029,6 +2066,7 @@ class Mounter {
     row.instances.forEach((child) => this.bindings.updateTree(child));
     await Promise.all(row.blocks.map((nested) => nested.settled()));
     row.nodes = Array.from(fragment.childNodes);
+    row.disownNestedRows();
     return row;
   }
   connected() {
@@ -3049,6 +3087,9 @@ class LightspeedRuntime {
   seedState(values) {
     this.cells.seed(values);
   }
+  get signals() {
+    return createSignalAPI(this.globalSignals);
+  }
   shared(key, init, options) {
     const cell = this.cells.get(key, init, options);
     return {
@@ -3100,11 +3141,16 @@ class LightspeedRuntime {
   }
   async mount(componentId, target, props = {}, slotHtml) {
     const container = this.resolveTarget(target);
-    if (!container)
+    if (!container) {
+      warn(`mount(${componentId}): no element matches ${String(target)}`);
       return null;
+    }
+    componentId = componentId.toLowerCase();
     const instance = await this.mounter.mountRoot(componentId, container, props, this.parseSlotHtml(slotHtml));
-    if (!instance)
+    if (!instance) {
+      warn(`mount(${componentId}): no component with that id is registered. Known: ${[...new Set([...this.componentRegistry.getAllIds(), ...this.loaders.keys()])].join(", ") || "(none)"}`);
       return null;
+    }
     const handle = {
       id: `root#${++this.rootCounter}`,
       componentId,

package/dist/types/src/runtime/bindings/BindingEvaluator.d.ts

@@ -133,7 +133,12 @@ export declare class BindingEvaluator {
     get cellManager(): CellManager;
     /** Compile a standalone expression, e.g. a `$key`. */
     compileExpression(expr: string, params?: string[]): Compiled;
-    evaluate(expr: string, instance: ComponentInstance, locals?: any[]): any;
+    /**
+     * Evaluate once, outside a binding. `params` names the loop aliases `locals`
+     * holds: the compiled table is keyed by scope, so a block inside a `$for`
+     * row has to be looked up with the row's alias in scope, or it misses.
+     */
+    evaluate(expr: string, instance: ComponentInstance, locals?: any[], params?: string[]): any;
     applyBinding(binding: Binding, scope: BindingScope): void;
     /** Re-evaluate everything owned by this instance, including its blocks. */
     updateInstance(instance: ComponentInstance): void;

package/dist/types/src/runtime/core.d.ts

@@ -1,3 +1,4 @@
+import { type SignalAPI } from "./signals/index.js";
 import { ComponentInstance, type ComponentDefinition } from "./components/index.js";
 import type { MarkerRange } from "./dom/Mounter.js";
 /**
@@ -185,6 +186,11 @@ export declare class LightspeedRuntime {
      * Unscoped, so a subscription here lives until its returned unsubscribe is
      * called. Component logic gets the instance-bound facade instead.
      */
+    /**
+     * The page-wide signals, for code outside any component: a host app
+     * listening for what its islands emit, or emitting to them.
+     */
+    get signals(): SignalAPI;
     shared(key: string, init?: any, options?: any): {
         key: string;
         value: any;

package/dist/types/src/runtime/dom/ForBlock.d.ts

@@ -30,6 +30,15 @@ export declare class Row implements BindingHolder {
     addBlock(block: ForBlock): void;
     get item(): any;
     set item(value: any);
+    /** Nested blocks whose anchor sits among this row's own nodes, by anchor. */
+    topLevelBlocks(): Map<Node, ForBlock>;
+    /**
+     * Drop the nodes that belong to rows of a nested block at this row's top
+     * level - a `$for` in a `<template>` branch, say. That block adds and
+     * removes its rows on its own; if this row still listed them, positioning
+     * this row would put a removed row back before the nested anchor.
+     */
+    disownNestedRows(): void;
 }
 export interface RowRenderer {
     createRow(block: ForBlock, item: any): Promise<Row>;
@@ -140,5 +149,7 @@ export declare class ForBlock {
      * moves are proportionate for the list sizes this targets.
      */
     private position;
+    /** Put the rows in place and say where the block now starts. */
+    place(): Node;
     destroy(): void;
 }

package/dist/types/test/branch-in-row-adoption.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/test/branch-switch.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/test/host-mount.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/test/nested-rows-in-branch.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/vite.js

@@ -243,9 +243,9 @@ class BindingEvaluator {
   compileExpression(expr, params = []) {
     return this.compile(expr, params);
   }
-  evaluate(expr, instance, locals = []) {
+  evaluate(expr, instance, locals = [], params = []) {
     try {
-      return this.compile(expr, [])(instance.state, instance.props, this.cells.createReadProxy(), this.pendingProbe(), ...locals);
+      return this.compile(expr, params)(instance.state, instance.props, this.cells.createReadProxy(), this.pendingProbe(), ...locals);
     } catch (error) {
       warn(`Error evaluating "${expr}" in ${instance.id}:`, error);
       return;
@@ -553,6 +553,22 @@ class Row {
   set item(value) {
     this.locals[this.locals.length - 1] = value;
   }
+  topLevelBlocks() {
+    const byAnchor = new Map;
+    for (const block of this.blocks) {
+      if (this.nodes.includes(block.anchor))
+        byAnchor.set(block.anchor, block);
+    }
+    return byAnchor;
+  }
+  disownNestedRows() {
+    const owned = new Set;
+    for (const block of this.topLevelBlocks().values()) {
+      block.rows.forEach((row) => row.nodes.forEach((node) => owned.add(node)));
+    }
+    if (owned.size)
+      this.nodes = this.nodes.filter((node) => !owned.has(node));
+  }
 }
 var TAG_NAME = /^[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/;
 var REFUSED_TAGS = new Set([
@@ -716,6 +732,13 @@ class ForBlock {
   async reconcile(items) {
     const keys = this.keysFor(items);
     const next = new Map;
+    const keep = new Set(keys);
+    this.rows.forEach((row, key) => {
+      if (!keep.has(key)) {
+        this.rows.delete(key);
+        this.renderer.destroyRow(this, row);
+      }
+    });
     for (let i = 0;i < items.length; i++) {
       const key = keys[i];
       const existing = this.rows.get(key);
@@ -731,7 +754,6 @@ class ForBlock {
         next.set(key, row);
       }
     }
-    this.rows.forEach((row) => this.renderer.destroyRow(this, row));
     this.rows = next;
     this.order = keys;
     this.position();
@@ -745,17 +767,30 @@ class ForBlock {
       const row = this.rows.get(this.order[i]);
       if (!row)
         continue;
+      const nestedByAnchor = row.topLevelBlocks();
       for (let j = row.nodes.length - 1;j >= 0; j--) {
         const node = row.nodes[j];
         if (node.nextSibling !== reference || node.parentNode !== parent) {
           parent.insertBefore(node, reference);
         }
         reference = node;
+        const nested = nestedByAnchor.get(node);
+        if (nested)
+          reference = nested.place();
       }
     }
     if (parent.isConnected)
       this.renderer.connected?.();
   }
+  place() {
+    this.position();
+    for (const key of this.order) {
+      const row = this.rows.get(key);
+      if (row?.nodes.length)
+        return row.nodes[0];
+    }
+    return this.anchor;
+  }
   destroy() {
     this.pendingItems = null;
     this.rows.forEach((row) => this.renderer.destroyRow(this, row));
@@ -1023,7 +1058,8 @@ class Mounter {
       outlet.replaceWith(holder);
     }
     for (const [name, nodes] of byName) {
-      if (!nodes.length)
+      const dropped = nodes.filter((node) => node.nodeType === 1 || node.nodeType === 3 && (node.textContent ?? "").trim() !== "");
+      if (!dropped.length)
         continue;
       warn(name ? `No <slot name="${name}"> to receive this content - it was dropped.` : "Content passed to a component with no unnamed <slot> - it was dropped.");
     }
@@ -1374,7 +1410,7 @@ class Mounter {
     return block;
   }
   adoptRows(block, slices, context) {
-    const value = this.bindings.evaluate(block.itemsExpr, context.owner, context.locals);
+    const value = this.bindings.evaluate(block.itemsExpr, context.owner, context.locals, block.params);
     const items = block.toItems(value);
     if (items.length !== slices.length)
       return false;
@@ -1397,6 +1433,7 @@ class Mounter {
       if (!this.adoptNodes(templateNodes, content, rowContext, markers)) {
         return false;
       }
+      row.disownNestedRows();
       for (const marker of markers) {
         this.mountMarker(marker, block.owner, rowContext).then((child) => {
           if (child)
@@ -1460,6 +1497,7 @@ class Mounter {
     row.instances.forEach((child) => this.bindings.updateTree(child));
     await Promise.all(row.blocks.map((nested) => nested.settled()));
     row.nodes = Array.from(fragment.childNodes);
+    row.disownNestedRows();
     return row;
   }
   connected() {
@@ -4440,6 +4478,9 @@ class LightspeedRuntime {
   seedState(values) {
     this.cells.seed(values);
   }
+  get signals() {
+    return createSignalAPI(this.globalSignals);
+  }
   shared(key, init, options) {
     const cell = this.cells.get(key, init, options);
     return {
@@ -4491,11 +4532,16 @@ class LightspeedRuntime {
   }
   async mount(componentId, target, props = {}, slotHtml) {
     const container = this.resolveTarget(target);
-    if (!container)
+    if (!container) {
+      warn(`mount(${componentId}): no element matches ${String(target)}`);
       return null;
+    }
+    componentId = componentId.toLowerCase();
     const instance = await this.mounter.mountRoot(componentId, container, props, this.parseSlotHtml(slotHtml));
-    if (!instance)
+    if (!instance) {
+      warn(`mount(${componentId}): no component with that id is registered. Known: ${[...new Set([...this.componentRegistry.getAllIds(), ...this.loaders.keys()])].join(", ") || "(none)"}`);
       return null;
+    }
     const handle = {
       id: `root#${++this.rootCounter}`,
       componentId,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightspeed-js/core",
-  "version": "0.4.7",
+  "version": "0.4.9",
   "description": "Lightspeed: a compile-first framework for islands of reactivity in static HTML.",
   "keywords": [
     "lightspeed",