perf(site): split InlineMarkdown out of Markdown to avoid loading PrismJS in initial bundle (#24192)

\`InlineMarkdown\` and \`MemoizedInlineMarkdown\` lived in
\`Markdown.tsx\`
alongside a static \`import { Prism as SyntaxHighlighter } from
"react-syntax-highlighter"\` — the full PrismJS build with ~300 language
grammars. Because \`DashboardLayout\` eagerly imports
\`AnnouncementBannerView → InlineMarkdown\`, every authenticated page
loaded and evaluated the entire Prism/refractor bundle on startup even
though syntax highlighting is only used in secondary views.

This PR moves \`InlineMarkdown\` and \`MemoizedInlineMarkdown\` into
their
own \`InlineMarkdown.tsx\` file that depends only on \`react-markdown\`
and
updates all six consumers to import from the new module.
\`Markdown.tsx\`
keeps the PrismJS import for the full \`Markdown\` component, which is
only reached through lazy-loaded routes.

> 🤖 Generated by Coder Agents
This commit is contained in:
Jaayden Halko
2026-04-10 07:34:31 +01:00
committed by GitHub
parent 1d0653cdab
commit 19e0e0e8e6
10 changed files with 111 additions and 88 deletions
@@ -1,5 +1,5 @@
import type { FC } from "react";
import { InlineMarkdown } from "#/components/Markdown/Markdown";
import { InlineMarkdown } from "#/components/Markdown/InlineMarkdown";
import { readableForegroundColor } from "#/utils/colors";
interface AnnouncementBannerViewProps {
+1 -1
View File
@@ -4,7 +4,7 @@ import type { WorkspaceAgent, WorkspaceResource } from "#/api/typesGenerated";
import { ChevronDownIcon } from "#/components/AnimatedIcons/ChevronDown";
import { Button } from "#/components/Button/Button";
import { CopyableValue } from "#/components/CopyableValue/CopyableValue";
import { MemoizedInlineMarkdown } from "#/components/Markdown/Markdown";
import { MemoizedInlineMarkdown } from "#/components/Markdown/InlineMarkdown";
import { Stack } from "#/components/Stack/Stack";
import {
Tooltip,
@@ -9,7 +9,7 @@ import type {
WorkspaceBuildParameter,
} from "#/api/typesGenerated";
import { ConfirmDialog } from "#/components/Dialogs/ConfirmDialog/ConfirmDialog";
import { MemoizedInlineMarkdown } from "#/components/Markdown/Markdown";
import { MemoizedInlineMarkdown } from "#/components/Markdown/InlineMarkdown";
import { UpdateBuildParametersDialog } from "#/modules/workspaces/WorkspaceMoreActions/UpdateBuildParametersDialog";
import { UpdateBuildParametersDialogExperimental } from "#/modules/workspaces/WorkspaceMoreActions/UpdateBuildParametersDialogExperimental";