fix(compiler-core): warn when slot used on non-root template

Implements the warning from vue2 in vue3.

fixes #11521

Author: Disservin

packages/compiler-core/__tests__/transform.spec.ts

@@ -20,6 +20,7 @@ import { transformElement } from '../src/transforms/transformElement'
 import { transformSlotOutlet } from '../src/transforms/transformSlotOutlet'
 import { transformText } from '../src/transforms/transformText'
 import { PatchFlags } from '@vue/shared'
+import type { CompilerOptions } from '@vue/compiler-core'
 
 describe('compiler: transform', () => {
   test('context state', () => {
@@ -378,4 +379,75 @@ describe('compiler: transform', () => {
       )
     })
   })
+
+  describe('errors', () => {
+    function transformWithCodegen(
+      template: string,
+      options: CompilerOptions = {},
+    ) {
+      const ast = baseParse(template)
+      transform(ast, {
+        nodeTransforms: [
+          transformIf,
+          transformFor,
+          transformText,
+          transformSlotOutlet,
+          transformElement,
+        ],
+        ...options,
+      })
+      return ast
+    }
+
+    test('warn when v-slot used on non-root level <template>', () => {
+      const onError = vi.fn()
+
+      const ast = transformWithCodegen(
+        `
+        <template>
+          <Bar>
+            <template>
+              <template #header> Header </template>
+            </template>
+          </Bar>
+        </template>`,
+        { onError },
+      )
+
+      expect(onError.mock.calls[0]).toMatchObject([
+        {
+          code: ErrorCodes.X_TEMPLATE_NOT_ROOT,
+          loc: (ast.children[0] as any).children[0].children[0].children[0].loc,
+        },
+      ])
+    })
+
+    test('dont warn when v-slot used on root level <template>', () => {
+      const onError = vi.fn()
+
+      transformWithCodegen(
+        `<template>
+          <bar>
+            <template #header> Header </template>
+          </bar>
+        </template>`,
+        { onError },
+      )
+
+      expect(onError.mock.calls).toEqual([])
+    })
+
+    test('dont warn when v-slot used on root level <template> inside custom component', () => {
+      const onError = vi.fn()
+
+      transformWithCodegen(
+        `<template>
+          <div is="vue:customComp"><template v-slot="slotProps"></template></div>
+        </template>`,
+        { onError },
+      )
+
+      expect(onError.mock.calls).toEqual([])
+    })
+  })
 })

packages/compiler-core/src/errors.ts

@@ -90,6 +90,7 @@ export enum ErrorCodes {
   X_V_MODEL_ON_PROPS,
   X_INVALID_EXPRESSION,
   X_KEEP_ALIVE_INVALID_CHILDREN,
+  X_TEMPLATE_NOT_ROOT,
 
   // generic errors
   X_PREFIX_ID_NOT_SUPPORTED,
@@ -151,6 +152,9 @@ export const errorMessages: Record<ErrorCodes, string> = {
     'End bracket for dynamic directive argument was not found. ' +
     'Note that dynamic directive argument cannot contain spaces.',
   [ErrorCodes.X_MISSING_DIRECTIVE_NAME]: 'Legal directive name was expected.',
+  [ErrorCodes.X_TEMPLATE_NOT_ROOT]:
+    `<template v-slot> can only appear at the root level inside ` +
+    `the receiving component`,
 
   // transform errors
   [ErrorCodes.X_V_IF_NO_EXPRESSION]: `v-if/v-else-if is missing expression.`,

packages/compiler-core/src/parser.ts

@@ -634,7 +634,7 @@ function onCloseTag(el: ElementNode, end: number, isImplied = false) {
   if (!inVPre) {
     if (tag === 'slot') {
       el.tagType = ElementTypes.SLOT
-    } else if (isFragmentTemplate(el)) {
+    } else if (isFragmentTemplate(el, stack[0])) {
       el.tagType = ElementTypes.TEMPLATE
     } else if (isComponent(el)) {
       el.tagType = ElementTypes.COMPONENT
@@ -698,7 +698,7 @@ function onCloseTag(el: ElementNode, end: number, isImplied = false) {
         currentOptions,
       ) &&
       el.tag === 'template' &&
-      !isFragmentTemplate(el)
+      !isFragmentTemplate(el, stack[0])
     ) {
       __DEV__ &&
         warnDeprecation(
@@ -749,7 +749,10 @@ function backTrack(index: number, c: number) {
 }
 
 const specialTemplateDir = new Set(['if', 'else', 'else-if', 'for', 'slot'])
-function isFragmentTemplate({ tag, props }: ElementNode): boolean {
+function isFragmentTemplate(
+  { tag, props, loc }: ElementNode,
+  parent: ElementNode,
+): boolean {
   if (tag === 'template') {
     for (let i = 0; i < props.length; i++) {
       if (

packages/compiler-core/src/transform.ts

@@ -30,7 +30,12 @@ import {
   isArray,
   isString,
 } from '@vue/shared'
-import { defaultOnError, defaultOnWarn } from './errors'
+import {
+  ErrorCodes,
+  createCompilerError,
+  defaultOnError,
+  defaultOnWarn,
+} from './errors'
 import {
   CREATE_COMMENT,
   FRAGMENT,
@@ -496,6 +501,15 @@ export function createStructuralDirectiveTransform(
       // structural directive transforms are not concerned with slots
       // as they are handled separately in vSlot.ts
       if (node.tagType === ElementTypes.TEMPLATE && props.some(isVSlot)) {
+        if (
+          context.parent &&
+          'tagType' in context.parent &&
+          context.parent.tagType !== ElementTypes.COMPONENT
+        ) {
+          context.onError(
+            createCompilerError(ErrorCodes.X_TEMPLATE_NOT_ROOT, node.loc),
+          )
+        }
         return
       }
       const exitFns = []

packages/compiler-dom/src/errors.ts

@@ -21,7 +21,7 @@ export function createDOMCompilerError(
 }
 
 export enum DOMErrorCodes {
-  X_V_HTML_NO_EXPRESSION = 53 /* ErrorCodes.__EXTEND_POINT__ */,
+  X_V_HTML_NO_EXPRESSION = 54 /* ErrorCodes.__EXTEND_POINT__ */,
   X_V_HTML_WITH_CHILDREN,
   X_V_TEXT_NO_EXPRESSION,
   X_V_TEXT_WITH_CHILDREN,

packages/compiler-sfc/src/parse.ts

@@ -158,6 +158,7 @@ export function parse(
       errors.push(e)
     },
   })
+
   ast.children.forEach(node => {
     if (node.type !== NodeTypes.ELEMENT) {
       return