✨refactor(core): 添加拉取模板命令

Author: OSpoon

src/command/template.ts

@@ -0,0 +1,142 @@
+import type { CAC } from "cac";
+
+import path from "node:path";
+import { randomUUID } from "node:crypto";
+
+import enquirer from "enquirer";
+
+import {
+  getVariantByFramework,
+  isEmptyDir,
+  isValidFramework,
+  isValidPackageName,
+  isValidVariant,
+  loggerInfo,
+  toValidPackageName,
+} from "@/shared/index";
+import { ACTIVATION, FRAMEWORKS } from "@/shared/config";
+import { TemplateOptions } from "@/shared/types";
+
+interface PromptResult {
+  projectName: string;
+  framework: string;
+  variant: string;
+  overwrite: boolean;
+  packageName: string;
+}
+
+export const template = async (options: TemplateOptions) => {
+  if (ACTIVATION) {
+    loggerInfo("template 参数信息: \n");
+    console.table(options);
+  }
+
+  const { projectName } = await enquirer.prompt<PromptResult>({
+    name: "projectName",
+    type: "text",
+    message: "请输入项目名称",
+    initial: options.projectName,
+  });
+
+  const { overwrite } = await enquirer.prompt<PromptResult>({
+    name: "overwrite",
+    type: "confirm",
+    skip: () => isEmptyDir(projectName),
+    message: `${path.join(
+      process.cwd(),
+      projectName,
+    )} \n 文件夹非空，继续操作会丢失现有的文件？`,
+    result: (value) => {
+      if (!isEmptyDir(projectName) && !value) {
+        process.exit(1);
+      }
+      return value;
+    },
+  });
+
+  const { packageName } = await enquirer.prompt<PromptResult>({
+    name: "packageName",
+    type: "text",
+    skip: () => isValidPackageName(projectName),
+    message: "请输入 package name",
+    initial: projectName,
+    validate: (value) => {
+      return isValidPackageName(value) || "输入的 package name 不符合规范";
+    },
+    result: (value) => {
+      return toValidPackageName(value);
+    },
+  });
+
+  const { framework } = await enquirer.prompt<PromptResult>({
+    name: "framework",
+    type: "select",
+    skip: () => isValidFramework(options.framework),
+    message: "请选择下列的有效模板",
+    choices: FRAMEWORKS.map((framework) => {
+      const frameworkColor = framework.color;
+      return {
+        message: frameworkColor(framework.display || framework.name),
+        name: framework.name,
+      };
+    }),
+  });
+
+  const { variant } = await enquirer.prompt<PromptResult>({
+    name: "variant",
+    type: "select",
+    skip: () => !isValidVariant(framework),
+    message: "请选择下列的有效变体",
+    choices: getVariantByFramework(framework).map((variant) => {
+      const variantColor = variant.color;
+      return {
+        message: variantColor(variant.display || variant.name),
+        name: variant.name,
+      };
+    }),
+  });
+
+  console.log(projectName, framework, variant, overwrite, packageName);
+
+  const root = path.join(process.cwd(), projectName);
+  // if (overwrite) emptyDir(root);
+  // const template: string = variant || framework;
+  // const pkgInfo = pkgFromUserAgent(process.env.npm_config_user_agent);
+  // const pkgManager = pkgInfo ? pkgInfo.name : "npm";
+
+  console.log(`\nScaffolding project in ${root}...`);
+  // const templateDir = path.resolve(
+  //   fileURLToPath(import.meta.url),
+  //   "../../../template",
+  //   `template-${template}`
+  // );
+  // console.log(templateDir);
+  // fs.copySync(templateDir, projectName, {
+  //   filter: (src: string) => {
+  //     return !fileIgnore.find(
+  //       (f) => f === `${path.parse(src).name}${path.parse(src).ext}`
+  //     );
+  //   },
+  // });
+};
+
+export default function templateInstaller(cli: CAC) {
+  return {
+    name: "templateInstaller",
+    setup: () => {
+      cli
+        .command("template", "快速创建CodeGenius基础项目")
+        .option("-n, --project-name <project-name>", "项目名称", {
+          default: `project-${randomUUID().slice(0, 8)}`,
+        })
+        .option("-f, --framework <framework>", "项目框架")
+        .action(async (options) => {
+          const { projectName, framework } = options;
+          await template({
+            projectName,
+            framework,
+          });
+        });
+    },
+  };
+}

src/setup.ts

@@ -10,6 +10,7 @@ import npmRunInstaller from "./command/npm-run";
 import npmRegistryInstaller from "./command/npm-registry";
 import eslintFixInstaller from "./command/eslint-fix";
 import prettierFormatInstaller from "./command/prettier-format";
