theluyuan/vue3-yuanma
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

wip(ssr): v-model w/ dynamic type & props

Browse Source
This commit is contained in:
Evan You
2020-02-05 17:01:00 -05:00
parent 1f2de9e232
commit 201f18b58b
10 changed files with 204 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/compiler-ssr/__tests__/ssrElement.spec.ts
View File

@@ -55,7 +55,7 @@ describe('ssr: element', () => {
return function ssrRender(_ctx, _push, _parent) {
let _temp0
_push(\`<textarea\${
_renderAttrs(_temp0 = _ctx.obj)
}>\${

69
packages/compiler-ssr/__tests__/ssrVModel.spec.ts
View File

@@ -65,4 +65,73 @@ describe('ssr: v-model', () => {
}"
`)
})
test('<input :type="x">', () => {
expect(compile(`<input :type="x" v-model="foo">`).code)
.toMatchInlineSnapshot(`
"const { _renderAttr, _renderDynamicModel } = require(\\"@vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent) {
_push(\`<input\${
_renderAttr(\\"type\\", _ctx.x)
}\${
_renderDynamicModel(_ctx.x, _ctx.foo, null)
}>\`)
}"
`)
expect(compile(`<input :type="x" v-model="foo" value="bar">`).code)
.toMatchInlineSnapshot(`
"const { _renderAttr, _renderDynamicModel } = require(\\"@vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent) {
_push(\`<input\${
_renderAttr(\\"type\\", _ctx.x)
}\${
_renderDynamicModel(_ctx.x, _ctx.foo, \\"bar\\")
} value=\\"bar\\">\`)
}"
`)
expect(compile(`<input :type="x" v-model="foo" :value="bar">`).code)
.toMatchInlineSnapshot(`
"const { _renderAttr, _renderDynamicModel } = require(\\"@vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent) {
_push(\`<input\${
_renderAttr(\\"type\\", _ctx.x)
}\${
_renderDynamicModel(_ctx.x, _ctx.foo, _ctx.bar)
}\${
_renderAttr(\\"value\\", _ctx.bar)
}>\`)
}"
`)
})
test('<input v-bind="obj">', () => {
expect(compile(`<input v-bind="obj" v-model="foo">`).code)
.toMatchInlineSnapshot(`
"const { mergeProps } = require(\\"vue\\")
const { _renderAttrs, _getDynamicModelProps } = require(\\"@vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent) {
let _temp0
_push(\`<input\${_renderAttrs(_temp0 = _ctx.obj, mergeProps(_temp0, _getDynamicModelProps(_temp0, _ctx.foo)))}>\`)
}"
`)
expect(compile(`<input id="x" v-bind="obj" v-model="foo" class="y">`).code)
.toMatchInlineSnapshot(`
"const { mergeProps } = require(\\"vue\\")
const { _renderAttrs, _getDynamicModelProps } = require(\\"@vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent) {
let _temp0
_push(\`<input\${_renderAttrs(_temp0 = mergeProps({ id: \\"x\\" }, _ctx.obj, { class: \\"y\\" }), mergeProps(_temp0, _getDynamicModelProps(_temp0, _ctx.foo)))}>\`)
}"
`)
})
})

6
packages/compiler-ssr/src/runtimeHelpers.ts
View File

