Using Choo to create reusable widgets?

I wanted to see if I could use choo to create a widget that I can add to any HTML page. I had the following requirements:

1. Ability to pass in options to customize the created DOM element
2. Imperatively call methods on the element to trigger actions
3. Handle events triggered by the element
4. Have more than once instance of the element on a page

Was choo built to handle this? I noticed that all examples require the router to configured for example. I would not need this and I am interested to know if choo can be used without it. What I would want to use is the model and the view functionality.

I hacked together a POC of how this could be done. You can look at the jsbin here. It works but, as I said it’s kind of hacky. My problem was really that I needed to get access to the send function, to be able to attach it to the element instance, in order to be able to call a function on the rendered element. The only way I could think to do it was to expose the send function outside of the main view.

So, is there a better way?

By the way, great framework. It’s really fun!

[yoshuawuyts]

We should probably document this a bit further in the handbook, but https://www.npmjs.com/package/nanocomponent is a thing now ✨

[yoshuawuyts]

Yay, glad to hear! Re: your issue - we’re currently working on nanomorph; perhaps that yields a better result? https://github.com/yoshuawuyts/nanomorph

On Sun, Jan 8, 2017 at 8:20 PM Ricky Reusser [e-mail] wrote:

@yoshuawuyts https://github.com/yoshuawuyts was that a question for me or a general question? I hate to hijack the issue with my concerns simply because I was the last to comment. 😄

FWIW though, my goal with choo is to recreate a control widget more modern and feature-complete than dat.gui https://workshop.chromeexperiments.com/examples/gui/#1--Basic-Usage and perhaps a bit too divergent from control-panel https://github.com/freeman-lab/control-panel/ to simply keep building on that. React is too big; plain JS is too ad-hoc. Choo seems perfect.

Taking a slightly different tack, I got as far as distilling choo down to choo-lite.js https://github.com/rreusser/control-panel-2/blob/master/src/choo-lite.js and built this http://rreusser.github.io/control-panel-2/.

I got hung up on this issue https://github.com/maxogden/yo-yo/issues/56 in which what seems like a weird browser quirk negates some of the simplicity for which I was aiming. Haven’t yet figured out how to work around it, but everything else about the approach works for me!

— You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub https://github.com/yoshuawuyts/choo/issues/309#issuecomment-271172369, or mute the thread https://github.com/notifications/unsubscribe-auth/ACWleqJSwuHr6CbjzJCTXUrq9Bsz3jQZks5rQTbogaJpZM4Ko8Mc .