mick-templates 1.1.3 → 1.1.5

package/bin/cli.js

@@ -2,6 +2,7 @@
 import { spawn } from "child_process";
 import { dirname, join } from "path";
 import { fileURLToPath } from "url";
+import { getUserAgent } from "package-manager-detector";
 
 // Get the directory where this script is located
 const __filename = fileURLToPath(import.meta.url);
@@ -9,8 +10,25 @@ const binDir = dirname(__filename);
 const projectRoot = join(binDir, "..");
 const cliPath = join(projectRoot, "src", "index.tsx");
 
-// Use npx to run tsx (it will find tsx from the package dependencies)
-const child = spawn("npx", ["tsx", cliPath, ...process.argv.slice(2)], {
+// Detect the package manager agent
+const agent = getUserAgent() ?? "npm";
+
+let command;
+let args;
+
+if (agent === "bun") {
+  command = "bun";
+  args = [cliPath, ...process.argv.slice(2)];
+} else {
+  // Use the local tsx from the package's node_modules
+  const isWin = process.platform === "win32";
+  const tsxBin = join(projectRoot, "node_modules", ".bin", "tsx");
+  command = isWin ? `${tsxBin}.cmd` : tsxBin;
+  args = [cliPath, ...process.argv.slice(2)];
+}
+
+// Spawn the command
+const child = spawn(command, args, {
   stdio: "inherit",
   cwd: process.cwd(),
   env: process.env,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mick-templates",
-  "version": "1.1.3",
+  "version": "1.1.5",
   "description": "CLI tool for creating projects from templates",
   "bin": {
     "mick-templates": "bin/cli.js"
@@ -8,8 +8,7 @@
   "files": [
     "templates",
     "src",
-    "bin",
-    "ts-to-js-codemod.js"
+    "bin"
   ],
   "type": "module",
   "scripts": {
@@ -25,12 +24,11 @@
   "author": "Mick",
   "license": "MIT",
   "dependencies": {
-    "execa": "^9.5.2",
     "glob": "^10.3.10",
     "ink": "^4.4.1",
     "ink-select-input": "^5.0.0",
     "jscodeshift": "^17.3.0",
-    "picocolors": "^1.1.1",
+    "package-manager-detector": "^1.6.0",
     "react": "^18.2.0",
     "tsx": "^4.21.0"
   },

package/src/lib/convert.ts

@@ -2,8 +2,7 @@ import { readFile, writeFile, rename, rm } from "fs/promises";
 import { glob } from "glob";
 import { join, dirname } from "path";
 import { fileURLToPath } from "url";
-import { execa } from "execa";
-import { getPMX, detectPM } from "./pm.js";
+import { execute } from "./pm.js";
 
 const TS_DEPS = [
   "typescript",
@@ -18,38 +17,27 @@ const TS_DEPS = [
  * Convert a TypeScript project to JavaScript.
  */
 export async function convertToJS(targetDir: string): Promise<void> {
-  // Remove tsconfig.json
   await rm(join(targetDir, "tsconfig.json"), { force: true });
 
-  // Rename vite.config.ts -> vite.config.js
   await renameIfExists(
     join(targetDir, "vite.config.ts"),
     join(targetDir, "vite.config.js")
   );
 
-  // Rename all .tsx -> .jsx
   const tsxFiles = await glob("**/*.tsx", { cwd: targetDir });
   for (const file of tsxFiles) {
     const oldPath = join(targetDir, file);
-    const newPath = oldPath.replace(/\.tsx$/, ".jsx");
-    await rename(oldPath, newPath);
+    await rename(oldPath, oldPath.replace(/\.tsx$/, ".jsx"));
   }
 
-  // Rename all .ts -> .js
   const tsFiles = await glob("**/*.ts", { cwd: targetDir });
   for (const file of tsFiles) {
     const oldPath = join(targetDir, file);
-    const newPath = oldPath.replace(/\.ts$/, ".js");
-    await rename(oldPath, newPath);
+    await rename(oldPath, oldPath.replace(/\.ts$/, ".js"));
   }
 
-  // Update HTML files to reference .jsx instead of .tsx
   await updateHTMLScripts(targetDir);
-
-  // Run jscodeshift on all JS/JSX files to strip types
   await runCodemod(targetDir);
-
-  // Clean up package.json
   await cleanPackageJSON(targetDir);
 }
 
@@ -57,7 +45,7 @@ async function renameIfExists(from: string, to: string): Promise<void> {
   try {
     await rename(from, to);
   } catch {
-    // File doesn't exist, ignore
+    // File doesn't exist
   }
 }
 
@@ -77,20 +65,11 @@ async function runCodemod(targetDir: string): Promise<void> {
   if (jsFiles.length === 0) return;
 
   const __dirname = dirname(fileURLToPath(import.meta.url));
-  const codemodPath = join(__dirname, "..", "..", "ts-to-js-codemod.js");
-  const pmx = getPMX(detectPM());
-  const [cmd, ...baseArgs] = pmx.split(" ");
+  const codemodPath = join(__dirname, "..", "ts-to-js-codemod.mjs");
 
   for (const file of jsFiles) {
     const filePath = join(targetDir, file);
-    await execa(
-      cmd,
-      [...baseArgs, "jscodeshift", "-t", codemodPath, "--parser=tsx", filePath],
-      {
-        cwd: targetDir,
-        stdio: "pipe",
-      }
-    );
+    await execute(targetDir, "jscodeshift", ["-t", codemodPath, "--parser=tsx", filePath]);
   }
 }
 
@@ -99,19 +78,17 @@ async function cleanPackageJSON(targetDir: string): Promise<void> {
   try {
     const pkg = JSON.parse(await readFile(pkgPath, "utf-8"));
 
-    // Remove TS dependencies
     for (const dep of TS_DEPS) {
       delete pkg.dependencies?.[dep];
       delete pkg.devDependencies?.[dep];
     }
 
-    // Update build script to remove tsc
     if (pkg.scripts?.build) {
       pkg.scripts.build = pkg.scripts.build.replace("tsc -b && ", "");
     }
 
     await writeFile(pkgPath, JSON.stringify(pkg, null, 2));
   } catch {
-    // No package.json, ignore
+    // No package.json
   }
 }

package/src/lib/pm.ts

@@ -1,95 +1,49 @@
-import { execa } from "execa";
-import { dirname, join } from "path";
-
-export type PackageManager = "npm" | "yarn" | "pnpm" | "bun" | "deno";
-
-/**
- * Detect the package manager based on how the CLI was invoked.
- * Checks npm_config_user_agent first (set by npx/bunx/etc),
- * then falls back to checking the runtime executable.
- */
-export function detectPM(): PackageManager {
-  const ua = process.env.npm_config_user_agent || "";
-
-  if (ua.startsWith("bun/")) return "bun";
-  if (ua.startsWith("yarn/")) return "yarn";
-  if (ua.startsWith("pnpm/")) return "pnpm";
-  if (ua.startsWith("deno/")) return "deno";
-  if (ua.startsWith("npm/")) return "npm";
-
-  // Fallback: check runtime executable
-  const runtime = process.argv0.toLowerCase();
-  if (runtime.includes("bun")) return "bun";
-  if (runtime.includes("deno")) return "deno";
-
-  return "npm";
-}
+import { getUserAgent, resolveCommand } from "package-manager-detector";
+import type { AgentName } from "package-manager-detector";
+import { spawn } from "child_process";
 
 /**
- * Get the executable path for the package manager.
- * Uses the runtime path if available for better reliability.
+ * Get the current package manager agent.
  */
-function getPMExecutable(pm: PackageManager): string {
-  const runtime = process.argv0;
-
-  // If the runtime matches the PM, use it directly (handles custom paths like ~/.bun/bin/bun)
-  if (pm === "bun" && runtime.toLowerCase().includes("bun")) return runtime;
-  if (pm === "deno" && runtime.toLowerCase().includes("deno")) return runtime;
-
-  return pm;
+export function getAgent(): AgentName {
+  return getUserAgent() ?? "npm";
 }
 
 /**
- * Get the install command for a package manager.
+ * Run a command with the detected package manager.
  */
-export function getInstallCmd(pm: PackageManager): string[] {
-  const exe = getPMExecutable(pm);
-
-  switch (pm) {
-    case "bun":
-      return [exe, "install"];
-    case "yarn":
-      return [exe, "install"];
-    case "pnpm":
-      return [exe, "install"];
-    case "deno":
-      return [exe, "install"];
-    default:
-      return ["npm", "install"];
-  }
+function run(cmd: string, args: string[], cwd: string): Promise<void> {
+  return new Promise((resolve, reject) => {
+    spawn(cmd, args, { cwd, stdio: "inherit" })
+      .on("close", (code) =>
+        code === 0 ? resolve() : reject(new Error(`Exit ${code}`))
+      )
+      .on("error", reject);
+  });
 }
 
 /**
- * Get the package runner (npx, bunx, etc.) for a package manager.
+ * Install dependencies in a directory.
  */
-export function getPMX(pm: PackageManager): string {
-  const runtime = process.argv0;
-
-  // For bun, use bunx from the same directory as the runtime
-  if (pm === "bun" && runtime.toLowerCase().includes("bun")) {
-    const bunDir = dirname(runtime);
-    return join(bunDir, "bunx");
-  }
+export async function install(cwd: string): Promise<void> {
+  const agent = getAgent();
+  const resolved = resolveCommand(agent, "install", []);
+  if (!resolved) throw new Error(`Cannot resolve install command for ${agent}`);
 
-  switch (pm) {
-    case "bun":
-      return "bunx";
-    case "yarn":
-      return "yarn dlx";
-    case "pnpm":
-      return "pnpm dlx";
-    case "deno":
-      return "deno run -A npm:";
-    default:
-      return "npx";
-  }
+  await run(resolved.command, resolved.args, cwd);
 }
 
 /**
- * Run the install command in a directory.
+ * Execute a package binary (npx/bunx/etc).
  */
-export async function install(cwd: string): Promise<void> {
-  const pm = detectPM();
-  const [cmd, ...args] = getInstallCmd(pm);
-  await execa(cmd, args, { cwd, stdio: "inherit" });
+export async function execute(
+  cwd: string,
+  pkg: string,
+  args: string[]
+): Promise<void> {
+  const agent = getAgent();
+  const resolved = resolveCommand(agent, "execute", [pkg, ...args]);
+  if (!resolved) throw new Error(`Cannot resolve execute command for ${agent}`);
+
+  await run(resolved.command, resolved.args, cwd);
 }

package/{ts-to-js-codemod.js → src/ts-to-js-codemod.mjs}

@@ -1,5 +1,5 @@
 // Transform TypeScript files to JavaScript
-module.exports = function (fileInfo, api) {
+export default function (fileInfo, api) {
   const j = api.jscodeshift;
   const root = j(fileInfo.source);
 
@@ -16,4 +16,5 @@ module.exports = function (fileInfo, api) {
   });
 
   return root.toSource();
-};
+}
+

package/templates/vite/tsconfig.json

@@ -21,7 +21,13 @@
     "noUnusedParameters": true,
     "erasableSyntaxOnly": true,
     "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
+    "noUncheckedSideEffectImports": true,
+
+    // Paths
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"],
+    },
   },
-  "include": ["src", "vite.config.ts"]
+  "include": ["src", "vite.config.ts"],
 }

package/templates/vite/vite.config.ts

@@ -1,7 +1,13 @@
+import path from "node:path";
 import react from "@vitejs/plugin-react";
 import { defineConfig } from "vite";
 
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [react()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
 });