jq79 0.2.0 → 0.3.0

package/src/reactive.ts

@@ -0,0 +1,187 @@
+// the reactive store ($reactive): proxy-based deep reactivity with
+// dot-path dependency tracking, plus the effect-scope helper the renderer
+// uses to tear down a subtree's bindings in one call
+
+type ChangeListener = (value: any, dotKey: string) => void
+type AnyChangeListener = (dotKey: string, value: any) => void
+type ListenerOptions = { immediate?: boolean }
+type Unsubscribe = () => void
+
+export type ReactiveDeepData<T> = T & {
+  $on: (dotKey: string, listener: ChangeListener, options?: ListenerOptions) => Unsubscribe
+  $onAny: (listener: AnyChangeListener, options?: ListenerOptions) => Unsubscribe
+  // runs `run` immediately, recording every dotKey it reads off this store, then
+  // re-runs it whenever a changed dotKey overlaps one of those - see pathsOverlap
+  $effect: (run: () => void) => Unsubscribe
+}
+
+const getByPath = (obj: Record<string, any>, dotKey: string): any =>
+  dotKey.split(".").reduce((acc, key) => (acc == null ? undefined : acc[key]), obj)
+
+// only plain objects and arrays get deep-wrapped by the reactive store;
+// class instances (Component79, Date, DOM nodes, ...) pass through untouched
+// so their identity, prototypes and internals stay intact
+const isPlainData = (value: object): boolean => {
+  if (Array.isArray(value)) return true
+  const proto = Object.getPrototypeOf(value)
+  return proto === Object.prototype || proto === null
+}
+
+const walkLeaves = (obj: Record<string, any>, path: string, visit: (dotKey: string, value: any) => void) => {
+  Object.entries(obj).forEach(([key, value]) => {
+    const dotKey = path ? `${path}.${key}` : key
+    if (value && typeof value === "object" && isPlainData(value)) walkLeaves(value, dotKey, visit)
+    else visit(dotKey, value)
+  })
+}
+
+// true when `a` and `b` sit on the same ancestor/descendant line, e.g.
+// "user" & "user.address.city" (a change to either affects the other) - false
+// for siblings like "user.name" & "user.age"
+const pathsOverlap = (a: string, b: string): boolean =>
+  a === b || a.startsWith(`${b}.`) || b.startsWith(`${a}.`)
+
+// active $effect() runs, innermost last - a module-level stack (rather than
+// one per store) so nested effects across stores still nest correctly; reads
+// during makeReactive's `get` trap are attributed to whichever run is on top
+const trackerStack: Set<string>[] = []
+
+// runs fn with dependency tracking suspended - reads inside it are attributed
+// to a throwaway set instead of the currently running effect
+export const untracked = <T>(fn: () => T): T => {
+  trackerStack.push(new Set())
+  try {
+    return fn()
+  } finally {
+    trackerStack.pop()
+  }
+}
+
+type Effect = { deps: Set<string>; run: () => void }
+
+export const $reactive = <T extends Record<string, any>>(data: T): ReactiveDeepData<T> => {
+  const exactListeners = new Map<string, Set<ChangeListener>>()
+  const anyListeners = new Set<AnyChangeListener>()
+  const effects = new Set<Effect>()
+  // every proxy this store has ever handed out, so re-assigning an object
+  // that's already reactive (e.g. `data.list = [data.list[1], data.list[0]]`)
+  // doesn't wrap it a second time - which would hand out a *new* object
+  // identity for the same logical item, breaking reference-equality checks
+  // like :each's keyed diffing
+  const reactiveProxies = new WeakSet<object>()
+
+  const notify = (dotKey: string, value: any, isNewKey = false) => {
+    exactListeners.get(dotKey)?.forEach(listener => listener(value, dotKey))
+    anyListeners.forEach(listener => listener(dotKey, value))
+    effects.forEach(effect => {
+      // a newly-created key re-runs every effect: an effect that read the
+      // name while it didn't exist couldn't track it (`with` skipped the
+      // store entirely), so dep matching would never wake it up
+      if (isNewKey || Array.from(effect.deps).some(dep => pathsOverlap(dep, dotKey))) effect.run()
+    })
+  }
+
+  const makeReactive = (obj: Record<string, any>, path: string): Record<string, any> => {
+    if (reactiveProxies.has(obj)) return obj
+
+    Object.entries(obj).forEach(([key, value]) => {
+      if (value && typeof value === "object" && isPlainData(value)) {
+        obj[key] = makeReactive(value, path ? `${path}.${key}` : key)
+      }
+    })
+
+    const proxy = new Proxy(obj, {
+      get(target, key, receiver) {
+        if (typeof key === "string") {
+          trackerStack[trackerStack.length - 1]?.add(path ? `${path}.${key}` : key)
+        }
+        return Reflect.get(target, key, receiver)
+      },
+      set(target, key: string, value, receiver) {
+        // an assignment delegated up the prototype chain from a derived scope
+        // (Object.create(store) child, or a wrapping proxy): if the key isn't
+        // a real property of this store, honor the receiver so the new binding
+        // lands on the derived scope - a scope-local variable, not a store
+        // mutation, so no notify. If the key IS a store property, fall through
+        // and mutate the store itself regardless of receiver, so assignments
+        // like @click="count = count + 1" work from any nested scope
+        if (receiver !== proxy && !Object.prototype.hasOwnProperty.call(target, key)) {
+          return Reflect.set(target, key, value, receiver)
+        }
+
+        const dotKey = path ? `${path}.${key}` : key
+        if (value && typeof value === "object" && isPlainData(value)) {
+          value = makeReactive(value, dotKey)
+        }
+        const isNewKey = !Object.prototype.hasOwnProperty.call(target, key)
+        target[key] = value
+        notify(dotKey, value, isNewKey)
+        return true
+      }
+    })
+
+    reactiveProxies.add(proxy)
+    return proxy
+  }
+
+  const reactive = makeReactive(data, "") as ReactiveDeepData<T>
+
+  const $on = (dotKey: string, listener: ChangeListener, { immediate = false }: ListenerOptions = {}): Unsubscribe => {
+    if (!exactListeners.has(dotKey)) exactListeners.set(dotKey, new Set())
+    exactListeners.get(dotKey)!.add(listener)
+    if (immediate) listener(getByPath(reactive, dotKey), dotKey)
+    return () => exactListeners.get(dotKey)?.delete(listener)
+  }
+
+  const $onAny = (listener: AnyChangeListener, { immediate = false }: ListenerOptions = {}): Unsubscribe => {
+    anyListeners.add(listener)
+    if (immediate) walkLeaves(reactive, "", (dotKey, value) => listener(dotKey, value))
+    return () => anyListeners.delete(listener)
+  }
+
+  const $effect = (run: () => void): Unsubscribe => {
+    const effect: Effect = {
+      deps: new Set(),
+      run: () => {
+        const deps = new Set<string>()
+        trackerStack.push(deps)
+        try {
+          run()
+        } finally {
+          trackerStack.pop()
+          effect.deps = deps
+        }
+      },
+    }
+    effects.add(effect)
+    effect.run()
+    return () => { effects.delete(effect) }
+  }
+
+  Object.defineProperty(reactive, "$on", { value: $on, enumerable: false })
+  Object.defineProperty(reactive, "$onAny", { value: $onAny, enumerable: false })
+  Object.defineProperty(reactive, "$effect", { value: $effect, enumerable: false })
+
+  return reactive
+}
+// groups the disposers of every $effect created for one rendered subtree
+// (an :if branch, an :each item, ...) so the whole subtree's bindings can be
+// torn down in one call when that subtree is replaced/removed. `scope.$effect`
+// resolves through the prototype chain up to the root store no matter how
+// many nested :each scopes sit in between (see renderEach's itemScope)
+export type EffectScope = {
+  effect: (run: () => void) => void
+  // registers an arbitrary cleanup (e.g. destroying a nested component) to
+  // run when this subtree is torn down
+  onDispose: (fn: Unsubscribe) => void
+  dispose: () => void
+}
+
+export const createEffectScope = (scope: Record<string, any>): EffectScope => {
+  const disposers: Unsubscribe[] = []
+  return {
+    effect: run => { disposers.push(scope.$effect(run)) },
+    onDispose: fn => { disposers.push(fn) },
+    dispose: () => { disposers.splice(0).forEach(dispose => dispose()) },
+  }
+}

