@zubra/runtime 5.0.3 → 5.1.1

package/dist/production/element.js

@@ -49,6 +49,12 @@ export function isSafeUrl(value) {
   return ['http', 'https', 'mailto', 'tel'].includes(beforePath.slice(0, colon).toLowerCase());
 }
 
+/** A srcset whose every candidate's URL is safe (src/validate.rs `is_safe_srcset`). */
+export function isSafeSrcset(value) {
+  const urls = String(value).split(',').map((candidate) => candidate.trim().split(/\s+/)[0]).filter(Boolean);
+  return urls.length > 0 && urls.every(isSafeUrl);
+}
+
 const clone = (value) => (value && typeof value === 'object' ? structuredClone(value) : value);
 
 /** Attribute text → prop value, typed by the prop's default (JSON for arrays and objects). */
@@ -871,13 +877,24 @@ const isContent = (node) => node.nodeType === 1 || (node.nodeType === TEXT && no
  * The slot for each of `nodes` (an element's children, in order). Comments and whitespace are
  * frameworks' markers (Lit's parts, Svelte's anchors): a comment goes with the content after it
  * and whitespace with the content before it, so a framework's range stays together in one slot.
+ * Empty text nodes come in pairs (Vue brackets each fragment, a v-for, with two): both go with
+ * the content between them, since Vue moves that content through the start anchor's parent.
  */
 function assignSlots(nodes) {
   const named = nodes.map((node) => (isContent(node) ? slotName(node) : null));
-  const after = (i) => { for (let j = i + 1; j < nodes.length; j++) if (named[j]) return named[j]; return null; };
-  const before = (i) => { for (let j = i - 1; j >= 0; j--) if (named[j]) return named[j]; return null; };
+  // The slot of the nearest content after (step 1) or before (step -1) node i.
+  const near = (i, step) => { for (let j = i + step; nodes[j]; j += step) if (named[j]) return named[j]; return null; };
+  // An empty text node right before content opens a range; otherwise it closes the last one,
+  // and both take the slot of the first content between them.
+  const open = [];
+  nodes.forEach((node, i) => {
+    if (node.nodeType !== TEXT || node.data) return;
+    if (!open.length || named[i + 1] && nodes[i + 1].data == null) return open.push(i);
+    const start = open.pop();
+    named[start] = named[i] = named.slice(start + 1, i).find(Boolean);
+  });
   return nodes.map((node, i) => named[i]
-    ?? (node.nodeType === COMMENT ? after(i) ?? before(i) : before(i) ?? after(i))
+    ?? (node.nodeType === COMMENT ? near(i, 1) ?? near(i, -1) : near(i, -1) ?? near(i, 1))
     ?? 'default');
 }
 let nativeText, nativeHTML; // looked up on first use, so the module loads without a DOM
@@ -1075,6 +1092,11 @@ function bindAttribute(part, node) {
     const text = typeof value === 'object' ? JSON.stringify(value) : String(value);
     // No URL yet (a prop's "" default, before the app sets it): no attribute, and nothing to report.
     if (part.url && text.trim() === '') return node.removeAttribute(name);
+    if (part.srcset && text.trim() === '') return node.removeAttribute(name);
+    if (part.srcset && !isSafeSrcset(text)) {
+      console.error(`zubra: blocked an unsafe URL in "${name}"${see('safety')}:`, text);
+      return node.removeAttribute(name);
+    }
     if (part.url && !isSafeUrl(text)) {
       console.error(`zubra: blocked an unsafe URL in "${name}"${see('safety')}:`, text);
       return node.removeAttribute(name);

package/dist/production/index.js

@@ -8,5 +8,5 @@ export {
   createContext, provide, inject, ContextRequestEvent, ContextProviderEvent,
   formValue, validity, onFormReset, onFormRestore, onFormDisabled,
   prevent, stop, selfOnly, submit, keys, model, hasSlot, hydrated, signal, from, raw,
-  isSafeUrl, $r, $t,
+  isSafeUrl, isSafeSrcset, $r, $t,
 } from './element.js';

package/dist/production/spread.js

@@ -2,7 +2,7 @@
 // {...spread} in compiled components: an object's entries as an element's attributes,
 // properties and listeners. Its own entry (`@zubra/runtime/spread`), which a compiled module imports
 // only when its template spreads, so components that don't, don't load it.
-import { $r, isSafeUrl } from './element.js';
+import { $r, isSafeSrcset, isSafeUrl } from './element.js';
 import { effect } from './effect.js';
 
 const see = (section) => ` (see https://github.com/journey-to-code-org/zubra#${section})`;
@@ -130,6 +130,13 @@ export function spread(part, node) {
         continue;
       }
       const text = String(value);
+      if (name.toLowerCase() === 'srcset') {
+        if (text.trim() === '' || !isSafeSrcset(text)) {
+          if (text.trim() !== '') console.error(`zubra: blocked an unsafe URL in "${name}"${see('safety')}:`, text);
+          node.removeAttribute(name);
+          continue;
+        }
+      }
       if (SPREAD_URLS.has(name.toLowerCase())) {
         if (text.trim() === '') {
           node.removeAttribute(name);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zubra/runtime",
-  "version": "5.0.3",
+  "version": "5.1.1",
   "description": "Browser runtime for Zubra compiled components, built on the TC39 Signals API",
   "license": "ISC",
   "repository": {

package/src/element.js

@@ -48,6 +48,12 @@ export function isSafeUrl(value) {
   return ['http', 'https', 'mailto', 'tel'].includes(beforePath.slice(0, colon).toLowerCase());
 }
 
+/** A srcset whose every candidate's URL is safe (src/validate.rs `is_safe_srcset`). */
+export function isSafeSrcset(value) {
+  const urls = String(value).split(',').map((candidate) => candidate.trim().split(/\s+/)[0]).filter(Boolean);
+  return urls.length > 0 && urls.every(isSafeUrl);
+}
+
 const clone = (value) => (value && typeof value === 'object' ? structuredClone(value) : value);
 
 /** Attribute text → prop value, typed by the prop's default (JSON for arrays and objects). */
@@ -886,13 +892,24 @@ const isContent = (node) => node.nodeType === 1 || (node.nodeType === TEXT && no
  * The slot for each of `nodes` (an element's children, in order). Comments and whitespace are
  * frameworks' markers (Lit's parts, Svelte's anchors): a comment goes with the content after it
  * and whitespace with the content before it, so a framework's range stays together in one slot.
+ * Empty text nodes come in pairs (Vue brackets each fragment, a v-for, with two): both go with
+ * the content between them, since Vue moves that content through the start anchor's parent.
  */
 function assignSlots(nodes) {
   const named = nodes.map((node) => (isContent(node) ? slotName(node) : null));
-  const after = (i) => { for (let j = i + 1; j < nodes.length; j++) if (named[j]) return named[j]; return null; };
-  const before = (i) => { for (let j = i - 1; j >= 0; j--) if (named[j]) return named[j]; return null; };
+  // The slot of the nearest content after (step 1) or before (step -1) node i.
+  const near = (i, step) => { for (let j = i + step; nodes[j]; j += step) if (named[j]) return named[j]; return null; };
+  // An empty text node right before content opens a range; otherwise it closes the last one,
+  // and both take the slot of the first content between them.
+  const open = [];
+  nodes.forEach((node, i) => {
+    if (node.nodeType !== TEXT || node.data) return;
+    if (!open.length || named[i + 1] && nodes[i + 1].data == null) return open.push(i);
+    const start = open.pop();
+    named[start] = named[i] = named.slice(start + 1, i).find(Boolean);
+  });
   return nodes.map((node, i) => named[i]
-    ?? (node.nodeType === COMMENT ? after(i) ?? before(i) : before(i) ?? after(i))
+    ?? (node.nodeType === COMMENT ? near(i, 1) ?? near(i, -1) : near(i, -1) ?? near(i, 1))
     ?? 'default');
 }
 let nativeText, nativeHTML; // looked up on first use, so the module loads without a DOM
@@ -1090,6 +1107,11 @@ function bindAttribute(part, node) {
     const text = typeof value === 'object' ? JSON.stringify(value) : String(value);
     // No URL yet (a prop's "" default, before the app sets it): no attribute, and nothing to report.
     if (part.url && text.trim() === '') return node.removeAttribute(name);
+    if (part.srcset && text.trim() === '') return node.removeAttribute(name);
+    if (part.srcset && !isSafeSrcset(text)) {
+      console.error(`zubra: blocked an unsafe URL in "${name}"${see('safety')}:`, text);
+      return node.removeAttribute(name);
+    }
     if (part.url && !isSafeUrl(text)) {
       console.error(`zubra: blocked an unsafe URL in "${name}"${see('safety')}:`, text);
       return node.removeAttribute(name);

package/src/index.js

@@ -7,5 +7,5 @@ export {
   createContext, provide, inject, ContextRequestEvent, ContextProviderEvent,
   formValue, validity, onFormReset, onFormRestore, onFormDisabled,
   prevent, stop, selfOnly, submit, keys, model, hasSlot, hydrated, signal, from, raw,
-  isSafeUrl, $r, $t,
+  isSafeUrl, isSafeSrcset, $r, $t,
 } from './element.js';

package/src/spread.js

@@ -1,7 +1,7 @@
 // {...spread} in compiled components: an object's entries as an element's attributes,
 // properties and listeners. Its own entry (`@zubra/runtime/spread`), which a compiled module imports
 // only when its template spreads, so components that don't, don't load it.
-import { $r, isSafeUrl } from './element.js';
+import { $r, isSafeSrcset, isSafeUrl } from './element.js';
 import { effect } from './effect.js';
 
 const see = (section) => ` (see https://github.com/journey-to-code-org/zubra#${section})`;
@@ -129,6 +129,13 @@ export function spread(part, node) {
         continue;
       }
       const text = String(value);
+      if (name.toLowerCase() === 'srcset') {
+        if (text.trim() === '' || !isSafeSrcset(text)) {
+          if (text.trim() !== '') console.error(`zubra: blocked an unsafe URL in "${name}"${see('safety')}:`, text);
+          node.removeAttribute(name);
+          continue;
+        }
+      }
       if (SPREAD_URLS.has(name.toLowerCase())) {
         if (text.trim() === '') {
           node.removeAttribute(name);

package/types/index.d.ts

@@ -199,6 +199,8 @@ export declare const ABI: number;
 
 /** Whether a URL is safe for `href`/`src`: relative, or http(s), mailto or tel. */
 export declare function isSafeUrl(value: string): boolean;
+/** True when every candidate in a srcset has a safe URL (the check a dynamic `srcset` gets). */
+export declare function isSafeSrcset(value: string): boolean;
 /** @internal Read a value that may be a signal. */
 export declare function $r<T>(value: MaybeSignal<T>): T;
 /** @internal A value as template text. */