Question: Bundling / vsce Error

[AwooOOoo]

Hi, I am adding support for the 'Tang Primer 25k' and am trying to get the bundling working to make it easier to test, but am not having much luck. Could you please document the bundling process.

To pull in the dependencies I first ran; >npm install --include=dev

From looking at the package.json I should just have to run 'npm run bundle', which errors with the following

> npm run bundle
> lushay-code@0.0.22 bundle
> vsce package

Executing prepublish script 'npm run vscode:prepublish'...

> lushay-code@0.0.22 vscode:prepublish
> npm run compile

> lushay-code@0.0.22 compile
> tsc -p ./

 ERROR  Extension entrypoint(s) missing. Make sure these files exist and aren't ignored by '.vscodeignore':
  extension/out/extension.js

This is strange since in package.json the entrypoint is defined.

"main": "./out/extension.js",

I just want the .vsix file to install / test, but the vsce packaging errors out the same way.

My setup

>node --version
v20.16.0
>npm --version
10.8.2
>vsce --version
2.15.0

I saw that VSCE wasn't included in the "devDependencies" in package.json, and saw it mentioned in a few references, but didn't have luck with a few other versions either.

I ran across a few similar issues

• [ERROR: Extension entrypoint(s) missing. Make sure these files exist and aren't ignored by '.vscodeignore': extension/dist/extension.js](https://stackoverflow.com/questions/74924411/error-extension-entrypoints-missing-make-sure-these-files-exist-and-arent-i

• [ERROR Extension entrypoint(s) missing while I'm trying to package a developed vscode extension with vsce](https://stackoverflow.com/questions/71686135/error-extension-entrypoints-missing-while-im-trying-to-package-a-developed-vs)

I assume it is something simple, but it has eluded me for the last few hours, so I'd appreciate some guidance.

[AwooOOoo]

Ok.... I have a solution.

Based on Tyler2P's comment in this thread, I tried doing the bundling in a node container and it worked, seeming to indicate an installation mismatch.

The container used the latest versions of everything, so

node --version v22.6.0 npm --version 10.8.2 vsce --version 2.15.0

The only difference being I had v20.16.0 of node (latest bundled with the Ubuntu package manager). I removed that and reinstalled the latest from the command line and now it all compiles and bundles.... finally

[lushaylabs]

Hi, that sounds really cool, thank you for your contribution

Regarding the build issues, I'm not sure, I am using node v18 so it's hard to say why it wouldn't work on v20 but would work with v22 again. But maybe reinstalling node fixed something.

Usually when developing I don't bundle the plugin, but rather run it from within vscode which opens a secondary window where you can test "live" and then I only usually create a bundle when I test on other systems / OSs before a release.

The launch.json file inside the .vscode folder has a profile to run the extension which you can access via the "Run & Debug" sidebar icon (ctrl-shift-D I think is the shortcut to get to the panel). In this mode you have the console from the editor repo plus the console from the "test" vscode window to debug what's going on and breakpoints also work.

When editing webviews like the constraints editor or module debugger you can access them / debug them from the developer tools in the "test" vs code window, and for debugging the rest of the code its from the terminal in the main vscode window (where the code for this plugin is)

Once ready I bundle a new version for testing on other machines and the bundles vsix is then deployed to the marketplace manually

I will document the development and bundling process as you mentioned in more detail in this repo

[AwooOOoo]

Thanks for the hints about testing, I'll give it a go. I have no idea why a newer version of node effected vsce. I'd tried reinstalling it a few times to no avail.

A question, for making the .png's in the webview-js directory for the different boards. Is there a specific process / toolchain you use to make those? For instance are you taking board designator diagram or 3d model from sipeed's site and do a specific set of steps, is it to a specific scale?

[lushaylabs]

I use top-down photos to recreate it in a vector tool (I use Sketch for Mac specifically) but basically, I place the reference photo down and then draw the board using rounded rectangles to block out the main shape and cut out any holes/pins.

This step is pretty ok, by setting the opacity of the layer down makes it easier to trace them out. I don't copy everything, just the main ICs and any identifying connectors so its easier to recognize

I usually start without color, using a 600x259 final image size, and position circles on each pin to get the position for the map inside the code (to be able to select pins in the pin selector)

This is the part that takes the most time, finally colors just to better match the board

If by any chance you are using sketch I can share the files, or if you have a different vector application I can try and export an eps or pdf if it will help.

This is also just my process, any image around this size (600x259) should work, and the main thing is having the pins big enough so that when the plugin adds the checkboxes in the 'pin selector' they won't overlap.

If you need help with any of the steps feel free to ask

[AwooOOoo]

I'm currently working upstream in Apicula (https://github.com/AwooOOoo/apicula/tree/5A-support) to add the 5A support and then I'll circle back so I can make the plugin work =)

[AwooOOoo]

While I'm thinking of it, the tang primer 25k has 3 connectors for PMOD extensions that extend at 90 degrees. Should we also include a side view for selecting those pins, or just the bare board (but then you need remember the inner pins connect to the top row etc)? image credit: sipeed

[lushaylabs]

Yeah, thats a pretty cool idea. Maybe it can highlight the entire pmod as a single choice and when clicking on it it will open a sub-selection of which pin inside if you want to select pins individually.

It can also open up the option of using the "templates" to connect ready-made pmod devices to the entire slot without hardcoding them to a specific pin like the templates works today. For example when you click on a pmod on the second "zoom-in" page of the pmod it can have it's own templates. This would allow you to reuse the definition of the pmod itself (like the pins of the tf card pmod) but still move them around to different slots

what do you think?