create-bubbles 0.1.18 → 0.1.19

package/dist/index.js

@@ -1,4 +1,36 @@
-import e from"node:fs";import t from"node:path";import{fileURLToPath as n}from"node:url";import*as r from"@clack/prompts";import i from"cross-spawn";import a from"gradient-string";import o from"mri";const s={vue:a([`#42B883`,`#42B883`]),react:a([`#087EA4`,`#087EA4`]),taro:a([`#0000C2`,`#fff`]),nextjs:a([`#000`,`#fff`]),others:a([`#8B5CF6`,`#A855F7`])},c=o(process.argv.slice(2),{alias:{h:`help`,t:`template`},boolean:[`help`,`overwrite`],string:[`template`]}),l=process.cwd(),u=`\
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import * as prompts from "@clack/prompts";
+import spawn from "cross-spawn";
+import gradient from "gradient-string";
+import mri from "mri";
+
+//#region src/index.ts
+const colorMap = {
+	vue: gradient(["#42B883", "#42B883"]),
+	react: gradient(["#087EA4", "#087EA4"]),
+	taro: gradient(["#0000C2", "#fff"]),
+	nextjs: gradient(["#000", "#fff"]),
+	others: gradient(["#8B5CF6", "#A855F7"])
+};
+/**
+* process.argv 是 node index.js 前两个参数
+* 第一个参数是 node 可执行文件的路径
+* 第二个参数是当前执行的脚本文件的路径
+* 虽然最终使用的是 pnpm create bubbles 但最后都会指向bin 执行 node index.js
+*/
+const argv = mri(process.argv.slice(2), {
+	alias: {
+		h: "help",
+		t: "template"
+	},
+	boolean: ["help", "overwrite"],
+	string: ["template"]
+});
+/** 执行命令的绝对路径 代指执行命令的地方 */
+const cwd = process.cwd();
+const helpMessage = `\
 Usage: create-bubbles [OPTION]... [DIRECTORY]
 
 Create a new Bubbles project in JavaScript or TypeScript.
@@ -8,13 +40,376 @@ Options:
   -t, --template NAME        use a specific template
 
 Available templates:
