feat(compiler-core): support shorthand syntax for v-bind

[zhiyuanzmj]

Generate an expression with the same name as propName when the expression is undefined.

<template>
     <input v-bind:value />
<!-- <input v-bind:value="value" /> -->
     <input :value />
<!-- <input :value="value" /> -->
     <input .value />
<!-- <input .value="value" /> -->
     <input :value.attr />
<!-- <input :value.attr="value" /> -->
     <input :value-key.camel />
<!-- <input :value-key.camel="valueKey" /> -->
</template>

[skirtles-code]

RFC discussion: vuejs/rfcs#405

[sxzz]

LGTM for the rest part.

[github-actions]

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	85.9 kB (-503 B)	32.7 kB (-171 B)	29.5 kB (-167 B)
vue.global.prod.js	132 kB (+50 B)	49.6 kB (+27 B)	44.6 kB (+78 B)

Usages

Name	Size	Gzip	Brotli
createApp	47.9 kB (-26 B)	18.9 kB (-7 B)	17.2 kB (-5 B)
createSSRApp	50.7 kB (-503 B)	20 kB (-185 B)	18.2 kB (-169 B)
defineCustomElement	50.3 kB (-26 B)	19.7 kB (-7 B)	18 kB (+37 B)
overall	61.3 kB (-26 B)	23.7 kB (-12 B)	21.6 kB (+32 B)

[sxzz]

/ecosystem-ci run

[vue-bot]

📝 Ran ecosystem CI: Open

suite	result	latest scheduled
language-tools	✅ success	✅ success
nuxt	✅ success	✅ success
pinia	✅ success	✅ success
quasar	✅ success	✅ success
router	✅ success	✅ success
test-utils	✅ success	✅ success
vant	✅ success	✅ success
vite-plugin-vue	✅ success	✅ success
vitepress	✅ success	✅ success
vue-i18n	✅ success	✅ success
vue-macros	✅ success	✅ success
vuetify	✅ success	✅ success
vueuse	✅ success	✅ success
vue-simple-compiler	✅ success	✅ success

[yyx990803]

/cc @johnsoncodehk
I assume this will need special handling in Volar for Vue 3.4+

• Previously :id will result in a parsing error, which now removed in this PR
• Now :id implicitly expands to :id="id" and should result in type checking errors if necessary.

[jd-solanki]

@zhiyuanzmj What's .value="value"? I never seen this in VueJS docs? 🤔

[zhiyuanzmj]

@zhiyuanzmj What's .value="value"? I never seen this in VueJS docs? 🤔

https://vuejs.org/api/built-in-directives.html#v-bind

[zhangenming]

// how about 
<comp @event></comp>

// equivalent to
<comp @event="event"></comp>

[kissu]

// how about 
<comp @event></comp>

// equivalent to
<comp @event="event"></comp>

Haha, how much magic is too much magic.
Even tho, always nice to have some slick syntax. 🤩

[zhiyuanzmj]

// how about 
<comp @event></comp>

// equivalent to
<comp @event="event"></comp>

Good idea, But Vue has already supported using v-on without expression: <form @submit.prevent></form>, so there might be conflicts.
https://vuejs.org/api/built-in-directives.html#v-on

By the way, You can also use :onInput to pass events.

<script setup>
import { ref } from 'vue'

const value = ref('Hello World!')
function onInput(e){
  value.value=e.target.value
}
</script>

<template>
  <h1>{{ value }}</h1>
  <input :value :onInput />
</template>

[cyrilf]

Quick mention that an issue (vuejs/language-tools#3830) is already open in order to add support for that new feature.
So if your Typescript or Eslint is complaining, just be patient. ⏳

[StrikeAgainst]

Just FYI, I had to learn the hard way that this does NOT work with index / key values from list renderings.
<component v-for="(entry, key) in list" :key ... /> will instead re-render your whole list on any update. You'll have to stick with :key="key".

[skirtles-code]

For anyone who's interested, there's an open issue for the key problem at #10882.

[kissu]

Just FYI, I had to learn the hard way that this does NOT work with index / key values from list renderings. <component v-for="(entry, key) in list" :key ... /> will instead re-render your whole list on any update. You'll have to stick with :key="key".

If the key here is an index of an array it might not be the right way of doing things anyway.

Edit: after reading the linked issue, it could make sense in some situations. Not a deal breaker I'd say. ☺️