@tanstack/redact 0.0.20 → 0.1.0

package/src/dom/features/view-transition/full.ts

@@ -0,0 +1,288 @@
+import type { FiberRoot } from '../../../core'
+import { ReactSharedInternals } from '../../../react/shared-internals'
+import { currentCommit, prepareCommit, commitBeforeMutation, commitMutation, commitSynchronously, type CommitPlan } from '../../commit'
+import { prepareViewTransition } from './visual'
+import { recoverRootError } from '../../reconcile'
+
+type Work = { commit: () => void; scopes: Set<Set<string>> }
+type Visual = NonNullable<ReturnType<typeof prepareViewTransition>>
+interface Transaction {
+  native?: ViewTransition
+  visual: Visual
+  work: Map<FiberRoot, Work>
+  layout: Array<() => void>
+  passive: Array<() => void>
+  consumed: boolean
+  cancelled: boolean
+  ready: boolean
+  plans: CommitPlan[]
+  preparing: boolean
+}
+interface Coordinator {
+  queued: Map<FiberRoot, Work>
+  active?: Transaction | undefined
+  flush: () => void
+  scheduled: boolean
+}
+
+const marks = new Map<FiberRoot, Set<Set<string>> | null>()
+const documents = new Map<Document, Coordinator>()
+let committing: Transaction | undefined
+
+function ownerDocument(root: FiberRoot): Document {
+  return root.c.nodeType === 9 ? root.c as unknown as Document : root.c.ownerDocument!
+}
+
+function drain(queue: Array<() => void>): void {
+  while (queue.length) queue.shift()!()
+}
+
+function passive(transaction: Transaction): void {
+  if (transaction.consumed) transaction.visual.restore()
+  drain(transaction.passive)
+}
+
+function release(doc: Document, coordinator: Coordinator): void {
+  if (!coordinator.active && !coordinator.queued.size && documents.get(doc) === coordinator) documents.delete(doc)
+}
+
+function render(work: Map<FiberRoot, Work>): void {
+  for (const entry of work.values()) entry.commit()
+}
+
+function prepareRoot(transaction: Transaction, root: FiberRoot, commit: () => void): void {
+  try {
+    prepareCommit(() => {
+      transaction.plans.push(currentCommit!)
+      commit()
+    })
+  } catch (error) {
+    transaction.plans.pop()
+    if (!recoverRootError(error)) throw error
+    transaction.work.delete(root)
+    transaction.visual.exclude(root)
+  }
+}
+
+function beforeMutation(transaction: Transaction): void {
+  for (const plan of transaction.plans) commitBeforeMutation(plan)
+}
+
+function mutation(transaction: Transaction): void {
+  for (const plan of transaction.plans) commitMutation(plan)
+}
+
+export function markTransitionUpdate(root: FiberRoot): void {
+  if (committing) return
+  const coordinator = documents.size ? documents.get(ownerDocument(root)) : undefined
+  if (coordinator?.active) passive(coordinator.active)
+  const scope = ReactSharedInternals.T
+  if (scope) {
+    if (marks.get(root) !== null) {
+      let scopes = marks.get(root)
+      if (!scopes) marks.set(root, scopes = new Set())
+      scopes.add(scope)
+    }
+  } else {
+    if (marks.has(root)) marks.set(root, null)
+    if (coordinator) cancel(coordinator)
+  }
+}
+
+export function deferTransition(root: FiberRoot, commit: () => void, flush: () => void): boolean {
+  if (committing?.preparing && !currentCommit && ownerDocument(root) === committing.visual.document) {
+    prepareRoot(committing, root, commit)
+    return true
+  }
+  if (!marks.size && !documents.size) return false
+  const scopes = marks.get(root)
+  marks.delete(root)
+  const doc = ownerDocument(root)
+  const activeCoordinator = documents.get(doc)
+  if (activeCoordinator?.active?.plans.length && !activeCoordinator.active.consumed && !currentCommit) {
+    // A reentrant urgent render must consume the already-rendered commit
+    // before reconciling another tree against it.
+    if (committing || !scopes) cancel(activeCoordinator)
+  }
+  if (committing || !scopes || !doc.startViewTransition) return false
+  let coordinator = documents.get(doc)
+  if (!coordinator) {
+    coordinator = { queued: new Map(), flush, scheduled: false }
+    documents.set(doc, coordinator)
+  }
+  const existing = coordinator.queued.get(root)
+  if (existing) for (const scope of scopes) existing.scopes.add(scope)
+  else coordinator.queued.set(root, { commit, scopes })
+  kick(doc, coordinator)
+  return true
+}
+
+function kick(doc: Document, coordinator: Coordinator): void {
+  if (coordinator.active || coordinator.scheduled || !coordinator.queued.size) return
+  coordinator.scheduled = true
+  queueMicrotask(async () => {
+    coordinator.scheduled = false
+    if (coordinator.active || !coordinator.queued.size) return
+    const work = coordinator.queued
+    coordinator.queued = new Map()
+    const types = new Set<string>()
+    for (const entry of work.values()) for (const scope of entry.scopes) for (const type of scope) types.add(type)
+    const visual = prepareViewTransition(work.keys(), [...types])
+    if (!visual) {
+      commitSynchronously(() => render(work))
+      release(doc, coordinator)
+      return
+    }
+    const transaction: Transaction = { visual, work, layout: [], passive: [], plans: [], preparing: true, consumed: false, cancelled: false, ready: false }
+    coordinator.active = transaction
+    try {
+      try {
+        within(transaction, () => {
+          for (const [root, entry] of work) prepareRoot(transaction, root, entry.commit)
+          coordinator.flush()
+        })
+      } finally { transaction.preparing = false }
+      const resources = visual.prepare()
+      if (resources) await resources
+      if (transaction.cancelled) return
+      within(transaction, () => beforeMutation(transaction))
+      if (!visual.beforeCommit()) {
+        cancel(coordinator)
+        return
+      }
+    } catch (error) {
+      cancel(coordinator)
+      report(transaction, error)
+      return
+    }
+    const update = () => {
+      if (transaction.consumed) return
+      transaction.consumed = true
+      const navigation = (doc.defaultView as any)?.navigation?.transition
+      const fonts = doc.fonts
+      const wasLoaded = fonts?.status === 'loaded'
+      within(transaction, () => {
+        mutation(transaction)
+        coordinator.flush()
+      })
+      const finishCommit = () => {
+        if (transaction.cancelled) return
+        within(transaction, () => { drain(transaction.layout); coordinator.flush() })
+        if (navigation) return navigation.finished.catch(() => {}).then(() => {
+          if (!transaction.cancelled) visual.afterCommit()
+        })
+        visual.afterCommit()
+      }
+      const resources = visual.waitForResources(!!wasLoaded)
+      if (resources) return resources.then(finishCommit)
+      return finishCommit()
+    }
+    try {
+      const native = transaction.native = doc.startViewTransition({ update, types: [...types] })
+      native.updateCallbackDone.catch(error => report(transaction, error))
+      native.ready.then(() => {
+        if (!transaction.cancelled) {
+          transaction.ready = true
+          try { visual.ready() } catch (error) { report(transaction, error) }
+        }
+      }, error => {
+        try {
+          if (!transaction.cancelled && reportable(error)) {
+            const root = transaction.work.keys().next().value
+            if (root?.re) root.re(error, { componentStack: null })
+            else if (typeof reportError === 'function') reportError(error)
+            else queueMicrotask(() => { throw error })
+          }
+        } finally {
+          transaction.cancelled = true
+          try { visual.cancel() } finally { consume(transaction) }
+        }
+      })
+      native.finished.then(() => finish(doc, coordinator, transaction), () => finish(doc, coordinator, transaction))
+    } catch {
+      cancel(coordinator)
+    }
+  })
+}
+
+function reportable(error: unknown): boolean {
+  return error !== null && !(error && typeof error === 'object' && 'name' in error && error.name === 'InvalidStateError' &&
+    'message' in error && (
+      error.message === 'View transition was skipped because document visibility state is hidden.' ||
+      error.message === 'Skipping view transition because document visibility state has become hidden.' ||
+      error.message === 'Skipping view transition because viewport size changed.' ||
+      error.message === 'Transition was aborted because of invalid state'
+    ))
+}
+
+function consume(transaction: Transaction): void {
+  transaction.consumed = true
+  within(transaction, () => {
+    beforeMutation(transaction)
+    mutation(transaction)
+  })
+  drain(transaction.layout)
+}
+
+function within(transaction: Transaction, work: () => void): void {
+  const previous = committing
+  committing = transaction
+  try { work() } finally { committing = previous }
+}
+
+function report(transaction: Transaction, error: unknown): void {
+  const root = transaction.work.keys().next().value
+  if (root?.ue) root.ue(error, { componentStack: null })
+  else queueMicrotask(() => { throw error })
+}
+
+function finish(doc: Document, coordinator: Coordinator, transaction: Transaction): void {
+  if (coordinator.active === transaction) coordinator.active = undefined
+  try { passive(transaction) } catch (error) { report(transaction, error) } finally {
+    try { transaction.visual.finish() } catch (error) { report(transaction, error) } finally {
+      if (coordinator.queued.size) kick(doc, coordinator)
+      else release(doc, coordinator)
+    }
+  }
+}
+
+function cancel(coordinator: Coordinator): void {
+  const transaction = coordinator.active
+  const queued = coordinator.queued
+  const root = queued.keys().next().value
+  const doc = transaction?.visual.document ?? (root ? ownerDocument(root) : undefined)
+  coordinator.queued = new Map()
+  if (transaction) {
+    if (!transaction.ready) {
+      coordinator.active = undefined
+      transaction.cancelled = true
+      transaction.native?.skipTransition()
+      try { transaction.visual.cancel() } catch (error) { report(transaction, error) }
+    }
+    consume(transaction)
+    passive(transaction)
+  }
+  commitSynchronously(() => render(queued))
+  if (doc) release(doc, coordinator)
+}
+
+export function cancelTransitions(): void {
+  if (!marks.size && !documents.size) return
+  marks.clear()
+  for (const [doc, coordinator] of [...documents]) {
+    cancel(coordinator)
+    release(doc, coordinator)
+  }
+}
+
+export function deferTransitionLayout(work: () => void): boolean {
+  if (!committing) return false
+  committing.layout.push(work)
+  return true
+}
+
+export function deferTransitionPassive(work: () => void): boolean {
+  if (!committing) return false
+  committing.passive.push(work)
+  return true
+}

