diff --git a/README.md b/README.md index cc60d18e..54658ce7 100644 --- a/README.md +++ b/README.md @@ -32,6 +32,7 @@ npx @mentormate/create-vue * StoryBook - Frontend workshop for building UI components and pages in isolation () * SonarQube - The code quality tool for better code () * Husky - Modern native git hooks made easy () +* TanStack Query - Powerful asynchronous state management () * Please submit an issue if you would like to see other features to be supported ## Contribution diff --git a/index.ts b/index.ts index 7df43231..e3f9d315 100755 --- a/index.ts +++ b/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 }) ) diff --git a/package-lock.json b/package-lock.json index a36c9112..b4a2be30 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@mentormate/create-vue", - "version": "0.2.0", + "version": "0.3.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@mentormate/create-vue", - "version": "0.2.0", + "version": "0.3.0", "license": "MIT", "bin": { "create-vue": "outfile.cjs" diff --git a/package.json b/package.json index de7486ad..6f9df5b8 100644 --- a/package.json +++ b/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": { diff --git a/template/config/tanStackQuery/package.json b/template/config/tanStackQuery/package.json new file mode 100644 index 00000000..85bc3c71 --- /dev/null +++ b/template/config/tanStackQuery/package.json @@ -0,0 +1,5 @@ +{ + "dependencies": { + "@tanstack/vue-query": "^5.8.3" + } +} diff --git a/utils/generateIndex.ts b/utils/generateIndex.ts index d5117a07..60c07c6a 100644 --- a/utils/generateIndex.ts +++ b/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) diff --git a/utils/generateReadme.ts b/utils/generateReadme.ts index fccca302..630e0ee3 100644 --- a/utils/generateReadme.ts +++ b/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