From 557a9a29dbb34ef96a47043c4daaa12d26462e69 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ari=20Perkki=C3=B6?= Date: Tue, 13 Aug 2024 12:08:58 +0300 Subject: [PATCH 1/2] fix(astro): don't modify state during re-renders of `` --- .../src/default/components/WorkspacePanelWrapper.tsx | 9 ++++++++- packages/components/react/src/Panels/PreviewPanel.tsx | 1 + packages/components/react/src/core/Terminal/index.tsx | 1 + 3 files changed, 10 insertions(+), 1 deletion(-) diff --git a/packages/astro/src/default/components/WorkspacePanelWrapper.tsx b/packages/astro/src/default/components/WorkspacePanelWrapper.tsx index 39d373432..6a56a4e40 100644 --- a/packages/astro/src/default/components/WorkspacePanelWrapper.tsx +++ b/packages/astro/src/default/components/WorkspacePanelWrapper.tsx @@ -1,3 +1,4 @@ +import { useEffect } from 'react'; import { useStore } from '@nanostores/react'; import { WorkspacePanel } from '@tutorialkit/components-react'; import type { Lesson } from '@tutorialkit/types'; @@ -11,7 +12,13 @@ interface Props { export function WorkspacePanelWrapper({ lesson }: Props) { const theme = useStore(themeStore); - tutorialStore.setLesson(lesson, { ssr: import.meta.env.SSR }); + useEffect(() => { + tutorialStore.setLesson(lesson, { ssr: import.meta.env.SSR }); + }, [lesson]); + + if (import.meta.env.SSR || !tutorialStore.lesson) { + tutorialStore.setLesson(lesson, { ssr: import.meta.env.SSR }); + } return ; } diff --git a/packages/components/react/src/Panels/PreviewPanel.tsx b/packages/components/react/src/Panels/PreviewPanel.tsx index a0b6b088c..1e8313e5f 100644 --- a/packages/components/react/src/Panels/PreviewPanel.tsx +++ b/packages/components/react/src/Panels/PreviewPanel.tsx @@ -134,6 +134,7 @@ export const PreviewPanel = memo( return createElement(PanelGroup, { id: 'preview-panel', direction: 'horizontal' }, ...children); }), ); +PreviewPanel.displayName = 'PreviewPanel'; interface PreviewProps { iframe: IFrameRef; diff --git a/packages/components/react/src/core/Terminal/index.tsx b/packages/components/react/src/core/Terminal/index.tsx index 713f673f1..5d82ad822 100644 --- a/packages/components/react/src/core/Terminal/index.tsx +++ b/packages/components/react/src/core/Terminal/index.tsx @@ -83,4 +83,5 @@ export const Terminal = forwardRef( }, ); +Terminal.displayName = 'Terminal'; export default Terminal; From 4d42b322bc73e1fc4e97fc5cb50dfa03b71ce8df Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ari=20Perkki=C3=B6?= Date: Tue, 13 Aug 2024 18:27:10 +0300 Subject: [PATCH 2/2] fix: code review --- packages/astro/src/default/components/WorkspacePanelWrapper.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/astro/src/default/components/WorkspacePanelWrapper.tsx b/packages/astro/src/default/components/WorkspacePanelWrapper.tsx index 6a56a4e40..01fa4a3c6 100644 --- a/packages/astro/src/default/components/WorkspacePanelWrapper.tsx +++ b/packages/astro/src/default/components/WorkspacePanelWrapper.tsx @@ -13,7 +13,7 @@ export function WorkspacePanelWrapper({ lesson }: Props) { const theme = useStore(themeStore); useEffect(() => { - tutorialStore.setLesson(lesson, { ssr: import.meta.env.SSR }); + tutorialStore.setLesson(lesson); }, [lesson]); if (import.meta.env.SSR || !tutorialStore.lesson) {