fix: rollback scalar (#2454)

Co-authored-by: Brett Jephson <brett@gitbook.io>

Author: marclave

.changeset/quiet-doors-double.md

@@ -0,0 +1,6 @@
+---
+'@gitbook/react-openapi': minor
+'gitbook': patch
+---
+
+Rollback of scalar modal while fixing perf issue

bun.lockb

@@ -28,5 +28,8 @@
     },
     "patchedDependencies": {
         "@vercel/next@4.3.6": "patches/@vercel%2Fnext@4.3.6.patch"
+    },
+    "dependencies": {
+        "@scalar/api-client-react": "0.3.7"
     }
 }

package.json

@@ -29,7 +29,7 @@ export async function OpenAPI(props: BlockProps<DocumentBlockSwagger>) {
 
 async function OpenAPIBody(props: BlockProps<DocumentBlockSwagger>) {
     const { block, context } = props;
-    const { data, specUrl, error } = await fetchOpenAPIBlock(block, context.resolveContentRef);
+    const { data, error } = await fetchOpenAPIBlock(block, context.resolveContentRef);
 
     if (error) {
         return (
@@ -41,7 +41,7 @@ async function OpenAPIBody(props: BlockProps<DocumentBlockSwagger>) {
         );
     }
 
-    if (!data || !specUrl) {
+    if (!data) {
         return null;
     }
 
@@ -55,7 +55,6 @@ async function OpenAPIBody(props: BlockProps<DocumentBlockSwagger>) {
                 },
                 CodeBlock: PlainCodeBlock,
                 defaultInteractiveOpened: context.mode === 'print',
-                specUrl,
                 id: block.meta?.id,
             }}
             className="openapi-block"

packages/gitbook/src/components/DocumentView/OpenAPI/OpenAPI.tsx

@@ -1,7 +1,4 @@
-@import '@scalar/api-client-react/style.css';
-
 .light .scalar-modal-layout,
-.light .scalar-app,
 .light .scalar {
     --scalar-color-1: color-mix(
         in srgb,
@@ -53,13 +50,8 @@
     --scalar-button-1: rgb(49 53 56);
     --scalar-button-1-color: #fff;
     --scalar-button-1-hover: rgb(28 31 33);
-
-    --scalar-shadow-1: 0 1px 3px 0 rgba(0, 0, 0, 0.11);
-    --scalar-shadow-2: rgba(0, 0, 0, 0.08) 0px 13px 20px 0px, rgba(0, 0, 0, 0.08) 0px 3px 8px 0px,
-        #eeeeed 0px 0 0 1px;
 }
 .dark .scalar-modal-layout,
-.dark .scalar-app,
 .dark .scalar {
     --scalar-color-1: color-mix(
         in srgb,
@@ -110,13 +102,8 @@
     --scalar-button-1: #f6f6f6;
     --scalar-button-1-color: #000;
     --scalar-button-1-hover: #e7e7e7;
-
-    --scalar-shadow-1: 0 1px 3px 0 rgb(0, 0, 0, 0.1);
-    --scalar-shadow-2: rgba(15, 15, 15, 0.2) 0px 3px 6px, rgba(15, 15, 15, 0.4) 0px 9px 24px,
-        0 0 0 1px rgba(255, 255, 255, 0.1);
 }
 .scalar-modal-layout,
-.scalar-app,
 .scalar {
     --scalar-font: initial;
     --scalar-font-code: var(--font-mono);
@@ -178,7 +165,7 @@
 .scalar-api-client__close:hover {
     cursor: pointer;
 }
-.scalar .scalar-app-layout {
+.scalar .scalar-app {
     background: var(--scalar-background-3);
     height: calc(100dvh - 100px);
     max-width: 1280px;
@@ -215,6 +202,23 @@
     cursor: pointer;
     animation: scalardrawerexitfadein 0.35s forwards;
 }
+.scalar .scalar-app-exit:before {
+    content: '\00d7';
+    font-family: sans-serif;
+    position: absolute;
+    top: 0;
+    right: 0;
+    font-size: 30px;
+    font-weight: 100;
+    line-height: 50px;
+    right: 12px;
+    text-align: center;
+    color: white;
+    opacity: 0.6;
+}
+.scalar .scalar-app-exit:hover:before {
+    opacity: 1;
+}
 @keyframes scalardrawerexitfadein {
     from {
         opacity: 0;
@@ -301,6 +305,11 @@
     scrollbar-width: thin;
     -webkit-overflow-scrolling: touch;
 }
+@supports (-moz-appearance: none) {
+    .scalar .custom-scroll {
+        padding-right: 12px;
+    }
+}
 .scalar .custom-scroll:hover {
     scrollbar-color: rgba(0, 0, 0, 0.24) transparent;
 }
@@ -338,18 +347,3 @@
         padding-right: 12px;
     }
 }
-.dark .scalar .client-wrapper-bg-color {
-    background: linear-gradient(
-        color-mix(in srgb, var(--tw-bg-base) 6%, transparent) 1%,
-        color-mix(in srgb, var(--scalar-background-1) 30%, black) 9%
-    );
-}
-.light .scalar .client-wrapper-bg-color {
-    background-color: var(--scalar-background-2) !important;
-}
-.scalar .gitbook-show {
-    display: block !important;
-}
-.scalar .gitbook-hidden {
-    display: none !important;
-}

packages/gitbook/src/components/DocumentView/OpenAPI/scalar.css

@@ -19,12 +19,12 @@ export async function fetchOpenAPIBlock(
     block: DocumentBlockSwagger,
     resolveContentRef: (ref: ContentRef) => Promise<ResolvedContentRef | null>,
 ): Promise<
-    | { data: OpenAPIOperationData | null; specUrl: string | null; error?: undefined }
-    | { error: OpenAPIFetchError; data?: undefined; specUrl?: undefined }
+    | { data: OpenAPIOperationData | null; error?: undefined }
+    | { error: OpenAPIFetchError; data?: undefined }
 > {
     const resolved = block.data.ref ? await resolveContentRef(block.data.ref) : null;
     if (!resolved || !block.data.path || !block.data.method) {
-        return { data: null, specUrl: null };
+        return { data: null };
     }
 
     try {
@@ -37,7 +37,7 @@ export async function fetchOpenAPIBlock(
             fetcher,
         );
 
-        return { data, specUrl: resolved.href };
+        return { data };
     } catch (error) {
         if (error instanceof OpenAPIFetchError) {
             return { error };

packages/gitbook/src/lib/openapi.ts

@@ -10,7 +10,8 @@
     },
     "version": "0.6.0",
     "dependencies": {
-        "@scalar/api-client-react": "1.0.20",
+        "@scalar/api-client-react": "0.3.7",
+        "@scalar/oas-utils": "0.1.6",
         "classnames": "^2.5.1",
         "flatted": "^3.2.9",
         "openapi-types": "^12.1.3",

packages/react-openapi/package.json

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import { CodeSampleInput, codeSampleGenerators } from './code-samples';
-import { OpenAPIOperationData } from './fetchOpenAPIOperation';
+import { OpenAPIOperationData, toJSON } from './fetchOpenAPIOperation';
 import { generateMediaTypeExample } from './generateSchemaExample';
 import { InteractiveSection } from './InteractiveSection';
 import { getServersURL } from './OpenAPIServerURL';
@@ -70,14 +70,19 @@ export function OpenAPICodeSample(props: {
         return null;
     }
 
+    async function fetchOperationData() {
+        'use server';
+        return toJSON(data);
+    }
+
     return (
         <InteractiveSection
             header="Request"
             className="openapi-codesample"
             tabs={samples}
             overlay={
                 data['x-hideTryItPanel'] || data.operation['x-hideTryItPanel'] ? null : (
-                    <ScalarApiButton />
+                    <ScalarApiButton fetchOperationData={fetchOperationData} />
                 )
             }
         />

packages/react-openapi/src/OpenAPICodeSample.tsx

@@ -8,7 +8,7 @@ import { OpenAPIResponseExample } from './OpenAPIResponseExample';
 import { OpenAPIServerURL } from './OpenAPIServerURL';
 import { OpenAPISpec } from './OpenAPISpec';
 import { OpenAPIClientContext, OpenAPIContextProps } from './types';
-import { ApiClientModalProvider } from '@scalar/api-client-react';
+import { ScalarApiClient } from './ScalarApiButton';
 
 /**
  * Display an interactive OpenAPI operation.
@@ -23,15 +23,11 @@ export function OpenAPIOperation(props: {
 
     const clientContext: OpenAPIClientContext = {
         defaultInteractiveOpened: context.defaultInteractiveOpened,
-        specUrl: context.specUrl,
         icons: context.icons,
     };
 
     return (
-        <ApiClientModalProvider
-            configuration={{ spec: { url: context.specUrl } }}
-            initialRequest={{ path: data.path, method: data.method }}
-        >
+        <ScalarApiClient>
             <div className={classNames('openapi-operation', className)}>
                 <div className="openapi-intro">
                     <h2 className="openapi-summary" id={context.id}>
@@ -67,6 +63,6 @@ export function OpenAPIOperation(props: {
                     </div>
                 </div>
             </div>
-        </ApiClientModalProvider>
+        </ScalarApiClient>
     );
 }