create-banana 1.0.0 → 1.0.1

package/bin/index.js

@@ -1,30 +1,63 @@
 #!/usr/bin/env node
-import printString from '../utils/figletPrint.js'
-import rainbowGradient from '../utils/rainbow.js'
+import printString from '#utils/figletPrint.js'
+import rainbowGradient from '#utils/rainbow.js'
 import { input } from '@inquirer/prompts'
-import createBaseProject from '../utils/template/base.js'
+import createBaseProject from '#utils/template/base/base.js'
 import { checkbox } from '@inquirer/prompts'
-import addEslint from '../utils/template/eslint.js'
-import addPrettier from '../utils/template/prettier.js'
-import addEslintConfig from '../template/eslint/eslintConfig/index.js'
+import addEslint from '#utils/template/eslint/eslint.js'
+import addPrettier from '#utils/template/prettier.js'
+import addEslintConfig from '#utils/template/eslint/eslintConfig.js'
+import addPinia from '#utils/template/pinia/pinia.js'
+import addAppVue from '#utils/template/base/appVue.js'
+import path from 'path'
+import confirmPathExists from '#utils/pathExists.js'
+import addMain from '#utils/template/base/main.js'
+import { select } from '@inquirer/prompts'
+import addPiniaPluginPersistedstate from '#utils/template/pinia/piniaPluginPersistedstate.js'
 
 // print BANANA in rainbow colors
 console.log(rainbowGradient(await printString('BANANA')))
 
 const projectName = await input({ message: 'Enter your project name:', required: true })
 
+// 确认路径存在
+await confirmPathExists(projectName, path.join(process.cwd(), projectName))
+
 const feats = await checkbox({
   message: 'Please select the features to include:',
   choices: [
     { name: 'Eslint', value: 'eslint' },
     { name: 'Prettier', value: 'prettier' },
+    { name: 'Pinia', value: 'pinia' },
   ],
 })
 
 const useEslint = feats.includes('eslint')
 const usePrettier = feats.includes('prettier')
+const usePinia = feats.includes('pinia')
+
+let usePiniaPluginPersistedstate = false
+if (usePinia) {
+  usePiniaPluginPersistedstate = await select({
+    message: `Do you want to use pinia-plugin-persistedstate for Pinia state persistence?`,
+    choices: [
+      { name: 'Yes', value: true },
+      { name: 'No', value: false },
+    ],
+  })
+}
 
+// TODO: 把一类型的功能整合到一起
 await createBaseProject(projectName)
+await addAppVue(projectName, usePinia, usePiniaPluginPersistedstate)
+await addMain(projectName, usePinia, usePiniaPluginPersistedstate)
+
+await addPinia(projectName, usePinia, usePiniaPluginPersistedstate)
+await addPiniaPluginPersistedstate(projectName, usePiniaPluginPersistedstate)
+
 await addEslint(projectName, useEslint)
-await addPrettier(projectName, useEslint, usePrettier)
 await addEslintConfig(projectName, usePrettier, useEslint)
+
+await addPrettier(projectName, useEslint, usePrettier)
+
+// TODO: 输出后续操作，例如lint，git

package/package.json

@@ -1,10 +1,17 @@
 {
   "name": "create-banana",
-  "version": "1.0.0",
+  "version": "1.0.1",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/TMname1/create-banana.git"
+  },
   "type": "module",
   "description": "TMname1's CLI tool to create customized templates",
   "main": "index.js",
   "bin": "./bin/index.js",
