Support pipeable operators

[Airblader]

Closing #4 was a little premature. We can write our own pipeable operators and use them now, but due to the way rxjs is imported in the sandbox we cannot use all the built-ins as pipeable operators. For example, ideally this would work:

const source$ = of(42);
source$.pipe(
  map(value => 2 * value)
)

This would be really useful to quickly copy-paste samples from code you're writing to debug them as well as allow using rxviz as a reference for answers on platforms such as StackOverflow.

[Airblader]

I'm happy to implement this, but I'm not sure what a good way to achieve this would be. Manually import all known operators in the sandbox? AFAIK there's no good way to automatically import all operators without listing them explicitly.

[moroshko]

I'm not it's a good idea to pollute the global scope with all the available operators.

You can just do:

const { of } = Rx.Observable;
const { map } = Rx.operators;
const source$ = of(42);

source$.pipe(
  map(value => 2 * value)
)

[Airblader]

In general I agree, especially considering that functionally there's nothing we can't do already. However, to provide some perspective, I've been using rxviz every day for a while now. I use I for my work, I use it for private work and I use it when answering questions on StackOverflow. The two issues I run into almost every time are:

1. Having to use the Rx name space rather than writing Observable etc directly
2. No option to directly write pipeable operators.

Both can be worked around the way you describe, but it's just not as convenient as it could be for copy-pasting snippets in either direction.

I guess one thing I could do is prepare a snippet which does all the global scope aliasing, save its URL and bookmark it to use it as my starter template. That might be good enough.

[MattiJarvinen]

@moroshko you should upgrade couple of examples to use lettable operators just to show this functionality. Prehaps add those already into comment block of the custom code page.

This tool is awesome, thanks for this.

[Liero]

@Airblader: rather that polluting global scope, I would expect something like quickfix command in editor that adds the imports.

Maybe some visual toolbox, with all operators, creators etc. and their description would also help.

[Akxe]

@Liero That could be theoretically done using with keyword, but it is not recommended. And there is a problem that, there are non-ambiguous creators/operators. combineLatest is one example.

I would vote for import syntax. Imports are used in every app that uses RXJS, it solves ambiguities problem and is easily copy/paste able.

[rraziel]

Hello @Airblader ,

It's been a while but, as mentioned before, having them available in the global scope can be an issue, most notably with name clashes for things like combineLatest that exist in 2 forms.

However I can see how in its current state this is not very user-friendly. What do you think about:

Short-term

Automatically turn import statements into their rxviz equivalent, e.g when pasting:

import { combineLatest } from 'rxjs';
import { map } from 'rxjs/operators';

It becomes:

const { combineLatest } = Rx
const { map } = Rx.operators

Long-term

That would require far more work, but having something that provides auto-completion and adds imports should make the application far easier to use as an editor

[Akxe]

@rraziel For the long term, this should work https://github.com/cdr/code-server.

Stripped down VSCode would work wonders...