jq79 0.4.1 → 0.4.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jq79",
-  "version": "0.4.1",
+  "version": "0.4.3",
   "description": "Mini reactive component library: single-file components, Svelte-style setup scripts, fine-grained proxy reactivity. Single-file build, zero dependencies.",
   "keywords": [
     "reactive",

package/src/dom.ts

@@ -65,12 +65,77 @@ export function isSafeUrl(value: string): boolean {
   }
 }
 
+// la política de destinos: decide si un href/src ya seguro por protocolo
+// puede apuntar a donde apunta. Restringe *sobre* el chequeo de protocolo,
+// nunca en su lugar
+export type AllowUrl = (url: URL, tag: string, attr: string) => boolean;
+
+export type SanitizeOptions = { allowUrl?: AllowUrl };
+
+const DEFAULT_PORTS: Record<string, string> = { 'https:': '443', 'http:': '80' };
+
+type HostPattern = { host: RegExp; port: string | null };
+
+// "host[:puerto]": `*` casa exactamente UNA etiqueta dns - la regla de los
+// certificados TLS, no la de CSP: *.germade.dev casa a.germade.dev, pero ni
+// germade.dev (escribe los dos para incluir el apex) ni a.b.germade.dev.
+// Sin puerto casa cualquiera; un patrón inválido devuelve null y no casa
+// nada - una política rota cierra, no abre
+function compileHostPattern(pattern: string): HostPattern | null {
+  const match = pattern.trim().toLowerCase().match(/^([a-z\d*][a-z\d.*-]*?)(?::(\d{1,5}|\*))?$/);
+  if (!match) return null;
+  const [, host, port] = match;
+  const labels = host.split('.');
+  if (labels.some(label => label !== '*' && !/^[a-z\d-]+$/.test(label))) return null;
+  // las etiquetas validadas no llevan metacaracteres de regex, así que no
+  // hay nada que escapar; los puntos los pone el join
+  const re = new RegExp(`^${labels.map(label => (label === '*' ? '[^.]+' : label)).join('\\.')}$`);
+  return { host: re, port: !port || port === '*' ? null : port };
+}
+
+// compila una lista de patrones (string separado por comas, o array) en un
+// predicado AllowUrl. El puerto comparado es el *efectivo* de la URL (el
+// explícito, o el del esquema), así "germade.dev:443" casa https://germade.dev.
+// Una URL sin host (mailto:) no casa ningún patrón: los patrones hablan de
+// hosts - la forma función de la política puede admitirla si quiere
+export const allowedHosts = (patterns: string | string[]): AllowUrl => {
+  const compiled = (Array.isArray(patterns) ? patterns : patterns.split(','))
+    .map(compileHostPattern)
+    .filter((p): p is HostPattern => p !== null);
+  return url => {
+    const host = url.hostname.toLowerCase();
+    const port = url.port || DEFAULT_PORTS[url.protocol] || '';
+    return compiled.some(p => p.host.test(host) && (p.port === null || p.port === port));
+  };
+};
+
+// consulta la política con la URL resuelta contra la página, para que una
+// URL relativa se juzgue como el destino same-origin que realmente es. Un
+// predicado que lanza, o una URL que no parsea, es un no
+function consultAllowUrl(allowUrl: AllowUrl, value: string, tag: string, attr: string): boolean {
+  try {
+    return !!allowUrl(new URL(value, document.baseURI), tag, attr);
+  } catch {
+    return false;
+  }
+}
+
+// el saneado es recursivo, así que la profundidad del input es profundidad
+// de pila. 512 es lo que toleran los parsers de los navegadores antes de
+// aplanar el anidamiento, con lo que ningún documento legítimo pierde nada -
+// y superar el límite lanza un RangeError con nombre, en vez de reventar la
+// pila en algún punto indeterminado más arriba
+const MAX_SANITIZE_DEPTH = 512;
+
 // 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 {
