feat: SSR updates & Meta work

angelomedeiros · Jul 14, 2018 · e9301c6 · e9301c6
1 parent 9b9c0cd
commit e9301c6
Show file tree

Hide file tree

Showing 9 changed files with 59 additions and 41 deletions.
diff --git a/build/script.dev.ssr.js b/build/script.dev.ssr.js
@@ -197,11 +197,7 @@ function render (req, res) {
     if (err) {
       return handleError(err)
     }
-    const meta = context.$getMeta()
-    Object.keys(meta).forEach(token => {
-      html = html.replace(token, meta[token])
-    })
-    res.send(html)
+    res.send(context.$getMetaHTML(html))
     console.log(` ⚡️ ${Date.now() - s}ms - ${req.url}`)
   })
 }

diff --git a/dev/App.vue b/dev/App.vue
@@ -52,6 +52,9 @@
 
 <script>
 export default {
+  meta: {
+    title: 'Quasar Development'
+  },
   data () {
     return {
       lang: this.$q.i18n.lang,

diff --git a/dev/app.entry-server.js b/dev/app.entry-server.js
@@ -26,7 +26,7 @@ export default ssrContext => {
       }
 
       // the Promise should resolve to the app instance so it can be rendered
-      ssrContext.$getMeta = app.$getMeta(app)
+      ssrContext.$getMetaHTML = app.$getMetaHTML(app)
       resolve(app)
     }, reject)
   })

diff --git a/dev/app.js b/dev/app.js
@@ -48,26 +48,7 @@ export function createApp (ssrContext) {
     render: h => h(App)
   }
 
-  const ctx = { app }
-
-  if (ssrContext) {
-    ctx.ssr = {
-      req: ssrContext.req,
-      res: ssrContext.res,
-      setBodyClasses (cls) {
-        ssrContext.bodyClasses = cls.join(' ')
-      },
-      setHtmlAttrs (attrs) {
-        const str = []
-        for (let key in attrs) {
-          str.push(`${key}=${attrs[key]}`)
-        }
-        ssrContext.htmlAttrs = str.join(' ')
-      }
-    }
-  }
-
-  Quasar.ssrUpdate(ctx)
+  Quasar.ssrUpdate({ app, ssr: ssrContext })
 
   return {
     app: new Vue(app),

diff --git a/dev/ssr.index.html b/dev/ssr.index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
-<html {{ htmlAttrs }} %% Q_HTML_ATTRS %%>
+<html {{ Q_HTML_ATTRS }}>
   <head>
-    %% Q_HEAD_TAGS %%
+    {{ Q_HEAD_TAGS }}
     <meta charset="utf-8">
     <meta name="format-detection" content="telephone=no">
     <meta name="msapplication-tap-highlight" content="no">
@@ -13,8 +13,8 @@
     <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Material+Icons&Roboto:100,300,400,500,700,900">
     <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/animate.css@^3.5.2/animate.min.css">
   </head>
-  <body class="demo-site {{ bodyClasses }}" %% Q_BODY_ATTRS %%>
-    %% Q_BODY_TAGS %%
+  <body class="demo-site {{ Q_BODY_CLASSES }}" {{ Q_BODY_ATTRS}}>
+    {{ Q_BODY_TAGS }}
     <!--vue-ssr-outlet-->
   </body>
 </html>
diff --git a/src/body.js b/src/body.js
@@ -56,9 +56,15 @@ export default {
   install ($q, queues, cfg) {
     if (isSSR) {
       queues.server.push((q, ctx) => {
-        const update = ctx.ssr.setBodyClasses
-        if (typeof update === 'function') {
-          update(getBodyClasses(q.platform, cfg))
+        const
+          cls = getBodyClasses(q.platform, cfg),
+          fn = ctx.ssr.setBodyClasses
+
+        if (typeof fn === 'function') {
+          fn(cls)
+        }
+        else {
+          ctx.ssr.Q_BODY_CLASSES = cls.join(' ')
         }
       })
       return

diff --git a/src/i18n.js b/src/i18n.js
@@ -6,12 +6,20 @@ export default {
   install ($q, queues, Vue, lang) {
     if (isSSR) {
       queues.server.push((q, ctx) => {
-        const fn = ctx.ssr.setHtmlAttrs
-        if (typeof fn === 'function') {
-          fn({
+        const
+          opt = {
             lang: q.i18n.lang,
             dir: q.i18n.rtl ? 'rtl' : 'ltr'
-          })
+          },
+          fn = ctx.ssr.setHtmlAttrs
+
+        if (typeof fn === 'function') {
+          fn(opt)
+        }
+        else {
+          ctx.ssr.Q_HTML_ATTRS = Object.keys(opt)
+            .map(key => `${key}=${opt[key]}`)
+            .join(' ')
         }
       })
     }

diff --git a/src/plugins/meta.js b/src/plugins/meta.js
@@ -186,7 +186,7 @@ function getHead (meta) {
   return output
 }
 
-function getServerMeta (app) {
+function getServerMeta (app, html) {
   const meta = {
     title: '',
     titleTemplate: null,
@@ -196,10 +196,11 @@ function getServerMeta (app) {
     bodyAttrs: {},
     noscripts: {}
   }
+
   parseMeta(app, meta)
   normalize(meta)
 
-  return {
+  const tokens = {
     '%%Q_HTML_ATTRS%%': Object.keys(meta.htmlAttrs)
       .filter(name => !['lang', 'dir'].includes(name))
       .map(getAttr(meta.htmlAttrs))
@@ -214,6 +215,12 @@ function getServerMeta (app) {
       .join('') +
       `<script data-qmeta-init>window.__Q_META__=${delete meta.noscripts && JSON.stringify(meta)}</script>`
   }
+
+  Object.keys(tokens).forEach(key => {
+    html = html.replace(key, tokens[key])
+  })
+
+  return html
 }
 
 function beforeCreate () {
@@ -235,13 +242,24 @@ function triggerMeta () {
 }
 
 export default {
-  install ({ Vue }) {
+  install ({ queues, Vue }) {
     if (isSSR) {
-      Vue.prototype.$getMeta = app => () => getServerMeta(app)
+      Vue.prototype.$getMetaHTML = app => html => getServerMeta(app, html)
       Vue.mixin({ beforeCreate })
+
+      queues.server.push((q, ctx) => {
+        ctx.ssr.Q_HTML_ATTRS += ' %%Q_HTML_ATTRS%%'
+        Object.assign(ctx.ssr, {
+          Q_HEAD_TAGS: '%%Q_HEAD_TAGS%%',
+          Q_BODY_ATTRS: '%%Q_BODY_ATTRS%%',
+          Q_BODY_TAGS: '%%Q_BODY_TAGS%%'
+        })
+        // ssr.Q_BODY_CLASSES
+      })
     }
     else {
       ssrTakeover = fromSSR
+
       Vue.mixin({
         beforeCreate,
         created () {

diff --git a/src/ssr-update.js b/src/ssr-update.js
@@ -12,6 +12,12 @@ export default function (ctx) {
   if (ctx.ssr) {
     const q = Object.assign({}, $q)
 
+    Object.assign(ctx.ssr, {
+      Q_HEAD_TAGS: '',
+      Q_BODY_ATTRS: '',
+      Q_BODY_TAGS: ''
+    })
+
     queues.server.forEach(run => {
       run(q, ctx)
     })