@component-hook/create-app 1.4.0 → 1.4.1

package/dist/index.mjs

@@ -14,6 +14,11 @@ const DEFAULT_PROJECT_NAME = "basic-project";
 const TEMPLATES = ["vue", "react"];
 const GITHUB_ACTIONS = "GitHub Actions";
 const GITLAB_CI = "GitLab CI";
+const CI = [
+	"github-actions",
+	"gitlab-ci",
+	"none"
+];
 
 //#endregion
 //#region src/utils.ts
@@ -56,19 +61,30 @@ function clearFolder(dir) {
 	const files = readdirSync(dir).filter((file) => file !== ".git");
 	return Promise.all(files.map((file) => remove(path.resolve(dir, file))));
 }
+function getCiArtContent(ci = "") {
+	const ciName = {
+		"github-actions": GITHUB_ACTIONS,
+		"gitlab-ci": GITLAB_CI
+	}[ci];
+	if (!ciName) return "";
+	return `- **CI/CD**: Integrates \`${ciName}\` for automated testing and deployment.`;
+}
 
 //#endregion
 //#region src/prompts.ts
 function builtinTemplate(template) {
 	return template && TEMPLATES.includes(template);
 }
+function checkCi(ci) {
+	return ci && CI.includes(ci);
+}
 function onCancel() {
 	throw new Error(`${colors.red("✖")} Operation cancelled`);
 }
 function styleTitle(title) {
 	return colors.bold(colors.magenta(title));
 }
