diff --git a/packages/compiler-dom/__tests__/transforms/stringifyStatic.spec.ts b/packages/compiler-dom/__tests__/transforms/stringifyStatic.spec.ts index 3dca19a0e..cf1c7e0a6 100644 --- a/packages/compiler-dom/__tests__/transforms/stringifyStatic.spec.ts +++ b/packages/compiler-dom/__tests__/transforms/stringifyStatic.spec.ts @@ -168,4 +168,29 @@ describe('stringify static html', () => { type: NodeTypes.VNODE_CALL }) }) + + // #1128 + test('should bail on non attribute bindings', () => { + const { ast } = compileWithStringify( + `
`
function walk(node: ElementNode) {
- // some transforms, e.g. `transformAssetUrls` in `@vue/compiler-sfc` may
- // convert static attributes into a v-bind with a constnat expresion.
- // Such constant bindings are eligible for hoisting but not for static
- // stringification because they cannot be pre-evaluated.
for (let i = 0; i < node.props.length; i++) {
const p = node.props[i]
- if (
- p.type === NodeTypes.DIRECTIVE &&
- p.name === 'bind' &&
- p.exp &&
- p.exp.type !== NodeTypes.COMPOUND_EXPRESSION &&
- p.exp.isRuntimeConstant
- ) {
- bail = true
- return false
+ // bail on non-attr bindings
+ if (p.type === NodeTypes.ATTRIBUTE && !isStringifiableAttr(p.name)) {
+ return bail()
+ }
+ if (p.type === NodeTypes.DIRECTIVE && p.name === 'bind') {
+ // bail on non-attr bindings
+ if (
+ p.arg &&
+ (p.arg.type === NodeTypes.COMPOUND_EXPRESSION ||
+ (p.arg.isStatic && !isStringifiableAttr(p.arg.content)))
+ ) {
+ return bail()
+ }
+ // some transforms, e.g. `transformAssetUrls` in `@vue/compiler-sfc` may
+ // convert static attributes into a v-bind with a constnat expresion.
+ // Such constant bindings are eligible for hoisting but not for static
+ // stringification because they cannot be pre-evaluated.
+ if (
+ p.exp &&
+ (p.exp.type === NodeTypes.COMPOUND_EXPRESSION ||
+ p.exp.isRuntimeConstant)
+ ) {
+ return bail()
+ }
}
}
for (let i = 0; i < node.children.length; i++) {
@@ -83,7 +108,7 @@ function shouldOptimize(node: ElementNode): boolean {
if (walk(child)) {
return true
}
- if (bail) {
+ if (bailed) {
return false
}
}
diff --git a/packages/shared/src/domAttrConfig.ts b/packages/shared/src/domAttrConfig.ts
index 5ae2ab7a2..689533dd9 100644
--- a/packages/shared/src/domAttrConfig.ts
+++ b/packages/shared/src/domAttrConfig.ts
@@ -1,18 +1,22 @@
import { makeMap } from './makeMap'
-// On the client we only need to offer special cases for boolean attributes that
-// have different names from their corresponding dom properties:
-// - itemscope -> N/A
-// - allowfullscreen -> allowFullscreen
-// - formnovalidate -> formNoValidate
-// - ismap -> isMap
-// - nomodule -> noModule
-// - novalidate -> noValidate
-// - readonly -> readOnly
+/**
+ * On the client we only need to offer special cases for boolean attributes that
+ * have different names from their corresponding dom properties:
+ * - itemscope -> N/A
+ * - allowfullscreen -> allowFullscreen
+ * - formnovalidate -> formNoValidate
+ * - ismap -> isMap
+ * - nomodule -> noModule
+ * - novalidate -> noValidate
+ * - readonly -> readOnly
+ */
const specialBooleanAttrs = `itemscope,allowfullscreen,formnovalidate,ismap,nomodule,novalidate,readonly`
export const isSpecialBooleanAttr = /*#__PURE__*/ makeMap(specialBooleanAttrs)
-// The full list is needed during SSR to produce the correct initial markup.
+/**
+ * The full list is needed during SSR to produce the correct initial markup.
+ */
export const isBooleanAttr = /*#__PURE__*/ makeMap(
specialBooleanAttrs +
`,async,autofocus,autoplay,controls,default,defer,disabled,hidden,` +
@@ -41,7 +45,9 @@ export const propsToAttrMap: Record