afterimage-cli 0.2.3 → 0.2.4

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 0.2.4
+
+- **One command to install.** `npx afterimage-cli init` now does the whole setup: init installs afterimage-cli in the project as a dev dependency, at its own version, with the package manager your lockfile names (npm, pnpm, Yarn or Bun). A plain HTML folder no longer needs `npm init -y` first, since init creates `package.json` before the install. A project that already lists afterimage-cli installs nothing, and a failed install leaves the rest of the setup in place and prints the command to finish it. The setup prompt and the skill use the one command too.
+
 ## 0.2.3
 
 - **Scroll sync covers panels.** In an app that scrolls a panel instead of the page, Scroll synced in side by side, the wipe and holding B only moved the page, which never scrolls, so the two versions drifted apart. Now each panel follows the same panel in the other version, even when the page around it changed between versions.

package/README.md

@@ -11,11 +11,10 @@ Afterimage keeps every version of your prototype you save and serves them all fr
 Afterimage needs Node 22 or later. From your prototype's project root:
 
 ```bash
-npm install -D afterimage-cli
-npx afterimage init
+npx afterimage-cli init
 ```
 
-A plain HTML folder with no `package.json` needs `npm init -y` first.
+npx asks once to fetch the package. `init` installs it in the project as a dev dependency, with the package manager your lockfile names, and creates `package.json` first for a plain HTML folder that has none.
 
 `init` works out what your prototype is: a plain HTML folder, a Vite app, a Next.js static export, an Astro site, or SvelteKit with `@sveltejs/adapter-static`. It puts the Afterimage pill on your prototype and makes `npm run dev` start Afterimage beside your app. It also writes `afterimage.config.json`, lines in `.gitattributes` and `.gitignore`, and host config for Vercel and Netlify, then lists every file it changed. For Next.js, Astro and SvelteKit it prints the one import that adds the pill. When it can't tell which folder holds the prototype, it asks. You can also tell it:
 

package/agents/cursor/afterimage.mdc

@@ -13,13 +13,11 @@ The user works on the prototype, not in a terminal. Do the steps yourself and re
 
 When the user asks to add Afterimage, or to track the prototype's versions, do all of this:
 
-1. If the project has no `package.json`, run `npm init -y`.
-2. Unless `package.json` already lists it, run `npm install --save-dev afterimage-cli`.
-3. Run `npx afterimage init --agent claude --no-input` if you are Claude Code, or `npx afterimage init --agent cursor --no-input` if you are Cursor. Handle what it prints as "Set up" below says.
-4. Init puts the pill on plain HTML pages and in a Vite app's `index.html` itself. For Next.js, Astro and SvelteKit it prints a note that starts with `Add the Afterimage pill to your app`. Make that change yourself, exactly as the note says.
-5. Unless `afterimage/versions.json` already lists a version, run `npx afterimage save "First version"`.
-6. Start `npm run dev` as a background process. If you started the project's dev server earlier in this session, stop that one first: this is the same server, with Afterimage beside it. Wait for the line that starts with `Afterimage is running at`.
-7. Tell the user where the prototype is running and that the pill at its bottom saves a version and shows them all. The address is the app dev server's own (such as Vite's `Local:` line), or the one after `Your prototype is at` for plain HTML.
+1. Run `npx --yes afterimage-cli init --agent claude --no-input` if you are Claude Code, or `npx --yes afterimage-cli init --agent cursor --no-input` if you are Cursor. It installs afterimage-cli in the project unless `package.json` already lists it, and creates `package.json` when there is none. Handle what it prints as "Set up" below says.
+2. Init puts the pill on plain HTML pages and in a Vite app's `index.html` itself. For Next.js, Astro and SvelteKit it prints a note that starts with `Add the Afterimage pill to your app`. Make that change yourself, exactly as the note says.
+3. Unless `afterimage/versions.json` already lists a version, run `npx afterimage save "First version"`.
+4. Start `npm run dev` as a background process. If you started the project's dev server earlier in this session, stop that one first: this is the same server, with Afterimage beside it. Wait for the line that starts with `Afterimage is running at`.
+5. Tell the user where the prototype is running and that the pill at its bottom saves a version and shows them all. The address is the app dev server's own (such as Vite's `Local:` line), or the one after `Your prototype is at` for plain HTML.
 
 ## Commands
 

package/agents/skill/SKILL.md

@@ -13,13 +13,11 @@ The user works on the prototype, not in a terminal. Do the steps yourself and re
 
 When the user asks to add Afterimage, or to track the prototype's versions, do all of this:
 
