Merge pull request #123 from MentorMate/106-vue-query

Add support for TanStack Query

README.md

@@ -32,6 +32,7 @@ npx @mentormate/create-vue
 * StoryBook - Frontend workshop for building UI components and pages in isolation (<https://storybook.js.org/>)
 * SonarQube - The code quality tool for better code (<https://www.sonarsource.com/products/sonarqube/>)
 * Husky - Modern native git hooks made easy (<https://typicode.github.io/husky/>)
+* TanStack Query - Powerful asynchronous state management (<https://tanstack.com/query/latest>)
 * Please submit an <a href="https://github.com/MentorMate/create-vue/issues">issue</a> if you would like to see other features to be supported
 
 ## Contribution

index.ts

@@ -81,6 +81,7 @@ async function init() {
   // --cypress
   // --nightwatch
   // --playwright
+  // --tanStackQuery
   // --force (for force overwriting)
   const argv = minimist(process.argv.slice(2), {
     alias: {
@@ -109,7 +110,8 @@ async function init() {
       argv.vueUse ??
       argv.i18n ??
       argv.storybook ??
-      argv.sonarQube
+      argv.sonarQube ??
+      argv.tanStackQuery
     ) === 'boolean'
 
   let targetDir = argv._[0]
@@ -131,6 +133,7 @@ async function init() {
     needsI18n?: boolean
     needsStorybook?: boolean
     needsSonarQube?: boolean
+    needsTanStackQuery?: boolean
   } = {}
 
   try {
@@ -149,6 +152,7 @@ async function init() {
     // - Add i18n - internationalization plugin?
     // - Add Storybook?
     // - Add SonarQube for code coverage?
+    // - Add TanStack Query - Hooks for fetching, caching and updating asynchronous data?
     result = await prompts(
       [
         {
@@ -287,6 +291,15 @@ async function init() {
           initial: false,
           active: 'Yes',
           inactive: 'No'
+        },
+        {
+          name: 'needsTanStackQuery',
+          type: () => (isFeatureFlagsUsed ? null : 'toggle'),
+          message:
+            'Add TanStack Query - Hooks for fetching, caching and updating asynchronous data?',
+          initial: false,
+          active: 'Yes',
+          inactive: 'No'
         }
       ],
       {
@@ -314,7 +327,8 @@ async function init() {
     needsVueUse = argv.vueUse,
     needsI18n = argv.i18n,
     needsStorybook = argv.storybook,
-    needsSonarQube = argv.SneedsSonarQube
+    needsSonarQube = argv.needsSonarQube,
+    needsTanStackQuery = argv.needsTanStackQuery
   } = result
 
   const { needsE2eTesting } = result
@@ -414,6 +428,10 @@ async function init() {
     render('config/sonarQube')
   }
 
+  if (needsTanStackQuery) {
+    render('config/tanStackQuery')
+  }
+
   // Render ESLint config
   // By default ESLint, Prettier and Husky will be added
   renderEslint(root, { needsTypeScript, needsCypress, needsCypressCT })
@@ -432,7 +450,8 @@ async function init() {
     generateIndex({
       needsPinia,
       needsRouter,
-      needsI18n
+      needsI18n,
+      needsTanStackQuery
     })
   )
 
@@ -528,7 +547,8 @@ async function init() {
       needsCypressCT,
       needsVueUse,
       needsI18n,
-      needsSonarQube
+      needsSonarQube,
+      needsTanStackQuery
     })
   )
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mentormate/create-vue",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "🛠️ Extended way to start a Vite-powered Vue project",
   "type": "module",
   "bin": {

template/config/tanStackQuery/package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "@tanstack/vue-query": "^5.8.3"
+  }
+}

utils/generateIndex.ts

@@ -1,4 +1,4 @@
-export default function generateIndex({ needsPinia, needsRouter, needsI18n }) {
+export default function generateIndex({ needsPinia, needsRouter, needsI18n, needsTanStackQuery }) {
   let indexFile = `
 import './assets/main.css'
 import { createApp } from 'vue'`
@@ -18,6 +18,11 @@ import router from './router'`
 import { createI18n } from 'vue-i18n'`
   }
 
+  if (needsTanStackQuery) {
+    indexFile += `
+import { VueQueryPlugin } from '@tanstack/vue-query'`
+  }
+
   indexFile += `
 import App from './App.vue'
 `
@@ -71,6 +76,11 @@ const i18n = createI18n({
 `
   }
 
+  if (needsTanStackQuery) {
+    indexFile += `app.use(VueQueryPlugin)
+`
+  }
+
   const mount = `app.mount('#app')`
 
   return (indexFile += mount)

utils/generateReadme.ts

@@ -27,7 +27,8 @@ export default function generateReadme({
   needsVitest,
   needsVueUse,
   needsI18n,
-  needsSonarQube
+  needsSonarQube,
+  needsTanStackQuery
 }) {
   const commandFor = (scriptName: string, args?: string) =>
     getCommand(packageManager, scriptName, args)
@@ -189,6 +190,12 @@ ${commandFor('lint')}
 ### Modern native git hooks made easy [Husky](https://typicode.github.io/husky/)
 `
 
+  if (needsTanStackQuery) {
+    npmScriptsDescriptions += `
+### Powerful asynchronous state management [TanStack Query](https://tanstack.com/query/latest)
+`
+  }
+
   https: readme += npmScriptsDescriptions
 
   return readme