[feat]: update mellow vue (#89)

* feat(inertia-sails): remove location and render method implementations

* feat(inertia-sails): remove unneeded methos and have sharedProps as a property in sails.inertia

* feat(mellow-vue): add inertia and inertiaRedirect responses

* feat(mellow-vue): replace calls to sails.inertia.render with inertia custom response and exit

* feat(mellow-vue): replace call to sails.inertia.location with the inertiaRedirect custom response

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' }
   }
 }

templates/mellow-vue/api/responses/inertia.js

@@ -0,0 +1,72 @@
+// @ts-nocheck
+const { encode } = require('querystring')
+module.exports = function inertia(data) {
+  const req = this.req
+  const res = this.res
+  const sails = req._sails
+
+  const sharedProps = sails.inertia.sharedProps
+  const sharedViewData = sails.inertia.sharedViewData
+  const rootView = sails.config.inertia.rootView
+
+  const allProps = {
+    ...sharedProps,
+    ...data.props
+  }
+
+  const allViewData = {
+    ...sharedViewData,
+    ...data.viewData
+  }
+
+  let url = req.url || req.originalUrl
+  const assetVersion = sails.config.inertia.version
+  const currentVersion =
+    typeof assetVersion === 'function' ? assetVersion() : assetVersion
+
+  const page = {
+    component: data.page,
+    version: currentVersion,
+    props: allProps,
+    url
+  }
+
+  // Implements inertia partial reload. See https://inertiajs.com/partial-reload
+  if (
+    req.get(inertiaHeaders.PARTIAL_DATA) &&
+    req.get(inertiaHeaders.PARTIAL_COMPONENT) === page.component
+  ) {
+    const only = req.get(inertiaHeaders.PARTIAL_DATA).split(',')
+    page.props = only.length ? getPartialData(data.props, only) : page.props
+  }
+
+  const queryParams = req.query
+  if (req.method === 'GET' && Object.keys(queryParams).length) {
+    // Keep original request query params
+    url += `?${encode(queryParams)}`
+  }
+
+  if (req.get(inertiaHeaders.INERTIA)) {
+    res.set(inertiaHeaders.INERTIA, true)
+    res.set('Vary', 'Accept')
+    return res.json(page)
+  } else {
+    // Implements full page reload
+    return res.view(rootView, {
+      page,
+      viewData: allViewData
+    })
+  }
+}
+
+function getPartialData(props, only = []) {
+  return Object.assign({}, ...only.map((key) => ({ [key]: props[key] })))
+}
+
+const inertiaHeaders = {
+  INERTIA: 'X-Inertia',
+  VERSION: 'X-Inertia-Version',
+  PARTIAL_DATA: 'X-Inertia-Partial-Data',
+  PARTIAL_COMPONENT: 'X-Inertia-Partial-Component',
+  LOCATION: 'X-Inertia-Location'
+}

templates/mellow-vue/api/responses/inertiaRedirect.js

@@ -0,0 +1,20 @@
+// @ts-nocheck
+
+const inertiaHeaders = {
+  INERTIA: 'X-Inertia',
+  LOCATION: 'X-Inertia-Location'
+}
+
+module.exports = function inertiaRedirect(url) {
+  const req = this.req
+  const res = this.res
+
+  if (req.get(inertiaHeaders.INERTIA)) {
+    res.set(inertiaHeaders.LOCATION, url)
+  }
+
+  return res.redirect(
+    ['PUT', 'PATCH', 'DELETE'].includes(req.method) ? 303 : 409,
+    url
+  )
+}