[feat]: update mellow vue

inertia-sails/index.js

@@ -7,9 +7,6 @@
 const inertia = require('./private/inertia-middleware')
 module.exports = function defineInertiaHook(sails) {
   let hook
-  let sharedProps = {}
-  let sharedViewData = {}
-  let rootView = 'app'
   const routesToBindInertiaTo = [
     'GET r|^((?![^?]*\\/[^?\\/]+\\.[^?\\/]+(\\?.*)?).)*$|',
     // (^^Leave out assets)
@@ -22,37 +19,36 @@ module.exports = function defineInertiaHook(sails) {
   return {
     defaults: {
       inertia: {
+        rootView: 'app',
         version: 1
       }
     },
     initialize: async function () {
       hook = this
       sails.inertia = hook
-
+      sails.inertia.sharedProps = {}
+      sails.inertia.sharedViewData = {}
       sails.on('router:before', function routerBefore() {
         routesToBindInertiaTo.forEach(function iterator(routeAddress) {
-          sails.router.bind(
-            routeAddress,
-            inertia(sails, { hook, sharedProps, sharedViewData, rootView })
-          )
+          sails.router.bind(routeAddress, inertia(hook))
         })
       })
     },
 
-    share: (key, value = null) => (sharedProps[key] = value),
+    share: (key, value = null) => (sails.inertia.sharedProps[key] = value),
 
-    getShared: (key = null) => sharedProps[key] ?? sharedProps,
+    getShared: (key = null) =>
+      sails.inertia.sharedProps[key] ?? sails.inertia.sharedProps,
 
     flushShared: (key) => {
-      key ? delete sharedProps[key] : (sharedProps = {})
+      key
+        ? delete sails.inertia.sharedProps[key]
+        : (sails.inertia.sharedProps = {})
     },
 
-    viewData: (key, value) => (sharedViewData[key] = value),
-
-    getViewData: (key) => sharedViewData[key] ?? sharedViewData,
-
-    setRootView: (newRootView) => (rootView = newRootView),
+    viewData: (key, value) => (sails.inertia.sharedViewData[key] = value),
 
-    getRootView: () => rootView
+    getViewData: (key) =>
+      sails.inertia.sharedViewData[key] ?? sails.inertia.sharedViewData
   }
 }

inertia-sails/private/inertia-middleware.js

@@ -1,100 +1,20 @@
-const { encode } = require('querystring')
 const isInertiaRequest = require('./is-inertia-request')
 
-const {
-  INERTIA,
-  PARTIAL_DATA,
-  PARTIAL_COMPONENT
-} = require('./inertia-headers')
-
-const getPartialData = require('./get-partial-data')
 const resolveValidationErrors = require('./resolve-validation-errors')
-function inertia(sails, { hook, sharedProps, sharedViewData, rootView }) {
+function inertia(hook) {
   return function inertiaMiddleware(req, res, next) {
     if (isInertiaRequest(req)) {
-      /**
-       * Flash messages stored in the session.
-       * @typedef {Object} FlashMessages
-       * @property {Array} message - Flash message(s).
-       * @property {Array} error - Error message(s).
-       * @property {Array} success - Success message(s).
-       */
       const flash = {
         message: req.flash('message'),
         error: req.flash('error'),
         success: req.flash('success')
       }
-      hook.share('flash', flash) // Share the flash object as props
-      /**
-       * Validation errors stored in the session, resolved and formatted for Inertia.js.
-       * @type {Object}
-       */
-      const validationErrors = resolveValidationErrors(req)
-      req.flash('errors', validationErrors) // Flash the validation error so we can share it later
-
-      hook.share('errors', req.flash('errors')[0] || {}) // Share validation errors as props
-    }
-
-    hook.render = function (component, props = {}, viewData = {}) {
-      const allProps = {
-        ...sharedProps,
-        ...props
-      }
-
-      const allViewData = {
-        ...sharedViewData,
-        ...viewData
-      }
-
-      let url = req.url || req.originalUrl
-      const assetVersion = sails.config.inertia.version
-      const currentVersion =
-        typeof assetVersion == 'function' ? assetVersion() : assetVersion
-
-      const page = {
-        component,
-        version: currentVersion,
-        props: allProps,
-        url
-      }
+      hook.share('flash', flash)
 
-      // Implements inertia partial reload. See https://inertiajs.com/partial-reload
-      if (req.get(PARTIAL_DATA) && req.get(PARTIAL_COMPONENT) === component) {
-        const only = req.get(PARTIAL_DATA).split(',')
-        page.props = only.length ? getPartialData(props, only) : page.props
-      }
-
-      const queryParams = req.query
-      if (req.method == 'GET' && Object.keys(queryParams).length) {
-        // Keep original request query params
-        url += `?${encode(queryParams)}`
-      }
+      const validationErrors = resolveValidationErrors(req)
+      req.flash('errors', validationErrors)
 
-      if (isInertiaRequest(req)) {
-        res.set(INERTIA, true)
-        res.set('Vary', 'Accept')
-        return res.json(page)
-      } else {
-        // Implements full page reload
-        return sails.hooks.views.render(rootView, {
-          page,
-          viewData: allViewData
-        })
-      }
-    }
-    /**
-     * Handle 303 and external redirects
-     * see https://inertiajs.com/redirects#303-response-code
-     * @param {string} url - The URL to redirect to.
-     */
-    hook.location = function (url) {
-      if (isInertiaRequest(req)) {
-        res.set('X-Inertia-Location', url)
-      }
-      return res.redirect(
-        ['PUT', 'PATCH', 'DELETE'].includes(req.method) ? 303 : 409,
-        url
-      )
+      hook.share('errors', req.flash('errors')[0] || {})
     }
 
     return next()

templates/mellow-vue/api/controllers/auth/view-check-email.js

@@ -4,7 +4,9 @@ module.exports = {
   description: 'Display "Verify email" page.',
 
   exits: {
-    success: {}
+    success: {
+      responseType: 'inertia'
+    }
   },
 
   fn: async function () {
@@ -14,8 +16,11 @@ module.exports = {
     } else {
       message = `We sent an email verification link to ${this.req.session.userEmail}`
     }
-    return sails.inertia.render('check-email', {
-      message
-    })
+    return {
+      page: 'check-email',
+      props: {
+        message
+      }
+    }
   }
 }

templates/mellow-vue/api/controllers/auth/view-forgot-password.js

@@ -4,10 +4,12 @@ module.exports = {
   description: 'Display "Forgot password" page.',
 
   exits: {
-    success: {}
+    success: {
+      responseType: 'inertia'
+    }
   },
 
   fn: async function () {
-    return sails.inertia.render('forgot-password')
+    return { page: 'forgot-password' }
   }
 }

templates/mellow-vue/api/controllers/auth/view-link-expired.js

@@ -4,10 +4,12 @@ module.exports = {
   description: 'Display "Link expired" page.',
 
   exits: {
-    success: {}
+    success: {
+      responseType: 'inertia'
+    }
   },
 
   fn: async function () {
-    return sails.inertia.render('link-expired')
+    return { page: 'link-expired' }
   }
 }

templates/mellow-vue/api/controllers/auth/view-login.js

@@ -4,10 +4,12 @@ module.exports = {
   description: 'Display "Login" page.',
 
   exits: {
-    success: {}
+    success: {
+      responseType: 'inertia'
+    }
   },
 
   fn: async function () {
-    return sails.inertia.render('login')
+    return { page: 'login' }
   }
 }

templates/mellow-vue/api/controllers/auth/view-reset-password.js

@@ -10,7 +10,9 @@ module.exports = {
     }
   },
   exits: {
-    success: {},
+    success: {
+      responseType: 'inertia'
+    },
     invalidOrExpiredToken: {
       responseType: 'expired',
       description: 'The provided token is expired, invalid, or already used up.'
@@ -26,6 +28,6 @@ module.exports = {
     if (!user || user.passwordResetTokenExpiresAt <= Date.now()) {
       throw 'invalidOrExpiredToken'
     }
-    return sails.inertia.render('reset-password', { token })
+    return { page: 'reset-password', props: { token } }
   }
 }

templates/mellow-vue/api/controllers/auth/view-signup.js

@@ -3,10 +3,12 @@ module.exports = {
 
   description: 'Display "Signup" page.',
   exits: {
-    success: {}
+    success: {
+      responseType: 'inertia'
+    }
   },
 
   fn: async function () {
-    return sails.inertia.render('signup')
+    return { page: 'signup' }
   }
 }

templates/mellow-vue/api/controllers/auth/view-success.js

@@ -8,7 +8,9 @@ module.exports = {
     }
   },
   exits: {
-    success: {}
+    success: {
+      responseType: 'inertia'
+    }
   },
 
   fn: async function ({ operation }) {
@@ -24,10 +26,13 @@ module.exports = {
         message = 'Password has been successful reset'
         pageHeading = 'Password reset successful'
     }
-    return sails.inertia.render('success', {
-      pageTitle,
-      pageHeading,
-      message
-    })
+    return {
+      page: 'success',
+      props: {
+        pageTitle,
+        pageHeading,
+        message
+      }
+    }
   }
 }

templates/mellow-vue/api/controllers/home/index.js

@@ -5,9 +5,13 @@ module.exports = {
 
   inputs: {},
 
-  exits: {},
+  exits: {
+    success: {
+      responseType: 'inertia'
+    }
+  },
 
   fn: async function () {
-    return sails.inertia.render('index')
+    return { page: 'index' }
   }
 }

templates/mellow-vue/api/controllers/user/logout.js

@@ -6,12 +6,14 @@ module.exports = {
   inputs: {},
 
   exits: {
-    success: {}
+    success: {
+      responseType: 'inertiaRedirect'
+    }
   },
 
   fn: async function () {
     sails.inertia.flushShared('loggedInUser')
     delete this.req.session.userId
-    return sails.inertia.location('/')
+    return '/'
   }
 }

templates/mellow-vue/api/controllers/user/view-profile.js

@@ -4,10 +4,12 @@ module.exports = {
   description: 'Display "Profile" page.',
 
   exits: {
-    success: {}
+    success: {
+      responseType: 'inertia'
+    }
   },
 
   fn: async function () {
-    return sails.inertia.render('profile')
+    return { page: 'profile' }
   }
 }