chore: update React and TypeScript dependencies in package.json files

- Upgraded @types/react and @types/react-dom to version 19.2.2 in package.json and pnpm-lock.yaml.
- Updated React and React-DOM versions to ^19.2.0 in apps/website/package.json.
- Adjusted hast-util-to-jsx-runtime version to ^3.20.0 in apps/website/package.json.
- Refactored CodeBlock component to simplify code formatting and highlighting logic.
- Modified shared component to use updated imports for React and JSX runtime.

apps/website/app/blog/[slug]/components/CodeBlock.tsx

@@ -1,10 +1,6 @@
 "use client";
 
 import { CopyButton } from "@/components/ui/copy-button";
-import * as babel from "prettier/plugins/babel";
-import * as estree from "prettier/plugins/estree";
-import * as yaml from "prettier/plugins/yaml";
-import * as prettier from "prettier/standalone";
 import { type JSX, useLayoutEffect, useState } from "react";
 import type { BundledLanguage } from "shiki/bundle/web";
 import { highlight } from "./shared";
@@ -15,59 +11,19 @@ interface CodeBlockProps {
 	initial?: JSX.Element;
 }
 
-async function formatCode(code: string, lang: string) {
-	try {
-		let parser: string;
-		let plugins = [] as any[];
-		switch (lang.toLowerCase()) {
-			case "yaml":
-			case "yml":
-				parser = "yaml";
-				plugins = [yaml];
-				break;
-			case "javascript":
-			case "typescript":
-			case "jsx":
-			case "tsx":
-				parser = "babel-ts";
-				plugins = [babel, estree];
-				break;
-			default:
-				return code;
-		}
-		const formatted = await prettier.format(code, {
-			parser,
-			plugins,
-			semi: true,
-			singleQuote: true,
-			tabWidth: 2,
-			useTabs: false,
-			printWidth: 120,
-		});
-		return formatted;
-	} catch (error) {
-		console.error("Error formatting code:", error);
-		return code;
-	}
-}
-
 export function CodeBlock({ code, lang, initial }: CodeBlockProps) {
 	const [nodes, setNodes] = useState<JSX.Element | undefined>(initial);
-	const [formattedCode, setFormattedCode] = useState(code);
 
 	useLayoutEffect(() => {
-		async function formatAndHighlight() {
+		async function highlightCode() {
 			try {
-				const formatted = await formatCode(code, lang);
-				setFormattedCode(formatted);
-				const highlighted = await highlight(formatted, lang);
-				setNodes(highlighted);
-			} catch (error) {
 				const highlighted = await highlight(code, lang);
 				setNodes(highlighted);
+			} catch (error) {
+				console.error("Error highlighting code:", error);
 			}
 		}
-		void formatAndHighlight();
+		void highlightCode();
 	}, [code, lang]);
 
 	if (!nodes) {
@@ -83,7 +39,7 @@ export function CodeBlock({ code, lang, initial }: CodeBlockProps) {
 
 	return (
 		<div className="group relative">
-			<CopyButton text={formattedCode} />
+			<CopyButton text={code} />
 			<div className="overflow-auto rounded-lg bg-[#18191F] p-4 text-sm">
 				{nodes}
 			</div>

apps/website/app/blog/[slug]/components/shared.ts

@@ -1,7 +1,7 @@
 import { toJsxRuntime } from "hast-util-to-jsx-runtime";
 import type { JSX } from "react";
-import { Fragment } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import * as react from "react";
+import * as jsxRuntime from "react/jsx-runtime";
 import type { BundledLanguage } from "shiki/bundle/web";
 import { codeToHast } from "shiki/bundle/web";
 
@@ -10,5 +10,9 @@ export async function highlight(code: string, lang: BundledLanguage) {
 		lang,
 		theme: "houston",
 	});
-	return toJsxRuntime(out, { Fragment, jsx, jsxs }) as JSX.Element;
+	return toJsxRuntime(out, { 
+		Fragment: react.Fragment, 
+		jsx: jsxRuntime.jsx, 
+		jsxs: jsxRuntime.jsxs 
+	}) as JSX.Element;
 }

apps/website/app/blog/[slug]/page.tsx

@@ -111,7 +111,7 @@ export default async function BlogPostPage({ params }: Props) {
 	const gfm = turndownPluginGfm.gfm;
 	const tables = turndownPluginGfm.tables;
 	const strikethrough = turndownPluginGfm.strikethrough;
-	turndownService.use([tables, strikethrough, gfm, remarkToc]);
+	turndownService.use([tables, strikethrough, gfm]);
 
 	const cleanedHtml = cleanHtml(post.html);
 	const markdown = turndownService.turndown(cleanedHtml);

apps/website/package.json

@@ -13,7 +13,7 @@
 	"browserslist": "defaults, not ie <= 11",
 	"dependencies": {
 		"@next/third-parties": "16.0.7",
-		"hast-util-to-jsx-runtime": "2.3.5",
+		"hast-util-to-jsx-runtime": "^2.3.5",
 		"@headlessui/react": "^2.2.0",
 		"@headlessui/tailwindcss": "^0.2.0",
 		"@radix-ui/react-accordion": "^1.2.1",
@@ -37,8 +37,8 @@
 		"framer-motion": "^11.3.19",
 		"lucide-react": "0.364.0",
 		"next": "16.0.10",
-		"react": "18.2.0",
-		"react-dom": "18.2.0",
+		"react": "^19.2.0",
+		"react-dom": "^19.2.0",
 		"react-ga4": "^2.1.0",
 		"react-markdown": "^10.0.0",
 		"react-photo-view": "^1.2.7",
@@ -47,7 +47,7 @@
 		"remark-toc": "^9.0.0",
 		"satori": "^0.12.1",
 		"sharp": "^0.33.5",
-		"shiki": "1.22.2",
+		"shiki": "^3.20.0",
 		"slugify": "^1.6.6",
 		"tailwind-merge": "^2.2.2",
 		"tailwindcss": "^3.4.1",
@@ -63,8 +63,8 @@
 		"@babel/parser": "^7.26.9",
 		"@babel/plugin-syntax-typescript": "^7.25.9",
 		"@biomejs/biome": "1.7.0",
-		"@types/react": "18.3.5",
-		"@types/react-dom": "18.3.0",
+		"@types/react": "^19.2.2",
+		"@types/react-dom": "^19.2.2",
 		"prettier-plugin-tailwindcss": "^0.5.14"
 	}
 }

package.json

@@ -37,7 +37,7 @@
 		"extends": ["@commitlint/config-conventional"]
 	},
 	"resolutions": {
-		"@types/react": "18.3.5",
-		"@types/react-dom": "18.3.0"
+		"@types/react": "19.2.2",
+		"@types/react-dom": "19.2.2"
 	}
 }