mick-templates 1.1.6 → 1.1.7

package/README.md

@@ -1,9 +1,43 @@
 # mick-templates
 
-a minimal, clean, and robust cli to create projects from templates.
+a minimal, clean, and robust cli for creating projects from templates. built with bun, typescript, and ink.
 
-## Usage
+## installation
 
 ```bash
-bun start <template> [name]
+# install globally
+npm install -g mick-templates
+# or
+yarn global add mick-templates
+# or
+pnpm add -g mick-templates
+# or
+bun add -g mick-templates
 ```
+
+## usage
+
+```bash
+mick-templates <template> [name] [options]
+```
+
+### options
+
+- `--lang <js|ts>`: choose language (default: typescript)
+- `--skip-install`: skip automatic dependency installation
+
+### examples
+
+```bash
+# create a new vite project
+mick-templates vite my-app
+
+# create with javascript
+mick-templates vite my-app --lang js
+
+# skip dependency installation
+mick-templates vite my-app --skip-install
+```
+
+## license
+MIT License

package/bin/cli.js

@@ -1,8 +1,8 @@
 #!/usr/bin/env node
-import { spawn } from "child_process";
-import { dirname, join } from "path";
-import { fileURLToPath } from "url";
-import { createRequire } from "module";
+import { spawn } from "node:child_process";
+import { createRequire } from "node:module";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
 import { getUserAgent } from "package-manager-detector";
 
 // Get the directory where this script is located

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mick-templates",
-  "version": "1.1.6",
-  "description": "CLI tool for creating projects from templates",
+  "version": "1.1.7",
+  "description": "cli tool for creating projects from templates",
   "bin": {
     "mick-templates": "bin/cli.js"
   },