@@ -11,6 +11,8 @@ export const SSR_RENDER_DYNAMIC_ATTR = Symbol(`renderDynamicAttr`)
export const SSR_RENDER_LIST = Symbol(`renderList`)
export const SSR_LOOSE_EQUAL = Symbol(`looseEqual`)
export const SSR_LOOSE_CONTAIN = Symbol(`looseContain`)
export const SSR_RENDER_DYNAMIC_MODEL = Symbol(`renderDynamicModel`)
export const SSR_GET_DYNAMIC_MODEL_PROPS = Symbol(`getDynamicModelProps`)
export const ssrHelpers = {
[SSR_INTERPOLATE]: `_interpolate`,
@@ -23,7 +25,9 @@ export const ssrHelpers = {
[SSR_RENDER_DYNAMIC_ATTR]: `_renderDynamicAttr`,
[SSR_RENDER_LIST]: `_renderList`,
[SSR_LOOSE_EQUAL]: `_looseEqual`,
[SSR_LOOSE_CONTAIN]: `_looseContain`
[SSR_LOOSE_CONTAIN]: `_looseContain`,
[SSR_RENDER_DYNAMIC_MODEL]: `_renderDynamicModel`,
[SSR_GET_DYNAMIC_MODEL_PROPS]: `_getDynamicModelProps`
}
// Note: these are helpers imported from @vue/server-renderer

46
packages/compiler-ssr/src/transforms/ssrTransformElement.ts
View File

@@ -20,7 +20,8 @@ import {
ArrayExpression,
createAssignmentExpression,
TextNode,
hasDynamicKeyVBind
hasDynamicKeyVBind,
MERGE_PROPS
} from '@vue/compiler-dom'
import { escapeHtml, isBooleanAttr, isSSRSafeAttrName } from '@vue/shared'
import { createSSRCompilerError, SSRErrorCodes } from '../errors'
@@ -30,7 +31,8 @@ import {
SSR_RENDER_STYLE,
SSR_RENDER_DYNAMIC_ATTR,
SSR_RENDER_ATTRS,
SSR_INTERPOLATE
SSR_INTERPOLATE,
SSR_GET_DYNAMIC_MODEL_PROPS
} from '../runtimeHelpers'
export const ssrTransformElement: NodeTransform = (node, context) => {
@@ -55,6 +57,7 @@ export const ssrTransformElement: NodeTransform = (node, context) => {
context.helper(SSR_RENDER_ATTRS),
[props]
)
if (node.tag === 'textarea') {
// <textarea> with dynamic v-bind. We don't know if the final props
// will contain .value, so we will have to do something special:
@@ -81,7 +84,31 @@ export const ssrTransformElement: NodeTransform = (node, context) => {
)
]
)
} else if (node.tag === 'input') {
// <input v-bind="obj" v-model>
// we need to determine the props to render for the dynamic v-model
// and merge it with the v-bind expression.
const vModel = findVModel(node)
if (vModel) {
// 1. save the props (san v-model) in a temp variable
const tempId = `_temp${context.temps++}`
const tempExp = createSimpleExpression(tempId, false)
propsExp.arguments = [
createAssignmentExpression(tempExp, props),
createCallExpression(context.helper(MERGE_PROPS), [
tempExp,
createCallExpression(
context.helper(SSR_GET_DYNAMIC_MODEL_PROPS),
[
tempExp, // existing props
vModel.exp! // model
]
)
])
]
}
}
openTag.push(propsExp)
}
}
@@ -122,7 +149,14 @@ export const ssrTransformElement: NodeTransform = (node, context) => {
)
)
} else if (!hasDynamicVBind) {
const { props } = directiveTransform(prop, node, context)
const { props, ssrTagParts } = directiveTransform(
prop,
node,
context
)
if (ssrTagParts) {
openTag.push(...ssrTagParts)
}
for (let j = 0; j < props.length; j++) {
const { key, value } = props[j]
if (key.type === NodeTypes.SIMPLE_EXPRESSION && key.isStatic) {
@@ -254,3 +288,9 @@ function removeStaticBinding(
tag.splice(i, 1)
}
}
function findVModel(node: PlainElementNode): DirectiveNode | undefined {
return node.props.find(
p => p.type === NodeTypes.DIRECTIVE && p.name === 'model' && p.exp
) as DirectiveNode | undefined
}

40
packages/compiler-ssr/src/transforms/ssrVModel.ts
View File

@@ -6,16 +6,21 @@ import {
NodeTypes,
createDOMCompilerError,
DOMErrorCodes,
Property,
createObjectProperty,
createSimpleExpression,
createCallExpression,
PlainElementNode,
ExpressionNode,
createConditionalExpression,
createInterpolation
createInterpolation,
hasDynamicKeyVBind
} from '@vue/compiler-dom'
import { SSR_LOOSE_EQUAL, SSR_LOOSE_CONTAIN } from '../runtimeHelpers'
import {
SSR_LOOSE_EQUAL,
SSR_LOOSE_CONTAIN,
SSR_RENDER_DYNAMIC_MODEL
} from '../runtimeHelpers'
import { DirectiveTransformResult } from 'packages/compiler-core/src/transform'
export const ssrTransformModel: DirectiveTransform = (dir, node, context) => {
const model = dir.exp!
@@ -33,7 +38,7 @@ export const ssrTransformModel: DirectiveTransform = (dir, node, context) => {
}
if (node.tagType === ElementTypes.ELEMENT) {
let props: Property[] = []
const res: DirectiveTransformResult = { props: [] }
const defaultProps = [
// default value binding for text type inputs
createObjectProperty(createSimpleExpression(`value`, true), model)
@@ -41,26 +46,32 @@ export const ssrTransformModel: DirectiveTransform = (dir, node, context) => {
if (node.tag === 'input') {
const type = findProp(node, 'type')
if (type) {
const value = findValueBinding(node)
if (type.type === NodeTypes.DIRECTIVE) {
// dynamic type
// TODO
res.ssrTagParts = [
createCallExpression(context.helper(SSR_RENDER_DYNAMIC_MODEL), [
type.exp!,
model,
value
])
]
} else if (type.value) {
// static type
switch (type.value.content) {
case 'radio':
props = [
res.props = [
createObjectProperty(
createSimpleExpression(`checked`, true),
createCallExpression(context.helper(SSR_LOOSE_EQUAL), [
model,
findValueBinding(node)
value
])
)
]
break
case 'checkbox':
const value = findValueBinding(node)
props = [
res.props = [
createObjectProperty(
createSimpleExpression(`checked`, true),
createConditionalExpression(
@@ -84,13 +95,18 @@ export const ssrTransformModel: DirectiveTransform = (dir, node, context) => {
break
default:
checkDuplicatedValue()
props = defaultProps
res.props = defaultProps
break
}
}
} else if (hasDynamicKeyVBind(node)) {
// dynamic type due to dynamic v-bind
// NOOP, handled in ssrTransformElement due to need to rewrite
// the entire props expression
} else {
// text type
checkDuplicatedValue()
props = defaultProps
res.props = defaultProps
}
} else if (node.tag === 'textarea') {
checkDuplicatedValue()
@@ -107,7 +123,7 @@ export const ssrTransformModel: DirectiveTransform = (dir, node, context) => {
)
}
return { props }
return res
} else {
// component v-model
return transformModel(dir, node, context)