+function appendSanitizedChildren(source: ParentNode, target: HTMLElement, depth: number, allowUrl?: AllowUrl): void {
+  if (depth > MAX_SANITIZE_DEPTH) {
+    throw new RangeError(`jq79: sanitizeHTML input nests deeper than ${MAX_SANITIZE_DEPTH} elements`);
+  }
   for (const child of Array.from(source.childNodes)) {
     if (child.nodeType === Node.ELEMENT_NODE) {
-      const sanitizedChild = sanitizeNode(child as HTMLElement);
+      const sanitizedChild = sanitizeNode(child as HTMLElement, depth, allowUrl);
       if (sanitizedChild) target.appendChild(sanitizedChild);
     } else if (child.nodeType === Node.TEXT_NODE) {
       target.appendChild(child.cloneNode());
@@ -79,7 +144,7 @@ function appendSanitizedChildren(source: ParentNode, target: HTMLElement): void
 }
 
 // sanea un elemento (los llamadores solo pasan nodos ELEMENT_NODE)
-function sanitizeNode(node: HTMLElement): HTMLElement | null {
+function sanitizeNode(node: HTMLElement, depth: number, allowUrl?: AllowUrl): HTMLElement | null {
   const tag = node.tagName.toLowerCase();
   if (!ALLOWED_TAGS.has(tag)) return null; // tag no permitido → se descarta el nodo entero
 
@@ -91,7 +156,10 @@ function sanitizeNode(node: HTMLElement): HTMLElement | null {
     const allowedGlobal = ALLOWED_ATTR['*']?.has(name);
     if (!allowedForTag && !allowedGlobal) continue;
 
-    if ((name === 'href' || name === 'src') && !isSafeUrl(attr.value)) continue;
+    if (name === 'href' || name === 'src') {
+      if (!isSafeUrl(attr.value)) continue;
+      if (allowUrl && !consultAllowUrl(allowUrl, attr.value, tag, name)) continue;
+    }
 
     clean.setAttribute(name, attr.value);
   }
@@ -99,16 +167,16 @@ function sanitizeNode(node: HTMLElement): HTMLElement | null {
   // fuerza rel seguro en enlaces (target nunca se copia: no está permitido)
   if (tag === 'a') clean.setAttribute('rel', 'noopener noreferrer');
 
-  appendSanitizedChildren(node, clean);
+  appendSanitizedChildren(node, clean, depth + 1, allowUrl);
 
   return clean;
 }
 
-export function sanitizeHTML(html: string): string {
+export function sanitizeHTML(html: string, options?: SanitizeOptions): string {
   const doc = new DOMParser().parseFromString(html, 'text/html');
   const container = document.createElement('div');
 
-  appendSanitizedChildren(doc.body, container);
+  appendSanitizedChildren(doc.body, container, 0, options?.allowUrl);
 
   return container.innerHTML;
 }

package/src/jq79.ts

@@ -1,5 +1,6 @@
 
-import { $, $$, $create, sanitizeHTML } from "./dom"
+import { $, $$, $create, sanitizeHTML, allowedHosts } from "./dom"
+import type { AllowUrl } from "./dom"
 import { $reactive, untracked, createEffectScope } from "./reactive"
 import type { ReactiveDeepData, EffectScope } from "./reactive"
 import { transformSetupScript, transformFactoryScript, parsePropsPattern, parseFactoryProps, type PropDecl } from "./transform"
@@ -91,7 +92,7 @@ const interpolate = (template: string, scope: Record<string, any>): string =>
   template.replace(/{{\s*([\s\S]+?)\s*}}/g, (_, expr) => evalExpr(expr, scope) ?? "")
 
 
-const CONTROL_ATTRS = new Set([":attrs", ":if", ":elseif", ":else", ":each", ":key", ":with", ":text", ":html"])
+const CONTROL_ATTRS = new Set([":attrs", ":class", ":value", ":checked", ":selected", ":if", ":elseif", ":else", ":each", ":key", ":with", ":text", ":html", ":html.allowed"])
 // `item in items`, `item, i in items`, `(value, key) in props` - the second
 // binding is the array index or the object key, parens optional (Vue-style).
 // The list expression can span lines, so it matches [\s\S] rather than `.`
@@ -294,6 +295,40 @@ const createWithScope = (expr: string, scope: Record<string, any>): Record<strin
   })
 }
 
+// what :class accepts, flattened to single class tokens: a string of
+// space-separated names, an array (entries normalized recursively), or an
+// object whose truthy-valued keys are the names (a key may itself hold
+// several). Everything else - null, false, numbers - contributes nothing, so
+// `cond && 'active'` reads naturally. The object form reads each value, so a
+// store-backed flag is tracked per key
+const classNames = (value: any): string[] => {
+  if (typeof value === "string") return value.split(/\s+/).filter(Boolean)
+  if (Array.isArray(value)) return value.flatMap(classNames)
+  if (value !== null && typeof value === "object")
+    return Object.entries(value).flatMap(([name, on]) => (on ? classNames(name) : []))
+  return []
+}
+
+// what :html.allowed accepts, normalized to an AllowUrl predicate: host
+// patterns (a comma-separated string or an array - see allowedHosts in
+// ./dom) or a function (url: URL, tag, attr) => boolean. Anything else -
+// including a policy expression that evaluates to undefined - denies every
+// destination: the attribute declares the intent to restrict, so a broken
+// policy fails closed, and so does a predicate that throws
+const normalizeAllowUrl = (policy: any): AllowUrl => {
+  if (typeof policy === "function") {
+    return (url, tag, attr) => {
+      try {
+        return !!policy(url, tag, attr)
+      } catch {
+        return false
+      }
+    }
+  }
+  if (typeof policy === "string" || Array.isArray(policy)) return allowedHosts(policy)
+  return () => false
+}
+
 // renders a single element node: static attrs, @event listeners, a reactive
 // :attrs object, and its content - :text/:html override the element's own
 // children with a reactive textContent/innerHTML, otherwise children render
@@ -353,20 +388,71 @@ const renderNode = (node: TemplateNode, outerScope: Record<string, any>, fx: Eff
     })
   }
 
