@component-hook/create-app 0.2.4 → 1.0.0

package/README.md

@@ -0,0 +1,82 @@
+# @component-hook/create-app
+
+Scaffolding a basic `typescript` project.
+
+> **Compatibility Note:**
+> Requires [Node.js](https://nodejs.org/en/) version 18+, 20+. However, some templates require a higher Node.js version to work, please upgrade if your package manager warns about it.
+
+<p>
+  <a href="https://npm-stat.com/charts.html?package=@component-hook/create-app">
+    <img src="https://img.shields.io/npm/dm/@component-hook/create-app.svg" alt="npm"/>
+  </a>
+  <a href="https://www.npmjs.com/package/@component-hook/create-app">
+    <img src="https://img.shields.io/npm/v/@component-hook/create-app.svg" alt="npm"/>
+  </a>
+</p>
+
+## Create Project
+
+```bash
+$ npm create @component-hook/app@latest
+
+# or use yarn
+$ yarn create @component-hook/app
+
+# or use pnpm
+$ pnpm create @component-hook/app
+```
+
+Then follow the prompts!
+
+You can also directly specify the project name and the template you want to use via additional command line options. For example, to scaffold a project, run:
+
+```bash
+$ npm create @component-hook/app@latest basic-app -- --template vue
+
+# yarn
+$ yarn create @component-hook/app basic-app --template vue
+
+# pnpm
+$ pnpm create @component-hook/app basic-app --template vue
+```
+
+Currently supported template presets include:
+
+- `vue`
+
+## Project Default Setup
+
+- [Vite](https://cn.vite.dev/)
+- [TypeScript](https://www.typescriptlang.org/)
+- [Axios](https://github.com/axios/axios)
+- [TailwindcSS](https://tailwindcss.com/)
+- [PostCSS](https://postcss.org/) w/ `postcss-nesting` plugin
+- [Cssnano](https://cssnano.github.io/cssnano/) for minimizing production CSS
+- [Postcss-pxtorem](https://www.npmjs.com/package/postcss-pxtorem) generates rem units from pixel units
+- [Vite-plugin-svg-icons](https://github.com/vbenjs/vite-plugin-svg-icons) generate svg sprite map
+- [Eslint](https://eslint.org/)
+  - [@component-hook/eslint-plugin](https://www.npmjs.com/package/@component-hook/eslint-plugin?activeTab=readme)
+- [Prettier](https://prettier.io/)
+- [Husky](https://www.npmjs.com/package/husky) to improves commits
+  - if encounter npx: command not found, can execute `ln -s $(which npx) /usr/local/bin/npx` in zsh
+  - [commitlint](https://commitlint.js.org/#/) checks if your commit messages meet the conventional commit format
+  - [lint-staged](https://github.com/okonet/lint-staged) filter files checked by pre commit lint
+- Alias `@` to `<project_root>/src`
+- Mock use [msw](https://mswjs.io/)
+  - `npx msw init ./public`
+- Unit test use [Vitest](https://vitest.dev/) + [Testing Library](https://testing-library.com/)
+  - [jsdom](https://www.npmjs.com/package/jsdom)
+  - [@vitest/coverage-v8](https://vitest.dev/guide/coverage.html)
+  - [@testing-library/jest-dom](https://testing-library.com/docs/ecosystem-jest-dom/)
+  - [@testing-library/user-event](https://testing-library.com/docs/ecosystem-user-event/)
+- E2E test use [playwright](https://playwright.dev/)
+- [Rollup-plugin-visualizer](https://github.com/btd/rollup-plugin-visualizer) visualize and analyze your Rollup bundle to see which modules are taking up space
+- Predefined and fully typed global variables:
+  - `VITE_APP_VERSION` is read from `package.json` version at build time
+  - `VITE_APP_BUILD_EPOCH` is populated as `new Date().getTime()` at build time
+- Github workflows (default)
+  - ci - on workflow call and dispatch
+  - deploy - on push main branch
+  - preview - on pull request
+- Gitlab CI (use `--gitlab` command create project)
+  - run tests - on branches, merge request and manual

package/bin/index.js

@@ -1,3 +1,3 @@
 #!/usr/bin/env node
 
-import '../dist/index.mjs';
+import '../dist/index.js';

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+
+export {  }

package/dist/index.js

@@ -0,0 +1,234 @@
+// src/index.ts
+import path2 from "node:path";
+import { fileURLToPath } from "node:url";
+import { readdir, readFile, writeFile } from "node:fs/promises";
+import minimist from "minimist";
+import colors2 from "picocolors";
+import { copy, ensureDirSync } from "fs-extra/esm";
+import artTemplate from "art-template";
+import ora from "ora";
+
+// src/prompts.ts
+import { existsSync as existsSync2 } from "node:fs";
+import prompts from "prompts";
+import colors from "picocolors";
+
+// src/utils.ts
+import path from "node:path";
+import { existsSync, readdirSync } from "node:fs";
+import { remove } from "fs-extra/esm";
+
+// src/config.ts
+var DEFAULT_PROJECT_NAME = "basic-project";
+var TEMPLATES = ["vue"];
+
+// src/utils.ts
+function formatTargetDir(targetDir) {
+  if (!targetDir) return targetDir;
+  targetDir = targetDir.trim();
+  if (targetDir[0] === "/") {
+    targetDir = targetDir.slice(1);
+  }
+  if (targetDir.at(-1) === "/") {
+    targetDir = targetDir.slice(0, -1);
+  }
+  return targetDir;
+}
+function getProjectName(targetDir) {
+  if (!targetDir) {
+    return DEFAULT_PROJECT_NAME;
+  }
+  return path.basename(path.resolve(targetDir));
+}
+function isValidPackageName(projectName) {
+  return /^(?:@[a-z\d\-*~][a-z\d\-*._~]*\/)?[a-z\d\-~][a-z\d\-._~]*$/.test(projectName);
+}
+function toValidPackageName(projectName) {
+  return projectName.trim().toLowerCase().replaceAll(/\s+/g, "-").replace(/^[._]/, "").replaceAll(/[^a-z\d\-~]+/g, "-");
+}
+function getPkgManagerInfo() {
+  const userAgent = process.env.npm_config_user_agent;
+  if (!userAgent) return;
+  const [pkgManager] = userAgent.split(" ");
+  const [name, version] = pkgManager.split("/");
+  return { name, version };
+}
+function isEmptyFolder(dir) {
+  const files = readdirSync(dir);
+  return files.length === 0 || files.length === 1 && files[0] === ".git";
+}
+function clearFolder(dir) {
+  if (!existsSync(dir)) return;
+  const files = readdirSync(dir).filter((file) => file !== ".git");
+  return Promise.all(files.map((file) => remove(path.resolve(dir, file))));
+}
+
+// src/prompts.ts
+function builtinTemplate(template) {
+  return template && TEMPLATES.includes(template);
+}
+function onCancel() {
+  throw new Error(`${colors.red("\u2716")} Operation cancelled`);
+}
+function styleTitle(title) {
+  return colors.bold(colors.magenta(title));
+}
+function operationPrompts({ targetDir, template }) {
+  const projectName = {
+    type: targetDir ? null : "text",
+    name: "projectName",
+    message: styleTitle("Project name:"),
+    initial: DEFAULT_PROJECT_NAME
+  };
+  const overwrite = {
+    type: (nameAnswer) => {
+      return existsSync2(nameAnswer) && !isEmptyFolder(nameAnswer) ? "select" : null;
+    },
+    name: "overwrite",
+    message: (nameAnswer) => {
+      const isCurrentDir = nameAnswer === ".";
+      const dir = isCurrentDir ? "current directory" : `Target directory "${targetDir}"`;
+      return styleTitle(`${dir} is not empty. Please choose how to proceed:`);
+    },
+    initial: 0,
+    choices: [
+      { title: "Cancel operation", value: "cancel" },
+      { title: "Remove existing files and continue", value: "overwrite" },
+      { title: "Ignore files and continue", value: "ignore" }
+    ]
+  };
+  const overwriteChecker = {
+    type: (overwriteAnswer) => {
+      if (overwriteAnswer === "cancel") onCancel();
+      return null;
+    },
+    name: "overwriteChecker"
+  };
+  const packageName = {
+    type: (_, { projectName: nameAnswer }) => {
+      return isValidPackageName(getProjectName(nameAnswer)) ? null : "text";
+    },
+    name: "projectName",
+    message: styleTitle("Package name:"),
+    initial: (_, { projectName: nameAnswer }) => toValidPackageName(getProjectName(nameAnswer)),
+    validate: (name) => {
+      return isValidPackageName(name) || "Invalid package.json name";
+    }
+  };
+  const framework = {
+    type: builtinTemplate(template) ? null : "select",
+    name: "framework",
+    message: template ? styleTitle(`${colors.red(template)} isn't a valid template. Please choose from below:`) : styleTitle("Select a framework:"),
+    initial: 0,
+    choices: [
+      { title: colors.green("Vue"), value: "vue" }
+      // { title: 'colors.blue('React'), value: 'react' },
+    ]
+  };
+  return prompts([projectName, overwrite, overwriteChecker, packageName, framework], { onCancel });
+}
+
+// src/index.ts
+var cwd = process.cwd();
+var argv = minimist(process.argv.slice(2), {
+  default: { gitlab: false, help: false },
+  alias: { t: "template", l: "gitlab", h: "help" },
+  string: ["_"]
+});
+var renameFiles = {
+  _gitignore: ".gitignore",
+  "_gitlab-ci.yml": ".gitlab-ci.yml"
+};
+var helpMessage = `
+Usage: create-component-hook [project name] [options]
+
+Create a new project in TypeScript.
+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
+  -h, --help  Display this help message
+
+Available templates:
+  ${colors2.green("vue")}
+`;
+async function copyTemplateFolder(root, templateDir, packageName) {
+  const isGitlab = argv.lab || argv.gitlab;
+  const [files, pkgJson] = await Promise.all([
+    readdir(templateDir),
+    readFile(path2.join(templateDir, "package.json"), "utf-8")
+  ]);
+  const filterFiles = files.filter((file) => {
+    const filterCi = isGitlab ? ".github" : ".gitlab";
+    const filterCiYml = isGitlab ? "" : "_gitlab-ci.yml";
+    return file !== "package.json" && file !== filterCi && file !== filterCiYml;
+  });
+  const pkg = JSON.parse(pkgJson);
+  const rewriteOrCopyFile = (file, content) => {
+    const targetPath = path2.join(root, renameFiles?.[file] ?? file);
+    if (content) {
+      return writeFile(targetPath, content);
+    }
+    const templatePath = path2.join(templateDir, file);
+    if (file.endsWith(".art")) {
+      const name = packageName.split("-").map((str) => `${str[0].toUpperCase()}${str.slice(1)}`).join(" ");
+      const renderedResult = artTemplate(templatePath, { projectName: name });
+      return writeFile(targetPath.replace(".art", ""), renderedResult);
+    }
+    return copy(templatePath, targetPath);
+  };
+  pkg.name = packageName;
+  return Promise.all([
+    ...filterFiles.map((file) => rewriteOrCopyFile(file)),
+    rewriteOrCopyFile("package.json", `${JSON.stringify(pkg, null, 2)}
+`),
+    new Promise((resolve) => setTimeout(resolve, 300))
+  ]);
+}
+async function createApp() {
+  const help = argv.h || argv.help;
+  if (help) {
+    console.log(helpMessage);
+    return;
+  }
+  const targetDir = formatTargetDir(argv._[0]);
+  const template = argv.t || argv.template;
+  const result = await operationPrompts({ targetDir, template });
+  const packageName = result.packageName || getProjectName(result.projectName);
+  const framework = result.framework || template;
+  const root = path2.join(cwd, result.projectName);
+  const pkgManagerInfo = getPkgManagerInfo();
+  const pkgManager = pkgManagerInfo?.name ?? "npm";
+  const spinner = ora();
+  console.log();
+  spinner.start(colors2.yellow(`Scaffolding project...`));
+  if (result.overwrite === "overwrite") {
+    await clearFolder(root);
+  } else {
+    ensureDirSync(root);
+  }
+  const templateDir = path2.resolve(fileURLToPath(import.meta.url), "../..", `template-${framework}`);
+  copyTemplateFolder(root, templateDir, packageName).then(() => {
+    const cdProjectName = path2.relative(cwd, root);
+    const formattedCdProjectName = cdProjectName.includes(" ") ? `"${cdProjectName}"` : cdProjectName;
+    spinner.succeed(`${colors2.green("Scaffolded project in")} ${root}`);
+    console.log(`
+${colors2.green("Done. Now run:")}
+`);
+    console.log(colors2.cyan(`  cd ${formattedCdProjectName}`));
+    if (pkgManager === "yarn") {
+      console.log(colors2.cyan(`  yarn`));
+      console.log(colors2.cyan(`  yarn dev`));
+    } else {
+      console.log(colors2.cyan(`  ${pkgManager} install`));
+      console.log(colors2.cyan(`  ${pkgManager} run dev`));
+    }
+    console.log();
+  }).catch(() => {
+    spinner.fail(colors2.red("Failed to scaffold project"));
+  });
+}
+createApp().catch((error) => {
+  console.error(colors2.red(error.message));
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@component-hook/create-app",
-  "version": "0.2.4",
+  "version": "1.0.0",
   "description": "Scaffolding a basic typescript project",
   "type": "module",
   "license": "MIT",
@@ -25,22 +25,22 @@
     "url": "https://github.com/tzuyi0817/component-hook/issues"
   },
   "homepage": "https://github.com/tzuyi0817/component-hook/tree/master/packages/create-app#readme",
-  "devDependencies": {
-    "@types/fs-extra": "^11.0.4",
-    "@types/minimist": "^1.2.5",
-    "@types/prompts": "^2.4.9",
+  "dependencies": {
     "art-template": "^4.13.2",
-    "cross-spawn": "^7.0.6",
-    "fs-extra": "^11.2.0",
+    "fs-extra": "^11.3.0",
     "minimist": "^1.2.8",
     "ora": "^8.1.1",
     "picocolors": "^1.1.1",
-    "prompts": "^2.4.2",
-    "unbuild": "^3.2.0"
+    "prompts": "^2.4.2"
+  },
+  "devDependencies": {
+    "@types/fs-extra": "^11.0.4",
+    "@types/minimist": "^1.2.5",
+    "@types/prompts": "^2.4.9"
   },
   "scripts": {
-    "dev": "unbuild --stub",
-    "build": "unbuild",
+    "dev": "tsup --watch",
+    "build": "tsup",
     "typecheck": "tsc --noEmit"
   }
 }

package/template-vue/package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "license": "MIT",
   "type": "module",
-  "packageManager": "pnpm@9.15.3",
+  "packageManager": "pnpm@9.15.4",
   "scripts": {
     "dev": "vite",
     "dev:mock": "MOCK=true vite",
@@ -19,30 +19,30 @@
   },
   "dependencies": {
     "axios": "^1.7.9",
-    "pinia": "^2.3.0",
+    "pinia": "^2.3.1",
     "pinia-plugin-persistedstate": "^4.2.0",
     "vue": "^3.5.13",
     "vue-i18n": "^11.0.1",
     "vue-router": "^4.5.0"
   },
   "devDependencies": {
-    "@component-hook/eslint-plugin": "0.2.4",
+    "@component-hook/eslint-plugin": "0.2.5",
     "@intlify/unplugin-vue-i18n": "^6.0.3",
     "@playwright/test": "^1.49.1",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/user-event": "^14.5.2",
+    "@testing-library/user-event": "^14.6.1",
     "@testing-library/vue": "^8.1.0",
     "@tsconfig/node22": "22.0.0",
-    "@types/node": "^22.10.5",
+    "@types/node": "^22.10.7",
     "@vitejs/plugin-vue": "^5.2.1",
     "@vitest/coverage-v8": "^2.1.8",
     "@vue/tsconfig": "^0.7.0",
     "autoprefixer": "^10.4.20",
     "cssnano": "^7.0.6",
-    "eslint": "^9.17.0",
+    "eslint": "^9.18.0",
     "jsdom": "^25.0.1",
     "msw": "^2.7.0",
-    "postcss": "^8.4.49",
+    "postcss": "^8.5.1",
     "postcss-import": "^16.1.0",
     "postcss-nesting": "^13.0.1",
     "postcss-pxtorem": "^6.1.0",
@@ -51,7 +51,7 @@
     "tailwindcss": "^3.4.17",
     "typescript": "^5.7.3",
     "unplugin-vue-components": "^0.28.0",
-    "vite": "^5.4.11",
+    "vite": "^5.4.14",
     "vite-plugin-svg-icons": "^2.0.1",
     "vitest": "^2.1.8",
     "vue-tsc": "^2.2.0"
@@ -68,6 +68,6 @@
     "@commitlint/cli": "^19.6.1",
     "@commitlint/config-conventional": "^19.6.0",
     "husky": "^9.1.7",
-    "lint-staged": "^15.3.0"
+    "lint-staged": "^15.4.1"
   }
 }