jq79 0.5.2 → 0.5.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jq79",
-  "version": "0.5.2",
+  "version": "0.5.4",
   "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

@@ -1681,6 +1681,45 @@ const componentPartsFrom = (elements: Element[], hashSource: string): ComponentP
 const importResource = (url: string): Promise<any> =>
   /\.html?([?#]|$)/.test(url) ? fetchComponent(url) : import(url)
 
+// a relative specifier means "next to the file that wrote it", so it is
+// resolved against the component's own URL before importResource sees it -
+// neither of that function's two branches would otherwise land there. The
+// native import() inside it resolves against *this module* (dist/jq79.js), and
+// fetch() against the document; a component in a subdirectory gets a 404 from
+// the first and the page's directory from the second.
+//
+// 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
+const RESOLVABLE_SPECIFIER_RE = /^(?:\.\.?\/|\/|[a-z][a-z0-9+.-]*:)/i
+
+const resolveSpecifier = (spec: string, filename: string | undefined): string => {
+  if (!RESOLVABLE_SPECIFIER_RE.test(spec)) return spec
+  try {
+    return new URL(spec, new URL(filename ?? "", document.baseURI)).href
+  } catch {
+    return spec
+  }
+}
+
 // ---------------------------------------------------------------------------
 // naming scripts for devtools
 //
@@ -2353,10 +2392,15 @@ export class Component79 {
 
     // import() calls whose specifier was pre-resolved by a bundler (the
     // modules map) get the bundled module; everything else falls back to the
-    // runtime importResource (fetch for .html, native import otherwise)
+    // runtime importResource (fetch for .html, native import otherwise),
+    // relative to this component's file. The map is keyed by the literal
+    // specifier the script wrote, so it is consulted *before* resolution -
+    // what the bundler hoisted and what the source says are the same string
     const modules = this.modules
     const $import = (url: string): Promise<any> =>
-      modules && url in modules ? Promise.resolve(modules[url]) : importResource(url)
+      modules && url in modules
+        ? Promise.resolve(modules[url])
+        : importResource(resolveSpecifier(url, this.filename))
 
     // the writeback half of :model, from the child's side: one argument is the
     // value for the default model (the bare :model), two are a name and a