feat: launch darkly markdown component (#1550)

packages/ui/app/package.json

@@ -82,6 +82,7 @@
     "jotai-effect": "^1.0.0",
     "jotai-location": "^0.5.5",
     "jsonpath": "^1.1.1",
+    "launchdarkly-js-client-sdk": "^3.4.0",
     "lodash-es": "^4.17.21",
     "mdast-util-from-markdown": "^2.0.0",
     "mdast-util-mdx-jsx": "^3.1.0",

packages/ui/app/src/hooks/useApiRoute.ts

@@ -1,4 +1,4 @@
-import { useAtomValue } from "jotai";
+import { Getter, useAtomValue } from "jotai";
 import urlJoin from "url-join";
 import { BASEPATH_ATOM, TRAILING_SLASH_ATOM } from "../atoms";
 
@@ -26,3 +26,9 @@ export function useApiRoute(route: FernDocsApiRoute, options?: Options): string
     const includeTrailingSlash = useAtomValue(TRAILING_SLASH_ATOM);
     return getApiRouteSupplier({ includeTrailingSlash, basepath, ...options })(route);
 }
+
+export function selectApiRoute(get: Getter, route: FernDocsApiRoute, options?: Options): string {
+    const basepath = get(BASEPATH_ATOM);
+    const includeTrailingSlash = get(TRAILING_SLASH_ATOM);
+    return getApiRouteSupplier({ includeTrailingSlash, basepath, ...options })(route);
+}

packages/ui/app/src/mdx/components/index.tsx

@@ -1,5 +1,6 @@
 import { RemoteFontAwesomeIcon } from "@fern-ui/components";
 import type { MDXComponents } from "mdx/types";
+import dynamic from "next/dynamic";
 import { ComponentProps, PropsWithChildren, ReactElement } from "react";
 import { FernErrorBoundaryProps, FernErrorTag } from "../../components/FernErrorBoundary";
 import { AccordionGroup } from "./accordion";
@@ -34,6 +35,8 @@ import { Step, StepGroup } from "./steps";
 import { TabGroup } from "./tabs";
 import { Tooltip } from "./tooltip";
 
+const LaunchDarkly = dynamic(() => import("./launchdarkly/LaunchDarkly").then((mod) => mod.LaunchDarkly));
+
 const FERN_COMPONENTS = {
     AccordionGroup,
     Availability,
@@ -53,6 +56,7 @@ const FERN_COMPONENTS = {
     EndpointResponseSnippet,
     Frame,
     Icon: RemoteFontAwesomeIcon,
+    LaunchDarkly,
     ParamField,
     Step,
     StepGroup,

packages/ui/app/src/mdx/components/launchdarkly/LaunchDarkly.tsx

@@ -0,0 +1,82 @@
+import { captureException } from "@sentry/nextjs";
+import { atom, useAtomValue } from "jotai";
+import { loadable } from "jotai/utils";
+import * as LDClient from "launchdarkly-js-client-sdk";
+import { PropsWithChildren, ReactNode, useCallback, useEffect, useState } from "react";
+import { selectApiRoute } from "../../../hooks/useApiRoute";
+
+async function fetchClientSideId(route: string): Promise<string | undefined> {
+    const json = await fetch(route).then((res) => res.json());
+    return json?.["client-side-id"];
+}
+
+// this is a singleton atom that initializes the LaunchDarkly client-side SDK
+const ldClientAtom = atom<Promise<LDClient.LDClient | undefined>>(async (get) => {
+    if (typeof window === "undefined") {
+        return undefined;
+    }
+    const route = selectApiRoute(get, "/api/fern-docs/integrations/launchdarkly");
+    const clientSideId = await fetchClientSideId(route);
+    if (!clientSideId) {
+        return undefined;
+    }
+
+    const client = LDClient.initialize(clientSideId, {
+        kind: "user",
+        anonymous: true,
+    });
+
+    await client.waitForInitialization();
+
+    return client;
+});
+
+const useLaunchDarklyFlag = (flag: string): boolean => {
+    const loadableClient = useAtomValue(loadable(ldClientAtom));
+    const client = loadableClient.state === "hasData" ? loadableClient.data : undefined;
+    if (loadableClient.state === "hasError") {
+        captureException(loadableClient.error);
+    }
+
+    const getFlagEnabled = useCallback(() => {
+        return client?.variation(flag, false) ?? false;
+    }, [client, flag]);
+
+    const [enabled, setEnabled] = useState(getFlagEnabled);
+
+    useEffect(() => {
+        setEnabled(getFlagEnabled());
+
+        if (!client) {
+            return;
+        }
+
+        const listener = () => {
+            setEnabled(getFlagEnabled());
+        };
+
+        client.on("ready", listener);
+        client.on("change", listener);
+
+        return () => {
+            client.off("ready", listener);
+            client.off("change", listener);
+        };
+    }, [client, flag, getFlagEnabled]);
+
+    return enabled;
+};
+
+export interface LaunchDarklyProps {
+    flag: string;
+}
+
+export function LaunchDarkly({ flag, children }: PropsWithChildren<LaunchDarklyProps>): ReactNode {
+    const ldClient = useLaunchDarklyFlag(flag);
+
+    if (!ldClient) {
+        return null;
+    }
+
+    return children;
+}

packages/ui/app/src/mdx/components/launchdarkly/index.ts

@@ -0,0 +1 @@
+export * from "./LaunchDarkly";

packages/ui/docs-bundle/src/pages/api/fern-docs/integrations/launchdarkly.ts

@@ -0,0 +1,29 @@
+import { getXFernHostEdge } from "@/server/xfernhost/edge";
+import { get } from "@vercel/edge-config";
+import { NextRequest, NextResponse } from "next/server";
+import { z } from "zod";
+
+export const runtime = "edge";
+
+const LaunchDarklyEdgeConfigSchema = z.object({
+    // NOTE: this is client-side visible, so we should be careful about what we expose here if we add more fields
+    "client-side-id": z.string().optional(),
+});
+
+type LaunchDarklyEdgeConfigSchema = z.infer<typeof LaunchDarklyEdgeConfigSchema>;
+
+export default async function handler(req: NextRequest): Promise<NextResponse<LaunchDarklyEdgeConfigSchema>> {
+    const domain = getXFernHostEdge(req);
+    try {
+        const config = (await get<Record<string, LaunchDarklyEdgeConfigSchema>>("launchdarkly"))?.[domain];
+        if (config == null) {
+            return NextResponse.json({}, { status: 404 });
+        }
+
+        return NextResponse.json(config);
+    } catch (e) {
+        // eslint-disable-next-line no-console
+        console.error(e);
+        return NextResponse.json({}, { status: 500 });
+    }
+}

tests/launchdarkly/fern/docs.yml

@@ -0,0 +1,7 @@
+instances:
+  - url: https://launchdarkly-test.docs.dev.buildwithfern.com
+title: Launch Darkly Test
+navigation: []
+landing-page:
+  page: Test
+  path: test.mdx

tests/launchdarkly/fern/fern.config.json

@@ -0,0 +1,4 @@
+{
+  "organization": "fern",
+  "version": "0.43.4-7-gfe56df403b"
+}

tests/launchdarkly/fern/test.mdx

@@ -0,0 +1,13 @@
+### Testing
+
+<LaunchDarkly flag="flag-1">
+
+Testing **flag 1**
+
+</LaunchDarkly>
+
+<LaunchDarkly flag="flag-2">
+
+Testing **flag 2**
+
+</LaunchDarkly>