perf(packages/cli): improvement

style(set-app): remove unnecesary .pretierignore file and format vite.config.js

perf(packages/cli): execute only 2 yarn add commands

Execute yarn add and yarn add -D only once in the whole project at the end of the reset of the file
generation

fix(packages/cli)!: fix cli generation build and publish

BREAKING CHANGE: change on package.json bin command and add npmignore file and remove sourceMap from
the final cli

chore(packages/cli): update yarn.lock file

examples/react/vite.config.ts

@@ -2,7 +2,7 @@ import { defineConfig } from "vitest/config";
 import react from "@vitejs/plugin-react";
 
 export default defineConfig({
-  plugins: [ react() ],
+  plugins: [react()],
   root: "src",
   test: {
     environment: "happy-dom",

packages/cli/.gitignore

@@ -1,7 +1,8 @@
-node_modules
+node_modules/
 .parcel-cache/
 dist/
 .env
 .DS_Store
 coverage/
-.vscode/
+.vscode/
+yarn-error.log

packages/cli/.npmignore

@@ -0,0 +1,13 @@
+node_modules/
+.turbo/
+.env.*
+.DS_Store
+coverage/
+.vscode/
+src/
+.eslintrc.json
+.prettierrc
+CHANGELOG.md
+LICENSE
+yarn-error.log
+tsconfig.json

packages/cli/package.json

@@ -10,7 +10,7 @@
   "type": "module",
   "main": "index.js",
   "bin": {
-    "cli": "dist/index.js"
+    "setapp": "dist/index.js"
   },
   "scripts": {
     "copy:examples": "cpy ../../examples/react/src dist/examples/react",
@@ -37,7 +37,7 @@
   "license": "MIT",
   "dependencies": {
     "dotenv": "^16.0.3",
-    "zx": "7.1.1"
+    "zx": "^7.1.1"
   },
   "devDependencies": {
     "@types/node": "18.11.18",

packages/cli/src/api/name-parameter.ts

@@ -0,0 +1,12 @@
+import { argv, question } from "zx";
+
+export const getProjectName = async () => {
+  const parameters = argv._;
+  const name =
+    parameters && parameters.length
+      ? parameters[0]
+      : await question("Which one is the project name?");
+
+  if (!name) throw new Error("No name provided");
+  return name;
+};

packages/cli/src/common/differ-execution.ts

@@ -0,0 +1,18 @@
+import { $ } from "zx";
+import { getProjectPath } from "./paths.js";
+
+export const devDependencies: string[] = [];
+export const dependencies: string[] = [];
+
+const removeBadSustitution = (str: string) =>
+  str.replace(new RegExp(/\$'[^']*'/, "g"), (value) =>
+    value.replace(new RegExp(/(\$')|(')/, "g"), "")
+  );
+
+export const executeDependencies = async (projectName: string) => {
+  $.quote = removeBadSustitution;
+  const projectPath = getProjectPath(projectName);
+  const devDependencyCommand = `yarn add -D ${devDependencies.join(" ")}`;
+  const dependencyCommand = `yarn add ${dependencies.join(" ")}`;
+  return $`cd ${projectPath} ; ${dependencyCommand} ; ${devDependencyCommand}`;
+};

packages/cli/src/index.ts

@@ -13,29 +13,26 @@ import { argv, question } from "zx";
 import { dirname } from "path";
 import { fileURLToPath } from "url";
 import { getProdEnv } from "./common/paths.js";
+import { getProjectName } from "./api/name-parameter.js";
 
+// Don't move from this file, needs to take the reference
 export const dirName = () => dirname(fileURLToPath(import.meta.url));
 
 config({
   path: process.env.NODE_ENV ? `.env.${process.env.NODE_ENV}` : getProdEnv(),
 });
 
-const parameters = argv._;
-
-const name =
-  parameters && parameters.length
-    ? parameters[0]
-    : await question("Which one is the project name?");
-
-if (!name) {
-  throw new Error("No name provided");
+try {
+  const name = await getProjectName();
+  createProjectStructure(name);
+  await createPackageJson(name);
+  await setupGit(name);
+  setupPrettier(name);
+  setupTypescript(name);
+  setupESlint(name);
+  setupVitest(name);
+  await setupReact(name);
+  console.log(`Project ${name} created!`);
+} catch (error) {
+  console.error(error);
 }
-createProjectStructure(name);
-await createPackageJson(name);
-await setupGit(name);
-await setupPrettier(name);
-await setupTypescript(name);
-await setupESlint(name);
-await setupVitest(name);
-await setupReact(name);
-console.log(`Project ${name} created!`);

packages/cli/src/setup-eslint.ts

@@ -1,16 +1,18 @@
-import { $ } from "zx";
+import { devDependencies } from "./common/differ-execution.js";
 import { generateESLintRc } from "./common/generate-eslintrc.js";
 import { esLintRCBasic } from "./common/json-contents.js";
-import { getProjectPath } from "./common/paths.js";
 import { updatePackageJson } from "./common/update-package-json-script.js";
 
-const installESlint = async (projectName: string) =>
-  $`cd ${getProjectPath(
-    projectName
-  )} ; yarn add -D [email protected] [email protected] [email protected] @typescript-eslint/[email protected] @typescript-eslint/[email protected] ;`;
+const installESlint = () => {
+  devDependencies.push("[email protected]");
+  devDependencies.push("[email protected]");
+  devDependencies.push("[email protected]");
+  devDependencies.push("@typescript-eslint/[email protected]");
+  devDependencies.push("@typescript-eslint/[email protected]");
+};
 
-export const setupESlint = async (projectName: string) => {
-  await installESlint(projectName);
+export const setupESlint = (projectName: string) => {
+  installESlint();
   generateESLintRc(projectName, esLintRCBasic);
   updatePackageJson(projectName, {
     lint: 'eslint "src/**/*.{ts,tsx}" --quiet',

packages/cli/src/setup-prettier.ts

@@ -1,17 +1,15 @@
-import { $, fs } from "zx";
-import { getProjectPath } from "./common/paths.js";
+import { fs } from "zx";
+import { devDependencies } from "./common/differ-execution.js";
 import { updatePackageJson } from "./common/update-package-json-script.js";
 
-const installPrettier = async (projectName: string) =>
-  $`cd ${getProjectPath(projectName)} ; yarn add -D [email protected] ;`;
+const installPrettier = () => devDependencies.push("[email protected]");
 
 const createPrettierRC = (projectName: string) => {
-  fs.createFileSync(`${projectName}/.prettierrc`);
   fs.appendFileSync(`${projectName}/.prettierrc`, "{}");
 };
 
-export const setupPrettier = async (projectName: string) => {
-  await installPrettier(projectName);
+export const setupPrettier = (projectName: string) => {
+  installPrettier();
   createPrettierRC(projectName);
   updatePackageJson(projectName, {
     format: 'prettier --write "src/**/*.{ts,tsx}"',

packages/cli/src/setup-react.ts

@@ -1,41 +1,44 @@
-import { $ } from "zx";
+import {
+  dependencies,
+  devDependencies,
+  executeDependencies,
+} from "./common/differ-execution.js";
 import { generateESLintRc } from "./common/generate-eslintrc.js";
 import { esLintRCReact } from "./common/json-contents.js";
-import { getProjectPath } from "./common/paths.js";
 import { setupViteForReact } from "./setup-vite-react.js";
 
-const installReact = async (projectName: string) =>
-  $`cd ${getProjectPath(
-    projectName
-  )} ; yarn add [email protected] [email protected] ;`;
+const installReact = () => {
+  dependencies.push("[email protected]");
+  dependencies.push("[email protected]");
+};
 
-const installReactTypes = async (projectName: string) =>
-  $`cd ${getProjectPath(
-    projectName
-  )} ; yarn add -D @types/[email protected] @types/[email protected] ;`;
+const installReactTypes = () => {
+  devDependencies.push("@types/[email protected]");
+  devDependencies.push("@types/[email protected]");
+};
 
-const installReactRouter = async (projectName: string) =>
-  $`cd ${getProjectPath(projectName)} ; yarn add [email protected] ;`;
+const installReactRouter = () => dependencies.push("[email protected]");
 
-const installReactQuery = async (projectName: string) =>
-  $`cd ${getProjectPath(
-    projectName
-  )} ; yarn add @tanstack/[email protected] ;`;
+const installReactQuery = () =>
+  dependencies.push("@tanstack/[email protected]");
 
-const installEsLintForReact = (projectName: string) =>
-  $`cd ${getProjectPath(
-    projectName
-  )} ; yarn add -D [email protected] [email protected] [email protected] [email protected] ;`;
+const installEsLintForReact = () => {
+  devDependencies.push("[email protected]");
+  devDependencies.push("[email protected]");
+  devDependencies.push("[email protected]");
+  devDependencies.push("[email protected]");
+};
 
 const updateEsLintRc = (projectName: string) =>
   generateESLintRc(projectName, esLintRCReact);
 
 export const setupReact = async (projectName: string) => {
-  await installReact(projectName);
-  await installReactTypes(projectName);
-  await installEsLintForReact(projectName);
-  await updateEsLintRc(projectName);
-  await installReactRouter(projectName);
-  await installReactQuery(projectName);
-  await setupViteForReact(projectName);
+  installReact();
+  installReactTypes();
+  installEsLintForReact();
+  installReactRouter();
+  installReactQuery();
+  updateEsLintRc(projectName);
+  setupViteForReact(projectName);
+  await executeDependencies(projectName);
 };

packages/cli/src/setup-typescript.ts

@@ -1,19 +1,19 @@
-import { $, fs } from "zx";
+import { fs } from "zx";
+import { devDependencies } from "./common/differ-execution.js";
 import { tsConfigBasic } from "./common/json-contents.js";
 import { getProjectPath } from "./common/paths.js";
 import { updatePackageJson } from "./common/update-package-json-script.js";
 
-const installTypescript = async (projectName: string) =>
-  $`cd ${getProjectPath(projectName)} ; yarn add -D [email protected]`;
+const installTypescript = () => devDependencies.push("[email protected]");
 
 const createTsConfig = (projectName: string) => {
   const tsConfigFile = `${getProjectPath(projectName)}/tsconfig.json`;
   fs.createFileSync(tsConfigFile);
   fs.writeJSONSync(tsConfigFile, tsConfigBasic);
 };
 
-export const setupTypescript = async (projectName: string) => {
-  await installTypescript(projectName);
+export const setupTypescript = (projectName: string) => {
+  installTypescript();
   createTsConfig(projectName);
   updatePackageJson(projectName, {
     typecheck: "tsc --noEmit",

packages/cli/src/setup-vite-react.ts

@@ -1,4 +1,5 @@
-import { $, fs } from "zx";
+import { fs } from "zx";
+import { devDependencies } from "./common/differ-execution.js";
 import {
   getExample,
   getExampleSrc,
@@ -7,35 +8,36 @@ import {
 } from "./common/paths.js";
 import { updatePackageJson } from "./common/update-package-json-script.js";
 
-const installVite = async (projectName: string) =>
-  $`cd ${getProjectPath(
-    projectName
-  )} ; yarn add -D [email protected] @vitejs/[email protected] ;`;
+const installVite = () => {
+  devDependencies.push("[email protected]");
+  devDependencies.push("@vitejs/[email protected]");
+};
 
-const installVitest = (projectName: string) =>
-  $`cd ${getProjectPath(
-    projectName
-  )} ; yarn add -D @testing-library/[email protected] [email protected] [email protected] ;`;
+const installVitest = () => {
+  devDependencies.push("@testing-library/[email protected]");
+  devDependencies.push("[email protected]");
+  devDependencies.push("[email protected]");
+};
 
-const createViteConfig = async (projectName: string) => {
+const createViteConfig = (projectName: string) => {
   const viteConfigFileSrc = `${getExample("REACT")}/vite.config.ts`;
   const viteConfigFileDest = `${getProjectPath(projectName)}/vite.config.ts`;
   fs.copyFileSync(viteConfigFileSrc, viteConfigFileDest);
 };
 
-const createSrcOutput = async (projectName: string) => {
+const createSrcOutput = (projectName: string) => {
   const exampleSrcPath = getExampleSrc("REACT");
   fs.copySync(exampleSrcPath, getSrcPath(projectName), { overwrite: true });
 };
 
-export const setupViteForReact = async (projectName: string) => {
-  await installVite(projectName);
-  await installVitest(projectName);
+export const setupViteForReact = (projectName: string) => {
+  installVite();
+  installVitest();
+  createViteConfig(projectName);
+  createSrcOutput(projectName);
   updatePackageJson(projectName, {
     dev: "vite",
     build: "vite build",
     preview: "vite preview",
   });
-  createViteConfig(projectName);
-  createSrcOutput(projectName);
 };

packages/cli/src/setup-vitest.ts

@@ -1,14 +1,13 @@
-import { $ } from "zx";
-import { getProjectPath } from "./common/paths.js";
+import { devDependencies } from "./common/differ-execution.js";
 import { updatePackageJson } from "./common/update-package-json-script.js";
 
-const installVitest = async (projectName: string) =>
-  $`cd ${getProjectPath(
-    projectName
-  )} ; yarn add -D [email protected] @vitest/[email protected] ;`;
+const installVitest = () => {
+  devDependencies.push("[email protected]");
+  // devDependencies.push("@vitest/[email protected]");
+};
 
-export const setupVitest = async (projectName: string) => {
-  await installVitest(projectName);
+export const setupVitest = (projectName: string) => {
+  installVitest();
   updatePackageJson(projectName, {
     test: "vitest --run",
     "test:watch": "vitest",