(null);
+ const rowVirtualizer = useVirtualizer({
+ count: lines.length,
+ getScrollElement: () => parentRef.current,
+ estimateSize: () => 25
+ });
useEffect(() => {
// Ignore empty urls
if (!src || src === '#') return;
const controller = new AbortController();
-
- fetch(src, { mode: 'cors', signal: controller.signal })
+ fetch(src, {
+ mode: 'cors',
+ signal: controller.signal
+ })
.then(async (response) => {
if (!response.ok) throw new Error(`Invalid response: ${response.statusText}`);
- const text = await response.text();
-
- if (controller.signal.aborted) return;
-
+ if (!response.body) return;
onLoad?.(new UIEvent('load', {}));
- setTextContent(text);
- if (codeExtension) {
- try {
- const env = await worker.highlight(text, codeExtension);
- if (env && !controller.signal.aborted) {
- const match = text.match(NEW_LINE_EXP);
- setHighlight({
- ...env,
- length: (match ? match.length + 1 : 1) + 1
- });
- }
- } catch (error) {
- console.error(error);
- }
- }
+ const reader = response.body.pipeThrough(new TextDecoderStream()).getReader();
+ const ingestLines = async () => {
+ const { done, value } = await reader.read();
+ if (done) return;
+
+ const chunks = value.split('\n');
+ setLines((lines) => [...lines, ...chunks]);
+
+ if (isSidebarPreview) return;
+
+ await ingestLines();
+ };
+ ingestLines();
})
.catch((error) => {
if (!controller.signal.aborted)
@@ -64,40 +61,94 @@ export const TextViewer = memo(
});
return () => controller.abort();
- }, [src, onError, onLoad, codeExtension]);
+ }, [src, onError, onLoad, codeExtension, isSidebarPreview]);
return (
-
- {highlight ? (
- <>
-
- {Array.from(highlight, (_, i) => (
-
- {i + 1}
-
- ))}
-
-
+
+ {rowVirtualizer.getVirtualItems().map((row) => (
+
-
- ) : (
- textContent
- )}
+ ))}
+
);
}
);
+
+function TextRow({
+ codeExtension,
+ row,
+ content
+}: {
+ codeExtension?: string;
+ row: VirtualItem;
+ content: string;
+}) {
+ const contentRef = useRef(null);
+
+ useEffect(() => {
+ if (contentRef.current) {
+ const cb: IntersectionObserverCallback = (events) => {
+ for (const event of events) {
+ if (
+ !event.isIntersecting ||
+ contentRef.current?.getAttribute('data-highlighted') === 'true'
+ )
+ continue;
+ contentRef.current?.setAttribute('data-highlighted', 'true');
+ Prism.highlightElement(event.target, false); // Prism's async seems to be broken
+
+ // With this class present TOML headers are broken Eg. `[dependencies]` will format over multiple lines
+ const children = contentRef.current?.children;
+ if (children) {
+ for (const elem of children) {
+ elem.classList.remove('table');
+ }
+ }
+ }
+ };
+
+ new IntersectionObserver(cb).observe(contentRef.current);
+ }
+ }, []);
+
+ return (
+
+ {codeExtension && (
+
+ {row.index + 1}
+
+ )}
+
+ {content}
+
+