Jvw.DevToys.SemverCalculator extension

[jerone]

First of all; awesome tool. Very useful and solid tooling. Also love that it's build in .NET.

Extension

I wanted to share my own extension to DevToys: Jvw.DevToys.SemverCalculator

It's a Semantic Versioning (SemVer) calculator for NPM packages with the official v2.0.0 spec from semver.org.

Download here: https://www.nuget.org/packages/Jvw.DevToys.SemverCalculator
Source code: https://github.com/jerone/Jvw.DevToys.SemverCalculator

Technical

The extension makes a HTTP request to registry.npmjs.org to fetch the package information. This contains a list of all versions ever released by that package. The extension extracts this list of versions and shows it on the screen.
It then takes the semver range input value and shows an indicator on all versions that match the range.

Learnings

The documentation was clear and complete. Super helpful. Especially the UI examples WITH screenshots.

I did had troubles using the environment variables DevToysGuiDebugEntryPoint and DevToysCliDebugEntryPoint, because they point to the preview version of the application, which is installed in a folder with a space in it "DevToys Preview". For some reason the launchSettings.json in VS cannot handle this. I tried with extra quotes, but no success. For now I hard-coded the paths.

During packaging, I initially skipped over the IncludeAllFilesInTargetDir step because I thought I did not need this. But my project was referencing another NuGet package (Semver), so I did need this step. The packaging step was complaining about files that were already there, plus it was copying over other .dll that should not be published (CSharpier). So, I changed to code to explicitly include only the .dll file that I needed.

It was my first official full experience with making an NuGet package, and with the documentation this was very easy.

All UI components were easy to work with. For my use-case I missed some styling feature, like text and border color options, but I solved it with emoji's.

I noticed that it was possible to have your own extension installed and sequentially run the extension via debug. It's a little hard to distinct between the 2 versions, but this could be solved with a #if DEBUG around the extension name.

[jerone]

I noticed the documentation mentions to create an unique name for settings by using the tool name.

name: $"{nameof(MyGuiTool)}.{nameof(mySetting)}", // Unique name for the setting. Use the tool name to avoid conflicts.

However when I go to the settings.ini file, I see all settings are already prefixed with the tool name.

For example, I created a setting called "HttpAgreed":

    public static SettingDefinition<bool> HttpAgreed =
        new(name: "Jvw.DevToys.SemverCalculator." + nameof(HttpAgreed), defaultValue: false);

And this appeared in the settings.ini file:

Jvw.DevToys.SemverCalculator.Jvw.DevToys.SemverCalculator.HttpAgreed=True

Is the suggestion in the docs still relevant?

[veler]

Hello, thank you for all these feedback! This is super helpful. Also good catch on this mistake :) I will correct it.

[jerone]

@veler Is it correct that if I have my own extension installed in DevToys, and I start a debug session running Visual Studio with my extension, that both extensions (installed-before and debug) referrer to the debug-session?

I expected them to not be the same.

I tried changing the Name-attribute to something different.
I also changed the ShortDisplayTitleResourceName- & LongDisplayTitleResourceName-attributes to distinct between the two versions.

[veler]

Is it correct that if I have my own extension installed in DevToys, and I start a debug session running Visual Studio with my extension, that both extensions (installed-before and debug) referrer to the debug-session?

That looks like a bug (I just reproduced it). Tools from both extensions appear in the navigation bar, and clicking both show the debugged one. Ideally, it should only show the one being debugged, I think.

[jerone]

Yes, agree.

[jerone]

@veler Where you able to find a solution for this bug?

I had to uninstall the manual installation of my extension, because this was conflicting with MEF ImportingConstructor-attribute trying to import duplicated services, as it would find both the manual extension service and the debug extension service.

[jerone]

@veler As you can see in my screenshot above, the list of results can be very long. I couldn't find any UI element that had a scrollable option (besides the screen itself). Would it be possible to add a max-height option to a UICard (of other element)?

[veler]

Did you try List? It has a scroll bar when it gets too large: https://devtoys.app/doc/articles/extension-development/guidelines/UX/collections/list.html

That's what Extension Manager uses:

DevToys/src/app/dev/DevToys.Blazor/BuiltInTools/ExtensionsManager/ExtensionsManagerGuiTool.cs

Lines 131 to 132 in ee85fda

	_extensionList
	.ForbidSelectItem())));

Same thing with PNG Compressor and Image Converter.

[jerone]

I was talking about this element 👇 This would be not a great UX when all versions are rendered in a List:

Right now, I'm adding a cheatsheet DataGrid on the right. But the DataGrid is taking a height of the full window, instead of the content. Creating a scrollbar (see purple) with only empty space (see green).

When I disable the isScrollable on the UIToolView, the cheatsheet DataGrid is rendered correctly, but the results UICard get clipped (unscrollable) when the data is more than the available space.

[veler]

I see. Right now, WrapPanel is not meant to auto scroll like you seem to wish. Perhaps I can add a "ScrollContainer" control. Just an idea...

[jerone]

I think that would be a great addition.

[jerone]

Just wanted to share that I was able to unit-test this whole extension. Including the GUI.

I build an custom converter for Verify to allow for snapshot testing of the UI elements.
Example test & snapshot.

[veler]

Oh, this is awesome! :D

[jerone]

I'm experiencing a weird behavior with one particular extension NuGet package; NuGet.Versioning.
After adding it to my extension, the extension will not load at all anymore.

To confirm that the issue is not related to the content, I tried a similar extension (Chocolatey.NuGet.Versioning) without any issues.
I also included the source code from NuGet.Versioning directly inside my extension without any issue.

The output console mentions nothing interesting.
But I did saw there was already a dll being loaded called NuGet.Versioning.dll.
After some investigation, I noticed that DevToys imports NuGet.Packaging, which has a dependency on NuGet.Versioning.

@veler Do you know how I can still use NuGet.Versioning package in my extension?

This could be an issue with any other packages that DevToys includes, but I have not confirmed that.

[jerone]

This is an interesting issue and was worried it would happen at some point. As you found out, DevToys has NuGet.Versioning as a dependency, hence, it's already loaded.

With almost 400 dll files in the install folder, the change is relatively high it might happen again.

I tried excluding NuGet.Versioning to the output folder, but no luck.

Anyway... With this being said, let's explore some alternative to extension isolation

Sadly I'm not familiar with MEF to give any meaningful advice.
But I'm here if you want to try something.

For now I copied the source code of NuGet.Versioning into my extension, because the cloned one by Chocolatey was not signed anyways.

[jerone]

Haven't tried this, but would it make any difference if I reference the same version of NuGet.Versioning package?

I was constantly trying with the latest version, but I just noticed that DevToys is using an older version 6.9.1.

[veler]

Using the same version should work. But it isn't a future-proof solution as I could update this package anytime and we would end up in the same situation again.

[veler]

Hi @jerone , I created an issue to track this problem #1430
And well... I also found a fix using AssemblyLoadContext :D Giving credits to GitHub Copilot for suggesting this API and providing the code change.
#1431
In the PR description, there's a ZIP that contains a test extension you can use to verify whether it address the issue. Feel free to try with your own extension too :)

[jerone]

I tried it and it works great. 👍

[veler]

Thanks :) If I may, I will close this discussion for now.