slidev-theme-practicum 0.1.0

package/composables/text-fit-runtime.ts

@@ -0,0 +1,577 @@
+import {
+  Comment,
+  Fragment,
+  Text as VueText,
+  cloneVNode,
+  h,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  onUpdated,
+  ref,
+  shallowRef,
+  watch,
+  type Ref,
+  type VNode,
+  type WatchSource,
+} from 'vue'
+import { createPriorityTextSizeCandidates } from './text-priority-fit.mjs'
+
+export const THEME_TEXT_SIZE_LEVELS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12] as const
+
+export type ThemeTextSize = typeof THEME_TEXT_SIZE_LEVELS[number]
+export type ThemeTextSizeTokenInput = ThemeTextSize | `${ThemeTextSize}`
+export type ThemeTextSizeRangeInput = `${ThemeTextSize}-${ThemeTextSize}`
+export type ThemeTextSizeInput = ThemeTextSizeTokenInput | ThemeTextSizeRangeInput
+
+export type ThemeTextSizeRange = {
+  minSize: ThemeTextSize
+  maxSize: ThemeTextSize
+  isRange: boolean
+}
+
+export type FitBounds = {
+  width: number
+  height: number
+}
+
+export type TextFitMeasurement = {
+  fits: boolean
+}
+
+export type TextFitAdapter = {
+  measure(element: HTMLElement, bounds: FitBounds): TextFitMeasurement
+  observe(elements: readonly HTMLElement[], onChange: () => void): () => void
+  schedule(callback: () => void): () => void
+  afterFontsReady?(callback: () => void): void
+}
+
+type MaybeRef<T> = T | Ref<T>
+
+type ElementFitInput = {
+  target: Ref<HTMLElement | null>
+  enabled: Ref<boolean>
+  fallbackSize: MaybeRef<ThemeTextSize>
+  maxSize?: MaybeRef<ThemeTextSize>
+  minSize?: MaybeRef<ThemeTextSize>
+  resolveBounds?: () => FitBounds | null
+  watchSources?: WatchSource<unknown>[]
+}
+
+type TextFitHandle = {
+  size: Ref<ThemeTextSize>
+  refit: () => void
+}
+
+type GroupFitInput = {
+  target: Ref<HTMLElement | null>
+  nodes: () => VNode[]
+  maxItems?: number
+}
+
+type TextGroupFitHandle = {
+  apply(nodes: VNode[]): VNode[]
+  refit: () => void
+}
+
+export type TextFitRuntime = {
+  useElement(input: ElementFitInput): TextFitHandle
+  useGroup(input: GroupFitInput): TextGroupFitHandle
+}
+
+type SlotTextFitItem = {
+  minSize: ThemeTextSize
+  maxSize: ThemeTextSize
+  priority: number
+}
+
+type SlotTextFitGroup = {
+  initialSizes: number[]
+  items: SlotTextFitItem[]
+  signature: string
+}
+
+type SlotTextFitSnapshot = {
+  signature: string
+  sizes: number[]
+}
+
+const THEME_TEXT_SIZE_SET = new Set<string>(THEME_TEXT_SIZE_LEVELS.map(String))
+const DEFAULT_MAX_TEXT_SIZE = THEME_TEXT_SIZE_LEVELS[THEME_TEXT_SIZE_LEVELS.length - 1]
+const FIT_TOLERANCE = 1
+
+function readMaybeRef<T>(value: MaybeRef<T>) {
+  if (typeof value === 'object' && value !== null && 'value' in value)
+    return value.value
+
+  return value
+}
+
+export function normalizeThemeTextSize(value: unknown, fallbackSize: ThemeTextSize): ThemeTextSize {
+  const normalizedValue = String(value)
+
+  if (!THEME_TEXT_SIZE_SET.has(normalizedValue))
+    return fallbackSize
+
+  return Number(normalizedValue) as ThemeTextSize
+}
+
+export function parseThemeTextSizeRange(value: unknown, fallbackSize: ThemeTextSize): ThemeTextSizeRange {
+  const normalizedValue = String(value)
+  const rangeMatch = normalizedValue.match(/^(\d+)-(\d+)$/)
+
+  if (!rangeMatch) {
+    const size = normalizeThemeTextSize(value, fallbackSize)
+
+    return {
+      minSize: size,
+      maxSize: size,
+      isRange: false,
+    }
+  }
+
+  const minSize = normalizeThemeTextSize(rangeMatch[1], fallbackSize)
+  const maxSize = normalizeThemeTextSize(rangeMatch[2], fallbackSize)
+
+  if (String(minSize) !== rangeMatch[1] || String(maxSize) !== rangeMatch[2] || minSize > maxSize) {
+    return {
+      minSize: fallbackSize,
+      maxSize: fallbackSize,
+      isRange: false,
+    }
+  }
+
+  return {
+    minSize,
+    maxSize,
+    isRange: true,
+  }
+}
+
+function defaultBounds(target: Ref<HTMLElement | null>) {
+  const parent = target.value?.parentElement
+
+  if (!parent)
+    return null
+
+  const parentStyle = getComputedStyle(parent)
+  const horizontalPadding = Number.parseFloat(parentStyle.paddingLeft) + Number.parseFloat(parentStyle.paddingRight)
+  const verticalPadding = Number.parseFloat(parentStyle.paddingTop) + Number.parseFloat(parentStyle.paddingBottom)
+
+  return {
+    width: parent.clientWidth - horizontalPadding,
+    height: parent.clientHeight - verticalPadding,
+  }
+}
+
+function readBounds(input: ElementFitInput) {
+  const bounds = input.resolveBounds?.() ?? defaultBounds(input.target)
+
+  if (!bounds || bounds.width <= 0 || bounds.height <= 0)
+    return null
+
+  return bounds
+}
+
+function createBrowserTextFitAdapter(): TextFitAdapter {
+  return {
+    measure(element, bounds) {
+      return {
+        fits: element.scrollWidth <= Math.ceil(bounds.width) + FIT_TOLERANCE
+          && element.scrollHeight <= Math.ceil(bounds.height) + FIT_TOLERANCE,
+      }
+    },
+    observe(elements, onChange) {
+      const resizeObserver = typeof globalThis.ResizeObserver === 'function'
+        ? new globalThis.ResizeObserver(onChange)
+        : null
+      const mutationObserver = typeof globalThis.MutationObserver === 'function'
+        ? new globalThis.MutationObserver(onChange)
+        : null
+
+      for (const element of elements)
+        resizeObserver?.observe(element)
+
+      if (elements[0]) {
+        mutationObserver?.observe(elements[0], {
+          characterData: true,
+          childList: true,
+          subtree: true,
+        })
+      }
+
+      return () => {
+        resizeObserver?.disconnect()
+        mutationObserver?.disconnect()
+      }
+    },
+    schedule(callback) {
+      if (typeof globalThis.requestAnimationFrame !== 'function') {
+        callback()
+        return () => {}
+      }
+
+      const frame = globalThis.requestAnimationFrame(callback)
+      return () => globalThis.cancelAnimationFrame(frame)
+    },
+    afterFontsReady(callback) {
+      const fontReady = globalThis.document?.fonts?.ready
+      if (fontReady)
+        void fontReady.then(callback)
+    },
+  }
+}
+
+function isBlankSlotNode(node: VNode) {
+  if (node.type === Comment)
+    return true
+
+  return node.type === VueText
+    && typeof node.children === 'string'
+    && !node.children.trim()
+}
+
+function isFragmentSlotNode(node: VNode) {
+  return node.type === Fragment && Array.isArray(node.children)
+}
+
+function readVNodeProp(node: VNode, key: string) {
+  const props = (node.props ?? {}) as Record<string, unknown>
+  return props[key]
+}
+
+function isTextSlotNode(node: VNode) {
+  if (typeof node.type !== 'object' || node.type == null)
+    return false
+
+  const component = node.type as { name?: string, __name?: string }
+  return component.name === 'Text' || component.__name === 'Text'
+}
+
+function flattenContentNodes(nodes: VNode[]): VNode[] {
+  return nodes.flatMap((node) => {
+    if (isFragmentSlotNode(node))
+      return flattenContentNodes(node.children as VNode[])
+
+    return isBlankSlotNode(node) ? [] : [node]
+  })
+}
+
+function normalizeTextPriority(value: unknown) {
+  const priority = Number(value ?? 1)
+
+  if (!Number.isInteger(priority) || priority < 1)
+    return 1
+
+  return priority
+}
+
+function firstTextFitCandidate(items: SlotTextFitItem[]) {
+  const first = createPriorityTextSizeCandidates(items).next()
+
+  if (first.done || !first.value)
+    throw new Error('[Text] size ranges cannot satisfy priority hierarchy.')
+
+  return first.value
+}
+
+function readSlotTextFitGroup(nodes: VNode[], maxItems: number): SlotTextFitGroup | null {
+  const directNodes = flattenContentNodes(nodes)
+
+  if (!directNodes.length || !directNodes.every(isTextSlotNode))
+    return null
+
+  const items: SlotTextFitItem[] = directNodes.map((node) => {
+    const sizeRange = parseThemeTextSizeRange(readVNodeProp(node, 'size') ?? '2', 2)
+
+    return {
+      minSize: sizeRange.minSize,
+      maxSize: sizeRange.maxSize,
+      priority: normalizeTextPriority(readVNodeProp(node, 'priority')),
+    }
+  })
+
+  if (!items.some(item => item.minSize !== item.maxSize))
+    return null
+
+  if (items.length > maxItems)
+    throw new Error(`[Slot] coordinated text fitting supports up to ${maxItems} direct Text children.`)
+
+  return {
+    initialSizes: firstTextFitCandidate(items),
+    items,
+    signature: items.map(item => `${item.minSize}-${item.maxSize}:${item.priority}`).join('|'),
+  }
+}
+
+function applySlotTextFit(nodes: VNode[], group: SlotTextFitGroup | null, sizes: number[] | null) {
+  if (!group || !sizes)
+    return nodes
+
+  const resolvedSizes = sizes
+  let childNumber = 0
+
+  function applyNode(node: VNode): VNode {
+    if (isFragmentSlotNode(node))
+      return h(Fragment, null, (node.children as VNode[]).map(applyNode))
+
+    if (isBlankSlotNode(node))
+      return node
+
+    childNumber += 1
+
+    if (!isTextSlotNode(node))
+      return node
+
+    const size = resolvedSizes[childNumber - 1]
+
+    return cloneVNode(node, {
+      size: String(size),
+    })
+  }
+
+  return nodes.map(applyNode)
+}
+
+function sizesEqual(left: number[], right: number[]) {
+  return left.length === right.length && left.every((size, index) => size === right[index])
+}
+
+function textChildrenFit(element: HTMLElement, adapter: TextFitAdapter) {
+  return Array.from(element.children).every((child) => {
+    if (!(child instanceof HTMLElement) || !child.classList.contains('Text'))
+      return true
+
+    return adapter.measure(child, {
+      width: child.clientWidth,
+      height: Number.POSITIVE_INFINITY,
+    }).fits
+  })
+}
+
+export function createTextFitRuntime(adapter: TextFitAdapter = createBrowserTextFitAdapter()): TextFitRuntime {
+  return {
+    useElement(input: ElementFitInput) {
+      const size = ref<ThemeTextSize>(readMaybeRef(input.fallbackSize))
+      let runId = 0
+      let cancelSchedule: (() => void) | null = null
+      let disconnectObservers: (() => void) | null = null
+
+      async function fitNow() {
+        const currentRunId = ++runId
+        const element = input.target.value
+
+        if (!input.enabled.value) {
+          size.value = readMaybeRef(input.fallbackSize)
+          return
+        }
+
+        if (!element)
+          return
+
+        const resolvedMinSize = readMaybeRef(input.minSize ?? 0)
+        const resolvedMaxSize = input.maxSize == null ? DEFAULT_MAX_TEXT_SIZE : readMaybeRef(input.maxSize)
+        const candidateSizes = THEME_TEXT_SIZE_LEVELS
+          .filter(candidateSize => candidateSize >= resolvedMinSize && candidateSize <= resolvedMaxSize)
+          .slice()
+          .reverse()
+
+        let resolvedSize = candidateSizes[candidateSizes.length - 1] ?? readMaybeRef(input.fallbackSize)
+
+        for (const candidateSize of candidateSizes) {
+          size.value = candidateSize
+          await nextTick()
+
+          if (currentRunId !== runId || !input.enabled.value)
+            return
+
+          const bounds = readBounds(input)
+
+          if (!bounds)
+            return
+
+          if (adapter.measure(element, bounds).fits) {
+            resolvedSize = candidateSize
+            break
+          }
+        }
+
+        size.value = resolvedSize
+      }
+
+      function scheduleFit() {
+        cancelSchedule?.()
+        cancelSchedule = adapter.schedule(() => {
+          cancelSchedule = null
+          void fitNow()
+        })
+      }
+
+      function reconnectObservers() {
+        disconnectObservers?.()
+        disconnectObservers = null
+
+        const element = input.target.value
+        if (!element)
+          return
+
+        const observedElements = element.parentElement ? [element, element.parentElement] : [element]
+        disconnectObservers = adapter.observe(observedElements, scheduleFit)
+      }
+
+      onMounted(async () => {
+        await nextTick()
+        reconnectObservers()
+        scheduleFit()
+        adapter.afterFontsReady?.(scheduleFit)
+      })
+
+      watch(input.target, async () => {
+        await nextTick()
+        reconnectObservers()
+        scheduleFit()
+      }, { flush: 'post' })
+
+      watch(input.enabled, (isEnabled) => {
+        if (isEnabled)
+          scheduleFit()
+        else
+          size.value = readMaybeRef(input.fallbackSize)
+      }, { flush: 'post' })
+
+      if (input.watchSources && input.watchSources.length > 0) {
+        watch(input.watchSources, () => {
+          scheduleFit()
+        }, { flush: 'post' })
+      }
+
+      onBeforeUnmount(() => {
+        cancelSchedule?.()
+        disconnectObservers?.()
+        runId += 1
+      })
+
+      return {
+        size,
+        refit: scheduleFit,
+      }
+    },
+    useGroup(input: GroupFitInput) {
+      const maxItems = input.maxItems ?? 3
+      const fitSnapshot = shallowRef<SlotTextFitSnapshot | null>(null)
+      let currentFitGroup: SlotTextFitGroup | null = null
+      let runId = 0
+      let cancelSchedule: (() => void) | null = null
+      let disconnectObservers: (() => void) | null = null
+      let pendingInternalSignature: string | null | undefined
+
+      function setFitSnapshot(signature: string, sizes: number[]) {
+        if (fitSnapshot.value?.signature === signature && sizesEqual(fitSnapshot.value.sizes, sizes))
+          return
+
+        pendingInternalSignature = signature
+        fitSnapshot.value = {
+          signature,
+          sizes,
+        }
+      }
+
+      function clearFitSnapshot() {
+        if (fitSnapshot.value) {
+          pendingInternalSignature = null
+          fitSnapshot.value = null
+        }
+      }
+
+      async function fitNow() {
+        const currentRunId = ++runId
+        const group = currentFitGroup ?? readSlotTextFitGroup(input.nodes(), maxItems)
+        const element = input.target.value
+
+        if (!group || !element) {
+          clearFitSnapshot()
+          return
+        }
+
+        let fallbackSizes = group.initialSizes
+
+        for (const sizes of createPriorityTextSizeCandidates(group.items)) {
+          fallbackSizes = sizes
+          setFitSnapshot(group.signature, sizes)
+
+          await nextTick()
+
+          if (currentRunId !== runId || currentFitGroup?.signature !== group.signature)
+            return
+
+          const ownBounds = {
+            width: element.clientWidth,
+            height: element.clientHeight,
+          }
+
+          if (adapter.measure(element, ownBounds).fits && textChildrenFit(element, adapter))
+            return
+        }
+
+        setFitSnapshot(group.signature, fallbackSizes)
+      }
+
+      function scheduleFit() {
+        cancelSchedule?.()
+        cancelSchedule = adapter.schedule(() => {
+          cancelSchedule = null
+          void fitNow()
+        })
+      }
+
+      function reconnectObservers() {
+        disconnectObservers?.()
+        disconnectObservers = null
+
+        const element = input.target.value
+        if (!element)
+          return
+
+        disconnectObservers = adapter.observe([element], scheduleFit)
+      }
+
+      onMounted(async () => {
+        await nextTick()
+        reconnectObservers()
+        scheduleFit()
+        adapter.afterFontsReady?.(scheduleFit)
+      })
+
+      onUpdated(() => {
+        const internalSignature = pendingInternalSignature
+        pendingInternalSignature = undefined
+
+        if (internalSignature !== undefined && internalSignature === (currentFitGroup?.signature ?? null))
+          return
+
+        scheduleFit()
+      })
+
+      onBeforeUnmount(() => {
+        cancelSchedule?.()
+        disconnectObservers?.()
+        runId += 1
+      })
+
+      function apply(nodes: VNode[]) {
+        const group = readSlotTextFitGroup(nodes, maxItems)
+        currentFitGroup = group
+        const fittedSizes = group && fitSnapshot.value?.signature === group.signature
+          ? fitSnapshot.value.sizes
+          : group?.initialSizes ?? null
+
+        return applySlotTextFit(nodes, group, fittedSizes)
+      }
+
+      return {
+        apply,
+        refit: scheduleFit,
+      }
+    },
+  }
+}