feat: add 'Open in StackBlitz'-button

packages/astro/src/default/components/OpenInStackblitzLink.astro

@@ -23,71 +23,17 @@
 
   function onClick() {
     const lesson = tutorialStore.lesson;
+    const snapshot = tutorialStore.takeSnapshot();
 
     if (!lesson) {
       throw new Error('Missing lesson');
     }
 
-    const files: Record<string, string> = {};
-
-    // first add template files
-    for (const [filePath, value] of Object.entries(tutorialStore.template || {})) {
-      files[removeLeadingSlash(filePath)] = value.toString();
-    }
-
-    // next overwrite with files from editor
-    for (const { filePath, value } of Object.values(tutorialStore.documents.get())) {
-      files[removeLeadingSlash(filePath)] = value.toString();
-    }
-
-    const packageJson = parseJson(files['package.json']);
-
-    // add start commands
-    if (files['package.json']) {
-      const mainCommand = resolveCommand(lesson.data.mainCommand);
-      const prepareCommands = (lesson.data.prepareCommands || []).map(resolveCommand);
-      const startCommand = [...prepareCommands, mainCommand].filter(Boolean).join(' && ');
-
-      files['package.json'] = JSON.stringify({ ...packageJson, stackblitz: { startCommand } }, null, 2);
-    }
-
     StackBlitzSDK.openProject({
       title: lesson.data.title || 'Lesson',
       description: `${lesson.part.title} / ${lesson.chapter.title}`,
       template: 'node',
-      files,
+      files: snapshot.files,
     });
-
-    function resolveCommand(command: NonNullable<typeof lesson>['data']['mainCommand']): string {
-      if (!command) {
-        return '';
-      }
-
-      if (typeof command === 'string') {
-        return command;
-      }
-
-      if (Array.isArray(command)) {
-        return command[0];
-      }
-
-      return command.command;
-    }
-
-    function removeLeadingSlash(filePath: string) {
-      if (filePath.startsWith('/')) {
-        return filePath.slice(1);
-      }
-
-      return filePath;
-    }
-
-    function parseJson(deserialized: undefined | string): any {
-      try {
-        return JSON.parse(deserialized || '{}');
-      } catch {
-        return {};
-      }
-    }
   }
 </script>

packages/runtime/src/store/index.ts

@@ -356,4 +356,8 @@ export class TutorialStore {
   refreshStyles() {
     this._themeRef.set(this._themeRef.get() + 1);
   }
+
+  takeSnapshot() {
+    return this._runner.takeSnapshot();
+  }
 }

packages/runtime/src/tutorial-runner.ts

@@ -302,6 +302,43 @@ export class TutorialRunner {
     );
   }
 
+  /**
+   * Get snapshot of runner's current files.
+   * Also prepares `package.json`'s `stackblitz.startCommand` with runner's commands.
+   *
+   * Note that file paths do not contain the leading `/`.
+   */
+  takeSnapshot() {
+    const files: Record<string, string> = {};
+
+    // first add template files
+    for (const [filePath, value] of Object.entries(this._currentTemplate || {})) {
+      if (typeof value === 'string') {
+        files[removeLeadingSlash(filePath)] = value;
+      }
+    }
+
+    // next overwrite with files from editor
+    for (const [filePath, value] of Object.entries(this._currentFiles || {})) {
+      if (typeof value === 'string') {
+        files[removeLeadingSlash(filePath)] = value;
+      }
+    }
+
+    const packageJson = parseJson(files['package.json']);
+
+    // add start commands
+    if (files['package.json']) {
+      const mainCommand = this._currentRunCommands?.mainCommand?.shellCommand;
+      const prepareCommands = (this._currentRunCommands?.prepareCommands || []).map((c) => c.shellCommand);
+      const startCommand = [...prepareCommands, mainCommand].filter(Boolean).join(' && ');
+
+      files['package.json'] = JSON.stringify({ ...packageJson, stackblitz: { startCommand } }, null, 2);
+    }
+
+    return { files };
+  }
+
   private async _runCommands(webcontainer: WebContainer, commands: Commands, signal: AbortSignal) {
     const output = this._terminalStore.getOutputPanel();
 
@@ -484,3 +521,19 @@ async function updateFiles(webcontainer: WebContainer, previousFiles: Files, new
 
   await webcontainer.mount(toFileTree(addedOrModified));
 }
+
+function removeLeadingSlash(filePath: string) {
+  if (filePath.startsWith('/')) {
+    return filePath.slice(1);
+  }
+
+  return filePath;
+}
+
+function parseJson(deserialized: undefined | string): any {
+  try {
+    return JSON.parse(deserialized || '{}');
+  } catch {
+    return {};
+  }
+}