@threadlabs/looma 0.24.1 → 0.25.1

package/vue/host.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.26 for Vue 3.5. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.29 for Vue 3.5. Do not edit.
 import {
   computed,
   Fragment,
@@ -13,6 +13,182 @@ import {
   watchEffect,
 } from 'vue'
 
+interface ControllerStateAccess {
+  readonly get: () => unknown
+  readonly set: (value: unknown) => void
+}
+interface ControllerNamespaces {
+  readonly state: Readonly<Record<string, ControllerStateAccess>>
+  readonly computed: Readonly<Record<string, () => unknown>>
+  readonly data?: Readonly<Record<string, () => unknown>>
+  readonly acceptsState?: (name: string, keys: readonly string[], value: unknown) => boolean
+  readonly changed?: (name: string) => void
+}
+
+function controllerNamespaces(options: ControllerNamespaces, source: string): {
+  state: Record<string, unknown>
+  data: Readonly<Record<string, unknown>>
+} {
+  const reported = new Set<string>()
+  const nested = new WeakMap<object, Map<string, object>>()
+  const eventType = typeof Event === 'undefined'
+    ? undefined
+    : Object.getOwnPropertyDescriptor(Event.prototype, 'type')!.get!
+  const eventBrands = new WeakMap<object, boolean>()
+  const nativeEvent = (value: object): boolean => {
+    if (!('type' in value) || eventType === undefined) return false
+    const known = eventBrands.get(value)
+    if (known !== undefined) return known
+    let accepted = false
+    try {
+      eventType.call(value)
+      accepted = true
+    } catch {}
+    eventBrands.set(value, accepted)
+    return accepted
+  }
+  const warn = (path: string, readonly: boolean): void => {
+    if (reported.has(path)) return
+    reported.add(path)
+    console.warn(
+      source + ': HR007: Destination ' + path
+        + (readonly ? ' is read-only.' : ' does not satisfy its declared type.'),
+    )
+  }
+  const write = (
+    name: string,
+    keys: readonly string[],
+    value: unknown,
+    readonly: boolean,
+    apply: () => void,
+  ): boolean => {
+    if (readonly || options.acceptsState?.(name, keys, value) === false) {
+      warn([name, ...keys].join('.'), readonly)
+    } else apply()
+    return true
+  }
+  const wrap = (
+    value: unknown,
+    name: string,
+    keys: readonly string[],
+    readonly: boolean,
+  ): unknown => {
+    if (value === null || typeof value !== 'object' || nativeEvent(value)) return value
+    const path = [name, ...keys].join('.')
+    let paths = nested.get(value)
+    if (paths === undefined) nested.set(value, paths = new Map())
+    const known = paths.get(path)
+    if (known !== undefined) return known
+    // A readonly facade avoids Proxy invariants on frozen source properties.
+    const surface = readonly
+      ? (Array.isArray(value) ? [] : Object.create(Object.getPrototypeOf(value)))
+      : value
+    if (readonly && Array.isArray(value)) surface.length = value.length
+    const proxy = new Proxy(surface, {
+      get: (_target, key) => wrap(Reflect.get(value, key), name, [...keys, String(key)], readonly),
+      set: (_target, key, next) =>
+        write(name, [...keys, String(key)], next, readonly, () => {
+          const previous = Reflect.get(value, key)
+          if (Reflect.set(value, key, next) && !Object.is(previous, next)) options.changed?.(name)
+        }),
+      has: (_target, key) => Reflect.has(value, key),
+      ownKeys: () => Reflect.ownKeys(value),
+      getOwnPropertyDescriptor: (_target, key) => {
+        if (readonly && Array.isArray(value) && key === 'length') {
+          surface.length = value.length
+          return Reflect.getOwnPropertyDescriptor(surface, key)
+        }
+        const descriptor = Reflect.getOwnPropertyDescriptor(value, key)
+        return descriptor === undefined
+          ? undefined
+          : readonly
+          ? { ...descriptor, configurable: true }
+          : descriptor
+      },
+      deleteProperty: (_target, key) =>
+        write(name, [...keys, String(key)], undefined, readonly, () => {
+          if (Reflect.has(value, key) && Reflect.deleteProperty(value, key)) options.changed?.(name)
+        }),
+      defineProperty: (_target, key, descriptor) => {
+        if (
+          readonly || !('value' in descriptor)
+          || options.acceptsState?.(name, [...keys, String(key)], descriptor.value) === false
+        ) {
+          warn([name, ...keys, String(key)].join('.'), readonly)
+          return false
+        }
+        const changed = Reflect.defineProperty(value, key, descriptor)
+        if (changed) options.changed?.(name)
+        return changed
+      },
+    })
+    paths.set(path, proxy)
+    return proxy
+  }
+  const state = new Proxy({} as Record<string, unknown>, {
+    get: (_target, name) => {
+      if (typeof name !== 'string') return undefined
+      if (Object.hasOwn(options.state, name)) {
+        return wrap(options.state[name]!.get(), name, [], false)
+      }
+      if (Object.hasOwn(options.computed, name)) {
+        return wrap(options.computed[name]!(), name, [], true)
+      }
+      return undefined
+    },
+    set: (_target, name, value) =>
+      write(
+        String(name),
+        [],
+        value,
+        typeof name !== 'string' || !Object.hasOwn(options.state, name),
+        () => options.state[String(name)]!.set(value),
+      ),
+    deleteProperty: (_target, name) => {
+      warn(String(name), true)
+      return true
+    },
+    defineProperty: (_target, name) => {
+      warn(String(name), true)
+      return false
+    },
+    has: (_target, name) =>
+      typeof name === 'string'
+      && (Object.hasOwn(options.state, name) || Object.hasOwn(options.computed, name)),
+  })
+  const data = new Proxy({} as Record<string, unknown>, {
+    get: (_target, name) =>
+      typeof name === 'string' && Object.hasOwn(options.data ?? {}, name)
+        ? wrap(options.data![name]!(), 'data.' + name, [], true)
+        : undefined,
+    set: (_target, name, value) => write('data.' + String(name), [], value, true, () => {}),
+    deleteProperty: (_target, name) => {
+      warn('data.' + String(name), true)
+      return true
+    },
+    defineProperty: (_target, name) => {
+      warn('data.' + String(name), true)
+      return false
+    },
+    has: (_target, name) => typeof name === 'string' && Object.hasOwn(options.data ?? {}, name),
+  })
+  return { state, data }
+}
+
+export function dispatchToTargets(recorded: unknown, send: (target: Element) => void): void {
+  const refs = recorded instanceof Set
+    ? [...recorded]
+    : Array.isArray(recorded)
+    ? [...recorded]
+    : [recorded]
+  const targets = refs.map((ref: any) => ref?.nodeType === 1 ? ref : ref?.$el)
+    .filter((element): element is Element => element?.nodeType === 1 && element.isConnected)
+    .sort((a, b) => a === b ? 0 : a.compareDocumentPosition(b) & 4 ? -1 : 1)
+  for (const target of targets) {
+    if (target.isConnected) send(target)
+  }
+}
+
 interface DataReadOptions {
   readonly source: string
   readonly definition: string
@@ -218,6 +394,7 @@ export interface ComponentHostOptions {
   readonly data?: Readonly<Record<string, Readable<unknown>>>
   /** 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
 }
 
 /** Vue does not promise a `v-for` ref array in source order, and the host does. */
@@ -300,16 +477,32 @@ export function useComponentHost(
         throw controllerDiagnostic('HJ001', error)
       })
   const stops: Array<() => void> = []
-  const readState = (name: string): unknown =>
-    Object.hasOwn(state, name)
-      ? state[name]!.value
-      : Object.hasOwn(computedValues, name)
-      ? computedValues[name]!.value
-      : Object.hasOwn(data, name)
-      ? data[name]!.value
-      : Object.hasOwn(context, name)
-      ? context[name]!.value
-      : undefined
+  const connected = shallowRef(false)
+  const pauses = new Map<() => void, () => void>()
+  const subscriptions = new Set<
+    {
+      type: string
+      callback: (event: Event) => void | (() => void)
+      target?: Element
+      cleanup?: void | (() => void)
+    }
+  >()
+  type Subscription = typeof subscriptions extends Set<infer S> ? S : never
+  const activate = (entry: Subscription): void => {
+    if (entry.type === 'connect') entry.cleanup = entry.callback(new Event('connect'))
+    else if (entry.type !== 'disconnect') {
+      entry.target = root.value ?? undefined
+      entry.target?.addEventListener(entry.type, entry.callback as EventListener)
+    }
+  }
+  const deactivate = (entry: Subscription, disconnecting: boolean): void => {
+    entry.target?.removeEventListener(entry.type, entry.callback as EventListener)
+    entry.target = undefined
+    const cleanup = entry.cleanup
+    entry.cleanup = undefined
+    cleanup?.()
+    if (disconnecting && entry.type === 'disconnect') entry.callback(new Event('disconnect'))
+  }
   const propHandles = Object.create(null) as Record<string, unknown>
   for (const name of propNames) {
     const validity = () => options.propValidity?.(name)
@@ -333,20 +526,33 @@ export function useComponentHost(
     get root(): Element {
       return root.value as Element
     },
-    state: new Proxy({} as Record<string, unknown>, {
-      get: (_target, name) => typeof name === 'string' ? readState(name) : undefined,
-      set: (_target, name, value) => {
-        if (typeof name !== 'string' || !Object.hasOwn(state, name)) {
-          throw new TypeError(`Only declared state is writable; \`${String(name)}\` is not.`)
-        }
-        state[name]!.value = value
-        return true
-      },
-      has: (_target, name) =>
-        typeof name === 'string'
-        && (Object.hasOwn(state, name) || Object.hasOwn(computedValues, name)
-          || Object.hasOwn(data, name) || Object.hasOwn(context, name)),
-    }),
+    ...controllerNamespaces({
+      state: Object.fromEntries(
+        Object.entries(state).map(([name, value]) => [name, {
+          get: () => value.value,
+          set: (next: unknown) => {
+            value.value = next
+          },
+        }]),
+      ),
+      computed: Object.fromEntries(
+        [...Object.entries(computedValues), ...Object.entries(context)].map((
+          [name, value],
+        ) => [name, () => value.value]),
+      ),
+      data: Object.fromEntries(
+        Object.entries(data).map(([name, value]) => [name, () => value.value]),
+      ),
+      acceptsState: options.acceptsState,
+    }, options.controllerSource?.definition ?? '<component>'),
+    on(type: string, callback: (event: Event) => void | (() => void)): () => void {
+      const entry: Subscription = { type, callback }
+      subscriptions.add(entry)
+      if (connected.value) activate(entry)
+      return () => {
+        if (subscriptions.delete(entry)) deactivate(entry, false)
+      }
+    },
     props: Object.freeze(propHandles),
     refs: Object.defineProperties(
       {},
@@ -383,12 +589,24 @@ export function useComponentHost(
       return { get: (): T => value.value }
     },
     effect(run: () => void | (() => void)): () => void {
-      const stop = watchEffect((onCleanup) => {
-        const cleanup = run()
-        if (typeof cleanup === 'function') onCleanup(cleanup)
+      let cleanup: void | (() => void)
+      const pause = (): void => {
+        const previous = cleanup
+        cleanup = undefined
+        previous?.()
+      }
+      const stop = watchEffect(() => {
+        pause()
+        if (connected.value) cleanup = run()
       }, { flush: 'post' })
-      stops.push(stop)
-      return stop
+      const dispose = (): void => {
+        stop()
+        pause()
+        pauses.delete(dispose)
+      }
+      pauses.set(dispose, pause)
+      stops.push(dispose)
+      return dispose
     },
     dispatch,
   }
@@ -397,13 +615,14 @@ export function useComponentHost(
   let started: Promise<ControllerModule> | undefined
   let stopObserving: (() => void) | undefined
   let connection = 0
-  let connected = false
+  let initialized = false
   let unmounted = false
   const disconnect = (): void => {
-    if (!connected) return
-    connected = false
+    if (!connected.value) return
+    connected.value = false
     connection += 1
-    for (const stop of stops.splice(0)) stop()
+    for (const pause of pauses.values()) pause()
+    for (const entry of subscriptions) deactivate(entry, true)
     cleanup?.()
     cleanup = undefined
   }
@@ -413,14 +632,27 @@ export function useComponentHost(
       disconnect()
       return
     }
-    if (connected) return
-    connected = true
+    if (connected.value) {
+      for (const entry of subscriptions) {
+        if (
+          entry.type !== 'connect' && entry.type !== 'disconnect' && entry.target !== root.value
+        ) {
+          deactivate(entry, false)
+          activate(entry)
+        }
+      }
+      return
+    }
+    connected.value = true
+    for (const entry of subscriptions) activate(entry)
+    if (initialized) return
     const current = ++connection
     started = loadControllerModule().then(async (loaded) => {
-      if (!connected || current !== connection) return loaded
+      if (!connected.value || current !== connection || initialized) return loaded
+      initialized = true
       const result = await loaded.default(host as never)
       if (typeof result === 'function') {
-        if (!connected || current !== connection) result()
+        if (!connected.value || current !== connection) result()
         else cleanup = result as () => void
       }
       return loaded
@@ -443,9 +675,10 @@ export function useComponentHost(
     unmounted = true
     stopObserving?.()
     disconnect()
+    for (const stop of stops.splice(0)) stop()
+    subscriptions.clear()
   })
-  /** `ready` settles once the controller has started; a method exposed by the component awaits it. */
-  return { host, ready: (): Promise<ControllerModule> | undefined => started }
+  return host
 }
 
 export interface DispatchOptions {
@@ -514,13 +747,13 @@ export function createDispatch(
   root: Readable<HTMLElement | null>,
   emit?: (name: string, detail: unknown) => void,
   options: DispatchOptions = {},
-): (name: string, detail?: unknown) => boolean {
+): (name: string, detail?: unknown, targets?: unknown) => boolean {
   const { declared = {}, checks = {}, modeled = [] } = options
   // One change can be reported by more than one event — a choice is both a select and a change —
   // and each carries the new value. The prop updates once per change: a value already reported in
   // this turn of the event loop is not reported again.
   const reported = new Map<string, unknown>()
-  return (name, detail) => {
+  return (name, detail, targets) => {
     const check = checks[name]
     if (detail !== undefined && check !== undefined && !check(detail)) {
       throw new HtmlDiagnosticError(
@@ -528,6 +761,17 @@ export function createDispatch(
         `Event \`${name}\` detail does not satisfy its declared type.`,
       )
     }
+    if (targets !== undefined) {
+      let accepted = true
+      dispatchToTargets(targets, target => {
+        if (
+          !target.dispatchEvent(
+            new CustomEvent(name, { bubbles: true, composed: true, ...declared[name], detail }),
+          )
+        ) accepted = false
+      })
+      return accepted
+    }
     if (detail !== null && typeof detail === 'object') {
       for (const prop of modeled) {
         if (!(prop in detail)) continue