From 0f1f56e4fbce4531fbf41adbfe53fe37c5e62cb8 Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Tue, 27 Oct 2020 09:52:39 +0800
Subject: [PATCH 1/8] fix(compiler-core): kebab case props on slots are not
 transformed to camelcase #2488

---
 .../src/transforms/transformSlotOutlet.ts          | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/packages/compiler-core/src/transforms/transformSlotOutlet.ts b/packages/compiler-core/src/transforms/transformSlotOutlet.ts
index 58ef0b2f488..5bb01368217 100644
--- a/packages/compiler-core/src/transforms/transformSlotOutlet.ts
+++ b/packages/compiler-core/src/transforms/transformSlotOutlet.ts
@@ -11,6 +11,7 @@ import { isSlotOutlet, findProp } from '../utils'
 import { buildProps, PropsExpression } from './transformElement'
 import { createCompilerError, ErrorCodes } from '../errors'
 import { RENDER_SLOT } from '../runtimeHelpers'
+import { camelize } from '@vue/shared/'
 
 export const transformSlotOutlet: NodeTransform = (node, context) => {
   if (isSlotOutlet(node)) {
@@ -71,6 +72,19 @@ export function processSlotOutlet(
   if (propsWithoutName.length > 0) {
     const { props, directives } = buildProps(node, context, propsWithoutName)
     slotProps = props
+
+    //#2488
+    if (
+      slotProps &&
+      (slotProps as any).properties &&
+      (slotProps as any).properties.length > 0
+    ) {
+      for (let i = 0; i < (slotProps as any).properties.length; i++) {
+        const prop = (slotProps as any).properties[i]
+        prop.key.content = camelize(prop.key.content)
+      }
+    }
+
     if (directives.length) {
       context.onError(
         createCompilerError(

From 126cbcca447e6f2fc232988fb540c2b837231585 Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Tue, 27 Oct 2020 10:05:11 +0800
Subject: [PATCH 2/8] fix(compiler-core): kebab case props on slots are not
 transformed to camelcase #2488

---
 .../transforms/transformSlotOutlet.spec.ts         | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/compiler-core/__tests__/transforms/transformSlotOutlet.spec.ts b/packages/compiler-core/__tests__/transforms/transformSlotOutlet.spec.ts
index d5e9f757582..82a5c8e50e1 100644
--- a/packages/compiler-core/__tests__/transforms/transformSlotOutlet.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/transformSlotOutlet.spec.ts
@@ -95,7 +95,9 @@ describe('compiler: transform <slot> outlets', () => {
   })
 
   test('default slot outlet with props', () => {
-    const ast = parseWithSlots(`<slot foo="bar" :baz="qux" />`)
+    const ast = parseWithSlots(
+      `<slot foo="bar" :baz="qux" :foo-bar="foo-bar" />`
+    )
     expect((ast.children[0] as ElementNode).codegenNode).toMatchObject({
       type: NodeTypes.JS_CALL_EXPRESSION,
       callee: RENDER_SLOT,
@@ -124,6 +126,16 @@ describe('compiler: transform <slot> outlets', () => {
                 content: `qux`,
                 isStatic: false
               }
+            },
+            {
+              key: {
+                content: `fooBar`,
+                isStatic: true
+              },
+              value: {
+                content: `foo-bar`,
+                isStatic: false
+              }
             }
           ]
         }

From 1ce41105708affa6722f76e1fdf3a252b1c9d7b7 Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Tue, 27 Oct 2020 14:52:43 +0800
Subject: [PATCH 3/8] fix(compiler-core): transform kebab case props to
 camelcase on slots (close #2488)

---
 .../src/transforms/transformSlotOutlet.ts     | 21 ++++++++-----------
 1 file changed, 9 insertions(+), 12 deletions(-)

diff --git a/packages/compiler-core/src/transforms/transformSlotOutlet.ts b/packages/compiler-core/src/transforms/transformSlotOutlet.ts
index 5bb01368217..359618a4122 100644
--- a/packages/compiler-core/src/transforms/transformSlotOutlet.ts
+++ b/packages/compiler-core/src/transforms/transformSlotOutlet.ts
@@ -69,22 +69,19 @@ export function processSlotOutlet(
   const propsWithoutName = name
     ? node.props.filter(p => p !== name)
     : node.props
+
+  //#2488
+  propsWithoutName.forEach(prop => {
+    const arg = (prop as any).arg
+    if (arg) {
+      arg.content = camelize(arg.content)
+    }
+  })
+
   if (propsWithoutName.length > 0) {
     const { props, directives } = buildProps(node, context, propsWithoutName)
     slotProps = props
 
-    //#2488
-    if (
-      slotProps &&
-      (slotProps as any).properties &&
-      (slotProps as any).properties.length > 0
-    ) {
-      for (let i = 0; i < (slotProps as any).properties.length; i++) {
-        const prop = (slotProps as any).properties[i]
-        prop.key.content = camelize(prop.key.content)
-      }
-    }
-
     if (directives.length) {
       context.onError(
         createCompilerError(

From fe16b54a79f1c8acd82429caa199d606a76f7852 Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Tue, 27 Oct 2020 14:53:57 +0800
Subject: [PATCH 4/8] fix(compiler-core): transform kebab case props to
 camelcase on slots (close #2488)

---
 .../src/transforms/transformSlotOutlet.ts        | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/compiler-core/src/transforms/transformSlotOutlet.ts b/packages/compiler-core/src/transforms/transformSlotOutlet.ts
index 359618a4122..25fba3295ca 100644
--- a/packages/compiler-core/src/transforms/transformSlotOutlet.ts
+++ b/packages/compiler-core/src/transforms/transformSlotOutlet.ts
@@ -70,15 +70,15 @@ export function processSlotOutlet(
     ? node.props.filter(p => p !== name)
     : node.props
 
-  //#2488
-  propsWithoutName.forEach(prop => {
-    const arg = (prop as any).arg
-    if (arg) {
-      arg.content = camelize(arg.content)
-    }
-  })
-
   if (propsWithoutName.length > 0) {
+    //#2488
+    propsWithoutName.forEach(prop => {
+      const arg = (prop as any).arg
+      if (arg) {
+        arg.content = camelize(arg.content)
+      }
+    })
+
     const { props, directives } = buildProps(node, context, propsWithoutName)
     slotProps = props
 

From 8c596d748102040214dc5af854f0cfb4efca819d Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Tue, 27 Oct 2020 22:08:27 +0800
Subject: [PATCH 5/8] fix(compiler-core): transform kebab case props to
 camelcase on slots (close #2488)

---
 .../src/transforms/transformSlotOutlet.ts     |  8 +-
 packages/vue/examples/classic/commits.html    | 93 ++++++-------------
 2 files changed, 33 insertions(+), 68 deletions(-)

diff --git a/packages/compiler-core/src/transforms/transformSlotOutlet.ts b/packages/compiler-core/src/transforms/transformSlotOutlet.ts
index 25fba3295ca..6d49f517d4d 100644
--- a/packages/compiler-core/src/transforms/transformSlotOutlet.ts
+++ b/packages/compiler-core/src/transforms/transformSlotOutlet.ts
@@ -73,9 +73,11 @@ export function processSlotOutlet(
   if (propsWithoutName.length > 0) {
     //#2488
     propsWithoutName.forEach(prop => {
-      const arg = (prop as any).arg
-      if (arg) {
-        arg.content = camelize(arg.content)
+      if (prop.type === NodeTypes.DIRECTIVE) {
+        const arg = prop.arg as any
+        if (arg) {
+          arg.content = camelize(arg.content)
+        }
       }
     })
 
diff --git a/packages/vue/examples/classic/commits.html b/packages/vue/examples/classic/commits.html
index 1a258753874..e9b39ba3a38 100644
--- a/packages/vue/examples/classic/commits.html
+++ b/packages/vue/examples/classic/commits.html
@@ -1,76 +1,39 @@
 <script src="../../dist/vue.global.js"></script>
 
+<script type="text/x-template" id="template">
+  <button @click="hasBeenClicked = true">Click me</button>
+  <slot name="boolean" :has-been-clicked="hasBeenClicked"></slot>
+  <slot name="object" :props="{ hasBeenClicked }"></slot>
+</script>
 <div id="demo">
-  <h1>Latest Vue.js Commits</h1>
-  <template v-for="branch in branches">
-    <input type="radio"
-      :id="branch"
-      :value="branch"
-      name="branch"
-      v-model="currentBranch">
-    <label :for="branch">{{ branch }}</label>
-  </template>
-  <p>vuejs/vue@{{ currentBranch }}</p>
-  <ul>
-    <li v-for="{ html_url, sha, author, commit } in commits">
-      <a :href="html_url" target="_blank" class="commit">{{ sha.slice(0, 7) }}</a>
-      - <span class="message">{{ truncate(commit.message) }}</span><br>
-      by <span class="author"><a :href="author.html_url" target="_blank">{{ commit.author.name }}</a></span>
-      at <span class="date">{{ formatDate(commit.author.date) }}</span>
-    </li>
-  </ul>
+  <Child>
+    <template #boolean="{ hasBeenClicked }">
+      <p>Has child been clicked? (boolean)</p>
+      <pre>{{ hasBeenClicked }}</pre>
+    </template>
+  
+    <template #object="{ props }">
+      <p>Has child been clicked? (nested object)</p>
+      <pre>{{ props.hasBeenClicked }}</pre>
+    </template>
+  </Child>
 </div>
 
 <script>
-const API_URL = `https://api.github.com/repos/vuejs/vue-next/commits?per_page=3&sha=`
-
-Vue.createApp({
-  data: () => ({
-    branches: ['master', 'sync'],
-    currentBranch: 'master',
-    commits: null
-  }),
-
-  created() {
-    this.fetchData()
+const {createApp} = Vue
+const Child = {
+  template:'#template',
+  data() {
+    return {
+      hasBeenClicked: false,
+    };
   },
+}
 
-  watch: {
-    currentBranch: 'fetchData'
+createApp({
+  components: {
+    Child,
   },
-
-  methods: {
-    fetchData() {
-      fetch(`${API_URL}${this.currentBranch}`)
-        .then(res => res.json())
-        .then(data => {
-          this.commits = data
-        })
-    },
-    truncate(v) {
-      const newline = v.indexOf('\n')
-      return newline > 0 ? v.slice(0, newline) : v
-    },
-    formatDate(v) {
-      return v.replace(/T|Z/g, ' ')
-    }
-  }
 }).mount('#demo')
-</script>
 
-<style>
-  #demo {
-    font-family: 'Helvetica', Arial, sans-serif;
-  }
-  a {
-    text-decoration: none;
-    color: #f66;
-  }
-  li {
-    line-height: 1.5em;
-    margin-bottom: 20px;
-  }
-  .author, .date {
-    font-weight: bold;
-  }
-</style>
+</script>

From 9a9cb04392520a8c1fd8eb2a3b52e81e0e25f323 Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Tue, 27 Oct 2020 22:09:20 +0800
Subject: [PATCH 6/8] fix(compiler-core): transform kebab case props to
 camelcase on slots (close #2488)

---
 packages/vue/examples/classic/commits.html | 93 +++++++++++++++-------
 1 file changed, 65 insertions(+), 28 deletions(-)

diff --git a/packages/vue/examples/classic/commits.html b/packages/vue/examples/classic/commits.html
index e9b39ba3a38..1a258753874 100644
--- a/packages/vue/examples/classic/commits.html
+++ b/packages/vue/examples/classic/commits.html
@@ -1,39 +1,76 @@
 <script src="../../dist/vue.global.js"></script>
 
-<script type="text/x-template" id="template">
-  <button @click="hasBeenClicked = true">Click me</button>
-  <slot name="boolean" :has-been-clicked="hasBeenClicked"></slot>
-  <slot name="object" :props="{ hasBeenClicked }"></slot>
-</script>
 <div id="demo">
-  <Child>
-    <template #boolean="{ hasBeenClicked }">
-      <p>Has child been clicked? (boolean)</p>
-      <pre>{{ hasBeenClicked }}</pre>
-    </template>
-  
-    <template #object="{ props }">
-      <p>Has child been clicked? (nested object)</p>
-      <pre>{{ props.hasBeenClicked }}</pre>
-    </template>
-  </Child>
+  <h1>Latest Vue.js Commits</h1>
+  <template v-for="branch in branches">
+    <input type="radio"
+      :id="branch"
+      :value="branch"
+      name="branch"
+      v-model="currentBranch">
+    <label :for="branch">{{ branch }}</label>
+  </template>
+  <p>vuejs/vue@{{ currentBranch }}</p>
+  <ul>
+    <li v-for="{ html_url, sha, author, commit } in commits">
+      <a :href="html_url" target="_blank" class="commit">{{ sha.slice(0, 7) }}</a>
+      - <span class="message">{{ truncate(commit.message) }}</span><br>
+      by <span class="author"><a :href="author.html_url" target="_blank">{{ commit.author.name }}</a></span>
+      at <span class="date">{{ formatDate(commit.author.date) }}</span>
+    </li>
+  </ul>
 </div>
 
 <script>
-const {createApp} = Vue
-const Child = {
-  template:'#template',
-  data() {
-    return {
-      hasBeenClicked: false,
-    };
+const API_URL = `https://api.github.com/repos/vuejs/vue-next/commits?per_page=3&sha=`
+
+Vue.createApp({
+  data: () => ({
+    branches: ['master', 'sync'],
+    currentBranch: 'master',
+    commits: null
+  }),
+
+  created() {
+    this.fetchData()
   },
-}
 
-createApp({
-  components: {
-    Child,
+  watch: {
+    currentBranch: 'fetchData'
   },
-}).mount('#demo')
 
+  methods: {
+    fetchData() {
+      fetch(`${API_URL}${this.currentBranch}`)
+        .then(res => res.json())
+        .then(data => {
+          this.commits = data
+        })
+    },
+    truncate(v) {
+      const newline = v.indexOf('\n')
+      return newline > 0 ? v.slice(0, newline) : v
+    },
+    formatDate(v) {
+      return v.replace(/T|Z/g, ' ')
+    }
+  }
+}).mount('#demo')
 </script>
+
+<style>
+  #demo {
+    font-family: 'Helvetica', Arial, sans-serif;
+  }
+  a {
+    text-decoration: none;
+    color: #f66;
+  }
+  li {
+    line-height: 1.5em;
+    margin-bottom: 20px;
+  }
+  .author, .date {
+    font-weight: bold;
+  }
+</style>

From 061dac79f8aa442c865e24868829015068475c8e Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Tue, 27 Oct 2020 22:20:57 +0800
Subject: [PATCH 7/8] fix(compiler-core): transform kebab case props to
 camelcase on slots (close #2488)

---
 .../src/transforms/transformSlotOutlet.ts            | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/compiler-core/src/transforms/transformSlotOutlet.ts b/packages/compiler-core/src/transforms/transformSlotOutlet.ts
index 6d49f517d4d..7a728adf9ae 100644
--- a/packages/compiler-core/src/transforms/transformSlotOutlet.ts
+++ b/packages/compiler-core/src/transforms/transformSlotOutlet.ts
@@ -71,13 +71,15 @@ export function processSlotOutlet(
     : node.props
 
   if (propsWithoutName.length > 0) {
+    debugger
     //#2488
     propsWithoutName.forEach(prop => {
-      if (prop.type === NodeTypes.DIRECTIVE) {
-        const arg = prop.arg as any
-        if (arg) {
-          arg.content = camelize(arg.content)
-        }
+      if (
+        prop.type === NodeTypes.DIRECTIVE &&
+        prop.arg &&
+        prop.arg.type === NodeTypes.SIMPLE_EXPRESSION
+      ) {
+        prop.arg.content = camelize(prop.arg.content)
       }
     })
 

From 92a99a91865b7b1f56021a5e8e3afa51b52c5cb9 Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Tue, 27 Oct 2020 22:23:52 +0800
Subject: [PATCH 8/8] fix(compiler-core): transform kebab case props to
 camelcase on slots (close #2488)

---
 packages/compiler-core/src/transforms/transformSlotOutlet.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/compiler-core/src/transforms/transformSlotOutlet.ts b/packages/compiler-core/src/transforms/transformSlotOutlet.ts
index 7a728adf9ae..f3d5c0c7373 100644
--- a/packages/compiler-core/src/transforms/transformSlotOutlet.ts
+++ b/packages/compiler-core/src/transforms/transformSlotOutlet.ts
@@ -71,7 +71,6 @@ export function processSlotOutlet(
     : node.props
 
   if (propsWithoutName.length > 0) {
-    debugger
     //#2488
     propsWithoutName.forEach(prop => {
       if (