jq79 0.5.3 → 0.5.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jq79",
-  "version": "0.5.3",
+  "version": "0.5.5",
   "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/jq79.ts

@@ -176,17 +176,47 @@ const reportExprError = (expr: string, scope: Record<string, any>, error: unknow
   scheduleExprReportFlush()
 }
 
-const evalExpr = (expr: string, scope: Record<string, any>, extras?: Record<string, any>): any => {
+const runExpr = (expr: string, scope: Record<string, any>, extras?: Record<string, any>): any => {
   const fn = compileExpr(expr, extras ? Object.keys(extras) : [])
-  if (!fn) return undefined
+  if (!fn) return undefined // a syntax error: compileExpr cached the failure, and it stays undefined
+  return fn(scope, ...(extras ? Object.values(extras) : []))
+}
+
+const evalExpr = (expr: string, scope: Record<string, any>, extras?: Record<string, any>): any => {
   try {
-    return fn(scope, ...(extras ? Object.values(extras) : []))
+    return runExpr(expr, scope, extras)
   } catch (error) {
     reportExprError(expr, scope, error)
     return undefined
   }
 }
 
+// the same evaluation for an @event attribute, which swallows far less. Every
+// word of the reason evalExpr catches is about rendering: an expression is
+// re-evaluated per effect run, per interpolation, per :each item, so a value
+// that is briefly undefined mid-render has to render empty rather than tear the
+// render down. A handler runs in an event listener - not in an effect, once,
+// when the user clicked - so there is no transient failure to absorb, only a
+// bug to report, and an exception belongs in the console with its stack. That
+// is what `@click="save"` has always done (the call happens outside the try,
+// on the returned function); this is what makes `@click="save()"` and
+// `@click="count++"` behave the same rather than the other way round.
+//
+// ReferenceError is the exception, for the reason it always is: it is not yet
+// decidable at throw time. A factory assigns its names to the store when it
+// returns, so a click while one is still in flight throws for a name that is
+// about to exist - reportExprError re-checks after the scripts settle and stays
+// quiet if it arrived, which throwing here would replace with a false alarm
+const evalHandler = (expr: string, scope: Record<string, any>, extras: Record<string, any>): any => {
+  try {
+    return runExpr(expr, scope, extras)
+  } catch (error) {
+    if (!(error instanceof ReferenceError)) throw error
+    reportExprError(expr, scope, error)
+    return undefined
+  }
+}
+
 // [\s\S] rather than `.` so an expression can span lines, like the ones in
 // directive attributes (which reach evalExpr wrapped in parens either way)
 const interpolate = (template: string, scope: Record<string, any>): string =>
@@ -225,7 +255,7 @@ const bindEvent = (el: Element, attr: string, expr: string, scope: Record<string
     if (mods.has("prevent")) event.preventDefault()
     if (mods.has("stop")) event.stopPropagation()
 
-    const handler = evalExpr(expr, scope, { $event: event })
+    const handler = evalHandler(expr, scope, { $event: event })
     if (typeof handler === "function") handler.call(el, event)
   }, { once: mods.has("once"), capture: mods.has("capture") })
 }
@@ -256,7 +286,7 @@ const wireTagEvent = (instance: Component79, attr: string, expr: string, scope:
     // and the creation effect's definition guard no-ops a spurious wake - but
     // "what a handler reads is nobody's dependency" shouldn't hinge on either
     untracked(() => {
-      const handler = evalExpr(expr, scope, { $event: event })
+      const handler = evalHandler(expr, scope, { $event: event })
       if (typeof handler === "function") handler(event)
     })
   }
@@ -1688,31 +1718,33 @@ const importResource = (url: string): Promise<any> =>
 // fetch() against the document; a component in a subdirectory gets a 404 from
 // the first and the page's directory from the second.
 //
