Need a Migration Guide?

[geekytime]

Here are the (approximate) steps I had to take to migrate from 0.x to 1.x:

Update yolk

npm install yolk@latest --save

Remove old rx, since yolk is now using rx@5.0.0-beta-x

npm uninstall rx --save
npm uninstall rx-dom --save

Migrate code from rx 4 to rxjs 5

The RxJS migration guide isn't as helpful as it could be. Here are the steps I had to take.

At first, you might get a bunch of errors such as startWith is not a function, merge is not a function, etc. This is because RxJS switched to a modular approach that lets us load Rx functions into our build individually.

//Switch to new modular imports for Observable and other Classes:
//import Observable from "rs";
import {Observable} from "rxjs/Observable";

//Add module imports for any operators I use within my code:
import "rxjs/add/operator/startWith";
import "rxjs/add/operator/merge";
import "rxjs/add/operator/switchMap";

Fix any undefined values

I had one result$.map() call where the function was returning undefined for some weird cases. While rx and Yolk were fine with this in previous versions, I was getting cannot call .toString() of undefined from RxJS. I had to track down that function and return "" to get past the error.

Migrate any RxJS extensions

I was using the ajax functions from rx-dom. These used to be in a separate npm package, but now they are included with rxjs.

For example, to use the post function, I went from this:

var {post} = require("rx-dom").DOM;

to this:

import {Observable} = from "rxjs/Observable";
import "rxjs/add/observable/dom/ajax";

var post = Observable.ajax.post;

[geekytime]

I posted this as an issue to start with, so others could compare the steps they took to update. I'd be happy to formalize this into a proper doc once we come to a consensus on the proper procedure. 😁

[garbles]

@geekytime thanks for opening this up! Feel free to start a PR with this information - probably an UPGRADING.md file in the project root.

Other breakages of note:

• No more Yolk.CustomComponent
• No more Yolk.registerElement
• A subject of subjects is no longer "unwrapped"
• createEventHandler returns a subject instead of an exotic function
• virtual-dom widgets will no longer work with Yolk

I expect that these things have limited impact - but maybe I'm wrong :disappointed:.

[geekytime]

Yeah, I was just trying out CustomComponent out of desperation to get a decent TimePicker widget. It'd be nice to have at least an example of how Jquery plugins could be used.

I was also going to open an issue about calling React from Yolk. I couldn't get it to work with WebPack/Babel, I think because they require different settings for the jsx pragma? Should I even bother now that CustomComponent is gone?

[garbles]

You can still create a custom component but it will be different. As long as it follows the same interface as VirtualNode. I need to document this.

If you wanted to use React you could say,

function ReactComponent ({props, createEventHandler}) {
  const handleMount = createEventHandler()

  // instance = an instance of a react component
  handleMount.withLatestFrom(props.instance).take(1).subscribe(([ev, instance]) => {
    React.render(instance, ev.target)
  })

  return h('div', {onMount: handleMount})
}