feat(app-vite): prepare Pinia as soon as possible; stores will be available for use in boot files and even in router initialization #12793

Author: rstoenescu

app-vite/bin/quasar-new

@@ -64,7 +64,7 @@ const fse = require('fs-extra')
 
 const { log, warn } = require('../lib/helpers/logger')
 const appPaths = require('../lib/app-paths')
-const getStoreProvider = require('../lib/helpers/get-store-provider')
+const storeProvider = require('../lib/helpers/store-provider')
 const defaultFilePath = 'default'
 
 console.log()
@@ -117,8 +117,6 @@ if (type.length === 1) {
   type = fullCmd[type]
 }
 
-const storeProvider = getStoreProvider()
-
 function getPaths (asset, names) {
   return names.map(name => {
     const hasExtension = !asset.ext || (asset.ext && name.endsWith(asset.ext))

app-vite/lib/entry-files-generator.js

@@ -23,7 +23,6 @@ class EntryFilesGenerator {
     if (ctx.mode.ssr) {
       filePaths.push(
         'server-entry.js',
-        'ssr-pwa.js',
         'ssr-middlewares.js',
         `ssr-${ctx.dev ? 'dev' : 'prod'}-webserver.js`
       )

app-vite/lib/helpers/get-store-provider.js renamed to app-vite/lib/helpers/store-provider.js

@@ -1,7 +1,7 @@
 const getPackageJson = require('./get-package-json')
 const nodePackager = require('./node-packager')
 
-module.exports = function getStoreProvider() {
+function getStoreProvider () {
   /** @type {'pinia' | 'vuex'} */
   const name = getPackageJson('vuex') !== void 0 ? 'vuex' : 'pinia'
 
@@ -15,3 +15,5 @@ module.exports = function getStoreProvider() {
     }
   }
 }
+
+module.exports = getStoreProvider()

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

@@ -12,7 +12,7 @@ const appFilesValidations = require('./helpers/app-files-validations')
 const cssVariables = require('./helpers/css-variables')
 const getPackageMajorVersion = require('./helpers/get-package-major-version')
 const resolveExtension = require('./helpers/resolve-extension')
-const getStoreProvider = require('./helpers/get-store-provider')
+const storeProvider = require('./helpers/store-provider')
 
 const urlRegex = /^http(s)?:\/\//i
 const { findClosestOpenPort } = require('../lib/helpers/net')
@@ -402,7 +402,8 @@ class QuasarConfFile {
 
     Object.assign(cfg.metaConf, {
       hasLoadingBarPlugin: cfg.framework.plugins.includes('LoadingBar'),
-      hasMetaPlugin: cfg.framework.plugins.includes('Meta')
+      hasMetaPlugin: cfg.framework.plugins.includes('Meta'),
+      storePackage: storeProvider.name
     })
 
     cfg.build = merge({
@@ -476,8 +477,6 @@ class QuasarConfFile {
       ? cfg.build.vueRouterBase
       : formatRouterBase(cfg.build.publicPath)
 
-    const storeProvider = getStoreProvider()
-
     // when adding new props here be sure to update
     // all impacted devserver diffs (look for this.registerDiff() calls)
     cfg.sourceFiles = merge({

app-vite/templates/entry/app.js

@@ -64,24 +64,12 @@ const RootComponent = defineComponent({
 })
 <% } %>
 
-export default async function (createAppFn, quasarUserOptions<%= ctx.mode.ssr ? ', ssrContext' : '' %>) {
-  // create store and router instances
-  <% if (store) { %>
-  const store = typeof createStore === 'function'
-    ? await createStore({<%= ctx.mode.ssr ? 'ssrContext' : '' %>})
-    : createStore
-
-  // 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'
-    ? await createRouter({<%= ctx.mode.ssr ? 'ssrContext' + (store ? ',' : '') : '' %><%= store ? 'store' : '' %>})
-    : createRouter
-  <% if (store) { %>
-  // make router instance available in store
-  store.$router = router
-  <% } %>
+<% if (ctx.mode.ssr && ctx.mode.pwa) { %>
+export const ssrIsRunningOnClientPWA = typeof window !== 'undefined' &&
+  document.body.getAttribute('data-server-rendered') === null
+<% } %>
 
+export default async function (createAppFn, quasarUserOptions<%= ctx.mode.ssr ? ', ssrContext' : '' %>) {
   // Create the app instance.
   // Here we inject into it the Quasar UI, the router & possibly the store.
   const app = createAppFn(RootComponent)
@@ -96,12 +84,49 @@ export default async function (createAppFn, quasarUserOptions<%= ctx.mode.ssr ?
   app.config.globalProperties.$q.capacitor = window.Capacitor
   <% } %>
 
+  // create store and router instances
+  <% if (store) { %>
+    const store = typeof createStore === 'function'
+      ? await createStore({<%= ctx.mode.ssr ? 'ssrContext' : '' %>})
+      : createStore
+
+    <% if (metaConf.storePackage === 'vuex') { %>
+      // obtain Vuex injection key in case we use TypeScript
+      const { storeKey } = await import('app/<%= sourceFiles.store %>');
+    <% } else if (metaConf.storePackage === 'pinia') { %>
+      app.use(store)
+
+      <% if (ctx.mode.ssr && ssr.manualStoreHydration !== true) { %>
+        // prime the store with server-initialized state.
+        // the state is determined during SSR and inlined in the page markup.
+        if (typeof window !== 'undefined' && <% if (ctx.mode.pwa) { %>ssrIsRunningOnClientPWA !== true && <% } %>window.__INITIAL_STATE__ !== void 0) {
+          store.state.value = window.__INITIAL_STATE__
+          // for security reasons, we'll delete this
+          delete window.__INITIAL_STATE__
+        }
+      <% } %>
+    <% } %>
+  <% } %>
+
+  const router = typeof createRouter === 'function'
+    ? await createRouter({<%= ctx.mode.ssr ? 'ssrContext' + (store ? ',' : '') : '' %><%= store ? 'store' : '' %>})
+    : createRouter
+
+  <% if (store) { %>
+    // make router instance available in store
+    <% if (metaConf.storePackage === 'vuex') { %>
+      store.$router = router
+    <% } else if (metaConf.storePackage === 'pinia') { %>
+      store.use(() => ({ router }))
+    <% } %>
+  <% } %>
+
   // Expose the app, the router and the store.
   // Note that we are not mounting the app here, since bootstrapping will be
   // different depending on whether we are in a browser or on the server.
   return {
     app,
-    <%= store ? 'store, storeKey,' : '' %>
+    <%= store ? 'store,' + (metaConf.storePackage === 'vuex' ? ' storeKey,' : '') : '' %>
     router
   }
 }

app-vite/templates/entry/client-entry.js

@@ -13,7 +13,6 @@
 
 <% if (ctx.mode.ssr && ctx.mode.pwa) { %>
 import { createSSRApp, createApp } from 'vue'
-import { isRunningOnPWA } from './ssr-pwa'
 <% } else { %>
 import { <%= ctx.mode.ssr ? 'createSSRApp' : 'createApp' %> } from 'vue'
 <% } %>
@@ -45,7 +44,7 @@ import 'quasar/src/css/flex-addon.<%= metaConf.css.quasarSrcExt %>'
 import '<%= asset.path %>'
 <% }) %>
 
-import createQuasarApp from './app.js'
+import createQuasarApp<% if (ctx.mode.ssr && ctx.mode.pwa) { %>, { ssrIsRunningOnClientPWA }<% } %> from './app.js'
 import quasarUserOptions from './quasar-user-options.js'
 
 <% if (ctx.mode.pwa) { %>
@@ -71,20 +70,16 @@ if (/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream && window.n
 
 const publicPath = `<%= build.publicPath %>`
 
-async function start ({ app, router<%= store ? ', store, storeKey' : '' %> }<%= bootEntries.length > 0 ? ', bootFiles' : '' %>) {
-  <% if (ctx.mode.ssr && store && ssr.manualStoreHydration !== true) { %>
+async function start ({
+  app,
+  router
+  <%= store ? ', store' + (metaConf.storePackage === 'vuex' ? ', storeKey' : '') : '' %>
+}<%= bootEntries.length > 0 ? ', bootFiles' : '' %>) {
+  <% if (ctx.mode.ssr && store && metaConf.storePackage === 'vuex' && ssr.manualStoreHydration !== true) { %>
   // prime the store with server-initialized state.
   // the state is determined during SSR and inlined in the page markup.
-  if (<% if (ctx.mode.pwa) { %>isRunningOnPWA !== true && <% } %>window.__INITIAL_STATE__ !== void 0) {
-    if (typeof store.replaceState === 'function') {
-      // it means it's Vuex
-      store.replaceState(window.__INITIAL_STATE__)
-    }
-    else {
-      // it means it's Pinia
-      store.state.value = window.__INITIAL_STATE__
-    }
-
+  if (<%= ctx.mode.pwa ? 'ssrIsRunningOnClientPWA !== true &&' : '' %>window.__INITIAL_STATE__ !== void 0) {
+    store.replaceState(window.__INITIAL_STATE__)
     // for security reasons, we'll delete this
     delete window.__INITIAL_STATE__
   }
@@ -148,13 +143,13 @@ async function start ({ app, router<%= store ? ', store, storeKey' : '' %> }<%=
   <% } %>
 
   app.use(router)
-  <% if (store) { %>app.use(store, storeKey)<% } %>
+  <% if (store && metaConf.storePackage === 'vuex') { %>app.use(store, storeKey)<% } %>
 
   <% if (ctx.mode.ssr) { %>
     <% if (ctx.mode.pwa) { %>
-      if (isRunningOnPWA === true) {
+      if (ssrIsRunningOnClientPWA === true) {
         <% if (preFetch) { %>
-        addPreFetchHooks(router<%= store ? ', store' : '' %>)
+        addPreFetchHooks({ router, ssrIsRunningOnClientPWA<%= store ? ', store' : '' %> })
         <% } %>
         app.mount('#q-app')
       }
@@ -164,7 +159,7 @@ async function start ({ app, router<%= store ? ', store, storeKey' : '' %> }<%=
     // and async components...
     router.isReady().then(() => {
       <% if (preFetch) { %>
-      addPreFetchHooks(router<%= store ? ', store' : '' %>, publicPath)
+      addPreFetchHooks({ router<%= store ? ', store' : '' %>, publicPath })
       <% } %>
       app.mount('#q-app')
     })
@@ -175,7 +170,7 @@ async function start ({ app, router<%= store ? ', store, storeKey' : '' %> }<%=
   <% } else { // not SSR %>
 
     <% if (preFetch) { %>
-    addPreFetchHooks(router<%= store ? ', store' : '' %>)
+    addPreFetchHooks({ router<%= store ? ', store' : '' %> })
     <% } %>
 
     <% if (ctx.mode.cordova) { %>
@@ -262,7 +257,7 @@ async function start ({ app, router<%= store ? ', store, storeKey' : '' %> }<%=
 
 createQuasarApp(<%=
   ctx.mode.ssr
-    ? (ctx.mode.pwa ? 'isRunningOnPWA ? createApp : createSSRApp' : 'createSSRApp')
+    ? (ctx.mode.pwa ? 'ssrIsRunningOnClientPWA ? createApp : createSSRApp' : 'createSSRApp')
     : 'createApp'
 %>, quasarUserOptions)
 <% if (bootEntries.length > 0) { %>

app-vite/templates/entry/client-prefetch.js

@@ -14,10 +14,6 @@
 import { LoadingBar } from 'quasar'
 <% } %>
 
-<% if (ctx.mode.ssr && ctx.mode.pwa) { %>
-import { isRunningOnPWA } from './ssr-pwa'
-<% } %>
-
 <% if (!ctx.mode.ssr || ctx.mode.pwa) { %>
 import App from 'app/<%= sourceFiles.rootComponent %>'
 let appPrefetch = typeof App.preFetch === 'function'
@@ -48,7 +44,7 @@ function getMatchedComponents (to, router) {
   }))
 }
 
-export function addPreFetchHooks (router<%= store ? ', store' : '' %>, publicPath) {
+export function addPreFetchHooks ({ router<%= ctx.mode.ssr && ctx.mode.pwa ? ', ssrIsRunningOnClientPWA' : '' %><%= store ? ', store' : '' %>, publicPath }) {
   // Add router hook for handling preFetch.
   // Doing it after initial route is resolved so that we don't double-fetch
   // the data that we already have. Using router.beforeResolve() so that all
@@ -76,7 +72,7 @@ export function addPreFetchHooks (router<%= store ? ', store' : '' %>, publicPat
       .map(m => m.c.__c !== void 0 ? m.c.__c.preFetch : m.c.preFetch)
 
     <% if (!ctx.mode.ssr || ctx.mode.pwa) { %>
-    if (<%= ctx.mode.ssr && ctx.mode.pwa ? 'isRunningOnPWA === true && ' : '' %>appPrefetch !== false) {
+    if (<%= ctx.mode.ssr && ctx.mode.pwa ? 'ssrIsRunningOnClientPWA === true && ' : '' %>appPrefetch !== false) {
       preFetchList.unshift(appPrefetch)
       appPrefetch = false
     }

app-vite/templates/entry/server-entry.js

@@ -88,7 +88,9 @@ export default ssrContext => {
     const bootFunctions = await bootFiles
     <% } %>
 
-    const { app, router<%= store ? ', store, storeKey' : '' %> } = await createQuasarApp(createApp, qUserOptions, ssrContext)
+    const {
+      app, router<%= store ? ', store' + (metaConf.storePackage === 'vuex' ? ', storeKey' : '') : '' %>
+    } = await createQuasarApp(createApp, qUserOptions, ssrContext)
 
     <% if (bootEntries.length !== 0) { %>
     let hasRedirected = false
@@ -121,7 +123,7 @@ export default ssrContext => {
     <% } %>
 
     app.use(router)
-    <% if (store) { %>app.use(store, storeKey)<% } %>
+    <% if (store && metaConf.storePackage === 'vuex') { %>app.use(store, storeKey)<% } %>
 
     const url = ssrContext.req.url<% if (build.publicPath !== '/') { %>.replace(publicPath, '/')<% } %>
     const { fullPath } = router.resolve(url)