(chore): nextjs bundle analysis (#1269)

.github/workflows/nextjs_bundle_analysis.yml

@@ -0,0 +1,126 @@
+# Copyright (c) HashiCorp, Inc.
+# SPDX-License-Identifier: MPL-2.0
+
+name: "Next.js Bundle Analysis"
+
+on:
+  pull_request:
+  push:
+    branches:
+      - main # change this if your default branch is named differently
+  workflow_dispatch:
+
+defaults:
+  run:
+    # change this if your nextjs app does not live at the root of the repo
+    working-directory: ./
+
+permissions:
+  contents: read # for checkout repository
+  actions: read # for fetching base branch bundle stats
+  pull-requests: write # for comments
+
+jobs:
+  analyze:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Install Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+
+      - uses: pnpm/action-setup@v4
+        name: Install pnpm
+        id: pnpm-install
+        with:
+          version: 9.4.0
+          run_install: true
+
+      - name: Restore next build
+        uses: actions/cache@v3
+        id: restore-build-cache
+        env:
+          cache-name: cache-next-build
+        with:
+          # if you use a custom build directory, replace all instances of `.next` in this file with your build directory
+          # ex: if your app builds to `dist`, replace `.next` with `dist`
+          path: packages/ui/docs-bundle/.next/cache
+          # change this if you prefer a more strict cache
+          key: ${{ runner.os }}-build-${{ env.cache-name }}
+
+      - name: Install Vercel CLI
+        run: npm install --global vercel@latest
+
+      - name: Build Project Artifacts
+        run: pnpm docs:build
+
+      # Here's the first place where next-bundle-analysis' own script is used
+      # This step pulls the raw bundle stats for the current bundle
+      - name: Analyze bundle
+        run: npx -p nextjs-bundle-analysis report
+
+      - name: Upload bundle
+        uses: actions/upload-artifact@v3
+        with:
+          name: bundle
+          path: packages/ui/docs-bundle/.next/analyze/__bundle_analysis.json
+
+      - name: Download base branch bundle stats
+        uses: dawidd6/action-download-artifact@v2
+        if: success() && github.event.number
+        with:
+          workflow: nextjs_bundle_analysis.yml
+          branch: ${{ github.event.pull_request.base.ref }}
+          path: packages/ui/docs-bundle/.next/analyze/base
+
+      # And here's the second place - this runs after we have both the current and
+      # base branch bundle stats, and will compare them to determine what changed.
+      # There are two configurable arguments that come from package.json:
+      #
+      # - budget: optional, set a budget (bytes) against which size changes are measured
+      #           it's set to 350kb here by default, as informed by the following piece:
+      #           https://infrequently.org/2021/03/the-performance-inequality-gap/
+      #
+      # - red-status-percentage: sets the percent size increase where you get a red
+      #                          status indicator, defaults to 20%
+      #
+      # Either of these arguments can be changed or removed by editing the `nextBundleAnalysis`
+      # entry in your package.json file.
+      - name: Compare with base branch bundle
+        if: success() && github.event.number
+        run: ls -laR packages/ui/docs-bundle/.next/analyze/base && npx -p nextjs-bundle-analysis compare
+
+      - name: Get Comment Body
+        id: get-comment-body
+        if: success() && github.event.number
+        # https://docs.github.com/en/actions/using-workflows/workflow-commands-for-github-actions#multiline-strings
+        run: |
+          echo "body<<EOF" >> $GITHUB_OUTPUT
+          echo "$(cat packages/ui/docs-bundle/.next/analyze/__bundle_analysis_comment.txt)" >> $GITHUB_OUTPUT
+          echo EOF >> $GITHUB_OUTPUT
+
+      - name: Find Comment
+        uses: peter-evans/find-comment@v2
+        if: success() && github.event.number
+        id: fc
+        with:
+          issue-number: ${{ github.event.number }}
+          body-includes: "<!-- __NEXTJS_BUNDLE -->"
+
+      - name: Create Comment
+        uses: peter-evans/create-or-update-comment@v2
+        if: success() && github.event.number && steps.fc.outputs.comment-id == 0
+        with:
+          issue-number: ${{ github.event.number }}
+          body: ${{ steps.get-comment-body.outputs.body }}
+
+      - name: Update Comment
+        uses: peter-evans/create-or-update-comment@v2
+        if: success() && github.event.number && steps.fc.outputs.comment-id != 0
+        with:
+          issue-number: ${{ github.event.number }}
+          body: ${{ steps.get-comment-body.outputs.body }}
+          comment-id: ${{ steps.fc.outputs.comment-id }}
+          edit-mode: replace

.github/workflows/production.yml

@@ -6,7 +6,6 @@ env:
   ALGOLIA_APP_ID: ${{ secrets.ALGOLIA_APP_ID }}
   ALGOLIA_SEARCH_INDEX: ${{ secrets.ALGOLIA_SEARCH_INDEX }}
   POSTHOG_API_KEY: ${{ secrets.POSTHOG_API_KEY }}
-  DATADOG_CLIENT_TOKEN: ${{ secrets.DATADOG_API_KEY }}
   FONTAWESOME_CDN_HOST: https://icons.ferndocs.com
   WORKOS_API_KEY: ${{ secrets.WORKOS_API_KEY }}
   WORKOS_CLIENT_ID: ${{ secrets.WORKOS_CLIENT_ID }}
@@ -76,18 +75,6 @@ jobs:
 
           echo "Done!"
 
-      - name: Install datadog-ci
-        run: pnpm install --global @datadog/datadog-ci
-
-      - name: Upload sourcemap
-        run: |
-          datadog-ci sourcemaps upload ./packages/ui/docs-bundle/.next/static \
-          --service=docs-frontend \
-          --release-version="$(scripts/git-version.sh)" \
-          --minified-path-prefix=https://app.buildwithfern.com/_next/static
-        env:
-          DATADOG_API_KEY: ${{ secrets.DATADOG_API_KEY }}
-
   smoke-test:
     needs: deploy
     runs-on: ubuntu-latest

clis/docs-migrator/src/fern.ts

@@ -1,4 +1,4 @@
-import { DocsV1Read } from "@fern-api/fdr-sdk";
+import { DocsV1Read } from "@fern-api/fdr-sdk/client/types";
 
 /**
  * The layout used for guides. This is the default layout.

package.json

@@ -101,5 +101,12 @@
     "@radix-ui/colors": "^3.0.0",
     "fern-api": "^0.21.0"
   },
-  "packageManager": "[email protected]"
+  "packageManager": "[email protected]",
+  "nextBundleAnalysis": {
+    "buildOutputDirectory": "packages/ui/docs-bundle/.next",
+    "budget": 358400,
+    "budgetPercentIncreaseRed": 20,
+    "minimumChangeThreshold": 0,
+    "showDetails": true
+  }
 }

packages/commons/fdr-utils/src/definition-object-factory.ts

@@ -1,4 +1,4 @@
-import { FdrAPI } from "@fern-api/fdr-sdk";
+import { FdrAPI } from "@fern-api/fdr-sdk/client/types";
 
 export class DefinitionObjectFactory {
     public static createDocsDefinition(): FdrAPI.docs.v1.read.DocsDefinition {

packages/commons/fdr-utils/src/docs.ts

@@ -1,4 +1,4 @@
-import { DocsV1Read } from "@fern-api/fdr-sdk";
+import { DocsV1Read } from "@fern-api/fdr-sdk/client/types";
 import { Availability } from "@fern-api/fdr-sdk/navigation";
 
 export function isVersionedNavigationConfig(

packages/commons/fdr-utils/src/stringifyEndpointPathParts.ts

@@ -1,4 +1,4 @@
-import { APIV1Read } from "@fern-api/fdr-sdk";
+import { APIV1Read } from "@fern-api/fdr-sdk/client/types";
 
 export function stringifyEndpointPathParts(path: APIV1Read.EndpointPathPart[]): string {
     return "/" + path.map((part) => (part.type === "literal" ? part.value : `${part.value}`)).join("/");

packages/commons/fdr-utils/src/types.ts

@@ -1,4 +1,5 @@
-import type { DocsV1Read, FernNavigation } from "@fern-api/fdr-sdk";
+import type { DocsV1Read } from "@fern-api/fdr-sdk/client/types";
+import type * as FernNavigation from "@fern-api/fdr-sdk/navigation";
 
 export interface ColorsConfig {
     light: DocsV1Read.ThemeConfig | undefined;

packages/commons/search-utils/package.json

@@ -29,7 +29,7 @@
     "depcheck": "depcheck"
   },
   "dependencies": {
-    "@fern-api/fdr-sdk": "0.98.6-a0f252ba1",
+    "@fern-api/fdr-sdk": "workspace:*",
     "@fern-ui/core-utils": "workspace:*",
     "@vercel/edge-config": "^1.1.0"
   },

packages/commons/search-utils/src/SearchConfig.ts

@@ -1,4 +1,5 @@
-import { Algolia, FdrClient } from "@fern-api/fdr-sdk";
+import type { FdrClient } from "@fern-api/fdr-sdk";
+import type { Algolia } from "@fern-api/fdr-sdk/client/types";
 import { assertNonNullish } from "@fern-ui/core-utils";
 import type {
     InkeepAIChatSettings,
@@ -9,10 +10,6 @@ import type {
 import { getAll } from "@vercel/edge-config";
 import type { DeepReadonly } from "ts-essentials";
 
-export const REGISTRY_SERVICE = new FdrClient({
-    environment: process.env.NEXT_PUBLIC_FDR_ORIGIN ?? "https://registry.buildwithfern.com",
-});
-
 const FEATURE_FLAGS = ["inkeep-enabled" as const];
 
 export type InkeepSharedSettings = DeepReadonly<{
@@ -66,7 +63,10 @@ export interface SearchRequest {
     searchInfo: Algolia.SearchInfo | undefined;
 }
 
-async function getAlgoliaSearchConfig(searchInfo: Algolia.SearchInfo): Promise<SearchConfig.Algolia | undefined> {
+async function getAlgoliaSearchConfig(
+    client: FdrClient,
+    searchInfo: Algolia.SearchInfo,
+): Promise<SearchConfig.Algolia | undefined> {
     if (searchInfo.type === "legacyMultiAlgoliaIndex") {
         return undefined;
     }
@@ -78,7 +78,7 @@ async function getAlgoliaSearchConfig(searchInfo: Algolia.SearchInfo): Promise<S
     assertNonNullish(algoliaSearchIndex, "Missing environment variable: NEXT_PUBLIC_ALGOLIA_SEARCH_INDEX");
 
     if (searchInfo.value.type === "unversioned") {
-        const resp = await REGISTRY_SERVICE.docs.v2.read.getSearchApiKeyForIndexSegment({
+        const resp = await client.docs.v2.read.getSearchApiKeyForIndexSegment({
             indexSegmentId: searchInfo.value.indexSegment.id,
         });
 
@@ -98,7 +98,7 @@ async function getAlgoliaSearchConfig(searchInfo: Algolia.SearchInfo): Promise<S
         const values: Record<string, string> = {};
 
         for (const [versionId, indexSegment] of Object.entries(searchInfo.value.indexSegmentsByVersionId)) {
-            const resp = await REGISTRY_SERVICE.docs.v2.read.getSearchApiKeyForIndexSegment({
+            const resp = await client.docs.v2.read.getSearchApiKeyForIndexSegment({
                 indexSegmentId: indexSegment.id,
             });
 
@@ -126,8 +126,12 @@ async function getAlgoliaSearchConfig(searchInfo: Algolia.SearchInfo): Promise<S
     return undefined;
 }
 
-export async function getSearchConfig(domain: string, searchInfo: Algolia.SearchInfo): Promise<SearchConfig> {
-    const algolia = await getAlgoliaSearchConfig(searchInfo);
+export async function getSearchConfig(
+    client: FdrClient,
+    domain: string,
+    searchInfo: Algolia.SearchInfo,
+): Promise<SearchConfig> {
+    const algolia = await getAlgoliaSearchConfig(client, searchInfo);
 
     // TODO: there shouldn't be a dependency on algolia being available, if inkeep is enabled.
     if (algolia == null) {

packages/commons/search-utils/src/getSlugForSearchRecord.ts

@@ -1,4 +1,5 @@
-import { Algolia, FernNavigation } from "@fern-api/fdr-sdk";
+import type { Algolia } from "@fern-api/fdr-sdk/client/types";
+import * as FernNavigation from "@fern-api/fdr-sdk/navigation";
 import { UnreachableCaseError } from "ts-essentials";
 
 export function getSlugForSearchRecord(record: Algolia.AlgoliaRecord, basePath: string | undefined): string {

packages/commons/search-utils/src/types.ts

@@ -1,4 +1,4 @@
-import { Algolia } from "@fern-api/fdr-sdk";
+import { Algolia } from "@fern-api/fdr-sdk/client/types";
 import type { Hit as AlgoliaHit } from "instantsearch.js";
 
 export type SearchRecord = AlgoliaHit<Algolia.AlgoliaRecord & Record<string, unknown>>;

packages/fdr-sdk/package.json

@@ -13,6 +13,10 @@
       "types": "./dist/navigation/index.d.ts",
       "default": "./dist/navigation/index.js"
     },
+    "./client/types": {
+      "types": "./dist/client/types.d.ts",
+      "default": "./dist/client/types.js"
+    },
     ".": {
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"

packages/fdr-sdk/src/client/index.ts

@@ -1,15 +1,5 @@
-export * as DocsV1Db from "./DocsV1Db";
-export * as DocsV1Read from "./DocsV1Read";
-export * as DocsV1Write from "./DocsV1Write";
-export { FernRegistry as FdrAPI, FernRegistryClient as FdrClient } from "./generated";
-export * as Algolia from "./generated/api/resources/algolia";
-export * as APIV1Db from "./generated/api/resources/api/resources/v1/resources/db";
-export * as APIV1Read from "./generated/api/resources/api/resources/v1/resources/read";
-export * as APIV1Write from "./generated/api/resources/api/resources/v1/resources/register";
-export * as DocsV2Read from "./generated/api/resources/docs/resources/v2/resources/read";
-export * as DocsV2Write from "./generated/api/resources/docs/resources/v2/resources/write";
-export * as Snippets from "./generated/api/resources/snippets/types";
-export * from "./generated/core/fetcher/APIResponse";
+export { FernRegistryClient as FdrClient } from "./generated";
+export * from "./types";
 export { visitDbNavigationConfig, visitUnversionedDbNavigationConfig } from "./visitDbNavigationConfig";
 export { visitDbNavigationTab, visitWriteNavigationTab } from "./visitNavigationTab";
 export { visitReadNavigationConfig, visitUnversionedReadNavigationConfig } from "./visitReadNavigationConfig";

packages/fdr-sdk/src/client/types.ts

@@ -0,0 +1,12 @@
+export * as DocsV1Db from "./DocsV1Db";
+export * as DocsV1Read from "./DocsV1Read";
+export * as DocsV1Write from "./DocsV1Write";
+export * as FdrAPI from "./generated/api";
+export * as Algolia from "./generated/api/resources/algolia";
+export * as APIV1Db from "./generated/api/resources/api/resources/v1/resources/db";
+export * as APIV1Read from "./generated/api/resources/api/resources/v1/resources/read";
+export * as APIV1Write from "./generated/api/resources/api/resources/v1/resources/register";
+export * as DocsV2Read from "./generated/api/resources/docs/resources/v2/resources/read";
+export * as DocsV2Write from "./generated/api/resources/docs/resources/v2/resources/write";
+export * as Snippets from "./generated/api/resources/snippets/types";
+export * from "./generated/core/fetcher/APIResponse";

packages/fdr-sdk/src/client/visitReadNavigationConfig.ts

@@ -1,4 +1,4 @@
-import { DocsV1Read } from ".";
+import { DocsV1Read } from "./types";
 
 export interface ReadNavigationConfigVisitor<T> {
     versioned: (config: DocsV1Read.VersionedNavigationConfig) => T;

packages/fdr-sdk/src/index.ts

@@ -1,5 +1,6 @@
 export * from "./client";
 export * from "./converters";
 export * as FernNavigation from "./navigation";
+export { default as once } from "./utils/lodash/once";
 export * from "./utils/titleCase";
 export * from "./utils/visitDiscriminatedUnion";

packages/fdr-sdk/src/navigation/ApiDefinitionHolder.ts

@@ -1,4 +1,4 @@
-import { APIV1Read } from "../client";
+import type { APIV1Read } from "../client/types";
 import { ROOT_PACKAGE_ID } from "./consts";
 import { FernNavigation } from "./generated";
 import { isSubpackage } from "./utils/isSubpackage";

packages/fdr-sdk/src/navigation/__test__/NavigationConfigConverter.test.ts

@@ -1,6 +1,6 @@
 import fs from "fs";
 import path from "path";
-import { DocsV2Read } from "../../client";
+import type { DocsV2Read } from "../../client/types";
 import { NodeCollector } from "../NodeCollector";
 import { convertLoadDocsForUrlResponse } from "../utils";
 import { collectPageIds } from "../utils/collectPageIds";

packages/fdr-sdk/src/navigation/__test__/primer.test.ts

@@ -1,6 +1,6 @@
 import fs from "fs";
 import path from "path";
-import { DocsV2Read } from "../../client";
+import type { DocsV2Read } from "../../client/types";
 import { FernNavigation } from "../generated";
 import { convertLoadDocsForUrlResponse, findNode } from "../utils";
 import { testGetAllUrlsFromDocsConfig } from "./testGetAllUrlsFromDocsConfig";

packages/fdr-sdk/src/navigation/__test__/testGetAllUrlsFromDocsConfig.ts

@@ -1,7 +1,7 @@
 import fs from "fs";
 import path from "path";
 import urljoin from "url-join";
-import { DocsV2Read } from "../../client";
+import type { DocsV2Read } from "../../client/types";
 import { NodeCollector } from "../NodeCollector";
 import { convertLoadDocsForUrlResponse } from "../utils";
 

packages/fdr-sdk/src/navigation/__test__/testGetNavigationRoot.ts

@@ -1,6 +1,6 @@
 import fs from "fs";
 import path from "path";
-import { DocsV2Read } from "../../client";
+import type { DocsV2Read } from "../../client/types";
 import { convertLoadDocsForUrlResponse, findNode, slugjoin } from "../utils";
 
 export function testGetNavigationRoot(fixtureName: string, slug: string): void {

packages/fdr-sdk/src/navigation/converters/ApiReferenceNavigationConverter.ts

@@ -1,6 +1,6 @@
 import { noop } from "ts-essentials";
 import urljoin from "url-join";
-import { APIV1Read, DocsV1Read } from "../../client";
+import type { APIV1Read, DocsV1Read } from "../../client/types";
 import { titleCase, visitDiscriminatedUnion } from "../../utils";
 import { ApiDefinitionHolder } from "../ApiDefinitionHolder";
 import { ROOT_PACKAGE_ID } from "../consts";

packages/fdr-sdk/src/navigation/converters/ChangelogConverter.ts

@@ -1,6 +1,6 @@
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
-import { DocsV1Read } from "../../client";
+import type { DocsV1Read } from "../../client/types";
 import { FernNavigation } from "../generated";
 import { NodeIdGenerator } from "./NodeIdGenerator";
 import { SlugGenerator } from "./SlugGenerator";