@threadlabs/looma 0.6.4 → 0.6.5

package/vue/UiEditorSlashMenu.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-editor-slash-menu/ui-editor-slash-menu.js'
+import { createDispatch, useComponentHost } from './host'
 import UiIcon from './UiIcon.vue'
 
 defineOptions({ inheritAttrs: false })
@@ -39,115 +40,22 @@ const root = ref<HTMLElement | null>(null)
 const visible = ref(false)
 const active = ref(0)
 
-/** 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> = {
-    highlight: { bubbles: true, composed: true, cancelable: false },
-    select: { bubbles: true, composed: true, cancelable: false },
-  }
-  const checks: Record<string, (detail: unknown) => boolean> = {
-    highlight: (detail) =>
-      detail !== null && typeof detail === 'object' && !Array.isArray(detail)
-      && Number.isInteger((detail as Record<string, unknown>)['index'])
-      && Object.keys(detail as object).every((key) => ['index'].includes(key)),
-    select: (detail) =>
-      detail !== null && typeof detail === 'object' && !Array.isArray(detail)
-      && Number.isInteger((detail as Record<string, unknown>)['index'])
-      && Object.keys(detail as object).every((key) => ['index'].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)
-  return root.value?.dispatchEvent(
-    new CustomEvent(name, { bubbles: true, composed: true, ...declared[name], detail }),
-  ) ?? true
-}
-
-function read(name: string): unknown {
-  if (name === 'visible') return visible.value
-  if (name === 'active') return active.value
-  return (props as Record<string, unknown>)[name]
-}
-
-function write(name: string, value: unknown): boolean {
-  if (name === 'visible') {
-    visible.value = value as never
-    return true
-  }
-  if (name === 'active') {
-    active.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 isHighlightDetail = (detail: unknown): boolean =>
+  detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+  && Number.isInteger((detail as Record<string, unknown>)['index'])
+  && Object.keys(detail as object).every((key) => ['index'].includes(key))
+const dispatch = createDispatch(root, emit as (name: string, detail: unknown) => void, {
+  checks: {
+    highlight: isHighlightDetail,
+    select: isHighlightDetail,
   },
-  dispatch,
-}
-
-let cleanup: void | (() => void)
-let ready: Promise<void> | undefined
-onMounted(() => {
-  ready = Promise.resolve(controllerModule.default(host as never)).then((result) => {
-    cleanup = result
-  })
 })
-onBeforeUnmount(() => {
-  for (const stop of stops.splice(0)) stop()
-  if (typeof cleanup === 'function') cleanup()
+
+useComponentHost(controllerModule.default, {
+  root,
+  dispatch,
+  props,
+  state: { visible, active },
 })
 </script>
 

package/vue/UiEditorTableContextMenu.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-editor-table-context-menu/ui-editor-table-context-menu.js'
+import { createDispatch, useComponentHost } from './host'
 import UiIcon from './UiIcon.vue'
 
 defineOptions({ inheritAttrs: false })
@@ -73,128 +74,39 @@ const sections = ref<
   { heading: string; items: { action: string; label: string; icon: string; danger: boolean }[] }[]
 >([])
 
-/** 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> = {
-    action: { bubbles: true, composed: true, cancelable: false },
-  }
-  const checks: Record<string, (detail: unknown) => boolean> = {
-    action: (detail) =>
-      detail !== null && typeof detail === 'object' && !Array.isArray(detail)
-      && ((detail as Record<string, unknown>)['action'] === 'align-left'
-        || (detail as Record<string, unknown>)['action'] === 'align-center'
-        || (detail as Record<string, unknown>)['action'] === 'align-right'
-        || (detail as Record<string, unknown>)['action'] === 'background-none'
-        || (detail as Record<string, unknown>)['action'] === 'background-gray'
-        || (detail as Record<string, unknown>)['action'] === 'background-yellow'
-        || (detail as Record<string, unknown>)['action'] === 'background-blue'
-        || (detail as Record<string, unknown>)['action'] === 'background-green'
-        || (detail as Record<string, unknown>)['action'] === 'background-red'
-        || (detail as Record<string, unknown>)['action'] === 'add-row-before'
-        || (detail as Record<string, unknown>)['action'] === 'add-row-after'
-        || (detail as Record<string, unknown>)['action'] === 'add-column-before'
-        || (detail as Record<string, unknown>)['action'] === 'add-column-after'
-        || (detail as Record<string, unknown>)['action'] === 'clear-cells'
-        || (detail as Record<string, unknown>)['action'] === 'merge-cells'
-        || (detail as Record<string, unknown>)['action'] === 'split-cell'
-        || (detail as Record<string, unknown>)['action'] === 'delete-row'
-        || (detail as Record<string, unknown>)['action'] === 'delete-column'
-        || (detail as Record<string, unknown>)['action'] === 'delete-table')
-      && Object.keys(detail as object).every((key) => ['action'].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)
-  return root.value?.dispatchEvent(
-    new CustomEvent(name, { bubbles: true, composed: true, ...declared[name], detail }),
-  ) ?? true
-}
-
-function read(name: string): unknown {
-  if (name === 'swatches') return swatches.value
-  if (name === 'sections') return sections.value
-  return (props as Record<string, unknown>)[name]
-}
-
-function write(name: string, value: unknown): boolean {
-  if (name === 'swatches') {
-    swatches.value = value as never
-    return true
-  }
-  if (name === 'sections') {
-    sections.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
-      },
-    }
+const isActionDetail = (detail: unknown): boolean =>
+  detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+  && ((detail as Record<string, unknown>)['action'] === 'align-left'
+    || (detail as Record<string, unknown>)['action'] === 'align-center'
+    || (detail as Record<string, unknown>)['action'] === 'align-right'
+    || (detail as Record<string, unknown>)['action'] === 'background-none'
+    || (detail as Record<string, unknown>)['action'] === 'background-gray'
+    || (detail as Record<string, unknown>)['action'] === 'background-yellow'
+    || (detail as Record<string, unknown>)['action'] === 'background-blue'
+    || (detail as Record<string, unknown>)['action'] === 'background-green'
+    || (detail as Record<string, unknown>)['action'] === 'background-red'
+    || (detail as Record<string, unknown>)['action'] === 'add-row-before'
+    || (detail as Record<string, unknown>)['action'] === 'add-row-after'
+    || (detail as Record<string, unknown>)['action'] === 'add-column-before'
+    || (detail as Record<string, unknown>)['action'] === 'add-column-after'
+    || (detail as Record<string, unknown>)['action'] === 'clear-cells'
+    || (detail as Record<string, unknown>)['action'] === 'merge-cells'
+    || (detail as Record<string, unknown>)['action'] === 'split-cell'
+    || (detail as Record<string, unknown>)['action'] === 'delete-row'
+    || (detail as Record<string, unknown>)['action'] === 'delete-column'
+    || (detail as Record<string, unknown>)['action'] === 'delete-table')
+  && Object.keys(detail as object).every((key) => ['action'].includes(key))
+const dispatch = createDispatch(root, emit as (name: string, detail: unknown) => void, {
+  checks: {
+    action: isActionDetail,
   },
-  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
-  })
 })
-onBeforeUnmount(() => {
-  for (const stop of stops.splice(0)) stop()
-  if (typeof cleanup === 'function') cleanup()
+
+useComponentHost(controllerModule.default, {
+  root,
+  dispatch,
+  props,
+  state: { swatches, sections },
 })
 </script>
 

package/vue/UiEditorTableOverlay.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-editor-table-overlay/ui-editor-table-overlay.js'
+import { createDispatch, useComponentHost } from './host'
 import UiIcon from './UiIcon.vue'
 
 defineOptions({ inheritAttrs: false })
@@ -104,174 +105,67 @@ const active = ref<
 >(null)
 const activeKey = ref('')
 
-/** 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> = {
-    action: { bubbles: true, composed: true, cancelable: false },
-  }
-  const checks: Record<string, (detail: unknown) => boolean> = {
-    action: (detail) =>
-      (detail !== null && typeof detail === 'object' && !Array.isArray(detail)
-        && ((detail as Record<string, unknown>)['action'] === 'add-row-before'
-          || (detail as Record<string, unknown>)['action'] === 'add-row-after'
-          || (detail as Record<string, unknown>)['action'] === 'add-column-before'
-          || (detail as Record<string, unknown>)['action'] === 'add-column-after')
-        && Number.isInteger((detail as Record<string, unknown>)['boundaryIndex'])
-        && Object.keys(detail as object).every((key) => ['action', 'boundaryIndex'].includes(key)))
-      || (detail !== null && typeof detail === 'object' && !Array.isArray(detail)
-        && ((detail as Record<string, unknown>)['action'] === 'select-row'
-          || (detail as Record<string, unknown>)['action'] === 'select-column')
-        && Number.isInteger((detail as Record<string, unknown>)['rowIndex'])
-        && Number.isInteger((detail as Record<string, unknown>)['columnIndex'])
-        && Object.keys(detail as object).every((key) =>
-          ['action', 'rowIndex', 'columnIndex'].includes(key)
+const isActionDetail = (detail: unknown): boolean =>
+  (detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+    && ((detail as Record<string, unknown>)['action'] === 'add-row-before'
+      || (detail as Record<string, unknown>)['action'] === 'add-row-after'
+      || (detail as Record<string, unknown>)['action'] === 'add-column-before'
+      || (detail as Record<string, unknown>)['action'] === 'add-column-after')
+    && Number.isInteger((detail as Record<string, unknown>)['boundaryIndex'])
+    && Object.keys(detail as object).every((key) => ['action', 'boundaryIndex'].includes(key)))
+  || (detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+    && ((detail as Record<string, unknown>)['action'] === 'select-row'
+      || (detail as Record<string, unknown>)['action'] === 'select-column')
+    && Number.isInteger((detail as Record<string, unknown>)['rowIndex'])
+    && Number.isInteger((detail as Record<string, unknown>)['columnIndex'])
+    && Object.keys(detail as object).every((key) =>
+      ['action', 'rowIndex', 'columnIndex'].includes(key)
+    ))
+  || (detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+    && (detail as Record<string, unknown>)['action'] === 'open-cell-menu'
+    && Number.isInteger((detail as Record<string, unknown>)['rowIndex'])
+    && Number.isInteger((detail as Record<string, unknown>)['columnIndex'])
+    && ((detail as Record<string, unknown>)['anchor'] !== null
+      && typeof (detail as Record<string, unknown>)['anchor'] === 'object'
+      && !Array.isArray((detail as Record<string, unknown>)['anchor'])
+      && (typeof ((detail as Record<string, unknown>)['anchor'] as Record<string, unknown>)['left']
+          === 'number'
+        && Number.isFinite(
+          ((detail as Record<string, unknown>)['anchor'] as Record<string, unknown>)['left'],
         ))
-      || (detail !== null && typeof detail === 'object' && !Array.isArray(detail)
-        && (detail as Record<string, unknown>)['action'] === 'open-cell-menu'
-        && Number.isInteger((detail as Record<string, unknown>)['rowIndex'])
-        && Number.isInteger((detail as Record<string, unknown>)['columnIndex'])
-        && ((detail as Record<string, unknown>)['anchor'] !== null
-          && typeof (detail as Record<string, unknown>)['anchor'] === 'object'
-          && !Array.isArray((detail as Record<string, unknown>)['anchor'])
-          && (typeof ((detail as Record<string, unknown>)['anchor'] as Record<string, unknown>)[
-                'left'
-              ] === 'number'
-            && Number.isFinite(
-              ((detail as Record<string, unknown>)['anchor'] as Record<string, unknown>)['left'],
-            ))
-          && (typeof ((detail as Record<string, unknown>)['anchor'] as Record<string, unknown>)[
-                'top'
-              ] === 'number'
-            && Number.isFinite(
-              ((detail as Record<string, unknown>)['anchor'] as Record<string, unknown>)['top'],
-            ))
-          && (typeof ((detail as Record<string, unknown>)['anchor'] as Record<string, unknown>)[
-                'right'
-              ] === 'number'
-            && Number.isFinite(
-              ((detail as Record<string, unknown>)['anchor'] as Record<string, unknown>)['right'],
-            ))
-          && (typeof ((detail as Record<string, unknown>)['anchor'] as Record<string, unknown>)[
-                'bottom'
-              ] === 'number'
-            && Number.isFinite(
-              ((detail as Record<string, unknown>)['anchor'] as Record<string, unknown>)['bottom'],
-            ))
-          && Object.keys((detail as Record<string, unknown>)['anchor'] as object).every((key) =>
-            ['left', 'top', 'right', 'bottom'].includes(key)
-          ))
-        && Object.keys(detail as object).every((key) =>
-          ['action', 'rowIndex', 'columnIndex', 'anchor'].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)
-  return root.value?.dispatchEvent(
-    new CustomEvent(name, { bubbles: true, composed: true, ...declared[name], detail }),
-  ) ?? true
-}
-
-function read(name: string): unknown {
-  if (name === 'rows') return rows.value
-  if (name === 'cols') return cols.value
-  if (name === 'hovered') return hovered.value
-  if (name === 'active') return active.value
-  if (name === 'activeKey') return activeKey.value
-  return (props as Record<string, unknown>)[name]
-}
-
-function write(name: string, value: unknown): boolean {
-  if (name === 'rows') {
-    rows.value = value as never
-    return true
-  }
-  if (name === 'cols') {
-    cols.value = value as never
-    return true
-  }
-  if (name === 'hovered') {
-    hovered.value = value as never
-    return true
-  }
-  if (name === 'active') {
-    active.value = value as never
-    return true
-  }
-  if (name === 'activeKey') {
-    activeKey.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
+      && (typeof ((detail as Record<string, unknown>)['anchor'] as Record<string, unknown>)['top']
+          === 'number'
+        && Number.isFinite(
+          ((detail as Record<string, unknown>)['anchor'] as Record<string, unknown>)['top'],
+        ))
+      && (typeof ((detail as Record<string, unknown>)['anchor'] as Record<string, unknown>)['right']
+          === 'number'
+        && Number.isFinite(
+          ((detail as Record<string, unknown>)['anchor'] as Record<string, unknown>)['right'],
+        ))
+      && (typeof ((detail as Record<string, unknown>)['anchor'] as Record<string, unknown>)[
+            'bottom'
+          ] === 'number'
+        && Number.isFinite(
+          ((detail as Record<string, unknown>)['anchor'] as Record<string, unknown>)['bottom'],
+        ))
+      && Object.keys((detail as Record<string, unknown>)['anchor'] as object).every((key) =>
+        ['left', 'top', 'right', 'bottom'].includes(key)
+      ))
+    && Object.keys(detail as object).every((key) =>
+      ['action', 'rowIndex', 'columnIndex', 'anchor'].includes(key)
+    ))
+const dispatch = createDispatch(root, emit as (name: string, detail: unknown) => void, {
+  checks: {
+    action: isActionDetail,
   },
-  dispatch,
-}
-
-let cleanup: void | (() => void)
-let ready: Promise<void> | undefined
-onMounted(() => {
-  ready = Promise.resolve(controllerModule.default(host as never)).then((result) => {
-    cleanup = result
-  })
 })
-onBeforeUnmount(() => {
-  for (const stop of stops.splice(0)) stop()
-  if (typeof cleanup === 'function') cleanup()
+
+useComponentHost(controllerModule.default, {
+  root,
+  dispatch,
+  props,
+  state: { rows, cols, hovered, active, activeKey },
 })
 </script>