Skip to content
Permalink
Browse files
fix(ssr): support client-compiled v-model with dynamic type during ssr (
  • Loading branch information
catrope committed May 17, 2022
1 parent 847d7f7 commit c03459b9b6d3c18450235bc4074a603677996320
Show file tree
Hide file tree
Showing 2 changed files with 130 additions and 19 deletions.
@@ -269,33 +269,35 @@ export const vModelDynamic: ObjectDirective<
}
}

function callModelHook(
el: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement,
binding: DirectiveBinding,
vnode: VNode,
prevVNode: VNode | null,
hook: keyof ObjectDirective
) {
let modelToUse: ObjectDirective
switch (el.tagName) {
function resolveDynamicModel(tagName: string, type: string | undefined) {
switch (tagName) {
case 'SELECT':
modelToUse = vModelSelect
break
return vModelSelect
case 'TEXTAREA':
modelToUse = vModelText
break
return vModelText
default:
switch (vnode.props && vnode.props.type) {
switch (type) {
case 'checkbox':
modelToUse = vModelCheckbox
break
return vModelCheckbox
case 'radio':
modelToUse = vModelRadio
break
return vModelRadio
default:
modelToUse = vModelText
return vModelText
}
}
}

function callModelHook(
el: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement,
binding: DirectiveBinding,
vnode: VNode,
prevVNode: VNode | null,
hook: keyof ObjectDirective
) {
const modelToUse = resolveDynamicModel(
el.tagName,
vnode.props && vnode.props.type
)
const fn = modelToUse[hook] as DirectiveHook
fn && fn(el, binding, vnode, prevVNode)
}
@@ -324,4 +326,18 @@ export function initVModelForSSR() {
return { checked: true }
}
}

vModelDynamic.getSSRProps = (binding, vnode) => {
if (typeof vnode.type !== 'string') {
return
}
const modelToUse = resolveDynamicModel(
// resolveDynamicModel expects an uppercase tag name, but vnode.type is lowercase
vnode.type.toUpperCase(),
vnode.props && vnode.props.type
)
if (modelToUse.getSSRProps) {
return modelToUse.getSSRProps(binding, vnode)
}
}
}
@@ -11,6 +11,7 @@ import {
vModelText,
vModelRadio,
vModelCheckbox,
vModelDynamic,
resolveDirective
} from 'vue'
import { ssrGetDirectiveProps, ssrRenderAttrs } from '../src'
@@ -376,6 +377,100 @@ describe('ssr: directives', () => {
})
})

describe('vnode v-model dynamic', () => {
test('text', async () => {
expect(
await renderToString(
createApp({
render() {
return withDirectives(h('input'), [[vModelDynamic, 'hello']])
}
})
)
).toBe(`<input value="hello">`)
})

test('radio', async () => {
expect(
await renderToString(
createApp({
render() {
return withDirectives(
h('input', { type: 'radio', value: 'hello' }),
[[vModelDynamic, 'hello']]
)
}
})
)
).toBe(`<input type="radio" value="hello" checked>`)

expect(
await renderToString(
createApp({
render() {
return withDirectives(
h('input', { type: 'radio', value: 'hello' }),
[[vModelDynamic, 'foo']]
)
}
})
)
).toBe(`<input type="radio" value="hello">`)
})

test('checkbox', async () => {
expect(
await renderToString(
createApp({
render() {
return withDirectives(h('input', { type: 'checkbox' }), [
[vModelDynamic, true]
])
}
})
)
).toBe(`<input type="checkbox" checked>`)

expect(
await renderToString(
createApp({
render() {
return withDirectives(h('input', { type: 'checkbox' }), [
[vModelDynamic, false]
])
}
})
)
).toBe(`<input type="checkbox">`)

expect(
await renderToString(
createApp({
render() {
return withDirectives(
h('input', { type: 'checkbox', value: 'foo' }),
[[vModelDynamic, ['foo']]]
)
}
})
)
).toBe(`<input type="checkbox" value="foo" checked>`)

expect(
await renderToString(
createApp({
render() {
return withDirectives(
h('input', { type: 'checkbox', value: 'foo' }),
[[vModelDynamic, []]]
)
}
})
)
).toBe(`<input type="checkbox" value="foo">`)
})
})

test('custom directive w/ getSSRProps (vdom)', async () => {
expect(
await renderToString(

0 comments on commit c03459b

Please sign in to comment.