package/src/dom/features/view-transition/index.ts

@@ -0,0 +1 @@
+export * from './full'

package/src/dom/features/view-transition/resources.ts

@@ -0,0 +1,107 @@
+export type TransitionImages = Map<HTMLImageElement, { src?: unknown; srcSet?: unknown; onLoad?: unknown; loading?: unknown }>
+
+let imageBudget = 0
+
+function imageBytes(image: HTMLImageElement): number {
+  return (image.width || 100) * (image.height || 100) * (image.ownerDocument.defaultView?.devicePixelRatio || 1) * 0.25
+}
+
+function staticResource(type: string): boolean {
+  return /^(css|script|font|img|image|input|link)$/.test(type)
+}
+
+// Match React's estimate from up to eleven groups of overlapping transfers,
+// falling back to the browser's downlink estimate and then 5 Mbps.
+function bandwidth(doc: Document): number {
+  const view = doc.defaultView!
+  const entries = view.performance.getEntriesByType?.('resource') as PerformanceResourceTiming[] | undefined
+  let count = 0, bits = 0
+  for (let i = 0; entries && i < entries.length; i++) {
+    const entry = entries[i]!
+    if (!entry.transferSize || !entry.duration || !staticResource(entry.initiatorType)) continue
+    let overlap = 0
+    for (++i; i < entries.length; i++) {
+      const next = entries[i]!
+      if (next.startTime > entry.responseEnd) break
+      if (next.transferSize && staticResource(next.initiatorType)) {
+        overlap += next.transferSize * (next.responseEnd < entry.responseEnd ? 1 :
+          (entry.responseEnd - next.startTime) / (next.responseEnd - next.startTime))
+      }
+    }
+    i--
+    bits += 8 * (entry.transferSize + overlap) / (entry.duration / 1000)
+    if (++count > 10) break
+  }
+  if (count) return bits / count / 1000000
+  const downlink = (view.navigator as any).connection?.downlink
+  return typeof downlink === 'number' ? downlink : 5
+}
+
+export function transitionResources(doc: Document, previous: TransitionImages, next: TransitionImages) {
+  const pending: HTMLImageElement[] = []
+  const releases = new Set<() => void>()
+
+  function wait(promises: Promise<unknown>[], timeout: number, cleanups: Array<() => void> = []): Promise<void> | undefined {
+    if (!promises.length) return
+    return new Promise(resolve => {
+      const finish = () => {
+        if (!releases.delete(finish)) return
+        clearTimeout(timer)
+        for (const cleanup of cleanups) cleanup()
+        resolve()
+      }
+      const timer = setTimeout(finish, timeout)
+      releases.add(finish)
+      Promise.all(promises).then(finish, finish)
+    })
+  }
+
+  return {
+    before() {
+      const promises: Promise<unknown>[] = []
+      let bytes = 0
+      for (const [image, props] of next) {
+        const old = previous.get(image)
+        if (props.src == null || props.src === '' || props.onLoad != null || props.loading === 'lazy' ||
+          (old && props.src === old.src && props.srcSet === old.srcSet) || typeof image.decode !== 'function') continue
+        if (!image.complete) { pending.push(image); bytes += imageBytes(image) }
+        promises.push(image.decode().catch(() => {}))
+      }
+      if (bytes && !imageBudget) imageBudget = 125 * bandwidth(doc) * 500
+      return wait(promises, bytes > imageBudget ? 50 : 800)
+    },
+    after(fontsWereLoaded: boolean) {
+      const promises: Promise<unknown>[] = []
+      const cleanups: Array<() => void> = []
+      if (fontsWereLoaded) {
+        // Discover fonts introduced by mutation before the browser captures.
+        doc.documentElement.getBoundingClientRect()
+        if (doc.fonts.status === 'loading') promises.push(doc.fonts.ready)
+      }
+      const images: HTMLImageElement[] = []
+      let bytes = 0
+      const view = doc.defaultView!
+      for (const image of pending) {
+        if (image.complete) continue
+        const rect = image.getBoundingClientRect()
+        if (rect.bottom <= 0 || rect.right <= 0 || rect.top >= view.innerHeight || rect.left >= view.innerWidth) continue
+        bytes += imageBytes(image)
+        if (bytes > imageBudget) { images.length = 0; break }
+        images.push(image)
+      }
+      for (const image of images) {
+        promises.push(new Promise<void>(resolve => {
+          const loaded = () => resolve()
+          image.addEventListener('load', loaded)
+          image.addEventListener('error', loaded)
+          cleanups.push(() => {
+            image.removeEventListener('load', loaded)
+            image.removeEventListener('error', loaded)
+          })
+        }))
+      }
+      return wait(promises, 500, cleanups)
+    },
+    cancel() { for (const release of releases) release() },
+  }
+}

package/src/dom/features/view-transition/stub.ts

@@ -0,0 +1,7 @@
+import type { FiberRoot } from '../../../core'
+
+export function markTransitionUpdate(_root: FiberRoot): void {}
+export function deferTransition(_root: FiberRoot, _commit: () => void, _flush: () => void): boolean { return false }
+export function cancelTransitions(): void {}
+export function deferTransitionLayout(_work: () => void): boolean { return false }
+export function deferTransitionPassive(_work: () => void): boolean { return false }