jq79 0.3.19 → 0.3.21

package/src/dom.ts

@@ -1,16 +1,25 @@
 // DOM helpers: tiny query/create utilities, also injected into component
 // scripts as $, $$ and $create
 
-export const $ = (selectorOrEl: string | Element, selector?: string) => 
-  typeof selectorOrEl === "string"
+// $(selector) queries the document; $(el, selector) queries within el. The
+// selector is required in the element form - an empty one is a SyntaxError
+export function $(selector: string): Element | null
+export function $(el: Element, selector: string): Element | null
+export function $(selectorOrEl: string | Element, selector?: string): Element | null {
+  return typeof selectorOrEl === "string"
     ? document.querySelector(selectorOrEl)
-    : selectorOrEl.querySelector(selector || "")
+    : selectorOrEl.querySelector(selector!)
+}
 
-export const $$ = (selectorOrEl: string | Element, selector?: string) => Array.from(
-  typeof selectorOrEl === "string"
-    ? document.querySelectorAll(selectorOrEl)
-    : selectorOrEl.querySelectorAll(selector || "")
-)
+export function $$(selector: string): Element[]
+export function $$(el: Element, selector: string): Element[]
+export function $$(selectorOrEl: string | Element, selector?: string): Element[] {
+  return Array.from(
+    typeof selectorOrEl === "string"
+      ? document.querySelectorAll(selectorOrEl)
+      : selectorOrEl.querySelectorAll(selector!)
+  )
+}
 
 // $create(tag, attrs): attrs are set as attributes, except className, which
 // may be a string or an array of class names.
@@ -56,13 +65,21 @@ export function isSafeUrl(value: string): boolean {
   }
 }
 
-function sanitizeNode(node: HTMLElement): HTMLElement | null {
-  // Nodo de texto: siempre seguro, se deja tal cual
-  if (node.nodeType === Node.TEXT_NODE) return node;
-
-  // Comentarios y cualquier otra cosa: fuera
-  if (node.nodeType !== Node.ELEMENT_NODE) return null;
+// copia los hijos de `source` en `target`, saneando los elementos y clonando
+// el texto; cualquier otra cosa (comentarios, etc.) se descarta
+function appendSanitizedChildren(source: ParentNode, target: HTMLElement): void {
+  for (const child of Array.from(source.childNodes)) {
+    if (child.nodeType === Node.ELEMENT_NODE) {
+      const sanitizedChild = sanitizeNode(child as HTMLElement);
+      if (sanitizedChild) target.appendChild(sanitizedChild);
+    } else if (child.nodeType === Node.TEXT_NODE) {
+      target.appendChild(child.cloneNode());
+    }
+  }
+}
 
+// sanea un elemento (los llamadores solo pasan nodos ELEMENT_NODE)
+function sanitizeNode(node: HTMLElement): HTMLElement | null {
   const tag = node.tagName.toLowerCase();
   if (!ALLOWED_TAGS.has(tag)) return null; // tag no permitido → se descarta el nodo entero
 
@@ -79,20 +96,10 @@ function sanitizeNode(node: HTMLElement): HTMLElement | null {
     clean.setAttribute(name, attr.value);
   }
 
-  // fuerza rel seguro en enlaces
-  if (tag === 'a') {
-    clean.setAttribute('rel', 'noopener noreferrer');
-    if (clean.hasAttribute('target')) clean.removeAttribute('target');
-  }
+  // fuerza rel seguro en enlaces (target nunca se copia: no está permitido)
+  if (tag === 'a') clean.setAttribute('rel', 'noopener noreferrer');
 
-  for (const child of Array.from(node.childNodes)) {
-    if (child.nodeType === Node.ELEMENT_NODE) {
-      const sanitizedChild = sanitizeNode(child as HTMLElement);
-      if (sanitizedChild) clean.appendChild(sanitizedChild);
-    } else if (child.nodeType === Node.TEXT_NODE) {
-      clean.appendChild(child.cloneNode());
-    }
-  }
+  appendSanitizedChildren(node, clean);
 
   return clean;
 }
@@ -101,14 +108,7 @@ export function sanitizeHTML(html: string): string {
   const doc = new DOMParser().parseFromString(html, 'text/html');
   const container = document.createElement('div');
 
-  for (const child of Array.from(doc.body.childNodes)) {
-    if (child.nodeType === Node.ELEMENT_NODE) {
-      const sanitizedChild = sanitizeNode(child as HTMLElement);
-      if (sanitizedChild) container.appendChild(sanitizedChild);
-    } else if (child.nodeType === Node.TEXT_NODE) {
-      container.appendChild(child.cloneNode());
-    }
-  }
+  appendSanitizedChildren(doc.body, container);
 
   return container.innerHTML;
 }

package/src/jq79.ts

@@ -1,5 +1,5 @@
 
-import { $, $$, $create } from "./dom"
+import { $, $$, $create, sanitizeHTML } from "./dom"
 import { $reactive, untracked, createEffectScope } from "./reactive"
 import type { ReactiveDeepData, EffectScope } from "./reactive"
 import { transformSetupScript, transformFactoryScript } from "./transform"
@@ -56,7 +56,7 @@ const interpolate = (template: string, scope: Record<string, any>): string =>
   template.replace(/{{\s*(.+?)\s*}}/g, (_, expr) => evalExpr(expr, scope) ?? "")
 
 
-const CONTROL_ATTRS = new Set([":attrs", ":if", ":elseif", ":else", ":each", ":key", ":with"])
+const CONTROL_ATTRS = new Set([":attrs", ":if", ":elseif", ":else", ":each", ":key", ":with", ":text", ":html"])
 const EACH_PATTERN = /^\s*(\w+)\s+in\s+(.+)$/
 
 type ConditionalBranch = { expr?: string; node: TemplateNode }
@@ -202,10 +202,11 @@ const createWithScope = (expr: string, scope: Record<string, any>): Record<strin
 }
 
 // renders a single element node: static attrs, @event listeners, a reactive
