Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/lukebennett88/luke-ui. ui.lukebennett.dev
Something went wrong. Try again.
1.7 kB · 63 lines
TSX
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364import type { JSX } from 'react';import { Suspense, use } from 'react';import type { HighlightedSource } from '../lib/highlighted-source.js';import { CodeBlock } from './code-block/code-block.js';
export interface SourceCodeBlockProps { src: string;}
export function SourceCodeBlock({ src }: SourceCodeBlockProps): JSX.Element { return ( <Suspense fallback={<SourceCodeLoadingState />}> <SourceCodeContent src={src} /> </Suspense> );}
// Highlighted sample modules load only when a page renders them.const highlightedSources = import.meta.glob<HighlightedSource>('../samples/*/*.tsx', { eager: false, import: 'default', query: '?highlight',});
// The median sample height keeps layout shifts small while a module loads.const FALLBACK_LINE_COUNT = 10;
const highlightedSourceCache = new Map<string, Promise<HighlightedSource>>();
function SourceCodeContent({ src }: SourceCodeBlockProps) { const highlightedSource = use(loadHighlightedSource(src));
return ( <CodeBlock copyText={highlightedSource.source} // Shiki escapes the source before the Vite plugin generates this HTML. html={highlightedSource.html} /> );}
function SourceCodeLoadingState() { return ( <CodeBlock allowCopy={false} aria-hidden code={Array.from({ length: FALLBACK_LINE_COUNT }, () => ' ').join('\n')} inert /> );}
function loadHighlightedSource(src: string): Promise<HighlightedSource> { const cached = highlightedSourceCache.get(src); if (cached) return cached;
const load = highlightedSources[`../samples/${src}.tsx`]; if (!load) throw new Error(`Source example not found: ${src}`);
const promise = load(); highlightedSourceCache.set(src, promise); return promise;}