fix(compiler-core): dynamic component should always be made blocks

since it can potentially resolve to plain elements

fix #1018

Author: yyx990803

packages/compiler-core/src/transforms/transformElement.ts

@@ -20,7 +20,13 @@ import {
   DirectiveArguments,
   createVNodeCall
 } from '../ast'
-import { PatchFlags, PatchFlagNames, isSymbol, isOn } from '@vue/shared'
+import {
+  PatchFlags,
+  PatchFlagNames,
+  isSymbol,
+  isOn,
+  isObject
+} from '@vue/shared'
 import { createCompilerError, ErrorCodes } from '../errors'
 import {
   RESOLVE_DIRECTIVE,
@@ -68,6 +74,8 @@ export const transformElement: NodeTransform = (node, context) => {
     const vnodeTag = isComponent
       ? resolveComponentType(node as ComponentNode, context)
       : `"${tag}"`
+    const isDynamicComponent =
+      isObject(vnodeTag) && vnodeTag.callee === RESOLVE_DYNAMIC_COMPONENT
 
     let vnodeProps: VNodeCall['props']
     let vnodeChildren: VNodeCall['children']
@@ -78,15 +86,17 @@ export const transformElement: NodeTransform = (node, context) => {
     let vnodeDirectives: VNodeCall['directives']
 
     let shouldUseBlock =
-      !isComponent &&
-      // <svg> and <foreignObject> must be forced into blocks so that block
-      // updates inside get proper isSVG flag at runtime. (#639, #643)
-      // This is technically web-specific, but splitting the logic out of core
-      // leads to too much unnecessary complexity.
-      (tag === 'svg' ||
-        tag === 'foreignObject' ||
-        // #938: elements with dynamic keys should be forced into blocks
-        findProp(node, 'key', true))
+      // dynamic component may resolve to plain elements
+      isDynamicComponent ||
+      (!isComponent &&
+        // <svg> and <foreignObject> must be forced into blocks so that block
+        // updates inside get proper isSVG flag at runtime. (#639, #643)
+        // This is technically web-specific, but splitting the logic out of core
+        // leads to too much unnecessary complexity.
+        (tag === 'svg' ||
+          tag === 'foreignObject' ||
+          // #938: elements with dynamic keys should be forced into blocks
+          findProp(node, 'key', true)))
 
     // props
     if (props.length > 0) {