create-wucaishi-cpn 0.1.0

package/README.md

@@ -0,0 +1,49 @@
+# create-wucaishi-cpn
+
+一个用来生成 `Vite + React + TypeScript` 组件库模板项目的 npm CLI。
+
+## 使用方式
+
+本地调试：
+
+```bash
+node ./bin/create-wucaishi-cpn.js my-lib
+```
+
+发布到 npm 后：
+
+```bash
+npm create wucaishi-cpn@latest my-lib
+```
+
+或者：
+
+```bash
+npx create-wucaishi-cpn@latest my-lib
+```
+
+## 生成内容
+
+执行后会生成一个可直接开发组件库的模板项目，内置：
+
+- `Vite` 库模式构建
+- `React + TypeScript`
+- `vite-plugin-dts` 类型声明输出
+- 一个示例 `Button` 组件
+- 一个本地预览页面，方便 `npm run dev`
+
+## 本地验证
+
+```bash
+npm run smoke
+npm run pack:check
+```
+
+## 后续建议
+
+如果你想继续，我下一步还可以帮你补：
+
+- 交互式提问（比如选择包管理器、是否安装依赖）
+- `tsup` / `rollup` 版本的模板
+- `Storybook` 模板
+- 自动初始化 git 仓库和首个提交

package/bin/create-wucaishi-cpn.js

@@ -0,0 +1,8 @@
+#!/usr/bin/env node
+
+import { run } from "../src/index.js";
+
+run(process.argv.slice(2)).catch((error) => {
+  console.error(`\n[create-wucaishi-cpn] ${error.message}`);
+  process.exitCode = 1;
+});

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "create-wucaishi-cpn",
+  "version": "0.1.0",
+  "description": "Scaffold a Vite + React component library project.",
+  "type": "module",
+  "bin": {
+    "create-wucaishi-cpn": "./bin/create-wucaishi-cpn.js"
+  },
+  "exports": {
+    ".": "./src/index.js"
+  },
+  "files": [
+    "bin",
+    "src",
+    "templates/vite-react-lib/_gitignore",
+    "templates/vite-react-lib/index.html",
+    "templates/vite-react-lib/package.json",
+    "templates/vite-react-lib/script.js",
+    "templates/vite-react-lib/src",
+    "templates/vite-react-lib/tsconfig.json",
+    "templates/vite-react-lib/vite.config.ts",
+    "README.md"
+  ],
+  "scripts": {
+    "pack:check": "npm pack --dry-run"
+  },
+  "keywords": [
+    "vite",
+    "react",
+    "component-library",
+    "scaffold",
+    "cli",
+    "template"
+  ],
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "license": "MIT"
+}

package/src/index.js