-1. If the project has no `package.json`, run `npm init -y`.
-2. Unless `package.json` already lists it, run `npm install --save-dev afterimage-cli`.
-3. Run `npx afterimage init --agent claude --no-input` if you are Claude Code, or `npx afterimage init --agent cursor --no-input` if you are Cursor. Handle what it prints as "Set up" below says.
-4. Init puts the pill on plain HTML pages and in a Vite app's `index.html` itself. For Next.js, Astro and SvelteKit it prints a note that starts with `Add the Afterimage pill to your app`. Make that change yourself, exactly as the note says.
-5. Unless `afterimage/versions.json` already lists a version, run `npx afterimage save "First version"`.
-6. Start `npm run dev` as a background process. If you started the project's dev server earlier in this session, stop that one first: this is the same server, with Afterimage beside it. Wait for the line that starts with `Afterimage is running at`.
-7. Tell the user where the prototype is running and that the pill at its bottom saves a version and shows them all. The address is the app dev server's own (such as Vite's `Local:` line), or the one after `Your prototype is at` for plain HTML.
+1. Run `npx --yes afterimage-cli init --agent claude --no-input` if you are Claude Code, or `npx --yes afterimage-cli init --agent cursor --no-input` if you are Cursor. It installs afterimage-cli in the project unless `package.json` already lists it, and creates `package.json` when there is none. Handle what it prints as "Set up" below says.
+2. Init puts the pill on plain HTML pages and in a Vite app's `index.html` itself. For Next.js, Astro and SvelteKit it prints a note that starts with `Add the Afterimage pill to your app`. Make that change yourself, exactly as the note says.
+3. Unless `afterimage/versions.json` already lists a version, run `npx afterimage save "First version"`.
+4. Start `npm run dev` as a background process. If you started the project's dev server earlier in this session, stop that one first: this is the same server, with Afterimage beside it. Wait for the line that starts with `Afterimage is running at`.
+5. Tell the user where the prototype is running and that the pill at its bottom saves a version and shows them all. The address is the app dev server's own (such as Vite's `Local:` line), or the one after `Your prototype is at` for plain HTML.
 
 ## Commands
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "afterimage-cli",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "A version history for prototypes, deployed with the prototype itself.",
   "license": "MIT",
   "keywords": [

package/src/cli/commands/init.js

@@ -1,3 +1,4 @@
+import { spawn } from 'node:child_process';
 import fs from 'node:fs/promises';
 import path from 'node:path';
 import readline from 'node:readline/promises';
@@ -349,6 +350,52 @@ async function planAgent(cwd, name, { isTTY, ask }) {
   };
 }
 
+// "npx afterimage-cli init" runs from npx's cache, so the project gets the package too, at the version that is
+// running: npm run dev, save and build all run it from node_modules. It goes in with the package manager the project's
+// lockfile names, after every other step, since the install writes package.json too.
+const { version } = JSON.parse(await fs.readFile(new URL('../../../package.json', import.meta.url), 'utf8'));
+const installers = [['pnpm-lock.yaml', 'pnpm add -D'], ['yarn.lock', 'yarn add -D'], ['bun.lock', 'bun add -d'], ['bun.lockb', 'bun add -d']];
+
+// The package manager's own output only shows when the install fails, as its last lines.
+function installInTerminal(command, cwd) {
+  return new Promise((resolve, reject) => {
+    const child = spawn(command, { shell: true, cwd, stdio: ['ignore', 'pipe', 'pipe'] });
+    const output = [];
+    child.stdout.on('data', chunk => output.push(chunk));
+    child.stderr.on('data', chunk => output.push(chunk));
+    child.on('error', error => reject(new Error(`The install could not start: ${error.message}.`)));
+    child.on('close', code => {
+      if (code === 0) return resolve();
+      const said = Buffer.concat(output).toString().trim().split(/\r?\n/).slice(-12).join('\n');
+      reject(new Error(`${said ? `${said}\n` : ''}The install failed (exit code ${code}).`));
+    });
+  });
+}
+
+async function planInstall(cwd, { manifest }, { stdout, install }) {
+  if ('afterimage-cli' in { ...manifest.dependencies, ...manifest.devDependencies }) return { change: null, notes: [], apply: null };
+  let installer = 'npm install -D';
+  for (const [lockfile, command] of installers) {
+    if (await readText(path.join(cwd, lockfile)) !== null) {
+      installer = command;
+      break;
+    }
+  }
+  const command = `${installer} afterimage-cli@${version}`;
+  return {
+    change: `Installed afterimage-cli ${version} as a dev dependency`,
+    notes: [],
+    apply: async () => {
+      stdout.write(`Installing afterimage-cli ${version}...\n`);
+      try {
+        await install(command, cwd);
+      } catch (error) {
+        throw new Error(`${error.message}\nEverything else is set up. Install Afterimage yourself to finish: ${command}`);
+      }
+    }
+  };
+}
+
 export async function run(args, ctx) {
   const { cwd, stdout, stderr } = ctx;
 
@@ -381,7 +428,7 @@ export async function run(args, ctx) {
 
   // Plan first, write after. package.json is read before the config step so a bad one stops init before any question,
   // and detection (which reads package.json) still sees the project as it was.
-  let plans;
+  let plans, agentPlan;
   try {
     const packageFile = await readPackage(cwd);
     const configPlan = await planConfig(cwd, flags, prompt);
@@ -394,7 +441,8 @@ export async function run(args, ctx) {
       await planLines(cwd, '.gitignore', ['.afterimage/', `${configPlan.config.history}/.afterimage-*`, 'node_modules/'], hasIgnore),
       await planVercel(cwd, prompt),
       await planNetlify(cwd),
-      await planAgent(cwd, agent, prompt)
+      agentPlan = await planAgent(cwd, agent, prompt),
+      await planInstall(cwd, packageFile, { stdout, install: ctx.install ?? installInTerminal })
     ];
   } catch (error) {
     // Ctrl-C at a prompt. Nothing has been written yet, so stopping here is clean. 130 is the shell's code for SIGINT.
@@ -411,7 +459,7 @@ export async function run(args, ctx) {
   else stdout.write(notes.length ? 'No files changed. Still left for you:\n' : 'Everything is already set up. Nothing changed.\n');
   if (notes.length) stdout.write(`${changes.length ? '\n' : ''}${notes.join('\n\n')}\n`);
   // With --agent the copy is in place, and a fresh one needs loading; without it, say how to add it.
-  const agentLine = agent ? plans.at(-1).change && agents[agent].loads : skillHint;
+  const agentLine = agent ? agentPlan.change && agents[agent].loads : skillHint;
   const dev = (await readPackage(cwd)).manifest.scripts?.dev;
   stdout.write(`\n${agentLine ? `${agentLine}\n` : ''}${nextStep(typeof dev === 'string' && dev.trim().startsWith(devWrap))}\n`);
   return 0;