fix(docs): mdx in beta

apps/docs/app/docs/[[...slug]]/page.tsx

@@ -13,14 +13,13 @@ import {CONTENT_PATH, TAG} from "@/libs/docs/config";
 import {getHeadings} from "@/libs/docs/utils";
 
 interface DocPageProps {
-  params: {
-    slug: string[];
-  };
+  params: Promise<{slug: string[]}>;
 }
 
 async function getDocFromParams({params}: DocPageProps) {
-  const slug = params.slug?.join("/") || "";
-  const doc = allDocs.find((doc) => doc.slugAsParams === slug);
+  const {slug} = await params;
+  const paramsSlug = slug?.join("/") || "";
+  const doc = allDocs.find((doc) => doc.slugAsParams === paramsSlug);
 
   if (!doc) {
     null;
@@ -72,9 +71,11 @@ export async function generateMetadata({params}: DocPageProps): Promise<Metadata
 }
 
 export async function generateStaticParams(): Promise<DocPageProps["params"][]> {
-  return allDocs.map((doc) => ({
-    slug: doc.slugAsParams.split("/"),
-  }));
+  return allDocs.map((doc) =>
+    Promise.resolve({
+      slug: doc.slugAsParams.split("/"),
+    }),
+  );
 }
 
 export default async function DocPage({params}: DocPageProps) {

apps/docs/components/mdx-content.tsx

@@ -2,10 +2,10 @@
 
 import type {MDXComponents as MDXComponentsType} from "mdx/types";
 
-import {useMDXComponent} from "next-contentlayer2/hooks";
-
 import {MDXComponents} from "./mdx-components";
 
+import {useMDXComponent} from "@/hooks/use-mdx-component";
+
 interface MDXContentProps {
   code: string;
 }

apps/docs/hooks/use-mdx-component.ts

@@ -0,0 +1,24 @@
+import type {MDXComponents} from "mdx/types";
+
+import React from "react";
+import _jsx_runtime from "react/jsx-runtime";
+import ReactDOM from "react-dom";
+
+type MDXContentProps = {
+  [props: string]: unknown;
+  components?: MDXComponents;
+};
+
+export const getMDXComponent = (
+  code: string,
+  globals: Record<string, unknown> = {},
+): React.FC<MDXContentProps> => {
+  const scope = {React, ReactDOM, _jsx_runtime, ...globals};
+  const fn = new Function(...Object.keys(scope), code);
+
+  return fn(...Object.values(scope)).default;
+};
+
+export const useMDXComponent = (code: string, globals: Record<string, unknown> = {}) => {
+  return React.useMemo(() => getMDXComponent(code, globals), [code, globals]);
+};

apps/docs/package.json

@@ -8,6 +8,7 @@
     "build:analyze": "ANALYZE=true next build",
     "start": "next start",
     "lint": "next lint",
+    "lint:fix": "next lint --fix",
     "typecheck": "contentlayer2 build && tsc --noEmit",
     "preinstall": "node preinstall.js",
     "build:sponsors": "tsx scripts/build-sponsors.ts",