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>