|
| 1 | +type Strategy = (tagName: string) => Promise<void> |
| 2 | + |
| 3 | +const dynamicElements = new Map<string, Set<() => void>>() |
| 4 | + |
| 5 | +const ready = new Promise<void>(resolve => { |
| 6 | + if (document.readyState !== 'loading') { |
| 7 | + resolve() |
| 8 | + } else { |
| 9 | + document.addEventListener('readystatechange', () => resolve(), {once: true}) |
| 10 | + } |
| 11 | +}) |
| 12 | + |
| 13 | +const firstInteraction = new Promise<void>(resolve => { |
| 14 | + const controller = new AbortController() |
| 15 | + controller.signal.addEventListener('abort', () => resolve()) |
| 16 | + const listenerOptions = {once: true, passive: true, signal: controller.signal} |
| 17 | + const handler = () => controller.abort() |
| 18 | + |
| 19 | + document.addEventListener('mousedown', handler, listenerOptions) |
| 20 | + // eslint-disable-next-line github/require-passive-events |
| 21 | + document.addEventListener('touchstart', handler, listenerOptions) |
| 22 | + document.addEventListener('keydown', handler, listenerOptions) |
| 23 | + document.addEventListener('pointerdown', handler, listenerOptions) |
| 24 | +}) |
| 25 | + |
| 26 | +const visible = (tagName: string): Promise<void> => |
| 27 | + new Promise<void>(resolve => { |
| 28 | + const observer = new IntersectionObserver( |
| 29 | + entries => { |
| 30 | + for (const entry of entries) { |
| 31 | + if (entry.isIntersecting) { |
| 32 | + resolve() |
| 33 | + observer.disconnect() |
| 34 | + return |
| 35 | + } |
| 36 | + } |
| 37 | + }, |
| 38 | + { |
| 39 | + // Currently the threshold is set to 256px from the bottom of the viewport |
| 40 | + // with a threshold of 0.1. This means the element will not load until about |
| 41 | + // 2 keyboard-down-arrow presses away from being visible in the viewport, |
| 42 | + // giving us some time to fetch it before the contents are made visible |
| 43 | + rootMargin: '0px 0px 256px 0px', |
| 44 | + threshold: 0.01 |
| 45 | + } |
| 46 | + ) |
| 47 | + for (const el of document.querySelectorAll(tagName)) { |
| 48 | + observer.observe(el) |
| 49 | + } |
| 50 | + }) |
| 51 | + |
| 52 | +const strategies: Record<string, Strategy> = { |
| 53 | + ready: () => ready, |
| 54 | + firstInteraction: () => firstInteraction, |
| 55 | + visible |
| 56 | +} |
| 57 | + |
| 58 | +const timers = new WeakMap<Element, number>() |
| 59 | +function scan(node: Element) { |
| 60 | + cancelAnimationFrame(timers.get(node) || 0) |
| 61 | + timers.set( |
| 62 | + node, |
| 63 | + requestAnimationFrame(() => { |
| 64 | + for (const tagName of dynamicElements.keys()) { |
| 65 | + const child: Element | null = node.matches(tagName) ? node : node.querySelector(tagName) |
| 66 | + if (customElements.get(tagName) || child) { |
| 67 | + const strategyName = (child?.getAttribute('data-load-on') || 'ready') as keyof typeof strategies |
| 68 | + const strategy = strategyName in strategies ? strategies[strategyName] : strategies.ready |
| 69 | + // eslint-disable-next-line github/no-then |
| 70 | + for (const cb of dynamicElements.get(tagName) || []) strategy(tagName).then(cb) |
| 71 | + dynamicElements.delete(tagName) |
| 72 | + timers.delete(node) |
| 73 | + } |
| 74 | + } |
| 75 | + }) |
| 76 | + ) |
| 77 | +} |
| 78 | + |
| 79 | +let elementLoader: MutationObserver |
| 80 | + |
| 81 | +export function lazyDefine(tagName: string, callback: () => void) { |
| 82 | + if (!dynamicElements.has(tagName)) dynamicElements.set(tagName, new Set<() => void>()) |
| 83 | + dynamicElements.get(tagName)!.add(callback) |
| 84 | + |
| 85 | + scan(document.body) |
| 86 | + |
| 87 | + if (!elementLoader) { |
| 88 | + elementLoader = new MutationObserver(mutations => { |
| 89 | + if (!dynamicElements.size) return |
| 90 | + for (const mutation of mutations) { |
| 91 | + for (const node of mutation.addedNodes) { |
| 92 | + if (node instanceof Element) scan(node) |
| 93 | + } |
| 94 | + } |
| 95 | + }) |
| 96 | + elementLoader.observe(document, {subtree: true, childList: true}) |
| 97 | + } |
| 98 | +} |
0 commit comments