feat: support initialization with pinia (#143)

* feat: support initialization with pinia

* fix: format

* fix: remove comment

Author: konpeki622

packages/cli-test-utils/getPluginConfig.ts

@@ -7,21 +7,12 @@ import {
   federationOption,
   PluginChoiceOption,
 } from '../cli/src/config/plugins'
+import { defaultOptions } from '../cli/src/commands/init'
 
-export const defaultOptions: any = {
-  name: '',
-  version: '1.0.0',
-  license: 'ISC',
-  plugins: [],
-  test: 'none',
+export const defaultOptionsForTest: any = {
+  ...defaultOptions,
   // NOTE: the default value of federationType is only used in test
   federationType: 'Host',
-  pagesPluginImported: false,
-  globalStylePluginImported: false,
-  componentsPluginImported: false,
-  contentPluginImported: false,
-  markdownPluginImported: false,
-  federationPluginImported: false,
 }
 
 const TO_BE_ADDED_PLUGINS: PluginChoiceOption[] = [
@@ -50,7 +41,7 @@ const pluginCompositions: Array<PluginChoiceOption[]> = getPluginCompositions()
 export function getConfigs(includes?: string[], excludes?: string[]): any[] {
   const resultConfigs: any[] = []
   pluginCompositions.forEach((composition, index) => {
-    const config: any = Object.assign({}, defaultOptions)
+    const config: any = Object.assign({}, defaultOptionsForTest)
     config.name = `test_plugins_${index + 1}`
     config.plugins = composition
     config.plugins.forEach((plugin: PluginChoiceOption) => {

packages/cli/__tests__/__snapshots__/cli.spec.ts.snap

@@ -17,22 +17,6 @@ Commands:
 "
 `;
 
-exports[`ori -h > A1 1`] = `
-"Usage: ori <command> [options]
-
-Options:
-  -h, --help                 display help for command
-
-Commands:
-  init [options] <app-name>  init a new project
-  dev [options]              alias of \\"ori dev\\" in the current project
-  build                      alias of \\"ori build\\" in the current project
-  tovite [options]           use vite in the current project
-  tovue3 [options]           use vue-next in the current project
-  help [command]             display help for command
-"
-`;
-
 exports[`ori build --help > A7 1`] = `
 "Usage: ori build [options]
 
@@ -187,7 +171,7 @@ exports[`ori init with all plugins > A3 3`] = `
     \\"vue\\": \\"^3.0.5\\",
     \\"vue-i18n\\": \\"^9.2.0-beta.15\\",
     \\"vue-router\\": \\"^4.0.11\\",
-    \\"vuex\\": \\"^4.0.2\\"
+    \\"pinia\\": \\"^2.0.13\\"
   },
   \\"devDependencies\\": {
     \\"@originjs/vite-plugin-global-style\\": \\"^1.0.2\\",
@@ -384,7 +368,7 @@ exports[`ori init without plugins > A4 3`] = `
     \\"vue\\": \\"^3.0.5\\",
     \\"vue-i18n\\": \\"^9.2.0-beta.15\\",
     \\"vue-router\\": \\"^4.0.11\\",
-    \\"vuex\\": \\"^4.0.2\\"
+    \\"pinia\\": \\"^2.0.13\\"
   },
   \\"devDependencies\\": {
     \\"@intlify/vue-i18n-loader\\": \\"^3.0.0\\",

packages/cli/__tests__/cli.spec.ts

@@ -7,7 +7,7 @@ import create from '../../cli-test-utils/createTestProject'
 import runServer from '../../cli-test-utils/createTestProjectServer'
 import runBuild from '../../cli-test-utils/buildTestProject'
 import {
-  defaultOptions,
+  defaultOptionsForTest,
   getConfigs,
 } from '../../cli-test-utils/getPluginConfig'
 import { formatToLf } from '../src/utils/formatCrlf'
@@ -156,6 +156,43 @@ test('ori init without plugins', async () => {
   expect(project.has('src/assets/originjs_readme.md')).toEqual(false)
 }, 10000)
 
+test('ori init with store utils', async () => {
+  const storeConfigs = ['pinia', 'vuex', 'none']
+  const ProjectPath = path.join(
+    process.cwd(),
+    'packages',
+    'cli-test-utils',
+    DEMO_PATH,
+  )
+
+  for (const value of storeConfigs) {
+    const config = Object.assign({}, defaultOptionsForTest, { store: value })
+    await initializeModules(`store_utils_${value}`, config, true, ProjectPath)
+    try {
+      // skip files
+      expect(
+        fs.pathExistsSync(
+          path.join(ProjectPath, `store_utils_${value}`, 'src/store'),
+        ),
+      ).toEqual(value !== 'none')
+      if (value === 'none') {
+        continue
+      }
+      const storeContent = formatToLf(fs.readFileSync(
+        path.join(ProjectPath, `store_utils_${value}`, 'src/store/index.ts'), 'utf-8'))
+      if (value === 'pinia') {
+        expect(storeContent).toMatch(results.storeCreationImportWithPinia)
+        expect(formatToLf(storeContent)).toMatch(results.storeCreationWithPinia)
+      } else if (value === 'store') {
+        expect(storeContent).toMatch(results.storeCreationImportWithVuex)
+        expect(formatToLf(storeContent)).toMatch(results.storeCreationWithVuex)
+      }
+    } finally {
+      fs.remove(path.join(ProjectPath, `store_utils_${value}`))
+    }
+  }
+}, 30000)
+
 test('ori init with test utils', async () => {
   const testConfigs = ['none', 'jest', 'vitest']
   const ProjectPath = path.join(
@@ -166,13 +203,13 @@ test('ori init with test utils', async () => {
   )
 
   for (const value of testConfigs) {
-    const config = Object.assign({}, defaultOptions, { test: value })
+    const config = Object.assign({}, defaultOptionsForTest, { test: value })
     await initializeModules(`test_utils_${value}`, config, true, ProjectPath)
-    const packageJsonContent = fs.readFileSync(
-      path.join(ProjectPath, `test_utils_${value}`, 'package.json'), 'utf-8')
-    const viteConfigContent = formatToLf(fs.readFileSync(
-      path.join(ProjectPath, `test_utils_${value}`, 'vite.config.ts'), 'utf-8'))
     try {
+      const packageJsonContent = fs.readFileSync(
+        path.join(ProjectPath, `test_utils_${value}`, 'package.json'), 'utf-8')
+      const viteConfigContent = formatToLf(fs.readFileSync(
+        path.join(ProjectPath, `test_utils_${value}`, 'vite.config.ts'), 'utf-8'))
       if (value === 'jest') {
         expect(packageJsonContent).toMatch(results.packageJsonScriptWithJest)
       } else if (value === 'vitest') {

packages/cli/__tests__/results.ts

@@ -66,6 +66,16 @@ const viteConfigWithVitest = `test: {
     global: true
   }`
 
+const storeCreationImportWithVuex = `import { createStore } from 'vuex'`
+const storeCreationImportWithPinia = `import { createPinia } from 'pinia'`
+const storeCreationWithVuex = `export default createStore({
+  state: {},
+  mutations: {},
+  actions: {},
+  modules: {},
+})`
+const storeCreationWithPinia = `export default createPinia()`
+
 const serverRunning = `dev server running at:`
 const serverUpdated = `hmr update /src/App.vue`
 
@@ -101,6 +111,10 @@ export default {
   packageJsonScriptWithJest,
   packageJsonScriptWithVitest,
   viteConfigWithVitest,
+  storeCreationImportWithVuex,
+  storeCreationImportWithPinia,
+  storeCreationWithPinia,
+  storeCreationWithVuex,
   serverRunning,
   serverUpdated,
 }

packages/cli/oriTemplate/__package.json

@@ -23,7 +23,11 @@
     "vue": "^3.0.5",
     "vue-i18n": "^9.2.0-beta.15",
     "vue-router": "^4.0.11",
+    <%_ if (store == 'pinia') { _%>
+    "pinia": "^2.0.13"
+    <%_ } else if (store === 'vuex') { _%>
     "vuex": "^4.0.2"
+    <%_ } _%>
   },
   "devDependencies": {
     <%_ plugins.forEach(function(plugin) { _%>

packages/cli/oriTemplate/src/store/__index.ts

@@ -0,0 +1,14 @@
+<%_ if (store === 'pinia') { _%>
+import { createPinia } from 'pinia'
+
+export default createPinia()
+<%_ } else if (store === 'vuex') { _%>
+import { createStore } from 'vuex'
+
+export default createStore({
+  state: {},
+  mutations: {},
+  actions: {},
+  modules: {},
+})
+<%_ } _%>

packages/cli/oriTemplate/src/store/index.ts

@@ -21,11 +21,12 @@ type InitCliOptions = {
   uninstalled?: boolean
 }
 
-const defaultOptions: any = {
+export const defaultOptions: any = {
   name: '',
   version: '1.0.0',
   license: 'ISC',
   test: 'none',
+  store: 'pinia',
   plugins: [],
   pagesPluginImported: false,
   globalStylePluginImported: false,
@@ -54,6 +55,7 @@ export function cpdir(
       fs.mkdirSync(path.join(dirNew, name))
       resolve('Successfully created the folder!')
       dirNew = path.join(dirNew, name)
+      // file or directory that will be skipped
       const skipFiles: Array<string> = getSkipFilesWithRelativePath()
       walkDir(dirOld, dirNew, skipFiles)
     } catch (err) {
@@ -65,13 +67,20 @@ export function cpdir(
     function getSkipFilesWithRelativePath(): Array<string> {
       const skipFiles = []
 
+      // test
       if (config.test !== 'jest') {
         skipFiles.push('babel.config.js', 'jest.config.js', 'shim.d.ts')
       }
       if (config.test === 'none') {
         skipFiles.push('test')
       }
 
+      // store
+      if (config.store === 'none') {
+        skipFiles.push('src/store')
+      }
+
+      // plugins
       if (!config.pagesPluginImported) {
         skipFiles.push(
           'src/pages/users',

packages/cli/src/commands/init.ts

@@ -35,9 +35,9 @@ export const promptList: Array<QuestionCollection> = [
   },
   {
     type: 'list',
-    message: 'Please choose the test utils you want to use:',
-    name: 'test',
-    choices: ['none', 'jest', 'vitest'],
+    message: 'Please choose Vue Store:',
+    name: 'store',
+    choices: ['pinia', 'vuex', 'none'],
     filter: (val: any) => {
       return val
     },
@@ -102,4 +102,13 @@ export const promptList: Array<QuestionCollection> = [
       return federationSelected
     },
   },
+  {
+    type: 'list',
+    message: 'Please choose the test utils you want to use:',
+    name: 'test',
+    choices: ['none', 'jest', 'vitest'],
+    filter: (val: any) => {
+      return val
+    },
+  },
 ]