Fix crash when displaying invalid Swagger 2.0 block (#214)

* Ignore errors when converting Swagger 2 to OpenAPI 3

* Apply page-api-block only when a block is actually displayed

* Format

* Try to be more lax

packages/react-openapi/src/OpenAPIOperation.tsx

@@ -12,10 +12,11 @@ import { Markdown } from './Markdown';
  * Display an interactive OpenAPI operation.
  */
 export function OpenAPIOperation(props: {
+    className?: string;
     data: OpenAPIOperationData;
     context: OpenAPIContextProps;
 }) {
-    const { data, context } = props;
+    const { className, data, context } = props;
     const { operation, servers, method, path } = data;
 
     const clientContext: OpenAPIClientContext = {
@@ -24,7 +25,7 @@ export function OpenAPIOperation(props: {
     };
 
     return (
-        <div className={classNames('openapi-operation')}>
+        <div className={classNames('openapi-operation', className)}>
             <div className="openapi-intro">
                 <h2 className="openapi-summary">{operation.summary}</h2>
                 {operation.description ? (

src/components/DocumentView/OpenAPI/OpenAPI.tsx

@@ -50,13 +50,18 @@ async function OpenAPIBody(props: BlockProps<DocumentBlockSwagger>) {
                 CodeBlock: PlainCodeBlock,
                 defaultInteractiveOpened: context.mode === 'print',
             }}
+            className="openapi-block"
         />
     );
 }
 
 function OpenAPIFallback() {
     return (
-        <div role="status" aria-busy className={tcls('flex', 'flex-1', 'flex-col', 'gap-3')}>
+        <div
+            role="status"
+            aria-busy
+            className={'openapi-block ' + tcls('flex', 'flex-1', 'flex-col', 'gap-3')}
+        >
             <LoadingPane
                 tile={12}
                 style={['rounded-md', 'h-[47px]', '[max-width:calc(48rem-1px)]']}

src/components/PageBody/PageBody.tsx

@@ -51,7 +51,6 @@ export function PageBody(props: {
                         page.layout.tableOfContents ? null : 'xl:ml-56',
                     ) +
                     (asFullWidth ? ' page-full-width' : '') +
-                    (asFullWidth && asFullWidth.apiBlock ? ' page-api-block' : '') +
                     (!page.layout.tableOfContents ? ' page-no-toc' : '')
                 }
             >

src/lib/document.ts

@@ -21,20 +21,17 @@ export interface DocumentSection {
 /**
  * Check if the document contains one block that should be rendered in full-width mode.
  */
-export function hasFullWidthBlock(document: JSONDocument): { apiBlock: boolean } | false {
-    let fullWidth = false;
-
+export function hasFullWidthBlock(document: JSONDocument): boolean {
     for (const node of document.nodes) {
         if (node.data && 'fullWidth' in node.data && node.data.fullWidth) {
-            fullWidth = true;
+            return true;
         }
-
         if (node.type === 'swagger') {
-            return { apiBlock: true };
+            return true;
         }
     }
 
-    return fullWidth ? { apiBlock: false } : false;
+    return false;
 }
 
 /**

src/lib/openapi.ts

@@ -67,14 +67,23 @@ const fetcher: OpenAPIFetcher = {
 
         // @ts-ignore
         if (data && data.swagger) {
-            // Convert Swagger 2.0 to OpenAPI 3.0
-            // @ts-ignore
-            const result = (await swagger2openapi.convertObj(data, {
-                resolve: false,
-                resolveInternal: false,
-            })) as ConvertOutputOptions;
+            try {
+                // Convert Swagger 2.0 to OpenAPI 3.0
+                // @ts-ignore
+                const result = (await swagger2openapi.convertObj(data, {
+                    resolve: false,
+                    resolveInternal: false,
+                    laxDefaults: true,
+                    laxurls: true,
+                    lint: false,
+                    prevalidate: false,
+                })) as ConvertOutputOptions;
 
-            data = result.openapi;
+                data = result.openapi;
+            } catch (error) {
+                console.warn('Failed to convert Swagger 2.0 to OpenAPI 3.0', error);
+                data = null;
+            }
         }
 
         return {

tailwind.config.ts

@@ -208,7 +208,7 @@ const config: Config = {
             /**
              * Variant when the page contains an OpenAPI block.
              */
-            addVariant('page-api-block', 'body:has(.page-api-block) &');
+            addVariant('page-api-block', 'body:has(.openapi-block) &');
 
             /**
              * Variant when the page is displayed in print mode.