rfcs
rfcs copied to clipboard
emberjs
Pre RFC / Feature Request: (De)structuring
As far as I know, there is no syntactic meaning in glimmer for { } (single curlies).
So, without diving in at trying to implement this myself, it seems like we have room to implement something like the following:
{{!-- Before --}}
<Button @variant='primary' as |yieldedHash|>
<yieldedHash.Icon />
</Button>
{{!-- After --}}
<Button @variant='primary' as |{ Icon }|>
<Icon />
</Button>
and
{{!-- Before --}}
<Button @variant={{@variant}} @size={{@size}} @onClick={{this.onClick}}>
{{@text}}
</Button>
{{!-- After -- I don't think this is the right way to do this, cause it's semantically weird --}}
<Button { @variant @size this.onClick }>
{{@text}}
</Button>
Thoughts?
<Button @variant="primary" as | ( Icon Image ) ( Spinner ) |>
<Icon />
<Image />
<Spinner />
</Button>
| ( Icon Image ) ( Spinner ) |
I thought () already imply helper?
hmm. idk. as is weird.
I know that's a troll, but, for others who may not know:
that would introduce ambiguity with what this question/issue is about. We want things more clear, and easily differentiable, not less.
{{}} always means mustache expression, which is (in strict):
- value expression
- which could be a helper invocation
to reduce {{}} to { } means that we'd need to, at runtime, determine usage / intent. not ideal :(
{{!-- Before --}} <Button @variant={{@variant}} @size={{@size}} @onClick={{this.onClick}}> {{@text}} </Button> {{!-- After -- I don't think this is the right way to do this, cause it's semantically weird --}} <Button { @variant @size this.onClick }> {{@text}} </Button>
We don't use angle bracket components in our project yet, so I'm not sure if this conflicts with anything, but what about dropping the curlies?
{{!-- After --}}
<Button @variant @size this.onClick>
{{@text}}
</Button>
Basically the shorthand property value feature, just consider <Button and > as the opening and closing curlies.
but what about dropping the curlies?
This already means positional params though.
This already means positional params though.
Right, my bad, forgot about positional params, we never use them for our components 😅
This already means positional params though.
I don't think we have positional params for <AngleBrackets, do we?
I don't think we have positional params for <AngleBrackets, do we?
Not with the Glimmer Component manager, but we can make component managers that support positional params. I've been wanting to dig in to this for control flow, for things like ember-animated, or other control-flow logic (maybe like with async-data loading at the component level for managing intermediate / placeholder state).
There is a write up on all that here: https://github.com/tildeio/ember-control-flow-component
Though, maybe I still misunderstand, and maybe not having positional in angle brackets is a real limitation, and not just a choice to enhance clarity in the modern era?. idk.
yup, I was wrong about the positional thing in angle brackets:
Thanks @rwjblue and @locks! <3
Further important info from @locks:
the glimmer component manager does not enable the positional params capability it's less a limitation and more a design choice because the ember component manager does have to enable it
@locks https://github.com/sveltejs/svelte/blob/master/src/compiler/parse/state/mustache.ts
It's kinda Mustache
Why we need to continue write {{ instead of { just because of handlebars history?
{{!-- Before --}} <Button @variant={{@variant}} @size={{@size}} @onClick={{this.onClick}}> {{@text}} </Button> {{!-- After -- I don't think this is the right way to do this, cause it's semantically weird --}} <Button { @variant @size this.onClick }> {{@text}} </Button>We don't use angle bracket components in our project yet, so I'm not sure if this conflicts with anything, but what about dropping the curlies?
{{!-- After --}} <Button @variant @size this.onClick> {{@text}} </Button>Basically the shorthand property value feature, just consider
<Buttonand>as the opening and closing curlies.
This was my first thought when wanting to be able to remove the redundancy. Would be sexy. However would also be confusing for new people which is why a more JS like syntax should be used (if anything) imo.
Leaving this open for now since it's referenced in @NullVoxPopuli's meta issue.
