refactor: SSR cleanup; todo: screen & web-storage plugins

angelomedeiros · Jun 17, 2018 · 0e0b0a2 · 0e0b0a2
1 parent 456ee1d
commit 0e0b0a2
Show file tree

Hide file tree

Showing 10 changed files with 140 additions and 127 deletions.
diff --git a/dev/components/other/platform-detection.vue b/dev/components/other/platform-detection.vue
@@ -14,7 +14,7 @@
         </thead>
 
         <tbody>
-          <tr v-for="(value, prop) in platform">
+          <tr v-for="(value, prop) in $q.platform.is">
             <td>{{ prop }}</td>
             <td>{{ value }}</td>
           </tr>
@@ -30,11 +30,6 @@
 
 <script>
 export default {
-  data () {
-    return {
-      platform: this.$q.platform.is
-    }
-  },
   computed: {
     touch () {
       return this.$q.platform.has.touch ? 'has' : 'does not have'

diff --git a/src/body.js b/src/body.js
@@ -1,7 +1,8 @@
 import { ready } from './utils/dom'
 import { setBrand } from './utils/colors'
+import { isSSR } from './plugins/platform'
 
-function getBodyClasses ({ is, has, within }, cfg = {}) {
+function getBodyClasses ({ is, has, within }, cfg) {
   const cls = [
     process.env.THEME,
     is.desktop ? 'desktop' : 'mobile',
@@ -51,18 +52,23 @@ function setColors (brand) {
   }
 }
 
-export function ssrUpdateBody (ctx) {
-  const update = ctx.ssr.setBodyClasses
-  if (typeof update === 'function') {
-    update(getBodyClasses(ctx.app.$q.platform))
-  }
-}
+export default {
+  install ({ $q, cfg, queues }) {
+    if (isSSR) {
+      queues.server.push((q, ctx) => {
+        const update = ctx.ssr.setBodyClasses
+        if (typeof update === 'function') {
+          update(getBodyClasses(q.platform, cfg))
+        }
+      })
+      return
+    }
 
-export function clientUpdateBody ({ $q, cfg }) {
-  const init = cfg.brand && document.body
-  init && setColors(cfg.brand)
-  ready(() => {
-    !init && setColors(cfg.brand)
-    bodyInit($q.platform, cfg)
-  })
+    const init = cfg.brand && document.body
+    init && setColors(cfg.brand)
+    ready(() => {
+      !init && setColors(cfg.brand)
+      bodyInit($q.platform, cfg)
+    })
+  }
 }
diff --git a/src/history.js b/src/history.js
@@ -1,16 +1,15 @@
-import Platform, { isSSR } from './plugins/platform'
+import { isSSR } from './plugins/platform'
 
 export default {
   __history: [],
   add: () => {},
   remove: () => {},
 
-  install ({ cfg }) {
-    if (this.__installed || isSSR || !Platform.is.cordova) {
+  install ({ $q, cfg }) {
+    if (isSSR || !$q.platform.is.cordova) {
       return
     }
 
-    this.__installed = true
     this.add = definition => {
       this.__history.push(definition)
     }

diff --git a/src/i18n.js b/src/i18n.js
@@ -2,18 +2,19 @@ import langEn from '../i18n/en-us'
 import { isSSR } from './plugins/platform'
 import { ready } from './utils/dom'
 
-export function ssrUpdateLang (ctx) {
-  const fn = ctx.ssr.setHtmlAttrs
-  if (typeof fn === 'function') {
-    const { rtl, lang } = ctx.app.$q.i18n
-    fn({ lang, dir: rtl ? 'rtl' : 'ltr' })
-  }
-}
-
 export default {
-  install ({ $q, Vue, lang }) {
-    if (this.__installed) { return }
-    this.__installed = true
+  install ({ $q, Vue, queues, lang }) {
+    if (isSSR) {
+      queues.server.push((q, ctx) => {
+        const fn = ctx.ssr.setHtmlAttrs
+        if (typeof fn === 'function') {
+          fn({
+            lang: q.i18n.lang,
+            dir: q.i18n.rtl ? 'rtl' : 'ltr'
+          })
+        }
+      })
+    }
 
     this.set = (lang = langEn) => {
       lang.set = this.set

diff --git a/src/icons.js b/src/icons.js
@@ -4,9 +4,6 @@ import materialIcons from '../icons/material-icons'
 export default {
   __installed: false,
   install ({ $q, Vue, iconSet }) {
-    if (this.__installed) { return }
-    this.__installed = true
-
     this.set = (iconDef = materialIcons) => {
       iconDef.set = this.set
 

diff --git a/src/install.js b/src/install.js
@@ -3,47 +3,48 @@ import { version } from '../package.json'
 import Platform, { isSSR } from './plugins/platform'
 import History from './history'
 import I18n from './i18n'
-import { clientUpdateBody } from './body'
+import Body from './body'
 import Icons from './icons'
 
-export let ssrInject
+export const queues = {
+  server: [], // on SSR update
+  takeover: [] // on client takeover
+}
+
+export const $q = {
+  version,
+  theme: process.env.THEME
+}
 
-export default function (_Vue, opts = {}) {
+export default function (Vue, opts = {}) {
   if (this.__installed) { return }
   this.__installed = true
 
-  const
-    cfg = opts.config || {},
-    $q = {
-      version,
-      theme: process.env.THEME
-    }
+  const cfg = opts.config || {}
 
   // required plugins
-  Platform.install({ $q, cfg })
-  History.install({ cfg })
-  I18n.install({ $q, Vue: _Vue, cfg, lang: opts.i18n })
-  Icons.install({ $q, Vue: _Vue, iconSet: opts.iconSet })
+  Platform.install({ $q, Vue, queues })
+  Body.install({ $q, queues, cfg })
+  History.install({ $q, cfg })
+  I18n.install({ $q, Vue, queues, cfg, lang: opts.i18n })
+  Icons.install({ $q, Vue, queues, iconSet: opts.iconSet })
 
   if (isSSR) {
-    ssrInject = $q
-
-    _Vue.mixin({
+    Vue.mixin({
       beforeCreate () {
         this.$q = this.$root.$options.$q
       }
     })
   }
   else {
-    clientUpdateBody({ $q, cfg })
-    _Vue.prototype.$q = $q
+    Vue.prototype.$q = $q
   }
 
   if (opts.directives) {
     Object.keys(opts.directives).forEach(key => {
       const d = opts.directives[key]
       if (d.name !== undefined && d.unbind !== void 0) {
-        _Vue.directive(d.name, d)
+        Vue.directive(d.name, d)
       }
     })
   }
@@ -52,7 +53,7 @@ export default function (_Vue, opts = {}) {
     Object.keys(opts.components).forEach(key => {
       const c = opts.components[key]
       if (c.name !== undefined && (c.render !== void 0 || c.mixins !== void 0)) {
-        _Vue.component(c.name, c)
+        Vue.component(c.name, c)
       }
     })
   }
@@ -61,7 +62,7 @@ export default function (_Vue, opts = {}) {
     Object.keys(opts.plugins).forEach(key => {
       const p = opts.plugins[key]
       if (typeof p.install === 'function' && p !== Platform) {
-        p.install({ $q, Vue: _Vue, cfg })
+        p.install({ $q, Vue, queues, cfg })
       }
     })
   }

diff --git a/src/plugins/cookies.js b/src/plugins/cookies.js
@@ -126,7 +126,7 @@ function has (key, ssr) {
   return get(key, ssr) !== undefined
 }
 
-export function ssrGetCookies (ctx) {
+export function getObject (ctx = {}) {
   const ssr = ctx.ssr
 
   return {
@@ -139,14 +139,14 @@ export function ssrGetCookies (ctx) {
 }
 
 export default {
-  get,
-  set,
-  has,
-  remove,
-  all: () => get(),
-
-  install ({ $q }) {
-    if (!isSSR) {
+  install ({ $q, queues }) {
+    if (isSSR) {
+      queues.server.push((q, ctx) => {
+        q.cookies = getObject(ctx)
+      })
+    }
+    else {
+      Object.assign(this, getObject())
       $q.cookies = this
     }
   }

diff --git a/src/plugins/platform.js b/src/plugins/platform.js
@@ -169,51 +169,64 @@ function getPlatform (userAgent) {
   return browser
 }
 
-export function ssrClientTakeover () {
-  onSSR = false
-  fromSSR = false
-}
+function getClientProperties () {
+  let webStorage = false
+
+  try {
+    if (window.localStorage) {
+      webStorage = true
+    }
+  }
+  catch (e) {}
 
-export function ssrGetPlatform (ctx) {
   return {
-    is: getPlatform(ctx.ssr.req.headers['user-agent']),
     has: {
-      touch: false,
-      webStorage: false
+      touch: (() => !!('ontouchstart' in document.documentElement) || window.navigator.msMaxTouchPoints > 0)(),
+      webStorage
     },
-    within: { iframe: false }
+    within: {
+      iframe: window.self !== window.top
+    }
   }
 }
 
-const Platform = {
-  install ({ $q, cfg }) {
+export default {
+  has: {
+    touch: false,
+    webStorage: false
+  },
+  within: {
+    iframe: false
+  },
+
+  install ({ $q, Vue, queues }) {
     if (isSSR) {
-      Platform.is = Platform.has = Platform.within = {}
+      queues.server.push((q, ctx) => {
+        q.platform = {
+          is: getPlatform(ctx.ssr.req.headers['user-agent']),
+          has: {
+            touch: false,
+            webStorage: false
+          },
+          within: { iframe: false }
+        }
+      })
       return
     }
 
-    $q.platform = Platform
-
-    let webStorage
-
-    try {
-      if (window.localStorage) {
-        webStorage = true
-      }
-    }
-    catch (e) {
-      webStorage = false
-    }
-
     this.is = getPlatform()
-    this.has = {
-      touch: (() => !!('ontouchstart' in document.documentElement) || window.navigator.msMaxTouchPoints > 0)(),
-      webStorage
+
+    if (fromSSR) {
+      queues.takeover.push(q => {
+        onSSR = fromSSR = false
+        Object.assign(q.platform, getClientProperties())
+        q.platform.has.touch = true
+      })
+      Vue.util.defineReactive($q, 'platform', this)
     }
-    this.within = {
-      iframe: window.self !== window.top
+    else {
+      Object.assign(this, getClientProperties())
+      $q.platform = this
     }
   }
 }
-
-export default Platform
diff --git a/src/plugins/web-storage.js b/src/plugins/web-storage.js
@@ -1,4 +1,4 @@
-import { isSSR } from './platform'
+import { onSSR } from './platform'
 
 function encode (value) {
   if (Object.prototype.toString.call(value) === '[object Date]') {
@@ -125,26 +125,30 @@ function getStorage (type) {
 
 export const LocalStorage = {
   install ({ $q }) {
-    if (!isSSR && $q.platform.has.webStorage) {
+    if (onSSR) {
+      $q.localStorage = getEmptyStorage()
+      return
+    }
+
+    if ($q.platform.has.webStorage) {
       const storage = getStorage('local')
       $q.localStorage = storage
       Object.assign(this, storage)
     }
-    else {
-      $q.localStorage = getEmptyStorage()
-    }
   }
 }
 
 export const SessionStorage = {
   install ({ $q }) {
-    if (!isSSR && $q.platform.has.webStorage) {
+    if (onSSR) {
+      $q.sessionStorage = getEmptyStorage()
+      return
+    }
+
+    if ($q.platform.has.webStorage) {
       const storage = getStorage('session')
       $q.sessionStorage = storage
       Object.assign(this, storage)
     }
-    else {
-      $q.sessionStorage = getEmptyStorage()
-    }
   }
 }