Imagine we need to implement a drag-n-drop behavior.

For that, we have three event streams: mousemove$, mousedown$, mouseup$. So we want to capture mousemove$ events after mousedown$ emitted and before mouseup$.

Let's draw a marble diagram of the event streams we have:

mousedown$  --o------------
mousemove$  -o-o-o-o-o-o-o-
mouseup$    ------------o--

For better readability let's substitute all the os to respective letters of the streams:

mousedown$  --d------------
mousemove$  -m-m-m-m-m-m-m-
mouseup$    ------------u--

Now that we have distinct event names, we can simplify our diagram to a single line of events:

events$     -mdm-m-m-m-mum-

Let's remove the time - signs as well, we don't them:

events$      mdmmmmmum

Okay, to rephrase our task in terms of the new diagram: we need to capture the m events between d and u emissions.

🤔

Hmm...

"we need ms between d and u"...

Sounds familiar...

Ah! If that was a string, we could easily do it with a regular expression:

/dm*u/.exec('mdmmmum')

Would give us the needed dmmmu without trailing mouse-move m events...

Right?

If only we had a library to select events from streams with regexes...

🤩 Introducing Regular Expressions for Rx

With exprs-rx package you can now query your streams with regular expressions like syntax!

mousedown$  --d------------
mousemove$  -m-m-m-m-m-m-m-
mouseup$    ------------u--

                 dm*u

result$     --dm-m-m-m-mu|

Benefits:

• clear and extensible syntax
• no need to remember dozens of operators
• no need to import them, which reduces bundle size
• with more implementations to come — one syntax for all stream libraries (monetjs, kefirjs, baconjs, TC39 Observables, etc)

Example

Here's our drag-n-drop example in JS:

import { exec } from 'exprs-rx';

const item = document.getElementById('item');

const D = fromEvent(item, 'mousedown');
const M = fromEvent(document, 'mousemove');
const U = fromEvent(document, 'mouseup');

exec(
  'DM*U'         // <- regular expression
  , { D, M, U }  // <- streams that will be used
)
  .pipe(
    // ... apply any operators ...
  )
  .subscribe(console.log);

Repo //github.com/expressions-for-reactive-streams/js-rx-exprs

Currently, the library supports capital letters A-Z that represent a single emission of a corresponding stream.

And a repeat A* notation that will consume multiple events from the corresponding stream, until completion or until next entry in the regex matches.

And much more to come: (), [], !, etc!

For regex specification and plans on vocabulary, please, see this repo github.com/expressions-for-reactive-streams/spec-regular-expressions

Try it

Install it

npm i exprs-rx

🙌 Outro

The idea is to extend the expressions syntax to cover 80% of routine RxJS tasks. And maybe add combination commands. The possibilities are endless!

For upcoming amazing updates — follow me here and on twitter

If you've found this post worth sharing — please, use this tweet:

🙂 Thanks!