fix(transition/v-show): ensure transition is in persisted mode when used with v-show

fix #4845
close #4852

packages/compiler-dom/src/index.ts

@@ -16,7 +16,7 @@ import { transformVText } from './transforms/vText'
 import { transformModel } from './transforms/vModel'
 import { transformOn } from './transforms/vOn'
 import { transformShow } from './transforms/vShow'
-import { warnTransitionChildren } from './transforms/warnTransitionChildren'
+import { transformTransition } from './transforms/Transition'
 import { stringifyStatic } from './transforms/stringifyStatic'
 import { ignoreSideEffectTags } from './transforms/ignoreSideEffectTags'
 import { extend } from '@vue/shared'
@@ -25,11 +25,11 @@ export { parserOptions }
 
 export const DOMNodeTransforms: NodeTransform[] = [
   transformStyle,
-  ...(__DEV__ ? [warnTransitionChildren] : [])
+  ...(__DEV__ ? [transformTransition] : [])
 ]
 
 export const DOMDirectiveTransforms: Record<string, DirectiveTransform> = {
-  cloak: noopDirectiveTransform,
+cloak: noopDirectiveTransform,
   html: transformVHtml,
   text: transformVText,
   model: transformModel, // override compiler-core

packages/compiler-dom/src/transforms/Transition.ts

@@ -8,7 +8,7 @@ import {
 import { TRANSITION } from '../runtimeHelpers'
 import { createDOMCompilerError, DOMErrorCodes } from '../errors'
 
-export const warnTransitionChildren: NodeTransform = (node, context) => {
+export const transformTransition: NodeTransform = (node, context) => {
   if (
     node.type === NodeTypes.ELEMENT &&
     node.tagType === ElementTypes.COMPONENT
@@ -16,7 +16,12 @@ export const warnTransitionChildren: NodeTransform = (node, context) => {
     const component = context.isBuiltInComponent(node.tag)
     if (component === TRANSITION) {
       return () => {
-        if (node.children.length && hasMultipleChildren(node)) {
+        if (!node.children.length) {
+          return
+        }
+
+        // warn multiple transition children
+        if (hasMultipleChildren(node)) {
           context.onError(
             createDOMCompilerError(
               DOMErrorCodes.X_TRANSITION_INVALID_CHILDREN,
@@ -28,6 +33,22 @@ export const warnTransitionChildren: NodeTransform = (node, context) => {
             )
           )
         }
+
+        // check if it's s single child w/ v-show
+        // if yes, inject "persisted: true" to the transition props
+        const child = node.children[0]
+        if (child.type === NodeTypes.ELEMENT) {
+          for (const p of child.props) {
+            if (p.type === NodeTypes.DIRECTIVE && p.name === 'show') {
+              node.props.push({
+                type: NodeTypes.ATTRIBUTE,
+                name: 'persisted',
+                value: undefined,
+                loc: node.loc
+              })
+            }
+          }
+        }
       }
     }
   }