Pre RFC / Feature Request: (De)structuring

[NullVoxPopuli]

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?

[lifeart]

<Button @variant="primary" as | ( Icon Image ) ( Spinner ) |>
  <Icon />
  <Image />
  <Spinner />
</Button>

[NullVoxPopuli]

| ( Icon Image ) ( Spinner ) |

I thought () already imply helper?
hmm. idk. as is weird.

[lifeart]

or we can finally drop {{, }} and use {, } :)

[NullVoxPopuli]

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 :(

[lifeart]

Svelte use mustache and ‘{‘

[monovertex]

{{!-- 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.

[NullVoxPopuli]

but what about dropping the curlies?

This already means positional params though.

[monovertex]

This already means positional params though.

Right, my bad, forgot about positional params, we never use them for our components 😅

[ro0gr]

This already means positional params though.

I don't think we have positional params for <AngleBrackets, do we?

[NullVoxPopuli]

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.

[NullVoxPopuli]

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]

Svelte use mustache and ‘{‘

Svelte does not use mustache.

[lifeart]

@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?

[robclancy]

{{!-- 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.

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.

[wagenet]

Leaving this open for now since it's referenced in @NullVoxPopuli's meta issue.