@tanstack/start-client-core 1.169.4 → 1.170.1

package/src/hydration/visible.ts

@@ -0,0 +1,90 @@
+import type { HydrationPrefetchStrategy } from './types'
+
+const visibleType = 'visible'
+
+export type VisibleHydrationOptions = {
+  rootMargin?: string
+  threshold?: number | Array<number>
+}
+
+type VisibleObserverEntry = {
+  key: string
+  observer: IntersectionObserver
+  elements: Map<Element, Set<() => void>>
+}
+
+const observerRegistry = /* @__PURE__ */ new Map<string, VisibleObserverEntry>()
+
+function cleanupVisibleObserverEntry(observerEntry: VisibleObserverEntry) {
+  if (observerEntry.elements.size > 0) return
+  observerEntry.observer.disconnect()
+  observerRegistry.delete(observerEntry.key)
+}
+
+/* @__NO_SIDE_EFFECTS__ */
+export function visible(
+  options: VisibleHydrationOptions = {},
+): HydrationPrefetchStrategy<typeof visibleType> {
+  const rootMargin = options.rootMargin ?? '600px'
+  const threshold = options.threshold ?? 0
+
+  return {
+    _t: visibleType,
+    _s: ({ element, gate, prefetch }) => {
+      const callback = prefetch ?? gate!.resolve
+
+      if (!element) {
+        callback()
+        return
+      }
+
+      const key = `${rootMargin}|${
+        Array.isArray(threshold) ? threshold.join(',') : String(threshold)
+      }`
+      let observerEntry = observerRegistry.get(key)
+
+      if (!observerEntry) {
+        const entry: VisibleObserverEntry = {
+          key,
+          elements: new Map<Element, Set<() => void>>(),
+          observer: new IntersectionObserver(
+            (entries) => {
+              for (const intersectingEntry of entries) {
+                if (!intersectingEntry.isIntersecting) continue
+
+                const callbacks = entry.elements.get(intersectingEntry.target)
+                if (!callbacks) continue
+
+                callbacks.forEach((callback) => callback())
+                entry.elements.delete(intersectingEntry.target)
+                entry.observer.unobserve(intersectingEntry.target)
+                cleanupVisibleObserverEntry(entry)
+              }
+            },
+            { rootMargin, threshold },
+          ),
+        }
+        observerRegistry.set(key, entry)
+        observerEntry = entry
+      }
+
+      let callbacks = observerEntry.elements.get(element)
+      if (!callbacks) {
+        callbacks = new Set()
+        observerEntry.elements.set(element, callbacks)
+        observerEntry.observer.observe(element)
+      }
+      callbacks.add(callback)
+
+      return () => {
+        const currentCallbacks = observerEntry.elements.get(element)
+        currentCallbacks?.delete(callback)
+        if (currentCallbacks?.size === 0) {
+          observerEntry.elements.delete(element)
+          observerEntry.observer.unobserve(element)
+        }
+        cleanupVisibleObserverEntry(observerEntry)
+      }
+    },
+  }
+}

package/src/hydration.ts

@@ -0,0 +1,50 @@
+import { hydrateIdAttribute } from './hydration/constants'
+
+export { condition } from './hydration/condition'
+export type { HydrationCondition } from './hydration/condition'
+export {
+  hydrateIdAttribute,
+  hydrateInteractionEventsAttribute,
+  hydrateWhenAttribute,
+} from './hydration/constants'
+export const hydrateIdSelector = `[${hydrateIdAttribute}]`
+export { idle } from './hydration/idle'
+export type { IdleHydrationOptions } from './hydration/idle'
+export { interaction } from './hydration/interaction'
+export { load } from './hydration/load'
+export { media } from './hydration/media'
+export { never } from './hydration/never'
+export {
+  clearResolvedGateIdsInMarker,
+  createResolvedGate,
+  getFallbackHtml,
+  getMarkerGate,
+  getOrCreateGate,
+  onGateResolve,
+  releaseGate,
+  resolveHydrationMarker,
+  runHydrationStrategyCleanup,
+  saveFallbackHtml,
+  waitForHydrationPrefetchStrategy,
+} from './hydration/runtime'
+export { withHydrationRenderer } from './hydration/renderer'
+export { visible } from './hydration/visible'
+export { listenForDelegatedHydrationIntent } from './hydration/interaction'
+export type { VisibleHydrationOptions } from './hydration/visible'
+export type { HydrationGateRecord } from './hydration/runtime'
+export type { HydrationStrategyWithRenderer } from './hydration/renderer'
+export type {
+  HydrationInteractionEvent,
+  HydrationInteractionEvents,
+  HydrationMarkerAttributes,
+  HydrationPrefetchContext,
+  HydrationPrefetchFunction,
+  HydrationPrefetchWhen,
+  HydrationPrefetchStrategy,
+  HydrationPrefetchWaitReason,
+  HydrationRuntimeContext,
+  HydrationRuntimeGate,
+  HydrationStrategy,
+  HydrationStrategyTypes,
+  HydrationWhen,
+} from './hydration/types'