package/src/transform.ts

@@ -0,0 +1,282 @@
+// ---------------------------------------------------------------------------
+// :setup script transform
+//
+// setup scripts are written like Svelte components:
+//
+//   let firstName = null
+//   $: fullName = `${firstName} ${lastName}`
+//   fetchUser().then(user => { firstName = user.firstName })
+//
+// and are executed inside `with ($scope)` against the component's reactive
+// store, so plain assignments (even from async callbacks) go through the
+// proxy's set trap and re-render whatever depends on them. To make that work
+// the source is lightly rewritten - no full JS parser, just a scanner that is
+// string/comment-aware and only touches code at brace/paren depth 0:
+// - `let/var/const x = ...` at the top level loses its keyword, becoming a
+//   scope assignment (the name is pre-declared on the store so the `with`
+//   lookup resolves it)
+// - `$: x = expr` becomes `$__effect(() => { x = expr })`, re-running when a
+//   dependency read inside expr changes ($__effect is deliberately NOT a
+//   property of the scope, so `with` falls through to the function parameter)
+// ---------------------------------------------------------------------------
+
+type SetupTransform = { vars: string[]; code: string }
+
+const DECLARATION_RE = /(?:let|var|const)\s+([A-Za-z_$][\w$]*)/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
+
+const skipString = (src: string, start: number): number => {
+  const quote = src[start]
+  let i = start + 1
+  while (i < src.length) {
+    if (src[i] === "\\") { i += 2; continue }
+    if (src[i] === quote) return i + 1
+    i++
+  }
+  return src.length
+}
+
+const skipLineComment = (src: string, start: number): number => {
+  const end = src.indexOf("\n", start)
+  return end === -1 ? src.length : end
+}
+
+const skipBlockComment = (src: string, start: number): number => {
+  const end = src.indexOf("*/", start + 2)
+  return end === -1 ? src.length : end + 2
+}
+
+// end of a statement starting at `start`: the first newline or `;` that isn't
+// inside a string/comment or unbalanced brackets, so multi-line RHS like a
+// wrapped function call or template literal stays in one piece
+const findStatementEnd = (src: string, start: number): number => {
+  let depth = 0
+  let i = start
+  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 ("([{".includes(ch)) depth++
+    else if (")]}".includes(ch)) depth--
+    else if (depth <= 0 && (ch === "\n" || ch === ";")) return i
+    i++
+  }
+  return src.length
+}
+
+export const transformSetupScript = (src: string): SetupTransform => {
+  const vars: string[] = []
+  let out = ""
+  let i = 0
+  let depth = 0
+  let atStatementStart = true
+
+  while (i < src.length) {
+    const ch = src[i]
+    const next = src[i + 1]
+
+    if (ch === "'" || ch === '"' || ch === "`") {
+      const end = skipString(src, i)
+      out += src.slice(i, end)
+      i = end
+      atStatementStart = false
+      continue
+    }
+    if (ch === "/" && (next === "/" || next === "*")) {
+      const end = next === "/" ? skipLineComment(src, i) : skipBlockComment(src, i)
+      out += src.slice(i, end)
+      i = end
+      continue
+    }
+
+    // `import(...)` is a keyword form, so it can't be intercepted through the
+    // scope - rewrite the identifier to the injected $__import (which loads
+    // .html URLs as components via Component79.fetch and delegates the rest to
+    // native import). The `(` is left for the scanner so depth stays balanced
+    if (ch === "i" && (i === 0 || !/[\w$.]/.test(src[i - 1]))) {
+      IMPORT_CALL_RE.lastIndex = i
+      if (IMPORT_CALL_RE.test(src)) {
+        out += "$__import"
+        i += "import".length
+        atStatementStart = false
+        continue
+      }
+    }
+
+    if (depth === 0 && atStatementStart) {
+      DECLARATION_RE.lastIndex = i
+      const decl = DECLARATION_RE.exec(src)
+      if (decl) {
+        vars.push(decl[1])
+        out += decl[1]
+        i += decl[0].length
+        atStatementStart = false
+        continue
+      }
+
+      REACTIVE_LABEL_RE.lastIndex = i
+      const label = REACTIVE_LABEL_RE.exec(src)
+      if (label) {
+        REACTIVE_ASSIGN_RE.lastIndex = i
+        const assign = REACTIVE_ASSIGN_RE.exec(src)
+        if (assign) vars.push(assign[1])
+        const start = i + label[0].length
+        const end = findStatementEnd(src, start)
+        out += `$__effect(() => { ${src.slice(start, end)} });`
+        i = end
+        continue
+      }
+    }
+
+    if ("([{".includes(ch)) depth++
+    else if (")]}".includes(ch)) depth = Math.max(0, depth - 1)
+
+    if (ch === "\n" || ch === ";" || ch === "}") atStatementStart = true
+    else if (!/\s/.test(ch)) atStatementStart = false
+
+    out += ch
+    i++
+  }
+
+  return { vars, code: out }
+}
+
+// ---------------------------------------------------------------------------
+// factory scripts - a <script> whose top level has `export default` runs as a
+// plain lexical module instead of a `with`-scoped setup script: no implicit
+// reactivity, no `$:` labels - standard JS that editors and type-checkers
+// understand. The default export is called with the instance context
+// ({ $data, $effect, $emit, $mounted, $self, $$self }) and a returned object
+// is merged into the reactive store for the template to use.
+// Detection is backwards-safe: `export default` is a SyntaxError inside a
+// setup script, so no previously-working component can change behavior.
+// The same scanner rewrites the module-only syntax into a Function body:
+// - `export default X`      -> `$__exports.default = X`
+// - `import d from "m"`     -> `const d = $__default(await $__import("m"))`
+//   (and the other static clause forms), so imports resolve through the same
+//   $__import as setup scripts: bundler map first, then fetch/native import
+// ---------------------------------------------------------------------------
+
+const EXPORT_DEFAULT_RE = /export\s+default(?![\w$])/y
+// clause (default/namespace/named, no quotes or parens) + specifier; the
+// no-clause alternative requires the specifier right away, so dynamic
+// `import(...)` and `import.meta` never match
+const STATIC_IMPORT_RE = /import\s*(?:([\w$\s,{}*]+?)\s*from\s*)?(["'])([^"'\n]+)\2/y
+
+// splits an import clause on top-level commas: `d, { a, b as c }` keeps the
+// braced group together
+const splitImportClause = (clause: string): string[] => {
+  const parts: string[] = []
+  let depth = 0
+  let start = 0
+  for (let i = 0; i <= clause.length; i++) {
+    const ch = clause[i]
+    if (ch === "{") depth++
+    else if (ch === "}") depth--
+    else if (i === clause.length || (ch === "," && depth === 0)) {
+      const part = clause.slice(start, i).trim()
+      if (part) parts.push(part)
+      start = i + 1
+    }
+  }
+  return parts
+}
+
+// one static import statement -> const bindings from the awaited module
+const staticImportToAwait = (clause: string | undefined, spec: string, n: number): string => {
+  const source = `await $__import(${JSON.stringify(spec)})`
+  if (clause === undefined) return source // side-effect import
+  const parts = splitImportClause(clause)
+  const bindings: string[] = []
+  let ref = source
+  if (parts.length > 1) {
+    const tmp = `$__mod${n}`
+    bindings.push(`${tmp} = ${source}`)
+    ref = tmp
+  }
+  for (const part of parts) {
+    if (part.startsWith("{")) bindings.push(`${part.replace(/\s+as\s+/g, ": ")} = ${ref}`)
+    else if (part.startsWith("*")) bindings.push(`${part.replace(/^\*\s*as\s+/, "")} = ${ref}`)
+    else bindings.push(`${part} = $__default(${ref})`)
+  }
+  return `const ${bindings.join(", ")}`
+}
+
+// rewrites a factory script into a Function body, or returns null when the
+// script has no top-level `export default` (i.e. it's a regular setup script)
+export const transformFactoryScript = (src: string): string | null => {
+  let out = ""
+  let i = 0
+  let depth = 0
+  let atStatementStart = true
+  let isFactory = false
+  let modCount = 0
+
+  while (i < src.length) {
+    const ch = src[i]
+    const next = src[i + 1]
+    const atWordBoundary = i === 0 || !/[\w$.]/.test(src[i - 1])
+
+    if (ch === "'" || ch === '"' || ch === "`") {
+      const end = skipString(src, i)
+      out += src.slice(i, end)
+      i = end
+      atStatementStart = false
+      continue
+    }
+    if (ch === "/" && (next === "/" || next === "*")) {
+      const end = next === "/" ? skipLineComment(src, i) : skipBlockComment(src, i)
+      out += src.slice(i, end)
+      i = end
+      continue
+    }
+
+    if (ch === "i" && atWordBoundary) {
+      // dynamic import() -> $__import, same rewrite as setup scripts
+      IMPORT_CALL_RE.lastIndex = i
+      if (IMPORT_CALL_RE.test(src)) {
+        out += "$__import"
+        i += "import".length
+        atStatementStart = false
+        continue
+      }
+      if (depth === 0 && atStatementStart) {
+        STATIC_IMPORT_RE.lastIndex = i
+        const staticImport = STATIC_IMPORT_RE.exec(src)
+        if (staticImport) {
+          out += staticImportToAwait(staticImport[1], staticImport[3], modCount++)
+          i += staticImport[0].length
+          atStatementStart = false
+          continue
+        }
+      }
+    }
+
+    if (ch === "e" && atWordBoundary && depth === 0 && atStatementStart) {
+      EXPORT_DEFAULT_RE.lastIndex = i
+      const exportDefault = EXPORT_DEFAULT_RE.exec(src)
+      if (exportDefault) {
+        isFactory = true
+        out += "$__exports.default ="
+        i += exportDefault[0].length
+        atStatementStart = false
+        continue
+      }
+    }
+
+    if ("([{".includes(ch)) depth++
+    else if (")]}".includes(ch)) depth = Math.max(0, depth - 1)
+
+    if (ch === "\n" || ch === ";" || ch === "}") atStatementStart = true
+    else if (!/\s/.test(ch)) atStatementStart = false
+
+    out += ch
+    i++
+  }
+
+  return isFactory ? out : null
+}
+

package/src/vite.ts

@@ -0,0 +1,154 @@
+import { readFile } from "node:fs/promises"
+import type { Plugin } from "vite"
+
+// Vite plugin: import .html single-file components as modules.
+//
+//   import { jq79 } from "jq79/vite"          // vite.config
+//   import UserCard from "./UserCard.html"    // app code
+//
+// The imported value is a Component79 built from the file's source - the same
+// thing `await Component79.fetch(url)` resolves to, but bundled at build time
+// instead of fetched at runtime. The plugin is a pure loader: the component
+// source is inlined verbatim (no transforms), so a file keeps working
+// unchanged if it's ever served from public/ and loaded with fetch instead.
+//
+// Only .html files imported from other modules are claimed; entry points
+// (index.html) have no importer and imports carrying an explicit query
+// (?raw, ?url) keep their built-in Vite meaning.
+
+export interface Jq79PluginOptions {
+  // which import specifiers are treated as components (default: any .html)
+  include?: RegExp
+  // resolved absolute paths to skip even when `include` matches
+  exclude?: RegExp
+}
+
+// claimed modules get this suffix so their id no longer ends in ".html" and
+// Vite's own html handling (entries, asset pipeline) leaves them alone
+const COMPONENT_QUERY = "?jq79"
+
+const SCRIPT_BLOCK_RE = /<script\b[^>]*>([\s\S]*?)<\/script\s*>/gi
+// import("...") with a literal specifier; the lookbehind skips $__import and
+// property accesses like foo.import(...)
+const IMPORT_LITERAL_RE = /(?<![\w$.])import\s*\(\s*(["'])([^"'\n]+?)\1\s*\)/g
+// static import statements (factory scripts): optional clause + literal
+// specifier. The clause can't contain parens/quotes, so dynamic import()
+// and import.meta never match
+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
+// `import("...")` calls and static factory-script imports - that should
+// resolve from the bundle instead of at runtime. Absolute paths and full
+// URLs are left alone (they point at served files, e.g. public/), and so
+// are .html specifiers the plugin wouldn't claim as components
+const hoistableImports = (source: string, include: RegExp): string[] => {
+  const specifiers = new Set<string>()
+  for (const [, script] of source.matchAll(SCRIPT_BLOCK_RE)) {
+    const specs = [
+      ...[...script.matchAll(IMPORT_LITERAL_RE)].map(match => match[2]),
+      ...[...script.matchAll(STATIC_IMPORT_LITERAL_RE)].map(match => match[2]),
+    ]
+    for (const spec of specs) {
+      if (isExternalUrl(spec)) continue
+      if (isHtmlUrl(spec) && !include.test(spec)) continue // html left to runtime fetch
+      specifiers.add(spec) // a claimed component, a source file or an npm package
+    }
+  }
+  return [...specifiers]
+}
+
+// the emitted module. Literal import("...") specifiers found in the
+// component's scripts become real module imports, handed to Component79 as a
+// resolution map: at runtime $__import checks the map before falling back to
+// fetch, so bundled components ship with their imports and nothing changes
+// for unbundled ones. Claimed components import as their default (a
+// Component79, matching what runtime fetch resolves to); everything else as
+// a namespace (matching native import()).
+//
+// In dev, `hot.data` carries the exported instance across updates: importers
+// hold a reference to the *first* module evaluation's instance, so later
+// evaluations patch that same instance in place (the parsed parts are public
+// fields) instead of exporting a new one nobody sees. A live instance is
+// re-rendered where it stands, seeded with a snapshot of its current store;
+// an instance only used as a definition (nested component clones can't be
+// reached from here) falls back to a full reload. `mountRoot` is internal to
+// Component79, but plugin and runtime ship in lockstep from the same package.
+const componentModule = (source: string, include: RegExp): string => {
+  const hoisted = hoistableImports(source, include)
+  const imports = hoisted
+    .map((spec, i) =>
+      include.test(spec)
+        ? `import __jq79_${i} from ${JSON.stringify(spec)}`
+        : `import * as __jq79_${i} from ${JSON.stringify(spec)}`
+    )
+    .join("\n")
+  const modulesMap = `{ ${hoisted.map((spec, i) => `${JSON.stringify(spec)}: __jq79_${i}`).join(", ")} }`
+
+  return `
+import { Component79 } from "jq79"
+${imports}
+
+const src = ${JSON.stringify(source)}
+const modules = ${modulesMap}
+
+let component
+
+if (import.meta.hot && import.meta.hot.data.component) {
+  const prior = import.meta.hot.data.component
+  const next = new Component79(src)
+  prior.template = next.template
+  prior.scripts = next.scripts
+  prior.styles = next.styles
+  prior.modules = modules
+  const root = prior.mountRoot
+  if (root) {
+    prior.mount(root, { ...prior.data })
+  } else if (!prior.data) {
+    import.meta.hot.invalidate()
+  }
+  component = prior
+} else {
+  component = new Component79(src, { modules })
+}
+
+if (import.meta.hot) {
+  import.meta.hot.data.component = component
+  import.meta.hot.accept()
+}
+
+export default component
+`
+}
+
+export function jq79(options: Jq79PluginOptions = {}): Plugin {
+  const include = options.include ?? /\.html$/
+  const { exclude } = options
+
+  return {
+    name: "jq79",
+    enforce: "pre",
+
+    async resolveId(source, importer) {
+      if (!importer) return null // entry points are never components
+      if (source.includes("?")) return null // ?raw, ?url, ... keep their meaning
+      if (!include.test(source)) return null
+
+      const resolved = await this.resolve(source, importer, { skipSelf: true })
+      if (!resolved || resolved.external) return null
+      if (exclude?.test(resolved.id)) return null
+      return resolved.id + COMPONENT_QUERY
+    },
+
+    async load(id) {
+      if (!id.endsWith(COMPONENT_QUERY)) return null
+      const file = id.slice(0, -COMPONENT_QUERY.length)
+      return { code: componentModule(await readFile(file, "utf8"), include), map: null }
+    },
+  }
+}
+
+export default jq79