Idea: twinning with LouisWT "Preview Regexp"

[ghost]

Hey @chrmarti ! 😊👋🏼
Congratulations for the great extension !
A real game changer.

I had an idea that could offer VSCode users an even better experience.
What about having this layout in VSCode ?

To the left: the current document
To the right:

• at the top: your awesome matches live preview
• at the bottom: LouisWT "Preview Regexp"... honestly it's more an "Explain Regexp", but it's very good at it.

Unfortunately given that it's a working fork of this unmantained project, the issue page is not reachable by default.
I ended up submitting a review, as i know that a notification will be sent to its developer.
So with luck he will join us in this conversation.

Of course all of this could be done if you are interested and agree.

VsCode extensions can talk to each others in various ways, like returing in the activate() its APIs.
We can use vscode.extensions.getExtension().exports to obtain access to these exposed APIs.
However for this twinning i was thinking a more easier approach:

He could expose two commands called regexPreviewer.explainRegex which accepts a regex as input and returns the created document (which contains his webview)
and regexPreviewer.explainAnotherRegex which should update the displayed regex.
With the returned view you could move it to the right below your preview panel.
As soon as you detect changes you could call the regexPreviewer.explainAnotherRegex passing the new regex in order to keep them synced.

In this way your extension calls the other if available, sets its position and triggers updates.

Your extension could add in its package.json an "extensionPack" contribution point so everyone would benefit from both extensions.
Hope you could understand the awesome thing could became and the great multi-extensions experience can be.

This was just an idea.
Best !

[chrmarti]

I like the idea. It seems the visualization is now being developed at https://gitlab.com/javallone/regexper-static.

I'm not sure if depending on the other extension is necessarily the right approach. Maybe the visualization could be made reusable as an NPM package.

I don't have cycles to work on this, feel free to submit a PR!

[ghost]

Great !
I have opened an issue in his repo.
I'll wait his reply in order to make a good and fair decision about what to do.
I have took a look at your project, added webpack config and added the code to open a bottom panel:

Stay tuned !😉
Good evening

[ghost]

Good evening @chrmarti !
I contacted Jeff Avallone and he said he don't have time for the project, but will keep it open so anyone could contribute.
Regarding npm: he rightly said that it's very hard to adapt it to node ecosystem, because most of the code uses the browser, thing that it's not available to node.
But we are on VSCode 😉
After being scared by its code (well written but to much for my current me😅) i preferred to don't waste already written good code:
"The best code is the one you don't write" 😂
I have improve the overall code in the Louis' repo,
I managed to contact Louis,
he published my update,
and now i finally managed to bridge the two extensions ! 🎉🎊
Of course users can uninstall one of the two extension (why would they ever do it?) or set the regex-previewer.enableExplainPanel" to false and the extensions will behave as they have always done.
You can see it like an extension's extension 😂
Its extension searches for a regex then write it in a HTML page template that will be render using the webview the final SVG image.
So I've exposed that Html to your extension.
I have few time me too, but i think that good ideas must be protected.
I have opened a PR
Hope you'll like it !