fix(react): stale lesson data after navigation

[AriPerkkio]

• Fixes issues where stale lesson data (metadata) is used after navigating to new lesson
• Deployed at fix: stale lesson data shown AriPerkkio/tutorial-vite-plugin#24

In #253 the amount of "unnecessary" re-renders were reduced by moving state to components where it was actually needed.

It turns out, those re-renders were indeed needed as <WorkspacePanel /> is accessing non-reactive references of the tutorialStore instead of reactive ones. This is not easily visible from the code though. We should improve that part later. This is now just a quick fix for the high priority bug.

These are the non-reactive methods of tutorialStore that use stale data:

tutorialkit/packages/react/src/Panels/WorkspacePanel.tsx

Lines 35 to 37 in 1eb41fd

	const hasEditor = tutorialStore.hasEditor();
	const hasPreviews = tutorialStore.hasPreviews();
	const hideTerminalPanel = !tutorialStore.hasTerminalPanel();

Failing test case on CI: https://github.com/stackblitz/tutorialkit/actions/runs/10733493214/job/29766948087?pr=318

Before:

tk-layout-after-nav-bug.webm

After:

tk-layout-after-nav-fixed.webm

[bolt-new-by-stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[AriPerkkio]

/pkg-pr-new

[AriPerkkio]

Ideally we should make these reactive instead, e.g.

const hasEditor = useStore(tutorialStore.hasEditor);

... but as that would require quite much refactoring on the store, e.g. making lesson reactive, I'd leave that out side of this PR.

[AriPerkkio]

@Nemikolh we have a failing minimal test case now! 🎉 🎉

After yesterday's extensive debugging session I realized what the root cause actually was. The WorkspacePanel is accessing non-reactive references of store here:

tutorialkit/packages/react/src/Panels/WorkspacePanel.tsx

Lines 35 to 37 in 1eb41fd

	const hasEditor = tutorialStore.hasEditor();
	const hasPreviews = tutorialStore.hasPreviews();
	const hideTerminalPanel = !tutorialStore.hasTerminalPanel();

And as WorkspacePanel is not subscribing to any other changes (as it doesn't really need to), it won't re-render when parts of the store change.

I tried to make lesson reactive like we tried yesterday, but ran into plenty of weird React hydration mismatch errors afterwards. As this bug is critical, I would suggest that we merge this with the work-around and publish new release with the fix.

[Nemikolh]

Good work on the test! 🤩

Sounds good for the rest! I will review this ASAP. 👍

[Nemikolh]

Looks good!