@vue/compiler-ssr
Advanced tools
Comparing version 3.0.0-beta.15 to 3.0.0-beta.16
@@ -396,19 +396,25 @@ 'use strict'; | ||
const ssrTransformElement = (node, context) => { | ||
if (node.type === 1 /* ELEMENT */ && | ||
node.tagType === 0 /* ELEMENT */) { | ||
return function ssrPostTransformElement() { | ||
// element | ||
// generate the template literal representing the open tag. | ||
const openTag = [`<${node.tag}`]; | ||
// some tags need to be pasesd to runtime for special checks | ||
const needTagForRuntime = node.tag === 'textarea' || node.tag.indexOf('-') > 0; | ||
// v-bind="obj" or v-bind:[key] can potentially overwrite other static | ||
// attrs and can affect final rendering result, so when they are present | ||
// we need to bail out to full `renderAttrs` | ||
const hasDynamicVBind = compilerDom.hasDynamicKeyVBind(node); | ||
if (hasDynamicVBind) { | ||
const { props } = compilerDom.buildProps(node, context, node.props, true /* ssr */); | ||
if (props) { | ||
const propsExp = compilerDom.createCallExpression(context.helper(SSR_RENDER_ATTRS), [props]); | ||
if (node.tag === 'textarea') { | ||
if (node.type !== 1 /* ELEMENT */ || | ||
node.tagType !== 0 /* ELEMENT */) { | ||
return; | ||
} | ||
return function ssrPostTransformElement() { | ||
// element | ||
// generate the template literal representing the open tag. | ||
const openTag = [`<${node.tag}`]; | ||
// some tags need to be pasesd to runtime for special checks | ||
const needTagForRuntime = node.tag === 'textarea' || node.tag.indexOf('-') > 0; | ||
// v-bind="obj" or v-bind:[key] can potentially overwrite other static | ||
// attrs and can affect final rendering result, so when they are present | ||
// we need to bail out to full `renderAttrs` | ||
const hasDynamicVBind = compilerDom.hasDynamicKeyVBind(node); | ||
if (hasDynamicVBind) { | ||
const { props } = compilerDom.buildProps(node, context, node.props, true /* ssr */); | ||
if (props) { | ||
const propsExp = compilerDom.createCallExpression(context.helper(SSR_RENDER_ATTRS), [props]); | ||
if (node.tag === 'textarea') { | ||
const existingText = node.children[0]; | ||
// If interpolation, this is dynamic <textarea> content, potentially | ||
// injected by v-model and takes higher priority than v-bind value | ||
if (!existingText || existingText.type !== 5 /* INTERPOLATION */) { | ||
// <textarea> with dynamic v-bind. We don't know if the final props | ||
@@ -422,3 +428,2 @@ // will contain .value, so we will have to do something special: | ||
]; | ||
const existingText = node.children[0]; | ||
rawChildrenMap.set(node, compilerDom.createCallExpression(context.helper(SSR_INTERPOLATE), [ | ||
@@ -428,143 +433,143 @@ compilerDom.createConditionalExpression(compilerDom.createSimpleExpression(`"value" in ${tempId}`, false), compilerDom.createSimpleExpression(`${tempId}.value`, false), compilerDom.createSimpleExpression(existingText ? existingText.content : ``, true), false) | ||
} | ||
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 = compilerDom.createSimpleExpression(tempId, false); | ||
propsExp.arguments = [ | ||
compilerDom.createSequenceExpression([ | ||
compilerDom.createAssignmentExpression(tempExp, props), | ||
compilerDom.createCallExpression(context.helper(compilerDom.MERGE_PROPS), [ | ||
} | ||
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 = compilerDom.createSimpleExpression(tempId, false); | ||
propsExp.arguments = [ | ||
compilerDom.createSequenceExpression([ | ||
compilerDom.createAssignmentExpression(tempExp, props), | ||
compilerDom.createCallExpression(context.helper(compilerDom.MERGE_PROPS), [ | ||
tempExp, | ||
compilerDom.createCallExpression(context.helper(SSR_GET_DYNAMIC_MODEL_PROPS), [ | ||
tempExp, | ||
compilerDom.createCallExpression(context.helper(SSR_GET_DYNAMIC_MODEL_PROPS), [ | ||
tempExp, | ||
vModel.exp // model | ||
]) | ||
vModel.exp // model | ||
]) | ||
]) | ||
]; | ||
} | ||
]) | ||
]; | ||
} | ||
if (needTagForRuntime) { | ||
propsExp.arguments.push(`"${node.tag}"`); | ||
} | ||
openTag.push(propsExp); | ||
} | ||
if (needTagForRuntime) { | ||
propsExp.arguments.push(`"${node.tag}"`); | ||
} | ||
openTag.push(propsExp); | ||
} | ||
// book keeping static/dynamic class merging. | ||
let dynamicClassBinding = undefined; | ||
let staticClassBinding = undefined; | ||
// all style bindings are converted to dynamic by transformStyle. | ||
// but we need to make sure to merge them. | ||
let dynamicStyleBinding = undefined; | ||
for (let i = 0; i < node.props.length; i++) { | ||
const prop = node.props[i]; | ||
// special cases with children override | ||
if (prop.type === 7 /* DIRECTIVE */) { | ||
if (prop.name === 'html' && prop.exp) { | ||
rawChildrenMap.set(node, prop.exp); | ||
} | ||
else if (prop.name === 'text' && prop.exp) { | ||
} | ||
// book keeping static/dynamic class merging. | ||
let dynamicClassBinding = undefined; | ||
let staticClassBinding = undefined; | ||
// all style bindings are converted to dynamic by transformStyle. | ||
// but we need to make sure to merge them. | ||
let dynamicStyleBinding = undefined; | ||
for (let i = 0; i < node.props.length; i++) { | ||
const prop = node.props[i]; | ||
// special cases with children override | ||
if (prop.type === 7 /* DIRECTIVE */) { | ||
if (prop.name === 'html' && prop.exp) { | ||
rawChildrenMap.set(node, prop.exp); | ||
} | ||
else if (prop.name === 'text' && prop.exp) { | ||
node.children = [compilerDom.createInterpolation(prop.exp, prop.loc)]; | ||
} | ||
else if (prop.name === 'slot') { | ||
context.onError(compilerDom.createCompilerError(37 /* X_V_SLOT_MISPLACED */, prop.loc)); | ||
} | ||
else if (isTextareaWithValue(node, prop) && prop.exp) { | ||
if (!hasDynamicVBind) { | ||
node.children = [compilerDom.createInterpolation(prop.exp, prop.loc)]; | ||
} | ||
else if (prop.name === 'slot') { | ||
context.onError(compilerDom.createCompilerError(37 /* X_V_SLOT_MISPLACED */, prop.loc)); | ||
} | ||
else { | ||
// Directive transforms. | ||
const directiveTransform = context.directiveTransforms[prop.name]; | ||
if (!directiveTransform) { | ||
// no corresponding ssr directive transform found. | ||
context.onError(createSSRCompilerError(57 /* X_SSR_CUSTOM_DIRECTIVE_NO_TRANSFORM */, prop.loc)); | ||
} | ||
else if (isTextareaWithValue(node, prop) && prop.exp) { | ||
if (!hasDynamicVBind) { | ||
node.children = [compilerDom.createInterpolation(prop.exp, prop.loc)]; | ||
else if (!hasDynamicVBind) { | ||
const { props, ssrTagParts } = directiveTransform(prop, node, context); | ||
if (ssrTagParts) { | ||
openTag.push(...ssrTagParts); | ||
} | ||
} | ||
else { | ||
// Directive transforms. | ||
const directiveTransform = context.directiveTransforms[prop.name]; | ||
if (!directiveTransform) { | ||
// no corresponding ssr directive transform found. | ||
context.onError(createSSRCompilerError(57 /* X_SSR_CUSTOM_DIRECTIVE_NO_TRANSFORM */, prop.loc)); | ||
} | ||
else if (!hasDynamicVBind) { | ||
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 === 4 /* SIMPLE_EXPRESSION */ && key.isStatic) { | ||
let attrName = key.content; | ||
// static key attr | ||
if (attrName === 'class') { | ||
openTag.push(` class="`, (dynamicClassBinding = compilerDom.createCallExpression(context.helper(SSR_RENDER_CLASS), [value])), `"`); | ||
for (let j = 0; j < props.length; j++) { | ||
const { key, value } = props[j]; | ||
if (key.type === 4 /* SIMPLE_EXPRESSION */ && key.isStatic) { | ||
let attrName = key.content; | ||
// static key attr | ||
if (attrName === 'class') { | ||
openTag.push(` class="`, (dynamicClassBinding = compilerDom.createCallExpression(context.helper(SSR_RENDER_CLASS), [value])), `"`); | ||
} | ||
else if (attrName === 'style') { | ||
if (dynamicStyleBinding) { | ||
// already has style binding, merge into it. | ||
mergeCall(dynamicStyleBinding, value); | ||
} | ||
else if (attrName === 'style') { | ||
if (dynamicStyleBinding) { | ||
// already has style binding, merge into it. | ||
mergeCall(dynamicStyleBinding, value); | ||
} | ||
else { | ||
openTag.push(` style="`, (dynamicStyleBinding = compilerDom.createCallExpression(context.helper(SSR_RENDER_STYLE), [value])), `"`); | ||
} | ||
} | ||
else { | ||
attrName = | ||
node.tag.indexOf('-') > 0 | ||
? attrName // preserve raw name on custom elements | ||
: shared.propsToAttrMap[attrName] || attrName.toLowerCase(); | ||
if (shared.isBooleanAttr(attrName)) { | ||
openTag.push(compilerDom.createConditionalExpression(value, compilerDom.createSimpleExpression(' ' + attrName, true), compilerDom.createSimpleExpression('', true), false /* no newline */)); | ||
} | ||
else if (shared.isSSRSafeAttrName(attrName)) { | ||
openTag.push(compilerDom.createCallExpression(context.helper(SSR_RENDER_ATTR), [ | ||
key, | ||
value | ||
])); | ||
} | ||
else { | ||
context.onError(createSSRCompilerError(58 /* X_SSR_UNSAFE_ATTR_NAME */, key.loc)); | ||
} | ||
openTag.push(` style="`, (dynamicStyleBinding = compilerDom.createCallExpression(context.helper(SSR_RENDER_STYLE), [value])), `"`); | ||
} | ||
} | ||
else { | ||
// dynamic key attr | ||
// this branch is only encountered for custom directive | ||
// transforms that returns properties with dynamic keys | ||
const args = [key, value]; | ||
if (needTagForRuntime) { | ||
args.push(`"${node.tag}"`); | ||
attrName = | ||
node.tag.indexOf('-') > 0 | ||
? attrName // preserve raw name on custom elements | ||
: shared.propsToAttrMap[attrName] || attrName.toLowerCase(); | ||
if (shared.isBooleanAttr(attrName)) { | ||
openTag.push(compilerDom.createConditionalExpression(value, compilerDom.createSimpleExpression(' ' + attrName, true), compilerDom.createSimpleExpression('', true), false /* no newline */)); | ||
} | ||
openTag.push(compilerDom.createCallExpression(context.helper(SSR_RENDER_DYNAMIC_ATTR), args)); | ||
else if (shared.isSSRSafeAttrName(attrName)) { | ||
openTag.push(compilerDom.createCallExpression(context.helper(SSR_RENDER_ATTR), [ | ||
key, | ||
value | ||
])); | ||
} | ||
else { | ||
context.onError(createSSRCompilerError(58 /* X_SSR_UNSAFE_ATTR_NAME */, key.loc)); | ||
} | ||
} | ||
} | ||
else { | ||
// dynamic key attr | ||
// this branch is only encountered for custom directive | ||
// transforms that returns properties with dynamic keys | ||
const args = [key, value]; | ||
if (needTagForRuntime) { | ||
args.push(`"${node.tag}"`); | ||
} | ||
openTag.push(compilerDom.createCallExpression(context.helper(SSR_RENDER_DYNAMIC_ATTR), args)); | ||
} | ||
} | ||
} | ||
} | ||
else { | ||
// special case: value on <textarea> | ||
if (node.tag === 'textarea' && prop.name === 'value' && prop.value) { | ||
rawChildrenMap.set(node, shared.escapeHtml(prop.value.content)); | ||
} | ||
else { | ||
// special case: value on <textarea> | ||
if (node.tag === 'textarea' && prop.name === 'value' && prop.value) { | ||
rawChildrenMap.set(node, shared.escapeHtml(prop.value.content)); | ||
} | ||
else if (!hasDynamicVBind) { | ||
// static prop | ||
if (prop.name === 'class' && prop.value) { | ||
staticClassBinding = JSON.stringify(prop.value.content); | ||
} | ||
else if (!hasDynamicVBind) { | ||
// static prop | ||
if (prop.name === 'class' && prop.value) { | ||
staticClassBinding = JSON.stringify(prop.value.content); | ||
} | ||
openTag.push(` ${prop.name}` + | ||
(prop.value ? `="${shared.escapeHtml(prop.value.content)}"` : ``)); | ||
} | ||
openTag.push(` ${prop.name}` + | ||
(prop.value ? `="${shared.escapeHtml(prop.value.content)}"` : ``)); | ||
} | ||
} | ||
// handle co-existence of dynamic + static class bindings | ||
if (dynamicClassBinding && staticClassBinding) { | ||
mergeCall(dynamicClassBinding, staticClassBinding); | ||
removeStaticBinding(openTag, 'class'); | ||
} | ||
if (context.scopeId) { | ||
openTag.push(` ${context.scopeId}`); | ||
} | ||
node.ssrCodegenNode = compilerDom.createTemplateLiteral(openTag); | ||
}; | ||
} | ||
} | ||
// handle co-existence of dynamic + static class bindings | ||
if (dynamicClassBinding && staticClassBinding) { | ||
mergeCall(dynamicClassBinding, staticClassBinding); | ||
removeStaticBinding(openTag, 'class'); | ||
} | ||
if (context.scopeId) { | ||
openTag.push(` ${context.scopeId}`); | ||
} | ||
node.ssrCodegenNode = compilerDom.createTemplateLiteral(openTag); | ||
}; | ||
}; | ||
@@ -852,2 +857,37 @@ function isTextareaWithValue(node, prop) { | ||
const hasSingleChild = (node) => node.children.filter(n => n.type !== 3 /* COMMENT */).length === 1; | ||
const ssrInjectFallthroughAttrs = (node, context) => { | ||
// _attrs is provided as a function argument. | ||
// mark it as a known identifier so that it doesn't get prefixed by | ||
// transformExpression. | ||
if (node.type === 0 /* ROOT */) { | ||
context.identifiers._attrs = 1; | ||
} | ||
const parent = context.parent; | ||
if (!parent || parent.type !== 0 /* ROOT */) { | ||
return; | ||
} | ||
if (node.type === 10 /* IF_BRANCH */ && hasSingleChild(node)) { | ||
injectFallthroughAttrs(node.children[0]); | ||
} | ||
else if (hasSingleChild(parent)) { | ||
injectFallthroughAttrs(node); | ||
} | ||
}; | ||
function injectFallthroughAttrs(node) { | ||
if (node.type === 1 /* ELEMENT */ && | ||
(node.tagType === 0 /* ELEMENT */ || | ||
node.tagType === 1 /* COMPONENT */) && | ||
!compilerDom.findDir(node, 'for')) { | ||
node.props.push({ | ||
type: 7 /* DIRECTIVE */, | ||
name: 'bind', | ||
arg: undefined, | ||
exp: compilerDom.createSimpleExpression(`_attrs`, false), | ||
modifiers: [], | ||
loc: compilerDom.locStub | ||
}); | ||
} | ||
} | ||
function compile(template, options = {}) { | ||
@@ -878,2 +918,3 @@ options = { | ||
ssrTransformSlotOutlet, | ||
ssrInjectFallthroughAttrs, | ||
ssrTransformElement, | ||
@@ -880,0 +921,0 @@ ssrTransformComponent, |
{ | ||
"name": "@vue/compiler-ssr", | ||
"version": "3.0.0-beta.15", | ||
"version": "3.0.0-beta.16", | ||
"description": "@vue/compiler-ssr", | ||
@@ -30,5 +30,5 @@ "main": "dist/compiler-ssr.cjs.js", | ||
"dependencies": { | ||
"@vue/shared": "3.0.0-beta.15", | ||
"@vue/compiler-dom": "3.0.0-beta.15" | ||
"@vue/shared": "3.0.0-beta.16", | ||
"@vue/compiler-dom": "3.0.0-beta.16" | ||
} | ||
} |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
43029
927
+ Added@vue/compiler-core@3.0.0-beta.16(transitive)
+ Added@vue/compiler-dom@3.0.0-beta.16(transitive)
+ Added@vue/shared@3.0.0-beta.16(transitive)
- Removed@vue/compiler-core@3.0.0-beta.15(transitive)
- Removed@vue/compiler-dom@3.0.0-beta.15(transitive)
- Removed@vue/shared@3.0.0-beta.15(transitive)
Updated@vue/shared@3.0.0-beta.16