Ability for host page to update properties on the widget

[joelmalone]

It'd be great if the host page could capture a reference to the Preact component, which it can then use to update the properties on the rendered component later.

An example use case might be:

• A widget exists that lists items; the widget takes a property that can be used to filter the list.
• The owner of the hosting website has configured the list to use a pre-determined filter, passed to the widget as custom props at startup.
• The end user can click buttons or dropdowns in the hosting web page to update the filter prop in the widget, re-rendering the widget with the new filter.

[gijo-varghese]

any updates on this?

[sirphoenix]

I've made a pull request which enables passing the widget as reference to a local or global variable (#33). From there you could access any public methods, e.g. changing it's state.

Not sure about props though, that would mean completely re-rendering the widget from root.

[zouhir]

Would sharing a functional event emitter instance between page and widget be good?

import mitt from 'mitt'
window.emitter = mitt() //very bad lol

// widget can listen to an event from page
emitter.on('foo', e => console.log('foo', e) )

// page or widget can fire fire an event
emitter.emit('foo', { a: 'b' })

// working with handler references:
function onFoo() {}
emitter.on('foo', onFoo)   // listen
emitter.off('foo', onFoo)  // unlisten

[sirphoenix]

Why add the extra complexity of a global emitter when we're already talking about global/window namespace outside the widget?

Unless you really want habitat to accept messages from there and then change props on the widget?

@joelmalone do you have a code example of what you want to do exactly?