From a0c42154df5881a7579620598d0afa989497f45f Mon Sep 17 00:00:00 2001
From: Fuma Nama <god63820869@gmail.com>
Date: Thu, 19 Dec 2024 21:43:43 +0800
Subject: [PATCH] Docs: Introduce `remarkTypeScriptToJavaScript`

---
 .../docs/headless/mdx/remark-ts2js.mdx        | 76 +++++++++++++++++++
 1 file changed, 76 insertions(+)
 create mode 100644 apps/docs/content/docs/headless/mdx/remark-ts2js.mdx

diff --git a/apps/docs/content/docs/headless/mdx/remark-ts2js.mdx b/apps/docs/content/docs/headless/mdx/remark-ts2js.mdx
new file mode 100644
index 000000000..f2290b2ce
--- /dev/null
+++ b/apps/docs/content/docs/headless/mdx/remark-ts2js.mdx
@@ -0,0 +1,76 @@
+---
+title: Remark TS to JS
+description: A remark plugin to transform TypeScript codeblocks into two tabs of codeblock with its JavaScript variant.
+---
+
+## Usage
+
+Install dependencies:
+
+```package-install
+fumadocs-docgen oxc-transform
+```
+
+Add `oxc-transform` to `serverExternalPackages` in `next.config.mjs`:
+
+```js title="next.config.mjs"
+import { createMDX } from 'fumadocs-mdx/next';
+
+/** @type {import('next').NextConfig} */
+const config = {
+  reactStrictMode: true,
+  serverExternalPackages: ['oxc-transform'],
+};
+
+const withMDX = createMDX();
+
+export default withMDX(config);
+```
+
+Add the remark plugin (e.g. for Fumadocs MDX):
+
+```ts title="source.config.ts"
+import { defineConfig } from 'fumadocs-mdx/config';
+import { remarkTypeScriptToJavaScript } from 'fumadocs-docgen';
+
+export default defineConfig({
+  mdxOptions: {
+    remarkPlugins: [remarkTypeScriptToJavaScript],
+  },
+});
+```
+
+Finally, make sure to define the required MDX components: `Tabs` and `Tab`.
+
+```tsx title="app/docs/[[...slug]]/page.tsx (Fumadocs MDX)"
+import defaultComponents from 'fumadocs-ui/mdx';
+import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
+
+<Mdx
+  components={{
+    ...defaultComponents,
+    Tabs,
+    Tab,
+  }}
+/>;
+```
+
+You can now enable it on TypeScript/TSX codeblocks, like:
+
+````md
+```tsx ts2js
+import { ReactNode } from 'react';
+
+export default function Layout({ children }: { children: ReactNode }) {
+  return <div>{children}</div>;
+}
+```
+````
+
+```tsx ts2js
+import { ReactNode } from 'react';
+
+export default function Layout({ children }: { children: ReactNode }) {
+  return <div>{children}</div>;
+}
+```