jq79 0.2.0 → 0.3.0

package/src/jq79.ts

@@ -1,35 +1,11 @@
 
-export const $ = (selectorOrEl: string | Element, selector?: string) => 
-  typeof selectorOrEl === "string"
-    ? document.querySelector(selectorOrEl)
-    : selectorOrEl.querySelector(selector || "")
-
-export const $$ = (selectorOrEl: string | Element, selector?: string) => 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.
-export const $create = (tag: string, attrs: Record<string, any> = {}): HTMLElement => {
-  const el = document.createElement(tag);
-  for (const [name, value] of Object.entries(attrs)) {
-    if (name === 'className') {
-      el.className = Array.isArray(value) ? value.join(' ') : value;
-    } else if (name === 'textContent') {
-      el.textContent = value;
-    } else if (name === 'children') {
-      for (const child of value) {
-        el.appendChild(child);
-      }
-    } else {
-      el.setAttribute(name, value);
-    }
-  }
-  return el;
-};
+import { $, $$, $create } from "./dom"
+import { $reactive, untracked, createEffectScope } from "./reactive"
+import type { ReactiveDeepData, EffectScope } from "./reactive"
+import { transformSetupScript, transformFactoryScript } from "./transform"
 
+export { $, $$, $create } from "./dom"
+export { $reactive } from "./reactive"
 type TemplateNode = {
   tag: string
   attrs: Record<string, string>
@@ -79,191 +55,12 @@ const evalExpr = (expr: string, scope: Record<string, any>, extras?: Record<stri
 const interpolate = (template: string, scope: Record<string, any>): string =>
   template.replace(/{{\s*(.+?)\s*}}/g, (_, expr) => evalExpr(expr, scope) ?? "")
 
-type ChangeListener = (value: any, dotKey: string) => void
-type AnyChangeListener = (dotKey: string, value: any) => void
-type ListenerOptions = { immediate?: boolean }
-type Unsubscribe = () => void
-
-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
-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) => {
-    exactListeners.get(dotKey)?.forEach(listener => listener(value, dotKey))
-    anyListeners.forEach(listener => listener(dotKey, value))
-    effects.forEach(effect => {
-      if (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)
-        }
-        target[key] = value
-        notify(dotKey, value)
-        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
-}
 
 const CONTROL_ATTRS = new Set([":bind", ":if", ":elseif", ":else", ":each", ":key", ":with"])
 const EACH_PATTERN = /^\s*(\w+)\s+in\s+(.+)$/
 
 type ConditionalBranch = { expr?: string; node: TemplateNode }
 
-// 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)
-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
-}
-
-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()) },
-  }
-}
 
 // @event attributes: @click="onClick", @submit.prevent="$event => onSubmit($event)",
 // or an inline statement like @click="count = count + 1". The expression is
