From d3cd6117a7d993eb7c77be803657641f05976b33 Mon Sep 17 00:00:00 2001
From: Andrew Jiang <andrew@buildwithfern.com>
Date: Fri, 24 Jan 2025 15:38:59 -0500
Subject: [PATCH] fix: transform javascript provider with files (#2073)

---
 .../bundle/src/server/withInitialProps.ts     |  3 +-
 .../src/utils/getDocsPageProps.ts             |  3 +-
 packages/fern-docs/ui/src/atoms/index.ts      |  3 +-
 packages/fern-docs/ui/src/atoms/js.ts         | 40 +++++++++++++++++++
 .../ui/src/components/JavascriptProvider.tsx  | 10 +++--
 packages/fern-docs/ui/src/index.ts            |  2 +
 6 files changed, 54 insertions(+), 7 deletions(-)
 create mode 100644 packages/fern-docs/ui/src/atoms/js.ts

diff --git a/packages/fern-docs/bundle/src/server/withInitialProps.ts b/packages/fern-docs/bundle/src/server/withInitialProps.ts
index 49ae081d5d..6e80083f77 100644
--- a/packages/fern-docs/bundle/src/server/withInitialProps.ts
+++ b/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,
diff --git a/packages/fern-docs/local-preview-bundle/src/utils/getDocsPageProps.ts b/packages/fern-docs/local-preview-bundle/src/utils/getDocsPageProps.ts
index 329a4089d5..1491263bbd 100644
--- a/packages/fern-docs/local-preview-bundle/src/utils/getDocsPageProps.ts
+++ b/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,
diff --git a/packages/fern-docs/ui/src/atoms/index.ts b/packages/fern-docs/ui/src/atoms/index.ts
index 0eafc3d3f6..94e53e9856 100644
--- a/packages/fern-docs/ui/src/atoms/index.ts
+++ b/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";
diff --git a/packages/fern-docs/ui/src/atoms/js.ts b/packages/fern-docs/ui/src/atoms/js.ts
new file mode 100644
index 0000000000..90d06b38fe
--- /dev/null
+++ b/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;
+}
diff --git a/packages/fern-docs/ui/src/components/JavascriptProvider.tsx b/packages/fern-docs/ui/src/components/JavascriptProvider.tsx
index 1faa9f470a..0ce469a2a1 100644
--- a/packages/fern-docs/ui/src/components/JavascriptProvider.tsx
+++ b/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) => (
diff --git a/packages/fern-docs/ui/src/index.ts b/packages/fern-docs/ui/src/index.ts
index 83b6b7536f..a79846d9d5 100644
--- a/packages/fern-docs/ui/src/index.ts
+++ b/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";