Merge pull request #32 from selemondev/perf/reduce-bundle-size

perf: reduce bundle size

Author: selemondev

README.md

@@ -1,8 +1,21 @@
 <p align="center">
  <img align="center" src="https://raw.githubusercontent.com/selemondev/create-vue-next/master/image/create-vue-next.png" height="400" />
+  <h1 align="center">
+ Create Vue App
+ </h1>
 </p>
 
-## Create Vue3 App ⚡
+<p align="center">
+  <a href="https://www.npmjs.com/package/@selemondev/create-vue3-app">
+    <img alt="npm-version-src" src="https://img.shields.io/npm/v/@selemondev/create-vue3-app/latest.svg?style=flat&colorA=020420&colorB=00DC82" />
+  </a>
+  <a href="https://npmjs.com/package/@selemondev/create-vue3-app">
+    <img alt="npm-downloads-src" src="https://img.shields.io/npm/dm/@selemondev/create-vue3-app.svg?style=flat&colorA=020420&colorB=00DC82" />
+  </a>
+  <a href="https://pkg-size.dev/@selemondev/create-vue3-app@latest">
+  <img src="https://pkg-size.dev/badge/bundle/842194" title="Bundle size for @selemondev/create-vue3-app">
+  </a>
+</p>
 
 The Next Generation Vue Scaffolding Tool powered by Vite 🛠️
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@selemondev/create-vue3-app",
-  "version": "0.0.3",
+  "version": "0.0.2",
   "description": "The Next Generation Vue Scaffolding Tool ✨",
   "type": "module",
   "main": "./dist/index.cjs",

pnpm-workspace.yaml

@@ -0,0 +1,2 @@
+onlyBuiltDependencies:
+  - esbuild

src/utils/createSpawnCmd.ts

@@ -1,6 +1,5 @@
 import type { StdioOptions } from "child_process";
 import { spawn } from "child_process";
-import { logger } from "./logger";
 
 export const createSpawnCmd = (dest: string | undefined, stdio: StdioOptions = 'inherit') => {
     return function (cmd: string, args: string[]): Promise<unknown> {
@@ -15,7 +14,7 @@ export const createSpawnCmd = (dest: string | undefined, stdio: StdioOptions = '
                 code === 0 ? resolve(true) : reject(false);
             })
         }).catch((err) => {
-            logger.error(err)
+            return err;
         })
     }
 }

src/utils/ejsRender.ts

@@ -1,59 +1,52 @@
-import ejs from "ejs";
-import fs from 'fs-extra'
-import path from "path";
-import { format, resolveConfig } from "prettier";
+import { render } from "ejs";
+import { readFile, outputFile, remove } from 'fs-extra'
+import { resolve, extname, parse } from "path";
+import { format as prettierFormatter } from "prettier/standalone"
+import parserBabel from "prettier/parser-babel";
+import parserEstree from "prettier/plugins/estree";
 import options from '../core/utils/vue/options'
-import { fileURLToPath } from "node:url";
-import { dirname } from "path";
 
 // formatting the code
 
 export async function ejsRender(filePath: string, name: string): Promise<void> {
     try {
-        const __filename = fileURLToPath(import.meta.url);
-        const __dirname = dirname(__filename);
         let prettierCode: string = '';
 
-        const language = options.useTypeScript ? 'vue-ts' : 'vue-js';
+        const file = parse(filePath);
 
-        const templatePath = path.resolve(__dirname, `../template/${language}`)
+        const dest = resolve(process.cwd(), name)
 
-        const file = path.parse(filePath);
+        const readFilePath = resolve(dest, file.dir, `${file.name}.ejs`)
 
-        const dest = path.resolve(process.cwd(), name)
+        const outputFilePath = resolve(dest, filePath)
 
-        const readFilePath = path.resolve(dest, file.dir, `${file.name}.ejs`)
+        const templateCode = await readFile(readFilePath)
 
-        const outputFilePath = path.resolve(dest, filePath)
+        const code = render(templateCode.toString(), options);
 
-        const templateCode = await fs.readFile(readFilePath)
-
-        const code = ejs.render(templateCode.toString(), options);
-
-        const extname = path.extname(filePath).replace(/[.]/g, '')
-        const opts = await resolveConfig(templatePath)
+        const extensionName = extname(filePath).replace(/[.]/g, '')
 
         try {
-            switch (extname) {
+            switch (extensionName) {
                 case 'ts':
                 case 'tsx':
                 case 'jsx':
                 case 'js':
-                    prettierCode = await format(code, {
+                    prettierCode = await prettierFormatter(code, {
                         parser: 'babel',
-                        ...opts
+                        plugins: [parserBabel, parserEstree]
                     });
                     break;
                 case 'json':
-                    prettierCode = await format(code, {
+                    prettierCode = await prettierFormatter(code, {
                         parser: "json",
-                        ...opts
+                        plugins: [parserBabel, parserEstree]
                     });
                     break;
                 case 'cjs':
-                    prettierCode = await format(code, {
+                    prettierCode = await prettierFormatter(code, {
                         parser: "babel",
-                        ...opts
+                        plugins: [parserBabel, parserEstree]
                     });
                     break;
                 case 'toml':
@@ -63,14 +56,14 @@ export async function ejsRender(filePath: string, name: string): Promise<void> {
                     prettierCode = code
                     break
                 default:
-                    prettierCode = await format(code, { parser: extname })
+                    prettierCode = await prettierFormatter(code, { parser: extname })
                     break
             }
         } catch (err) {
             console.log(err)
         }
-        await fs.outputFile(outputFilePath, prettierCode)
-        await fs.remove(readFilePath)
+        await outputFile(outputFilePath, prettierCode)
+        await remove(readFilePath)
     } catch (error) {
         console.log(error)
     }