+import templateInstaller from "./command/template";
 
 export function cmdInstaller(cli: CAC) {
   gitCommitInstaller(cli).setup();
@@ -19,8 +20,9 @@ export function cmdInstaller(cli: CAC) {
   npmDepCheckInstaller(cli).setup();
   npmRunInstaller(cli).setup();
   npmRegistryInstaller(cli).setup();
-  eslintFixInstaller(cli).setup;
+  eslintFixInstaller(cli).setup();
   prettierFormatInstaller(cli).setup();
   clearInstaller(cli).setup();
   createProjectInstaller(cli).setup();
+  templateInstaller(cli).setup();
 }

src/shared/config.ts

@@ -1,10 +1,13 @@
 import {
   CommitScope,
   CommitType,
+  Framework,
   KeyValue,
   ProjectSource,
 } from "@/shared/types";
 
+import { blue, green, yellow } from "kolorist";
+
 export const clearGlob = ["./dist/"];
 
 export const formatGlob = ["./src"];
@@ -142,3 +145,31 @@ export const projectSources: Array<ProjectSource> = [
     description: "创建由 Vite 驱动的 Vue2 项目(支持 IE11)",
   },
 ];
+
+export const FRAMEWORKS: Framework[] = [
+  {
+    name: "vue",
+    display: "Vue",
+    color: green,
+    variants: [
+      {
+        framework: "vue",
+        name: "vue",
+        display: "JavaScript",
+        color: yellow,
+      },
+      {
+        framework: "vue",
+        name: "vue-ts",
+        display: "TypeScript",
+        color: blue,
+      },
+    ],
+  },
+];
+
+export const TEMPLATES = FRAMEWORKS.map(
+  (f) => (f.variants && f.variants.map((v) => v.name)) || [f.name],
+).reduce((a, b) => a.concat(b), []);
+
+export const fileIgnore = ["package.json", "_gitignore"];

src/shared/index.ts

@@ -7,7 +7,7 @@ import type { Options } from "execa";
 import execa from "execa";
 import { green, lightYellow, lightGreen, lightRed } from "kolorist";
 
-import { ACTIVATION } from "@/shared/config";
+import { ACTIVATION, FRAMEWORKS, TEMPLATES } from "@/shared/config";
 
 export const execCommand = async (
   cmd: string,
@@ -159,3 +159,67 @@ export const getEveryFilesBySuffixes = async (
   }
   return getFiilesBySuffixes(files, suffix);
 };
+
+export function formatTargetDir(targetDir: string | undefined) {
+  return targetDir?.trim().replace(/\/+$/g, "");
+}
+
+export function isValidPackageName(projectName: string) {
+  return /^(?:@[a-z0-9-*~][a-z0-9-*._~]*\/)?[a-z0-9-~][a-z0-9-._~]*$/.test(
+    projectName,
+  );
+}
+
+export function toValidPackageName(projectName: string) {
+  return projectName
+    .trim()
+    .toLowerCase()
+    .replace(/\s+/g, "-")
+    .replace(/^[._]/, "")
+    .replace(/[^a-z0-9-~]+/g, "-");
+}
+
+export function isEmpty(path: string) {
+  const files = fs.readdirSync(path);
+  return files.length === 0 || (files.length === 1 && files[0] === ".git");
+}
+
+export function pkgFromUserAgent(userAgent: string | undefined) {
+  if (!userAgent) return undefined;
+  const pkgSpec = userAgent.split(" ")[0];
+  const pkgSpecArr = pkgSpec.split("/");
+  return {
+    name: pkgSpecArr[0],
+    version: pkgSpecArr[1],
+  };
+}
+
+export function emptyDir(dir: string) {
+  if (!fs.existsSync(dir)) {
+    return;
+  }
+  for (const file of fs.readdirSync(dir)) {
+    if (file === ".git") {
+      continue;
+    }
+    fs.rmSync(path.resolve(dir, file), { recursive: true, force: true });
+  }
+}
+
+export function isEmptyDir(projectName: string) {
+  const targetDir = path.join(process.cwd(), projectName);
+  return !fs.existsSync(targetDir) || isEmpty(targetDir);
+}
+
+export function isValidFramework(framework: string) {
+  return typeof framework === "string" && TEMPLATES.includes(framework);
+}
+
+export function getVariantByFramework(framework: string) {
+  return FRAMEWORKS.find((v) => v.name === framework)?.variants || [];
+}
+
+export function isValidVariant(framework: string) {
+  const variants = getVariantByFramework(framework);
+  return variants.length > 0;
+}

src/shared/types.ts

@@ -24,3 +24,25 @@ export interface ProjectSource {
   name: string;
   description: string;
 }
+
+export interface TemplateOptions {
+  projectName: string;
+  framework: string;
+}
+
+export type ColorFunc = (str: string | number) => string;
+
+export interface FrameworkVariant {
+  framework: string;
+  name: string;
+  display: string;
+  color: ColorFunc;
+  customCommand?: string;
+}
+
+export interface Framework {
+  name: string;
+  display: string;
+  color: ColorFunc;
+  variants: FrameworkVariant[];
+}