+  // :class="expr" adds classes on top of the static `class` attribute. Only
+  // classes this binding added are ever removed: the static list survives
+  // every re-run, even when the expression names one of its classes and then
+  // drops it (class="btn" :class="{ btn: cond }" keeps btn on false)
+  const classExpr = node.attrs[":class"]
+  if (classExpr !== undefined) {
+    const staticClasses = new Set(classNames(node.attrs.class ?? ""))
+    let bound: string[] = []
+
+    fx.effect(() => {
+      const next = classNames(evalExpr(classExpr, scope))
+      bound.forEach(name => {
+        if (!next.includes(name) && !staticClasses.has(name)) el.classList.remove(name)
+      })
+      el.classList.add(...next)
+      bound = next
+    })
+  }
+
   // :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
+  // ./dom). Both skip rendering the element's own children/interpolation.
+  // :html.allowed="expr" adds a destination policy for the content's
+  // href/src URLs - evaluated in the same effect, so a policy held in the
+  // store is as reactive as the content itself
   const textExpr = node.attrs[":text"]
   const htmlExpr = node.attrs[":html"]
+  const allowedExpr = node.attrs[":html.allowed"]
+  if (allowedExpr !== undefined && htmlExpr === undefined) {
+    console.warn("jq79: :html.allowed without :html on the same element does nothing")
+  }
   if (textExpr !== undefined) {
     fx.effect(() => { el.textContent = String(evalExpr(textExpr, scope) ?? "") })
   } else if (htmlExpr !== undefined) {
-    fx.effect(() => { el.innerHTML = sanitizeHTML(String(evalExpr(htmlExpr, scope) ?? "")) })
+    fx.effect(() => {
+      const options = allowedExpr !== undefined ? { allowUrl: normalizeAllowUrl(evalExpr(allowedExpr, scope)) } : undefined
+      el.innerHTML = sanitizeHTML(String(evalExpr(htmlExpr, scope) ?? ""), options)
+    })
   } else {
     el.appendChild(renderNodes(node.children, scope, fx, shadow))
   }
 
