@tutorialkit-rb/cli 1.5.2-rb.0.1.0 → 1.5.2-rb.0.1.1

package/dist/index.js

@@ -1,21 +1,20 @@
 #!/usr/bin/env node
 
 // src/index.ts
-import chalk8 from "chalk";
+import chalk9 from "chalk";
 import yargs2 from "yargs-parser";
 
 // src/commands/create/index.ts
 import fs7 from "node:fs";
-import path7 from "node:path";
+import path8 from "node:path";
 import * as prompts7 from "@clack/prompts";
-import chalk6 from "chalk";
-import { execa } from "execa";
+import chalk7 from "chalk";
 import "yargs-parser";
 
 // package.json
 var package_default = {
   name: "@tutorialkit-rb/cli",
-  version: "1.5.2-rb.0.1.0",
+  version: "1.5.2-rb.0.1.1",
   description: "Interactive tutorials powered by WebContainer API",
   author: "StackBlitz Inc.",
   type: "module",
@@ -439,9 +438,9 @@ function replaceArgs(newTutorialKitArgs, ast) {
   const integrationImport = "@tutorialkit-rb/astro";
   let integrationId;
   visit(ast, {
-    ImportDeclaration(path9) {
-      if (path9.node.source.value === integrationImport) {
-        const defaultImport = path9.node.specifiers.find((specifier) => specifier.type === "ImportDefaultSpecifier");
+    ImportDeclaration(path10) {
+      if (path10.node.source.value === integrationImport) {
+        const defaultImport = path10.node.specifiers.find((specifier) => specifier.type === "ImportDefaultSpecifier");
         if (defaultImport) {
           integrationId = defaultImport.local;
         }
@@ -452,11 +451,11 @@ function replaceArgs(newTutorialKitArgs, ast) {
     throw new Error(`Could not find import to '${integrationImport}'`);
   }
   visit(ast, {
-    ExportDefaultDeclaration(path9) {
-      if (!t.isCallExpression(path9.node.declaration)) {
+    ExportDefaultDeclaration(path10) {
+      if (!t.isCallExpression(path10.node.declaration)) {
         return;
       }
-      const configObject = path9.node.declaration.arguments[0];
+      const configObject = path10.node.declaration.arguments[0];
       if (!t.isObjectExpression(configObject)) {
         throw new Error("TutorialKit is not part of the exported config");
       }
@@ -585,11 +584,101 @@ function validateEditorOrigin(value) {
   }
 }
 
-// src/commands/create/generate-hosting-config.ts
-import fs3 from "node:fs";
+// src/commands/create/gemfile-editing.ts
 import path3 from "node:path";
 import * as prompts2 from "@clack/prompts";
 import chalk3 from "chalk";
+import { execa } from "execa";
+
+// src/commands/create/options.ts
+import path2 from "node:path";
+import { fileURLToPath } from "node:url";
+var __dirname = path2.dirname(fileURLToPath(import.meta.url));
+var templatePath = path2.resolve(__dirname, "../template");
+var DEFAULT_VALUES = {
+  git: !process.env.CI,
+  install: true,
+  start: true,
+  dryRun: false,
+  force: false,
+  packageManager: "npm",
+  provider: "skip"
+};
+function readFlag(flags, flag) {
+  let value = flags[flag];
+  if (flags.defaults) {
+    value ??= DEFAULT_VALUES[flag];
+  }
+  return value;
+}
+
+// src/commands/create/gemfile-editing.ts
+async function promptGemfileEditing(dest, flags) {
+  if (flags.defaults || flags.dryRun) {
+    return false;
+  }
+  prompts2.log.message(chalk3.bold.underline("Ruby Gems Configuration"));
+  prompts2.log.info(`Your Ruby application's gems are configured in ${chalk3.blue("ruby-wasm/Gemfile")}`);
+  const answer = await prompts2.confirm({
+    message: "Would you like to edit the Gemfile to add additional gems?",
+    initialValue: true
+  });
+  assertNotCanceled(answer);
+  if (answer) {
+    const gemfilePath = path3.resolve(dest, "ruby-wasm/Gemfile");
+    const editor = process.env.EDITOR;
+    if (editor) {
+      prompts2.log.message("");
+      prompts2.log.info(`Opening ${chalk3.blue("ruby-wasm/Gemfile")} in your editor...`);
+      try {
+        await execa(editor, [gemfilePath], { stdio: "inherit" });
+        prompts2.log.success("Great! Your Gemfile has been configured.");
+        return true;
+      } catch (error) {
+        prompts2.log.warn(`Failed to open editor: ${error.message}`);
+        prompts2.log.info("Falling back to manual editing instructions...");
+      }
+    }
+    prompts2.log.message("");
+    prompts2.log.step(`1. Open ${chalk3.blue(gemfilePath)} in your editor`);
+    prompts2.log.step(`2. Add any additional gems you need for your tutorial`);
+    prompts2.log.step(`3. Save the file and return here`);
+    prompts2.log.message("");
+    const ready = await prompts2.confirm({
+      message: "Have you finished editing the Gemfile?",
+      initialValue: true
+    });
+    assertNotCanceled(ready);
+    if (ready) {
+      prompts2.log.success("Great! Your Gemfile has been configured.");
+      return true;
+    }
+  }
+  return false;
+}
+function printRubyNextSteps(dest) {
+  let i = 0;
+  prompts2.log.message(chalk3.bold.underline("Next Steps"));
+  const steps = [
+    [`cd ${dest}`, "Navigate to project"],
+    ["npm run build:wasm", "Build Ruby WebAssembly with your gems"],
+    ["npm run dev", "Start development server"],
+    [, `Head over to ${chalk3.underline("http://localhost:4321")}`]
+  ];
+  for (const [command, text2] of steps) {
+    i++;
+    prompts2.log.step(`${i}. ${command ? `${chalk3.blue(command)} - ` : ""}${text2}`);
+  }
+  prompts2.log.message("");
+  prompts2.log.info("\u{1F4A1} The WASM build step may take several minutes the first time.");
+  prompts2.log.info("\u{1F4A1} Subsequent builds will be faster thanks to caching.");
+}
+
+// src/commands/create/generate-hosting-config.ts
+import fs3 from "node:fs";
+import path4 from "node:path";
+import * as prompts3 from "@clack/prompts";
+import chalk4 from "chalk";
 
 // src/commands/create/hosting-config/_headers.txt?raw
 var headers_default = "/*\n  Cross-Origin-Embedder-Policy: require-corp\n  Cross-Origin-Opener-Policy: same-origin\n";
@@ -616,33 +705,11 @@ var vercel_default = {
   ]
 };
 
-// src/commands/create/options.ts
-import path2 from "node:path";
-import { fileURLToPath } from "node:url";
-var __dirname = path2.dirname(fileURLToPath(import.meta.url));
-var templatePath = path2.resolve(__dirname, "../template");
-var DEFAULT_VALUES = {
-  git: !process.env.CI,
-  install: true,
-  start: true,
-  dryRun: false,
-  force: false,
-  packageManager: "npm",
-  provider: "skip"
-};
-function readFlag(flags, flag) {
-  let value = flags[flag];
-  if (flags.defaults) {
-    value ??= DEFAULT_VALUES[flag];
-  }
-  return value;
-}
-
 // src/commands/create/generate-hosting-config.ts
 async function generateHostingConfig(dest, flags) {
   let provider = readFlag(flags, "provider");
   if (provider === void 0) {
-    provider = await prompts2.select({
+    provider = await prompts3.select({
       message: "Select hosting providers for automatic configuration:",
       options: [
         { value: "Vercel", label: "Vercel" },
@@ -657,13 +724,13 @@ async function generateHostingConfig(dest, flags) {
     provider = "skip";
   }
   if (!provider || provider === "skip") {
-    prompts2.log.message(
-      `${chalk3.blue("hosting provider config [skip]")} You can configure hosting provider settings manually later.`
+    prompts3.log.message(
+      `${chalk4.blue("hosting provider config [skip]")} You can configure hosting provider settings manually later.`
     );
     return provider;
   }
-  prompts2.log.info(`${chalk3.blue("Hosting Configuration")} Setting up configuration for ${provider}`);
-  const resolvedDest = path3.resolve(dest);
+  prompts3.log.info(`${chalk4.blue("Hosting Configuration")} Setting up configuration for ${provider}`);
+  const resolvedDest = path4.resolve(dest);
   if (!fs3.existsSync(resolvedDest)) {
     fs3.mkdirSync(resolvedDest, { recursive: true });
   }
@@ -692,7 +759,7 @@ async function generateHostingConfig(dest, flags) {
       dryRun: flags.dryRun,
       dryRunMessage: `${warnLabel("DRY RUN")} Skipped hosting provider config creation`,
       task: async () => {
-        const filepath = path3.join(resolvedDest, filename);
+        const filepath = path4.join(resolvedDest, filename);
         fs3.writeFileSync(filepath, config);
         return `Added ${filepath}`;
       }
@@ -703,9 +770,9 @@ async function generateHostingConfig(dest, flags) {
 
 // src/commands/create/git.ts
 import fs4 from "node:fs";
-import path4 from "node:path";
-import * as prompts3 from "@clack/prompts";
-import chalk4 from "chalk";
+import path5 from "node:path";
+import * as prompts4 from "@clack/prompts";
+import chalk5 from "chalk";
 
 // src/utils/shell.ts
 import { spawn } from "node:child_process";
@@ -751,7 +818,7 @@ async function runShellCommand(command, flags, opts = {}) {
 async function initGitRepo(cwd, flags) {
   let shouldInitGitRepo = readFlag(flags, "git");
   if (shouldInitGitRepo === void 0) {
-    const answer = await prompts3.confirm({
+    const answer = await prompts4.confirm({
       message: "Initialize a new git repository?",
       initialValue: DEFAULT_VALUES.git
     });
@@ -769,12 +836,12 @@ async function initGitRepo(cwd, flags) {
       }
     });
   } else {
-    prompts3.log.message(`${chalk4.blue("git [skip]")} You can always run ${chalk4.yellow("git init")} manually.`);
+    prompts4.log.message(`${chalk5.blue("git [skip]")} You can always run ${chalk5.yellow("git init")} manually.`);
   }
 }
 async function _initGitRepo(cwd) {
-  if (fs4.existsSync(path4.join(cwd, ".git"))) {
-    return `${chalk4.cyan("Nice!")} Git has already been initialized`;
+  if (fs4.existsSync(path5.join(cwd, ".git"))) {
+    return `${chalk5.cyan("Nice!")} Git has already been initialized`;
   }
   try {
     await runShellCommand("git", ["init"], { cwd, stdio: "ignore" });
@@ -793,42 +860,11 @@ async function _initGitRepo(cwd) {
   }
 }
 
-// src/commands/create/install-start.ts
-import * as prompts4 from "@clack/prompts";
-async function installAndStart(flags) {
-  const installDeps = readFlag(flags, "install");
-  const startProject2 = readFlag(flags, "start");
-  if (installDeps === false) {
-    return { install: false, start: false };
-  }
-  if (startProject2) {
-    return { install: true, start: true };
-  }
-  if (installDeps) {
-    if (startProject2 === false) {
-      return { install: true, start: false };
-    } else {
-      const answer2 = await prompts4.confirm({
-        message: "Start project?",
-        initialValue: DEFAULT_VALUES.install
-      });
-      assertNotCanceled(answer2);
-      return { install: true, start: answer2 };
-    }
-  }
-  const answer = await prompts4.confirm({
-    message: "Install dependencies and start project?",
-    initialValue: DEFAULT_VALUES.install
-  });
-  assertNotCanceled(answer);
-  return { install: answer, start: answer };
-}
-
 // src/commands/create/package-manager.ts
 import fs5 from "node:fs";
-import path5 from "node:path";
+import path6 from "node:path";
 import * as prompts5 from "@clack/prompts";
-import chalk5 from "chalk";
+import chalk6 from "chalk";
 import { lookpath } from "lookpath";
 var LOCK_FILES = /* @__PURE__ */ new Map([
   ["npm", "package-lock.json"],
@@ -839,7 +875,7 @@ async function selectPackageManager(cwd, flags) {
   const packageManager = await resolvePackageManager(flags);
   for (const [pkgManager, lockFile] of LOCK_FILES) {
     if (pkgManager !== packageManager) {
-      fs5.rmSync(path5.join(cwd, lockFile), { force: true });
+      fs5.rmSync(path6.join(cwd, lockFile), { force: true });
     }
   }
   return packageManager;
@@ -850,7 +886,7 @@ async function resolvePackageManager(flags) {
       return flags.packageManager;
     }
     prompts5.log.warn(
-      `The specified package manager '${chalk5.yellow(flags.packageManager)}' doesn't seem to be installed!`
+      `The specified package manager '${chalk6.yellow(flags.packageManager)}' doesn't seem to be installed!`
     );
   }
   if (flags.defaults) {
@@ -893,7 +929,7 @@ async function getInstalledPackageManagers() {
 // src/commands/create/template.ts
 import fs6 from "node:fs";
 import fsPromises from "node:fs/promises";
-import path6 from "node:path";
+import path7 from "node:path";
 import * as prompts6 from "@clack/prompts";
 import ignore from "ignore";
 async function copyTemplate(dest, flags) {
@@ -911,9 +947,9 @@ async function copyTemplate(dest, flags) {
     toCopy.push(file);
   }
   for (const fileName of toCopy) {
-    const sourceFilePath = path6.join(templatePath, fileName);
+    const sourceFilePath = path7.join(templatePath, fileName);
     const destFileName = fileName === ".npmignore" ? ".gitignore" : fileName;
-    const destFilePath = path6.join(dest, destFileName);
+    const destFilePath = path7.join(dest, destFileName);
     const stats = await fsPromises.stat(sourceFilePath);
     if (stats.isDirectory()) {
       await fsPromises.cp(sourceFilePath, destFilePath, { recursive: true });
@@ -924,9 +960,9 @@ async function copyTemplate(dest, flags) {
 }
 function readIgnoreFile() {
   try {
-    return fs6.readFileSync(path6.resolve(templatePath, ".npmignore"), "utf8");
+    return fs6.readFileSync(path7.resolve(templatePath, ".npmignore"), "utf8");
   } catch {
-    return fs6.readFileSync(path6.resolve(templatePath, ".gitignore"), "utf8");
+    return fs6.readFileSync(path7.resolve(templatePath, ".gitignore"), "utf8");
   }
 }
 
@@ -940,25 +976,23 @@ async function createTutorial(flags) {
       tables: {
         Options: [
           ["--dir, -d", "The folder in which the tutorial gets created"],
-          ["--install, --no-install", `Install dependencies (default ${chalk6.yellow(DEFAULT_VALUES.install)})`],
-          ["--start, --no-start", `Start project (default ${chalk6.yellow(DEFAULT_VALUES.start)})`],
-          ["--git, --no-git", `Initialize a local git repository (default ${chalk6.yellow(DEFAULT_VALUES.git)})`],
+          ["--git, --no-git", `Initialize a local git repository (default ${chalk7.yellow(DEFAULT_VALUES.git)})`],
           [
             "--provider <name>, --no-provider",
-            `Select a hosting provider (default ${chalk6.yellow(DEFAULT_VALUES.provider)})`
+            `Select a hosting provider (default ${chalk7.yellow(DEFAULT_VALUES.provider)})`
           ],
-          ["--dry-run", `Walk through steps without executing (default ${chalk6.yellow(DEFAULT_VALUES.dryRun)})`],
+          ["--dry-run", `Walk through steps without executing (default ${chalk7.yellow(DEFAULT_VALUES.dryRun)})`],
           [
             "--package-manager <name>, -p <name>",
-            `The package used to install dependencies (default ${chalk6.yellow(DEFAULT_VALUES.packageManager)})`
+            `The package used to install dependencies (default ${chalk7.yellow(DEFAULT_VALUES.packageManager)})`
           ],
           [
             "--enterprise <origin>, -e <origin>",
-            `The origin of your StackBlitz Enterprise instance (if not provided authentication is not turned on and your project will use ${chalk6.yellow("https://stackblitz.com")})`
+            `The origin of your StackBlitz Enterprise instance (if not provided authentication is not turned on and your project will use ${chalk7.yellow("https://stackblitz.com")})`
           ],
           [
             "--force",
-            `Overwrite existing files in the target directory without prompting (default ${chalk6.yellow(DEFAULT_VALUES.force)})`
+            `Overwrite existing files in the target directory without prompting (default ${chalk7.yellow(DEFAULT_VALUES.force)})`
           ],
           ["--defaults", "Skip all prompts and initialize the tutorial using the defaults"]
         ]
@@ -967,12 +1001,6 @@ async function createTutorial(flags) {
     return 0;
   }
   applyAliases(flags);
-  try {
-    verifyFlags(flags);
-  } catch (error) {
-    console.error(`${errorLabel()} ${error.message}`);
-    process.exit(1);
-  }
   try {
     return _createTutorial(flags);
   } catch (error) {
@@ -1006,10 +1034,10 @@ async function _createTutorial(flags) {
       tutorialName = answer;
     }
   }
-  prompts7.log.info(`We'll call your tutorial ${chalk6.blue(tutorialName)}`);
+  prompts7.log.info(`We'll call your tutorial ${chalk7.blue(tutorialName)}`);
   const dest = await getTutorialDirectory(tutorialName, flags);
-  const resolvedDest = path7.resolve(process.cwd(), dest);
-  prompts7.log.info(`Scaffolding tutorial in ${chalk6.blue(resolvedDest)}`);
+  const resolvedDest = path8.resolve(process.cwd(), dest);
+  prompts7.log.info(`Scaffolding tutorial in ${chalk7.blue(resolvedDest)}`);
   if (fs7.existsSync(resolvedDest) && !flags.force) {
     if (flags.defaults) {
       console.error(`
@@ -1044,32 +1072,11 @@ ${errorLabel()} Failed to create tutorial. Directory already exists.`);
   updateReadme(resolvedDest, selectedPackageManager, flags);
   await setupEnterpriseConfig(resolvedDest, flags);
   await initGitRepo(resolvedDest, flags);
-  const { install, start } = await installAndStart(flags);
-  prompts7.log.success(chalk6.green("Tutorial successfully created!"));
-  if (install || start) {
-    let message = "Please wait while we install the dependencies and start your project...";
-    if (install && !start) {
-      message = "Please wait while we install the dependencies...";
-      printNextSteps(dest, selectedPackageManager, true);
-    }
-    prompts7.outro(message);
-    await startProject(resolvedDest, selectedPackageManager, flags, start);
-  } else {
-    printNextSteps(dest, selectedPackageManager, false);
-    prompts7.outro(`You're all set!`);
-    console.log("Until next time \u{1F44B}");
-  }
-}
-async function startProject(cwd, packageManager, flags, startProject2) {
-  if (flags.dryRun) {
-    const message = startProject2 ? "Skipped dependency installation and project start" : "Skipped dependency installation";
-    console.warn(`${warnLabel("DRY RUN")} ${message}`);
-  } else {
-    await execa(packageManager, ["install"], { cwd, stdio: "inherit" });
-    if (startProject2) {
-      await execa(packageManager, ["run", "dev"], { cwd, stdio: "inherit" });
-    }
-  }
+  prompts7.log.success(chalk7.green("Tutorial successfully created!"));
+  await promptGemfileEditing(dest, flags);
+  printRubyNextSteps(dest);
+  prompts7.outro(`You're all set!`);
+  console.log("Until next time \u{1F44B}");
 }
 async function getTutorialDirectory(tutorialName, flags) {
   const dir = flags.dir;
@@ -1084,7 +1091,7 @@ async function getTutorialDirectory(tutorialName, flags) {
     initialValue: `./${tutorialName}`,
     placeholder: "./",
     validate(value) {
-      if (!path7.isAbsolute(value) && !value.startsWith("./")) {
+      if (!path8.isAbsolute(value) && !value.startsWith("./")) {
         return "Please provide an absolute or relative path!";
       }
       return void 0;
@@ -1093,28 +1100,11 @@ async function getTutorialDirectory(tutorialName, flags) {
   assertNotCanceled(promptResult);
   return promptResult;
 }
-function printNextSteps(dest, packageManager, dependenciesInstalled) {
-  let i = 0;
-  prompts7.log.message(chalk6.bold.underline("Next Steps"));
-  const steps = [
-    [`cd ${dest}`, "Navigate to project"],
-    [`${packageManager} install`, "Install dependencies", !dependenciesInstalled],
-    [`${packageManager} run dev`, "Start development server"],
-    [, `Head over to ${chalk6.underline("http://localhost:4321")}`]
-  ];
-  for (const [command, text2, render] of steps) {
-    if (render === false) {
-      continue;
-    }
-    i++;
-    prompts7.log.step(`${i}. ${command ? `${chalk6.blue(command)} - ` : ""}${text2}`);
-  }
-}
 function updatePackageJson(dest, projectName, flags, provider) {
   if (flags.dryRun) {
     return;
   }
-  const pkgPath = path7.resolve(dest, "package.json");
+  const pkgPath = path8.resolve(dest, "package.json");
   const pkgJson = JSON.parse(fs7.readFileSync(pkgPath, "utf8"));
   pkgJson.name = projectName;
   updateWorkspaceVersions(pkgJson.dependencies, TUTORIALKIT_VERSION);
@@ -1125,7 +1115,7 @@ function updatePackageJson(dest, projectName, flags, provider) {
   }
   fs7.writeFileSync(pkgPath, JSON.stringify(pkgJson, null, 2));
   try {
-    const pkgLockPath = path7.resolve(dest, "package-lock.json");
+    const pkgLockPath = path8.resolve(dest, "package-lock.json");
     const pkgLockJson = JSON.parse(fs7.readFileSync(pkgLockPath, "utf8"));
     const defaultPackage = pkgLockJson.packages[""];
     pkgLockJson.name = projectName;
@@ -1140,7 +1130,7 @@ function updateReadme(dest, packageManager, flags) {
   if (flags.dryRun) {
     return;
   }
-  const readmePath = path7.resolve(dest, "README.md");
+  const readmePath = path8.resolve(dest, "README.md");
   let readme = fs7.readFileSync(readmePath, "utf8");
   readme = readme.replaceAll("<% pkgManager %>", packageManager ?? DEFAULT_VALUES.packageManager);
   fs7.writeFileSync(readmePath, readme);
@@ -1160,17 +1150,12 @@ function applyAliases(flags) {
     flags.enterprise = flags.e;
   }
 }
-function verifyFlags(flags) {
-  if (flags.install === false && flags.start) {
-    throw new Error("Cannot start project without installing dependencies.");
-  }
-}
 
 // src/commands/eject/index.ts
 import fs8 from "node:fs";
-import path8 from "node:path";
+import path9 from "node:path";
 import * as prompts8 from "@clack/prompts";
-import chalk7 from "chalk";
+import chalk8 from "chalk";
 import detectIndent from "detect-indent";
 import { execa as execa2 } from "execa";
 import whichpm from "which-pm";
@@ -1201,7 +1186,7 @@ function ejectRoutes(flags) {
         Options: [
           [
             "--force",
-            `Overwrite existing files in the target directory without prompting (default ${chalk7.yellow(DEFAULT_VALUES2.force)})`
+            `Overwrite existing files in the target directory without prompting (default ${chalk8.yellow(DEFAULT_VALUES2.force)})`
           ],
           ["--defaults", "Skip all the prompts and eject the routes using the defaults"]
         ]
@@ -1225,7 +1210,7 @@ async function _eject(flags) {
   if (folderPath === void 0) {
     folderPath = process.cwd();
   } else {
-    folderPath = path8.resolve(process.cwd(), folderPath);
+    folderPath = path9.resolve(process.cwd(), folderPath);
   }
   const { astroConfigPath, srcPath, pkgJsonPath, astroIntegrationPath, srcDestPath } = validateDestination(
     folderPath,
@@ -1239,7 +1224,7 @@ async function _eject(flags) {
   const indent = detectIndent(pkgJsonContent).indent || "  ";
   const pkgJson = JSON.parse(pkgJsonContent);
   const astroIntegrationPkgJson = JSON.parse(
-    fs8.readFileSync(path8.join(astroIntegrationPath, "package.json"), "utf-8")
+    fs8.readFileSync(path9.join(astroIntegrationPath, "package.json"), "utf-8")
   );
   const newDependencies = [];
   for (const dep of REQUIRED_DEPENDENCIES) {
@@ -1260,9 +1245,9 @@ async function _eject(flags) {
       `New dependencies added: ${newDependencies.join(", ")}. Install the new dependencies before proceeding.`
     );
     if (!flags.defaults) {
-      const packageManager = (await whichpm(path8.dirname(pkgJsonPath))).name;
+      const packageManager = (await whichpm(path9.dirname(pkgJsonPath))).name;
       const answer = await prompts8.confirm({
-        message: `Do you want to install those dependencies now using ${chalk7.blue(packageManager)}?`
+        message: `Do you want to install those dependencies now using ${chalk8.blue(packageManager)}?`
       });
       if (answer === true) {
         await execa2(packageManager, ["install"], { cwd: folderPath, stdio: "inherit" });
@@ -1273,17 +1258,17 @@ async function _eject(flags) {
 }
 function validateDestination(folder, force) {
   assertExists(folder);
-  const pkgJsonPath = assertExists(path8.join(folder, "package.json"));
-  const astroConfigPath = assertExists(path8.join(folder, "astro.config.ts"));
-  const srcDestPath = assertExists(path8.join(folder, "src"));
-  const astroIntegrationPath = assertExists(path8.resolve(folder, "node_modules", "@tutorialkit-rb", "astro"));
-  const srcPath = path8.join(astroIntegrationPath, "dist", "default");
+  const pkgJsonPath = assertExists(path9.join(folder, "package.json"));
+  const astroConfigPath = assertExists(path9.join(folder, "astro.config.ts"));
+  const srcDestPath = assertExists(path9.join(folder, "src"));
+  const astroIntegrationPath = assertExists(path9.resolve(folder, "node_modules", "@tutorialkit-rb", "astro"));
+  const srcPath = path9.join(astroIntegrationPath, "dist", "default");
   if (!force) {
     walk(srcPath, (relativePath) => {
-      const destination = path8.join(srcDestPath, relativePath);
+      const destination = path9.join(srcDestPath, relativePath);
       if (fs8.existsSync(destination)) {
         throw new Error(
-          `Eject aborted because '${destination}' would be overwritten by this command. Use ${chalk7.yellow("--force")} to ignore this error.`
+          `Eject aborted because '${destination}' would be overwritten by this command. Use ${chalk8.yellow("--force")} to ignore this error.`
         );
       }
     });
@@ -1305,9 +1290,9 @@ function assertExists(filePath) {
 function walk(root, visit2) {
   function traverse2(folder, pathPrefix) {
     for (const filename of fs8.readdirSync(folder)) {
-      const filePath = path8.join(folder, filename);
+      const filePath = path9.join(folder, filename);
       const stat = fs8.statSync(filePath);
-      const relativeFilePath = path8.join(pathPrefix, filename);
+      const relativeFilePath = path9.join(pathPrefix, filename);
       if (stat.isDirectory()) {
         traverse2(filePath, relativeFilePath);
       } else {
@@ -1336,13 +1321,13 @@ async function cli() {
 async function runCommand(cmd, flags) {
   switch (cmd) {
     case "version": {
-      console.log(`${primaryLabel(package_default.name)} ${chalk8.green(`v${package_default.version}`)}`);
+      console.log(`${primaryLabel(package_default.name)} ${chalk9.green(`v${package_default.version}`)}`);
       return;
     }
     case "help": {
       printHelp({
         commandName: package_default.name,
-        prolog: `${primaryLabel(package_default.name)} ${chalk8.green(`v${package_default.version}`)} Create tutorial apps powered by WebContainer API`,
+        prolog: `${primaryLabel(package_default.name)} ${chalk9.green(`v${package_default.version}`)} Create tutorial apps powered by WebContainer API`,
         usage: ["[command] [...options]", "[ -h | --help | -v | --version ]"],
         tables: {
           Commands: [
@@ -1364,7 +1349,7 @@ async function runCommand(cmd, flags) {
       return ejectRoutes(flags);
     }
     default: {
-      console.error(`${errorLabel()} Unknown command ${chalk8.red(cmd)}`);
+      console.error(`${errorLabel()} Unknown command ${chalk9.red(cmd)}`);
       return 1;
     }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tutorialkit-rb/cli",
-  "version": "1.5.2-rb.0.1.0",
+  "version": "1.5.2-rb.0.1.1",
   "description": "Interactive tutorials powered by WebContainer API",
   "author": "StackBlitz Inc.",
   "type": "module",

package/template/.gitignore

@@ -11,3 +11,4 @@ pnpm-debug.log*
 .idea
 
 public/ruby.wasm
+public/ruby.wasm.hash

package/template/bin/build-wasm

@@ -24,7 +24,17 @@ echo "Building WASM module..."
 echo "WASM build completed successfully!"
 echo "ruby.wasm is now available at ruby-wasm/dist/ruby.wasm"
 
+# Generate hash of Gemfile.lock for cache versioning
+echo "Generating Gemfile.lock hash..."
+GEMFILE_HASH=$(sha256sum Gemfile.lock | cut -c1-16)
+echo "Gemfile.lock hash: $GEMFILE_HASH"
+
 # Copy the built ruby.wasm to the public directory
 echo "Copying ruby.wasm to public directory..."
 cp dist/ruby.wasm ../public/
 echo "ruby.wasm copied to public directory."
+
+# Create ruby.wasm.hash with the hash
+echo "Creating ruby.wasm.hash..."
+echo "$GEMFILE_HASH" > ../public/ruby.wasm.hash
+echo "ruby.wasm.hash created with hash: $GEMFILE_HASH"

package/template/package.json

@@ -15,7 +15,7 @@
     "@codemirror/lang-yaml": "^6.1.2",
     "@codemirror/legacy-modes": "^6.5.1",
     "@nanostores/react": "0.7.2",
-    "@tutorialkit-rb/react": "1.5.2-rb.0.1.0",
+    "@tutorialkit-rb/react": "1.5.2-rb.0.1.1",
     "nanostores": "^0.10.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
@@ -23,9 +23,9 @@
   "devDependencies": {
     "@astrojs/check": "^0.7.0",
     "@astrojs/react": "^3.6.0",
-    "@tutorialkit-rb/astro": "1.5.2-rb.0.1.0",
-    "@tutorialkit-rb/theme": "1.5.2-rb.0.1.0",
-    "@tutorialkit-rb/types": "1.5.2-rb.0.1.0",
+    "@tutorialkit-rb/astro": "1.5.2-rb.0.1.1",
+    "@tutorialkit-rb/theme": "1.5.2-rb.0.1.1",
+    "@tutorialkit-rb/types": "1.5.2-rb.0.1.1",
     "@types/mdast": "^4.0.4",
     "@types/node": "^20.14.6",
     "@types/react": "^18.3.3",

package/template/src/components/FileManager.tsx

@@ -5,7 +5,7 @@ import { webcontainer } from 'tutorialkit:core';
 import tutorialStore from 'tutorialkit:store';
 
 const VERSIONED_WASM_URL = `/ruby.wasm`;
-const WASM_CACHE_FILE_NAME = `ruby.wasm`;
+const GEMFILE_HASH_URL = `/ruby.wasm.hash`;
 const WC_WASM_LOG_PATH = `/ruby.wasm.log.txt`;
 const WC_WASM_PATH = `/ruby.wasm`;
 
@@ -15,6 +15,31 @@ export function FileManager() {
   const processedFiles = useRef(new Set<string>());
   const wasmCached = useRef(false);
 
+  async function fetchGemfileHash(): Promise<string> {
+    try {
+      console.log(`Fetching Gemfile hash from ${GEMFILE_HASH_URL}...`);
+
+      const response = await fetch(GEMFILE_HASH_URL);
+
+      if (!response.ok) {
+        console.warn(`Failed to fetch ruby.wasm.hash: ${response.status}`);
+        return 'default';
+      }
+
+      const hash = (await response.text()).trim();
+      console.log(`Fetched Gemfile hash: ${hash}`);
+
+      return hash;
+    } catch (error) {
+      console.warn('Failed to fetch Gemfile hash, using default version:', error);
+      return 'default';
+    }
+  }
+
+  function getVersionedCacheFileName(gemfileLockHash: string): string {
+    return `ruby-${gemfileLockHash}.wasm`;
+  }
+
   async function chmodx(wc: WebContainer, path: string) {
     const process = await wc.spawn('chmod', ['+x', path]);
 
@@ -27,12 +52,12 @@ export function FileManager() {
     }
   }
 
-  async function fetchCachedWasmFile(): Promise<Uint8Array | null> {
+  async function fetchCachedWasmFile(cacheFileName: string): Promise<Uint8Array | null> {
     try {
       const opfsRoot = await navigator.storage.getDirectory();
-      const fileHandle = await opfsRoot.getFileHandle(WASM_CACHE_FILE_NAME);
+      const fileHandle = await opfsRoot.getFileHandle(cacheFileName);
       const file = await fileHandle.getFile();
-      console.log(`Found cached Ruby WASM: ${WASM_CACHE_FILE_NAME}`);
+      console.log(`Found cached Ruby WASM: ${cacheFileName}`);
 
       return new Uint8Array(await file.arrayBuffer());
     } catch {
@@ -40,20 +65,38 @@ export function FileManager() {
     }
   }
 
-  async function persistWasmFile(wasmData: Uint8Array): Promise<void> {
+  async function persistWasmFile(wasmData: Uint8Array, cacheFileName: string): Promise<void> {
     try {
       const opfsRoot = await navigator.storage.getDirectory();
-      const fileHandle = await opfsRoot.getFileHandle(WASM_CACHE_FILE_NAME, { create: true });
+      const fileHandle = await opfsRoot.getFileHandle(cacheFileName, { create: true });
       const writable = await fileHandle.createWritable();
       await writable.write(wasmData);
       await writable.close();
-      console.log(`Ruby WASM file ${WASM_CACHE_FILE_NAME} cached`);
+      console.log(`Ruby WASM file ${cacheFileName} cached`);
     } catch (error) {
       console.error('Failed to persist Ruby WASM:', error);
     }
   }
 
-  async function cacheWasmFile(wc: WebContainer): Promise<void> {
+  async function cleanupOldCacheFiles(currentCacheFileName: string): Promise<void> {
+    try {
+      const opfsRoot = await navigator.storage.getDirectory();
+
+      for await (const [name] of opfsRoot.entries()) {
+        if (
+          ((name.startsWith('ruby-') && name.endsWith('.wasm')) || name === 'ruby.wasm') &&
+          name !== currentCacheFileName
+        ) {
+          console.log(`Removing old cached Ruby WASM: ${name}`);
+          await opfsRoot.removeEntry(name);
+        }
+      }
+    } catch (error) {
+      console.warn('Failed to cleanup old cache files:', error);
+    }
+  }
+
+  async function cacheWasmFile(wc: WebContainer, cacheFileName: string): Promise<void> {
     console.log(`Dowloading WASM file ${VERSIONED_WASM_URL}...`);
 
     try {
@@ -61,10 +104,11 @@ export function FileManager() {
       await wc.fs.writeFile(WC_WASM_LOG_PATH, 'status: downloaded');
 
       const wasmData = new Uint8Array(await wasm.arrayBuffer());
-      await persistWasmFile(wasmData);
+      await persistWasmFile(wasmData, cacheFileName);
+      await cleanupOldCacheFiles(cacheFileName);
       await wc.fs.writeFile(WC_WASM_LOG_PATH, 'status: cached');
       await wc.fs.writeFile(WC_WASM_PATH, wasmData);
-    } catch (error) {
+    } catch {
       await wc.fs.writeFile(WC_WASM_LOG_PATH, 'status: error');
     }
   }
@@ -93,18 +137,23 @@ export function FileManager() {
       if (!wasmCached.current) {
         await wc.fs.writeFile(WC_WASM_LOG_PATH, 'status: init');
 
-        const cachedWasm = await fetchCachedWasmFile();
+        const gemfileLockHash = await fetchGemfileHash();
+        const cacheFileName = getVersionedCacheFileName(gemfileLockHash);
+        console.log(`Using cache file: ${cacheFileName} (hash: ${gemfileLockHash})`);
+
+        const cachedWasm = await fetchCachedWasmFile(cacheFileName);
 
         if (cachedWasm) {
           await wc.fs.writeFile(WC_WASM_LOG_PATH, 'status: load from cache');
           await wc.fs.writeFile(WC_WASM_PATH, cachedWasm);
           await wc.fs.writeFile(WC_WASM_LOG_PATH, 'status: done');
-          console.log(`Ruby WASM ${WASM_CACHE_FILE_NAME} loaded from cache`);
+          console.log(`Ruby WASM ${cacheFileName} loaded from cache`);
           wasmCached.current = true;
         } else {
           await wc.fs.writeFile(WC_WASM_LOG_PATH, 'status: download');
-          await cacheWasmFile(wc);
+          await cacheWasmFile(wc, cacheFileName);
           await wc.fs.writeFile(WC_WASM_LOG_PATH, 'status: done');
+          wasmCached.current = true;
         }
       }
     })();