fix: feedback for the run this tutorial button

Author: Nemikolh

packages/astro/src/default/components/webcontainer.ts

@@ -1,7 +1,7 @@
 // must be imported first
 import { useAuth } from './setup.js';
 
-import { safeBoot, TutorialStore, webContainerBootStatus } from '@tutorialkit/runtime';
+import { safeBoot, TutorialStore } from '@tutorialkit/runtime';
 import { auth, WebContainer } from '@webcontainer/api';
 import { joinPaths } from '../utils/url.js';
 
@@ -39,10 +39,6 @@ export function logout() {
   auth.logout({ ignoreRevokeError: true });
 }
 
-export function forceBoot() {
-  webContainerBootStatus().unblock();
-}
-
 export const webcontainerContext: WebContainerContext = {
   useAuth,
   loggedIn: () => auth.loggedIn(),

packages/astro/src/default/utils/content.ts

@@ -43,7 +43,7 @@ export async function getTutorial(): Promise<Tutorial> {
         {
           partTemplate: 'Part ${index}: ${title}',
           noPreviewNorStepsText: 'No preview to run nor steps to show',
-          startWebContainerText: 'Start WebContainer',
+          startWebContainerText: 'Run this tutorial',
         } satisfies Lesson['data']['i18n'],
         tutorialMetaData.i18n,
       );

packages/components/react/src/BootScreen.tsx

@@ -1,5 +1,4 @@
 import { useStore } from '@nanostores/react';
-import { webContainerBootStatus } from '@tutorialkit/runtime';
 import type { Step, TutorialStore } from '@tutorialkit/runtime';
 import { classNames } from './utils/classnames.js';
 
@@ -11,12 +10,12 @@ interface Props {
 export function BootScreen({ className, tutorialStore }: Props) {
   const steps = useStore(tutorialStore.steps);
   const { startWebContainerText, noPreviewNorStepsText } = tutorialStore.lesson?.data.i18n ?? {};
-  const bootStatus = webContainerBootStatus();
+  const bootStatus = useStore(tutorialStore.bootStatus);
 
   return (
     <div className={classNames('flex-grow w-full flex justify-center items-center text-sm', className)}>
-      {bootStatus.blocked ? (
-        <Button onClick={bootStatus.unblock}>{startWebContainerText}</Button>
+      {bootStatus === 'blocked' ? (
+        <Button onClick={() => tutorialStore.unblockBoot()}>{startWebContainerText}</Button>
       ) : steps ? (
         <ul className="space-y-1">
           {steps.map((step, index) => (

packages/runtime/src/index.ts

@@ -1,5 +1,5 @@
 export { LessonFilesFetcher } from './lesson-files.js';
 export { TutorialRunner } from './tutorial-runner.js';
 export type { Command, Commands, PreviewInfo, Step, Steps } from './webcontainer/index.js';
-export { safeBoot, webContainerBootStatus } from './webcontainer/index.js';
+export { safeBoot } from './webcontainer/index.js';
 export { TutorialStore } from './store/index.js';

packages/runtime/src/store/index.ts

@@ -5,6 +5,7 @@ import { LessonFilesFetcher } from '../lesson-files.js';
 import { newTask, type Task } from '../tasks.js';
 import { TutorialRunner } from '../tutorial-runner.js';
 import type { ITerminal } from '../utils/terminal.js';
+import { bootStatus, unblockBoot, type BootStatus } from '../webcontainer/on-demand-boot.js';
 import type { PreviewInfo } from '../webcontainer/preview-info.js';
 import { StepsController } from '../webcontainer/steps.js';
 import type { TerminalConfig } from '../webcontainer/terminal-config.js';
@@ -198,6 +199,10 @@ export class TutorialStore {
     return this._editorStore.currentDocument;
   }
 
+  get bootStatus(): ReadableAtom<BootStatus> {
+    return bootStatus;
+  }
+
   get documents(): ReadableAtom<EditorDocuments> {
     return this._editorStore.documents;
   }
@@ -263,6 +268,10 @@ export class TutorialStore {
     return !!this._lesson && Object.keys(this._lesson.solution[1]).length >= 1;
   }
 
+  unblockBoot() {
+    unblockBoot();
+  }
+
   reset() {
     const isReady = this.lessonFullyLoaded.value;
 

packages/runtime/src/webcontainer/index.ts

@@ -1,4 +1,4 @@
 export { Command, Commands } from './command.js';
+export { safeBoot } from './on-demand-boot.js';
 export { PreviewInfo } from './preview-info.js';
-export { type Step, type Steps, StepsController } from './steps.js';
-export { safeBoot, webContainerBootStatus } from './on-demand-boot.js';
+export { StepsController, type Step, type Steps } from './steps.js';

packages/runtime/src/webcontainer/on-demand-boot.ts

@@ -8,41 +8,39 @@
  * to move forward with the boot.
  */
 import { WebContainer, type BootOptions } from '@webcontainer/api';
+import { atom, type ReadableAtom } from 'nanostores';
 import { withResolvers } from '../utils/promises.js';
 
-let blocked: undefined | boolean;
+export type BootStatus = 'unknown' | 'blocked' | 'booting' | 'booted';
 
+const localBootStatus = atom<BootStatus>('unknown');
 const blockingStatus = withResolvers<void>();
 
+export const bootStatus: ReadableAtom<BootStatus> = localBootStatus;
+
 export async function safeBoot(options: BootOptions) {
-  if (typeof blocked === 'undefined') {
-    blocked = isRestricted();
+  if (localBootStatus.get() === 'unknown') {
+    localBootStatus.set(isRestricted() ? 'blocked' : 'booting');
   }
 
-  if (blocked) {
+  if (localBootStatus.get() === 'blocked') {
     await blockingStatus.promise;
+
+    localBootStatus.set('booting');
   }
 
-  return WebContainer.boot(options);
+  return WebContainer.boot(options).then((webcontainer) => {
+    localBootStatus.set('booted');
+    return webcontainer;
+  });
 }
 
-interface BootStatus {
-  readonly blocked: boolean | undefined;
-  unblock(): void;
-}
+export function unblockBoot() {
+  if (localBootStatus.get() !== 'blocked') {
+    return;
+  }
 
-export function webContainerBootStatus(): BootStatus {
-  return {
-    blocked,
-    unblock() {
-      if (blocked === false) {
-        return;
-      }
-
-      blocked = false;
-      blockingStatus.resolve();
-    },
-  };
+  blockingStatus.resolve();
 }
 
 function isRestricted() {