accept props

[zouhir]

it's good to be able to pass props in widget configs

example: if we have a video player widget - would be great if the client\host DOM can pass props within the JSON config like what we already have in { "clone": "id-xyz" } but:

<script type="widget/config">
  {
    "props":{
      "videoId: "11223300",
      "playFromStart": true
    }
}
</script>

[rdmurphy]

Could also be cool to be able to pass them as properties on the container element (or the <script> tag itself), too. Would have to come up with a namespace that could be observed for that purpose, though.

[zouhir]

@rdmurphy I actually thought of data attributes. but found a JSON config to look more neat after looking at the following options:

<script data-props-videoId ="11223300" data-props-playFromStart="true" >

or

<script data-props="{ ...props }" >

I'm open to suggestions

Namespace idea is KOOL! I love it

[zouhir]

V1.0.0 or higher now support props 🎉

[luisrudge]

@zouhir can we make it possible to pass props from the render call?

[zouhir]

@luisrudge in this version, what you can do in a case where you want to render widget with extra props:

let extraPropsObj = {...};
let ExtraPropsApp = () => (<App ...extraPropsObj />)

let appHabitat =  habitat(ExtraPropsApp);
appHabitat.render({ ... })

that what works now out of the box, will consider allowing passing habitat(<App ... />) in future releases :)

hope my answer was helpful

[luisrudge]

That makes sense. Thanks!

[kentcdodds]

I'd totally love it if props could include functions. Could do:

<script type="text/props">
  window.widgetVariable = {
    props: {
      videoId: '11223300',
      playFromStart: true,
      onPlay: function () {
        console.log('played!')
      }
    }
  }
</script>

Then we could delete widgetVariable off of window 👍

My use case is with downshift, I'd love to be able to expose the full API and allow you to render whatever you'd like using whatever framework you want 😄 Need a full function to do that though...

[zouhir]

That idea is so damn awesome.

Oh! @kentcdodds would you like me to allow you expose DOM events?
so instead of writing it inside HTML we can expose DOM events and get them to consume it whenever.
so you can have a global module name, I am very busy now but can deliver this by next Friday!

your users can do: UMDModuleName.on('play', () => {...}) ?

You can do:

habitat.registerDomEvent('play', .....)

did I misunderstand please let me know!

[kentcdodds]

Yeah, that'd be pretty legit 👍

That'd definitely allow me to do what I want to do here! 🎉

[Rouvo]

Hello,

I also would like to pass functions to a widget. From reading this thread I assume you already did implement the exposing of DOM events? However, I cannot find anything like registerDomEvent

Can anyone provide an example of passing functions/using events across parent and child/widget components?

[NicHaley]

@zouhir Similar to @Rouvo I also require this functionality. Has anything been added thus far?