@threadlabs/looma 0.19.1 → 0.21.0

package/vue/editor/index.js

@@ -1659,7 +1659,7 @@ var LoomaEditor = defineComponent({
 				headerRow: tableUi.headerRow,
 				headerColumn: tableUi.headerColumn,
 				actions: tableActions,
-				onAction: runTableAction
+				onAction: (event) => runTableAction(event.detail)
 			};
 			return h("div", {
 				...attrs,
@@ -1742,7 +1742,7 @@ var LoomaEditor = defineComponent({
 					disclosure: true,
 					filter: "label",
 					value: codeUi.language,
-					onValueChange: chooseCodeLanguage
+					onValueChange: (event) => chooseCodeLanguage(event.detail)
 				}, () => codeLanguageOptions.value.map((option) => h("option", { value: option.value }, option.label)))]) : null,
 				instance && props.editable && mobile.value && editorFocused.value ? h("div", {
 					ref: mobileToolbarShell,
@@ -1850,7 +1850,7 @@ var LoomaEditor = defineComponent({
 					for: blockActionAnchorId,
 					placement: mobile.value ? "top-start" : "bottom-start",
 					onOpen: captureBlockAction,
-					onSelect: ({ value }) => runBlockAction(value)
+					onSelect: (event) => runBlockAction(event.detail.value)
 				}, () => [
 					h(MenuItem, { value: "insert-below" }, () => "Insert paragraph below"),
 					h(MenuItem, { value: "duplicate" }, () => "Duplicate block"),
@@ -1869,8 +1869,8 @@ var LoomaEditor = defineComponent({
 					}
 				}, () => [h(EditorInsertTableGrid, {
 					open: true,
-					onInsert: (detail) => {
-						instance?.chain().focus().insertTable(detail).run();
+					onInsert: (event) => {
+						instance?.chain().focus().insertTable(event.detail).run();
 						tablePickerOpen.value = false;
 					}
 				})]),
@@ -1880,11 +1880,11 @@ var LoomaEditor = defineComponent({
 					items: managedSlashMenuItems(slash.items),
 					selectedIndex: slash.selectedIndex,
 					anchorRect: managedMenuAnchorRect(slash.rect),
-					onHighlight: ({ index }) => {
-						slash.selectedIndex = index;
+					onHighlight: (event) => {
+						slash.selectedIndex = event.detail.index;
 					},
-					onSelect: ({ index }) => {
-						slash.select?.(index);
+					onSelect: (event) => {
+						slash.select?.(event.detail.index);
 					}
 				}) : null,
 				mention.active && (mention.loading || mention.items.length > 0) ? h(EditorMentionMenu, {
@@ -1895,12 +1895,12 @@ var LoomaEditor = defineComponent({
 					selectedIndex: mention.selectedIndex,
 					anchorRect: managedMenuAnchorRect(mention.rect),
 					loading: mention.loading,
-					onHighlight: ({ index }) => {
-						mention.selectedIndex = index;
-						mention.highlight?.(index);
+					onHighlight: (event) => {
+						mention.selectedIndex = event.detail.index;
+						mention.highlight?.(event.detail.index);
 					},
-					onSelect: ({ index }) => {
-						mention.select?.(index);
+					onSelect: (event) => {
+						mention.select?.(event.detail.index);
 					}
 				}) : null,
 				tableUi.toolbarOpen ? h("div", {
@@ -1917,7 +1917,50 @@ var LoomaEditor = defineComponent({
 				}, [h(EditorTableOverlay, {
 					open: true,
 					geometry: tableUi.geometry,
-					onAction: runOverlayAction
+					onAddRowBefore: (event) => runOverlayAction({
+						action: "add-row-before",
+						boundaryIndex: event.detail.boundaryIndex
+					}),
+					onAddRowAfter: (event) => runOverlayAction({
+						action: "add-row-after",
+						boundaryIndex: event.detail.boundaryIndex
+					}),
+					onAddColumnBefore: (event) => runOverlayAction({
+						action: "add-column-before",
+						boundaryIndex: event.detail.boundaryIndex
+					}),
+					onAddColumnAfter: (event) => runOverlayAction({
+						action: "add-column-after",
+						boundaryIndex: event.detail.boundaryIndex
+					}),
+					onSelectRow: (event) => runOverlayAction({
+						action: "select-row",
+						...event.detail
+					}),
+					onSelectColumn: (event) => runOverlayAction({
+						action: "select-column",
+						...event.detail
+					}),
+					onReorderRow: (event) => runOverlayAction({
+						action: "reorder-row",
+						...event.detail
+					}),
+					onReorderColumn: (event) => runOverlayAction({
+						action: "reorder-column",
+						...event.detail
+					}),
+					onOpenCellMenu: (event) => runOverlayAction({
+						action: "open-cell-menu",
+						...event.detail
+					}),
+					onOpenRowMenu: (event) => runOverlayAction({
+						action: "open-row-menu",
+						...event.detail
+					}),
+					onOpenColumnMenu: (event) => runOverlayAction({
+						action: "open-column-menu",
+						...event.detail
+					})
 				})]) : null,
 				tableUi.menuOpen ? h("div", {
 					ref: tableMenuShell,

package/vue/editor/primitives.d.ts

@@ -2,14 +2,64 @@
  * The editor components, as Vue components. They are the converted components from
  * `@threadlabs/looma/vue`, re-exported beside the editor that composes them.
  */
-import type { InsertTableEventDetail, MentionMenuHighlightEventDetail, MentionMenuSelectEventDetail, SlashMenuHighlightEventDetail, SlashMenuSelectEventDetail, TableContextMenuActionEventDetail, TableOverlayActionEventDetail } from "@threadlabs/looma/editor";
+import type { InsertTableEventDetail, MentionMenuHighlightEventDetail, MentionMenuSelectEventDetail, SlashMenuHighlightEventDetail, SlashMenuSelectEventDetail, TableContextMenuActionEventDetail } from "@threadlabs/looma/editor";
 export { EditorInsertTableGrid, EditorMentionMenu, EditorSlashMenu, EditorTableContextMenu, EditorTableOverlay, EditorTableToolbar, EditorToolbar, } from "@threadlabs/looma/vue";
 /** The editor components' event details, by event name. */
 export interface VueEditorAdapterEventMap {
     highlight: MentionMenuHighlightEventDetail | SlashMenuHighlightEventDetail;
     select: MentionMenuSelectEventDetail | SlashMenuSelectEventDetail;
-    action: TableContextMenuActionEventDetail | TableOverlayActionEventDetail;
+    action: TableContextMenuActionEventDetail;
     insert: InsertTableEventDetail;
+    "add-row-before": {
+        boundaryIndex: number;
+    };
+    "add-row-after": {
+        boundaryIndex: number;
+    };
+    "add-column-before": {
+        boundaryIndex: number;
+    };
+    "add-column-after": {
+        boundaryIndex: number;
+    };
+    "select-row": {
+        rowIndex: number;
+        columnIndex: number;
+    };
+    "select-column": {
+        rowIndex: number;
+        columnIndex: number;
+    };
+    "open-cell-menu": {
+        rowIndex: number;
+        columnIndex: number;
+        anchor: {
+            left: number;
+            top: number;
+            right: number;
+            bottom: number;
+        };
+    };
+    "open-row-menu": {
+        rowIndex: number;
+        columnIndex: number;
+        anchor: {
+            left: number;
+            top: number;
+            right: number;
+            bottom: number;
+        };
+    };
+    "open-column-menu": {
+        rowIndex: number;
+        columnIndex: number;
+        anchor: {
+            left: number;
+            top: number;
+            right: number;
+            bottom: number;
+        };
+    };
 }
 /** Each Vue editor component's element tag, for tooling that enumerates them. */
 export declare const EDITOR_ADAPTER_COMPONENT_TAG_MAP: {

package/vue/host.ts

@@ -1,47 +1,287 @@
-// Generated by HTML Next 1.0.0-alpha.7 for Vue 3.5. Do not edit.
-import { computed, onBeforeUnmount, onMounted, shallowRef, watchEffect } from 'vue'
+// Generated by HTML Next 1.0.0-alpha.12 for Vue 3.5. Do not edit.
+import {
+  computed,
+  Fragment,
+  getCurrentInstance,
+  onBeforeUnmount,
+  onBeforeUpdate,
+  onMounted,
+  onUpdated,
+  shallowRef,
+  useSlots,
+  watchEffect,
+} from 'vue'
+
+interface DataReadOptions {
+  readonly source: string
+  readonly definition: string
+  readonly type?: string
+  readonly debounce?: number
+  readonly poll?: number
+  readonly parameters: () => Readonly<Record<string, unknown>>
+}
+
+function dataURL(
+  source: string,
+  baseURL: string,
+  parameters: Readonly<Record<string, unknown>>,
+): string {
+  const used = new Set<string>()
+  const expanded = source.replace(/\{([A-Za-z_$][A-Za-z0-9_$-]*)\}/g, (_match, name: string) => {
+    used.add(name)
+    const value = parameters[name]
+    return value == null ? '' : encodeURIComponent(String(value))
+  })
+  const url = new URL(expanded, baseURL)
+  for (const [name, value] of Object.entries(parameters)) {
+    if (used.has(name) || value == null) continue
+    if (Array.isArray(value)) {
+      for (const item of value) url.searchParams.append(name, String(item))
+    } else url.searchParams.set(name, String(value))
+  }
+  return url.href
+}
+
+/** A Vue-owned declared read; no request is made during SSR. */
+export function useDataRead(state: { value: any }, options: DataReadOptions): void {
+  let value: unknown = null
+  let parameters: Readonly<Record<string, unknown>> = {}
+  let abort: AbortController | undefined
+  let timer: ReturnType<typeof setTimeout> | undefined
+  let generation = 0
+  let connected = false
+  let stop: (() => void) | undefined
+  const cancel = (): void => {
+    abort?.abort()
+    abort = undefined
+    if (timer !== undefined) clearTimeout(timer)
+    timer = undefined
+  }
+  const stale = (current: number): boolean => !connected || current !== generation
+  const request = async (current: number): Promise<void> => {
+    if (stale(current)) return
+    const controller = new AbortController()
+    abort = controller
+    state.value = { pending: true, value, error: null, ok: false }
+    try {
+      const definition = (() => {
+        try {
+          return new URL(options.definition, document.baseURI).href
+        } catch {
+          return document.baseURI
+        }
+      })()
+      const response = await fetch(dataURL(options.source, definition, parameters), {
+        signal: controller.signal,
+      })
+      if (!response.ok) throw new TypeError(`Request failed with ${response.status}.`)
+      const next = options.type === 'text' || options.type === 'string'
+        ? await response.text()
+        : await response.json()
+      if (stale(current)) return
+      value = next
+      state.value = { pending: false, value, error: null, ok: true }
+    } catch (error) {
+      if (controller.signal.aborted || stale(current)) return
+      state.value = { pending: false, value, error, ok: false }
+    } finally {
+      if (abort === controller) abort = undefined
+      if (!stale(current) && (options.poll ?? 0) > 0) {
+        timer = setTimeout(() => {
+          void request(current)
+        }, options.poll)
+      }
+    }
+  }
+  const update = (next: Readonly<Record<string, unknown>>): void => {
+    parameters = { ...next }
+    connected = true
+    cancel()
+    const current = ++generation
+    if ((options.debounce ?? 0) > 0) {
+      timer = setTimeout(() => {
+        void request(current)
+      }, options.debounce)
+    } else void request(current)
+  }
+  onMounted(() => {
+    stop = watchEffect(() => update(options.parameters()))
+  })
+  onBeforeUnmount(() => {
+    stop?.()
+    connected = false
+    generation += 1
+    cancel()
+  })
+}
 
 /** A reactive value the host reads: Vue's ref, shallowRef, computed, and useTemplateRef all match. */
 export interface Readable<T> {
   readonly value: T
 }
 
+interface ConnectionHub {
+  readonly observer: MutationObserver
+  readonly checks: Set<() => void>
+}
+
+const connectionHubs = new WeakMap<Document, ConnectionHub>()
+
+/** One native observer per document tracks externally detached controller roots. */
+function observeConnection(element: Element, check: () => void): () => void {
+  const document = element.ownerDocument
+  let hub = connectionHubs.get(document)
+  if (hub === undefined) {
+    const Observer = document.defaultView?.MutationObserver
+    if (Observer === undefined) {
+      throw new TypeError('Controller connection tracking requires MutationObserver.')
+    }
+    const checks = new Set<() => void>()
+    const observer = new Observer(() => {
+      for (const current of checks) current()
+    })
+    observer.observe(document, { childList: true, subtree: true })
+    hub = { observer, checks }
+    connectionHubs.set(document, hub)
+  }
+  hub.checks.add(check)
+  return () => {
+    hub.checks.delete(check)
+    if (hub.checks.size === 0) {
+      hub.observer.disconnect()
+      connectionHubs.delete(document)
+    }
+  }
+}
+
+/** Keep native focus on the corresponding control when a root-level $match replaces its element. */
+export function preserveRootFocus(root: Readable<Element | null>): void {
+  const focusable =
+    'a[href], button, input, select, textarea, summary, [tabindex], [contenteditable]'
+  let previous: Element | null = null
+  let active: Element | null = null
+  let focusIndex = -1
+  onBeforeUpdate(() => {
+    previous = root.value
+    active = previous?.ownerDocument.activeElement ?? null
+    focusIndex =
+      previous !== null && active !== null && active !== previous && previous.contains(active)
+        ? Array.from(previous.querySelectorAll(focusable)).indexOf(active)
+        : -1
+  })
+  onUpdated(() => {
+    const next = root.value
+    if (previous === null || next === null || previous === next) return
+    const target = active === previous
+      ? next
+      : active?.isConnected === true && next.contains(active)
+      ? active
+      : focusIndex >= 0
+      ? next.querySelectorAll(focusable)[focusIndex]
+      : undefined
+    ;(target as HTMLElement | undefined)?.focus?.({ preventScroll: true })
+  })
+}
+
 export interface ComponentHostOptions {
   /** The component's root element. */
   readonly root: Readable<HTMLElement | null>
   /** Dispatches a declared component event. */
   readonly dispatch: (name: string, detail?: unknown) => boolean
+  /** The authored controller edge, retained for the live loader's module diagnostic. */
+  readonly controllerSource?: { readonly specifier: string; readonly definition: string }
   /** The component's props, which a controller reads through `host.state`. */
-  readonly props?: Readonly<Record<string, unknown>>
-  /** Template refs, by the ref name the component declared. */
-  readonly refs?: Readonly<Record<string, Readable<HTMLElement | null>>>
+  readonly props?: Readable<Readonly<Record<string, unknown>>>
+  /** Template refs, by the ref name the component declared. Vue collects a `v-for` ref into an array. */
+  readonly refs?: Readonly<Record<string, Readable<HTMLElement | HTMLElement[] | null>>>
   /** Declared state, which a controller reads and writes. */
   readonly state?: Readonly<Record<string, { value: any }>>
   /** Declared computed values, which a controller reads. */
   readonly computed?: Readonly<Record<string, Readable<unknown>>>
 }
 
+/** Vue does not promise a `v-for` ref array in source order, and the host does. */
+function inDocumentOrder(elements: readonly Element[]): Element[] {
+  return [...elements].sort((a, b) => (a.compareDocumentPosition(b) & 4) !== 0 ? -1 : 1)
+}
+
+/** Slot content flattened to the elements Vue mounted for it, descending through fragments. */
+function slottedElements(nodes: readonly any[]): Element[] {
+  const elements: Element[] = []
+  for (const node of nodes) {
+    if (node.type === Fragment && Array.isArray(node.children)) {
+      elements.push(...slottedElements(node.children))
+    } else if (node.el instanceof Element) elements.push(node.el)
+  }
+  return elements
+}
+
 /**
  * The controller host, built from Vue refs, effects, and lifecycle. Reads and writes reach the
- * component's own refs, so a controller's change renders as any other Vue change does, and the
- * effects and listeners it opens close when the component unmounts.
+ * component's own refs, so a controller's change renders as any other Vue change does. Vue
+ * hooks cover mount/unmount; a shared native observer also detects external root detachment
+ * and reinsertion without treating an in-tree move as a new connection.
  */
 export function useComponentHost(
-  controller: ((host: never) => unknown) | undefined,
+  controllerLoader: () => Promise<unknown>,
   options: ComponentHostOptions,
 ) {
   const { root, dispatch, props, refs = {}, state = {}, computed: computedValues = {} } = options
+  const vueSlots = useSlots()
+  const component = getCurrentInstance()
+  const report = (error: unknown): void => {
+    const handler = component?.appContext.config.errorHandler
+    if (handler === undefined) {
+      queueMicrotask(() => {
+        throw error
+      })
+    } else handler(error, component?.proxy ?? null, 'HTML Next controller')
+  }
+  const controllerDiagnostic = (code: 'HJ001' | 'HJ002', reason?: unknown): Error => {
+    const edge = options.controllerSource
+    const source = edge?.definition ? new URL(edge.definition, document.baseURI).href : undefined
+    const url = new URL(edge?.specifier ?? '', source ?? document.baseURI).href
+    const tick = String.fromCharCode(96)
+    const message = code === 'HJ002'
+      ? 'Controller module ' + tick + url + tick + ' must default-export a function.'
+      : 'Controller module ' + tick + url + tick + ' failed to load: '
+        + (reason instanceof Error ? reason.message : String(reason)) + '.'
+    return Object.assign(
+      new Error((source === undefined ? '' : source + ': ') + code + ': ' + message),
+      {
+        name: 'HtmlDiagnosticError',
+        diagnostic: Object.freeze({ code, message, ...(source === undefined ? {} : { source }) }),
+      },
+    )
+  }
+  type ControllerModule = Record<string, unknown> & { readonly default: (host: unknown) => unknown }
+  let controllerModule: Promise<ControllerModule> | undefined
+  const loadControllerModule = (): Promise<ControllerModule> =>
+    controllerModule ??= Promise.resolve()
+      .then(controllerLoader)
+      .then((candidate) => {
+        const loaded = candidate as { readonly default?: unknown } | null
+        if (typeof loaded?.default !== 'function') throw controllerDiagnostic('HJ002')
+        return candidate as ControllerModule
+      })
+      .catch((error: unknown) => {
+        if (error instanceof Error && 'diagnostic' in error) throw error
+        throw controllerDiagnostic('HJ001', error)
+      })
   const stops: Array<() => void> = []
   const read = (name: string): unknown =>
     Object.hasOwn(state, name)
       ? state[name]!.value
       : Object.hasOwn(computedValues, name)
       ? computedValues[name]!.value
-      : props?.[name]
+      : props?.value[name]
   const host = {
     get element(): Element {
       return root.value as Element
     },
+    get root(): Element {
+      return root.value as Element
+    },
     state: new Proxy({} as Record<string, unknown>, {
       get: (_target, name) => typeof name === 'string' ? read(name) : undefined,
       set: (_target, name, value) => {
@@ -55,20 +295,19 @@ export function useComponentHost(
     refs: Object.defineProperties(
       {},
       Object.fromEntries(
-        Object.entries(refs).map((
-          [name, ref],
-        ) => [name, { enumerable: true, get: () => ref.value as Element }]),
+        Object.entries(refs).map(([name, ref]) => [name, {
+          enumerable: true,
+          get: () => Array.isArray(ref.value) ? inDocumentOrder(ref.value) : (ref.value as Element),
+        }]),
       ),
-    ) as Readonly<Record<string, Element>>,
-    elements: new Proxy({} as Record<string, Element | RadioNodeList | undefined>, {
+    ) as Readonly<Record<string, Element | readonly Element[]>>,
+    slots: new Proxy({} as Record<string, readonly Element[]>, {
       get: (_target, name) => {
-        if (typeof name !== 'string' || root.value === null) return undefined
-        const form = root.value instanceof HTMLFormElement
-          ? root.value
-          : root.value.querySelector('form')
-        return form?.elements.namedItem(name)
-          ?? root.value.querySelector(`[name="${CSS.escape(name)}"]`) ?? undefined
+        if (typeof name !== 'string') return undefined
+        const render = vueSlots[name]
+        return render === undefined ? [] : slottedElements(render())
       },
+      has: (_target, name) => typeof name === 'string' && vueSlots[name] !== undefined,
     }),
     signal<T>(initialValue: T) {
       // shallowRef holds the controller's own value and notifies only when it changes.
@@ -95,29 +334,62 @@ export function useComponentHost(
       stops.push(stop)
       return stop
     },
-    on(event: string, listener: EventListener): () => void {
-      const element = root.value
-      element?.addEventListener(event, listener)
-      const off = (): void => element?.removeEventListener(event, listener)
-      stops.push(off)
-      return off
-    },
     dispatch,
   }
 
   let cleanup: void | (() => void)
-  let started: Promise<void> | undefined
+  let started: Promise<ControllerModule> | undefined
+  let stopObserving: (() => void) | undefined
+  let connection = 0
+  let connected = false
+  let unmounted = false
+  const disconnect = (): void => {
+    if (!connected) return
+    connected = false
+    connection += 1
+    for (const stop of stops.splice(0)) stop()
+    cleanup?.()
+    cleanup = undefined
+  }
+  const synchronize = (): void => {
+    if (unmounted) return
+    if (root.value?.isConnected !== true) {
+      disconnect()
+      return
+    }
+    if (connected) return
+    connected = true
+    const current = ++connection
+    started = loadControllerModule().then(async (loaded) => {
+      if (!connected || current !== connection) return loaded
+      const result = await loaded.default(host as never)
+      if (typeof result === 'function') {
+        if (!connected || current !== connection) result()
+        else cleanup = result as () => void
+      }
+      return loaded
+    })
+    void started.catch(report)
+  }
   onMounted(() => {
-    started = Promise.resolve(controller?.(host as never)).then((result) => {
-      if (typeof result === 'function') cleanup = result as () => void
+    if (root.value === null) return
+    stopObserving = observeConnection(root.value, () => {
+      try {
+        synchronize()
+      } catch (error) {
+        report(error)
+      }
     })
+    synchronize()
   })
+  onUpdated(synchronize)
   onBeforeUnmount(() => {
-    for (const stop of stops.splice(0)) stop()
-    if (typeof cleanup === 'function') cleanup()
+    unmounted = true
+    stopObserving?.()
+    disconnect()
   })
   /** `ready` settles once the controller has started; a method exposed by the component awaits it. */
-  return { host, ready: (): Promise<void> | undefined => started }
+  return { host, ready: (): Promise<ControllerModule> | undefined => started }
 }
 
 export interface DispatchOptions {
@@ -129,7 +401,59 @@ export interface DispatchOptions {
   readonly modeled?: readonly string[]
 }
 
-/** Dispatches a component event to Vue listeners and, for controllers and page code, on the root. */
+class HtmlDiagnosticError extends Error {
+  readonly diagnostic: Readonly<{ code: string; message: string }>
+
+  constructor(code: string, message: string) {
+    super(code + ': ' + message)
+    this.name = 'HtmlDiagnosticError'
+    this.diagnostic = Object.freeze({ code, message })
+  }
+}
+
+/** Apply HTML Next's event filters before propagation/cancellation actions on the original DOM event. */
+export function runFilteredEvent(
+  event: Event,
+  modifiers: readonly string[],
+  handler: () => void,
+): void {
+  if (modifiers.includes('self') && event.target !== event.currentTarget) return
+  if (event instanceof MouseEvent) {
+    const buttons: Record<string, number> = { left: 0, middle: 1, right: 2 }
+    const filters = modifiers.filter((modifier) => modifier in buttons)
+    if (filters.length > 0 && !filters.some((filter) => event.button === buttons[filter])) return
+  }
+  const systemKeys = ['ctrl', 'shift', 'alt', 'meta'] as const
+  for (const key of systemKeys) {
+    if (modifiers.includes(key) && !(event as unknown as Record<string, boolean>)[key + 'Key']) {
+      return
+    }
+  }
+  if (
+    modifiers.includes('exact') && systemKeys.some((key) =>
+      !modifiers.includes(key) && (event as unknown as Record<string, boolean>)[key + 'Key']
+    )
+  ) return
+  if (event instanceof KeyboardEvent) {
+    const names: Record<string, string> = {
+      enter: 'Enter',
+      escape: 'Escape',
+      space: ' ',
+      tab: 'Tab',
+      up: 'ArrowUp',
+      down: 'ArrowDown',
+      left: 'ArrowLeft',
+      right: 'ArrowRight',
+    }
+    const filters = modifiers.filter((modifier) => modifier in names)
+    if (filters.length > 0 && !filters.some((filter) => event.key === names[filter])) return
+  }
+  if (modifiers.includes('prevent')) event.preventDefault()
+  if (modifiers.includes('stop')) event.stopPropagation()
+  handler()
+}
+
+/** Reports declared CustomEvents to Vue and dispatches them through the DOM. */
 export function createDispatch(
   root: Readable<HTMLElement | null>,
   emit?: (name: string, detail: unknown) => void,
@@ -143,9 +467,11 @@ export function createDispatch(
   return (name, detail) => {
     const check = checks[name]
     if (detail !== undefined && check !== undefined && !check(detail)) {
-      throw new TypeError(`HR002: Event \`${name}\` detail does not satisfy its declared type.`)
+      throw new HtmlDiagnosticError(
+        'HR002',
+        `Event \`${name}\` detail does not satisfy its declared type.`,
+      )
     }
-    emit?.(name, detail)
     if (detail !== null && typeof detail === 'object') {
       for (const prop of modeled) {
         if (!(prop in detail)) continue
@@ -156,8 +482,13 @@ export function createDispatch(
         emit?.(`update:${prop}`, value)
       }
     }
-    return root.value?.dispatchEvent(
-      new CustomEvent(name, { bubbles: true, composed: true, ...declared[name], detail }),
-    ) ?? true
+    const event = new CustomEvent(name, {
+      bubbles: true,
+      composed: true,
+      ...declared[name],
+      detail,
+    })
+    if (check !== undefined) emit?.(name, event)
+    return root.value?.dispatchEvent(event) ?? true
   }
 }