Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-25 15:15:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(bridge): implement ssrRef with useState (#787)

Browse Source
This commit is contained in:
Daniel Roe 2021-10-12 16:22:06 +01:00 committed by GitHub
parent d2d34a44cc
commit 7bf2412eae
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 9 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
packages/bridge/src/runtime/capi.legacy.mjs
View File

@ -1,6 +1,7 @@
import defu from 'defu' import defu from 'defu'
import { computed, customRef, getCurrentInstance as getVM, isReactive, isRef, onBeforeMount, onServerPrefetch, reactive, ref, set, shallowRef, toRaw, toRefs, watch } from '@vue/composition-api' import { computed, getCurrentInstance as getVM, isReactive, isRef, onBeforeMount, onServerPrefetch, reactive, ref, set, shallowRef, toRaw, toRefs, watch } from '@vue/composition-api'
import { useNuxtApp } from './app' import { useNuxtApp } from './app'
import { useState } from './composables'
// Vue composition API export // Vue composition API export
export { export {
@ -91,7 +92,6 @@ export const reqRef = unsupported('`reqRef` is a deprecated method that is no lo
export const reqSsrRef = unsupported('`reqSsrRef` is no longer provided (`ssrRef` can be used instead).') export const reqSsrRef = unsupported('`reqSsrRef` is no longer provided (`ssrRef` can be used instead).')
// ssrRef helpers // ssrRef helpers
const isProxyable = val => !!val && typeof val === 'object'
const sanitise = val => (val && JSON.parse(JSON.stringify(val))) || val const sanitise = val => (val && JSON.parse(JSON.stringify(val))) || val
const getValue = val => val instanceof Function ? val() : val const getValue = val => val instanceof Function ? val() : val
@ -99,75 +99,21 @@ export const ssrRef = (value, key) => {
const vm = getVM() const vm = getVM()
if (!vm) { throw new Error('ssrRef no longer supports global/ambient context and must be called within a setup() function') } if (!vm) { throw new Error('ssrRef no longer supports global/ambient context and must be called within a setup() function') }
const ssrRefs = useSSRRefs() warnOnce('ssrRef', '`ssrRef` is deprecated and can be replaced with `useState`.')
let resolvedValue = isHMR() ? getValue(value) : ssrRefs[key] ?? getValue(value) return useState(key, value instanceof Function ? value : () => value)
const _ref = ref(resolvedValue)
if (process.client) { return _ref }
const setData = (key, val) => {
ssrRefs[key] = sanitise(val)
}
if (value instanceof Function) { setData(key, resolvedValue) }
const getProxy = (track, trigger, observable) =>
new Proxy(observable, {
get (target, prop) {
track()
if (isProxyable(target[prop])) { return getProxy(track, trigger, target[prop]) }
return Reflect.get(target, prop)
},
set (obj, prop, newVal) {
const result = Reflect.set(obj, prop, newVal)
setData(key, resolvedValue)
trigger()
return result
}
})
const proxy = customRef((track, trigger) => ({
get: () => {
track()
if (isProxyable(resolvedValue)) { return getProxy(track, trigger, resolvedValue) }
return resolvedValue
},
set: (v) => {
setData(key, v)
resolvedValue = v
trigger()
}
}))
return proxy
} }
export const shallowSsrRef = (value, key) => { export const shallowSsrRef = (value, key) => {
const ssrRefs = useSSRRefs() warnOnce('shallowSsrRef', '`shallowSsrRef` is deprecated and can be replaced with `useState`.')
let resolvedValue = isHMR() ? getValue(value) : ssrRefs[key] ?? getValue(value) const ref = ssrRef(value, key)
const _ref = shallowRef(resolvedValue) if (process.client) {
if (process.client) { return _ref } return shallowRef(ref.value)
const setData = (key, val) => {
ssrRefs[key] = sanitise(val)
} }
if (value instanceof Function) { return ref
setData(key, resolvedValue)
}
return computed({
get () {
return resolvedValue
},
set (newValue) {
setData(key, newValue)
resolvedValue = newValue
}
})
} }
export const ssrPromise = (value, key) => { export const ssrPromise = (value, key) => {