Render in browser in dev mode if url (#207)

Author: rohit-gohri

.changeset/big-mice-move.md

@@ -0,0 +1,6 @@
+---
+'docusaurus-plugin-redoc': patch
+'docusaurus-theme-redoc': patch
+---
+
+Fix reloads in dev mode

packages/docusaurus-plugin-redoc/src/index.ts

@@ -122,6 +122,7 @@ export default function redocPlugin(
       const data: SpecProps = {
         url,
         themeId,
+        isSpecFile,
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         spec: content.converted as any,
       };
@@ -133,7 +134,7 @@ export default function redocPlugin(
           : options.route;
 
         const specProps = await createData(
-          `redocApiSpecV1.1-${options.id || '1'}.json`,
+          `redocApiSpecV1.2-${options.id || '1'}.json`,
           JSON.stringify(data),
         );
         const layoutProps = await createData(

packages/docusaurus-theme-redoc/src/theme/Redoc/Redoc.tsx

@@ -1,7 +1,11 @@
 import React from 'react';
 import clsx from 'clsx';
 import '../../global';
-import { Redoc as RedocComponent, RedocRawOptions } from 'redoc';
+import {
+  Redoc as RedocComponent,
+  RedocStandalone,
+  RedocRawOptions,
+} from 'redoc';
 import { SpecProps } from '../../types/common';
 import { useSpec } from '../../utils/useSpec';
 import { ServerStyles } from './Styles';
@@ -25,6 +29,22 @@ function Redoc(
     optionsOverrides,
   );
 
+  const isDevMode = process.env.NODE_ENV === 'development';
+
+  if (isDevMode && specProps.isSpecFile === false) {
+    return (
+      <div
+        className={clsx([
+          'redocusaurus',
+          hasLogo && 'redocusaurus-has-logo',
+          className,
+        ])}
+      >
+        <RedocStandalone specUrl={specProps.url} options={store.rawOptions} />
+      </div>
+    );
+  }
+
   return (
     <>
       <ServerStyles

packages/docusaurus-theme-redoc/src/theme/Redoc/ServerStyles.tsx

@@ -58,9 +58,9 @@ export function ServerStyles({
   lightThemeOptions,
   darkThemeOptions,
 }: {
-  specProps: SpecProps,
-  lightThemeOptions: RedocRawOptions,
-  darkThemeOptions: RedocRawOptions,
+  specProps: SpecProps;
+  lightThemeOptions: RedocRawOptions;
+  darkThemeOptions: RedocRawOptions;
 }) {
   const fullUrl = useBaseUrl(specProps.url, { absolute: true });
   const css = {

packages/docusaurus-theme-redoc/src/types/common.d.ts

@@ -7,6 +7,7 @@ export type ParsedSpec = OpenAPISpec;
 export interface SpecProps {
   spec: ParsedSpec;
   url?: string;
+  isSpecFile?: boolean;
   themeId?: string;
 }
 

packages/docusaurus-theme-redoc/src/types/modules.d.ts

@@ -2,6 +2,7 @@ interface SpecProps {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   spec: import('redoc/typings/types').OpenAPISpec;
   url?: string;
+  isSpecFile?: boolean;
   themeId?: string;
 }