@lightspeed-js/core 0.4.6 → 0.4.8

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;
@@ -1019,7 +1019,7 @@ class BindingEvaluator {
         binding.el.innerHTML = value == null ? "" : String(value);
         break;
       case "attr": {
-        const attr = binding.attr;
+        const attr = svgAttributeName(binding.el, binding.attr);
         const aria = attr.startsWith("aria-");
         if (BOOLEAN_ATTRIBUTES.has(attr) && !aria) {
           if (value)
@@ -1132,6 +1132,70 @@ function isPlain(value) {
   const proto = Object.getPrototypeOf(value);
   return proto === Object.prototype || proto === null;
 }
+var SVG_NS = "http://www.w3.org/2000/svg";
+var SVG_ATTRIBUTES = new Map([
+  "attributeName",
+  "attributeType",
+  "baseFrequency",
+  "baseProfile",
+  "calcMode",
+  "clipPathUnits",
+  "diffuseConstant",
+  "edgeMode",
+  "filterUnits",
+  "glyphRef",
+  "gradientTransform",
+  "gradientUnits",
+  "kernelMatrix",
+  "kernelUnitLength",
+  "keyPoints",
+  "keySplines",
+  "keyTimes",
+  "lengthAdjust",
+  "limitingConeAngle",
+  "markerHeight",
+  "markerUnits",
+  "markerWidth",
+  "maskContentUnits",
+  "maskUnits",
+  "numOctaves",
+  "pathLength",
+  "patternContentUnits",
+  "patternTransform",
+  "patternUnits",
+  "pointsAtX",
+  "pointsAtY",
+  "pointsAtZ",
+  "preserveAlpha",
+  "preserveAspectRatio",
+  "primitiveUnits",
+  "refX",
+  "refY",
+  "repeatCount",
+  "repeatDur",
+  "requiredExtensions",
+  "requiredFeatures",
+  "specularConstant",
+  "specularExponent",
+  "spreadMethod",
+  "startOffset",
+  "stdDeviation",
+  "stitchTiles",
+  "surfaceScale",
+  "systemLanguage",
+  "tableValues",
+  "targetX",
+  "targetY",
+  "textLength",
+  "viewBox",
+  "viewTarget",
+  "xChannelSelector",
+  "yChannelSelector",
+  "zoomAndPan"
+].map((name) => [name.toLowerCase(), name]));
+function svgAttributeName(el, attr) {
+  return el.namespaceURI === SVG_NS ? SVG_ATTRIBUTES.get(attr) ?? attr : attr;
+}
 // src/runtime/dom/ForBlock.ts
 var TAG_NAME = /^[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/;
 var REFUSED_TAGS = new Set([

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;
@@ -591,7 +591,7 @@ class BindingEvaluator {
         binding.el.innerHTML = value == null ? "" : String(value);
         break;
       case "attr": {
-        const attr = binding.attr;
+        const attr = svgAttributeName(binding.el, binding.attr);
         const aria = attr.startsWith("aria-");
         if (BOOLEAN_ATTRIBUTES.has(attr) && !aria) {
           if (value)
@@ -704,6 +704,70 @@ function isPlain(value) {
   const proto = Object.getPrototypeOf(value);
   return proto === Object.prototype || proto === null;
 }
+var SVG_NS = "http://www.w3.org/2000/svg";
+var SVG_ATTRIBUTES = new Map([
+  "attributeName",
+  "attributeType",
+  "baseFrequency",
+  "baseProfile",
+  "calcMode",
+  "clipPathUnits",
+  "diffuseConstant",
+  "edgeMode",
+  "filterUnits",
+  "glyphRef",
+  "gradientTransform",
+  "gradientUnits",
+  "kernelMatrix",
+  "kernelUnitLength",
+  "keyPoints",
+  "keySplines",
+  "keyTimes",
+  "lengthAdjust",
+  "limitingConeAngle",
+  "markerHeight",
+  "markerUnits",
+  "markerWidth",
+  "maskContentUnits",
+  "maskUnits",
+  "numOctaves",
+  "pathLength",
+  "patternContentUnits",
+  "patternTransform",
+  "patternUnits",
+  "pointsAtX",
+  "pointsAtY",
+  "pointsAtZ",
+  "preserveAlpha",
+  "preserveAspectRatio",
+  "primitiveUnits",
+  "refX",
+  "refY",
+  "repeatCount",
+  "repeatDur",
+  "requiredExtensions",
+  "requiredFeatures",
+  "specularConstant",
+  "specularExponent",
+  "spreadMethod",
+  "startOffset",
+  "stdDeviation",
+  "stitchTiles",
+  "surfaceScale",
+  "systemLanguage",
+  "tableValues",
+  "targetX",
+  "targetY",
+  "textLength",
+  "viewBox",
+  "viewTarget",
+  "xChannelSelector",
+  "yChannelSelector",
+  "zoomAndPan"
+].map((name) => [name.toLowerCase(), name]));
+function svgAttributeName(el, attr) {
+  return el.namespaceURI === SVG_NS ? SVG_ATTRIBUTES.get(attr) ?? attr : attr;
+}
 // src/runtime/events/EventBinder.ts
 class EventBinder {
   bind(el, eventType, handlerName, owner, cleanupTarget = owner) {
@@ -1505,7 +1569,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.");
     }
@@ -1687,10 +1752,13 @@ class Mounter {
         }
         if (el.tagName === "SLOT") {
           if (!found[d] || !isSlotStart(found[d])) {
-            if (!this.adoptNodes(Array.from(el.childNodes), found.slice(d), context, markers)) {
+            const fallback = significant(Array.from(el.childNodes));
+            const countable = fallback.every((n) => n.nodeType === 3 || n.nodeType === 1 && !isBlockTemplate(n) && n.tagName !== "SLOT");
+            const share = countable ? found.slice(d, d + fallback.length) : found.slice(d);
+            if (!this.adoptNodes(fallback, share, context, markers)) {
               return false;
             }
-            d = found.length;
+            d += share.length;
             continue;
           }
           const name = found[d].data.slice(SLOT_MARK.length);
@@ -1853,7 +1921,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;
@@ -2346,6 +2414,9 @@ function isBlockAnchor(node) {
   const data = node.data.trim();
   return data.startsWith("for:") || data.startsWith("if:") || data.startsWith("tag:");
 }
+function isBlockTemplate(el) {
+  return el.hasAttribute("data-bind-for") || el.hasAttribute("data-bind-if") || el.hasAttribute("data-bind-tag");
+}
 function isInsignificant(node) {
   return node.nodeType === 3 && !(node.textContent ?? "").trim();
 }

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;
@@ -610,7 +610,7 @@ class BindingEvaluator {
         binding.el.innerHTML = value == null ? "" : String(value);
         break;
       case "attr": {
-        const attr = binding.attr;
+        const attr = svgAttributeName(binding.el, binding.attr);
         const aria = attr.startsWith("aria-");
         if (BOOLEAN_ATTRIBUTES.has(attr) && !aria) {
           if (value)
@@ -723,6 +723,70 @@ function isPlain(value) {
   const proto = Object.getPrototypeOf(value);
   return proto === Object.prototype || proto === null;
 }
+var SVG_NS = "http://www.w3.org/2000/svg";
+var SVG_ATTRIBUTES = new Map([
+  "attributeName",
+  "attributeType",
+  "baseFrequency",
+  "baseProfile",
+  "calcMode",
+  "clipPathUnits",
+  "diffuseConstant",
+  "edgeMode",
+  "filterUnits",
+  "glyphRef",
+  "gradientTransform",
+  "gradientUnits",
+  "kernelMatrix",
+  "kernelUnitLength",
+  "keyPoints",
+  "keySplines",
+  "keyTimes",
+  "lengthAdjust",
+  "limitingConeAngle",
+  "markerHeight",
+  "markerUnits",
+  "markerWidth",
+  "maskContentUnits",
+  "maskUnits",
+  "numOctaves",
+  "pathLength",
+  "patternContentUnits",
+  "patternTransform",
+  "patternUnits",
+  "pointsAtX",
+  "pointsAtY",
+  "pointsAtZ",
+  "preserveAlpha",
+  "preserveAspectRatio",
+  "primitiveUnits",
+  "refX",
+  "refY",
+  "repeatCount",
+  "repeatDur",
+  "requiredExtensions",
+  "requiredFeatures",
+  "specularConstant",
+  "specularExponent",
+  "spreadMethod",
+  "startOffset",
+  "stdDeviation",
+  "stitchTiles",
+  "surfaceScale",
+  "systemLanguage",
+  "tableValues",
+  "targetX",
+  "targetY",
+  "textLength",
+  "viewBox",
+  "viewTarget",
+  "xChannelSelector",
+  "yChannelSelector",
+  "zoomAndPan"
+].map((name) => [name.toLowerCase(), name]));
+function svgAttributeName(el, attr) {
+  return el.namespaceURI === SVG_NS ? SVG_ATTRIBUTES.get(attr) ?? attr : attr;
+}
 // src/runtime/events/EventBinder.ts
 class EventBinder {
   bind(el, eventType, handlerName, owner, cleanupTarget = owner) {
@@ -1528,7 +1592,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.");
     }
@@ -1710,10 +1775,13 @@ class Mounter {
         }
         if (el.tagName === "SLOT") {
           if (!found[d] || !isSlotStart(found[d])) {
-            if (!this.adoptNodes(Array.from(el.childNodes), found.slice(d), context, markers)) {
+            const fallback = significant(Array.from(el.childNodes));
+            const countable = fallback.every((n) => n.nodeType === 3 || n.nodeType === 1 && !isBlockTemplate(n) && n.tagName !== "SLOT");
+            const share = countable ? found.slice(d, d + fallback.length) : found.slice(d);
+            if (!this.adoptNodes(fallback, share, context, markers)) {
               return false;
             }
-            d = found.length;
+            d += share.length;
             continue;
           }
           const name = found[d].data.slice(SLOT_MARK.length);
@@ -1876,7 +1944,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;
@@ -2369,6 +2437,9 @@ function isBlockAnchor(node) {
   const data = node.data.trim();
   return data.startsWith("for:") || data.startsWith("if:") || data.startsWith("tag:");
 }
+function isBlockTemplate(el) {
+  return el.hasAttribute("data-bind-for") || el.hasAttribute("data-bind-if") || el.hasAttribute("data-bind-tag");
+}
 function isInsignificant(node) {
   return node.nodeType === 3 && !(node.textContent ?? "").trim();
 }

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/test/branch-in-row-adoption.test.d.ts

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

package/dist/types/test/slot-fallback-adoption.test.d.ts

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

package/dist/types/test/svg-attribute-case.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;
@@ -349,7 +349,7 @@ class BindingEvaluator {
         binding.el.innerHTML = value == null ? "" : String(value);
         break;
       case "attr": {
-        const attr = binding.attr;
+        const attr = svgAttributeName(binding.el, binding.attr);
         const aria = attr.startsWith("aria-");
         if (BOOLEAN_ATTRIBUTES.has(attr) && !aria) {
           if (value)
@@ -462,6 +462,70 @@ function isPlain(value) {
   const proto = Object.getPrototypeOf(value);
   return proto === Object.prototype || proto === null;
 }
+var SVG_NS = "http://www.w3.org/2000/svg";
+var SVG_ATTRIBUTES = new Map([
+  "attributeName",
+  "attributeType",
+  "baseFrequency",
+  "baseProfile",
+  "calcMode",
+  "clipPathUnits",
+  "diffuseConstant",
+  "edgeMode",
+  "filterUnits",
+  "glyphRef",
+  "gradientTransform",
+  "gradientUnits",
+  "kernelMatrix",
+  "kernelUnitLength",
+  "keyPoints",
+  "keySplines",
+  "keyTimes",
+  "lengthAdjust",
+  "limitingConeAngle",
+  "markerHeight",
+  "markerUnits",
+  "markerWidth",
+  "maskContentUnits",
+  "maskUnits",
+  "numOctaves",
+  "pathLength",
+  "patternContentUnits",
+  "patternTransform",
+  "patternUnits",
+  "pointsAtX",
+  "pointsAtY",
+  "pointsAtZ",
+  "preserveAlpha",
+  "preserveAspectRatio",
+  "primitiveUnits",
+  "refX",
+  "refY",
+  "repeatCount",
+  "repeatDur",
+  "requiredExtensions",
+  "requiredFeatures",
+  "specularConstant",
+  "specularExponent",
+  "spreadMethod",
+  "startOffset",
+  "stdDeviation",
+  "stitchTiles",
+  "surfaceScale",
+  "systemLanguage",
+  "tableValues",
+  "targetX",
+  "targetY",
+  "textLength",
+  "viewBox",
+  "viewTarget",
+  "xChannelSelector",
+  "yChannelSelector",
+  "zoomAndPan"
+].map((name) => [name.toLowerCase(), name]));
+function svgAttributeName(el, attr) {
+  return el.namespaceURI === SVG_NS ? SVG_ATTRIBUTES.get(attr) ?? attr : attr;
+}
 // src/runtime/dom/ForBlock.ts
 class Row {
   locals;
@@ -959,7 +1023,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.");
     }
@@ -1141,10 +1206,13 @@ class Mounter {
         }
         if (el.tagName === "SLOT") {
           if (!found[d] || !isSlotStart(found[d])) {
-            if (!this.adoptNodes(Array.from(el.childNodes), found.slice(d), context, markers)) {
+            const fallback = significant(Array.from(el.childNodes));
+            const countable = fallback.every((n) => n.nodeType === 3 || n.nodeType === 1 && !isBlockTemplate(n) && n.tagName !== "SLOT");
+            const share = countable ? found.slice(d, d + fallback.length) : found.slice(d);
+            if (!this.adoptNodes(fallback, share, context, markers)) {
               return false;
             }
-            d = found.length;
+            d += share.length;
             continue;
           }
           const name = found[d].data.slice(SLOT_MARK.length);
@@ -1307,7 +1375,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;
@@ -1800,6 +1868,9 @@ function isBlockAnchor(node) {
   const data = node.data.trim();
   return data.startsWith("for:") || data.startsWith("if:") || data.startsWith("tag:");
 }
+function isBlockTemplate(el) {
+  return el.hasAttribute("data-bind-for") || el.hasAttribute("data-bind-if") || el.hasAttribute("data-bind-tag");
+}
 function isInsignificant(node) {
   return node.nodeType === 3 && !(node.textContent ?? "").trim();
 }

package/package.json

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