|
| 1 | +/** |
| 2 | + * Copyright (c) Meta Platforms, Inc. and affiliates. |
| 3 | + * |
| 4 | + * This source code is licensed under the MIT license found in the |
| 5 | + * LICENSE file in the root directory of this source tree. |
| 6 | + * |
| 7 | + * @flow |
| 8 | + */ |
| 9 | + |
| 10 | +import type {Element, SuspenseNode} from '../../../frontend/types'; |
| 11 | +import type Store from '../../store'; |
| 12 | + |
| 13 | +import * as React from 'react'; |
| 14 | +import {useContext, useLayoutEffect, useMemo, useRef} from 'react'; |
| 15 | +import {BridgeContext, StoreContext} from '../context'; |
| 16 | +import {TreeDispatcherContext} from '../Components/TreeContext'; |
| 17 | +import {useHighlightHostInstance} from '../hooks'; |
| 18 | +import {SuspenseTreeStateContext} from './SuspenseTreeContext'; |
| 19 | +import styles from './SuspenseTimeline.css'; |
| 20 | + |
| 21 | +// TODO: This returns the roots which would mean we attempt to suspend the shell. |
| 22 | +// Suspending the shell is currently not supported and we don't have a good view |
| 23 | +// for inspecting the root. But we probably should? |
| 24 | +function getDocumentOrderSuspense( |
| 25 | + store: Store, |
| 26 | + roots: $ReadOnlyArray<Element['id']>, |
| 27 | +): Array<SuspenseNode> { |
| 28 | + const suspenseTreeList: SuspenseNode[] = []; |
| 29 | + for (let i = 0; i < roots.length; i++) { |
| 30 | + const root = store.getElementByID(roots[i]); |
| 31 | + if (root === null) { |
| 32 | + continue; |
| 33 | + } |
| 34 | + const suspense = store.getSuspenseByID(root.id); |
| 35 | + if (suspense !== null) { |
| 36 | + const stack = [suspense]; |
| 37 | + while (stack.length > 0) { |
| 38 | + const current = stack.pop(); |
| 39 | + if (current === undefined) { |
| 40 | + continue; |
| 41 | + } |
| 42 | + suspenseTreeList.push(current); |
| 43 | + // Add children in reverse order to maintain document order |
| 44 | + for (let j = current.children.length - 1; j >= 0; j--) { |
| 45 | + const childSuspense = store.getSuspenseByID(current.children[j]); |
| 46 | + if (childSuspense !== null) { |
| 47 | + stack.push(childSuspense); |
| 48 | + } |
| 49 | + } |
| 50 | + } |
| 51 | + } |
| 52 | + } |
| 53 | + |
| 54 | + return suspenseTreeList; |
| 55 | +} |
| 56 | + |
| 57 | +export default function SuspenseTimeline(): React$Node { |
| 58 | + const bridge = useContext(BridgeContext); |
| 59 | + const store = useContext(StoreContext); |
| 60 | + const dispatch = useContext(TreeDispatcherContext); |
| 61 | + const {shells} = useContext(SuspenseTreeStateContext); |
| 62 | + |
| 63 | + const timeline = useMemo(() => { |
| 64 | + return getDocumentOrderSuspense(store, shells); |
| 65 | + }, [store, shells]); |
| 66 | + |
| 67 | + const {highlightHostInstance, clearHighlightHostInstance} = |
| 68 | + useHighlightHostInstance(); |
| 69 | + |
| 70 | + const inputRef = useRef<HTMLElement | null>(null); |
| 71 | + const inputBBox = useRef<ClientRect | null>(null); |
| 72 | + useLayoutEffect(() => { |
| 73 | + const input = inputRef.current; |
| 74 | + if (input === null) { |
| 75 | + throw new Error('Expected an input HTML element to be present.'); |
| 76 | + } |
| 77 | + |
| 78 | + inputBBox.current = input.getBoundingClientRect(); |
| 79 | + const observer = new ResizeObserver(entries => { |
| 80 | + inputBBox.current = input.getBoundingClientRect(); |
| 81 | + }); |
| 82 | + observer.observe(input); |
| 83 | + return () => { |
| 84 | + inputBBox.current = null; |
| 85 | + observer.disconnect(); |
| 86 | + }; |
| 87 | + }, []); |
| 88 | + |
| 89 | + const min = 0; |
| 90 | + const max = timeline.length - 1; |
| 91 | + |
| 92 | + function handleChange(event: SyntheticEvent<HTMLInputElement>) { |
| 93 | + const value = +event.currentTarget.value; |
| 94 | + for (let i = 0; i < timeline.length; i++) { |
| 95 | + const forceFallback = i > value; |
| 96 | + const suspense = timeline[i]; |
| 97 | + const elementID = suspense.id; |
| 98 | + const rendererID = store.getRendererIDForElement(elementID); |
| 99 | + if (rendererID === null) { |
| 100 | + // TODO: This sounds like a bug. |
| 101 | + console.warn( |
| 102 | + `No renderer ID found for element ${elementID} in suspense timeline.`, |
| 103 | + ); |
| 104 | + } else { |
| 105 | + bridge.send('overrideSuspense', { |
| 106 | + id: elementID, |
| 107 | + rendererID, |
| 108 | + forceFallback, |
| 109 | + }); |
| 110 | + } |
| 111 | + } |
| 112 | + |
| 113 | + const suspense = timeline[value]; |
| 114 | + const elementID = suspense.id; |
| 115 | + highlightHostInstance(elementID); |
| 116 | + dispatch({type: 'SELECT_ELEMENT_BY_ID', payload: elementID}); |
| 117 | + } |
| 118 | + |
| 119 | + function handleBlur() { |
| 120 | + clearHighlightHostInstance(); |
| 121 | + } |
| 122 | + |
| 123 | + function handleFocus(event: SyntheticEvent<HTMLInputElement>) { |
| 124 | + const value = +event.currentTarget.value; |
| 125 | + const suspense = timeline[value]; |
| 126 | + |
| 127 | + highlightHostInstance(suspense.id); |
| 128 | + } |
| 129 | + |
| 130 | + function handlePointerMove(event: SyntheticPointerEvent<HTMLInputElement>) { |
| 131 | + const bbox = inputBBox.current; |
| 132 | + if (bbox === null) { |
| 133 | + throw new Error('Bounding box of slider is unknown.'); |
| 134 | + } |
| 135 | + |
| 136 | + const value = Math.max( |
| 137 | + min, |
| 138 | + Math.min( |
| 139 | + Math.round( |
| 140 | + min + ((event.clientX - bbox.left) / bbox.width) * (max - min), |
| 141 | + ), |
| 142 | + max, |
| 143 | + ), |
| 144 | + ); |
| 145 | + const suspense = timeline[value]; |
| 146 | + if (suspense === undefined) { |
| 147 | + throw new Error( |
| 148 | + `Suspense node not found for value ${value} in timeline when on ${event.clientX} in bounding box ${JSON.stringify(bbox)}.`, |
| 149 | + ); |
| 150 | + } |
| 151 | + highlightHostInstance(suspense.id); |
| 152 | + } |
| 153 | + |
| 154 | + return ( |
| 155 | + <div> |
| 156 | + <input |
| 157 | + className={styles.SuspenseTimelineSlider} |
| 158 | + type="range" |
| 159 | + min={min} |
| 160 | + max={max} |
| 161 | + defaultValue={max} |
| 162 | + onBlur={handleBlur} |
| 163 | + onChange={handleChange} |
| 164 | + onFocus={handleFocus} |
| 165 | + onPointerMove={handlePointerMove} |
| 166 | + onPointerUp={clearHighlightHostInstance} |
| 167 | + ref={inputRef} |
| 168 | + /> |
| 169 | + </div> |
| 170 | + ); |
| 171 | +} |
0 commit comments