support invoking components with render

[NullVoxPopuli]

adds support for

await render(
  <template>
  
  </template>
);

or

await render(SomeComponent);

This usage only makes sense if the component takes no args.

alternatively, we could make ember-template-imports not turn the <template> into a component within render, but I feel like that could get complicated when people define the <template> outside of render and then try to pass it render, and then we're back at the same problem.

[NullVoxPopuli]

idk if there is a better way to check this

[lifeart]

@NullVoxPopuli could we add support for arguments?

await render(SomeComponent, { key: 'value' });

or it should be an side thing?

context.setProperties({ __renderable__: renderable, args, attrs });
const argsForComponent = Object.keys(args).reduce((acc, key) => {
   return `${acc} @${key}={{this.args.${key}}}`;
}, '');
const attrsForComponent = Object.keys(attrs).reduce((acc, key) => {
   return `${acc} ${key}={{this.attrs.${key}}}`;
}, '');
template = hbs`<this.__renderable__  ${argsForComponent} ${attrsForComponent}/>`;

to support reactive mutations on args, https://github.com/lifeart/glimmerx-workshop/blob/master/src/test-helpers/index.ts#L7 may be used.

example: https://github.com/lifeart/glimmerx-workshop/blob/master/src/components/Icon.spec.ts#L12

[NullVoxPopuli]

I think if you want to pass args, you'd do:

let fromTestScope = 2;

await render(
  <template>
    <MyComponent @arg={{2}} @foo={{fromTestScope}} />
  </template)
)

example

That does look like a handy shorthand.
But, 🤷 I'll defer to maintainers.
Personally, i'd want splarguments, so we'd still use the template tags.
It feels like an indirection to do what glimmerx is doing, but it also make sense..
So, i'm on the fence. Happy to add it though if people want

[chriskrycho]

Just checking (without looking 😂) – does this align with the direction suggested by/straight-up implement emberjs/rfcs#785? Such that you could now just pass it scopedTemplate and it would work, assuming that proposal were accepted (or, as you note, <template>)?

[NullVoxPopuli]

This work is a little unrelated to RFC#785, but maybe implemented support by accident?
The RFC says scopedTemplate returns a component, which.. would work 🥳

as is, I've been testing with <template>, and that works (as ember-template-imports always converts lone <template>s to components)

[rwjblue]

This is the same as what is being proposed in emberjs/rfcs#785 (that just adds a way to create a component without also requiring folks use <template></template>).

[rwjblue]

We need to move that RFC forward before proceeding here.

[NullVoxPopuli]

alright 🤷
I think it'd still be handy to:

class Toggle extends Component {
  // ... no args
}

setComponentTemplate(hbs`...`, Toggle);


await render(Toggle);

🥳

[rwjblue]

We can make passing a component work when we aren't under 3.25 as well, the same basic way that ensureSafeComponent works. Something like this:

let randomComponentName = `render-test-helper-${uuid++}`;
owner.register(`component:${randomComponentName}`, renderable);
this.set('__renderable__', randomComponentName);
template = hbs`{{component this.__renderable__}}`;

[NullVoxPopuli]

do we want or need to though?

[rwjblue]

The capability requested here landed in 2.8.0+ 🎉