tutorialStore onDocumentChanged unexpected behaviour #433

Activity

1. AriPerkkio commented on Jan 13, 2025

   

   AriPerkkio

   on Jan 13, 2025

   Contributor

   More actions

   because the nanostores subscribe callback seems to work that way.

   This seems to be the root cause indeed:

   store.subscribe(cb) in contrast with store.listen(cb) also call listeners immediately during the subscription.

   https://github.com/nanostores/nanostores?tab=readme-ov-file#atoms

   tutorialkit/packages/runtime/src/store/editor.ts

   Lines 148 to 173 in 0e7cf3c

   	onDocumentChanged(filePath: string, callback: (document: Readonly<EditorDocument>) => void) {
   	const unsubscribeFromCurrentDocument = this.currentDocument.subscribe((document) => {
   	if (document?.filePath === filePath) {
   	callback(document);
   	}
   	});
   	const unsubscribeFromDocuments = this.documents.subscribe((documents) => {
   	const document = documents[filePath];
   	/**
   	* We grab the document from the store, but only call the callback if it is not loading anymore which means
   	* the content is loaded.
   	*/
   	if (document && !document.loading) {
   	/**
   	* Call this in a `queueMicrotask` because the subscribe callback is called synchronoulsy,
   	* which causes the `unsubscribeFromDocuments` to not exist yet.
   	*/
   	queueMicrotask(() => {
   	callback(document);
   	unsubscribeFromDocuments();
   	});
   	}
   	});

   The onDocumentChanged is not used internally by TutorialKit, it's only available via the experimental API. Fixing this should be quite risk-free.

   ❤️React with ❤️2Reacted by so0k and Jòan
2. AriPerkkio

   added

   bugSomething isn't workingSomething isn't working

   pr-welcomeAccepting pull requests for this changeAccepting pull requests for this change

   on Jan 13, 2025
3. so0k commented on Dec 16, 2025

   

   so0k

   on Dec 16, 2025

   Author

   More actions

   seems it's not a bug in TutorialKit but in the way I'm watching the filesystem in my custom component... I'm upgrading stuff and decided to ask Claude Code Opus to have a look:

   The issue is that when navigating between lessons, the documents store is completely replaced and lessonFullyLoaded transitions. Your listener in RunSynth.tsx may be set up before the new lesson's filesystem is ready, or it's comparing against stale oldDocuments.

   The fix should check lessonFullyLoaded before setting up the listener, or reset the listener when the lesson changes. Here's an improved version:

   ● Update(src/components/RunSynth.tsx)
     ⎿  Updated src/components/RunSynth.tsx with 10 additions                         
           8        const terminal = tutorialStore.terminalConfig.value!.panels[1];
           9        terminal.input('npm run synth\n');
          10        const filePath = '/cdktf.out/stacks/workshop/cdk.tf.json';
          11 +  
          12 +      // Capture the current lesson ref to detect if lesson changes during synth
          13 +      const currentRef = tutorialStore.ref.value;
          14 +  
          15        const stopListening = tutorialStore.documents.listen((newDocuments, oldDocuments) => {
          16 +        // Abort if lesson has changed
          17 +        if (tutorialStore.ref.value !== currentRef) {
          18 +          stopListening();
          19 +          return;
          20 +        }
          21 +  
          22          if (!newDocuments[filePath] || !oldDocuments || !oldDocuments[filePath]) {
          23            return;
          24          }
   
4. so0k

   closed this as completedon Dec 16, 2025
5. so0k

   reopened this on Dec 17, 2025