From ba6837cb538846dd595f1f1a896d52dc15a1d371 Mon Sep 17 00:00:00 2001 From: Sam Yong <996939+mauris@users.noreply.github.com> Date: Wed, 8 Jun 2022 16:03:33 +0800 Subject: [PATCH 1/3] fix(theme): dark and light AppStore menu fix --- .../src/theme/ApiSchema/ApiSchema.tsx | 7 +-- .../src/theme/Redoc/Redoc.tsx | 8 ++- .../src/theme/Redoc/ServerStyles.tsx | 16 ++++-- .../src/theme/Redoc/Styles.tsx | 7 ++- .../src/utils/useSpec.ts | 55 ++++++++----------- 5 files changed, 47 insertions(+), 46 deletions(-) diff --git a/packages/docusaurus-theme-redoc/src/theme/ApiSchema/ApiSchema.tsx b/packages/docusaurus-theme-redoc/src/theme/ApiSchema/ApiSchema.tsx index e5ccc7e8..05882aa3 100644 --- a/packages/docusaurus-theme-redoc/src/theme/ApiSchema/ApiSchema.tsx +++ b/packages/docusaurus-theme-redoc/src/theme/ApiSchema/ApiSchema.tsx @@ -16,15 +16,14 @@ const ApiSchema: React.FC = ({ ...rest }: Props): JSX.Element => { const specProps = useSpecData(id); - const { store, darkStore, lightStore } = useSpec(specProps); + const { store } = useSpec(specProps); useEffect(() => { /** * @see https://github.com/Redocly/redoc/blob/823be24b313c3a2445df7e0801a0cc79c20bacd1/src/services/MenuStore.ts#L273-L276 */ - lightStore.menu.dispose(); - darkStore.menu.dispose(); - }, [lightStore, darkStore]); + store.menu.dispose(); + }, [store]); return ( diff --git a/packages/docusaurus-theme-redoc/src/theme/Redoc/Redoc.tsx b/packages/docusaurus-theme-redoc/src/theme/Redoc/Redoc.tsx index 36f44cea..d22c3cda 100644 --- a/packages/docusaurus-theme-redoc/src/theme/Redoc/Redoc.tsx +++ b/packages/docusaurus-theme-redoc/src/theme/Redoc/Redoc.tsx @@ -20,14 +20,18 @@ function Redoc( }, ): JSX.Element { const { className, optionsOverrides, ...specProps } = props; - const { store, darkStore, lightStore, hasLogo } = useSpec( + const { store, darkThemeOptions, lightThemeOptions, hasLogo } = useSpec( specProps, optionsOverrides, ); return ( <> - +
; } diff --git a/packages/docusaurus-theme-redoc/src/utils/useSpec.ts b/packages/docusaurus-theme-redoc/src/utils/useSpec.ts index 28310a86..847bab50 100644 --- a/packages/docusaurus-theme-redoc/src/utils/useSpec.ts +++ b/packages/docusaurus-theme-redoc/src/utils/useSpec.ts @@ -27,7 +27,7 @@ export function useSpec( themeId, ) as GlobalData; - const stores = useMemo(() => { + const result = useMemo(() => { const { lightTheme, darkTheme, options: redocOptions } = themeOptions; const commonOptions: Partial = { @@ -38,48 +38,39 @@ export function useSpec( : redocOptions.scrollYOffset, }; - const lightStore = new AppStore( - // eslint-disable-next-line @typescript-eslint/no-explicit-any - spec as any, - fullUrl, - merge( - { - ...redocOptions, - ...commonOptions, - theme: lightTheme, - }, - optionsOverrides, - ), + const lightThemeOptions: RedocRawOptions = merge( + { + ...redocOptions, + ...commonOptions, + theme: lightTheme, + }, + optionsOverrides, + ); + + const darkThemeOptions: RedocRawOptions = merge( + { + ...redocOptions, + ...commonOptions, + theme: darkTheme, + }, + optionsOverrides, ); - const darkStore = new AppStore( + const store = new AppStore( // eslint-disable-next-line @typescript-eslint/no-explicit-any spec as any, fullUrl, - merge( - { - ...redocOptions, - ...commonOptions, - theme: darkTheme, - }, - optionsOverrides, - ), + isBrowser && isDarkTheme ? darkThemeOptions : lightThemeOptions, ); return { - lightStore, - darkStore, - }; - }, [isBrowser, spec, fullUrl, themeOptions, optionsOverrides]); - - const result = useMemo(() => { - return { - ...stores, + darkThemeOptions, + lightThemeOptions, // @ts-expect-error extra prop hasLogo: !!spec.info?.['x-logo'], - store: isBrowser && isDarkTheme ? stores.darkStore : stores.lightStore, + store, }; - }, [isBrowser, isDarkTheme, spec, stores]); + }, [isBrowser, isDarkTheme, spec, fullUrl, themeOptions, optionsOverrides]); return result; } From 1d4a474956ca8395fb9963cdaf8bdbfc07a71d27 Mon Sep 17 00:00:00 2001 From: Sam Yong Date: Mon, 13 Jun 2022 11:38:36 +0800 Subject: [PATCH 2/3] update styles.tsx --- .../docusaurus-theme-redoc/src/theme/Redoc/Styles.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/docusaurus-theme-redoc/src/theme/Redoc/Styles.tsx b/packages/docusaurus-theme-redoc/src/theme/Redoc/Styles.tsx index 4ee7e057..7a3bf976 100644 --- a/packages/docusaurus-theme-redoc/src/theme/Redoc/Styles.tsx +++ b/packages/docusaurus-theme-redoc/src/theme/Redoc/Styles.tsx @@ -1,15 +1,15 @@ import React from 'react'; import '../../global'; -import type { AppStore, RedocRawOptions } from 'redoc'; +import type { RedocRawOptions } from 'redoc'; /** * Don't hydrate/replace server styles * @see https://github.com/facebook/react/issues/10923#issuecomment-338715787 */ export function ServerStyles(_props: { - specProps: SpecProps, - lightThemeOptions: RedocRawOptions, - darkThemeOptions: RedocRawOptions, + specProps: SpecProps; + lightThemeOptions: RedocRawOptions; + darkThemeOptions: RedocRawOptions; }) { return
; } From 30f4d88f67747269f5642aa57cace76ac3eb2624 Mon Sep 17 00:00:00 2001 From: Sam Yong Date: Mon, 13 Jun 2022 11:38:56 +0800 Subject: [PATCH 3/3] update useSpec to handle singleton instance of store and to fix theme switch / on first load issues --- .../src/utils/useSpec.ts | 20 +++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/packages/docusaurus-theme-redoc/src/utils/useSpec.ts b/packages/docusaurus-theme-redoc/src/utils/useSpec.ts index 847bab50..c2d892d2 100644 --- a/packages/docusaurus-theme-redoc/src/utils/useSpec.ts +++ b/packages/docusaurus-theme-redoc/src/utils/useSpec.ts @@ -1,4 +1,4 @@ -import { useMemo } from 'react'; +import { useMemo, useEffect } from 'react'; import useBaseUrl from '@docusaurus/useBaseUrl'; import useIsBrowser from '@docusaurus/useIsBrowser'; import { usePluginData } from '@docusaurus/useGlobalData'; @@ -9,6 +9,9 @@ import { AppStore, RedocRawOptions } from 'redoc'; import { SpecProps } from '../types/common'; import { GlobalData } from '../types/options'; +// the current store singleton in the app's instance +let currentStore: AppStore | null = null; + /** * Redocusaurus * https://rohit-gohri.github.io/redocusaurus/ @@ -56,7 +59,10 @@ export function useSpec( optionsOverrides, ); - const store = new AppStore( + if (currentStore !== null) { + currentStore.dispose(); + } + currentStore = new AppStore( // eslint-disable-next-line @typescript-eslint/no-explicit-any spec as any, fullUrl, @@ -68,9 +74,15 @@ export function useSpec( lightThemeOptions, // @ts-expect-error extra prop hasLogo: !!spec.info?.['x-logo'], - store, + store: currentStore, }; - }, [isBrowser, isDarkTheme, spec, fullUrl, themeOptions, optionsOverrides]); + }, [isBrowser, spec, fullUrl, isDarkTheme, themeOptions, optionsOverrides]); + + useEffect(() => { + // to ensure that menu is properly loaded when theme gets changed + // or when first load + result.store.onDidMount(); + }, [result, isBrowser, isDarkTheme]); return result; }