@@ -0,0 +1,347 @@
+import { spawn } from "node:child_process";
+import { promises as fs } from "node:fs";
+import path from "node:path";
+import process from "node:process";
+import { stdin as input, stdout as output } from "node:process";
+import { fileURLToPath } from "node:url";
+import readline from "node:readline/promises";
+
+const CLI_VERSION = "0.1.0";
+const TEMPLATE_NAME = "vite-react-lib";
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const TEMPLATE_DIR = path.resolve(__dirname, "../templates", TEMPLATE_NAME);
+const DOTFILE_ALIASES = new Map([["_gitignore", ".gitignore"]]);
+const SKIPPED_TEMPLATE_ENTRIES = new Set([
+  ".DS_Store",
+  ".git",
+  ".turbo",
+  ".vite",
+  "bun.lock",
+  "bun.lockb",
+  "dist",
+  "node_modules",
+  "package-lock.json",
+  "pnpm-lock.yaml",
+  "yarn.lock",
+]);
+
+export async function run(rawArgs = []) {
+  const options = parseArgs(rawArgs);
+
+  if (options.help) {
+    printHelp();
+    return;
+  }
+
+  if (options.version) {
+    console.log(CLI_VERSION);
+    return;
+  }
+
+  const requestedTarget = options.targetDir ?? (await promptProjectName());
+
+  if (!requestedTarget) {
+    throw new Error("Project name is required.");
+  }
+
+  const cwd = process.cwd();
+  const targetDir = path.resolve(cwd, requestedTarget);
+  const projectDirName = path.basename(targetDir);
+  const packageName = toValidPackageName(projectDirName);
+
+  if (!packageName || !isValidPackageName(packageName)) {
+    throw new Error(`Unable to derive a valid package name from "${projectDirName}".`);
+  }
+
+  const directoryState = await getDirectoryState(targetDir);
+  if (directoryState.exists && !directoryState.empty) {
+    if (!options.force) {
+      const shouldOverwrite = await confirmOverwrite(requestedTarget);
+      if (!shouldOverwrite) {
+        console.log("Canceled.");
+        return;
+      }
+    }
+
+    await fs.rm(targetDir, { recursive: true, force: true });
+  }
+
+  await fs.mkdir(targetDir, { recursive: true });
+
+  const replacements = {
+    "__PROJECT_NAME__": projectDirName,
+    "__PACKAGE_NAME__": packageName,
+    "__LIBRARY_NAME__": toPascalCase(projectDirName),
+  };
+
+  await copyTemplate(TEMPLATE_DIR, targetDir, replacements);
+
+  console.log(`\nScaffolded "${projectDirName}" in ${path.relative(cwd, targetDir) || "."}.`);
+
+  if (packageName !== projectDirName) {
+    console.log(`Package name normalized to "${packageName}".`);
+  }
+
+  if (options.install) {
+    await installDependencies(targetDir, options.packageManager);
+    printNextSteps(requestedTarget, options.packageManager, true);
+    return;
+  }
+
+  printNextSteps(requestedTarget, options.packageManager, false);
+}
+
+function parseArgs(rawArgs) {
+  const options = {
+    force: false,
+    help: false,
+    install: false,
+    packageManager: detectPackageManager(),
+    targetDir: undefined,
+    version: false,
+  };
+
+  for (let index = 0; index < rawArgs.length; index += 1) {
+    const arg = rawArgs[index];
+
+    if (arg === "--force" || arg === "-f") {
+      options.force = true;
+      continue;
+    }
+
+    if (arg === "--install") {
+      options.install = true;
+      continue;
+    }
+
+    if (arg === "--help" || arg === "-h") {
+      options.help = true;
+      continue;
+    }
+
+    if (arg === "--version" || arg === "-v") {
+      options.version = true;
+      continue;
+    }
+
+    if (arg === "--package-manager" || arg === "--pm") {
+      const packageManager = rawArgs[index + 1];
+
+      if (!packageManager) {
+        throw new Error("Missing value for --package-manager.");
+      }
+
+      options.packageManager = packageManager;
+      index += 1;
+      continue;
+    }
+
+    if (arg.startsWith("-")) {
+      throw new Error(`Unknown option: ${arg}`);
+    }
+
+    if (!options.targetDir) {
+      options.targetDir = arg;
+      continue;
+    }
+
+    throw new Error(`Unexpected argument: ${arg}`);
+  }
+
+  return options;
+}
+
+function printHelp() {
+  console.log(
+    [
+      "create-wucaishi-cpn",
+      "",
+      "Usage:",
+      "  create-wucaishi-cpn <project-name> [options]",
+      "",
+      "Options:",
+      "  -f, --force                  Overwrite the target directory if it exists",
+      "      --install                Install dependencies after scaffolding",
+      "      --pm, --package-manager  Choose npm, pnpm, yarn or bun",
+      "  -h, --help                   Show help",
+      "  -v, --version                Show CLI version",
+    ].join("\n"),
+  );
+}
+
+async function promptProjectName() {
+  if (!process.stdin.isTTY || !process.stdout.isTTY) {
+    return undefined;
+  }
+
+  const rl = readline.createInterface({ input, output });
+
+  try {
+    const answer = await rl.question("Project name: ");
+    return answer.trim() || undefined;
+  } finally {
+    rl.close();
+  }
+}
+
+async function getDirectoryState(targetDir) {
+  try {
+    const stat = await fs.stat(targetDir);
+
+    if (!stat.isDirectory()) {
+      throw new Error(`Target path "${targetDir}" exists and is not a directory.`);
+    }
+
+    const entries = await fs.readdir(targetDir);
+    return { empty: entries.length === 0, exists: true };
+  } catch (error) {
+    if (error.code === "ENOENT") {
+      return { empty: true, exists: false };
+    }
+
+    throw error;
+  }
+}
+
+async function confirmOverwrite(targetDir) {
+  if (!process.stdin.isTTY || !process.stdout.isTTY) {
+    throw new Error(
+      `Target directory "${targetDir}" is not empty. Re-run with --force to overwrite it.`,
+    );
+  }
+
+  const rl = readline.createInterface({ input, output });
+
+  try {
+    const answer = await rl.question(`"${targetDir}" is not empty. Overwrite it? (y/N) `);
+    return /^y(es)?$/i.test(answer.trim());
+  } finally {
+    rl.close();
+  }
+}
+
+async function copyTemplate(sourceDir, targetDir, replacements) {
+  const entries = await fs.readdir(sourceDir, { withFileTypes: true });
+
+  for (const entry of entries) {
+    if (shouldSkipTemplateEntry(entry)) {
+      continue;
+    }
+
+    const sourcePath = path.join(sourceDir, entry.name);
+    const outputName = DOTFILE_ALIASES.get(entry.name) ?? entry.name;
+    const targetPath = path.join(targetDir, outputName);
+
+    if (entry.isDirectory()) {
+      await fs.mkdir(targetPath, { recursive: true });
+      await copyTemplate(sourcePath, targetPath, replacements);
+      continue;
+    }
+
+    const fileContents = await fs.readFile(sourcePath, "utf8");
+    const renderedContents = renderTemplate(fileContents, replacements);
+    await fs.writeFile(targetPath, renderedContents, "utf8");
+  }
+}
+
+function shouldSkipTemplateEntry(entry) {
+  if (SKIPPED_TEMPLATE_ENTRIES.has(entry.name)) {
+    return true;
+  }
+
+  return entry.isSymbolicLink();
+}
+
+function renderTemplate(template, replacements) {
+  return Object.entries(replacements).reduce((output, [token, value]) => {
+    return output.split(token).join(value);
+  }, template);
+}
+
+async function installDependencies(targetDir, packageManager) {
+  console.log(`\nInstalling dependencies with ${packageManager}...`);
+
+  const args = packageManager === "yarn" ? [] : ["install"];
+
+  await new Promise((resolve, reject) => {
+    const child = spawn(packageManager, args, {
+      cwd: targetDir,
+      shell: process.platform === "win32",
+      stdio: "inherit",
+    });
+
+    child.on("close", (code) => {
+      if (code === 0) {
+        resolve();
+        return;
+      }
+
+      reject(new Error(`${packageManager} exited with code ${code}.`));
+    });
+
+    child.on("error", reject);
+  });
+}
+
+function detectPackageManager() {
+  const userAgent = process.env.npm_config_user_agent ?? "";
+
+  if (userAgent.startsWith("pnpm")) {
+    return "pnpm";
+  }
+
+  if (userAgent.startsWith("yarn")) {
+    return "yarn";
+  }
+
+  if (userAgent.startsWith("bun")) {
+    return "bun";
+  }
+
+  return "npm";
+}
+
+function printNextSteps(targetDir, packageManager, alreadyInstalled) {
+  const steps = [];
+
+  if (targetDir !== ".") {
+    steps.push(`cd ${targetDir}`);
+  }
+
+  if (!alreadyInstalled) {
+    steps.push(packageManager === "yarn" ? "yarn" : `${packageManager} install`);
+  }
+
+  steps.push(`${packageManager} run dev`);
+  steps.push(`${packageManager} run build`);
+
+  console.log("\nNext steps:");
+  for (const step of steps) {
+    console.log(`  ${step}`);
+  }
+}
+
+function isValidPackageName(value) {
+  return /^(?:@[a-z0-9-~][a-z0-9-._~]*\/)?[a-z0-9-~][a-z0-9-._~]*$/.test(value);
+}
+
+function toValidPackageName(projectName) {
+  return projectName
+    .trim()
+    .toLowerCase()
+    .replace(/\s+/g, "-")
+    .replace(/^[._]+/, "")
+    .replace(/[^a-z0-9-._~]+/g, "-")
+    .replace(/-+/g, "-")
+    .replace(/^-|-$/g, "");
+}
+
+function toPascalCase(value) {
+  return value
+    .replace(/[^a-zA-Z0-9]+/g, " ")
+    .split(" ")
+    .filter(Boolean)
+    .map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1))
+    .join("");
+}

