-
-
Notifications
You must be signed in to change notification settings - Fork 8.2k
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-sfc): introduce defineRender
macro
#9400
base: minor
Are you sure you want to change the base?
Conversation
Size ReportBundles
Usages
|
<script setup>
<script setup>
<script setup>
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM but there's changes on the dependencies which shouldn't be necessary here
e9ce0aa
to
56e509a
Compare
Should we warn if there's a return statement inside of if branch? <script setup>
import { ref } from 'vue'
const msg = ref('Hello World!')
if (msg.value !== '')
return () => msg.value // never return
</script> The setup function is only called once, so most cases of |
I wouldn't call "invalid", they are likely to be incorrect, but I think that's a linter's job, not compiler, we don't know how people use it, if you add a warning we need a way to remove the warning I suppose. Just because this is a perfectly fine component, albeit not very good, but fine defineComponent({
props: {
test: Number
},
setup(props) {
if (props.test > 1) {
return () => h('div', 'big number')
}
return () => h('div', 'small number')
}
}) |
<script setup>
defineRender
macro
After discussing with Evan, we added one more macro, defineRender. Compared to the return statement:
|
It should not be shared with template syntax, right?
|
Should it go through RFC first? I would say if |
It should be the same as the render function, with the template as the main: |
56e509a
to
9a8053c
Compare
It should be like this, its behavior should be consistent with the option api situation |
I disagree if think we should at the very least alert on both cases, there should not be multiple render functions, because one will never be called. That's more likely to be a bug than intentional. |
Synchronous discussion: |
Actually, JSX is not within the scope of defineRender. Whatever using or not |
a0a05f9
to
d0e9bc0
Compare
Now an error will be threw when |
6012c20
to
5d1d6a7
Compare
5d1d6a7
to
15152e7
Compare
|
5e87567
to
f103f8f
Compare
f103f8f
to
a69aa26
Compare
a69aa26
to
59dcb2b
Compare
bf603ab
to
e4c1b23
Compare
Summary
See the RFC for details.
This PR introduces a new macro called
defineRender
that allows for defining a render function in<script setup>
with or without JSX, instead of template syntax.This is an experimental feature. We introduced a new compiler script option
defineRender
, and it's disabled by default.Basic Usage
Prev Solution: return statement
Redundant return statements can be removed by bundlers (tested on both Rollup and esbuild)
Example: https://deploy-preview-9400--vue-sfc-playground.netlify.app/#eNp9kDFPwzAQhf/K4SWtVIWhW9VWAlQJGAABEouXKLmEFOdsne0QKcp/x3bUwoC6We99vvfuRnFjTN57FBuxtSW3xoFF581eUtsZzQ5GYKxhgpp1B1lAM0mlJuugsw3sorvI7lEpDR+aVXWVLSVxmMEEiyXs9pHL+0J5lLS9nkPCeLESzoZBddvkR6spNBglAUhR6s60CvnZuDYESbGB5ESvCDnfj0lz7HF10stPLL/+0Y92iJoUL4wWuUcpzp4ruEE324e3JxzC+2x2uvIq0BfMV7Ra+dhxxm49VaH2Hy61fUh3bKl5t4fBIdnTUrFoJKfESxFue3dh9d+663yd/kmaxPQDLeaULA==