feat: adjust v-slot per RFC + enable flag

Author: yyx990803

scripts/feature-flags.js

@@ -1,3 +1,3 @@
 module.exports = {
-  NEW_SLOT_SYNTAX: false
+  NEW_SLOT_SYNTAX: true
 }

src/compiler/parser/index.js

@@ -599,14 +599,13 @@ function processSlotContent (el) {
       // v-slot on <template>
       const slotBinding = getAndRemoveAttrByRegex(el, slotRE)
       if (slotBinding) {
-        if (
-          process.env.NODE_ENV !== 'production' &&
-          (el.slotTarget || el.slotScope)
-        ) {
-          warn(
-            `Unexpected mixed usage of different slot syntaxes.`,
-            el
-          )
+        if (process.env.NODE_ENV !== 'production') {
+          if (el.slotTarget || el.slotScope) {
+            warn(
+              `Unexpected mixed usage of different slot syntaxes.`,
+              el
+            )
+          }
         }
         el.slotTarget = getSlotName(slotBinding)
         el.slotScope = slotBinding.value
@@ -618,7 +617,7 @@ function processSlotContent (el) {
         if (process.env.NODE_ENV !== 'production') {
           if (!maybeComponent(el)) {
             warn(
-              `v-slot cannot be used on non-component elements.`,
+              `v-slot can only be used on components or <template>.`,
               slotBinding
             )
           }
@@ -644,13 +643,23 @@ function processSlotContent (el) {
   }
 }
 
-function getSlotName ({ name }) {
-  name = name.replace(slotRE, '')
+function getSlotName (binding) {
+  let name = binding.name.replace(slotRE, '')
+  if (!name) {
+    if (binding.name[0] !== '#') {
+      name = 'default'
+    } else if (process.env.NODE_ENV !== 'production') {
+      warn(
+        `v-slot shorthand syntax requires a slot name.`,
+        binding
+      )
+    }
+  }
   return dynamicKeyRE.test(name)
     // dynamic [name]
     ? name.slice(1, -1)
     // static name
-    : `"${name || `default`}"`
+    : `"${name}"`
 }
 
 // handle <slot/> outlets

test/unit/features/component/component-scoped-slot.spec.js

@@ -657,9 +657,9 @@ describe('Component scoped slot', () => {
         }
       }
 
-      const toNamed = (syntax, name) => syntax.length === 1
-        ? syntax + name // shorthand
-        : syntax + ':' + name // full syntax
+      const toNamed = (syntax, name) => syntax[0] === '#'
+        ? `#${name}` // shorthand
+        : `${syntax}:${name}` // full syntax
 
       function runSuite(syntax) {
         it('default slot', () => {
@@ -689,7 +689,7 @@ describe('Component scoped slot', () => {
         it('default + named slots', () => {
           const vm = new Vue({
             template: `
-              <foo #="foo">
+              <foo #default="foo">
                 {{ foo }}
                 <template ${toNamed(syntax, 'one')}="one">
                   {{ one }}
@@ -729,7 +729,7 @@ describe('Component scoped slot', () => {
           const vm = new Vue({
             template: `<div ${syntax}="foo"/>`
           }).$mount()
-          expect(`v-slot cannot be used on non-component elements`).toHaveBeenWarned()
+          expect(`v-slot can only be used on components or <template>`).toHaveBeenWarned()
         })
 
         it('should warn mixed usage', () => {
@@ -743,12 +743,12 @@ describe('Component scoped slot', () => {
 
       // run tests for both full syntax and shorthand
       runSuite('v-slot')
-      runSuite('#')
+      runSuite('#default')
 
       it('shorthand named slots', () => {
         const vm = new Vue({
           template: `
-            <foo #="foo">
+            <foo #default="foo">
               {{ foo }}
               <template #one="one">
                 {{ one }}