fix(compiler-core): transform kebab case props to camelcase on slots (c…

…lose vuejs#2488)

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>