feat: add tanstack vue query

selemondev · Mar 10, 2024 · a2ad6b9 · a2ad6b9
1 parent 6e00e75
commit a2ad6b9
Show file tree

Hide file tree

Showing 12 changed files with 75 additions and 77 deletions.
diff --git a/src/compile/common/frameQuestions.ts b/src/compile/common/frameQuestions.ts
@@ -32,17 +32,12 @@ export function getFilterFile() {
       fs.remove(`${options.dest}/src/components/__tests__`);
     }
 
-
-    if (!options.usePrettier) {
-      fs.remove(`${options.dest}/.prettierrc.js`)
-    }
-
     if (!options.usePinia) {
       fs.remove(`${options.dest}/src/stores`)
     }
 
     if (!options.useEslint) {
-      fs.remove(`${options.dest}/.eslintrc.js`)
+      fs.remove(`${options.dest}/.eslintrc.cjs`)
     }
     return true
   }

diff --git a/src/core/questions/vue/index.ts b/src/core/questions/vue/index.ts
@@ -9,8 +9,8 @@ import createQuestion from '../../../utils/question';
 async function getVueProperty() {
   const Eslint = packageJsonMap.get('eslintJsVue');
   const EslintTs = packageJsonMap.get('eslintTsPlugin');
-  const Prettier = packageJsonMap.get('prettier');
   const Vitest = packageJsonMap.get('vitest');
+  const TanStackVueQuery = packageJsonMap.get('tanStackVueQuery');
   const Router = packageJsonMap.get('router');
   const Pinia = packageJsonMap.get('pinia');
   const Tailwind = packageJsonMap.get('tailwind');
@@ -25,16 +25,14 @@ async function getVueProperty() {
 
   options.constantProDeps = packageJsonMap.get('constantProDeps')
 
-  options.EslintWithPrettierScript = packageJsonMap.get('eslintWithPrettier')
-
   options.Eslint = options.useTypeScript ? EslintTs : Eslint
 
-  options.Prettier = Prettier
-
   options.Vitest = Vitest
 
   options.Router = Router
 
+  options.TanStackVueQuery = TanStackVueQuery
+
   options.Pinia = Pinia
 
   options.Tailwind = Tailwind;

diff --git a/src/core/questions/vue/prompts.ts b/src/core/questions/vue/prompts.ts
@@ -34,25 +34,26 @@ const prompt = [
     },
 
     {
-        name: 'useVitest',
+        name: 'useTanStackVueQuery',
         type: () => 'toggle',
-        message: 'Add Vitest for unit testing?',
+        message: 'Add TanStack Vue Query for server state management?',
         initial: false,
         active: 'Yes',
         inactive: 'No'
     },
+
     {
-        name: 'useEslint',
+        name: 'useVitest',
         type: () => 'toggle',
-        message: 'Add ESLint for code quality?',
+        message: 'Add Vitest for unit testing?',
         initial: false,
         active: 'Yes',
         inactive: 'No'
     },
     {
-        name: 'usePrettier',
+        name: 'useEslint',
         type: () => 'toggle',
-        message: 'Add Prettier for code formatting?',
+        message: 'Add ESLint for code quality?',
         initial: false,
         active: 'Yes',
         inactive: 'No'

diff --git a/src/core/utils/vue/ejsMapConstant.ts b/src/core/utils/vue/ejsMapConstant.ts
@@ -30,10 +30,6 @@ const lintMap = new Map([
     'EslintScript',
     '"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",'
   ],
-  [
-    'PrettierScript',
-    '"prettier": "prettier --write ./**/*.{html,vue,ts,js,json,md}",'
-  ],
 
   [
     'VitestScript',

diff --git a/src/core/utils/vue/options.ts b/src/core/utils/vue/options.ts
@@ -7,7 +7,7 @@ interface Options {
     Pinia?: string
     Eslint?: string
     Vitest?: string
-    Prettier?: string
+    TanStackVueQuery?: string
     name?: string
     version?: string
     src?: string
@@ -16,17 +16,16 @@ interface Options {
     package?: 'bun' | 'pnpm' | 'npm' | 'yarn' | 'none'
     useEslint?: boolean
     useEslintTs?: boolean
-    usePrettier?: boolean
     useRouter?: boolean
+    useVueQuery?: boolean
     useTailwind?: boolean
     useTypeScript?: boolean
     useJavaScript?: boolean
+    useTanStackVueQuery?: string
     useVitest?: string
     useGitInit?: boolean
     usePinia?: boolean
     EslintScript?: string
-    PrettierScript?: string
-    EslintWithPrettierScript?: string
     constantDevDeps?: string
     constantProDeps?: string
   }

diff --git a/src/deps/vue/dependencies.ts b/src/deps/vue/dependencies.ts
@@ -12,13 +12,6 @@ const pinia = {
     env: 'pro'
 }
 
-const prettier = {
-    name: 'prettier',
-    version: '^3.1.1',
-    stableVersion: '^3.1.1',
-    env: 'dev'
-}
-
 const eslintJsVue = {
     name: ['eslint-plugin-vue', 'eslint'],
     version: ["^9.17.0", "^8.49.0"],
@@ -49,19 +42,12 @@ const tailwind = {
     env: ['dev', 'dev', 'dev']
 }
 
-const eslintWithPrettier = {
-    name: ['eslint-config-prettier', 'eslint-plugin-prettier'],
-    version: ['^9.1.0', '^5.0.1'],
-    stableVersion: ['^8.5.0', '^4.2.1'],
-    env: 'dev'
-};
-
 const typescript = {
     name: [
         'typescript', 'vue-tsc', '@tsconfig/node20', "@vue/tsconfig", "npm-run-all2", '@types/node'
     ],
-    version: ['^5.3.3', '^1.8.25', "^20.1.2", "^0.5.1", "^6.1.1", "^20.11.10"],
-    stableVersion: ['^5.3.3', '^1.8.25', "^20.1.2", "^0.5.1", "^6.1.1", "^20.11.10"],
+    version: ['~5.3.0', '^1.8.25', "^20.1.2", "^0.5.1", "^6.1.1", "^20.11.10"],
+    stableVersion: ['~5.3.0', '^1.8.25', "^20.1.2", "^0.5.1", "^6.1.1", "^20.11.10"],
     dev: ['dev', 'dev', 'dev', 'dev', 'dev', 'dev', 'dev', 'dev']
 }
 
@@ -72,6 +58,16 @@ const javascript = {
     dev: []
 };
 
+const tanStackVueQuery = {
+    name: [
+        "@tanstack/vue-query",
+        "@tanstack/vue-query-devtools"
+    ],
+    version: ["^5.25.0", "^5.25.0"],
+    stableVersion: ["^5.25.0", "^5.25.0"],
+    dev: ['pro', 'pro']
+}
+
 const vitest = {
     name: ['vitest', 'jsdom', "@vue/test-utils"],
     version: ["^1.2.2", "^24.0.0", "^2.4.4"],
@@ -94,14 +90,13 @@ const constantProDeps = {
 export {
     constantDevDeps,
     constantProDeps,
-    eslintWithPrettier,
     tailwind,
     eslintTsPlugin,
     javascript,
     typescript,
     vitest,
+    tanStackVueQuery,
     eslintJsVue,
-    prettier,
     pinia,
     router
 }
diff --git a/template/vue-js/package.ejs b/template/vue-js/package.ejs
@@ -13,9 +13,6 @@
     <% if (useVitest) { -%>
     <%- VitestScript %>
     <% } -%>
-    <% if (usePrettier) { -%>
-    <%- PrettierScript %>
-    <% } -%>
     <% if (useTypeScript) { -%>
     <%- TypeScriptScript %>
     <% } -%>
@@ -28,6 +25,9 @@
     <% if (usePinia) { -%>
     <%- Pinia %>
     <% } -%>
+    <% if (useTanStackVueQuery) { -%>
+    <%- TanStackVueQuery %>
+    <% } -%>
   },
   "devDependencies": {
     <% if (useTypeScript) { -%>
@@ -36,15 +36,9 @@
     <% if (useEslint) { -%>
       <%- Eslint %>
     <% } -%>
-    <% if (usePrettier) { -%>
-      <%- Prettier %>
-    <% } -%>
     <% if (useTailwind) { -%>
       <%- Tailwind %>
     <% } -%>
-    <% if (usePrettier && useEslint) { -%>
-      <%- EslintWithPrettierScript %>
-    <% } -%>
     <% if (useJavaScript) { -%>
       <%- JavaScript %>
     <% } -%>

diff --git a/template/vue-js/src/App.ejs b/template/vue-js/src/App.ejs
@@ -4,6 +4,10 @@
       -%>
     import HomeView from '@/views/HomeView.vue'
     <% } -%>
+    <% if (useTanStackVueQuery) {
+      -%>
+      import { VueQueryDevtools } from '@tanstack/vue-query-devtools'
+    <% } -%>
   </script>
   <% } -%>
 
@@ -24,6 +28,9 @@
               <% if (useRouter) { -%>
                 <RouterView />
                 <% } -%>
+                <% if (useTanStackVueQuery) { -%>
+                  <VueQueryDevtools />
+                  <% } -%>
         </template>
 
         <style>

diff --git a/template/vue-js/src/main.ejs b/template/vue-js/src/main.ejs
@@ -5,6 +5,9 @@ import { createApp } from 'vue'
 <% if (!useTailwind ) { -%>
     import './assets/css/base.css'
 <% } -%>
+<% if (useTanStackVueQuery) { -%>
+    import { VueQueryPlugin } from '@tanstack/vue-query'
+<% } -%>
 import App from './App.vue'
 <% if ( usePinia ) { -%>
     import { createPinia } from 'pinia';
@@ -20,4 +23,7 @@ import App from './App.vue'
                         <% if (useRouter) { -%>
                            app.use(router)
                             <% } -%>
+                            <% if (useTanStackVueQuery) { -%>
+                                app.use(VueQueryPlugin)
+                                <% } -%>
                                 app.mount('#app')
diff --git a/template/vue-ts/package.ejs b/template/vue-ts/package.ejs
@@ -13,9 +13,6 @@
     <% if (useVitest) { -%>
     <%- VitestScript %>
     <% } -%>
-    <% if (usePrettier) { -%>
-    <%- PrettierScript %>
-    <% } -%>
     <% if (useTypeScript) { -%>
     <%- TypeScriptScript %>
     <% } -%>
@@ -28,6 +25,9 @@
     <% if (usePinia) { -%>
     <%- Pinia %>
     <% } -%>
+    <% if (useTanStackVueQuery) { -%>
+    <%- TanStackVueQuery %>
+    <% } -%>
   },
   "devDependencies": {
     <%- constantDevDeps %>
@@ -37,15 +37,9 @@
     <% if (useEslint) { -%>
       <%- Eslint %>
     <% } -%>
-    <% if (usePrettier) { -%>
-      <%- Prettier %>
-    <% } -%>
     <% if (useTailwind) { -%>
       <%- Tailwind %>
     <% } -%>
-    <% if (usePrettier && useEslint) { -%>
-      <%- EslintWithPrettierScript %>
-    <% } -%>
     <% if (useJavaScript) { -%>
       <%- JavaScript %>
     <% } -%>

diff --git a/template/vue-ts/src/App.ejs b/template/vue-ts/src/App.ejs
@@ -4,6 +4,10 @@
       -%>
     import HomeView from '@/views/HomeView.vue'
     <% } -%>
+    <% if (useTanStackVueQuery) {
+      -%>
+      import { VueQueryDevtools } from '@tanstack/vue-query-devtools'
+    <% } -%>
   </script>
   <% } -%>
 
@@ -24,6 +28,9 @@
       <% if (useRouter) { -%>
         <RouterView />
         <% } -%>
+        <% if (useTanStackVueQuery) { -%>
+          <VueQueryDevtools />
+          <% } -%>
 </template>
 
 <style>

diff --git a/template/vue-ts/src/main.ejs b/template/vue-ts/src/main.ejs
@@ -1,23 +1,29 @@
 import { createApp } from 'vue'
 <% if ( useTailwind ) { -%>
     import './assets/css/tailwind.css'
-<% } -%>
-<% if (!useTailwind ) { -%>
-    import './assets/css/base.css'
-<% } -%>
-import App from './App.vue'
-<% if ( usePinia ) { -%>
-    import { createPinia } from 'pinia';
     <% } -%>
-        <% if (useRouter) { -%>
-            import router from "./router";
+        <% if (!useTailwind ) { -%>
+            import './assets/css/base.css'
             <% } -%>
-                const app = createApp(App)
-                <% if ( usePinia ) { -%>
-                    app.use(createPinia())
+                <% if (useTanStackVueQuery) { -%>
+                    import { VueQueryPlugin } from '@tanstack/vue-query'
                     <% } -%>
-
-                        <% if (useRouter) { -%>
-                           app.use(router)
+                        import App from './App.vue'
+                        <% if ( usePinia ) { -%>
+                            import { createPinia } from 'pinia';
                             <% } -%>
-                                app.mount('#app')
+                                <% if (useRouter) { -%>
+                                    import router from "./router";
+                                    <% } -%>
+                                        const app = createApp(App)
+                                        <% if ( usePinia ) { -%>
+                                            app.use(createPinia())
+                                            <% } -%>
+
+                                                <% if (useRouter) { -%>
+                                                    app.use(router)
+                                                    <% } -%>
+                                                    <% if (useTanStackVueQuery) { -%>
+                                                        app.use(VueQueryPlugin)
+                                                        <% } -%>
+                                                        app.mount('#app')