feat: Add Pinia support

app-vite/bin/quasar-info

@@ -82,6 +82,7 @@ print({ key: 'Important local packages', section: true })
   'eslint-plugin-quasar',
   'vue',
   'vue-router',
+  'pinia',
   'vuex',
   'vite',
   'eslint',

app-vite/bin/quasar-new

@@ -64,6 +64,7 @@ const fse = require('fs-extra')
 
 const { log, warn } = require('../lib/helpers/logger')
 const appPaths = require('../lib/app-paths')
+const getPackageJson = require('../lib/helpers/get-package-json')
 const defaultFilePath = 'default'
 
 if (argv._.length < 2) {
@@ -114,6 +115,8 @@ if (type.length === 1) {
   type = fullCmd[type]
 }
 
+const storeProvider = getPackageJson('vuex') !== void 0 ? 'vuex' : 'pinia'
+
 function getPaths (asset, names) {
   return names.map(name => {
     const hasExtension = !asset.ext || (asset.ext && name.endsWith(asset.ext))
@@ -133,8 +136,16 @@ function createFile (asset, file) {
   }
 
   fse.mkdirp(path.dirname(file))
+  let templatePath = path.join('templates/app', format)
+
+  if (type === 'store') {
+    templatePath = path.join(templatePath, 'store', storeProvider)
+  } else {
+    templatePath = path.join(templatePath, type + (asset.ext || ''))
+  }
+
   fse.copy(
-    appPaths.resolve.cli(path.join('templates/app', format, type + (asset.ext || ''))),
+    appPaths.resolve.cli(templatePath),
     file,
     err => {
       if (err) {
@@ -198,10 +209,15 @@ const filesToCreate = getPaths(asset, names)
 if (asset.install) {
   const folder = appPaths.resolve.app(asset.folder)
 
+  if (getPackageJson(storeProvider) === void 0) {
+    // TODO: Automatically install the package for the user
+    warn(`Don't forget to install "${storeProvider}" package.`)
+  }
+
   if (!fs.existsSync(folder)) {
     fse.mkdirp(folder)
     fse.copy(
-      appPaths.resolve.cli(`templates/store/${format}`),
+      appPaths.resolve.cli(`templates/store/${storeProvider}/${format}`),
       folder,
       err => {
         if (err) {

app-vite/lib/helpers/types-feature-flags.js

@@ -32,7 +32,7 @@ module.exports = function regenerateTypesFeatureFlags(quasarConf) {
     const [isFeatureInstalled, sourceFlagPath, destFlagPath] = feature === 'store'
       ? [
         quasarConf.store,
-        appPaths.resolve.cli('templates/store/ts/store-flag.d.ts'),
+        appPaths.resolve.cli('templates/store/store-flag.d.ts'),
         appPaths.resolve.app(getStoreFlagPath(quasarConf.sourceFiles.store))
       ]
       : [

app-vite/lib/quasar-config-file.js

@@ -500,7 +500,7 @@ class QuasarConfFile {
       return { error: 'Files validation not passed successfully' }
     }
 
-    // do we have vuex?
+    // do we have a store?
     const storePath = appPaths.resolve.app(cfg.sourceFiles.store)
     cfg.store = resolveExtension(storePath) !== void 0
 

app-vite/package.json

@@ -82,6 +82,7 @@
   "devDependencies": {
     "electron-builder": "22.14.13",
     "electron-packager": "^15.3.0",
+    "pinia": "^2.0.0",
     "quasar": "^2.0.4",
     "ts-essentials": "^9.1.2",
     "vue": "^3.0.0",

app-vite/templates/app/default/store/pinia/index.js

@@ -0,0 +1,15 @@
+import { defineStore } from 'pinia';
+
+export const useCounterStore = defineStore('counter', {
+  state: () => ({
+    counter: 0,
+  }),
+  getters: {
+    doubleCount: (state) => state.counter * 2,
+  },
+  actions: {
+    increment() {
+      this.counter++;
+    },
+  },
+});

app-vite/templates/app/ts/store/pinia/index.ts

@@ -0,0 +1,15 @@
+import { defineStore } from 'pinia';
+
+export const useCounterStore = defineStore('counter', {
+  state: () => ({
+    counter: 0,
+  }),
+  getters: {
+    doubleCount: (state) => state.counter * 2,
+  },
+  actions: {
+    increment() {
+      this.counter++;
+    },
+  },
+});

app-vite/templates/entry/app.js

@@ -71,7 +71,7 @@ export default async function (createAppFn, quasarUserOptions<%= ctx.mode.ssr ?
     ? await createStore({<%= ctx.mode.ssr ? 'ssrContext' : '' %>})
     : createStore
 
-  // obtain Vuex injection key in case we use TypeScript
+  // obtain Vuex injection key in case we use TypeScript, not used for Pinia
   const { storeKey } = await import('app/<%= sourceFiles.store %>');
   <% } %>
   const router = typeof createRouter === 'function'

app-vite/templates/store/pinia/default/index.js

@@ -0,0 +1,20 @@
+import { store } from 'quasar/wrappers'
+import { createPinia } from 'pinia'
+
+/*
+ * If not building with SSR mode, you can
+ * directly export the Store instantiation;
+ *
+ * The function below can be async too; either use
+ * async/await or return a Promise which resolves
+ * with the Store instance.
+ */
+
+export default store((/* { ssrContext } */) => {
+  const pinia = createPinia()
+
+  // You can add Pinia plugins here
+  // pinia.use(SomePiniaPlugin)
+
+  return pinia
+})

app-vite/templates/store/pinia/ts/index.ts

@@ -0,0 +1,20 @@
+import { store } from 'quasar/wrappers'
+import { createPinia } from 'pinia'
+
+/*
+ * If not building with SSR mode, you can
+ * directly export the Store instantiation;
+ *
+ * The function below can be async too; either use
+ * async/await or return a Promise which resolves
+ * with the Store instance.
+ */
+
+export default store((/* { ssrContext } */) => {
+  const pinia = createPinia()
+
+  // You can add Pinia plugins here
+  // pinia.use(SomePiniaPlugin)
+
+  return pinia
+})

app-vite/templates/store/ts/index.ts → app-vite/templates/store/vuex/ts/index.ts

@@ -51,4 +51,4 @@ export default store(function (/* { ssrContext } */) {
 
 export function useStore() {
   return vuexUseStore(storeKey)
-}
+}

app-vite/types/store.d.ts

@@ -1,16 +1,21 @@
 import { HasStore } from "quasar";
+import { Pinia } from "pinia";
 import { Store } from "vuex";
 import { HasSsrParam } from "./ssr";
 
+// If Pinia is installed, its type will be resolved, thus it will be used.
+// Otherwise, if Vuex is installed, it will be used. If nothing is installed, 'any' will be used.
+type StoreInstance<S = any> = unknown extends Pinia ? Store<S> : Pinia;
+
 export type HasStoreParam<S = any> = HasStore<{
   /**
-   * The state of the Vuex store, gets filled in by Vuex itself
+   * The store instance.
    */
-  store: Store<S>;
+  store: StoreInstance<S>;
 }>;
 
 export type StoreParams = {} & HasSsrParam;
 
 export type StoreCallback = (
   params: StoreParams
-) => Store<any> | Promise<Store<any>>;
+) => StoreInstance | Promise<StoreInstance>;

app-webpack/bin/quasar-info

@@ -82,6 +82,7 @@ print({ key: 'Important local packages', section: true })
   'eslint-plugin-quasar',
   'vue',
   'vue-router',
+  'pinia',
   'vuex',
   'electron',
   'electron-packager',

app-webpack/bin/quasar-new

@@ -64,6 +64,7 @@ const fse = require('fs-extra')
 
 const { log, warn } = require('../lib/helpers/logger')
 const appPaths = require('../lib/app-paths')
+const getPackageJson = require('../lib/helpers/get-package-json')
 const defaultFilePath = 'default'
 
 if (argv._.length < 2) {
@@ -114,6 +115,8 @@ if (type.length === 1) {
   type = fullCmd[type]
 }
 
+const storeProvider = getPackageJson('vuex') !== void 0 ? 'vuex' : 'pinia'
+
 function getPaths (asset, names) {
   return names.map(name => {
     const hasExtension = !asset.ext || (asset.ext && name.endsWith(asset.ext))
@@ -133,8 +136,16 @@ function createFile (asset, file) {
   }
 
   fse.mkdirp(path.dirname(file))
+  let templatePath = path.join('templates/app', format)
+
+  if (type === 'store') {
+    templatePath = path.join(templatePath, 'store', storeProvider)
+  } else {
+    templatePath = path.join(templatePath, type + (asset.ext || ''))
+  }
+
   fse.copy(
-    appPaths.resolve.cli(path.join('templates/app', format, type + (asset.ext || ''))),
+    appPaths.resolve.cli(templatePath),
     file,
     err => {
       if (err) {
@@ -198,10 +209,15 @@ const filesToCreate = getPaths(asset, names)
 if (asset.install) {
   const folder = appPaths.resolve.app(asset.folder)
 
+  if (getPackageJson(storeProvider) === void 0) {
+    // TODO: Automatically install the package for the user
+    warn(`Don't forget to install "${storeProvider}" package.`)
+  }
+
   if (!fs.existsSync(folder)) {
     fse.mkdirp(folder)
     fse.copy(
-      appPaths.resolve.cli(`templates/store/${format}`),
+      appPaths.resolve.cli(`templates/store/${storeProvider}/${format}`),
       folder,
       err => {
         if (err) {

app-webpack/lib/helpers/types-feature-flags.js

@@ -28,7 +28,7 @@ module.exports = function regenerateTypesFeatureFlags(quasarConf) {
     const [isFeatureInstalled, sourceFlagPath, destFlagPath] = feature === 'store'
       ? [
         quasarConf.store,
-        appPaths.resolve.cli('templates/store/ts/store-flag.d.ts'),
+        appPaths.resolve.cli('templates/store/store-flag.d.ts'),
         appPaths.resolve.app(getStoreFlagPath(quasarConf.sourceFiles.store))
       ]
       : [

app-webpack/lib/quasar-conf-file.js

@@ -530,7 +530,7 @@ class QuasarConfFile {
 
     appFilesValidations(cfg)
 
-    // do we got vuex?
+    // do we have a store?
     const storePath = appPaths.resolve.app(cfg.sourceFiles.store)
     cfg.store = (
       fs.existsSync(storePath) ||

app-webpack/lib/webpack/create-chain.js

@@ -110,7 +110,7 @@ module.exports = function (cfg, configName) {
     .merge(resolveModules)
 
   chain.module.noParse(
-    /^(vue|vue-router|vuex|vuex-router-sync|@quasar[\\/]extras|quasar[\\/]dist)$/
+    /^(vue|vue-router|pinia|vuex|vuex-router-sync|@quasar[\\/]extras|quasar[\\/]dist)$/
   )
 
   const vueRule = chain.module.rule('vue')

app-webpack/package.json

@@ -111,6 +111,7 @@
   "devDependencies": {
     "electron-builder": "22.14.13",
     "electron-packager": "^15.3.0",
+    "pinia": "^2.0.0",
     "quasar": "^2.0.4",
     "ts-essentials": "^9.1.2",
     "vue": "^3.0.0",

app-webpack/templates/app/default/store/pinia/index.js

@@ -0,0 +1,15 @@
+import { defineStore } from 'pinia';
+
+export const useCounterStore = defineStore('counter', {
+  state: () => ({
+    counter: 0,
+  }),
+  getters: {
+    doubleCount: (state) => state.counter * 2,
+  },
+  actions: {
+    increment() {
+      this.counter++;
+    },
+  },
+});

app-webpack/templates/app/ts/store/pinia/index.ts

@@ -0,0 +1,15 @@
+import { defineStore } from 'pinia';
+
+export const useCounterStore = defineStore('counter', {
+  state: () => ({
+    counter: 0,
+  }),
+  getters: {
+    doubleCount: (state) => state.counter * 2,
+  },
+  actions: {
+    increment() {
+      this.counter++;
+    },
+  },
+});

app-webpack/templates/entry/app.js

@@ -70,7 +70,7 @@ export default async function (createAppFn, quasarUserOptions<%= ctx.mode.ssr ?
     ? await createStore({<%= ctx.mode.ssr ? 'ssrContext' : '' %>})
     : createStore
 
-  // obtain Vuex injection key in case we use TypeScript
+  // obtain Vuex injection key in case we use TypeScript, not used for Pinia
   const { storeKey } = await import('app/<%= sourceFiles.store %>');
   <% } %>
   const router = typeof createRouter === 'function'

app-webpack/templates/store/pinia/default/index.js

@@ -0,0 +1,20 @@
+import { store } from 'quasar/wrappers'
+import { createPinia } from 'pinia'
+
+/*
+ * If not building with SSR mode, you can
+ * directly export the Store instantiation;
+ *
+ * The function below can be async too; either use
+ * async/await or return a Promise which resolves
+ * with the Store instance.
+ */
+
+export default store((/* { ssrContext } */) => {
+  const pinia = createPinia()
+
+  // You can add Pinia plugins here
+  // pinia.use(SomePiniaPlugin)
+
+  return pinia
+})

app-webpack/templates/store/pinia/ts/index.ts

@@ -0,0 +1,20 @@
+import { store } from 'quasar/wrappers'
+import { createPinia } from 'pinia'
+
+/*
+ * If not building with SSR mode, you can
+ * directly export the Store instantiation;
+ *
+ * The function below can be async too; either use
+ * async/await or return a Promise which resolves
+ * with the Store instance.
+ */
+
+export default store((/* { ssrContext } */) => {
+  const pinia = createPinia()
+
+  // You can add Pinia plugins here
+  // pinia.use(SomePiniaPlugin)
+
+  return pinia
+})