@threadlabs/looma 0.6.4 → 0.7.0

package/vue/UiToastRegion.vue

@@ -1,7 +1,8 @@
-<!-- Generated by HTML Next 1.0.0-alpha.2 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.3 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, ref, shallowRef, watchEffect } from 'vue'
+import { ref } from 'vue'
 import * as controllerModule from '../components/ui-toast-region/ui-toast-region.js'
+import { createDispatch, useComponentHost } from './host'
 import UiIconButton from './UiIconButton.vue'
 
 defineOptions({ inheritAttrs: false })
@@ -44,135 +45,45 @@ const toasts = ref<{ id: string; message: string; role: 'alert' | 'status'; clos
   [],
 )
 
-/** Dispatches a component event to Vue listeners and, for controllers and page code, on the root. */
-function dispatch(name: string, detail?: unknown): boolean {
-  const declared: Record<string, EventInit | undefined> = {
-    close: { bubbles: true, composed: true, cancelable: false },
-    dismiss: { bubbles: true, composed: true, cancelable: false },
-  }
-  const checks: Record<string, (detail: unknown) => boolean> = {
-    close: (detail) =>
-      detail !== null && typeof detail === 'object' && !Array.isArray(detail)
-      && typeof (detail as Record<string, unknown>)['open'] === 'boolean'
-      && ((detail as Record<string, unknown>)['reason'] === 'action'
-        || (detail as Record<string, unknown>)['reason'] === 'timeout'
-        || (detail as Record<string, unknown>)['reason'] === 'programmatic'
-        || (detail as Record<string, unknown>)['reason'] === 'light-dismiss'
-        || (detail as Record<string, unknown>)['reason'] === 'escape')
-      && ((detail as Record<string, unknown>)['trigger'] === 'keyboard'
-        || (detail as Record<string, unknown>)['trigger'] === 'pointer'
-        || (detail as Record<string, unknown>)['trigger'] === 'programmatic')
-      && Object.keys(detail as object).every((key) => ['open', 'reason', 'trigger'].includes(key)),
-    dismiss: (detail) =>
-      detail !== null && typeof detail === 'object' && !Array.isArray(detail)
-      && typeof (detail as Record<string, unknown>)['id'] === 'string'
-      && ((detail as Record<string, unknown>)['reason'] === 'action'
-        || (detail as Record<string, unknown>)['reason'] === 'timeout')
-      && ((detail as Record<string, unknown>)['trigger'] === 'keyboard'
-        || (detail as Record<string, unknown>)['trigger'] === 'pointer'
-        || (detail as Record<string, unknown>)['trigger'] === 'programmatic')
-      && Object.keys(detail as object).every((key) => ['id', 'reason', 'trigger'].includes(key)),
-  }
-  if (detail !== undefined && checks[name] !== undefined && !checks[name]!(detail)) {
-    throw new TypeError(`HR002: Event \`${name}\` detail does not satisfy its declared type.`)
-  }
-  const emitEvent = emit as (name: string, detail: unknown) => void
-  emitEvent(name, detail)
-  if (detail !== null && typeof detail === 'object' && 'open' in detail) {
-    emitEvent('update:open', (detail as Record<string, unknown>)['open'])
-  }
-  return root.value?.dispatchEvent(
-    new CustomEvent(name, { bubbles: true, composed: true, ...declared[name], detail }),
-  ) ?? true
-}
-
-function read(name: string): unknown {
-  if (name === 'internalOpen') return internalOpen.value
-  if (name === 'toasts') return toasts.value
-  return (props as Record<string, unknown>)[name]
-}
-
-function write(name: string, value: unknown): boolean {
-  if (name === 'internalOpen') {
-    internalOpen.value = value as never
-    return true
-  }
-  if (name === 'toasts') {
-    toasts.value = value as never
-    return true
-  }
-  throw new TypeError(`Only declared state is writable; \`${name}\` is not.`)
-}
-
-const stops: Array<() => void> = []
-const host = {
-  get element(): Element {
-    return root.value as Element
+const isCloseDetail = (detail: unknown): boolean =>
+  detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+  && typeof (detail as Record<string, unknown>)['open'] === 'boolean'
+  && ((detail as Record<string, unknown>)['reason'] === 'action'
+    || (detail as Record<string, unknown>)['reason'] === 'timeout'
+    || (detail as Record<string, unknown>)['reason'] === 'programmatic'
+    || (detail as Record<string, unknown>)['reason'] === 'light-dismiss'
+    || (detail as Record<string, unknown>)['reason'] === 'escape')
+  && ((detail as Record<string, unknown>)['trigger'] === 'keyboard'
+    || (detail as Record<string, unknown>)['trigger'] === 'pointer'
+    || (detail as Record<string, unknown>)['trigger'] === 'programmatic')
+  && Object.keys(detail as object).every((key) => ['open', 'reason', 'trigger'].includes(key))
+const isDismissDetail = (detail: unknown): boolean =>
+  detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+  && typeof (detail as Record<string, unknown>)['id'] === 'string'
+  && ((detail as Record<string, unknown>)['reason'] === 'action'
+    || (detail as Record<string, unknown>)['reason'] === 'timeout')
+  && ((detail as Record<string, unknown>)['trigger'] === 'keyboard'
+    || (detail as Record<string, unknown>)['trigger'] === 'pointer'
+    || (detail as Record<string, unknown>)['trigger'] === 'programmatic')
+  && Object.keys(detail as object).every((key) => ['id', 'reason', 'trigger'].includes(key))
+const dispatch = createDispatch(root, emit as (name: string, detail: unknown) => void, {
+  checks: {
+    close: isCloseDetail,
+    dismiss: isDismissDetail,
   },
-  state: new Proxy({} as Record<string, unknown>, {
-    get: (_target, name) => typeof name === 'string' ? read(name) : undefined,
-    set: (_target, name, value) => typeof name === 'string' && write(name, value),
-  }),
-  refs: {} as Readonly<Record<string, Element>>,
-  elements: new Proxy({} as Record<string, Element | RadioNodeList | undefined>, {
-    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
-    },
-  }),
-  signal<T>(initialValue: T) {
-    const value = shallowRef(initialValue)
-    return {
-      get: (): T => value.value,
-      set: (next: T): void => {
-        if (!Object.is(value.value, next)) value.value = next
-      },
-      update: (next: (current: T) => T): void => {
-        const updated = next(value.value)
-        if (!Object.is(value.value, updated)) value.value = updated
-      },
-    }
-  },
-  computed<T>(compute: () => T) {
-    const value = computed(compute)
-    return { get: (): T => value.value }
-  },
-  effect(run: () => void | (() => void)): () => void {
-    const stop = watchEffect((onCleanup) => {
-      const cleanup = run()
-      if (typeof cleanup === 'function') onCleanup(cleanup)
-    }, { flush: 'post' })
-    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 ready: Promise<void> | undefined
-onMounted(() => {
-  ready = Promise.resolve(controllerModule.default(host as never)).then((result) => {
-    cleanup = result
-  })
+  modeled: ['open'],
 })
-onBeforeUnmount(() => {
-  for (const stop of stops.splice(0)) stop()
-  if (typeof cleanup === 'function') cleanup()
+
+const { host, ready } = useComponentHost(controllerModule.default, {
+  root,
+  dispatch,
+  props,
+  state: { internalOpen, toasts },
 })
+
 defineExpose({
   show: async (...args: unknown[]) => {
-    await ready
+    await ready()
     return (controllerModule as Record<string, (...values: unknown[]) => unknown>)['show']!(
       host,
       ...args,

package/vue/UiTooltip.vue

@@ -1,7 +1,8 @@
-<!-- Generated by HTML Next 1.0.0-alpha.2 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.3 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, ref, shallowRef, watchEffect } from 'vue'
+import { computed, ref } from 'vue'
 import * as controllerModule from '../components/ui-tooltip/ui-tooltip.js'
+import { createDispatch, useComponentHost } from './host'
 
 defineOptions({ inheritAttrs: false })
 
@@ -56,130 +57,30 @@ const hostState = computed(() =>
   ].filter(Boolean).join(' ')
 )
 
-/** Dispatches a component event to Vue listeners and, for controllers and page code, on the root. */
-function dispatch(name: string, detail?: unknown): boolean {
-  const declared: Record<string, EventInit | undefined> = {
-    open: { bubbles: true, composed: true, cancelable: false },
-    close: { bubbles: true, composed: true, cancelable: false },
-  }
-  const checks: Record<string, (detail: unknown) => boolean> = {
-    open: (detail) =>
-      detail !== null && typeof detail === 'object' && !Array.isArray(detail)
-      && typeof (detail as Record<string, unknown>)['open'] === 'boolean'
-      && ((detail as Record<string, unknown>)['reason'] === 'action'
-        || (detail as Record<string, unknown>)['reason'] === 'programmatic'
-        || (detail as Record<string, unknown>)['reason'] === 'light-dismiss'
-        || (detail as Record<string, unknown>)['reason'] === 'escape')
-      && ((detail as Record<string, unknown>)['trigger'] === 'keyboard'
-        || (detail as Record<string, unknown>)['trigger'] === 'pointer'
-        || (detail as Record<string, unknown>)['trigger'] === 'programmatic')
-      && Object.keys(detail as object).every((key) => ['open', 'reason', 'trigger'].includes(key)),
-    close: (detail) =>
-      detail !== null && typeof detail === 'object' && !Array.isArray(detail)
-      && typeof (detail as Record<string, unknown>)['open'] === 'boolean'
-      && ((detail as Record<string, unknown>)['reason'] === 'action'
-        || (detail as Record<string, unknown>)['reason'] === 'programmatic'
-        || (detail as Record<string, unknown>)['reason'] === 'light-dismiss'
-        || (detail as Record<string, unknown>)['reason'] === 'escape')
-      && ((detail as Record<string, unknown>)['trigger'] === 'keyboard'
-        || (detail as Record<string, unknown>)['trigger'] === 'pointer'
-        || (detail as Record<string, unknown>)['trigger'] === 'programmatic')
-      && Object.keys(detail as object).every((key) => ['open', 'reason', 'trigger'].includes(key)),
-  }
-  if (detail !== undefined && checks[name] !== undefined && !checks[name]!(detail)) {
-    throw new TypeError(`HR002: Event \`${name}\` detail does not satisfy its declared type.`)
-  }
-  const emitEvent = emit as (name: string, detail: unknown) => void
-  emitEvent(name, detail)
-  if (detail !== null && typeof detail === 'object' && 'open' in detail) {
-    emitEvent('update:open', (detail as Record<string, unknown>)['open'])
-  }
-  if (detail !== null && typeof detail === 'object' && 'trigger' in detail) {
-    emitEvent('update:trigger', (detail as Record<string, unknown>)['trigger'])
-  }
-  return root.value?.dispatchEvent(
-    new CustomEvent(name, { bubbles: true, composed: true, ...declared[name], detail }),
-  ) ?? true
-}
-
-function read(name: string): unknown {
-  if (name === 'internalOpen') return internalOpen.value
-  return (props as Record<string, unknown>)[name]
-}
-
-function write(name: string, value: unknown): boolean {
-  if (name === 'internalOpen') {
-    internalOpen.value = value as never
-    return true
-  }
-  throw new TypeError(`Only declared state is writable; \`${name}\` is not.`)
-}
-
-const stops: Array<() => void> = []
-const host = {
-  get element(): 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) => typeof name === 'string' && write(name, value),
-  }),
-  refs: {} as Readonly<Record<string, Element>>,
-  elements: new Proxy({} as Record<string, Element | RadioNodeList | undefined>, {
-    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
-    },
-  }),
-  signal<T>(initialValue: T) {
-    const value = shallowRef(initialValue)
-    return {
-      get: (): T => value.value,
-      set: (next: T): void => {
-        if (!Object.is(value.value, next)) value.value = next
-      },
-      update: (next: (current: T) => T): void => {
-        const updated = next(value.value)
-        if (!Object.is(value.value, updated)) value.value = updated
-      },
-    }
-  },
-  computed<T>(compute: () => T) {
-    const value = computed(compute)
-    return { get: (): T => value.value }
-  },
-  effect(run: () => void | (() => void)): () => void {
-    const stop = watchEffect((onCleanup) => {
-      const cleanup = run()
-      if (typeof cleanup === 'function') onCleanup(cleanup)
-    }, { flush: 'post' })
-    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
+const isOpenDetail = (detail: unknown): boolean =>
+  detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+  && typeof (detail as Record<string, unknown>)['open'] === 'boolean'
+  && ((detail as Record<string, unknown>)['reason'] === 'action'
+    || (detail as Record<string, unknown>)['reason'] === 'programmatic'
+    || (detail as Record<string, unknown>)['reason'] === 'light-dismiss'
+    || (detail as Record<string, unknown>)['reason'] === 'escape')
+  && ((detail as Record<string, unknown>)['trigger'] === 'keyboard'
+    || (detail as Record<string, unknown>)['trigger'] === 'pointer'
+    || (detail as Record<string, unknown>)['trigger'] === 'programmatic')
+  && Object.keys(detail as object).every((key) => ['open', 'reason', 'trigger'].includes(key))
+const dispatch = createDispatch(root, emit as (name: string, detail: unknown) => void, {
+  checks: {
+    open: isOpenDetail,
+    close: isOpenDetail,
   },
-  dispatch,
-}
-
-let cleanup: void | (() => void)
-let ready: Promise<void> | undefined
-onMounted(() => {
-  ready = Promise.resolve(controllerModule.default(host as never)).then((result) => {
-    cleanup = result
-  })
+  modeled: ['open', 'trigger'],
 })
-onBeforeUnmount(() => {
-  for (const stop of stops.splice(0)) stop()
-  if (typeof cleanup === 'function') cleanup()
+
+useComponentHost(controllerModule.default, {
+  root,
+  dispatch,
+  props,
+  state: { internalOpen },
 })
 </script>
 

package/vue/UiTopBar.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.2 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.3 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 defineOptions({ inheritAttrs: false })
 </script>

package/vue/UiTree.vue

@@ -1,7 +1,8 @@
-<!-- Generated by HTML Next 1.0.0-alpha.2 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.3 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, ref, shallowRef, watchEffect } from 'vue'
+import { computed, ref } from 'vue'
 import * as controllerModule from '../components/ui-tree/ui-tree.js'
+import { createDispatch, useComponentHost } from './host'
 
 defineOptions({ inheritAttrs: false })
 
@@ -55,143 +56,61 @@ const hostState = computed(() =>
   ].filter(Boolean).join(' ')
 )
 
-/** Dispatches a component event to Vue listeners and, for controllers and page code, on the root. */
-function dispatch(name: string, detail?: unknown): boolean {
-  const declared: Record<string, EventInit | undefined> = {
-    reorder: { bubbles: true, composed: true, cancelable: false },
-    'reorder-rejected': { bubbles: true, composed: true, cancelable: false },
-  }
-  const checks: Record<string, (detail: unknown) => boolean> = {
-    reorder: (detail) =>
-      detail !== null && typeof detail === 'object' && !Array.isArray(detail)
-      && typeof (detail as Record<string, unknown>)['sourceId'] === 'string'
-      && typeof (detail as Record<string, unknown>)['targetId'] === 'string'
-      && ((detail as Record<string, unknown>)['position'] === 'before'
-        || (detail as Record<string, unknown>)['position'] === 'inside'
-        || (detail as Record<string, unknown>)['position'] === 'after')
-      && typeof (detail as Record<string, unknown>)['sourceType'] === 'string'
-      && typeof (detail as Record<string, unknown>)['targetType'] === 'string'
-      && typeof (detail as Record<string, unknown>)['sourceScope'] === 'string'
-      && typeof (detail as Record<string, unknown>)['targetScope'] === 'string'
-      && ((detail as Record<string, unknown>)['trigger'] === 'keyboard'
-        || (detail as Record<string, unknown>)['trigger'] === 'pointer'
-        || (detail as Record<string, unknown>)['trigger'] === 'programmatic')
-      && Object.keys(detail as object).every((key) =>
-        [
-          'sourceId',
-          'targetId',
-          'position',
-          'sourceType',
-          'targetType',
-          'sourceScope',
-          'targetScope',
-          'trigger',
-        ].includes(key)
-      ),
-    'reorder-rejected': (detail) =>
-      detail !== null && typeof detail === 'object' && !Array.isArray(detail)
-      && typeof (detail as Record<string, unknown>)['sourceId'] === 'string'
-      && typeof (detail as Record<string, unknown>)['targetId'] === 'string'
-      && ((detail as Record<string, unknown>)['position'] === 'before'
-        || (detail as Record<string, unknown>)['position'] === 'inside'
-        || (detail as Record<string, unknown>)['position'] === 'after')
-      && (detail as Record<string, unknown>)['reason'] === 'max-depth'
-      && Number.isInteger((detail as Record<string, unknown>)['maxDepth'])
-      && Number.isInteger((detail as Record<string, unknown>)['resultingDepth'])
-      && ((detail as Record<string, unknown>)['trigger'] === 'keyboard'
-        || (detail as Record<string, unknown>)['trigger'] === 'pointer'
-        || (detail as Record<string, unknown>)['trigger'] === 'programmatic')
-      && Object.keys(detail as object).every((key) =>
-        ['sourceId', 'targetId', 'position', 'reason', 'maxDepth', 'resultingDepth', 'trigger']
-          .includes(key)
-      ),
-  }
-  if (detail !== undefined && checks[name] !== undefined && !checks[name]!(detail)) {
-    throw new TypeError(`HR002: Event \`${name}\` detail does not satisfy its declared type.`)
-  }
-  const emitEvent = emit as (name: string, detail: unknown) => void
-  emitEvent(name, detail)
-  if (detail !== null && typeof detail === 'object' && 'maxDepth' in detail) {
-    emitEvent('update:maxDepth', (detail as Record<string, unknown>)['maxDepth'])
-  }
-  return root.value?.dispatchEvent(
-    new CustomEvent(name, { bubbles: true, composed: true, ...declared[name], detail }),
-  ) ?? true
-}
-
-function read(name: string): unknown {
-  return (props as Record<string, unknown>)[name]
-}
-
-function write(name: string, value: unknown): boolean {
-  throw new TypeError(`Only declared state is writable; \`${name}\` is not.`)
-}
-
-const stops: Array<() => void> = []
-const host = {
-  get element(): 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) => typeof name === 'string' && write(name, value),
-  }),
-  refs: {} as Readonly<Record<string, Element>>,
-  elements: new Proxy({} as Record<string, Element | RadioNodeList | undefined>, {
-    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
-    },
-  }),
-  signal<T>(initialValue: T) {
-    const value = shallowRef(initialValue)
-    return {
-      get: (): T => value.value,
-      set: (next: T): void => {
-        if (!Object.is(value.value, next)) value.value = next
-      },
-      update: (next: (current: T) => T): void => {
-        const updated = next(value.value)
-        if (!Object.is(value.value, updated)) value.value = updated
-      },
-    }
+const isReorderDetail = (detail: unknown): boolean =>
+  detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+  && typeof (detail as Record<string, unknown>)['sourceId'] === 'string'
+  && typeof (detail as Record<string, unknown>)['targetId'] === 'string'
+  && ((detail as Record<string, unknown>)['position'] === 'before'
+    || (detail as Record<string, unknown>)['position'] === 'inside'
+    || (detail as Record<string, unknown>)['position'] === 'after')
+  && typeof (detail as Record<string, unknown>)['sourceType'] === 'string'
+  && typeof (detail as Record<string, unknown>)['targetType'] === 'string'
+  && typeof (detail as Record<string, unknown>)['sourceScope'] === 'string'
+  && typeof (detail as Record<string, unknown>)['targetScope'] === 'string'
+  && ((detail as Record<string, unknown>)['trigger'] === 'keyboard'
+    || (detail as Record<string, unknown>)['trigger'] === 'pointer'
+    || (detail as Record<string, unknown>)['trigger'] === 'programmatic')
+  && Object.keys(detail as object).every((key) =>
+    [
+      'sourceId',
+      'targetId',
+      'position',
+      'sourceType',
+      'targetType',
+      'sourceScope',
+      'targetScope',
+      'trigger',
+    ].includes(key)
+  )
+const isReorderRejectedDetail = (detail: unknown): boolean =>
+  detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+  && typeof (detail as Record<string, unknown>)['sourceId'] === 'string'
+  && typeof (detail as Record<string, unknown>)['targetId'] === 'string'
+  && ((detail as Record<string, unknown>)['position'] === 'before'
+    || (detail as Record<string, unknown>)['position'] === 'inside'
+    || (detail as Record<string, unknown>)['position'] === 'after')
+  && (detail as Record<string, unknown>)['reason'] === 'max-depth'
+  && Number.isInteger((detail as Record<string, unknown>)['maxDepth'])
+  && Number.isInteger((detail as Record<string, unknown>)['resultingDepth'])
+  && ((detail as Record<string, unknown>)['trigger'] === 'keyboard'
+    || (detail as Record<string, unknown>)['trigger'] === 'pointer'
+    || (detail as Record<string, unknown>)['trigger'] === 'programmatic')
+  && Object.keys(detail as object).every((key) =>
+    ['sourceId', 'targetId', 'position', 'reason', 'maxDepth', 'resultingDepth', 'trigger']
+      .includes(key)
+  )
+const dispatch = createDispatch(root, emit as (name: string, detail: unknown) => void, {
+  checks: {
+    reorder: isReorderDetail,
+    'reorder-rejected': isReorderRejectedDetail,
   },
-  computed<T>(compute: () => T) {
-    const value = computed(compute)
-    return { get: (): T => value.value }
-  },
-  effect(run: () => void | (() => void)): () => void {
-    const stop = watchEffect((onCleanup) => {
-      const cleanup = run()
-      if (typeof cleanup === 'function') onCleanup(cleanup)
-    }, { flush: 'post' })
-    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 ready: Promise<void> | undefined
-onMounted(() => {
-  ready = Promise.resolve(controllerModule.default(host as never)).then((result) => {
-    cleanup = result
-  })
+  modeled: ['maxDepth'],
 })
-onBeforeUnmount(() => {
-  for (const stop of stops.splice(0)) stop()
-  if (typeof cleanup === 'function') cleanup()
+
+useComponentHost(controllerModule.default, {
+  root,
+  dispatch,
+  props,
 })
 </script>