Skip to content

Commit

Permalink
feat: SSR support update for Screen plugin
Browse files Browse the repository at this point in the history
  • Loading branch information
rstoenescu committed Jun 18, 2018
1 parent 11dde6f commit e3cd201
Show file tree
Hide file tree
Showing 16 changed files with 100 additions and 61 deletions.
3 changes: 2 additions & 1 deletion src/body.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { ready } from './utils/dom'
import { setBrand } from './utils/colors'
import { isSSR } from './plugins/platform'
import { $q, queues } from './install'

function getBodyClasses ({ is, has, within }, cfg) {
const cls = [
Expand Down Expand Up @@ -53,7 +54,7 @@ function setColors (brand) {
}

export default {
install ({ $q, cfg, queues }) {
install ({ cfg }) {
if (isSSR) {
queues.server.push((q, ctx) => {
const update = ctx.ssr.setBodyClasses
Expand Down
3 changes: 2 additions & 1 deletion src/history.js
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import { isSSR } from './plugins/platform'
import { $q } from './install'

export default {
__history: [],
add: () => {},
remove: () => {},

install ({ $q, cfg }) {
install ({ cfg }) {
if (isSSR || !$q.platform.is.cordova) {
return
}
Expand Down
3 changes: 2 additions & 1 deletion src/i18n.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import langEn from '../i18n/en-us'
import { isSSR } from './plugins/platform'
import { ready } from './utils/dom'
import { $q, queues } from './install'

export default {
install ({ $q, Vue, queues, lang }) {
install ({ Vue, lang }) {
if (isSSR) {
queues.server.push((q, ctx) => {
const fn = ctx.ssr.setHtmlAttrs
Expand Down
3 changes: 2 additions & 1 deletion src/icons.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import { isSSR } from './plugins/platform'
import { $q } from './install'
import materialIcons from '../icons/material-icons'

export default {
__installed: false,
install ({ $q, Vue, iconSet }) {
install ({ Vue, iconSet }) {
this.set = (iconDef = materialIcons) => {
iconDef.set = this.set

Expand Down
13 changes: 7 additions & 6 deletions src/install.js
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,11 @@ export default function (Vue, opts = {}) {
const cfg = opts.config || {}

// required plugins
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 })
Platform.install({ Vue })
Body.install({ cfg })
History.install({ cfg })
I18n.install({ Vue, cfg, lang: opts.i18n })
Icons.install({ Vue, iconSet: opts.iconSet })

if (isSSR) {
Vue.mixin({
Expand Down Expand Up @@ -59,10 +59,11 @@ export default function (Vue, opts = {}) {
}

if (opts.plugins) {
const param = { Vue, cfg }
Object.keys(opts.plugins).forEach(key => {
const p = opts.plugins[key]
if (typeof p.install === 'function' && p !== Platform) {
p.install({ $q, Vue, queues, cfg })
p.install(param)
}
})
}
Expand Down
3 changes: 2 additions & 1 deletion src/plugins/action-sheet.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import { QActionSheet } from '../components/action-sheet'
import modalFn from '../utils/modal-fn'
import { $q } from '../install'

export default {
install ({ $q, Vue }) {
install ({ Vue }) {
this.create = $q.actionSheet = modalFn(QActionSheet, Vue)
}
}
3 changes: 2 additions & 1 deletion src/plugins/addressbar-color.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import Platform, { isSSR } from './platform'
import { ready } from '../utils/dom'
import { getBrand } from '../utils/colors'
import { $q } from '../install'

let metaValue

Expand Down Expand Up @@ -46,7 +47,7 @@ function setColor (hexColor) {
}

export default {
install ({ $q, Vue }) {
install ({ Vue }) {
this.set = !isSSR && Platform.is.mobile && (
Platform.is.cordova ||
Platform.is.winphone || Platform.is.safari ||
Expand Down
3 changes: 2 additions & 1 deletion src/plugins/app-fullscreen.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { isSSR } from './platform'
import { $q } from '../install'

const prefixes = {}

Expand Down Expand Up @@ -26,7 +27,7 @@ export default {
}
},

install ({ $q, Vue }) {
install ({ Vue }) {
$q.fullscreen = this

if (isSSR) { return }
Expand Down
3 changes: 2 additions & 1 deletion src/plugins/app-visibility.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import { isSSR } from './platform'
import { $q } from '../install'

export default {
appVisible: false,

install ({ $q, Vue }) {
install ({ Vue }) {
if (isSSR) {
this.appVisible = $q.appVisible = true
return
Expand Down
3 changes: 2 additions & 1 deletion src/plugins/cookies.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { isSSR } from './platform'
import { $q, queues } from '../install'

function encode (string) {
return encodeURIComponent(string)
Expand Down Expand Up @@ -139,7 +140,7 @@ export function getObject (ctx = {}) {
}

export default {
install ({ $q, queues }) {
install () {
if (isSSR) {
queues.server.push((q, ctx) => {
q.cookies = getObject(ctx)
Expand Down
3 changes: 2 additions & 1 deletion src/plugins/dialog.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import { QDialog } from '../components/dialog'
import modalFn from '../utils/modal-fn'
import { $q } from '../install'

export default {
install ({ $q, Vue }) {
install ({ Vue }) {
this.create = $q.dialog = modalFn(QDialog, Vue)
}
}
3 changes: 2 additions & 1 deletion src/plugins/loading.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { QSpinner } from '../components/spinner'
import { isSSR } from './platform'
import { $q } from '../install'

let
vm,
Expand Down Expand Up @@ -93,7 +94,7 @@ export default {
},

__Vue: null,
install ({ $q, Vue, cfg: { loading } }) {
install ({ Vue, cfg: { loading } }) {
loading && this.setDefaults(loading)

$q.loading = this
Expand Down
13 changes: 7 additions & 6 deletions src/plugins/notify.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import uid from '../utils/uid'
import clone from '../utils/clone'
import { isSSR } from './platform'
import { ready } from '../utils/dom'
import { $q } from '../install'

let defaults

Expand All @@ -12,10 +13,10 @@ const positionList = [
'top', 'bottom', 'left', 'right', 'center'
]

function init ({ $q, Vue }) {
function init ({ Vue }) {
if (!document.body) {
ready(() => {
init.call(this, { $q, Vue })
init.call(this, { Vue })
})
return
}
Expand Down Expand Up @@ -194,16 +195,16 @@ export default {

install (args) {
if (isSSR) {
args.$q.notify = () => {}
args.$q.notify.setDefaults = () => {}
$q.notify = () => {}
$q.notify.setDefaults = () => {}
return
}

init.call(this, args)

args.cfg.notify && this.setDefaults(args.cfg.notify)

args.$q.notify = this.create.bind(this)
args.$q.notify.setDefaults = this.setDefaults
$q.notify = this.create.bind(this)
$q.notify.setDefaults = this.setDefaults
}
}
4 changes: 3 additions & 1 deletion src/plugins/platform.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { $q, queues } from '../install'

/* eslint-disable no-useless-escape */
/* eslint-disable no-unused-expressions */
/* eslint-disable no-mixed-operators */
Expand Down Expand Up @@ -199,7 +201,7 @@ export default {
iframe: false
},

install ({ $q, Vue, queues }) {
install ({ Vue }) {
if (isSSR) {
queues.server.push((q, ctx) => {
q.platform = {
Expand Down
93 changes: 58 additions & 35 deletions src/plugins/screen.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import { isSSR } from './platform'
import { isSSR, fromSSR } from './platform'
import { listenOpts } from '../utils/event'
import { debounce } from '../utils/debounce'
import { $q, queues } from '../install'

export default {
width: 1024,
width: 0,

sizes: {
sm: 576,
Expand All @@ -13,33 +14,22 @@ export default {
},

lt: {
xl: true
},
gt: {
xs: true,
sm: true,
md: true
md: true,
xl: true
},
lg: true,
gt: {},
xs: true,

install ({ $q, Vue }) {
setSizes () {},
setDebounce () {},

install ({ Vue }) {
if (isSSR) {
$q.screen = this
this.setSizes = this.setDebounce = () => {}
return
}

if (document && document.body) {
const style = getComputedStyle(document.body)

// if css props available
if (style.getPropertyValue('--q-size-sm')) {
['sm', 'md', 'lg', 'xl'].forEach(name => {
this.sizes[name] = parseInt(style.getPropertyValue(`--q-size-${name}`), 10)
})
}
}

let update = () => {
const
w = window.innerWidth,
Expand All @@ -66,27 +56,60 @@ export default {
this.xl = w > s.xl
}

update()
let updateEvt = debounce(update, 100)

window.addEventListener('resize', updateEvt, listenOpts.passive)
let
updateEvt = debounce(update, 100),
updateSizes = {},
updateDebounce

this.setSizes = sizes => {
['sm', 'md', 'lg', 'xl'].forEach(name => {
if (sizes[name]) {
this.sizes[name] = sizes[name]
}
sizes.forEach(name => {
updateSizes[name] = sizes[name]
})
update()
}
this.setDebounce = delay => {
window.removeEventListener('resize', updateEvt, listenOpts.passive)
updateEvt = delay > 0
? debounce(update, delay)
: update
this.setDebounce = deb => {
updateDebounce = deb
}

const start = () => {
const style = getComputedStyle(document.body)

// if css props available
if (style.getPropertyValue('--q-size-sm')) {
['sm', 'md', 'lg', 'xl'].forEach(name => {
this.sizes[name] = parseInt(style.getPropertyValue(`--q-size-${name}`), 10)
})
}

this.setSizes = sizes => {
['sm', 'md', 'lg', 'xl'].forEach(name => {
if (sizes[name]) {
this.sizes[name] = sizes[name]
}
})
update()
}
this.setDebounce = delay => {
window.removeEventListener('resize', updateEvt, listenOpts.passive)
updateEvt = delay > 0
? debounce(update, delay)
: update
window.addEventListener('resize', updateEvt, listenOpts.passive)
}

updateDebounce && this.setDebounce(updateDebounce)
Object.keys(updateSizes).length > 0 && this.setSizes(updateSizes)
update()

window.addEventListener('resize', updateEvt, listenOpts.passive)
}

Vue.util.defineReactive($q, 'screen', this)

if (fromSSR) {
queues.takeover.push(start)
}
else {
start()
}
}
}
5 changes: 3 additions & 2 deletions src/plugins/web-storage.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { onSSR } from './platform'
import { $q } from '../install'

function encode (value) {
if (Object.prototype.toString.call(value) === '[object Date]') {
Expand Down Expand Up @@ -124,7 +125,7 @@ function getStorage (type) {
}

export const LocalStorage = {
install ({ $q }) {
install () {
if (onSSR) {
$q.localStorage = getEmptyStorage()
return
Expand All @@ -139,7 +140,7 @@ export const LocalStorage = {
}

export const SessionStorage = {
install ({ $q }) {
install () {
if (onSSR) {
$q.sessionStorage = getEmptyStorage()
return
Expand Down

0 comments on commit e3cd201

Please sign in to comment.