fix: properly serialize and deserialize jsx

facebook/react#31012 facebook/react#31012 (comment)
SukkaW · Sep 25, 2024 · 9804980 · 9804980
1 parent a0c4e1f
commit 9804980
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 13 deletions.
diff --git a/src/components/mdx-components/codeblock/highlight.tsx b/src/components/mdx-components/codeblock/highlight.tsx
@@ -86,7 +86,7 @@ interface LowlightProps {
 }
 
 export default function Lowlight({ code, language }: LowlightProps) {
-  const tree = useMemo(() => toJsxRuntime(lowlight.highlight(language, code), { Fragment, jsx: jsx as any, jsxs: jsxs as any, development: process.env.NODE_ENV === 'development' }), [code, language]);
+  const tree = useMemo(() => toJsxRuntime(lowlight.highlight(language, code), { Fragment, jsx: jsx as any, jsxs: jsxs as any }), [code, language]);
   return (
     <pre className={clsx('hljs', `language-${alias[language] || language}`)}>
       <code>

diff --git a/src/lib/server/parse-markdown.ts b/src/lib/server/parse-markdown.ts
@@ -61,7 +61,7 @@ const asyncCache = async <T>(key: string, fn: () => Promise<T>): Promise<T> => {
 
 // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 // ~~~~ IMPORTANT: BUMP THIS IF YOU CHANGE ANY CODE BELOW ~~~
-const DISK_CACHE_BREAKER = 4;
+const DISK_CACHE_BREAKER = 5;
 // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
 const store = new FileStore({
@@ -169,17 +169,23 @@ export const getContentBySegments = async (segments: string[]): Promise<{ props:
 
 // Serialize a server React tree node to JSON.
 function stringifyNodeOnServer(key: string, val: any) {
-  if (val != null && val.$$typeof === Symbol.for('react.element')) {
-    // Remove fake MDX props.
-    const { mdxType, originalType, parentName, ...cleanProps } = val.props;
-    return [
-      '$r',
-      typeof val.type === 'string' ? val.type : mdxType,
-      val.key,
-      cleanProps
-    ];
+  if (val != null) {
+    if (val.$$typeof === Symbol.for('react.element') || val.$$typeof === Symbol.for('react.transitional.element')) {
+      // Remove fake MDX props.
+      const { mdxType, originalType, parentName, ...cleanProps } = val.props;
+      return [
+        val.$$typeof === Symbol.for('react.element')
+          ? '$r1'
+          : (val.$$typeof === Symbol.for('react.transitional.element')
+            ? '$r2'
+            : '$r3'),
+        typeof val.type === 'string' ? val.type : mdxType,
+        val.key,
+        cleanProps
+      ];
+    }
+    return val;
   }
-  return val;
 }
 
 // Get ToC from children

diff --git a/src/pages/[...content].tsx b/src/pages/[...content].tsx
@@ -37,7 +37,15 @@ export default function ContentPage({ content, toc, meta, cname }: ContentProps)
 
 // Deserialize a client React tree from JSON.
 function reviveNodeOnClient(key: unknown, val: unknown) {
-  if (Array.isArray(val) && val[0] === '$r') {
+  if (
+    Array.isArray(val)
+    && (
+      val[0] === '$r'
+      || val[0] === '$r1'
+      || val[0] === '$r2'
+      || val[0] === '$r3'
+    )
+  ) {
     // Assume it's a React element.
     let type = val[1];
     const key = val[2];