feat(create-mako): refactor create-mako

package.json

@@ -6,6 +6,7 @@
     "build": "pnpm --filter @umijs/mako build && pnpm --filter @umijs/mako src:build && pnpm biome:format",
     "build:debug": "pnpm --filter @umijs/mako build:debug && pnpm --filter @umijs/mako src:build && pnpm biome:format",
     "build:profile": "pnpm --filter @umijs/mako build:profile && pnpm --filter @umijs/mako src:build && pnpm biome:format",
+    "build:create-mako": "pnpm --filter create-mako build",
     "build:client": "pnpm --filter client build",
     "biome:check": "biome check .",
     "biome:format": "biome check --write .",
@@ -17,7 +18,7 @@
     "release:mako": "pnpm --filter @umijs/mako release",
     "release:bundler-mako": "esno scripts/release-bundler-mako.ts",
     "release:rsc": "esno scripts/release-rsc.ts",
-    "release:create-mako": "esno scripts/release-create-mako.ts"
+    "release:create-mako": "pnpm --filter create-mako release"
   },
   "license": "MIT",
   "devDependencies": {

packages/create-mako/bin/create-mako.js

@@ -1,2 +1,3 @@
 #!/usr/bin/env node
+
 require('../dist/cli');

packages/create-mako/package.json

@@ -5,16 +5,15 @@
     "create-mako": "./bin/create-mako.js"
   },
   "license": "MIT",
-  "dependencies": {
-    "glob": "^10.3.15",
-    "inquirer": "^9.3.1",
-    "yargs-parser": "^21.1.1"
-  },
   "devDependencies": {
-    "@types/inquirer": "^9.0.7",
-    "@types/node": "^20.12.5",
     "@types/yargs-parser": "^21.0.3",
-    "typescript": "^5.4.3"
+    "@umijs/clack-prompt": "^0.0.3",
+    "@umijs/tools": "^0.1.3",
+    "gradient-string": "^3.0.0",
+    "picocolors": "^1.1.1",
+    "tsx": "^4.19.2",
+    "typescript": "^5.6.3",
+    "yargs-parser": "^21.1.1"
   },
   "engines": {
     "node": ">= 16"
@@ -26,8 +25,8 @@
   ],
   "scripts": {
     "format": "biome check --write .",
-    "dev": "father dev",
-    "build": "father build"
+    "build": "utools bundle --patch-dirname",
+    "release": "utools release"
   },
   "repository": "[email protected]:umijs/mako.git"
 }

packages/create-mako/src/cli.ts

@@ -1,130 +1,73 @@
 import fs from 'fs';
-import path, { resolve } from 'path';
-import { globSync } from 'glob';
-import type { QuestionCollection } from 'inquirer';
-import yargs from 'yargs-parser';
+import path from 'path';
+import * as p from '@umijs/clack-prompt';
+import { instagram } from 'gradient-string';
+import yargsParser from 'yargs-parser';
+import { create } from './create';
 
