wip: plain template tag compat

diff --git a/packages/compiler-core/src/compat/compatConfig.ts b/packages/compiler-core/src/compat/compatConfig.ts
index d6870b47804865c12b4366e097b871c3ea12eabc..208f3d5318bf54a4086426f41f891844d937ad2e 100644 (file)
--- a/packages/compiler-core/src/compat/compatConfig.ts
+++ b/packages/compiler-core/src/compat/compatConfig.ts
@@ -78,7 +78,7 @@ const deprecationData: Record<CompilerDeprecationTypes, DeprecationData> = {
 
   [CompilerDeprecationTypes.COMPILER_NATIVE_TEMPLATE]: {
     message:
-      `<template> with no special directives will render as a native template` +
+      `<template> with no special directives will render as a native template ` +
       `element instead of its inner content in Vue 3.`
   }
 }

diff --git a/packages/compiler-core/src/transforms/transformElement.ts b/packages/compiler-core/src/transforms/transformElement.ts
index 214acbc59600347adde9c5f653d5d1e9559c6f8a..ce85c958d67876167c805d64457c85b2db0ca5cf 100644 (file)
--- a/packages/compiler-core/src/transforms/transformElement.ts
+++ b/packages/compiler-core/src/transforms/transformElement.ts
@@ -41,7 +41,8 @@ import {
   TELEPORT,
   KEEP_ALIVE,
   SUSPENSE,
-  UNREF
+  UNREF,
+  FRAGMENT
 } from '../runtimeHelpers'
 import {
   getInnerRange,
@@ -87,9 +88,22 @@ export const transformElement: NodeTransform = (node, context) => {
 
     // The goal of the transform is to create a codegenNode implementing the
     // VNodeCall interface.
-    const vnodeTag = isComponent
+    let vnodeTag = isComponent
       ? resolveComponentType(node as ComponentNode, context)
       : `"${tag}"`
+
+    if (
+      __COMPAT__ &&
+      tag === 'template' &&
+      checkCompatEnabled(
+        CompilerDeprecationTypes.COMPILER_NATIVE_TEMPLATE,
+        context,
+        node.loc
+      )
+    ) {
+      vnodeTag = context.helper(FRAGMENT)
+    }
+
     const isDynamicComponent =
       isObject(vnodeTag) && vnodeTag.callee === RESOLVE_DYNAMIC_COMPONENT
 

diff --git a/packages/compiler-core/src/transforms/transformText.ts b/packages/compiler-core/src/transforms/transformText.ts
index 3576e0e2cbff351469aea0c9d6391a4fda6c2292..a8b65c966a830c3e358adc367e8e4a9e9e6e0e53 100644 (file)
--- a/packages/compiler-core/src/transforms/transformText.ts
+++ b/packages/compiler-core/src/transforms/transformText.ts
@@ -63,7 +63,11 @@ export const transformText: NodeTransform = (node, context) => {
         (children.length === 1 &&
           (node.type === NodeTypes.ROOT ||
             (node.type === NodeTypes.ELEMENT &&
-              node.tagType === ElementTypes.ELEMENT)))
+              node.tagType === ElementTypes.ELEMENT &&
+              // in compat mode, <template> tags with no special directives
+              // will be rendered as a fragment so its children must be
+              // converted into vnodes.
+              !(__COMPAT__ && node.tag === 'template'))))
       ) {
         return
       }