fix: ssr always true (#1928)

packages/fern-docs/ui/src/api-reference/ApiEndpointPage.tsx

@@ -1,7 +1,7 @@
 import type * as FernNavigation from "@fern-api/fdr-sdk/navigation";
 import { EMPTY_OBJECT } from "@fern-api/ui-core-utils";
 import { useSetAtom } from "jotai";
-import { useEffect } from "react";
+import { ReactNode, useEffect } from "react";
 import { useNavigationNodes, useWriteApiDefinitionAtom } from "../atoms";
 import { ALL_ENVIRONMENTS_ATOM } from "../atoms/environment";
 import { BottomNavigationNeighbors } from "../components/BottomNavigationNeighbors";
@@ -14,15 +14,11 @@ import {
   isApiPackageContentNode,
 } from "./ApiPackageContent";
 
-export declare namespace ApiEndpointPage {
-  export interface Props {
-    content: DocsContent.ApiEndpointPage;
-  }
-}
-
-export const ApiEndpointPage: React.FC<ApiEndpointPage.Props> = ({
+export default function ApiEndpointPage({
   content,
-}) => {
+}: {
+  content: DocsContent.ApiEndpointPage;
+}): ReactNode {
   useWriteApiDefinitionAtom(content.apiDefinition);
 
   // TODO: Why are we doing this here?
@@ -72,4 +68,4 @@ export const ApiEndpointPage: React.FC<ApiEndpointPage.Props> = ({
       </div>
     </ApiPageContext.Provider>
   );
-};
+}

packages/fern-docs/ui/src/api-reference/ApiReferencePage.tsx

@@ -1,3 +1,4 @@
+import { ReactNode } from "react";
 import {
   useIsReady,
   useNavigationNodes,
@@ -8,15 +9,11 @@ import { DocsContent } from "../resolver/DocsContent";
 import { BuiltWithFern } from "../sidebar/BuiltWithFern";
 import { ApiReferenceContent } from "./ApiReferenceContent";
 
-export declare namespace ApiReferencePage {
-  export interface Props {
-    content: DocsContent.ApiReferencePage;
-  }
-}
-
-export const ApiReferencePage: React.FC<ApiReferencePage.Props> = ({
+export default function ApiReferencePage({
   content,
-}) => {
+}: {
+  content: DocsContent.ApiReferencePage;
+}): ReactNode {
   const hydrated = useIsReady();
 
   useWriteApiDefinitionAtom(content.apiDefinition);
@@ -49,4 +46,4 @@ export const ApiReferencePage: React.FC<ApiReferencePage.Props> = ({
       </div>
     </ApiPageContext.Provider>
   );
-};
+}

packages/fern-docs/ui/src/changelog/ChangelogEntryPage.tsx

@@ -6,7 +6,7 @@ import { useHref } from "../hooks/useHref";
 import { Markdown } from "../mdx/Markdown";
 import { DocsContent } from "../resolver/DocsContent";
 
-export function ChangelogEntryPage({
+export default function ChangelogEntryPage({
   content,
 }: {
   content: DocsContent.ChangelogEntryPage;

packages/fern-docs/ui/src/changelog/ChangelogPage.tsx

@@ -39,7 +39,7 @@ function getOverviewMdx(
     : undefined;
 }
 
-export function ChangelogPage({
+export default function ChangelogPage({
   content,
 }: {
   content: DocsContent.ChangelogPage;

packages/fern-docs/ui/src/docs/DocsMainContent.tsx

@@ -1,73 +1,57 @@
-import { visitDiscriminatedUnion } from "@fern-api/ui-core-utils";
 import dynamic from "next/dynamic";
 import { useSearchParams } from "next/navigation";
 import { Fragment, ReactElement, memo } from "react";
-import { useFeatureFlags, useIsReady } from "../atoms";
+import { UnreachableCaseError } from "ts-essentials";
+import { useFeatureFlag, useIsReady } from "../atoms";
 import { FernErrorBoundary } from "../components/FernErrorBoundary";
 import type { DocsContent } from "../resolver/DocsContent";
 
-const MarkdownPage = dynamic(
-  () => import("./MarkdownPage").then(({ MarkdownPage }) => MarkdownPage),
-  {
-    ssr: true,
-  }
-);
+const MarkdownPage = dynamic(() => import("./MarkdownPage"), { ssr: true });
 
 const ApiReferencePage = dynamic(
-  () =>
-    import("../api-reference/ApiReferencePage").then(
-      ({ ApiReferencePage }) => ApiReferencePage
-    ),
+  () => import("../api-reference/ApiReferencePage"),
   { ssr: true }
 );
 
 const ApiEndpointPage = dynamic(
-  () =>
-    import("../api-reference/ApiEndpointPage").then(
-      ({ ApiEndpointPage }) => ApiEndpointPage
-    ),
+  () => import("../api-reference/ApiEndpointPage"),
   { ssr: true }
 );
 
-const ChangelogPage = dynamic(
-  () =>
-    import("../changelog/ChangelogPage").then(
-      ({ ChangelogPage }) => ChangelogPage
-    ),
-  {
-    ssr: true,
-  }
-);
+const ChangelogPage = dynamic(() => import("../changelog/ChangelogPage"), {
+  ssr: true,
+});
 
 const ChangelogEntryPage = dynamic(
-  () =>
-    import("../changelog/ChangelogEntryPage").then(
-      ({ ChangelogEntryPage }) => ChangelogEntryPage
-    ),
+  () => import("../changelog/ChangelogEntryPage"),
   { ssr: true }
 );
 
-const FeedbackPopover = dynamic(
-  () =>
-    import("../feedback/FeedbackPopover").then(
-      ({ FeedbackPopover }) => FeedbackPopover
-    ),
-  { ssr: false }
-);
+const FeedbackPopover = dynamic(() => import("../feedback/FeedbackPopover"), {
+  ssr: true,
+});
 
-const DocsMainContentRenderer = memo(
-  ({ content }: { content: DocsContent }) => {
-    return visitDiscriminatedUnion(content)._visit({
-      "markdown-page": (content) => <MarkdownPage content={content} />,
-      "api-reference-page": (content) => <ApiReferencePage content={content} />,
-      "api-endpoint-page": (content) => <ApiEndpointPage content={content} />,
-      changelog: (content) => <ChangelogPage content={content} />,
-      "changelog-entry": (content) => <ChangelogEntryPage content={content} />,
-      _other: () => null,
-    });
+const DocsMainContentRenderer = memo(function DocsMainContentRenderer({
+  content,
+}: {
+  content: DocsContent;
+}): ReactElement | null {
+  switch (content.type) {
+    case "markdown-page":
+      return <MarkdownPage content={content} />;
+    case "api-reference-page":
+      return <ApiReferencePage content={content} />;
+    case "api-endpoint-page":
+      return <ApiEndpointPage content={content} />;
+    case "changelog":
+      return <ChangelogPage content={content} />;
+    case "changelog-entry":
+      return <ChangelogEntryPage content={content} />;
+    default:
+      console.error(new UnreachableCaseError(content));
+      return null;
   }
-);
-DocsMainContentRenderer.displayName = "DocsMainContentRenderer";
+});
 
 function LazyDocsMainContentRenderer({
   content,
@@ -83,11 +67,13 @@ export const DocsMainContent = memo(function DocsMainContent({
 }: {
   content: DocsContent;
 }): ReactElement {
-  const { isInlineFeedbackEnabled } = useFeatureFlags();
+  const isInlineFeedbackEnabled = useFeatureFlag("isInlineFeedbackEnabled");
   const searchParams = useSearchParams();
+
   const FeedbackPopoverProvider = isInlineFeedbackEnabled
     ? FeedbackPopover
     : Fragment;
+
   const ContentRenderer =
     searchParams.get("error") === "true"
       ? LazyDocsMainContentRenderer

packages/fern-docs/ui/src/docs/MarkdownPage.tsx

@@ -1,13 +1,13 @@
-import { ReactElement } from "react";
+import { ReactNode } from "react";
 import { useWriteApiDefinitionsAtom } from "../atoms";
 import { LayoutEvaluator } from "../layouts/LayoutEvaluator";
 import { DocsContent } from "../resolver/DocsContent";
 
-interface MarkdownPageProps {
+export default function MarkdownPage({
+  content,
+}: {
   content: DocsContent.MarkdownPage;
-}
-
-export function MarkdownPage({ content }: MarkdownPageProps): ReactElement {
+}): ReactNode {
   useWriteApiDefinitionsAtom(content.apis);
   return <LayoutEvaluator {...content} />;
 }

packages/fern-docs/ui/src/feedback/FeedbackPopover.tsx

@@ -74,7 +74,7 @@ type SelectionTextToolbarProps = {
 //     );
 // };
 
-export const FeedbackPopover = forwardRef<
+const FeedbackPopover = forwardRef<
   SelectionTextToolbarElement,
   SelectionTextToolbarProps
 >(({ children }, forwardedRef) => {
@@ -249,3 +249,5 @@ export const FeedbackPopover = forwardRef<
 });
 
 FeedbackPopover.displayName = "FeedbackPopover";
+
+export default FeedbackPopover;