Handle multiple instances of presets (#189)

Author: rohit-gohri

.changeset/perfect-cheetahs-visit.md

@@ -0,0 +1,7 @@
+---
+'docusaurus-plugin-redoc': patch
+'docusaurus-theme-redoc': patch
+'redocusaurus': patch
+---
+
+Pass through a themeId to load multiple presets at the same time

.github/workflows/version.yml

@@ -50,7 +50,9 @@ jobs:
           yarn workspace redocusaurus exec "sh $PWD/scripts/release.sh" >> $GITHUB_ENV
 
       - name: Create Github Release
-        if: ${{ env.github_release == 'yes' }}
+        if: |
+          steps.changesets.outputs.published == 'true' && 
+          env.github_release == 'yes'
         uses: softprops/action-gh-release@master
         with:
           body_path: latest-CHANGELOG.md

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

@@ -51,6 +51,8 @@ export default function redocPlugin(
     console.error('[REDOCUSAURUS_PLUGIN] Opts Input:', opts);
     console.error('[REDOCUSAURUS_PLUGIN] Options:', options);
   }
+
+  const { themeId } = options;
   return {
     name: 'docusaurus-plugin-redoc',
     async loadContent() {
@@ -119,23 +121,25 @@ export default function redocPlugin(
 
       const data: SpecProps = {
         url,
+        themeId,
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         spec: content.converted as any,
       };
       setGlobalData(data);
 
       if (options.route) {
+        const routePath = options.route.startsWith('/')
+          ? options.route.slice(1)
+          : options.route;
+
         const specProps = await createData(
-          `redocApiSpecV1-${options.id || '1'}.json`,
+          `redocApiSpecV1.1-${options.id || '1'}.json`,
           JSON.stringify(data),
         );
         const layoutProps = await createData(
           `redocApiLayoutV1-${options.id || '1'}.json`,
           JSON.stringify(options.layout),
         );
-        const routePath = options.route.startsWith('/')
-          ? options.route.slice(1)
-          : options.route;
 
         const modules: Record<keyof ApiDocProps, string> = {
           specProps,

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

@@ -22,6 +22,7 @@ export interface PluginOptions {
   route?: string;
   layout?: LayoutProps;
   debug?: boolean;
+  themeId?: string;
   /**
    * Redocly config to bundle file
    * @see https://redocly.com/docs/cli/configuration/configuration-file/
@@ -46,4 +47,5 @@ export const PluginOptionSchema = Joi.object<PluginOptions>({
   debug: Joi.boolean().default(DEFAULT_OPTIONS.debug),
   route: Joi.string().uri({ relativeOnly: true }).optional(),
   config: Joi.any().optional(),
+  themeId: Joi.string().optional(),
 });

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

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
-import Redoc from '../Redoc';
-import { useSpecData } from '../useSpecData';
+import Redoc from '@theme/Redoc';
+import useSpecData from '@theme/useSpecData';
 import { MdxProps as Props } from '../../types/common';
 import '../ApiSchema/styles.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;
+  themeId?: string;
 }
 
 export type RedocProps = SpecProps;

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

@@ -2,10 +2,17 @@ interface SpecProps {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   spec: import('redoc/typings/types').OpenAPISpec;
   url?: string;
+  themeId?: string;
 }
 
 declare module '@theme/Redoc' {
-  const Redoc: (props: SpecProps & { className?: string }) => JSX.Element;
+  import type { RedocRawOptions } from 'redoc';
+  const Redoc: (
+    props: SpecProps & {
+      className?: string;
+      optionsOverrides?: RedocRawOptions;
+    },
+  ) => JSX.Element;
   export default Redoc;
 }
 

packages/docusaurus-theme-redoc/src/utils/useSpec.ts

@@ -16,13 +16,16 @@ import { GlobalData } from '../types/options';
  * Released under the MIT License
  */
 export function useSpec(
-  { spec, url }: SpecProps,
+  { spec, url, themeId }: SpecProps,
   optionsOverrides?: RedocRawOptions,
 ) {
   const fullUrl = useBaseUrl(url, { absolute: true });
   const isBrowser = useIsBrowser();
   const isDarkTheme = useColorMode().colorMode === 'dark';
-  const themeOptions = usePluginData('docusaurus-theme-redoc') as GlobalData;
+  const themeOptions = usePluginData(
+    'docusaurus-theme-redoc',
+    themeId,
+  ) as GlobalData;
 
   const stores = useMemo(() => {
     const { lightTheme, darkTheme, options: redocOptions } = themeOptions;

packages/redocusaurus/src/index.ts

@@ -3,6 +3,7 @@ import type { PluginOptions } from 'docusaurus-plugin-redoc';
 import type { ThemeOptions } from 'docusaurus-theme-redoc';
 
 export interface PresetOptions {
+  id?: string;
   debug?: boolean;
   specs: PluginOptions[];
   theme?: ThemeOptions;
@@ -32,15 +33,26 @@ export default function preset(
   if (debug) {
     console.error('[REDOCUSAURUS] Specs:', specsArray);
   }
+  const id = opts.id ? `-${opts.id}` : '';
+  const themeId = `theme-redoc${id}`;
 
   const config = {
-    themes: [[require.resolve('docusaurus-theme-redoc'), theme]],
+    themes: [
+      [
+        require.resolve('docusaurus-theme-redoc'),
+        {
+          id: themeId,
+          ...theme,
+        },
+      ],
+    ],
     plugins: [
       ...specsArray.map((pluginOpts, index) => [
         require.resolve('docusaurus-plugin-redoc'),
         {
           ...pluginOpts,
-          id: pluginOpts.id || `plugin-redoc-${index}`,
+          themeId,
+          id: pluginOpts.id || `plugin-redoc${id}-${index}`,
           debug,
         },
       ]),