From c7f21bb8396c30a4039c99d1ff66498a118a4aae Mon Sep 17 00:00:00 2001
From: Kamil Chlebek <kamil.chlebek94@gmail.com>
Date: Sat, 10 Nov 2018 08:57:46 +0100
Subject: [PATCH] feat(parser): throw error when using interpolation instead of
 JS expression for slot names (#9038)

---
 src/compiler/parser/index.js              | 12 +++++++++++
 test/unit/modules/compiler/parser.spec.js | 25 +++++++++++++++++++++++
 2 files changed, 37 insertions(+)

diff --git a/src/compiler/parser/index.js b/src/compiler/parser/index.js
index 5bf124b4160..cf1c875de2a 100644
--- a/src/compiler/parser/index.js
+++ b/src/compiler/parser/index.js
@@ -454,6 +454,18 @@ function processOnce (el) {
 function processSlot (el) {
   if (el.tag === 'slot') {
     el.slotName = getBindingAttr(el, 'name')
+    // Fixes: #9038
+    if(process.env.NODE_ENV !== 'production'){
+      const slotName = el.attrsMap['name']
+      if(!dirRE.test(slotName) && parseText(slotName, delimiters)){
+        warn(
+          `name="${slotName}": ` +
+          'Interpolation inside attributes has been removed. ' +
+          'Use v-bind or the colon shorthand instead. For example, ' +
+          `instead of <slot name="{{ val }}">, use <slot :name="val">.`
+        )
+      }
+    }
     if (process.env.NODE_ENV !== 'production' && el.key) {
       warn(
         `\`key\` does not work on <slot> because slots are abstract outlets ` +
diff --git a/test/unit/modules/compiler/parser.spec.js b/test/unit/modules/compiler/parser.spec.js
index 32c1cc3580b..6642c63a13a 100644
--- a/test/unit/modules/compiler/parser.spec.js
+++ b/test/unit/modules/compiler/parser.spec.js
@@ -737,4 +737,29 @@ describe('parser', () => {
     const ast = parse(`<p>{{\r\nmsg\r\n}}</p>`, baseOptions)
     expect(ast.children[0].expression).toBe('_s(msg)')
   })
+
+  // #9038
+  it('should warn if interpolation is used in slot name attribute', () => {
+    parse(`
+      <div class="wrapper">
+        <slot name="line-{{ index }}"></slot>
+      </div>`, baseOptions)
+
+    expect('name="line-{{ index }}": Interpolation inside attributes has been removed. ' +
+           'Use v-bind or the colon shorthand instead. ' +
+           'For example, instead of <slot name="{{ val }}">, use <slot :name="val">.')
+      .toHaveBeenWarned()
+  })
+
+  it('should not warn if interpolation is not used in slot name attribute', () => {
+    parse(`
+      <div class="wrapper">
+        <slot :name="'line-' + index"></slot>
+      </div>`, baseOptions)
+
+    expect('name="line-{{ index }}": Interpolation inside attributes has been removed. ' +
+      'Use v-bind or the colon shorthand instead. ' +
+      'For example, instead of <slot name="{{ val }}">, use <slot :name="val">.')
+      .not.toHaveBeenWarned()
+  })
 })