-${s.vue(`vue-vite-eslint             vue`)}
-${s.react(`react-rsbuild-biome        react`)}
-${s.react(`vp-react                   react`)}
-${s.react(`vp-react-shadcn            react`)}
-${s.react(`vp-monorepo-react-nestjs   react`)}
-${s.taro(`taro-vue-eslint            taro`)}
-${s.nextjs(`nextjs-vinext-eslint      nextjs`)}`,d=e=>e.trim().replace(/\/+$/g,``),f=e=>{if(!e)return;let t=e.split(` `)[0].split(`/`);return{name:t[0],version:t[1]}},p=t=>{let n=e.readdirSync(t);return n.length===0||n.length===1&&n[0]===`.git`},m=async n=>{await Promise.all(e.readdirSync(n).filter(e=>e!==`.git`).map(r=>e.promises.rm(t.resolve(n,r),{recursive:!0,force:!0})))},h=e=>/^(?:@[a-z\d\-*~][a-z\d\-*._~]*\/)?[a-z\d\-~][a-z\d\-._~]*$/.test(e),g=e=>e.trim().toLowerCase().replace(/\s+/g,`-`).replace(/^[._]/,``).replace(/[^a-z\d\-~]+g/,`-`),_=[{name:`vue`,display:`Vue`,color:s.vue,variants:[{name:`vue-vite-eslint`,display:`vite + eslint`,color:s.vue}]},{name:`react`,display:`React`,color:s.react,variants:[{name:`react-rsbuild-biome`,display:`rsbuild-biome`,color:s.react},{name:`vp-react`,display:`vp-react`,color:s.react},{name:`vp-react-shadcn`,display:`vp-react-shadcn`,color:s.react},{name:`vp-monorepo-react-nestjs`,display:`vp-monorepo-react-nestjs`,color:s.react}]},{name:`taro`,display:`Taro`,color:s.taro,variants:[{name:`taro-vue-eslint`,display:`taro-vue + eslint`,color:s.taro},{name:`taro-react-oxc`,display:`taro-react + oxc`,color:s.taro}]},{name:`nextjs`,display:`NextJS`,color:s.nextjs,variants:[{name:`nextjs-vinext-eslint`,display:`nextjs + vinext + eslint`,color:s.nextjs}]},{name:`others`,display:`Others`,color:s.others,variants:[{name:`create-eletron-vite`,display:`Electron ↗`,color:s.others,customCommand:`pnpm create electron-vite@latest TARGET_DIR`}]}],v=_.map(e=>e.variants.map(e=>`${e.name}`)).reduce((e,t)=>e.concat(t),[]),y=(e,t)=>{console.log(`💦customCommand`,e,t);let n=t?t.name:`npm`,r=n===`yarn`&&t?.version.startsWith(`1.`);return e.replace(/^npm create (?:-- )?/,()=>n===`bun`?`bun x create-`:n===`pnpm`?`pnpm create `:e.startsWith(`npm create -- `)?`${n} create -- `:`${n} create `).replace(`@latest`,()=>r?``:`@latest`).replace(/^npm exec/,()=>n===`pnpm`?`pnpm dlx`:n===`yarn`&&!r?`yarn dlx`:n===`bun`?`bun x`:`npm exec`)},b={_gitignore:`.gitignore`},x=(n,r)=>{e.mkdirSync(r,{recursive:!0});for(let i of e.readdirSync(n))S(t.resolve(n,i),t.resolve(r,i))},S=(t,n)=>{e.statSync(t).isDirectory()?x(t,n):e.copyFileSync(t,n)},C=(t,n)=>{let r=e.readFileSync(t,`utf-8`);e.writeFileSync(t,n(r),`utf-8`)},w=(e,n)=>{C(t.resolve(e,`package.json`),e=>e.replace(/"@vitejs\/plugin-react": ".+?"/,`"@vitejs/plugin-react-swc": "^4.0.1"`)),C(t.resolve(e,`vite.config.${n?`ts`:`js`}`),e=>e.replace(`@vitejs/plugin-react`,`@vitejs/plugin-react-swc`))};(async()=>{console.log(c);let o=c._[0]?d(c._[0]):void 0,x=c.template,C=c.overwrite,T=`bubbles-project`;if(c.help){console.log(u);return}let E=f(process.env.npm_config_user_agent),D=()=>r.cancel(`Operation cancelled`),O=o;if(!O){let e=await r.text({message:`Project name`,defaultValue:T,placeholder:T,validate:e=>e.length===0||d(e).length>0?void 0:`Invalid project name`});if(r.isCancel(e))return D();O=d(e)}if(e.existsSync(O)&&!p(O)){let e=C?`yes`:await r.select({message:O===`.`?`Current directory`:`Target directory "${O}" is not empty. Please choose how to proceed:`,options:[{label:`${s.vue(`Cancel operation`)}`,value:`no`},{label:`Remove existing files and continue`,value:`yes`},{label:`Ignore files and continue`,value:`ignore`}]});if(r.isCancel(e))return D();switch(e){case`yes`:m(O);break;case`no`:D();return}}let k=t.basename(t.resolve(O));if(!h(k)){let e=await r.text({message:`Package name is invalid. please input again:`,defaultValue:g(k),placeholder:g(k),validate(e){if(!h(e))return`Invalid package.json name`}});if(r.isCancel(e))return D();k=e}let A=x,j=!1;if(x&&!v.includes(x)&&(A=void 0,j=!0),!A){let e=await r.select({message:j?`"${x}" isn't a valia template. please choose from below:`:`Select a framework`,options:_.map(e=>{let t=e.color;return{label:t(e.display),value:e}})});if(r.isCancel(e))return D();console.log(`💦pkgInfo`,E);let t=await r.select({message:`Select a variant:`,options:e.variants.map(e=>{let t=e.color,n=e.customCommand?y(e.customCommand,E).replace(/ TARGET_DIR$/,``):void 0;return{label:t(e.display||e.name),value:e.name,hint:n}})});if(r.isCancel(t))return D();A=t}let M=t.join(l,O);e.mkdirSync(M,{recursive:!0});let N=!1;A.includes(`-swc`)&&(N=!0,A=A.replace(`-swc`,``));let P=E?E.name:`npm`,{customCommand:F}=_.flatMap(e=>e.variants).find(e=>e.name===A)??{};if(F){let[e,...t]=y(F,E).split(` `),n=t.map(e=>e.replace(`TARGET_DIR`,()=>O));console.log(`💦replacedArgs`,n);let{status:r}=i.sync(e,n,{stdio:`inherit`});process.exit(r??0)}r.log.step(`scaffolding project in ${M}...`);let I=t.resolve(n(import.meta.url),`../..`,`template-${A}`),L=(n,r)=>{let i=t.join(M,b[n]??n);r?e.writeFileSync(i,r):S(t.join(I,n),i)},R=e.readdirSync(I);for(let e of R)e!==`package.json`&&L(e);let z=JSON.parse(e.readFileSync(t.join(I,`package.json`),`utf-8`));z.name=k,L(`package.json`,`${JSON.stringify(z,null,2)}\n`),N&&w(M,A.endsWith(`-ts`));let B=``,V=t.relative(l,M);switch(console.log(`💦cwd`,l),console.log(`💦root`,M),console.log(`💦cdProjectName`,V),B+=`Done. Now run:
-`,M!==l&&(B+=`\n cd ${V.includes(` `)?`"${V}"`:V} `),P){case`yarn`:B+=`
- yarn`,B+=`
- yarn dev`;break;default:B+=a([`pink`,`white`])(`\n  ${P} install`),B+=a([`pink`,`white`])(`\n  ${P} run dev`);break}r.outro(B)})().catch(e=>{console.error(`💦`,e)});export{};
+${colorMap.vue("vue-vite-eslint             vue")}
+${colorMap.react("react-rsbuild-biome        react")}
+${colorMap.react("vp-react                   react")}
+${colorMap.react("vp-react-shadcn            react")}
+${colorMap.react("vp-monorepo-react-nestjs   react")}
+${colorMap.taro("taro-vue-eslint            taro")}
+${colorMap.nextjs("nextjs-vinext-eslint      nextjs")}`;
+/**
+* 去除空格并且替换掉末尾一个或者多个“/”
+* @param targetDir
+* @returns
+*/
+const formatTargetDir = (targetDir) => {
+	return targetDir.trim().replace(/\/+$/g, "");
+};
+const pkgFromUserAgent = (userAgent) => {
+	if (!userAgent) return;
+	const pkgSpecArr = userAgent.split(" ")[0].split("/");
+	return {
+		name: pkgSpecArr[0],
+		version: pkgSpecArr[1]
+	};
+};
+/**
+* 要么没有文件要么只有一个.git 文件夹
+* @param path
+* @returns
+*/
+const isEmpty = (path) => {
+	const files = fs.readdirSync(path);
+	return files.length === 0 || files.length === 1 && files[0] === ".git";
+};
+const emptyDir = async (dir) => {
+	await Promise.all(fs.readdirSync(dir).filter((file) => file !== ".git").map((file) => fs.promises.rm(path.resolve(dir, file), {
+		recursive: true,
+		force: true
+	})));
+};
+/**
+* 验证包名是否满足以 @ - * ~ 字母 数字 开头 并且
+* 第一个?: 代表非捕获模式 第二个代表 可有可无
+* @scope/abc  abc
+* (?:@[a-z\d\-*~][a-z\d\-*._~]*\/)?  => 匹配 @scope/
+* [a-z\d\-~][a-z\d\-._~]*  匹配 / 后面
+*
+* @param packageName
+* @returns
+*/
+const isValidPackageName = (packageName) => {
+	return /^(?:@[a-z\d\-*~][a-z\d\-*._~]*\/)?[a-z\d\-~][a-z\d\-._~]*$/.test(packageName);
+};
+/**
+* 把不合法的包名元素替换掉
+* @param packageName
+* @returns
+*/
+const toValidPackageName = (packageName) => {
+	return packageName.trim().toLowerCase().replace(/\s+/g, "-").replace(/^[._]/, "").replace(/[^a-z\d\-~]+g/, "-");
+};
+const FRAMEWORKS = [
+	{
+		name: "vue",
+		display: "Vue",
+		color: colorMap.vue,
+		variants: [{
+			name: "vue-vite-eslint",
+			display: "vite + eslint",
+			color: colorMap.vue
+		}]
+	},
+	{
+		name: "react",
+		display: "React",
+		color: colorMap.react,
+		variants: [
+			{
+				name: "react-rsbuild-biome",
+				display: "rsbuild-biome",
+				color: colorMap.react
+			},
+			{
+				name: "vp-react",
+				display: "vp-react",
+				color: colorMap.react
+			},
+			{
+				name: "vp-react-shadcn",
+				display: "vp-react-shadcn",
+				color: colorMap.react
+			},
+			{
+				name: "vp-monorepo-react-nestjs",
+				display: "vp-monorepo-react-nestjs",
+				color: colorMap.react
+			}
+		]
+	},
+	{
+		name: "taro",
+		display: "Taro",
+		color: colorMap.taro,
+		variants: [{
+			name: "taro-vue-eslint",
+			display: "taro-vue + eslint",
+			color: colorMap.taro
+		}, {
+			name: "taro-react-oxc",
+			display: "taro-react + oxc",
+			color: colorMap.taro
+		}]
+	},
+	{
+		name: "nextjs",
+		display: "NextJS",
+		color: colorMap.nextjs,
+		variants: [{
+			name: "nextjs-vinext-eslint",
+			display: "nextjs + vinext + eslint",
+			color: colorMap.nextjs
+		}]
+	},
+	{
+		name: "others",
+		display: "Others",
+		color: colorMap.others,
+		variants: [{
+			name: "create-eletron-vite",
+			display: "Electron ↗",
+			color: colorMap.others,
+			customCommand: "pnpm create electron-vite@latest TARGET_DIR"
+		}]
+	}
+];
+const TEMPLATES = FRAMEWORKS.map((f) => f.variants.map((v) => `${v.name}`)).reduce((a, b) => a.concat(b), []);
+/**
+*
+* @param customCommand
+* @param pkgInfo  { name: 'pnpm', version: '10.0.0' }
+* @returns
+*/
+const getFullCustomCommand = (customCommand, pkgInfo) => {
+	console.log("💦customCommand", customCommand, pkgInfo);
+	const pkgManager = pkgInfo ? pkgInfo.name : "npm";
+	const isYarn1 = pkgManager === "yarn" && pkgInfo?.version.startsWith("1.");
+	return customCommand.replace(/^npm create (?:-- )?/, () => {
+		if (pkgManager === "bun") return "bun x create-";
+		if (pkgManager === "pnpm") return "pnpm create ";
+		/** 这里的 -- 时参数分隔符 前面的给 npm create 后面的 给 create-vite 这个脚手架  */
+		return customCommand.startsWith("npm create -- ") ? `${pkgManager} create -- ` : `${pkgManager} create `;
+	}).replace("@latest", () => isYarn1 ? "" : "@latest").replace(/^npm exec/, () => {
+		if (pkgManager === "pnpm") return "pnpm dlx";
+		if (pkgManager === "yarn" && !isYarn1) return "yarn dlx";
+		if (pkgManager === "bun") return "bun x";
+		return "npm exec";
+	});
+};
+/**
+* 历史遗留问题 npmjs 会把.gitignore 忽略掉，于是vite官方把.g
+*/
+const renameFiles = { _gitignore: ".gitignore" };
+const copyDir = (srcDir, destDir) => {
+	fs.mkdirSync(destDir, { recursive: true });
+	for (const file of fs.readdirSync(srcDir)) copy(path.resolve(srcDir, file), path.resolve(destDir, file));
+};
+const copy = (src, dest) => {
+	if (fs.statSync(src).isDirectory()) copyDir(src, dest);
+	else fs.copyFileSync(src, dest);
+};
+/**
+* 修改文件内容
+* @param file 文件路径
+* @param callback 修改内容的回调 参数是当前内容
+*/
+const editFile = (file, callback) => {
+	const content = fs.readFileSync(file, "utf-8");
+	fs.writeFileSync(file, callback(content), "utf-8");
+};
+/**
+* 对 react swc 的处理 就是将plugin-react 换成 plugin-react-swc
+* @param src 源目录
+* @param dest 目标目录
+*/
+const setupReactSwc = (root, isTs) => {
+	const reactSwcPluginVersion = "4.0.1";
+	editFile(path.resolve(root, "package.json"), (content) => {
+		return content.replace(/"@vitejs\/plugin-react": ".+?"/, `"@vitejs/plugin-react-swc": "^${reactSwcPluginVersion}"`);
+	});
+	editFile(path.resolve(root, `vite.config.${isTs ? "ts" : "js"}`), (content) => content.replace("@vitejs/plugin-react", "@vitejs/plugin-react-swc"));
+};
+const init = async () => {
+	console.log(argv);
+	/**
+	* 取的是那些没有 --key value的参数 这里代指模板
+	* bun index.js template-vue -t vue -s 12321  template-react
+	* {
+	* _: [ "template-vue", "template-react" ],
+	* t: "vue",
+	* s: 12321,
+	* template: "vue",
+	* }
+	*/
+	const argTargetDir = argv._[0] ? formatTargetDir(argv._[0]) : void 0;
+	const argTemplate = argv.template;
+	const argOverwrite = argv.overwrite;
+	const defaultTargetDir = "bubbles-project";
+	if (argv.help) {
+		console.log(helpMessage);
+		return;
+	}
+	/**
+	* 获取用户执行命令的包管理工具的详细信息 包含 name 和 版本
+	*
+	* - bun x  node packages/create-bubbles-tsdown/index.js
+	* - pnpm exec node packages/create-bubbles-tsdown/index.js
+	* - 或 npm exec node packages/create-bubbles-tsdown/index.js
+	*/
+	const pkgInfo = pkgFromUserAgent(process.env.npm_config_user_agent);
+	const cancel = () => prompts.cancel("Operation cancelled");
+	/** 项目名 */
+	let targetDir = argTargetDir;
+	if (!targetDir) {
+		const projectName = await prompts.text({
+			message: "Project name",
+			defaultValue: defaultTargetDir,
+			placeholder: defaultTargetDir,
+			validate: (value) => {
+				return (value || []).length === 0 || formatTargetDir(value || "").length > 0 ? void 0 : "Invalid project name";
+			}
+		});
+		if (prompts.isCancel(projectName)) return cancel();
+		targetDir = formatTargetDir(projectName);
+	}
+	if (fs.existsSync(targetDir) && !isEmpty(targetDir)) {
+		const overwrite = argOverwrite ? "yes" : await prompts.select({
+			message: targetDir === "." ? "Current directory" : `Target directory "${targetDir}" is not empty. Please choose how to proceed:`,
+			options: [
+				{
+					label: `${colorMap.vue("Cancel operation")}`,
+					value: "no"
+				},
+				{
+					label: "Remove existing files and continue",
+					value: "yes"
+				},
+				{
+					label: "Ignore files and continue",
+					value: "ignore"
+				}
+			]
+		});
+		if (prompts.isCancel(overwrite)) return cancel();
+		switch (overwrite) {
+			case "yes":
+				emptyDir(targetDir);
+				break;
+			case "no":
+				cancel();
+				return;
+		}
+	}
+	/** 提取绝对路径最后的path 与 targetDir 不同 因为 targetDir 可以输入 xxx/xxx */
+	let packageName = path.basename(path.resolve(targetDir));
+	if (!isValidPackageName(packageName)) {
+		const packageNameResult = await prompts.text({
+			message: "Package name is invalid. please input again:",
+			defaultValue: toValidPackageName(packageName),
+			placeholder: toValidPackageName(packageName),
+			validate(dir) {
+				if (!isValidPackageName(dir)) return "Invalid package.json name";
+			}
+		});
+		if (prompts.isCancel(packageNameResult)) return cancel();
+		packageName = packageNameResult;
+	}
+	let template = argTemplate;
+	let hasInvalidArgTemplate = false;
+	/** 输入的-t 模板不能存在 */
+	if (argTemplate && !TEMPLATES.includes(argTemplate)) {
+		template = void 0;
+		hasInvalidArgTemplate = true;
+	}
+	if (!template) {
+		const framework = await prompts.select({
+			message: hasInvalidArgTemplate ? `"${argTemplate}" isn't a valia template. please choose from below:` : "Select a framework",
+			options: FRAMEWORKS.map((framework) => {
+				const frameworkColor = framework.color;
+				return {
+					label: frameworkColor(framework.display),
+					value: framework
+				};
+			})
+		});
+		if (prompts.isCancel(framework)) return cancel();
+		console.log("💦pkgInfo", pkgInfo);
+		const variant = await prompts.select({
+			message: "Select a variant:",
+			options: framework.variants.map((variant) => {
+				const variantColor = variant.color;
+				const command = variant.customCommand ? getFullCustomCommand(variant.customCommand, pkgInfo).replace(/ TARGET_DIR$/, "") : void 0;
+				return {
+					label: variantColor(variant.display || variant.name),
+					value: variant.name,
+					hint: command
+				};
+			})
+		});
+		if (prompts.isCancel(variant)) return cancel();
+		template = variant;
+	}
+	/** 合起来就是 项目文件夹的 绝对路径  */
+	const root = path.join(cwd, targetDir);
+	fs.mkdirSync(root, { recursive: true });
+	let isReactSwc = false;
+	if (template.includes("-swc")) {
+		isReactSwc = true;
+		template = template.replace("-swc", "");
+	}
+	/**
+	* 用户输入命令的包管理工具
+	*/
+	const pkgManager = pkgInfo ? pkgInfo.name : "npm";
+	const { customCommand } = FRAMEWORKS.flatMap((f) => f.variants).find((v) => v.name === template) ?? {};
+	if (customCommand) {
+		const [command, ...args] = getFullCustomCommand(customCommand, pkgInfo).split(" ");
+		const replacedArgs = args.map((arg) => arg.replace("TARGET_DIR", () => targetDir));
+		console.log("💦replacedArgs", replacedArgs);
+		/** 这里的  inherit 表示继承父进程的输入输出  */
+		const { status } = spawn.sync(command, replacedArgs, { stdio: "inherit" });
+		process.exit(status ?? 0);
+	}
+	prompts.log.step(`scaffolding project in ${root}...`);
+	/** 选则的模板地址  */
+	const templateDir = path.resolve(fileURLToPath(import.meta.url), "../..", `template-${template}`);
+	const write = (file, content) => {
+		const targetPath = path.join(root, renameFiles[file] ?? file);
+		if (content) fs.writeFileSync(targetPath, content);
+		else copy(path.join(templateDir, file), targetPath);
+	};
+	const files = fs.readdirSync(templateDir);
+	for (const file of files) if (file !== "package.json") write(file);
+	const pkg = JSON.parse(fs.readFileSync(path.join(templateDir, "package.json"), "utf-8"));
+	pkg.name = packageName;
+	/** null => replacer 主要是用于序列化的时候 做一些操作  数组 每一个属性都会执行该函数 如果是数组就是只有这些属性会留下
+	* 2 代表 缩进级别
+	*/
+	write("package.json", `${JSON.stringify(pkg, null, 2)}\n`);
+	if (isReactSwc) setupReactSwc(root, template.endsWith("-ts"));
+	let doneMessage = "";
+	/** 克隆文件夹之后 目录的 的相对路径 其实就是 root 和 cwd 的差值  */
+	const cdProjectName = path.relative(cwd, root);
+	console.log("💦cwd", cwd);
+	console.log("💦root", root);
+	console.log("💦cdProjectName", cdProjectName);
+	doneMessage += `Done. Now run:\n`;
+	if (root !== cwd) doneMessage += `\n cd ${cdProjectName.includes(" ") ? `"${cdProjectName}"` : cdProjectName} `;
+	switch (pkgManager) {
+		case "yarn":
+			doneMessage += `\n yarn`;
+			doneMessage += `\n yarn dev`;
+			break;
+		default:
+			doneMessage += gradient(["pink", "white"])(`\n  ${pkgManager} install`);
+			doneMessage += gradient(["pink", "white"])(`\n  ${pkgManager} run dev`);
+			break;
+	}
+	prompts.outro(doneMessage);
+};
+init().catch((e) => {
+	console.error("💦", e);
+});
+
+//#endregion
+export {  };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-bubbles",
-  "version": "0.1.18",
+  "version": "0.1.19",
   "type": "module",
   "author": "bubbles plant",
   "bin": {