Marble diagrams in the operator description?

[jakovljevic-mladen]

Hi @timdp,

Is it possible to add something like this:

(I created this image using Paint 😁)

Basically, does Swirly support adding marble diagrams in the operator description?

For example:

> debounce(() => ---x)

If not, could this be added? If you'd like, I may try to add this, but could you please add me some instruction what/where to look at for a quicker start?

[timdp]

First off, thanks for trying Swirly!

When I originally built this tool for a presentation that I gave, I actually needed this feature too. I did start hacking it in at the time, but then I shelved the idea in favor of poor man's ASCII art. I'll likely pick it up again at some point though.

[jakovljevic-mladen]

Cool, thanks a lot. Please ping me once you finish that feature so I can utilize it in RxJS. Also, feel free to check some PRs I created here: ReactiveX/rxjs#6627

[timdp]

So I've added experimental support for this on main. 🎉

You can try it out on https://swirly.dev by clicking on 🍭 and selecting debounce.

Caveat: it leverages SVG <foreignObject> support to render HTML inside the SVG doc (and subsequently render SVG inside that again). It's pretty wild, but it works, albeit only with browser-based SVG rendering, which is Swirly's default.

[timdp]

This is available as of v0.19.0.

[jakovljevic-mladen]

Hey @timdp, I somehow missed to answer to you after the first message, sorry about that.

This looks great, thank you a lot for adding this feature. Wow!

[timdp]

Good to know advanced scenarios work as well. 🙂

I've actually discovered that the layout is a bit broken if your observable is empty; I'll fix that soon. Fixed as of v0.19.1.

[jakovljevic-mladen]

Hey @timdp, I wanted to update Swirly in RxJS, but I was constantly getting this error:

.../rxjs/docs_app/tools/marbles/scripts/index.ts:4
import { parseMarbleDiagramSpecification } from '@swirly/parser';
                        ^
Error [ERR_REQUIRE_ESM]: require() of ES Module .../rxjs/docs_app/node_modules/@swirly/renderer-node/dist/index.js from .../rxjs/docs_app/tools/marbles/scripts/index.ts not supported.
Instead change the require of index.js in .../rxjs/docs_app/tools/marbles/scripts/index.ts to a dynamic import() which is available in all CommonJS modules.

I updated all 3 Swirly packages to version 0.21.0, did npm i and then I run build:marbles script which generated this error message.

I tried solving this issue by adding "type": "module", to the package.json, but then I was getting another error:

TypeError: Unknown file extension ".ts" for .../rxjs/docs_app/tools/marbles/scripts/index.ts

Is there any other dependency you're using that might be causing this issue? Could you please try digging more into this?

Thanks!

[timdp]

Hmm, I'm not that familiar with the docs app codebase (or Angular's build process), but all of Swirly's packages are pretty standard ESM. Hence, if you can get the build process to understand import in the same way that browsers and Node do, it should pick up the dependency tree just fine. Migrating to ESM can definitely be a hassle though, so I'm hoping the Angular build process can do the heavy lifting for you.