niltz
May 5, 2020, 3:25pm
1
Lets say I am creating a UI library for general consumption, and I want to use composable components. For example, Lets say I have input and form components like so:
input.hbs:
<input class="lib-input" ...attributes />
form.hbs:
<form class="lib-form" ...attributes>
{{yield (hash input=(component 'input' class="lib-form-input"))}}
</form>
And then I am creating an app that uses them like this:
application.hbs:
<Form class="my-form" as |form|>
<form.input class="my-form-input" />
</Form>
What I would like is to have the following output:
<form class="lib-form my-form">
<input class="lib-input lib-form-input my-form-input />
</form>
But I can’t get it to do that…my input is missing the “lib-form-input” class. Is there a way to make it work like this?
niltz
May 5, 2020, 3:36pm
2
Looks like my use case might be related to this open RFC?
opened 03:11PM - 03 Jun 19 UTC
This looks like a missing piece to achieve parity between "ember and glimmer" co… mponents when using the `(component)` helper.
With angle brackets and the distinction between arguments and attributes it is no longer possible to pass down attributes to those components. Everything in there will be turned into arguments.
Imagine, I markup my component that way:
```hbs
<MyComponent @reallyImportantArgument={{this.foo}} disabled={{false}}/>
```
It will not work with a component helper:
```hbs
{{component 'my-component' reallyImportantArgument=this.foo disabled=false}}
```
the latter "param" (`disabled=false`) will be passed as argument instead of attribute. One workaround is to use the let helper and use angle bracket syntax. However, this does not work when you want to yield a "preconfigured" component, e.g.
```hbs
{{yield (hash
MyComponent=(component 'my-component' reallyImportantArgument=this.foo disabled=false)
)}}
```
I don't know if this is already possible somehow or if this is in a need for a RFC to complete the feature set for octane.
1 Like
Hi!
If i were, I wouldn’t create components with global HTML tags names. It may be useful to use a prefix. For example
<NiltzForm as |nf|>
<nf.text-field ...attributes />
<nf.number-field ...attributes />
<nf.input-field @type="" />
</NiltzForm>