RxMarbles integration

[ladyleet]

Created based on suggestion in #12 for visualization

[ladyleet]

@staltz hey andre! have ideas on how we could integrate this, etc into the new docs? we are making plans to do so! would love help if you have time.

[staltz]

Hi @ladyleet :)
Actually on reactivex.io we already have rx marbles as web components, for instance http://reactivex.io/documentation/operators/map.html

That was possible due to this: https://github.com/staltz/rxmarbles/blob/e34558bf288ce57548ca8d8048ea6bdc040f3820/test-custom-element.html (nowadays outdated)

That said, I'd also like to include @philpl in this conversation, since he built https://github.com/philpl/rxjs-diagrams which could be used for this purpose.

Actually I'm completely surprised about this repository and initiative. As the person who wrote most of the docs for http://reactivex.io/rxjs, I would expect to be at least consulted when an initiative like docs rewrite is up for discussion.

[kitten]

Hiya, I haven’t heard of this initiative either, but I’m pleasantly surprised of the effort to make RxJS even more accessible!

I also haven’t heard of RxViz before. It seems that it operates in real time only though, right? It’d be amazing if we could combine efforts to have RxViz display an editable “mock time” stream as well. I haven’t worked on my library a lot after using it for a talk, but it’d be great to implement the gist of it in a more production-ready library

[ladyleet]

@staltz yes, we have been discussing during the core team meetings and offline - we just wanted to finally get things started since it's been a topic since contributor days at the beginning of the year about improving the docs. not sure if you had logged off during that time! happy to have any guidance on docs related to this. :) do let me know!

[ladyleet]

@philpl hey phil! yes did we talk about this before? i'm pretty sure we did a few months back but i can't remember now. i think combining efforts would be really great. if you'd like to be included in the upcoming meeting, send me an email? [email protected]

[ladyleet]

@staltz i added you to the initial planning meeting btw! :) but most of the stuff we are planning is in here already issue #4

[ladyleet]

@staltz so, are you saying we use rxjs diagrams as well as rx marbles? or in lieu of?

[staltz]

@ladyleet apparently both rxjs-diagrams and rxmarbles aren't in a production-ready state to be embeddable and usable within docs. It's not hard to fix the rxmarbles feature as a web component, though. I think the choice on which one depends on how many different operators can each render. The more challenging operators to render are concatAll, mergeMap/switchMap, groupBy, and some odd ones like do, observeOn, etc.

[ladyleet]

@staltz love! Thanks for taking some time to think through this. Do you want me to create an issue or... and do you want someone else to help with this or might you have time? What do you think of having this as a separate route? Also @manekinekko I know has experience in web components use in angular so woot!

[staltz]

Hi Tracy, I probably don't have the time, but I can help review and merge a PR. It's mostly about restoring this functionality (a small file) that was lost when the codebase was updated to RxJS v5, and probably also updating the Web Component spec to WC v1, using the right polyfills too.

[kitten]

@ladyleet hiya, I don’t think we’ve met in person yet actually 🤔 I hope we can meet one day though

I’m currently a bit swamped with OSS work but I’d be happy to assist here. AFAIK the rxjs-diagrams Core Code to make the simulated streams work is still in good shape and should support all operators except of course demoing do and observeOn etc

I’d be happy to be involved, since I’ve gotten some interesting ideas that we’ve implemented when writing the styles-components docs. Feel free to mail me if you want to chat about some ideas: [email protected]

[manekinekko]

@ladyleet I'll be glad to help or collaborate on this. Lmk.

[ladyleet]

@manekinekko cool! I think maybe just creating a separate route and then integrating rxmarbles would be really awesome. And maybe seeking help from @staltz as questions arise? Happy to get you the help you need and assist during the process as much as possible so that we can actually get this integrated :-)

[inf3cti0n95]

@ladyleet @manekinekko Count me in for this ! LMK what I can help with

[xtianjohns]

@ladyleet I have a local version of RxMarbles custom elements working with newest Web Component spec and this polyfill. I can have a PR submitted to RxMarbles this week. @staltz, should I open up an issue in that repo?

That doesn't mean the integration will be done by any means, we'll still have to address updating the operators and integrating with Angular, but that can hopefully help get things started for folks who aren't Cycle.js savvy?

[staltz]

@xtianjohns that would be great, thanks for the initiative!

[manekinekko]

@xtianjohns Awesome! Could you provide a link to your repo?

[xtianjohns]

I've opened an issue, and PR is here, @manekinekko.

[btroncone]

@xtianjohns Awesome work! I was able to get the rx-marbles web component integrated with the Angular app. @ladyleet

We should be able to close this once #34 is merged 👍

[ladyleet]

You guys are also amazing!

[dance-cmdr]

Hi guys as my first task I'm going through the issues. oldest to newest and I'll try to clean up the list a bit. For this one, it mentions that it can be closed once #34 is merged.

#34 is merged.
Is there any outstanding work towards this feature?
Can we close it now?

@btroncone @xtianjohns @ladyleet

[btroncone]

@Alexandros-S There was actually an issue with RxMarbles integration I ran into when switching between operators so it was disabled as we were thinking about launching imminently. This may not be a problem now with the new navigation patterns but I have not had a chance to go back and look. It appears the code for the web component is just commented out right now.

rxjs-docs/src/app/operators/components/marble-diagram/marble-diagram.component.html

Lines 7 to 9 in 937bc7d

	<!-- <rx-marbles *ngIf="useInteractiveMarbles"
	[attr.key]="operatorName">
	</rx-marbles> -->

[dance-cmdr]

Thanks, @btroncone. I'll try to have a look at it.