slidev-theme-practicum 0.1.0 → 0.1.2

package/composables/text-fit-runtime.ts

@@ -43,7 +43,7 @@ export type TextFitAdapter = {
   measure(element: HTMLElement, bounds: FitBounds): TextFitMeasurement
   observe(elements: readonly HTMLElement[], onChange: () => void): () => void
   schedule(callback: () => void): () => void
-  afterFontsReady?(callback: () => void): void
+  afterFontsReady?(callback: () => void): () => void
 }
 
 type MaybeRef<T> = T | Ref<T>
@@ -67,6 +67,7 @@ type GroupFitInput = {
   target: Ref<HTMLElement | null>
   nodes: () => VNode[]
   maxItems?: number
+  sharedKey?: MaybeRef<string>
 }
 
 type TextGroupFitHandle = {
@@ -96,6 +97,22 @@ type SlotTextFitSnapshot = {
   sizes: number[]
 }
 
+type SharedSlotTextFitItem = {
+  target: Ref<HTMLElement | null>
+  nodes: () => VNode[]
+  maxItems: number
+  currentFitGroup: SlotTextFitGroup | null
+  pendingInternalSignature: string | null | undefined
+}
+
+type SharedSlotTextFitGroup = {
+  fitSnapshot: Ref<SlotTextFitSnapshot | null>
+  items: Map<symbol, SharedSlotTextFitItem>
+  runId: number
+  version: number
+}
+
+const sharedGroups = new Map<string, SharedSlotTextFitGroup>()
 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
@@ -173,6 +190,22 @@ function readBounds(input: ElementFitInput) {
   return bounds
 }
 
+function readFitObserverElements(element: HTMLElement) {
+  const elements: HTMLElement[] = [element]
+  let parent = element.parentElement
+
+  while (parent && elements.length < 8) {
+    elements.push(parent)
+
+    if (parent.classList.contains('slidev-page'))
+      break
+
+    parent = parent.parentElement
+  }
+
+  return elements
+}
+
 function createBrowserTextFitAdapter(): TextFitAdapter {
   return {
     measure(element, bounds) {
@@ -215,9 +248,34 @@ function createBrowserTextFitAdapter(): TextFitAdapter {
       return () => globalThis.cancelAnimationFrame(frame)
     },
     afterFontsReady(callback) {
+      let active = true
+      let fallbackTimers: ReturnType<typeof globalThis.setTimeout>[] = []
+      const runIfActive = () => {
+        if (active)
+          callback()
+      }
       const fontReady = globalThis.document?.fonts?.ready
-      if (fontReady)
-        void fontReady.then(callback)
+
+      if (fontReady) {
+        void fontReady.then(runIfActive)
+      }
+      else if (typeof globalThis.setTimeout === 'function') {
+        fallbackTimers = [
+          globalThis.setTimeout(runIfActive, 250),
+          globalThis.setTimeout(runIfActive, 1000),
+        ]
+      }
+
+      return () => {
+        if (!active)
+          return
+
+        active = false
+        for (const timer of fallbackTimers)
+          globalThis.clearTimeout(timer)
+
+        fallbackTimers = []
+      }
     },
   }
 }
@@ -275,6 +333,48 @@ function firstTextFitCandidate(items: SlotTextFitItem[]) {
   return first.value
 }
 
+function readSharedGroupKey(value: MaybeRef<string> | undefined) {
+  if (value == null)
+    return ''
+
+  return String(readMaybeRef(value)).trim()
+}
+
+function createSlotTextFitSignature(items: SlotTextFitItem[]) {
+  return items.map(item => `${item.minSize}-${item.maxSize}:${item.priority}`).join('|')
+}
+
+function combineSlotTextFitGroups(groups: SlotTextFitGroup[]) {
+  if (!groups.length)
+    return null
+
+  const itemCount = groups[0].items.length
+
+  if (!groups.every(group => group.items.length === itemCount))
+    return null
+
+  const items: SlotTextFitItem[] = groups[0].items.map((firstItem, index) => {
+    const groupItems = groups.map(group => group.items[index])
+    const minSize = Math.max(...groupItems.map(item => item.minSize)) as ThemeTextSize
+    const maxSize = Math.min(...groupItems.map(item => item.maxSize)) as ThemeTextSize
+
+    return {
+      minSize,
+      maxSize,
+      priority: firstItem.priority,
+    }
+  })
+
+  if (items.some(item => item.minSize > item.maxSize))
+    throw new Error('[Text] shared size ranges cannot be coordinated because their ranges do not overlap.')
+
+  return {
+    initialSizes: firstTextFitCandidate(items),
+    items,
+    signature: createSlotTextFitSignature(items),
+  }
+}
+
 function readSlotTextFitGroup(nodes: VNode[], maxItems: number): SlotTextFitGroup | null {
   const directNodes = flattenContentNodes(nodes)
 
@@ -300,7 +400,7 @@ function readSlotTextFitGroup(nodes: VNode[], maxItems: number): SlotTextFitGrou
   return {
     initialSizes: firstTextFitCandidate(items),
     items,
-    signature: items.map(item => `${item.minSize}-${item.maxSize}:${item.priority}`).join('|'),
+    signature: createSlotTextFitSignature(items),
   }
 }
 
@@ -339,23 +439,255 @@ function sizesEqual(left: number[], right: number[]) {
 
 function textChildrenFit(element: HTMLElement, adapter: TextFitAdapter) {
   return Array.from(element.children).every((child) => {
-    if (!(child instanceof HTMLElement) || !child.classList.contains('Text'))
+    const textElement = child as HTMLElement
+
+    if (!textElement.classList?.contains('Text'))
       return true
 
-    return adapter.measure(child, {
-      width: child.clientWidth,
+    return adapter.measure(textElement, {
+      width: textElement.clientWidth,
       height: Number.POSITIVE_INFINITY,
     }).fits
   })
 }
 
+function createTextFitCleanupOwner(isDisposed: () => boolean) {
+  let cleanup: (() => void) | null = null
+  let generation = 0
+
+  return {
+    replace(register: (release: () => void) => (() => void) | null) {
+      const registrationGeneration = ++generation
+      const previousCleanup = cleanup
+      cleanup = null
+      previousCleanup?.()
+
+      if (isDisposed() || registrationGeneration !== generation)
+        return
+
+      const release = () => {
+        if (registrationGeneration !== generation)
+          return
+
+        generation += 1
+        cleanup = null
+      }
+      const nextCleanup = register(release)
+
+      if (!nextCleanup)
+        return
+
+      if (isDisposed() || registrationGeneration !== generation) {
+        nextCleanup()
+        return
+      }
+
+      cleanup = nextCleanup
+    },
+    clear() {
+      generation += 1
+      const currentCleanup = cleanup
+      cleanup = null
+      currentCleanup?.()
+    },
+  }
+}
+
+type TextFitLifecycleOwnerInput = {
+  adapter: TextFitAdapter
+  fit: () => void | Promise<void>
+  onDispose: () => void
+  target: Ref<HTMLElement | null>
+  watchTarget?: boolean
+}
+
+function createTextFitLifecycleOwner({
+  adapter,
+  fit,
+  onDispose,
+  target,
+  watchTarget = false,
+}: TextFitLifecycleOwnerInput) {
+  let disposed = false
+  const scheduleCleanup = createTextFitCleanupOwner(() => disposed)
+  const fontCleanup = createTextFitCleanupOwner(() => disposed)
+  const observerCleanup = createTextFitCleanupOwner(() => disposed)
+
+  function scheduleFit() {
+    if (disposed)
+      return
+
+    scheduleCleanup.replace(release => adapter.schedule(() => {
+      release()
+      if (disposed)
+        return
+
+      void fit()
+    }))
+  }
+
+  function reconnectObservers() {
+    observerCleanup.replace(() => {
+      const element = target.value
+      if (!element)
+        return null
+
+      return adapter.observe(readFitObserverElements(element), scheduleFit)
+    })
+  }
+
+  onMounted(async () => {
+    await nextTick()
+    if (disposed)
+      return
+
+    reconnectObservers()
+    scheduleFit()
+    const afterFontsReady = adapter.afterFontsReady
+    fontCleanup.replace(() => afterFontsReady?.(scheduleFit) ?? null)
+  })
+
+  if (watchTarget) {
+    watch(target, async () => {
+      await nextTick()
+      if (disposed)
+        return
+
+      reconnectObservers()
+      scheduleFit()
+    }, { flush: 'post' })
+  }
+
+  onBeforeUnmount(() => {
+    if (disposed)
+      return
+
+    disposed = true
+    fontCleanup.clear()
+    scheduleCleanup.clear()
+    observerCleanup.clear()
+    onDispose()
+  })
+
+  return {
+    scheduleFit,
+  }
+}
+
 export function createTextFitRuntime(adapter: TextFitAdapter = createBrowserTextFitAdapter()): TextFitRuntime {
+  function ensureSharedGroup(key: string) {
+    let group = sharedGroups.get(key)
+
+    if (!group) {
+      group = {
+        fitSnapshot: shallowRef<SlotTextFitSnapshot | null>(null),
+        items: new Map(),
+        runId: 0,
+        version: 0,
+      }
+      sharedGroups.set(key, group)
+    }
+
+    return group
+  }
+
+  function readSharedFitGroup(group: SharedSlotTextFitGroup) {
+    const itemGroups: SlotTextFitGroup[] = []
+
+    for (const item of group.items.values()) {
+      const fitGroup = item.currentFitGroup ?? readSlotTextFitGroup(item.nodes(), item.maxItems)
+      item.currentFitGroup = fitGroup
+
+      if (fitGroup)
+        itemGroups.push(fitGroup)
+    }
+
+    return combineSlotTextFitGroups(itemGroups)
+  }
+
+  function setSharedFitSnapshot(group: SharedSlotTextFitGroup, signature: string, sizes: number[]) {
+    if (group.fitSnapshot.value?.signature === signature && sizesEqual(group.fitSnapshot.value.sizes, sizes))
+      return
+
+    for (const item of group.items.values())
+      item.pendingInternalSignature = signature
+
+    group.fitSnapshot.value = {
+      signature,
+      sizes,
+    }
+  }
+
+  function clearSharedFitSnapshot(group: SharedSlotTextFitGroup) {
+    if (group.fitSnapshot.value) {
+      for (const item of group.items.values())
+        item.pendingInternalSignature = null
+
+      group.fitSnapshot.value = null
+    }
+  }
+
+  function sharedItemsFit(group: SharedSlotTextFitGroup) {
+    for (const item of group.items.values()) {
+      const element = item.target.value
+
+      if (!element)
+        return false
+
+      const ownBounds = {
+        width: element.clientWidth,
+        height: element.clientHeight,
+      }
+
+      if (!adapter.measure(element, ownBounds).fits || !textChildrenFit(element, adapter))
+        return false
+    }
+
+    return true
+  }
+
+  async function fitSharedNow(key: string) {
+    const groupState = sharedGroups.get(key)
+
+    if (!groupState) {
+      return
+    }
+
+    const currentRunId = ++groupState.runId
+    const group = readSharedFitGroup(groupState)
+
+    if (!group) {
+      clearSharedFitSnapshot(groupState)
+      return
+    }
+
+    let fallbackSizes = group.initialSizes
+
+    for (const sizes of createPriorityTextSizeCandidates(group.items)) {
+      fallbackSizes = sizes
+      setSharedFitSnapshot(groupState, group.signature, sizes)
+
+      await nextTick()
+
+      if (currentRunId !== groupState.runId)
+        return
+
+      const currentGroup = readSharedFitGroup(groupState)
+
+      if (!currentGroup || currentGroup.signature !== group.signature)
+        return
+
+      if (sharedItemsFit(groupState))
+        return
+    }
+
+    setSharedFitSnapshot(groupState, group.signature, fallbackSizes)
+  }
+
   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
@@ -399,39 +731,16 @@ export function createTextFitRuntime(adapter: TextFitAdapter = createBrowserText
         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)
+      const { scheduleFit } = createTextFitLifecycleOwner({
+        adapter,
+        fit: fitNow,
+        onDispose: () => {
+          runId += 1
+        },
+        target: input.target,
+        watchTarget: true,
       })
 
-      watch(input.target, async () => {
-        await nextTick()
-        reconnectObservers()
-        scheduleFit()
-      }, { flush: 'post' })
-
       watch(input.enabled, (isEnabled) => {
         if (isEnabled)
           scheduleFit()
@@ -445,12 +754,6 @@ export function createTextFitRuntime(adapter: TextFitAdapter = createBrowserText
         }, { flush: 'post' })
       }
 
-      onBeforeUnmount(() => {
-        cancelSchedule?.()
-        disconnectObservers?.()
-        runId += 1
-      })
-
       return {
         size,
         refit: scheduleFit,
@@ -458,13 +761,57 @@ export function createTextFitRuntime(adapter: TextFitAdapter = createBrowserText
     },
     useGroup(input: GroupFitInput) {
       const maxItems = input.maxItems ?? 3
+      const itemId = Symbol('slot-text-fit-group')
       const fitSnapshot = shallowRef<SlotTextFitSnapshot | null>(null)
       let currentFitGroup: SlotTextFitGroup | null = null
+      let currentSharedKey = ''
+      let appliedSharedSignature: string | null = null
+      let appliedSharedVersion = 0
       let runId = 0
-      let cancelSchedule: (() => void) | null = null
-      let disconnectObservers: (() => void) | null = null
       let pendingInternalSignature: string | null | undefined
 
+      function unregisterSharedItem() {
+        if (!currentSharedKey)
+          return
+
+        const group = sharedGroups.get(currentSharedKey)
+        group?.items.delete(itemId)
+
+        if (group && !group.items.size)
+          sharedGroups.delete(currentSharedKey)
+
+        currentSharedKey = ''
+      }
+
+      function registerSharedItem(key: string) {
+        if (currentSharedKey && currentSharedKey !== key)
+          unregisterSharedItem()
+
+        currentSharedKey = key
+        const group = ensureSharedGroup(key)
+        let item = group.items.get(itemId)
+        let isNew = false
+
+        if (!item) {
+          isNew = true
+          item = {
+            target: input.target,
+            nodes: input.nodes,
+            maxItems,
+            currentFitGroup: null,
+            pendingInternalSignature: undefined,
+          }
+          group.items.set(itemId, item)
+          group.version += 1
+        }
+
+        item.target = input.target
+        item.nodes = input.nodes
+        item.maxItems = maxItems
+
+        return { group, item, isNew }
+      }
+
       function setFitSnapshot(signature: string, sizes: number[]) {
         if (fitSnapshot.value?.signature === signature && sizesEqual(fitSnapshot.value.sizes, sizes))
           return
@@ -484,6 +831,16 @@ export function createTextFitRuntime(adapter: TextFitAdapter = createBrowserText
       }
 
       async function fitNow() {
+        const sharedKey = readSharedGroupKey(input.sharedKey)
+
+        if (sharedKey) {
+          registerSharedItem(sharedKey)
+          await fitSharedNow(sharedKey)
+          return
+        }
+
+        unregisterSharedItem()
+
         const currentRunId = ++runId
         const group = currentFitGroup ?? readSlotTextFitGroup(input.nodes(), maxItems)
         const element = input.target.value
@@ -516,33 +873,34 @@ export function createTextFitRuntime(adapter: TextFitAdapter = createBrowserText
         setFitSnapshot(group.signature, fallbackSizes)
       }
 
-      function scheduleFit() {
-        cancelSchedule?.()
-        cancelSchedule = adapter.schedule(() => {
-          cancelSchedule = null
-          void fitNow()
-        })
-      }
+      const { scheduleFit } = createTextFitLifecycleOwner({
+        adapter,
+        fit: fitNow,
+        onDispose: () => {
+          runId += 1
+          unregisterSharedItem()
+        },
+        target: input.target,
+      })
 
-      function reconnectObservers() {
-        disconnectObservers?.()
-        disconnectObservers = null
+      onUpdated(() => {
+        const sharedKey = readSharedGroupKey(input.sharedKey)
 
-        const element = input.target.value
-        if (!element)
-          return
+        if (sharedKey) {
+          const sharedGroup = sharedGroups.get(sharedKey)
+          const sharedItem = sharedGroup?.items.get(itemId)
+          const internalSignature = sharedItem?.pendingInternalSignature
 
-        disconnectObservers = adapter.observe([element], scheduleFit)
-      }
+          if (sharedItem)
+            sharedItem.pendingInternalSignature = undefined
 
-      onMounted(async () => {
-        await nextTick()
-        reconnectObservers()
-        scheduleFit()
-        adapter.afterFontsReady?.(scheduleFit)
-      })
+          if (internalSignature !== undefined && internalSignature === (sharedGroup ? readSharedFitGroup(sharedGroup)?.signature ?? null : null))
+            return
+
+          scheduleFit()
+          return
+        }
 
-      onUpdated(() => {
         const internalSignature = pendingInternalSignature
         pendingInternalSignature = undefined
 
@@ -552,15 +910,39 @@ export function createTextFitRuntime(adapter: TextFitAdapter = createBrowserText
         scheduleFit()
       })
 
-      onBeforeUnmount(() => {
-        cancelSchedule?.()
-        disconnectObservers?.()
-        runId += 1
-      })
-
       function apply(nodes: VNode[]) {
         const group = readSlotTextFitGroup(nodes, maxItems)
         currentFitGroup = group
+
+        const sharedKey = readSharedGroupKey(input.sharedKey)
+
+        if (sharedKey) {
+          const shared = registerSharedItem(sharedKey)
+          const previousSignature = shared.item.currentFitGroup?.signature ?? null
+          shared.item.currentFitGroup = group
+          const nextSignature = group?.signature ?? null
+
+          if (
+            shared.isNew
+            || previousSignature !== nextSignature
+            || appliedSharedVersion !== shared.group.version
+            || appliedSharedSignature !== nextSignature
+          ) {
+            appliedSharedVersion = shared.group.version
+            appliedSharedSignature = nextSignature
+            scheduleFit()
+          }
+
+          const sharedGroup = readSharedFitGroup(shared.group)
+          const fittedSizes = group && sharedGroup && shared.group.fitSnapshot.value?.signature === sharedGroup.signature
+            ? shared.group.fitSnapshot.value.sizes
+            : sharedGroup?.initialSizes ?? group?.initialSizes ?? null
+
+          return applySlotTextFit(nodes, group, fittedSizes)
+        }
+
+        unregisterSharedItem()
+
         const fittedSizes = group && fitSnapshot.value?.signature === group.signature
           ? fitSnapshot.value.sizes
           : group?.initialSizes ?? null

package/composables/text-fit-scope.ts

@@ -0,0 +1,13 @@
+import { inject, provide } from 'vue'
+
+const textFitScopeKey = Symbol('theme-text-fit-scope')
+
+export function provideTextFitScope() {
+  const scope = `theme-text-fit-${Math.random().toString(36).slice(2, 10)}`
+  provide(textFitScopeKey, scope)
+  return scope
+}
+
+export function useTextFitScope() {
+  return inject(textFitScopeKey, '')
+}