fix: revert defaulting to mdx bundler (#2117)

packages/fern-docs/bundle/src/app/api/fern-docs/api-definition/[api]/endpoint/[endpoint]/route.ts

@@ -2,7 +2,7 @@ import { getAuthStateEdge } from "@/server/auth/getAuthStateEdge";
 import * as ApiDefinition from "@fern-api/fdr-sdk/api-definition";
 import { ApiDefinitionLoader } from "@fern-docs/cache";
 import { getEdgeFlags } from "@fern-docs/edge-config";
-import { serializeMdx } from "@fern-docs/ui/bundlers/mdx-bundler";
+import { getMdxBundler } from "@fern-docs/ui/bundlers";
 import { NextRequest, NextResponse } from "next/server";
 
 export async function GET(
@@ -21,13 +21,15 @@ export async function GET(
   }
 
   const flags = await getEdgeFlags(authState.domain);
+  const engine = flags.useMdxBundler ? "mdx-bundler" : "next-mdx-remote";
+  const serializeMdx = await getMdxBundler(engine);
 
   const apiDefinition = await ApiDefinitionLoader.create(
     authState.domain,
     ApiDefinition.ApiDefinitionId(api)
   )
     .withEdgeFlags(flags)
-    .withMdxBundler(serializeMdx, "mdx-bundler")
+    .withMdxBundler(serializeMdx, engine)
     .withPrune({
       type: "endpoint",
       endpointId: ApiDefinition.EndpointId(endpoint),

packages/fern-docs/bundle/src/app/api/fern-docs/api-definition/[api]/webhook/[webhook]/route.ts

@@ -2,7 +2,7 @@ import { getAuthStateEdge } from "@/server/auth/getAuthStateEdge";
 import * as ApiDefinition from "@fern-api/fdr-sdk/api-definition";
 import { ApiDefinitionLoader } from "@fern-docs/cache";
 import { getEdgeFlags } from "@fern-docs/edge-config";
-import { serializeMdx } from "@fern-docs/ui/bundlers/mdx-bundler";
+import { getMdxBundler } from "@fern-docs/ui/bundlers";
 import { NextRequest, NextResponse } from "next/server";
 
 export async function GET(
@@ -21,13 +21,15 @@ export async function GET(
   }
 
   const flags = await getEdgeFlags(authState.domain);
+  const engine = flags.useMdxBundler ? "mdx-bundler" : "next-mdx-remote";
+  const serializeMdx = await getMdxBundler(engine);
 
   const apiDefinition = await ApiDefinitionLoader.create(
     authState.domain,
     ApiDefinition.ApiDefinitionId(api)
   )
     .withEdgeFlags(flags)
-    .withMdxBundler(serializeMdx, "mdx-bundler")
+    .withMdxBundler(serializeMdx, engine)
     .withPrune({
       type: "webhook",
       webhookId: ApiDefinition.WebhookId(webhook),

packages/fern-docs/bundle/src/app/api/fern-docs/api-definition/[api]/websocket/[websocket]/route.ts

@@ -2,7 +2,7 @@ import { getAuthStateEdge } from "@/server/auth/getAuthStateEdge";
 import * as ApiDefinition from "@fern-api/fdr-sdk/api-definition";
 import { ApiDefinitionLoader } from "@fern-docs/cache";
 import { getEdgeFlags } from "@fern-docs/edge-config";
-import { serializeMdx } from "@fern-docs/ui/bundlers/mdx-bundler";
+import { getMdxBundler } from "@fern-docs/ui/bundlers";
 import { NextRequest, NextResponse } from "next/server";
 
 export async function GET(
@@ -21,13 +21,15 @@ export async function GET(
   }
 
   const flags = await getEdgeFlags(authState.domain);
+  const engine = flags.useMdxBundler ? "mdx-bundler" : "next-mdx-remote";
+  const serializeMdx = await getMdxBundler(engine);
 
   const apiDefinition = await ApiDefinitionLoader.create(
     authState.domain,
     ApiDefinition.ApiDefinitionId(api)
   )
     .withEdgeFlags(flags)
-    .withMdxBundler(serializeMdx, "mdx-bundler")
+    .withMdxBundler(serializeMdx, engine)
     .withPrune({
       type: "webSocket",
       webSocketId: ApiDefinition.WebSocketId(websocket),

packages/fern-docs/bundle/src/server/withInitialProps.ts

@@ -19,7 +19,7 @@ import {
   withCustomJavascript,
   withLogo,
 } from "@fern-docs/ui";
-import { serializeMdx } from "@fern-docs/ui/bundlers/mdx-bundler";
+import { getMdxBundler } from "@fern-docs/ui/bundlers";
 import {
   addLeadingSlash,
   getRedirectForPath,
@@ -345,6 +345,7 @@ export async function withInitialProps({
     },
     replaceSrc: resolveFileSrc,
   });
+
   const frontmatter = extractFrontmatterFromDocsContent(found.node.id, content);
 
   if (content == null) {
@@ -387,6 +388,9 @@ export async function withInitialProps({
       ? undefined
       : filteredTabs.indexOf(found.currentTab);
 
+  const engine = edgeFlags.useMdxBundler ? "mdx-bundler" : "next-mdx-remote";
+  const serializeMdx = await getMdxBundler(engine);
+
   const props: ComponentProps<typeof DocsPage> = {
     baseUrl: docs.baseUrl,
     layout: docs.definition.config.layout,

packages/fern-docs/bundle/src/server/withResolvedDocsContent.ts

@@ -7,7 +7,7 @@ import {
   type DocsContent,
   type ImageData,
 } from "@fern-docs/ui";
-import { serializeMdx } from "@fern-docs/ui/bundlers/mdx-bundler";
+import { getMdxBundler } from "@fern-docs/ui/bundlers";
 import { EdgeFlags } from "@fern-docs/utils";
 import { AuthState } from "./auth/getAuthState";
 import { withPrunedNavigation } from "./withPrunedNavigation";
@@ -46,6 +46,9 @@ export async function withResolvedDocsContent({
     authed: authState.authed,
   });
 
+  const engine = edgeFlags.useMdxBundler ? "mdx-bundler" : "next-mdx-remote";
+  const serializeMdx = await getMdxBundler(engine);
+
   return resolveDocsContent({
     node,
     apiReference,
@@ -81,7 +84,7 @@ export async function withResolvedDocsContent({
     },
     serializeMdx,
     domain,
-    engine: "mdx-bundler",
+    engine,
   });
 }
 

packages/fern-docs/edge-config/src/getEdgeFlags.ts

@@ -24,6 +24,7 @@ const EDGE_FLAGS = [
   "use-javascript-as-typescript" as const,
   "always-enable-javascript-fetch" as const,
   "scroll-in-container-enabled" as const,
+  "use-mdx-bundler" as const,
   "batch-stream-toggle-disabled" as const,
   "enabled-auth-in-generated-docs" as const,
   "ask-ai-enabled" as const,
@@ -106,6 +107,10 @@ export async function getEdgeFlags(domain: string): Promise<EdgeFlags> {
       domain,
       config["scroll-in-container-enabled"]
     );
+    const useMdxBundler = checkDomainMatchesCustomers(
+      domain,
+      config["use-mdx-bundler"]
+    );
     const isBatchStreamToggleDisabled = checkDomainMatchesCustomers(
       domain,
       config["batch-stream-toggle-disabled"]
@@ -184,6 +189,7 @@ export async function getEdgeFlags(domain: string): Promise<EdgeFlags> {
       useJavaScriptAsTypeScript,
       alwaysEnableJavaScriptFetch,
       scrollInContainerEnabled,
+      useMdxBundler,
       isBatchStreamToggleDisabled,
       isAuthEnabledInDocs,
       isAskAiEnabled,
@@ -218,6 +224,7 @@ export async function getEdgeFlags(domain: string): Promise<EdgeFlags> {
       useJavaScriptAsTypeScript: false,
       alwaysEnableJavaScriptFetch: false,
       scrollInContainerEnabled: false,
+      useMdxBundler: false,
       isBatchStreamToggleDisabled: false,
       isAuthEnabledInDocs: false,
       isAskAiEnabled: false,

packages/fern-docs/ui/package.json

@@ -17,6 +17,7 @@
   ],
   "type": "module",
   "exports": {
+    "./bundlers": "./src/mdx/bundlers/index.ts",
     "./bundlers/mdx-bundler": "./src/mdx/bundlers/mdx-bundler.ts",
     "./bundlers/next-mdx-remote": "./src/mdx/bundlers/next-mdx-remote.ts",
     ".": "./src/index.ts"

packages/fern-docs/ui/src/mdx/bundlers/index.ts

@@ -0,0 +1,20 @@
+import type * as FernDocs from "@fern-api/fdr-sdk/docs";
+import { once } from "es-toolkit/function";
+import { MDX_SERIALIZER } from "../bundler";
+
+const BUNDLERS: Record<FernDocs.MdxEngine, () => Promise<MDX_SERIALIZER>> = {
+  "mdx-bundler": once(
+    (): Promise<MDX_SERIALIZER> =>
+      import("./mdx-bundler").then(({ serializeMdx }) => serializeMdx)
+  ),
+  "next-mdx-remote": once(
+    (): Promise<MDX_SERIALIZER> =>
+      import("./next-mdx-remote").then(({ serializeMdx }) => serializeMdx)
+  ),
+};
+
+export function getMdxBundler(
+  engine: FernDocs.MdxEngine
+): Promise<MDX_SERIALIZER> {
+  return BUNDLERS[engine]();
+}

packages/fern-docs/utils/src/flags.ts

@@ -13,6 +13,7 @@ export interface EdgeFlags {
   useJavaScriptAsTypeScript: boolean;
   alwaysEnableJavaScriptFetch: boolean;
   scrollInContainerEnabled: boolean;
+  useMdxBundler: boolean;
   isBatchStreamToggleDisabled: boolean;
   isAuthEnabledInDocs: boolean;
   isAskAiEnabled: boolean;
@@ -47,6 +48,7 @@ export const DEFAULT_EDGE_FLAGS: EdgeFlags = {
   useJavaScriptAsTypeScript: false,
   alwaysEnableJavaScriptFetch: false,
   scrollInContainerEnabled: false,
+  useMdxBundler: false,
   isBatchStreamToggleDisabled: false,
   isAuthEnabledInDocs: false,
   isAskAiEnabled: false,