@@ -33,6 +33,7 @@
     "tsx": "^4.21.0"
   },
   "devDependencies": {
+    "@biomejs/biome": "2.3.11",
     "@types/bun": "latest",
     "@types/react": "^18.2.0",
     "typescript": "^5.3.0",

package/src/app.tsx

@@ -1,8 +1,8 @@
-import React, { useState, useEffect, useCallback } from "react";
-import { readdirSync, existsSync } from "fs";
-import { LanguageSelect } from "./components/LanguageSelect.js";
-import { OverwritePrompt } from "./components/OverwritePrompt.js";
-import { Status } from "./components/Status.js";
+import { existsSync, readdirSync } from "node:fs";
+import { useCallback, useEffect, useState } from "react";
+import { LanguageSelect } from "./components/language-select.js";
+import { OverwritePrompt } from "./components/overwrite-prompt.js";
+import { Status } from "./components/status.js";
 import { createProject, type Language } from "./lib/template.js";
 
 type Step = "language" | "overwrite" | "processing" | "done" | "error";
@@ -95,7 +95,7 @@ export function App({
     if (!overwrite) {
       process.exit(0);
     }
-    runCreate(language!, true);
+    runCreate(language as Language, true);
   };
 
   if (step === "language") {

package/src/components/{LanguageSelect.tsx → language-select.tsx}

@@ -1,16 +1,13 @@
-import React from "react";
 import { Box, Text } from "ink";
 import SelectInput from "ink-select-input";
+import { LANGUAGE_OPTIONS } from "../lib/constants.js";
 import type { Language } from "../lib/template.js";
 
 interface Props {
   onSelect: (lang: Language) => void;
 }
 
-const items = [
-  { label: "TypeScript (recommended)", value: "ts" as Language },
-  { label: "JavaScript", value: "js" as Language },
-];
+const items = LANGUAGE_OPTIONS;
 
 export function LanguageSelect({ onSelect }: Props) {
   return (
@@ -20,4 +17,3 @@ export function LanguageSelect({ onSelect }: Props) {
     </Box>
   );
 }
-

package/src/components/{OverwritePrompt.tsx → overwrite-prompt.tsx}

@@ -1,4 +1,3 @@
-import React from "react";
 import { Box, Text } from "ink";
 import SelectInput from "ink-select-input";
 
@@ -19,4 +18,3 @@ export function OverwritePrompt({ onSelect }: Props) {
     </Box>
   );
 }
-

package/src/components/{Status.tsx → status.tsx}

@@ -1,4 +1,3 @@
-import React from "react";
 import { Text } from "ink";
 
 interface Props {
@@ -18,4 +17,3 @@ export function Status({ status, targetDir, error }: Props) {
 
   return <Text color="yellow">Creating project...</Text>;
 }
-

package/src/index.tsx

@@ -1,8 +1,9 @@
-#!/usr/bin/env node
-import React from "react";
-import { render, Box, Text } from "ink";
+#!/usr/bin/env bun
+
+import { Box, render, Text } from "ink";
 import { App } from "./app.js";
-import { listTemplates, type Language } from "./lib/template.js";
+import { LANGUAGE_OPTIONS } from "./lib/constants.js";
+import { type Language, listTemplates } from "./lib/template.js";
 
 const args = process.argv.slice(2);
 
@@ -14,9 +15,11 @@ const skipInstall = args.includes("--skip-install");
 const langFlag = args.find((arg) => arg.startsWith("--lang="))?.split("=")[1];
 
 // Validate language flag
-const validLangs = ["js", "ts"];
+const validLangs: string[] = LANGUAGE_OPTIONS.map((o) => o.value);
 if (langFlag && !validLangs.includes(langFlag)) {
-  console.error(`Error: Invalid language "${langFlag}". Use "js" or "ts".`);
+  console.error(
+    `Error: Invalid language "${langFlag}". Use "${validLangs.join('" or "')}".`
+  );
   process.exit(1);
 }
 
@@ -27,14 +30,23 @@ if (!template) {
   render(
     <Box flexDirection="column" padding={1}>
       <Text color="red" bold>
-        Usage: mick-templates {"<template>"} [name] [--lang=js|ts] [--skip-install]
+        Usage: mick-templates {"<template>"} [name] [--lang=$
+        {validLangs.join("|")}] [--skip-install]
       </Text>
       <Box marginTop={1} flexDirection="column">
         <Text bold>Available templates:</Text>
-        <Box borderStyle="single" borderColor="gray" marginTop={1} paddingX={1} flexDirection="column">
+        <Box
+          borderStyle="single"
+          borderColor="gray"
+          marginTop={1}
+          paddingX={1}
+          flexDirection="column"
+        >
           {templates.map((t) => (
             <Box key={t.name} flexDirection="row">
-              <Text color="cyan" bold>{t.name}</Text>
+              <Text color="cyan" bold>
+                {t.name}
+              </Text>
               {t.description && <Text color="gray"> - {t.description}</Text>}
             </Box>
           ))}
@@ -54,4 +66,3 @@ render(
     skipInstall={skipInstall}
   />
 );
-

package/src/lib/constants.ts

@@ -0,0 +1,11 @@
+export type Language = "ts" | "js";
+
+export interface LanguageOption {
+  value: Language;
+  label: string;
+}
+
+export const LANGUAGE_OPTIONS: LanguageOption[] = [
+  { value: "ts", label: "TypeScript (recommended)" },
+  { value: "js", label: "JavaScript" },
+];

package/src/lib/convert.ts

@@ -1,7 +1,7 @@
-import { readFile, writeFile, rename, rm } from "fs/promises";
+import { readFile, rename, rm, writeFile } from "node:fs/promises";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
 import { glob } from "glob";
-import { join, dirname } from "path";
-import { fileURLToPath } from "url";
 import { execute } from "./pm.js";
 
 const TS_DEPS = [
@@ -69,7 +69,12 @@ async function runCodemod(targetDir: string): Promise<void> {
 
   for (const file of jsFiles) {
     const filePath = join(targetDir, file);
-    await execute(targetDir, "jscodeshift", ["-t", codemodPath, "--parser=tsx", filePath]);
+    await execute(targetDir, "jscodeshift", [
+      "-t",
+      codemodPath,
+      "--parser=tsx",
+      filePath,
+    ]);
   }
 }
 

package/src/lib/pm.ts

@@ -1,9 +1,9 @@
-import { getUserAgent, resolveCommand } from "package-manager-detector";
+import { spawn } from "node:child_process";
+import { readFile } from "node:fs/promises";
+import { createRequire } from "node:module";
+import { dirname, join } from "node:path";
 import type { AgentName } from "package-manager-detector";
-import { spawn } from "child_process";
-import { createRequire } from "module";
-import { join, dirname } from "path";
-import { readFile } from "fs/promises";
+import { getUserAgent, resolveCommand } from "package-manager-detector";
 
 /**
  * Get the current package manager agent.
@@ -28,10 +28,11 @@ function run(cmd: string, args: string[], cwd: string): Promise<void> {
 /**
  * Install dependencies in a directory.
  */
-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}`);
+export async function install(cwd: string, agent?: AgentName): Promise<void> {
+  const resolvedAgent = agent ?? getAgent();
+  const resolved = resolveCommand(resolvedAgent, "install", []);
+  if (!resolved)
+    throw new Error(`Cannot resolve install command for ${resolvedAgent}`);
 
   await run(resolved.command, resolved.args, cwd);
 }
@@ -57,14 +58,22 @@ export async function execute(
     const pkgJsonPath = require.resolve(`${pkg}/package.json`);
     const pkgJson = JSON.parse(await readFile(pkgJsonPath, "utf-8")) as Record<
       string,
-      any
+      unknown
     >;
 
     let binPath: string | undefined;
-    if (typeof pkgJson.bin === "string") {
-      binPath = join(dirname(pkgJsonPath), pkgJson.bin);
-    } else if (pkgJson.bin && pkgJson.bin[pkg]) {
-      binPath = join(dirname(pkgJsonPath), pkgJson.bin[pkg]);
+    const bin = pkgJson.bin;
+    if (typeof bin === "string") {
+      binPath = join(dirname(pkgJsonPath), bin);
+    } else if (
+      bin &&
+      typeof bin === "object" &&
+      typeof (bin as Record<string, unknown>)[pkg] === "string"
+    ) {
+      binPath = join(
+        dirname(pkgJsonPath),
+        (bin as Record<string, string>)[pkg]
+      );
     }
 
     if (binPath) {

package/src/lib/template.ts

@@ -1,13 +1,22 @@
-import { cp, readdir, rm, readFile, writeFile, mkdir, stat } from "fs/promises";
-import { join, resolve, basename, dirname } from "path";
-import { fileURLToPath } from "url";
+import {
+  cp,
+  mkdir,
+  readdir,
+  readFile,
+  rm,
+  stat,
+  writeFile,
+} from "node:fs/promises";
+import { basename, dirname, join, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import type { Language } from "./constants.js";
 import { convertToJS } from "./convert.js";
 import { install } from "./pm.js";
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const TEMPLATES_DIR = join(__dirname, "..", "..", "templates");
 
-export type Language = "ts" | "js";
+export type { Language };
 
 export interface CreateOptions {
   template: string;

package/src/ts-to-js-codemod.mjs

@@ -10,11 +10,10 @@ export default function (fileInfo, api) {
 
   // Update import declarations from .tsx to .jsx
   root.find(j.ImportDeclaration).forEach((path) => {
-    if (path.node.source.value && path.node.source.value.endsWith(".tsx")) {
+    if (path.node.source.value?.endsWith(".tsx")) {
       path.node.source.value = path.node.source.value.replace(/\.tsx$/, ".jsx");
     }
   });
 
   return root.toSource();
 }
-