fix: transform javascript provider with files (#2073)

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

@@ -16,6 +16,7 @@ import {
   getGitHubInfo,
   getGitHubRepo,
   renderThemeStylesheet,
+  withCustomJavascript,
   withLogo,
 } from "@fern-docs/ui";
 import { serializeMdx } from "@fern-docs/ui/bundlers/mdx-bundler";
@@ -392,7 +393,7 @@ export async function withInitialProps({
     title: docs.definition.config.title,
     favicon: docs.definition.config.favicon,
     colors,
-    js: docs.definition.config.js,
+    js: withCustomJavascript(docs.definition.config.js, resolveFileSrc),
     navbarLinks,
     logo: withLogo(docs.definition, found, frontmatter, resolveFileSrc),
     content,

packages/fern-docs/local-preview-bundle/src/utils/getDocsPageProps.ts

@@ -26,6 +26,7 @@ import {
   NavbarLink,
   renderThemeStylesheet,
   resolveDocsContent,
+  withCustomJavascript,
   withLogo,
 } from "@fern-docs/ui";
 import { serializeMdx } from "@fern-docs/ui/bundlers/next-mdx-remote";
@@ -236,7 +237,7 @@ export async function getDocsPageProps(
     title: docs.definition.config.title,
     favicon: docs.definition.config.favicon,
     colors,
-    js: docs.definition.config.js,
+    js: withCustomJavascript(docs.definition.config.js, resolveFileSrc),
     navbarLinks,
     logo: withLogo(docs.definition, node, frontmatter, resolveFileSrc),
     content,

packages/fern-docs/ui/src/atoms/index.ts

@@ -4,10 +4,11 @@ export * from "./auth";
 export * from "./docs";
 export * from "./flags";
 export * from "./hooks";
+export { JS_ATOM } from "./js";
 export * from "./lang";
 export * from "./layout";
 export * from "./location";
-export * from "./logo";
+export { LOGO_ATOM, LOGO_TEXT_ATOM } from "./logo";
 export * from "./navigation";
 export * from "./playground";
 export * from "./seo";

packages/fern-docs/ui/src/atoms/js.ts

@@ -0,0 +1,40 @@
+import type { DocsV1Read } from "@fern-api/fdr-sdk";
+import type { JsConfig } from "@fern-docs/ui";
+import { isEqual } from "es-toolkit/predicate";
+import { selectAtom } from "jotai/utils";
+import { DOCS_ATOM } from "./docs";
+
+export const JS_ATOM = selectAtom(DOCS_ATOM, (docs) => docs.js, isEqual);
+
+export function withCustomJavascript(
+  readShapeJsConfig: DocsV1Read.JsConfig | undefined,
+  resolveFileSrc: (fileId: string) => { src: string } | undefined
+): JsConfig | undefined {
+  const remote = [
+    ...(readShapeJsConfig?.remote ?? []),
+    ...(readShapeJsConfig?.files ?? []).map((file) => ({
+      url: resolveFileSrc(file.fileId)?.src,
+      strategy: file.strategy,
+    })),
+  ].filter(isRemote);
+
+  const toRet = {
+    inline: readShapeJsConfig?.inline,
+    remote: remote.length > 0 ? remote : undefined,
+  };
+
+  if (!toRet.inline && !toRet.remote) {
+    return undefined;
+  }
+
+  return toRet;
+}
+
+type RemoteJs = NonNullable<JsConfig["remote"]>[number];
+
+function isRemote(remote: {
+  url: string | undefined; // potentially undefined if the file is not found
+  strategy: RemoteJs["strategy"];
+}): remote is RemoteJs {
+  return remote.url != null;
+}

packages/fern-docs/ui/src/components/JavascriptProvider.tsx

@@ -1,13 +1,15 @@
-import { atom, useAtomValue } from "jotai";
+import { useAtomValue } from "jotai";
 import Script from "next/script";
 import { memo } from "react";
-import { DOCS_ATOM } from "../atoms";
-
-const JS_ATOM = atom((get) => get(DOCS_ATOM).js);
+import { JS_ATOM } from "../atoms";
 
 export const JavascriptProvider = memo(() => {
   const js = useAtomValue(JS_ATOM);
 
+  if (!js) {
+    return false;
+  }
+
   return (
     <>
       {js?.inline?.map((inline, idx) => (

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

@@ -3,9 +3,11 @@ export { type CustomerAnalytics } from "./analytics/types";
 export type {
   DocsProps,
   ImageData,
+  JsConfig,
   LogoConfiguration,
   NavbarLink,
 } from "./atoms";
+export { withCustomJavascript } from "./atoms/js";
 export { withLogo } from "./atoms/logo";
 export * from "./docs/DocsPage";
 export * from "./docs/NextApp";