@threadlabs/looma 0.28.19 → 0.28.21

package/vue/host.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.52 for Vue 3.5. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.53 for Vue 3.5. Do not edit.
 import {
   computed,
   createTextVNode,
@@ -202,6 +202,58 @@ function controllerNamespaces(options: ControllerNamespaces, source: string): {
   return { state, data }
 }
 
+const requestStateKey = Symbol.for('@nextwebwg/html-next.runtime.v1')
+type DocumentRecord = {
+  requests?: { readonly g: WeakMap<Node, Promise<void>> }
+  relay?: (from: Node, name: string) => void
+}
+const documentRecord = (root: Element): DocumentRecord =>
+  (root.ownerDocument as unknown as Record<symbol, DocumentRecord>)[requestStateKey] ??= {}
+
+/** Requests from inside root wait until its controller has run; the returned release ends the wait. */
+function holdController(root: Element): () => void {
+  const { g: gates } = documentRecord(root).requests ??= { g: new WeakMap() }
+  let release!: () => void
+  const gate = new Promise<void>((resolve) => {
+    release = resolve
+  })
+  gates.set(root, gate)
+  return () => {
+    if (gates.get(root) === gate) gates.delete(root)
+    release()
+  }
+}
+
+/** A responder registered on root relays to the requests inside it that went unanswered, once a page asks. */
+function relayResponders(root: Element, name: string): void {
+  documentRecord(root).relay?.(root, name)
+}
+
+/** For a component that asks: a responder announcement reaches its controller only as the relay to its root, which does not bubble. */
+function hostListener(type: string, callback: (event: Event) => unknown): (event: Event) => void {
+  return (event) => {
+    if (type !== 'responder' || !event.bubbles) callback(event)
+  }
+}
+
+/** The connection signal requests use: it aborts when the component disconnects. */
+function requestConnection(): {
+  readonly signal: (connected: boolean) => AbortSignal
+  readonly end: () => void
+} {
+  let current: AbortController | undefined
+  return {
+    signal: (connected) =>
+      connected
+        ? (current ??= new AbortController()).signal
+        : AbortSignal.abort(new DOMException('The component is not connected.', 'AbortError')),
+    end: () => {
+      current?.abort()
+      current = undefined
+    },
+  }
+}
+
 export function dispatchToTargets(recorded: unknown, send: (target: Element) => void): void {
   const refs = recorded instanceof Set
     ? [...recorded]
@@ -484,6 +536,16 @@ export interface ComponentHostOptions {
   /** Values inherited through declared context, which a controller reads. */
   readonly context?: Readonly<Record<string, Readable<unknown>>>
   readonly acceptsState?: (name: string, keys: readonly string[], value: unknown) => boolean
+  /** Asks one of the component's declared requests. */
+  request?(
+    root: Element,
+    connection: AbortSignal,
+    name: string,
+    detail?: unknown,
+    options?: unknown,
+  ): Promise<unknown>
+  /** Each declared request's responder, from its function prop or event form, read when the request arrives. */
+  readonly responders?: Readonly<Record<string, () => ((event: Event) => void) | undefined>>
 }
 
 /** Vue does not promise a `v-for` ref array in source order, and the host does. */
@@ -582,6 +644,8 @@ export function useComponentHost(
     else if (entry.type !== 'disconnect') {
       entry.target = root.value ?? undefined
       entry.target?.addEventListener(entry.type, entry.callback as EventListener)
+      // A responder registered after a request went unanswered tells the asker to ask again.
+      if (entry.target !== undefined) relayResponders(entry.target, entry.type)
     }
   }
   const deactivate = (entry: Subscription, disconnecting: boolean): void => {
@@ -637,7 +701,12 @@ export function useComponentHost(
       ...(options.acceptsState === undefined ? {} : { acceptsState: options.acceptsState }),
     }, options.controllerSource?.definition ?? '<component>'),
     on(type: string, callback: (event: Event) => void | (() => void)): () => void {
-      const entry: Subscription = { type, callback }
+      const entry: Subscription = {
+        type,
+        callback: type === 'connect' || type === 'disconnect' || options.request === undefined
+          ? callback
+          : hostListener(type, callback),
+      }
       subscriptions.add(entry)
       if (connected.value) activate(entry)
       return () => {
@@ -703,6 +772,31 @@ export function useComponentHost(
       return dispose
     },
     dispatch,
+    // A component that declares requests also has host.request.
+    ...(options.request === undefined ? {} : {
+      request: (name: string, detail?: unknown, requestOptions?: unknown): Promise<unknown> =>
+        options.request!(
+          root.value as Element,
+          requests.signal(connected.value),
+          name,
+          detail,
+          requestOptions,
+        ),
+    }),
+  }
+  const requests = requestConnection()
+  // Each request's responder listens on the root from its first connection, before the controller runs.
+  const responders = Object.entries(options.responders ?? {})
+  for (const [name, read] of responders) host.on(name, (event) => read()?.(event))
+  // A function prop or event form set later relays for its request, as a late host.on does.
+  if (responders.length > 0) {
+    watch(() => responders.map(([, read]) => read() !== undefined), (now, before) => {
+      const element = root.value
+      if (element === null || !connected.value) return
+      now.forEach((set, index) => {
+        if (set && !before[index]) relayResponders(element, responders[index]![0])
+      })
+    })
   }
 
   let cleanup: void | (() => void)
@@ -711,10 +805,13 @@ export function useComponentHost(
   let connection = 0
   let initialized = false
   let unmounted = false
+  let releaseController: (() => void) | undefined
   const disconnect = (): void => {
     if (!connected.value) return
     connected.value = false
     connection += 1
+    requests.end()
+    releaseController?.()
     for (const pause of pauses.values()) pause()
     for (const entry of subscriptions) deactivate(entry, true)
     cleanup?.()
@@ -741,17 +838,25 @@ export function useComponentHost(
     for (const entry of subscriptions) activate(entry)
     if (initialized) return
     const current = ++connection
+    // Requests from inside this root wait until the controller has run, or failed to load.
+    const release = releaseController = holdController(root.value!)
     started = loadControllerModule().then(async (loaded) => {
       if (!connected.value || current !== connection || initialized) return loaded
       initialized = true
-      const result = await loaded.default(host as never)
+      let invoked: unknown
+      try {
+        invoked = loaded.default(host as never)
+      } finally {
+        release()
+      }
+      const result = await invoked
       if (typeof result === 'function') {
         if (!connected.value || current !== connection) result()
         else cleanup = result as () => void
       }
       return loaded
     })
-    void started.catch(report)
+    void started.catch(report).finally(release)
   }
   onMounted(() => {
     if (root.value === null) return