package/templates/vite-react-lib/_gitignore

@@ -0,0 +1,3 @@
+node_modules
+dist
+.DS_Store

package/templates/vite-react-lib/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>test demo</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/demo/main.tsx"></script>
+  </body>
+</html>

package/templates/vite-react-lib/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "__PACKAGE_NAME__",
+  "version": "0.0.1",
+  "private": false,
+  "type": "module",
+  "main": "./dist/index.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "typecheck": "tsc --noEmit",
+    "build": "npm run typecheck && vite build",
+    "preview": "vite preview"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "terser": "^5.31.0",
+    "typescript": "^5.5.4",
+    "vite": "^5.4.10"
+  },
+  "dependencies": {
+    "styled-components": "^6.4.1"
+  }
+}

package/templates/vite-react-lib/src/demo/main.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+
+// demo
+function Demo() {
+  return <div></div>;
+}
+
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+  <React.StrictMode>
+    <Demo />
+  </React.StrictMode>,
+);

package/templates/vite-react-lib/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/templates/vite-react-lib/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src"]
+}

package/templates/vite-react-lib/vite.config.ts

@@ -0,0 +1,28 @@
+import { resolve, dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+export default defineConfig({
+  plugins: [react()],
+  build: {
+    emptyOutDir: true,
+    minify: "terser",
+    lib: {
+      entry: resolve(__dirname, "src/index.ts"),
+      fileName: () => "index.js",
+      formats: ["es"],
+      name: "__LIBRARY_NAME__",
+    },
+    rollupOptions: {
+      external: ["react", "react/jsx-runtime", "react-dom"],
+      output: {
+        inlineDynamicImports: true,
+      },
+    },
+  },
+});