DEV Community

Discussion on: RxJS Proxy: 3 new features

View post

Replies for: It's fun in a good way. A lot of libraries use Proxy. So it's not some crazy niche. For example I like the pipeline operator: of('❤') |> me...

 
kosich profile image
Kostia Palchyk • • Edited

Pipeline looks promising 👍
I was so fascinated that added |> to my RxJS playground: thinkrx.io/rxjs/js-pipeline/ , but with a lot of warning signs ⚠️

I'm not sure that we can openly use it for teaching or openly speaking about RxJS, probably just among those who we know wouldn't be confused by it. In the near future, at least.

--

Btw, about combining strings, this came out of rxjs-autorun (not my idea):

 // should be async to capture all 3
const animals = of( '🐒',  '🦆',  '🐋' ).pipe(delay(1));
tracktag`❤ ${ animals }`
  .subscribe(console.log);
//❤🐒 
//❤🦆 
//❤🐋
Enter fullscreen mode Exit fullscreen mode

Basically, tracktag turns a template string into a computed expression from autorun.

Try it at stackblitz.com/edit/rxjs-autorun-t...

--

Which kinda automatically lead to HTML tags:

HTML tag combination

Try it at stackblitz.com/edit/rxjs-autorun-h...

--

Sorry for spamming you again with a million links. It's because you're among the few with whom I can share it 🤷‍♂️

Thread Thread
 
fkrasnowski profile image
Franciszek Krasnowski •

Sorry for not responding for soooooo long 🤡. Shame on me
I don't see much potential in the tracktag thing. I think we should take a broader perspective. I love computed and <$>.
Why? because it makes code terser and paradoxically more explicit. And it's not just my alienated opinion. Those ideas are already implemented in Svelte, which brings increasingly more attention last time.
Some Svelte with RxJs bits:

<script>
  import { timer } from 'rxjs'
  let tick = timer(0, 1000)
</script>

<h1>
    I see {$tick} 🐑
</h1>
Enter fullscreen mode Exit fullscreen mode

The $ prefix auto-subscribes and unsubscribes to Observable. You can also:

let animals = of( '🐒',  '🦆',  '🐋' ).pipe(
    concatMap(a => of(a).pipe(delay(1000))),
    startWith('?')
)
$: console.log(`❤ ${ $animals }`)
// The tracktag thing
Enter fullscreen mode Exit fullscreen mode

And the strong stuff:

<script>
    import { BehaviorSubject } from 'rxjs'

    let relationship = new BehaviorSubject({ giver: '👩‍🔬', taker: '🐸' })
</script>

<h1>
    The giver is {$relationship.giver || '?'} <br/>
  And the taker is {$relationship.taker || '?'}
</h1>

Giver <input bind:value={$relationship.giver} /><br />
Taker <input bind:value={$relationship.taker} />
Enter fullscreen mode Exit fullscreen mode

working demo here

I would like to see those ideas beyond Svelte on a more general/agnostic field. Therefore I am looking forward to your work on this topic