jared
96f7187031
- emojibase (~965 KB) is now fully lazy: plugins/emoji.ts loads compact data + shortcode maps via a memoized dynamic import (rejections reset the memo so a mid-deploy chunk 404 can retry); reaction labels degrade to the raw glyph until loaded. Consumers get FRESH array references on load (the module arrays populate in place — same-ref state updates would skip re-render and leave emoji search empty; reviewer-caught). Verified out of the eager graph. - Service worker precaches hashed assets (workbox precacheAndRoute, 82 entries ~10.8 MB incl. the crypto wasm): repeat visits stop re-downloading the app. index.html is NOT precached — navigations stay network-first so deploys are picked up immediately; the media-auth fetch handler is untouched. - ReactPrism: curated 21-language set — chunk 574 KB → 71 KB. - Timeline inline images get loading="lazy". - Removed dead dompurify (+types); sanitize-html is the real sanitizer. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
50 lines
1.9 KiB
TypeScript
50 lines
1.9 KiB
TypeScript
import React, { MutableRefObject, ReactNode, useEffect, useRef } from 'react';
|
|
|
|
import Prism from 'prismjs';
|
|
|
|
// PERF: Prism used to import every bundled language (~574 KB lazy chunk). We now
|
|
// ship a curated subset covering the languages actually seen in chat. Imports
|
|
// MUST stay in dependency order (Prism component files assume their base grammar
|
|
// is already registered): base grammars (markup/css/clike/javascript) first,
|
|
// then languages that extend them (e.g. c→cpp, javascript→typescript,
|
|
// markup+javascript→jsx, jsx+typescript→tsx, markup→markdown).
|
|
import 'prismjs/components/prism-markup.js'; // markup / html / xml / svg
|
|
import 'prismjs/components/prism-css.js';
|
|
import 'prismjs/components/prism-clike.js';
|
|
import 'prismjs/components/prism-javascript.js'; // js
|
|
import 'prismjs/components/prism-json.js';
|
|
import 'prismjs/components/prism-yaml.js';
|
|
import 'prismjs/components/prism-bash.js'; // bash / shell / sh
|
|
import 'prismjs/components/prism-python.js';
|
|
import 'prismjs/components/prism-rust.js';
|
|
import 'prismjs/components/prism-go.js';
|
|
import 'prismjs/components/prism-java.js';
|
|
import 'prismjs/components/prism-c.js';
|
|
import 'prismjs/components/prism-cpp.js';
|
|
import 'prismjs/components/prism-csharp.js';
|
|
import 'prismjs/components/prism-sql.js';
|
|
import 'prismjs/components/prism-diff.js';
|
|
import 'prismjs/components/prism-docker.js';
|
|
import 'prismjs/components/prism-markdown.js';
|
|
import 'prismjs/components/prism-typescript.js'; // ts
|
|
import 'prismjs/components/prism-jsx.js';
|
|
import 'prismjs/components/prism-tsx.js';
|
|
|
|
import './ReactPrism.css';
|
|
// using classNames .prism-dark .prism-light from ReactPrism.css
|
|
|
|
export default function ReactPrism({
|
|
children,
|
|
}: {
|
|
children: (ref: MutableRefObject<null>) => ReactNode;
|
|
}) {
|
|
const codeRef = useRef<HTMLElement>(null);
|
|
|
|
useEffect(() => {
|
|
const el = codeRef.current;
|
|
if (el) Prism.highlightElement(el);
|
|
}, []);
|
|
|
|
return <>{children(codeRef as MutableRefObject<null>)}</>;
|
|
}
|