@lightspeed-js/core 0.4.8 → 0.4.9

package/dist/compile.js

@@ -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

@@ -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));
@@ -1944,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)
@@ -2007,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() {
@@ -2942,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 {
@@ -2993,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

@@ -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));
@@ -1967,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)
@@ -2030,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() {
@@ -3050,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 {
@@ -3101,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/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-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

@@ -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));
@@ -1398,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)
@@ -1461,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() {
@@ -4441,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 {
@@ -4492,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.8",
+  "version": "0.4.9",
   "description": "Lightspeed: a compile-first framework for islands of reactivity in static HTML.",
   "keywords": [
     "lightspeed",