-// Only `./` and `../` are resolved. A bare specifier ("lodash") belongs to the
-// import map or the native resolver, and resolving it would quietly turn it
-// into a path; anything already absolute means one thing under any base. That
-// keeps this the browser's rule rather than a third one of our own.
+// What comes back is always a fully absolute URL, and that is the load-bearing
+// part rather than a detail of formatting. A *path* would be resolved by that
+// same native import() against the library module's ORIGIN - and the library
+// is the one file on the page most likely to come from somewhere else:
+//
+//   page   http://localhost:8024/craft/app.html
+//   jq79   https://jgermade.github.io/jq79/jq79.js
+//   "/craft/services/x.js"  ->  https://jgermade.github.io/craft/services/x.js
+//
+// which is a CORS error naming a host the app never mentioned. Only an
+// absolute URL means the same thing to both branches.
+//
+// For the same reason a *root-absolute* specifier is resolved too, not passed
+// through: `/x.js` means the page's root to whoever wrote it, and the page is
+// the only base under which the two branches agree. Bare specifiers ("lodash")
+// are the exception that stays untouched - they belong to the import map or
+// the bundler, and resolving one would quietly turn it into a path.
 //
 // The base is absolutized first, the way hotKey does and for the same reason:
 // the filename may itself be relative ("./card.html", from an import() in a
-// parent), and a relative URL cannot be a base.
-//
-// What comes back is a path whenever it lands on the page's own origin, and a
-// full URL only when it doesn't (a component served from a CDN resolves its
-// siblings on that CDN). Both are the same request, but the path keeps the
-// value the shape everything downstream already sees - what hotKey keys on,
-// what devtools shows as the script's name - so only the cross-origin case,
-// which has no path form, introduces a new one
+// parent), and a relative URL cannot be a base
+const RESOLVABLE_SPECIFIER_RE = /^(?:\.\.?\/|\/|[a-z][a-z0-9+.-]*:)/i
+
 const resolveSpecifier = (spec: string, filename: string | undefined): string => {
-  if (!/^\.\.?\//.test(spec)) return spec
+  if (!RESOLVABLE_SPECIFIER_RE.test(spec)) return spec
   try {
-    const page = new URL(document.baseURI)
-    const url = new URL(spec, new URL(filename ?? "", page))
-    // "null" is what an opaque origin (file:, blob:) reports, for both sides
-    // and for anything else - it says the origins are unknown, not equal
-    return url.origin !== "null" && url.origin === page.origin
-      ? `${url.pathname}${url.search}${url.hash}`
-      : url.href
+    return new URL(spec, new URL(filename ?? "", document.baseURI)).href
   } catch {
     return spec
   }
@@ -1837,7 +1869,35 @@ const declareProps = (store: Record<string, any>, props: PropDecl[] | null) => {
 const setupSignature = (script: TagBlock): PropDecl[] | null => {
   const pattern = script.attrs[":setup"]
   if (pattern === undefined) return null
-  return pattern.trim() === "" ? [] : parsePropsPattern(pattern)
+  if (pattern.trim() === "") return []
+  const props = parsePropsPattern(pattern)
+  if (!props) warnUnreadableSignature(script, pattern)
+  return props
+}
+
+// script blocks already warned about, keyed by the block itself - parsed once
+// and shared by every instance of a definition, the same reason warnUndeclared
+// keys on the template node. It matters for a smaller reason here too:
+// setupSignature is called three times per render (both declared-name passes
+// and the script loop's declareProps), so even one mount would say it thrice
+const signatureWarned = new WeakSet<TagBlock>()
+
+// a value that isn't a props pattern reads as "declared no signature", which is
+// the most permissive mode there is - so a typo doesn't fail, it quietly opts
+// the component out of the contract it was trying to write. That is now the
+// only accidental route left to permissive: a bare :setup is closed and `_` is
+// the opt-out you have to ask for, so the mode nothing lands in by accident is
+// still reachable by getting it wrong. Both of parsePropsPattern's nulls count
+// - not-an-object (",{ a }", "props") and unbalanced ("{ a, b") - and only `_`
+// is exempt, because intent is the sole thing separating it from the typos
+const warnUnreadableSignature = (script: TagBlock, pattern: string) => {
+  if (pattern.trim() === "_" || signatureWarned.has(script)) return
+  signatureWarned.add(script)
+  console.warn(
+    `jq79: :setup="${pattern}" is not a props pattern, so this component declares no ` +
+    `signature and takes whatever a parent passes - write the props it takes ` +
+    `("{ a, b }"), a bare :setup for none, or "_" to stay open on purpose`
+  )
 }
 
 // every prop name a component's scripts declare, across both script modes.