+  "imports": {
+    "#utils/*": "./utils/*"
+  },
   "lint-staged": {
     "*": [
       "eslint . --fix",

package/template/base/src/App.vue.ejs

@@ -0,0 +1,75 @@
+<script setup>
+import HelloWorld from './components/HelloWorld.vue'
+import TheWelcome from './components/TheWelcome.vue'
+<% if(usePinia) { %>import { useCounterStore } from './stores/counter' <% } %>
+<% if(usePiniaPluginPersistedstate) { %>import { useKeyStore } from './stores/key' <% } %>
+
+<% if(usePinia) { %>const counterStore = useCounterStore()<% } %>
+<% if(usePiniaPluginPersistedstate) { %>const keyStore = useKeyStore()<% } %>
+</script>
+
+<template>
+  <header>
+    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
+
+    <div class="wrapper">
+      <HelloWorld msg="You did it!" />
+      <% if(usePinia) { %><button class="piniaBtn" @click="counterStore.increment">Count is: {{ counterStore.count }}</button><% } %>
+      <% if(usePiniaPluginPersistedstate) { %><input class="persistInp" v-model="keyStore.key" placeholder="Enter a key to persist" /><% } %>
+    </div>
+  </header>
+
+  <main>
+    <TheWelcome />
+  </main>
+</template>
+
+<style scoped>
+header {
+  line-height: 1.5;
+}
+
+.logo {
+  display: block;
+  margin: 0 auto 2rem;
+}
+
+<% if(usePinia) { %>.piniaBtn {
+  margin-top: 1rem;
+  padding: 0.5rem 1rem;
+  font-size: 1rem;
+  border: none;
+  border-radius: 4px;
+  background-color: #42b983;
+  color: white;
+  cursor: pointer;
+}<% } %>
+
+<% if(usePiniaPluginPersistedstate) { %>.persistInp {
+  margin-top: 1rem;
+  padding: 0.5rem;
+  font-size: 1rem;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  width: 100%;
+  max-width: 300px;
+}<% } %>
+
+@media (min-width: 1024px) {
+  header {
+    display: flex;
+    place-items: center;
+    padding-right: calc(var(--section-gap) / 2);
+  }
+
+  .logo {
+    margin: 0 2rem 0 0;
+  }
+
+  header .wrapper {
+    display: flex;
+    place-items: flex-start;
+    flex-wrap: wrap;
+  }
+}
+</style>

package/template/base/src/main.js.ejs

@@ -0,0 +1,7 @@
+import './assets/main.css'
+import { createApp } from 'vue'
+import App from './App.vue'
+<% if(usePinia) { %>import { createPinia } from 'pinia'<% } %>
+<% if(usePiniaPluginPersistedstate) { %>import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'<% } %>
+
+createApp(App)<% if(usePinia) { %>.use(createPinia()<% if(usePiniaPluginPersistedstate) { %>.use(piniaPluginPersistedstate)<% } %>)<% } %>.mount('#app')

package/template/pinia/{stores/counter.js → counter.js}

@@ -7,12 +7,5 @@ export const useCounterStore = defineStore('counter', () => {
   function increment() {
     count.value++
   }
-
   return { count, doubleCount, increment }
 })
-
-// TODO: 添加pinia 的模板
-
-// TODO: main.js要用ejs来调整
-
-// TODO: 添加是否选择pinia持久化的功能

package/template/pinia/package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "pinia": "^3.0.4"
+  }
+}

package/template/pinia/pinia-plugin-persistedstate/key.js

@@ -0,0 +1,11 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useKeyStore = defineStore(
+  'key',
+  () => {
+    const key = ref('')
+    return { key }
+  },
+  { persist: true },
+)

package/template/pinia/pinia-plugin-persistedstate/package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "pinia-plugin-persistedstate": "^4.7.1"
+  }
+}

package/utils/URL.js

@@ -3,13 +3,11 @@ import path from 'path'
 import { fileURLToPath } from 'url'
 
 // 拼接相对路径