-function operationPrompts({ targetDir, template }) {
+function operationPrompts({ targetDir, template, ci }) {
 	return prompts([
 		{
 			type: targetDir ? null : "text",
@@ -78,11 +94,13 @@ function operationPrompts({ targetDir, template }) {
 		},
 		{
 			type: (nameAnswer) => {
-				return existsSync(nameAnswer) && !isEmptyFolder(nameAnswer) ? "select" : null;
+				const dir = nameAnswer ?? targetDir;
+				return existsSync(dir) && !isEmptyFolder(dir) ? "select" : null;
 			},
 			name: "overwrite",
 			message: (nameAnswer) => {
-				return styleTitle(`${nameAnswer === "." ? "current directory" : `Target directory "${targetDir}"`} is not empty. Please choose how to proceed:`);
+				const dirName = nameAnswer ?? targetDir;
+				return styleTitle(`${dirName === "." ? "current directory" : `Target directory "${dirName}"`} is not empty. Please choose how to proceed:`);
 			},
 			initial: 0,
 			choices: [
@@ -109,11 +127,13 @@ function operationPrompts({ targetDir, template }) {
 		},
 		{
 			type: (_, { projectName: nameAnswer }) => {
-				return isValidPackageName(getProjectName(nameAnswer)) ? null : "text";
+				return isValidPackageName(getProjectName(nameAnswer ?? targetDir)) ? null : "text";
 			},
 			name: "packageName",
 			message: styleTitle("Package name:"),
-			initial: (_, { projectName: nameAnswer }) => toValidPackageName(getProjectName(nameAnswer)),
+			initial: (_, { projectName: nameAnswer }) => {
+				return toValidPackageName(getProjectName(nameAnswer ?? targetDir));
+			},
 			validate: (name) => {
 				return isValidPackageName(name) || "Invalid package.json name";
 			}
@@ -130,6 +150,26 @@ function operationPrompts({ targetDir, template }) {
 				title: colors.blue("React"),
 				value: "react"
 			}]
+		},
+		{
+			type: checkCi(ci) ? null : "select",
+			name: "ci",
+			message: ci ? styleTitle(`${colors.red(ci)} isn't a valid CI/CD. Please choose from below:`) : styleTitle("Choose CI/CD:"),
+			choices: [
+				{
+					title: "GitHub Actions",
+					value: "github-actions"
+				},
+				{
+					title: "GitLab CI",
+					value: "gitlab-ci"
+				},
+				{
+					title: "None",
+					value: "none"
+				}
+			],
+			initial: 0
 		}
 	], { onCancel });
 }
@@ -138,10 +178,7 @@ function operationPrompts({ targetDir, template }) {
 //#region src/index.ts
 const cwd = process.cwd();
 const argv = minimist(process.argv.slice(2), {
-	default: {
-		gitlab: false,
-		help: false
-	},
+	default: { help: false },
 	alias: {
 		t: "template",
 		l: "gitlab",
@@ -153,6 +190,15 @@ const renameFiles = {
 	_gitignore: ".gitignore",
 	"_gitlab-ci.yml": ".gitlab-ci.yml"
 };
+const ciFilters = {
+	"github-actions": [".gitlab", "_gitlab-ci.yml"],
+	"gitlab-ci": [".github"],
+	none: [
+		".github",
+		".gitlab",
+		"_gitlab-ci.yml"
+	]
+};
 const helpMessage = `
 Usage: create-component-hook [project name] [options]
 
@@ -161,7 +207,7 @@ With no arguments, start the CLI in interactive mode.
 
 Options:
   -t, --template [name]  Choose a framework template
-  -l, --gitlab  Use Gitlab CI/CD, default is Github CI/CD
+  -c, --ci [name]  Choose CI/CD (options: github-actions, gitlab-ci, none). Defaults to "none".
   -h, --help  Display this help message
 
 Available templates:
@@ -175,11 +221,10 @@ async function writePackageJson(root, dir, packageName) {
 	pkg.name = packageName;
 	return writeFile(targetPath, `${JSON.stringify(pkg, null, 2)}\n`);
 }
-async function copyFolder(root, dir, packageName) {
-	const isGitlab = argv.l || argv.gitlab;
-	const filterFiles = (await readdir(dir)).filter((file) => {
-		return file !== "package.json" && file !== (isGitlab ? ".github" : ".gitlab") && file !== (isGitlab ? "" : "_gitlab-ci.yml");
-	});
+async function copyFolder(root, dir, packageName, ci) {
+	const files = await readdir(dir);
+	const ignoreFiles = new Set(["package.json", ...ciFilters[ci] || ciFilters.none]);
+	const filterFiles = files.filter((file) => !ignoreFiles.has(file));
 	const rewriteOrCopyFile = (file) => {
 		const targetPath = path.join(root, renameFiles?.[file] ?? file);
 		const templatePath = path.join(dir, file);
@@ -188,7 +233,7 @@ async function copyFolder(root, dir, packageName) {
 			const replacedPath = targetPath.replace(".art", "");
 			const renderedResult = artTemplate(templatePath, {
 				projectName: name,
-				gitRepository: isGitlab ? GITLAB_CI : GITHUB_ACTIONS
+				ciContent: getCiArtContent(ci)
 			});
 			ensureDirSync(path.dirname(replacedPath));
 			return writeFile(replacedPath, renderedResult);
@@ -207,13 +252,17 @@ async function createApp() {
 	}
 	const targetDir = formatTargetDir(argv._[0]);
 	const template = argv.t || argv.template;
+	const ci = argv.c || argv.ci;
 	const result = await operationPrompts({
 		targetDir,
-		template
+		template,
+		ci
 	});
-	const packageName = result.packageName || getProjectName(result.projectName);
+	const projectName = result.projectName ?? targetDir;
+	const packageName = result.packageName || getProjectName(projectName);
 	const framework = result.framework || template;
-	const root = path.join(cwd, result.projectName);
+	const ciName = result.ci || ci;
+	const root = path.join(cwd, projectName);
 	const pkgManager = getPkgManagerInfo()?.name ?? "npm";
 	const spinner = ora();
 	console.log();
@@ -224,14 +273,14 @@ async function createApp() {
 	const sharedDir = path.resolve(filePath, "../..", "template-shared");
 	const templateDir = path.resolve(filePath, "../..", `template-${framework}`);
 	Promise.all([
-		copyFolder(root, sharedDir, packageName),
-		copyFolder(root, templateDir, packageName),
+		copyFolder(root, sharedDir, packageName, ciName),
+		copyFolder(root, templateDir, packageName, ciName),
 		writePackageJson(root, templateDir, packageName),
 		new Promise((resolve) => setTimeout(resolve, 300))
 	]).then(() => {
 		const cdProjectName = path.relative(cwd, root);
 		const formattedCdProjectName = cdProjectName.includes(" ") ? `"${cdProjectName}"` : cdProjectName;
-		spinner.succeed(`${colors.green("Scaffolded project in")} ${root}`);
+		spinner.succeed(`${colors.green("Scaffolded project in")} ${colors.yellow(root)}`);
 		console.log(`\n${colors.green("Done. Now run:")}\n`);
 		console.log(colors.cyan(`  cd ${formattedCdProjectName}`));
 		if (pkgManager === "yarn") {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@component-hook/create-app",
   "type": "module",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "Scaffolding a basic typescript project",
   "author": "Tzuyi",
   "license": "MIT",

package/template-react/README.md.art

@@ -9,7 +9,7 @@ This project is built with [react](https://react.dev/) + [vite](https://vite.dev
 - **Code Quality**: Enforces standards with [eslint](https://eslint.org/) and [prettier](https://prettier.io/), with [husky](https://www.npmjs.com/package/husky), [commitlint](https://commitlint.js.org/#/), and [lint-staged](https://github.com/okonet/lint-staged) for commit validation.
 - **Testing**: Uses [vitest](https://vitest.dev/) + [testing-library](https://testing-library.com/) for unit testing and [playwright](https://playwright.dev/) for E2E testing.
 - **Optimization**: Compresses CSS with [cssnano](https://cssnano.github.io/cssnano/), converts units with [postcss-pxtorem](https://www.npmjs.com/package/postcss-pxtorem), convert modern CSS into something most browsers can understand with [postcss-preset-env](https://www.npmjs.com/package/postcss-preset-env), and analyzes assets with [rollup-plugin-visualizer](https://github.com/btd/rollup-plugin-visualizer).
-- **CI/CD**: Integrates `{{gitRepository}}` for automated testing and deployment.
+{{ciContent}}
 
 ## Code Features / Opinions
 

package/template-vue/README.md.art

@@ -9,7 +9,7 @@ This project is built with [vue3](https://vuejs.org/) + [vite](https://vite.dev/
 - **Code Quality**: Enforces standards with [eslint](https://eslint.org/) and [prettier](https://prettier.io/), with [husky](https://www.npmjs.com/package/husky), [commitlint](https://commitlint.js.org/#/), and [lint-staged](https://github.com/okonet/lint-staged) for commit validation.
 - **Testing**: Uses [vitest](https://vitest.dev/) + [testing-library](https://testing-library.com/) for unit testing and [playwright](https://playwright.dev/) for E2E testing.
 - **Optimization**: Compresses CSS with [cssnano](https://cssnano.github.io/cssnano/), converts units with [postcss-pxtorem](https://www.npmjs.com/package/postcss-pxtorem), convert modern CSS into something most browsers can understand with [postcss-preset-env](https://www.npmjs.com/package/postcss-preset-env), and analyzes assets with [rollup-plugin-visualizer](https://github.com/btd/rollup-plugin-visualizer).
-- **CI/CD**: Integrates `{{gitRepository}}` for automated testing and deployment.
+{{ciContent}}
 
 ## Code Features / Opinions