-// :attrs object, and its (reactive) children. :if/:elseif/:else/:each are
-// handled by renderNodes, which decides *whether*/*how many times* a node is
-// rendered before calling this. Tags matching a PascalCase scope variable
-// render as nested components instead
+// :attrs object, and its content - :text/:html override the element's own
+// children with a reactive textContent/innerHTML, otherwise children render
+// normally. :if/:elseif/:else/:each are handled by renderNodes, which decides
+// *whether*/*how many times* a node is rendered before calling this. Tags
+// matching a PascalCase scope variable render as nested components instead
 const renderNode = (node: TemplateNode, outerScope: Record<string, any>, fx: EffectScope): Node => {
   // :with applies to the element's own bindings (@events, :attrs) and its
   // whole subtree. On a :each element the item scope is already in place, so
@@ -254,7 +255,19 @@ const renderNode = (node: TemplateNode, outerScope: Record<string, any>, fx: Eff
     })
   }
 
-  el.appendChild(renderNodes(node.children, scope, fx))
+  // :text="expr" sets textContent reactively, replacing any children.
+  // :html="expr" sets innerHTML reactively, sanitizing the value first so
+  // untrusted content can't inject scripts/attributes (see sanitizeHTML in
+  // ./dom). Both skip rendering the element's own children/interpolation
+  const textExpr = node.attrs[":text"]
+  const htmlExpr = node.attrs[":html"]
+  if (textExpr !== undefined) {
+    fx.effect(() => { el.textContent = String(evalExpr(textExpr, scope) ?? "") })
+  } else if (htmlExpr !== undefined) {
+    fx.effect(() => { el.innerHTML = sanitizeHTML(String(evalExpr(htmlExpr, scope) ?? "")) })
+  } else {
+    el.appendChild(renderNodes(node.children, scope, fx))
+  }
 
   return el
 }
@@ -588,9 +601,15 @@ const runFactoryScript = (code: string, scope: Record<string, any>, effect: (run
     const merge = (bindings: any) => {
       if (bindings && typeof bindings === "object") Object.assign(scope, bindings)
     }
-    const returned = factory({ $data: scope, $effect: effect, ...instanceHelpers })
-    if (returned instanceof Promise) returned.then(merge).catch(logError)
-    else merge(returned)
+    // the sync path is invoked straight from render(), so a throwing factory
+    // must be caught here too - not just by the `result` rejection handler
+    try {
+      const returned = factory({ $data: scope, $effect: effect, ...instanceHelpers })
+      if (returned instanceof Promise) returned.then(merge).catch(logError)
+      else merge(returned)
+    } catch (error) {
+      logError(error)
+    }
   }
 
   result.then(invoke, logError)

package/src/vite.ts

@@ -37,7 +37,6 @@ const IMPORT_LITERAL_RE = /(?<![\w$.])import\s*\(\s*(["'])([^"'\n]+?)\1\s*\)/g
 const STATIC_IMPORT_LITERAL_RE = /(?<![\w$.])import\s*(?:[\w$\s,{}*]+?\s*from\s*)?(["'])([^"'\n]+)\1/g
 
 const isHtmlUrl = (spec: string) => /\.html?([?#]|$)/.test(spec)
-const isRelative = (spec: string) => spec.startsWith("./") || spec.startsWith("../")
 const isExternalUrl = (spec: string) => /^[a-z][a-z0-9+.-]*:/i.test(spec) || spec.startsWith("/")
 
 // literal import specifiers in the component's script blocks - dynamic