From 64fc9b38908606c24b70679ac17192150754abd0 Mon Sep 17 00:00:00 2001 From: Andrew Jiang Date: Fri, 20 Dec 2024 18:45:21 -0500 Subject: [PATCH] fix: ssr always true (#1928) --- .../ui/src/api-reference/ApiEndpointPage.tsx | 16 ++-- .../ui/src/api-reference/ApiReferencePage.tsx | 15 ++-- .../ui/src/changelog/ChangelogEntryPage.tsx | 2 +- .../ui/src/changelog/ChangelogPage.tsx | 2 +- .../fern-docs/ui/src/docs/DocsMainContent.tsx | 84 ++++++++----------- .../fern-docs/ui/src/docs/MarkdownPage.tsx | 10 +-- .../ui/src/feedback/FeedbackPopover.tsx | 4 +- 7 files changed, 57 insertions(+), 76 deletions(-) diff --git a/packages/fern-docs/ui/src/api-reference/ApiEndpointPage.tsx b/packages/fern-docs/ui/src/api-reference/ApiEndpointPage.tsx index efcc027999..db5b179d2f 100644 --- a/packages/fern-docs/ui/src/api-reference/ApiEndpointPage.tsx +++ b/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 = ({ +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 = ({ ); -}; +} diff --git a/packages/fern-docs/ui/src/api-reference/ApiReferencePage.tsx b/packages/fern-docs/ui/src/api-reference/ApiReferencePage.tsx index eb247a7b08..51b7228346 100644 --- a/packages/fern-docs/ui/src/api-reference/ApiReferencePage.tsx +++ b/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 = ({ +export default function ApiReferencePage({ content, -}) => { +}: { + content: DocsContent.ApiReferencePage; +}): ReactNode { const hydrated = useIsReady(); useWriteApiDefinitionAtom(content.apiDefinition); @@ -49,4 +46,4 @@ export const ApiReferencePage: React.FC = ({ ); -}; +} diff --git a/packages/fern-docs/ui/src/changelog/ChangelogEntryPage.tsx b/packages/fern-docs/ui/src/changelog/ChangelogEntryPage.tsx index 4bb503b3a9..ab47568235 100644 --- a/packages/fern-docs/ui/src/changelog/ChangelogEntryPage.tsx +++ b/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; diff --git a/packages/fern-docs/ui/src/changelog/ChangelogPage.tsx b/packages/fern-docs/ui/src/changelog/ChangelogPage.tsx index a10e3eb134..dc663ae4e2 100644 --- a/packages/fern-docs/ui/src/changelog/ChangelogPage.tsx +++ b/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; diff --git a/packages/fern-docs/ui/src/docs/DocsMainContent.tsx b/packages/fern-docs/ui/src/docs/DocsMainContent.tsx index e502f7f8ed..a4fb62b04c 100644 --- a/packages/fern-docs/ui/src/docs/DocsMainContent.tsx +++ b/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) => , - "api-reference-page": (content) => , - "api-endpoint-page": (content) => , - changelog: (content) => , - "changelog-entry": (content) => , - _other: () => null, - }); +const DocsMainContentRenderer = memo(function DocsMainContentRenderer({ + content, +}: { + content: DocsContent; +}): ReactElement | null { + switch (content.type) { + case "markdown-page": + return ; + case "api-reference-page": + return ; + case "api-endpoint-page": + return ; + case "changelog": + return ; + case "changelog-entry": + return ; + 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 diff --git a/packages/fern-docs/ui/src/docs/MarkdownPage.tsx b/packages/fern-docs/ui/src/docs/MarkdownPage.tsx index c17342e5c5..8e4e0ed4ce 100644 --- a/packages/fern-docs/ui/src/docs/MarkdownPage.tsx +++ b/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 ; } diff --git a/packages/fern-docs/ui/src/feedback/FeedbackPopover.tsx b/packages/fern-docs/ui/src/feedback/FeedbackPopover.tsx index cc78a2f3b5..42fffe90e1 100644 --- a/packages/fern-docs/ui/src/feedback/FeedbackPopover.tsx +++ b/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;