@@ -342,9 +139,9 @@ const renderNestedComponent = (key: string, node: TemplateNode, scope: Record<st
     currentDef = nextDef
     if (!nextDef) return
 
-    // a fresh instance per usage site: the definition's parsed parts are
-    // shared, but store/effects/DOM are per instance
-    const instance = new Component79({ template: nextDef.template, scripts: nextDef.scripts, styles: nextDef.styles })
+    // a fresh instance per usage site: the definition's parsed parts (and
+    // pre-resolved modules) are shared, but store/effects/DOM are per instance
+    const instance = new Component79({ template: nextDef.template, scripts: nextDef.scripts, styles: nextDef.styles, modules: nextDef.modules })
     const seed = untracked(() =>
       Object.fromEntries(Object.entries(props).map(([name, expr]) => [name, evalExpr(expr, scope)]))
     )
@@ -421,6 +218,22 @@ const renderNode = (node: TemplateNode, outerScope: Record<string, any>, fx: Eff
 
   const el = document.createElement(node.tag)
 
+  // a tag that isn't standard HTML but has no matching scope key *yet* may be
+  // a component that arrives later (e.g. an async factory script exposing an
+  // imported component after `await`). Watch for the key: the effect tracks
+  // no deps, so it only re-runs on the store's new-key sweep, and swaps the
+  // placeholder element for the component exactly once
+  if (el instanceof HTMLUnknownElement || node.tag.includes("-")) {
+    let upgraded = false
+    fx.effect(() => {
+      if (upgraded) return
+      const key = findComponentKey(scope, node.tag)
+      if (!key) return
+      upgraded = true
+      el.replaceWith(renderNestedComponent(key, node, scope, fx))
+    })
+  }
+
   Object.entries(node.attrs).forEach(([key, value]) => {
     if (key.startsWith("@")) bindEvent(el, key, value, scope)
     else if (!CONTROL_ATTRS.has(key)) el.setAttribute(key, value)
@@ -612,6 +425,10 @@ type ComponentParts = {
   template: TemplateNode[]
   scripts: TagBlock[]
   styles: TagBlock[]
+  // pre-resolved modules for `import(...)` calls in setup scripts, keyed by
+  // the literal specifier. Bundlers (the jq79/vite plugin) fill this so
+  // imports resolve from the bundle instead of being fetched at runtime
+  modules?: Record<string, any>
 }
 
 const VOID_ELEMENTS = new Set([
@@ -681,152 +498,6 @@ const parseComponentString = (component: string): ComponentParts => {
   return { template, scripts, styles }
 }
 
-// ---------------------------------------------------------------------------
-// :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
-}
-
-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 }
-}
-
 // loads .html URLs as components, delegating anything else to native import()
 const importResource = (url: string): Promise<any> =>
   /\.html?([?#]|$)/.test(url) ? Component79.fetch(url) : import(url)
@@ -872,7 +543,7 @@ const SETUP_HELPERS: Record<string, any> = { $, $$, $create, $reactive }
 // The body is wrapped in an async IIFE so top-level `await` works: everything
 // up to the first await runs synchronously (before the template renders), and
 // later assignments update the DOM reactively when they happen
-const runSetupScript = (code: string, scope: Record<string, any>, effect: (run: () => void) => void, instanceHelpers: Record<string, any> = {}) => {
+const runSetupScript = (code: string, scope: Record<string, any>, effect: (run: () => void) => void, instanceHelpers: Record<string, any> = {}, importer: (url: string) => Promise<any> = importResource) => {
   // instanceHelpers are per-component-instance additions (e.g. $emit, which
   // is bound to this instance's DOM position)
   const helpers = { ...SETUP_HELPERS, ...instanceHelpers }
@@ -884,10 +555,48 @@ const runSetupScript = (code: string, scope: Record<string, any>, effect: (run:
   const result: Promise<void> = new Function(
     "$scope", "$__effect", "$__import", ...Object.keys(helpers),
     `return (async () => { with ($scope) { ${code} } })()`
-  )(scriptScope, effect, importResource, ...Object.values(helpers))
+  )(scriptScope, effect, importer, ...Object.values(helpers))
   result.catch(error => console.error("jq79: error in :setup script", error))
 }
 
+// default-import interop for factory scripts: real modules expose .default,
+// while importing an .html component resolves to the Component79 itself
+const interopDefault = (mod: any) => (mod && mod.default !== undefined ? mod.default : mod)
+
+// runs a factory script: the (rewritten) module body executes in plain
+// lexical strict-mode scope - no `with`, no implicit reactivity - with the
+// library helpers as parameters, then the default export is called with the
+// instance context and a returned object is merged into the store. A fully
+// synchronous body invokes the factory before the first render, matching
+// setup-script timing; bodies with top-level await (static imports included)
+// resolve later and the template updates reactively
+const runFactoryScript = (code: string, scope: Record<string, any>, effect: (run: () => void) => void, instanceHelpers: Record<string, any> = {}, importer: (url: string) => Promise<any> = importResource) => {
+  const helpers = { ...SETUP_HELPERS, ...instanceHelpers }
+  const $__exports: { default?: (ctx: Record<string, any>) => any; done?: boolean } = {}
+  const result: Promise<void> = new Function(
+    "$__exports", "$__default", "$__import", ...Object.keys(helpers),
+    `return (async () => { "use strict";\n${code}\n;$__exports.done = true })()`
+  )($__exports, interopDefault, importer, ...Object.values(helpers))
+
+  const logError = (error: any) => console.error("jq79: error in factory script", error)
+  let invoked = false
+  const invoke = () => {
+    if (invoked) return
+    invoked = true
+    const factory = $__exports.default
+    if (typeof factory !== "function") return
+    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)
+  }
+
+  result.then(invoke, logError)
+  if ($__exports.done) invoke() // fully-sync body: factory runs before first render
+}
+
 type EmitListener = (event: CustomEvent, payload: any) => void
 
 // a parsed single-file component. Typical lifecycle:
@@ -902,6 +611,9 @@ export class Component79 {
   template: TemplateNode[]
   scripts: TagBlock[]
   styles: TagBlock[]
+  // pre-resolved modules for setup-script `import(...)` calls (see
+  // ComponentParts.modules); checked before falling back to fetch/import
+  modules?: Record<string, any>
 
   data: ReactiveDeepData<Record<string, any>> | null = null
 
@@ -926,11 +638,12 @@ export class Component79 {
   // outside the render generation so they survive re-render and destroy()
   private emitListeners = new Map<string, Set<EmitListener>>()
 
-  constructor(src: string | ComponentParts) {
-    const { template, scripts, styles } = typeof src === "string" ? parseComponentString(src) : src
-    this.template = template
-    this.scripts = scripts
-    this.styles = styles
+  constructor(src: string | ComponentParts, options: { modules?: Record<string, any> } = {}) {
+    const parts = typeof src === "string" ? parseComponentString(src) : src
+    this.template = parts.template
+    this.scripts = parts.scripts
+    this.styles = parts.styles
+    this.modules = options.modules ?? (typeof src === "string" ? undefined : src.modules)
   }
 
   static async fetch(url: string): Promise<Component79> {
@@ -1021,15 +734,30 @@ export class Component79 {
     }
     const $self = (selector: string): Element | null => $$self(selector)[0] ?? null
 
+    // 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)
+    const modules = this.modules
+    const $import = (url: string): Promise<any> =>
+      modules && url in modules ? Promise.resolve(modules[url]) : importResource(url)
+
     // scripts run before the template renders so `$:` values are initialized;
-    // a `:mounted` script defers entirely until mount() instead
+    // a `:mounted` script defers entirely until mount() instead. A top-level
+    // `export default` switches the script to factory mode (plain lexical JS)
     this.scripts.forEach(script => {
+      const instanceHelpers = { $emit, $mounted, $self, $$self }
+      const factoryCode = transformFactoryScript(script.content)
+      if (factoryCode !== null) {
+        const body = ":mounted" in script.attrs ? `await $mounted();\n${factoryCode}` : factoryCode
+        runFactoryScript(body, store, fx.effect, instanceHelpers, $import)
+        return
+      }
       const { vars, code } = transformSetupScript(script.content)
       // pre-declare script vars on the store so `with` resolves assignments
       // to them (and reads of them) through the reactive proxy
       vars.forEach(name => { if (!(name in store)) (store as any)[name] = undefined })
       const body = ":mounted" in script.attrs ? `await $mounted();\n${code}` : code
-      runSetupScript(body, store, fx.effect, { $emit, $mounted, $self, $$self })
+      runSetupScript(body, store, fx.effect, instanceHelpers, $import)
     })
 
     const content = document.createDocumentFragment()