mick-templates 1.1.2 → 1.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mick-templates",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "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/app.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useCallback } from "react";
 import { readdirSync, existsSync } from "fs";
 import { LanguageSelect } from "./components/LanguageSelect.js";
 import { OverwritePrompt } from "./components/OverwritePrompt.js";
@@ -14,13 +14,47 @@ interface Props {
   skipInstall?: boolean;
 }
 
-export function App({ template, projectName, language: initialLang, skipInstall = false }: Props) {
+export function App({
+  template,
+  projectName,
+  language: initialLang,
+  skipInstall = false,
+}: Props) {
   const [step, setStep] = useState<Step>("processing");
   const [language, setLanguage] = useState<Language | undefined>(initialLang);
+  const [isCreating, setIsCreating] = useState(false);
   const [targetDir, setTargetDir] = useState("");
   const [error, setError] = useState("");
 
-  const needsOverwrite = !projectName && existsSync(process.cwd()) && readdirSync(process.cwd()).length > 0;
+  const needsOverwrite =
+    !projectName &&
+    existsSync(process.cwd()) &&
+    readdirSync(process.cwd()).length > 0;
+
+  const runCreate = useCallback(
+    async (lang: Language, overwrite: boolean) => {
+      if (isCreating) return;
+      setIsCreating(true);
+      setStep("processing");
+      try {
+        const dir = await createProject({
+          template,
+          projectName,
+          language: lang,
+          overwrite,
+          skipInstall,
+        });
+        setTargetDir(dir);
+        setStep("done");
+      } catch (e) {
+        setError(e instanceof Error ? e.message : String(e));
+        setStep("error");
+      } finally {
+        setIsCreating(false);
+      }
+    },
+    [isCreating, template, projectName, skipInstall]
+  );
 
   useEffect(() => {
     // Determine initial step
@@ -34,37 +68,26 @@ export function App({ template, projectName, language: initialLang, skipInstall
       return;
     }
 
-    // Don't run if we're waiting for user input
-    if (step === "language" || step === "overwrite") return;
+    // Don't run if we're waiting for user input or already creating
+    if (
+      step === "language" ||
+      step === "overwrite" ||
+      isCreating ||
+      step === "done" ||
+      step === "error"
+    )
+      return;
 
     // Create project
     runCreate(language, false);
-  }, [language]);
-
-  const runCreate = async (lang: Language, overwrite: boolean) => {
-    setStep("processing");
-    try {
-      const dir = await createProject({
-        template,
-        projectName,
-        language: lang,
-        overwrite,
-        skipInstall,
-      });
-      setTargetDir(dir);
-      setStep("done");
-    } catch (e) {
-      setError(e instanceof Error ? e.message : String(e));
-      setStep("error");
-    }
-  };
+  }, [language, step, isCreating, needsOverwrite, runCreate]);
 
   const handleLanguageSelect = (lang: Language) => {
     setLanguage(lang);
     if (needsOverwrite) {
       setStep("overwrite");
     } else {
-      runCreate(lang, false);
+      setStep("processing");
     }
   };
 
@@ -85,4 +108,3 @@ export function App({ template, projectName, language: initialLang, skipInstall
 
   return <Status status={step} targetDir={targetDir} error={error} />;
 }
-

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,44 @@
-import { execa } from "execa";
-import { dirname, join } from "path";
-
-export type PackageManager = "npm" | "yarn" | "pnpm" | "bun" | "deno";
+import { getUserAgent, resolveCommand } from "package-manager-detector";
+import type { AgentName } from "package-manager-detector";
+import { spawn } from "child_process";
 
 /**
- * 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.
+ * Get the current package manager agent.
  */
-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";
+export function getAgent(): AgentName {
+  const ua = getUserAgent();
+  return ua?.name ?? "npm";
 }
 
 /**
- * Get the executable path for the package manager.
- * Uses the runtime path if available for better reliability.
+ * Run a command with the detected package manager.
  */
-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;
+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 install command for a package manager.
+ * Install dependencies in a directory.
  */
-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"];
-  }
-}
-
-/**
- * Get the package runner (npx, bunx, etc.) for a package manager.
- */
-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");
-  }
-
-  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";
-  }
+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}`);
+  
+  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"),
+    },
+  },
 });