mick-templates 1.1.0 → 1.1.3

package/bin/cli.js

@@ -9,13 +9,11 @@ const binDir = dirname(__filename);
 const projectRoot = join(binDir, "..");
 const cliPath = join(projectRoot, "src", "index.tsx");
 
-// Find tsx in node_modules/.bin
-const tsxPath = join(projectRoot, "node_modules", ".bin", "tsx");
-
-// Execute tsx with the TypeScript file
-const child = spawn(tsxPath, [cliPath, ...process.argv.slice(2)], {
+// Use npx to run tsx (it will find tsx from the package dependencies)
+const child = spawn("npx", ["tsx", cliPath, ...process.argv.slice(2)], {
   stdio: "inherit",
   cwd: process.cwd(),
+  env: process.env,
 });
 
 child.on("exit", (code) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mick-templates",
-  "version": "1.1.0",
+  "version": "1.1.3",
   "description": "CLI tool for creating projects from templates",
   "bin": {
     "mick-templates": "bin/cli.js"

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/template.ts

@@ -83,25 +83,11 @@ export async function createProject(opts: CreateOptions): Promise<string> {
   // Create or clean directory
   if (projectName) {
     // For new projects, ensure directory is completely clean
-    try {
-      // First check if directory exists
-      const exists = await pathExists(targetDir);
-      if (exists) {
-        await rm(targetDir, { recursive: true, force: true });
-        // Wait a bit to ensure deletion is complete
-        await new Promise((resolve) => setTimeout(resolve, 10));
-      }
-    } catch (error) {
-      // If rm fails, try to clean contents instead
-      try {
-        const files = await readdir(targetDir);
-        for (const f of files) {
-          await rm(join(targetDir, f), { recursive: true, force: true });
-        }
-      } catch {
-        // If that also fails, throw the original error
-        throw error;
-      }
+    const exists = await pathExists(targetDir);
+    if (exists) {
+      await rm(targetDir, { recursive: true, force: true });
+      // Wait a bit to ensure deletion is complete (filesystem sync)
+      await new Promise((resolve) => setTimeout(resolve, 50));
     }
     await mkdir(targetDir, { recursive: true });
   } else if (overwrite) {
@@ -113,7 +99,7 @@ export async function createProject(opts: CreateOptions): Promise<string> {
   }
 
   // Copy template
-  await cp(templatePath, targetDir, { recursive: true });
+  await cp(templatePath, targetDir, { recursive: true, force: true });
 
   // Convert to JS if needed
   if (language === "js") {