fix(astro): don't modify state during re-renders of <WorkspacePanelWrapper /> (#240)

Author: AriPerkkio

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);
+  }, [lesson]);
+
+  if (import.meta.env.SSR || !tutorialStore.lesson) {
+    tutorialStore.setLesson(lesson, { ssr: import.meta.env.SSR });
+  }
 
   return <WorkspacePanel tutorialStore={tutorialStore} theme={theme} />;
 }

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;

packages/components/react/src/core/Terminal/index.tsx

@@ -83,4 +83,5 @@ export const Terminal = forwardRef<TerminalRef, TerminalProps>(
   },
 );
 
+Terminal.displayName = 'Terminal';
 export default Terminal;