Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 3 commits into from
Nov 2, 2023
Merged

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

merged 3 commits into from
Nov 2, 2023

Conversation

zhiyuanzmj
Copy link
Contributor

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
Copy link
Contributor

RFC discussion: vuejs/rfcs#405

@sxzz sxzz self-assigned this Oct 23, 2023
Copy link
Member

@sxzz sxzz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM for the rest part.

packages/compiler-core/src/transforms/vBind.ts Outdated Show resolved Hide resolved
packages/compiler-core/src/transforms/vBind.ts Outdated Show resolved Hide resolved
@github-actions
Copy link

github-actions bot commented Oct 23, 2023

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)

zhiyuanzmj and others added 2 commits October 24, 2023 08:12
Co-authored-by: 三咲智子 Kevin Deng <sxzz@sxzz.moe>
Co-authored-by: 三咲智子 Kevin Deng <sxzz@sxzz.moe>
@sxzz sxzz removed the wait changes label Oct 25, 2023
@sxzz
Copy link
Member

sxzz commented Oct 25, 2023

/ecosystem-ci run

@vue-bot
Copy link
Contributor

vue-bot commented Oct 25, 2023

📝 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

@sxzz sxzz changed the base branch from main to minor October 28, 2023 06:40
@sxzz sxzz mentioned this pull request Oct 28, 2023
@sxzz sxzz changed the title feat(compiler-core): introduce shortBind macro feat(compiler-core): support shorthand syntax for v-bind Oct 28, 2023
@sxzz sxzz added the ready to merge The PR is ready to be merged. label Oct 28, 2023
@yyx990803
Copy link
Member

/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.

@yyx990803 yyx990803 merged commit 26399aa into vuejs:minor Nov 2, 2023
11 checks passed
@jd-solanki
Copy link

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

@zhiyuanzmj
Copy link
Contributor Author

zhiyuanzmj commented Dec 15, 2023

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

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

image

@zhangenming
Copy link
Contributor

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

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

@kissu
Copy link

kissu commented Jan 3, 2024

// 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
Copy link
Contributor Author

zhiyuanzmj commented Jan 4, 2024

// 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
Copy link

cyrilf commented Jan 12, 2024

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
Copy link

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
Copy link
Contributor

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

@kissu
Copy link

kissu commented Jun 3, 2024

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. ☺️

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
ready to merge The PR is ready to be merged. scope: compiler
Projects
None yet
Development

Successfully merging this pull request may close these issues.

10 participants