+  // :value / :checked / :selected write the DOM *property*, not the
+  // attribute - the attribute is only a form control's default, and detaches
+  // the moment the user interacts (which is why :attrs="{ value }" stops
+  // driving a typed-in input). One-way, store -> DOM: the way back stays an
+  // explicit @input/@change. :value skips the write when the property
+  // already holds the string, so an unrelated re-run can't move the caret of
+  // the input the user is typing into. Registered after the children render:
+  // :value on a <select> can only pick an <option> that already exists
+  const valueExpr = node.attrs[":value"]
+  if (valueExpr !== undefined) {
+    fx.effect(() => {
+      const value = String(evalExpr(valueExpr, scope) ?? "")
+      if ((el as HTMLInputElement).value !== value) (el as HTMLInputElement).value = value
+    })
+  }
+  ;([":checked", ":selected"] as const).forEach(attr => {
+    const expr = node.attrs[attr]
+    if (expr === undefined) return
+    const prop = attr.slice(1) as "checked" | "selected"
+    fx.effect(() => { (el as any)[prop] = !!evalExpr(expr, scope) })
+  })
+
   return el
 }
 

package/src/transform.ts

@@ -22,7 +22,9 @@
 
 type SetupTransform = { vars: string[]; code: string }
 
-const DECLARATION_RE = /(?:let|var|const)\s+([A-Za-z_$][\w$]*)/y
+// a declaration whose target is an identifier (`let x`), an object pattern
+// (`let { a }`, space optional) or an array pattern (`let [x]`)
+const DECLARATION_START_RE = /(?:let|var|const)(?:\s+(?=[A-Za-z_$])|\s*(?=[{[]))/y
 const REACTIVE_LABEL_RE = /\$:\s*/y
 const IMPORT_CALL_RE = /import(?=\s*\()/y
 const REACTIVE_ASSIGN_RE = /\$:\s*([A-Za-z_$][\w$]*)\s*=(?!=)/y
@@ -139,6 +141,28 @@ const skipRegex = (src: string, start: number): number => {
 // inserts the semicolon before them
 const CONTINUATION_RE = /^(\?\.|\?\?|&&|\|\||\*\*|[.,+\-*/%&|^<>=?:([])/
 
+// the last meaningful character before `at`: walks back past whitespace and
+// block comments, the way regexAllowed does. A line comment can't be skipped
+// from behind (its start is only findable forwards), so a line ending in one
+// reports the comment's text instead - callers treat that as "not the char I
+// was looking for", which degrades to ending the statement, exactly as
+// before this helper existed
+const lastMeaningfulBefore = (src: string, at: number): string => {
+  let i = at - 1
+  while (i >= 0) {
+    const ch = src[i]
+    if (/\s/.test(ch)) { i--; continue }
+    if (ch === "/" && src[i - 1] === "*") {
+      const open = src.lastIndexOf("/*", i - 2)
+      if (open === -1) return ""
+      i = open - 1
+      continue
+    }
+    return ch
+  }
+  return ""
+}
+
 // end of a statement starting at `start`: the first `;` or line break that
 // isn't inside a string/comment or unbalanced brackets. A line break only
 // ends the statement if the next line can't continue it, so leading-dot
@@ -147,6 +171,11 @@ const CONTINUATION_RE = /^(\?\.|\?\?|&&|\|\||\*\*|[.,+\-*/%&|^<>=?:([])/
 //   $: total = items
 //     .filter(item => item.active)      <- still the same statement
 //     .length
+//
+// ...and only if the current line *can* end it: a line whose last meaningful
+// character is `,` or `=` left its expression incomplete (a multi-line
+// declarator list writes exactly this), so the statement continues - the
+// same ASI call as the leading-token check, made from the other side
 const findStatementEnd = (src: string, start: number): number => {
   let depth = 0
   let i = start
@@ -161,7 +190,10 @@ const findStatementEnd = (src: string, start: number): number => {
     else if (depth <= 0 && ch === ";") return i
     else if (depth <= 0 && ch === "\n") {
       const next = skipToToken(src, i + 1)
-      if (next >= src.length || !CONTINUATION_RE.test(src.slice(next, next + 2))) return i
+      const continues =
+        next < src.length &&
+        (CONTINUATION_RE.test(src.slice(next, next + 2)) || [",", "="].includes(lastMeaningfulBefore(src, i)))
+      if (!continues) return i
       i = next
       continue
     }
@@ -170,6 +202,108 @@ const findStatementEnd = (src: string, start: number): number => {
   return src.length
 }
 
+// ---------------------------------------------------------------------------
+// top-level declarations. `let x = 1` loses its keyword and becomes a scope
+// assignment (x pre-declared on the store). A destructuring declarator
+// becomes an *assignment pattern*: inside `with`, `({ a, b } = obj)` writes
+// every binding through the reactive proxy - which is what makes it reactive.
+// The parens keep the `{` from opening a block, and a leading `;` keeps the
+// `(` from gluing onto the previous line as a call. Multi-declarator
+// statements (`let a = 1, b = 2`) register every binding, not just the first.
+// These lean on the pattern helpers defined with the props signature below
+// (splitTopLevel, indexOfTopLevel, defaultAssignIndex); the scanner only
+// runs long after the module evaluates, so the order is cosmetic
+// ---------------------------------------------------------------------------
+
+type Declarator = { raw: string; codeEnd: number }
+
+// splits a declarator list at top-level commas, keeping each segment's raw
+// text (layout and comments included) and where its last meaningful token
+// ends - the spot a closing paren must go, so a trailing comment can't
+// swallow it
+const splitDeclarators = (src: string): Declarator[] => {
+  const parts: Declarator[] = []
+  let depth = 0
+  let start = 0
+  let lastEnd = 0
+  const flush = (end: number) => {
+    parts.push({ raw: src.slice(start, end), codeEnd: Math.max(0, lastEnd - start) })
+    start = end + 1
+    lastEnd = start
+  }
+  let i = 0
+  while (i < src.length) {
+    const ch = src[i]
+    if (ch === "'" || ch === '"' || ch === "`") { i = skipString(src, i); lastEnd = i; continue }
+    if (ch === "/" && src[i + 1] === "/") { i = skipLineComment(src, i); continue }
+    if (ch === "/" && src[i + 1] === "*") { i = skipBlockComment(src, i); continue }
+    if (ch === "/" && regexAllowed(src, i)) { i = skipRegex(src, i); lastEnd = i; continue }
+    if ("([{".includes(ch)) depth++
+    else if (")]}".includes(ch)) depth--
+    else if (ch === "," && depth <= 0) { flush(i); i++; continue }
+    if (!/\s/.test(ch)) lastEnd = i + 1
+    i++
+  }
+  flush(src.length)
+  return parts
+}
+
+// the *binding* names a destructuring pattern declares - unlike
+// parsePropsPattern, which answers "which props" (the keys), this answers
+// "which variables": `{ a: x }` binds x, `{ a: { b } }` binds b,
+// `[x, ...rest]` binds x and rest. Defaults are stripped; what remains is a
+// nested pattern (recurse) or the bound identifier
+const patternBindings = (src: string): string[] => {
+  const pattern = src.trim()
+  if (!pattern.startsWith("{") && !pattern.startsWith("[")) {
+    return IDENTIFIER_RE.test(pattern) ? [pattern] : []
+  }
+  const names: string[] = []
+  for (let part of splitTopLevel(pattern.slice(1, patternCloseIndex(pattern)))) {
+    if (part.startsWith("...")) part = part.slice(3).trim()
+    const assign = defaultAssignIndex(part)
+    if (assign !== -1) part = part.slice(0, assign).trim()
+    if (pattern.startsWith("{")) {
+      const colon = indexOfTopLevel(part, ":")
+      if (colon !== -1) {
+        names.push(...patternBindings(part.slice(colon + 1)))
+        continue
+      }
+    }
+    names.push(...patternBindings(part))
+  }
+  return names
+}
+
+// one `let/var/const` declarator list, rewritten to scope assignments.
+// Each segment's initializer is re-scanned so an `import()` inside it is
+// rewritten like anywhere else - nothing else can match in there, since a
+// nested top-level declaration inside a declarator is a SyntaxError in JS
+const rewriteDeclarators = (src: string): SetupTransform => {
+  const vars: string[] = []
+  const rewritten = splitDeclarators(src).map(({ raw, codeEnd }) => {
+    const lead = raw.match(/^\s*/)![0]
+    if (codeEnd <= lead.length) return { text: raw, empty: true }
+    const body = raw.slice(lead.length, codeEnd)
+    const tail = raw.slice(codeEnd)
+    const assign = defaultAssignIndex(body)
+    const target = (assign === -1 ? body : body.slice(0, assign)).trim()
+    const isPattern = body[0] === "{" || body[0] === "["
+    if (isPattern) vars.push(...patternBindings(target))
+    else if (IDENTIFIER_RE.test(target)) vars.push(target)
+    const code = transformSetupScript(body).code
+    return { text: `${lead}${isPattern ? `(${code})` : code}${tail}`, empty: false }
+  })
+
+  // a trailing comment-only segment (`let a = 1, // note` cut at its line
+  // end) is re-attached without its comma, so the output stays a statement
+  const tail: string[] = []
+  while (rewritten.length && rewritten[rewritten.length - 1].empty) tail.unshift(rewritten.pop()!.text)
+  let code = rewritten.map(part => part.text).join(",") + tail.join("")
+  if (code.trimStart().startsWith("(")) code = `;${code}`
+  return { vars, code }
+}
+
 export const transformSetupScript = (src: string): SetupTransform => {
   const vars: string[] = []
   let out = ""
@@ -217,12 +351,15 @@ export const transformSetupScript = (src: string): SetupTransform => {
     }
 
     if (depth === 0 && atStatementStart) {
-      DECLARATION_RE.lastIndex = i
-      const decl = DECLARATION_RE.exec(src)
+      DECLARATION_START_RE.lastIndex = i
+      const decl = DECLARATION_START_RE.exec(src)
       if (decl) {
-        vars.push(decl[1])
-        out += decl[1]
-        i += decl[0].length
+        const start = i + decl[0].length
+        const end = findStatementEnd(src, start)
+        const { vars: names, code } = rewriteDeclarators(src.slice(start, end))
+        vars.push(...names)
+        out += code
+        i = end
         atStatementStart = false
         continue
       }
@@ -342,6 +479,24 @@ export type PropDecl = { name: string; default?: string }
 
 const IDENTIFIER_RE = /^[A-Za-z_$][\w$]*$/
 
+// index of the bracket that closes the one opening at src[0], skipping
+// strings, comments and regex literals; src.length when unbalanced
+const patternCloseIndex = (src: string): number => {
+  let depth = 0
+  let i = 0
+  while (i < src.length) {
+    const ch = src[i]
+    if (ch === "'" || ch === '"' || ch === "`") { i = skipString(src, i); continue }
+    if (ch === "/" && src[i + 1] === "/") { i = skipLineComment(src, i); continue }
+    if (ch === "/" && src[i + 1] === "*") { i = skipBlockComment(src, i); continue }
+    if (ch === "/" && regexAllowed(src, i)) { i = skipRegex(src, i); continue }
+    if ("([{".includes(ch)) depth++
+    else if (")]}".includes(ch) && --depth === 0) return i
+    i++
+  }
+  return src.length
+}
+
 // index of the first `ch` at bracket depth 0, skipping strings and comments
 const indexOfTopLevel = (src: string, ch: string): number => {
   let depth = 0
@@ -407,18 +562,7 @@ export const parsePropsPattern = (pattern: string | undefined): PropDecl[] | nul
 
   // to the `}` that closes the pattern, so a parameter's own default value
   // (`({ label } = {})`) is left out of it
-  let depth = 0
-  let close = 0
-  while (close < src.length) {
-    const ch = src[close]
-    if (ch === "'" || ch === '"' || ch === "`") { close = skipString(src, close); continue }
-    if (ch === "/" && src[close + 1] === "/") { close = skipLineComment(src, close); continue }
-    if (ch === "/" && src[close + 1] === "*") { close = skipBlockComment(src, close); continue }
-    if (ch === "/" && regexAllowed(src, close)) { close = skipRegex(src, close); continue }
-    if ("([{".includes(ch)) depth++
-    else if (")]}".includes(ch) && --depth === 0) break
-    close++
-  }
+  const close = patternCloseIndex(src)
   if (close >= src.length) return null // unbalanced: not a pattern we can read
 
   const props: PropDecl[] = []