Instructions for using widgets written in other frameworks/libraries

[geekytime]

Many people will likely feel more comfortable trying and using Yolk if they have access to the widgets they're used to. A few key examples might be really helpful for things like:

• A Jquery Plugin (we could at least pick a modern, pretty one)
• A React component (like Material UI)
• A Polymer Component

[geekytime]

I was specifically having problems with React components not working on the previous version of Yolk using CustomComponent. It took some work to get them to render properly, and then DOM events didn't work properly.

[garbles]

Totally agree. I'll write some tests verifying that this does work and make sure to add a portion on it in the WIP documentation.

[geekytime]

I've got several Material UI components working using a generic ReactWrapper component.

It lets me use React components in a very Yolk-y way, with all of the React mess hidden away. For example to use the Material UI DatePicker:

var DatePicker = require("material-ui/lib/date-picker/date-picker").default;
var ReactWrapper = require("./react-wrapper.js");
var reactEvent = require("./wrap-react-event-handler.js");

module.exports = function({createEventHandler}){
  var startDate$ = createEventHandler();

  return (
    <ReactWrapper 
       componentClass={DatePicker} 
       onChange={reactEvent(startDate$)} 
       hintText="Start Date" 
       className="datePicker"
    />
  );
};

Note that you do have to explicitly wrap event-handlers, but that's the only real gotcha. Other props are just passed through to the React component.

If you're interested, I could open a pull request back to Yolk, or (probably better) we could put it in a separate yolk-react-wrapper package, or whatever.

[garbles]

Cool! I wonder whether the ReactWrapper should do the work of wrapping event handlers? (See eventListMap in src/eventsList.js)

[geekytime]

I looked into that, but the events in this case are often specific to the React components. They're really just props, some of which React might map to DOM events like Yolk does, but others that it just triggers like an EventEmitter. We probably shouldn't assume which are DOM events, and which are not, I'm afraid.

(e.g. a grid component might have an onSort event, etc.)

[garbles]

Haha in that case, what a silly comment for me to make. You're totally correct.

[geekytime]

Not that silly. I had the eventsList all loaded up in the wrapper and was checking the names in the list before I realized it. 😏

[garbles]

Just riffing here, it may be worth the assumption that any prop key that matches /^on[A-Z]/ is an event handler.

Either way I think it's worth writing a lib for it. I probably wouldn't include it in yolk proper because React compat is not a goal of the project; however, I think it's definitely worth listing in the documentation/README as long with a section about React compat.