Render a component within a Widget. (Using select-kit components within plugin code)

[merefield (Robert)]

@david

for state to work you need to define a buildKey and a defaultState() method.

Yeah, I have those defined. I’ll tidy and push to a repo.

A test demonstrating a form of two way binding with an embedded Component would be extremely helpful!

[david (David Taylor)]

@merefield

this.state is undefined within the change function, so that makes things a bit tricky?

I was able to access that, and the scheduleRerender() function. Updated tests and docs in

DEV: Improve testing and documentation of RenderGlimmer actions

Just confirming - your @bind is imported from discourse-common/utils/decorators?

[merefield (Robert)]

@david

your @bind is imported from discourse-common/utils/decorators?

Confirmed

Here’s the repo: GitHub - paviliondev/layouts-tag-intersection-widget: A small widget to allow you to navigate to a topic list based on a combinations of tags

And the widget file specifically: layouts-tag-intersection-widget/layouts-tag-combo.js.es6 at master · paviliondev/layouts-tag-intersection-widget (github.com)

Very much WIP and non-working as stated.

(Requires Layouts plugin installed and configured to test as is, but trivial to extract the widget code)

[david (David Taylor)]

Ah, I think this might help:

- @onChange={{action @data.onChangeUpdateTagSet}}/>
+ @onChange=@data.onChangeUpdateTagSet/> 

When passing a ‘closure action’, there is no need for the (action helper (and in this case, I guess it actually breaks things)

[merefield (Robert)]

That appears to result in TypeError: this.attrs.onChange is not a function?

But yeah, maybe that helper is masking the available attributes?

[david (David Taylor)]

Oh my bad, we need some curlys there, otherwise it’s just parsed as a string attribute.

- @onChange={{action @data.onChangeUpdateTagSet}}/>
+ @onChange={{@data.onChangeUpdateTagSet}} /> 

[merefield (Robert)]

Unfortunately that results in the same error?

[david (David Taylor)]

Can you add a breakpoint and find out what the value of this.attrs.onChange is? (The “pause in exception” feature in the dev tools may help here)

[merefield (Robert)]

@David and I have resolved this over PM:

@david

It turns out that, in widgets, @bind only works for Widgets defined using the class syntax. That’s why it works in the test - I was doing class Blah extends Widget { ... }.

For non-class-based widgets, you’ll need to bind the function manually like

hbs`<UserMenu::Menu @closeUserMenu={{@data.closeUserMenu}} />`,
{
  closeUserMenu: this.closeUserMenu.bind(this),
}

Thanks so much for your time @David.

I’ll publish the TC once complete.

[merefield (Robert)]

This is now a thing, albeit slightly roughly finished atm:

Requires the Layouts Plugin.

Repo of Theme Component here: GitHub - paviliondev/layouts-tag-intersection-widget: A small widget to allow you to navigate to a topic list based on a combinations of tags

[merefield (Robert)]

FYI this component supports Right Sidebar Blocks now too!

[merefield (Robert)]

FYI This component supports Discourse Bars 🍻 🍸