From e9375ca49401d5ec86c019ff676c1ceabb8b4ffb Mon Sep 17 00:00:00 2001 From: Armano Date: Mon, 20 Feb 2023 02:11:59 +0100 Subject: [PATCH 1/3] fix(website): correct crash when switching to dark/light mode in playground --- packages/website/src/components/Playground.tsx | 3 --- packages/website/src/components/editor/LoadedEditor.tsx | 9 ++++++--- packages/website/src/components/editor/types.ts | 1 - .../website/src/components/editor/useSandboxServices.ts | 5 ++++- 4 files changed, 10 insertions(+), 8 deletions(-) diff --git a/packages/website/src/components/Playground.tsx b/packages/website/src/components/Playground.tsx index 2a643a93976e..eabdb63f6721 100644 --- a/packages/website/src/components/Playground.tsx +++ b/packages/website/src/components/Playground.tsx @@ -1,4 +1,3 @@ -import { useColorMode } from '@docusaurus/theme-common'; import ASTViewerScope from '@site/src/components/ASTViewerScope'; import ConfigEslint from '@site/src/components/config/ConfigEslint'; import ConfigTypeScript from '@site/src/components/config/ConfigTypeScript'; @@ -60,7 +59,6 @@ function Playground(): JSX.Element { tsconfig: defaultTsConfig, eslintrc: defaultEslintConfig, }); - const { colorMode } = useColorMode(); const [esAst, setEsAst] = useState(); const [tsAst, setTsAST] = useState(); const [scope, setScope] = useState | null>(); @@ -150,7 +148,6 @@ function Playground(): JSX.Element { code={state.code} tsconfig={state.tsconfig} eslintrc={state.eslintrc} - darkTheme={colorMode === 'dark'} sourceType={state.sourceType} showAST={state.showAST} onEsASTChange={setEsAst} diff --git a/packages/website/src/components/editor/LoadedEditor.tsx b/packages/website/src/components/editor/LoadedEditor.tsx index e641d77baa5a..9bfda6a1c339 100644 --- a/packages/website/src/components/editor/LoadedEditor.tsx +++ b/packages/website/src/components/editor/LoadedEditor.tsx @@ -1,3 +1,4 @@ +import { useColorMode } from '@docusaurus/theme-common'; import type Monaco from 'monaco-editor'; import type React from 'react'; import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; @@ -31,7 +32,6 @@ export const LoadedEditor: React.FC = ({ code, tsconfig, eslintrc, - darkTheme, decoration, jsx, main, @@ -47,6 +47,7 @@ export const LoadedEditor: React.FC = ({ webLinter, activeTab, }) => { + const { colorMode } = useColorMode(); const [_, setDecorations] = useState([]); const codeActions = useRef(new Map()).current; @@ -333,8 +334,10 @@ export const LoadedEditor: React.FC = ({ }, [eslintrc, tabs.eslintrc]); useEffect(() => { - sandboxInstance.monaco.editor.setTheme(darkTheme ? 'vs-dark' : 'vs-light'); - }, [darkTheme, sandboxInstance]); + sandboxInstance.monaco.editor.setTheme( + colorMode === 'dark' ? 'vs-dark' : 'vs-light', + ); + }, [colorMode, sandboxInstance]); useEffect(() => { if (sandboxInstance.editor.getModel() === tabs.code) { diff --git a/packages/website/src/components/editor/types.ts b/packages/website/src/components/editor/types.ts index 22bb1f4a7fda..d2e0df70109b 100644 --- a/packages/website/src/components/editor/types.ts +++ b/packages/website/src/components/editor/types.ts @@ -5,7 +5,6 @@ import type { SourceFile } from 'typescript'; import type { ConfigModel, ErrorGroup, SelectedRange, TabType } from '../types'; export interface CommonEditorProps extends ConfigModel { - readonly darkTheme: boolean; readonly activeTab: TabType; readonly decoration: SelectedRange | null; readonly onChange: (cfg: Partial) => void; diff --git a/packages/website/src/components/editor/useSandboxServices.ts b/packages/website/src/components/editor/useSandboxServices.ts index 73c336676b34..57f7276997a1 100644 --- a/packages/website/src/components/editor/useSandboxServices.ts +++ b/packages/website/src/components/editor/useSandboxServices.ts @@ -145,7 +145,10 @@ export const useSandboxServices = ( model.dispose(); } }; - }, [props.ts, colorMode, props.jsx, onLoaded]); + // colorMode can't be reactive here, this is going to cause crash while switching dark/light mode + // updating of colorMode is handled in LoadedEditor + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [props.ts, props.jsx, onLoaded]); return services; }; From b73c1a00f412be693e5808de019364442211c564 Mon Sep 17 00:00:00 2001 From: Armano Date: Mon, 20 Feb 2023 02:19:40 +0100 Subject: [PATCH 2/3] fix(website): disable jsx --- packages/website/src/components/editor/useSandboxServices.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/website/src/components/editor/useSandboxServices.ts b/packages/website/src/components/editor/useSandboxServices.ts index 57f7276997a1..79878d4b5e6b 100644 --- a/packages/website/src/components/editor/useSandboxServices.ts +++ b/packages/website/src/components/editor/useSandboxServices.ts @@ -147,8 +147,9 @@ export const useSandboxServices = ( }; // colorMode can't be reactive here, this is going to cause crash while switching dark/light mode // updating of colorMode is handled in LoadedEditor + // jsx can't be reactive too, because it's used only on first load // eslint-disable-next-line react-hooks/exhaustive-deps - }, [props.ts, props.jsx, onLoaded]); + }, [props.ts, onLoaded]); return services; }; From ae0e3aa0d750f975010ed16e786e588fe020150c Mon Sep 17 00:00:00 2001 From: Armano Date: Mon, 20 Feb 2023 19:41:02 +0100 Subject: [PATCH 3/3] chore: update comment --- packages/website/src/components/editor/useSandboxServices.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/website/src/components/editor/useSandboxServices.ts b/packages/website/src/components/editor/useSandboxServices.ts index 79878d4b5e6b..20378ca79ffe 100644 --- a/packages/website/src/components/editor/useSandboxServices.ts +++ b/packages/website/src/components/editor/useSandboxServices.ts @@ -145,9 +145,8 @@ export const useSandboxServices = ( model.dispose(); } }; - // colorMode can't be reactive here, this is going to cause crash while switching dark/light mode - // updating of colorMode is handled in LoadedEditor - // jsx can't be reactive too, because it's used only on first load + // colorMode and jsx can't be reactive here because we don't want to force a recreation + // updating of colorMode and jsx is handled in LoadedEditor // eslint-disable-next-line react-hooks/exhaustive-deps }, [props.ts, onLoaded]);