RegExp syntax for Observables: Never Been Easier!

Hi, Brad!

Because I might've confused everyone with strings and regexes comparisons, just to be sure:
We don't get a string "--dm-m-m-m-mu|". Marble diagrams I used are only for visualization of what's going on with Observables. We work with an actual live stream of events.

When we apply a selector, what we get — is a stream of events, that match the selector.

For testing purposes, please see this amazing package rxjs-marbles by @cartant (it's actually used in this package testing flow)

Sorry, if that was obvious, just wanted to make sure we're on the same page 🙂

Now. To the main point:

Whoa... RxJs and Reactive Programming can be hard. Regular Expressions can be hard. Seems like combining the two could make whatever your doing harder.

Yep, both might be hard! And have you seen that regexp for email validation? Sheesh!

And Observables: I've been using RxJS for about 3 years now, have created a playground for observables and am currently working on a RxJS-based framework. Still I'm often confused with that toolset of operators:

Take the mouse Drag and Drop example: if I were to implement that in pure RxJS, I would start with this:

mouseDown$.pipe(
  switchMap(() => mouseMove$),
  takeUntil(mouseUp$),
  repeat()
)

Then I'd realize that I'm doing a resubscription on repeat(), that could've been omitted. So I dig in my memory and under a thick layer of TV shows, I finally find a windowToggle operator:

mouseMove$.pipe(
  windowToggle(mouseDown$, mouseUp$)
)

Only I forget at first that it accepts a function as a second argument.

mouseMove$.pipe(
  windowToggle(mouseDown$, () => mouseUp$)
)

And then if later I were required to add those trailing mouseDown$ and mouseUp$ events to the output stream w/o an additional subscription — ooff. That code grows fast.

Now with a query expression, the same effect might be achieved with:

exec(
  'DM*U',
  { D: mouseDown$, M: mouseMove$, U: mouseUp$ }
)

My point is that it's sometimes easier to use the declarative regex-like syntax.
And with library evolving — we'll get better options to express ourselves.

Hope this really-really long reply will let you look at the idea at another angle.

Cheers!

Hey, Brad!

Almost a year after I think I heard you 🙂
I've created an operator-based API!

// > Mouse DnD

// get dom element to drag
const item = document.getElementById('item');

// capture mouse down, up and move
const D = fromEvent(item, 'mousedown');
const M = fromEvent(document, 'mousemove');
const U = fromEvent(document, 'mouseup');

// listen to a query (_DM*_U)* & log it
query(
  some(mute(D), some(M), mute(U))
)
  .subscribe(({ x, y }) => console.log(x,y));

Check it out: github.com/erql

What do you think?

Hey, Dean!

Yeah! In the second part I'm exploring an operator based approach, where
exec('DM*U' , { D, M, U }) transforms into query(D, some(M), U) (note that some is an operator example). And with that format we potentially could define our custom operators to match particular keydown events. So, I think, with a few tweaks it could look something like this:

let keydown$ = fromEvent(document, 'keydown');
const [up, down] = [38,40].map(code => Operator(keydown$, e => e.key == code));
query(up, up, down, down, /* ... */ )
  .subscribe(() => console.log('CHEATER!!11elf'));