-const args = yargs(process.argv.slice(2));
-const baseTemplatesPath = path.join(__dirname, '../templates');
+async function run(cwd: string) {
+  const argv = yargsParser(process.argv.slice(2), {
+    alias: {
+      version: ['v'],
+      help: ['h'],
+      template: ['t'],
+    },
+    boolean: ['version', 'help'],
+  });
 
-type InitOptions = {
-  projectName: string;
-  template: string;
-};
+  console.log(
+    instagram(`
+ ███╗   ███╗ █████╗ ██╗  ██╗ ██████╗
+ ████╗ ████║██╔══██╗██║ ██╔╝██╔═══██╗
+ ██╔████╔██║███████║█████╔╝ ██║   ██║
+ ██║╚██╔╝██║██╔══██║██╔═██╗ ██║   ██║
+ ██║ ╚═╝ ██║██║  ██║██║  ██╗╚██████╔╝
+ ╚═╝     ╚═╝╚═╝  ╚═╝╚═╝  ╚═╝ ╚═════╝
+  `),
+  );
 
-async function init({ projectName, template }: InitOptions) {
-  let templatePath = path.join(baseTemplatesPath, template);
-  if (!fs.existsSync(templatePath)) {
-    console.error(`Template "${template}" does not exist.`);
-    process.exit(1);
+  // Check if the version flag is set
+  if (argv.version) {
+    const pkgPath = path.join(__dirname, '../package.json');
+    const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf-8'));
+    console.log(`${pkg.name}@${pkg.version}`);
+    return;
   }
-  let files = globSync('**/*', { cwd: templatePath, nodir: true });
 
-  // Use the project name entered by the user as the target folder name.
-  let cwd = path.resolve(process.cwd(), projectName);
+  // Check if the help flag is set
+  if (argv.help) {
+    console.log(`Usage: create-mako [project-name] [options]
 
-  // Ensure the target directory exists; if it does not, create it.
-  if (!fs.existsSync(cwd)) {
-    fs.mkdirSync(cwd, { recursive: true });
-  }
-
-  let npmClient = (() => {
-    let script = process.argv[1];
-    if (script.includes('pnpm/')) {
-      return 'pnpm';
-    } else {
-      return 'npm';
-    }
-  })();
+Options:
+  --version, -v     Show version number
+  --help, -h        Show help
+  --template, -t    Specify a template for the project
+  --npm-client, -n  Specify the npm client to use (pnpm, yarn, npm)
 
-  // Copy files
-  for (let file of files) {
-    let source = path.join(templatePath, file);
-    let dest = path.join(cwd, file);
-    console.log(`Creating ${file}`);
-    let destDir = path.dirname(dest);
-    if (!fs.existsSync(destDir)) {
-      fs.mkdirSync(destDir, { recursive: true });
-    }
-    fs.copyFileSync(source, dest);
+Examples:
+  create-mako                          Create a new project
+  create-mako myapp                    Create a new project named 'myapp'
+  create-mako myapp --template=minimal Create a new project named 'myapp' using the 'minimal' template`);
+    return;
   }
 
-  console.log();
-  console.log('Done, Run following commands to start the project:');
-  console.log();
-  console.log(`  cd ${path.basename(cwd)}`);
-  console.log(`  ${npmClient} install`);
-  console.log(`  ${npmClient} run dev`);
-  console.log(`  # Open http://localhost:3000`);
-  console.log();
-  console.log('Happy coding!');
-}
-
-type InitQuestion = {
-  name: string;
-  template: string;
-};
-
-async function checkEmptyDir(name: string) {
-  const inquirer = (await import('inquirer')).default;
-  const cwd = process.cwd();
-  const exist = fs.existsSync(resolve(cwd, name));
-  if (exist && fs.readdirSync(resolve(cwd, name)).length > 0) {
-    const answersContinue = await inquirer.prompt([
-      {
-        type: 'confirm',
-        name: 'continue',
-        message:
-          'The current directory is not empty. Do you want to continue creating the project here?',
-        default: false,
-      },
-    ]);
-
-    if (!answersContinue.continue) {
+  p.intro('Creating a new MAKO project...');
+  create({
+    cwd: cwd,
+    name: argv._[0] as string | undefined,
+    template: argv.template,
+    packageManager: argv.packageManager,
+  })
+    .then(() => {
+      p.outro('Create success!');
+    })
+    .catch((err) => {
+      p.cancel(`Create failed, ${err.message}`);
       process.exit(1);
-    }
-  }
-}
-
-async function main() {
-  const inquirer = (await import('inquirer')).default;
-
-  let name: string = args._[0] as string;
-  let { template } = args;
-  let questions: QuestionCollection[] = [];
-  if (!name) {
-    let answers = await inquirer.prompt<InitQuestion>([
-      {
-        type: 'input',
-        name: 'name',
-        message: 'Project name:',
-        default: 'mako-project',
-      },
-    ]);
-    name = answers.name;
-  }
-  await checkEmptyDir(name);
-  if (!template) {
-    const templates = globSync('**/', {
-      cwd: baseTemplatesPath,
-      maxDepth: 1,
-    }).filter((dir) => dir !== '.');
-    questions.push({
-      type: 'list',
-      name: 'template',
-      message: 'Select a template:',
-      choices: templates,
-      default: 'react',
     });
-  }
-  if (questions.length > 0) {
-    let answers = await inquirer.prompt<InitQuestion>(questions);
-    template = template || answers.template;
-  }
-  return init({ projectName: String(name), template });
 }
 
-main().catch((err) => {
+run(process.cwd()).catch((err) => {
   console.error(err);
   process.exit(1);
 });