Upgrade Scalar client & fix opening endpoint (#2933)

Author: gregberge

.changeset/forty-rabbits-brush.md

@@ -0,0 +1,6 @@
+---
+'@gitbook/openapi-parser': patch
+'@gitbook/react-openapi': patch
+---
+
+Upgrade Scalar dependencies

bun.lock

@@ -12,8 +12,8 @@
     "version": "2.0.2",
     "sideEffects": false,
     "dependencies": {
-        "@scalar/openapi-parser": "^0.10.4",
-        "@scalar/openapi-types": "^0.1.6"
+        "@scalar/openapi-parser": "^0.10.9",
+        "@scalar/openapi-types": "^0.1.9"
     },
     "devDependencies": {
         "@tsconfig/strictest": "^2.0.5",

packages/openapi-parser/package.json

@@ -12,8 +12,8 @@
     "sideEffects": false,
     "dependencies": {
         "@gitbook/openapi-parser": "workspace:*",
-        "@scalar/api-client-react": "1.0.87",
-        "@scalar/oas-utils": "^0.2.101",
+        "@scalar/api-client-react": "^1.1.36",
+        "@scalar/oas-utils": "^0.2.110",
         "clsx": "^2.1.1",
         "flatted": "^3.2.9",
         "json-xml-parse": "^1.3.0",

packages/react-openapi/package.json

@@ -1,3 +1,4 @@
+import type { OpenAPIV3_1 } from '@gitbook/openapi-parser';
 import type React from 'react';
 import { ScalarApiButton } from './ScalarApiButton';
 import type { OpenAPIContextProps, OpenAPIOperationData } from './types';
@@ -12,20 +13,25 @@ export function OpenAPIPath(props: {
     const { data, context } = props;
     const { method, path } = data;
     const { specUrl } = context;
+    const hideTryItPanel = data['x-hideTryItPanel'] || data.operation['x-hideTryItPanel'];
 
     return (
         <div className="openapi-path">
             <div className={`openapi-method openapi-method-${method}`}>{method}</div>
             <div className="openapi-path-title" data-deprecated={data.operation.deprecated}>
                 <p>{formatPath(path)}</p>
             </div>
-            {data['x-hideTryItPanel'] || data.operation['x-hideTryItPanel'] ? null : (
+            {!hideTryItPanel && validateHttpMethod(method) && (
                 <ScalarApiButton method={method} path={path} specUrl={specUrl} />
             )}
         </div>
     );
 }
 
+function validateHttpMethod(method: string): method is OpenAPIV3_1.HttpMethods {
+    return ['get', 'post', 'put', 'delete', 'patch', 'head', 'options', 'trace'].includes(method);
+}
+
 // Format the path to highlight placeholders
 function formatPath(path: string) {
     // Matches placeholders like {id}, {userId}, etc.

packages/react-openapi/src/OpenAPIPath.tsx

@@ -1,24 +1,21 @@
 'use client';
 
 import { ApiClientModalProvider, useApiClientModal } from '@scalar/api-client-react';
-import { useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 
-import { useEventCallback } from 'usehooks-ts';
+import type { OpenAPIV3_1 } from '@gitbook/openapi-parser';
 import { useOpenAPIOperationContext } from './OpenAPIOperationContext';
 
 /**
  * Button which launches the Scalar API Client
  */
-export function ScalarApiButton({
-    method,
-    path,
-    specUrl,
-}: {
-    method: string;
+export function ScalarApiButton(props: {
+    method: OpenAPIV3_1.HttpMethods;
     path: string;
     specUrl: string;
 }) {
+    const { method, path, specUrl } = props;
     const [isOpen, setIsOpen] = useState(false);
     const controllerRef = useRef<ScalarModalControllerRef>(null);
     return (
@@ -55,21 +52,18 @@ export function ScalarApiButton({
 }
 
 function ScalarModal(props: {
-    method: string;
+    method: OpenAPIV3_1.HttpMethods;
     path: string;
     specUrl: string;
     controllerRef: React.Ref<ScalarModalControllerRef>;
 }) {
+    const { method, path, specUrl, controllerRef } = props;
     return (
         <ApiClientModalProvider
-            configuration={{ spec: { url: props.specUrl } }}
-            initialRequest={{ path: props.path, method: props.method }}
+            configuration={{ spec: { url: specUrl } }}
+            initialRequest={{ method, path }}
         >
-            <ScalarModalController
-                method={props.method}
-                path={props.path}
-                controllerRef={props.controllerRef}
-            />
+            <ScalarModalController method={method} path={path} controllerRef={controllerRef} />
         </ApiClientModalProvider>
     );
 }
@@ -79,28 +73,32 @@ type ScalarModalControllerRef = {
 };
 
 function ScalarModalController(props: {
-    method: string;
+    method: OpenAPIV3_1.HttpMethods;
     path: string;
     controllerRef: React.Ref<ScalarModalControllerRef>;
 }) {
+    const { method, path, controllerRef } = props;
     const client = useApiClientModal();
-    const openClient = client?.open;
+    const openScalarClient = client?.open;
+    const { onOpenClient: trackClientOpening } = useOpenAPIOperationContext();
+    const openClient = useMemo(() => {
+        if (openScalarClient) {
+            return () => {
+                openScalarClient({ method, path, _source: 'gitbook' });
+                trackClientOpening({ method, path });
+            };
+        }
+        return null;
+    }, [openScalarClient, method, path, trackClientOpening]);
     useImperativeHandle(
-        props.controllerRef,
+        controllerRef,
         () => ({ openClient: openClient ? () => openClient() : undefined }),
         [openClient]
     );
 
-    // Open the client when the component is mounted.
-    const { onOpenClient } = useOpenAPIOperationContext();
-    const trackOpening = useEventCallback(() => {
-        onOpenClient({ method: props.method, path: props.path });
-    });
+    // Open at mount
     useEffect(() => {
-        if (openClient) {
-            openClient();
-            trackOpening();
-        }
+        openClient?.();
     }, [openClient]);
     return null;
 }