-const relativePath = (fileURL, targetURL) => {
+export const relativePath = (fileURL, targetURL) => {
   const __filename = fileURLToPath(fileURL)
   const __dirname = path.dirname(__filename)
   return path.join(__dirname, targetURL)
 }
-export { relativePath }
 
 // 获取模板目录路径
-const templatePath = fileURLToPath(new URL('../template', import.meta.url))
-export { templatePath }
+export const templatePath = fileURLToPath(new URL('../template', import.meta.url))

package/utils/figletPrint.js

@@ -1,5 +1,4 @@
 // print BANANA in big money-se font using figlet
-
 import figlet from 'figlet'
 
 const printString = async (str) => {

package/utils/template/base/appVue.js

@@ -0,0 +1,18 @@
+// 渲染App.vue，通过模板匹配pinia的使用情况
+import ejs from 'ejs'
+import { templatePath } from '#utils/URL.js'
+import fs from 'fs-extra'
+import path from 'path'
+
+const addAppVue = async (projectName, usePinia, usePiniaPluginPersistedstate) => {
+  await fs.writeFile(
+    path.join(process.cwd(), projectName, 'src', 'App.vue'),
+    ejs.render(await fs.readFile(path.join(templatePath, 'base', 'src', 'App.vue.ejs'), 'utf-8'), {
+      usePinia,
+      usePiniaPluginPersistedstate,
+    }),
+  )
+  await fs.remove(path.join(process.cwd(), projectName, 'src', 'App.vue.ejs'))
+}
+
+export default addAppVue

package/utils/template/{base.js → base/base.js}

@@ -1,22 +1,16 @@
 // 获取base模板
 import path from 'path'
-import { templatePath } from '../URL.js'
+import { templatePath } from '#utils/URL.js'
 import fs from 'fs-extra'
-import confirmPathExists from '../pathExists.js'
-
-const basePath = path.join(templatePath, 'base')
 
 const createBaseProject = async (projectName) => {
+  const basePath = path.join(templatePath, 'base')
   const projectDir = path.join(process.cwd(), projectName)
-  // 确认路径存在
-  await confirmPathExists(projectName, projectDir)
   // 复制模板文件到目标目录
   fs.copySync(basePath, projectDir)
-  // 读取package.json文件路径
+
   const packageJsonPath = path.join(projectDir, 'package.json')
-  // 读取package.json内容
   const packageJson = await fs.readJson(packageJsonPath)
-  // 修改name字段
   packageJson.name = projectName
   // 写回package.json文件
   await fs.writeJson(packageJsonPath, packageJson, { spaces: 2 })

package/utils/template/base/main.js

@@ -0,0 +1,18 @@
+// 渲染main.js，通过模板匹配pinia的使用情况
+import ejs from 'ejs'
+import { templatePath } from '#utils/URL.js'
+import fs from 'fs-extra'
+import path from 'path'
+
+const addMain = async (projectName, usePinia, usePiniaPluginPersistedstate) => {
+  await fs.writeFile(
+    path.join(process.cwd(), projectName, 'src', 'main.js'),
+    ejs.render(await fs.readFile(path.join(templatePath, 'base', 'src', 'main.js.ejs'), 'utf-8'), {
+      usePinia,
+      usePiniaPluginPersistedstate,
+    }),
+  )
+  await fs.remove(path.join(process.cwd(), projectName, 'src', 'main.js.ejs'))
+}
+
+export default addMain

package/utils/template/{Eslint.js → eslint/eslint.js}

@@ -1,10 +1,9 @@
 // 添加Eslint功能
 import path from 'path'
 import fs from 'fs-extra'
-import { templatePath } from '../URL.js'
+import { templatePath } from '../../URL.js'
 
 // TODO: 优化变量名长度，提高可读性
-// TODO: 文件的变量名不要path
 const addEslint = async (projectName, flag) => {
   // 没有选择Eslint则直接返回
   if (!flag) return

package/{template/Eslint/eslintConfig/index.js → utils/template/eslint/eslintConfig.js}

@@ -1,7 +1,7 @@
 // 渲染eslint.config.js文件
 // 通过模板匹配prettier的选择情况
 import ejs from 'ejs'
-import { relativePath } from '../../../utils/URL.js'
+import { templatePath } from '#utils/URL.js'
 import fs from 'fs-extra'
 import path from 'path'
 
@@ -10,7 +10,7 @@ const addEslintConfig = async (projectName, usePrettier, flag) => {
   await fs.writeFile(
     path.join(process.cwd(), projectName, 'eslint.config.js'),
     ejs.render(
-      await fs.readFile(relativePath(import.meta.url, './eslint.config.js.ejs'), 'utf-8'),
+      await fs.readFile(path.join(templatePath, 'eslint', 'eslint.config.js.ejs'), 'utf-8'),
       { usePrettier },
     ),
   )

package/utils/template/pinia/pinia.js

@@ -0,0 +1,25 @@
+// 添加pinia功能
+import path from 'path'
+import fs from 'fs-extra'
+import { templatePath } from '#utils/URL.js'
+
+const addPinia = async (projectName, flag) => {
+  if (!flag) return
+  const targetPkg = fs.readJsonSync(path.join(process.cwd(), projectName, 'package.json'))
+  const piniaPkg = fs.readJsonSync(path.join(templatePath, 'pinia', 'package.json'))
+
+  // package.json的配置
+  targetPkg.dependencies = {
+    ...targetPkg.dependencies,
+    ...piniaPkg.dependencies,
+  }
+
+  fs.writeJSONSync(path.join(process.cwd(), projectName, 'package.json'), targetPkg, { spaces: 2 })
+
+  fs.copySync(
+    path.join(templatePath, 'pinia', 'counter.js'),
+    path.join(process.cwd(), projectName, 'src', 'stores', 'counter.js'),
+  )
+}
+
+export default addPinia

package/utils/template/pinia/piniaPluginPersistedstate.js

@@ -0,0 +1,27 @@
+// 添加pinia自动持久化功能
+import fs from 'fs-extra'
+import path from 'path'
+import { templatePath } from '#utils/URL.js'
+
+const addPiniaPluginPersistedstate = async (projectName, flag) => {
+  if (!flag) return
+  const targetPkg = fs.readJsonSync(path.join(process.cwd(), projectName, 'package.json'))
+  const persistPkg = fs.readJsonSync(
+    path.join(templatePath, 'pinia', 'pinia-plugin-persistedstate', 'package.json'),
+  )
+
+  // package.json的配置
+  targetPkg.dependencies = {
+    ...targetPkg.dependencies,
+    ...persistPkg.dependencies,
+  }
+
+  fs.writeJSONSync(path.join(process.cwd(), projectName, 'package.json'), targetPkg, { spaces: 2 })
+
+  fs.copySync(
+    path.join(templatePath, 'pinia', 'pinia-plugin-persistedstate', 'key.js'),
+    path.join(process.cwd(), projectName, 'src', 'stores', 'key.js'),
+  )
+}
+
+export default addPiniaPluginPersistedstate

package/utils/template/prettier.js

@@ -2,16 +2,16 @@ import { templatePath } from '../URL.js'
 import path from 'path'
 import fs from 'fs-extra'
 
-const addPrettier = async (projectName, useEslint, flag) => {
+const addPrettier = async (projectName, flag) => {
   // 没有选择Prettier则直接返回
   if (!flag) return
   // 路径
   const templatePrettierPath = path.join(templatePath, 'prettier')
   const targetPath = path.join(process.cwd(), projectName)
-  const targetPackageJson = path.join(targetPath, 'package.json')
+  const targetPackageJsonPath = path.join(targetPath, 'package.json')
 
   // 文件
-  const targetPkg = await fs.readJson(targetPackageJson)
+  const targetPkg = await fs.readJson(targetPackageJsonPath)
   const prettierPkg = await fs.readJson(path.join(templatePrettierPath, 'package.json'))
 
   // 添加package.json的内容
@@ -25,12 +25,11 @@ const addPrettier = async (projectName, useEslint, flag) => {
     ...prettierPkg.devDependencies,
   }
 
-  await fs.writeJson(targetPackageJson, targetPkg, { spaces: 2 })
+  await fs.writeJson(targetPackageJsonPath, targetPkg, { spaces: 2 })
 
   // 复制.prettierignore文件
-  const prettierignore = path.join(templatePrettierPath, '.prettierignore')
-  fs.copy(prettierignore, path.join(targetPath, '.prettierignore'))
-
+  const prettierignorePath = path.join(templatePrettierPath, '.prettierignore')
+  fs.copy(prettierignorePath, path.join(targetPath, '.prettierignore'))
   // 复制.prettierrc.js文件
   const prettierrc = path.join(templatePrettierPath, '.prettierrc')
   fs.copy(prettierrc, path.join(targetPath, '.prettierrc.js'))

package/template/base/src/App.vue

@@ -1,47 +0,0 @@
-<script setup>
-import HelloWorld from './components/HelloWorld.vue'
-import TheWelcome from './components/TheWelcome.vue'
-</script>
-
-<template>
-  <header>
-    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
-
-    <div class="wrapper">
-      <HelloWorld msg="You did it!" />
-    </div>
-  </header>
-
-  <main>
-    <TheWelcome />
-  </main>
-</template>
-
-<style scoped>
-header {
-  line-height: 1.5;
-}
-
-.logo {
-  display: block;
-  margin: 0 auto 2rem;
-}
-
-@media (min-width: 1024px) {
-  header {
-    display: flex;
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
-  }
-
-  .logo {
-    margin: 0 2rem 0 0;
-  }
-
-  header .wrapper {
-    display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
-  }
-}
-</style>

package/template/base/src/main.js

@@ -1,6 +0,0 @@
-import './assets/main.css'
-
-import { createApp } from 'vue'
-import App from './App.vue'
-
-createApp(App).mount('#app')