Is there a way to write in VS Code and Preview in the Browser?

[tonyhschu]

I've been using JSCAD and JSCAD now (See: https://github.com/danmarshall/jscad-now) as a workflow, which allows me to write in VS Code in one window, and preview what I'm working on in a different browser window. I'm getting poor results with boolean operations in JSCAD, it's giving me non-manifold edges, which led me to this project.

So .... Is there something similar I can do with ManifoldCAD? VSCode integrates nicely with co-pilot and git, which is very helpful for developing larger projects. I understand that I can do this locally with Jupyter, but I'm primarily a Typescript user -- and at any rate Jupyter doesn't allow me to access co-pilot either.

[elalish]

Funny you should mention this: I was just suggesting to @pca006132 that we should author a VSCode extension that uses largely the same code base as ManifoldCAD.org. This would have several benefits beyond just the workflows you mentioned: nice filesystem support for importing and exporting meshes and libraries (a la OpenSCAD modules), auto-formatting and other editor niceties, and discoverability (via their store).

Time being limited, I would love a collaborator. I don't suppose you know anything about authoring a VSCode extension by chance? At least it's all TS.

[elalish]

Yes, for worker.ts. However, the HTML is https://github.com/elalish/manifold/blob/3b8282e1d5cd3d6f801432e4140e9b40f41ecbf6/bindings/wasm/examples/index.html; three.html is an unrelated example. You'll also want editor.js: https://github.com/elalish/manifold/blob/3b8282e1d5cd3d6f801432e4140e9b40f41ecbf6/bindings/wasm/examples/editor.js, though we probably won't need all of it - the Monaco stuff can be factored out to a file that only ManifoldCAD.org uses, since VSCode already has the editor.

The Monaco stuff, especially where we inject our TS library declarations, is the main reason that file is still JS - once that's removed it should be a lot easier to convert it to TS. Have you managed to get Vite running to serve a local dev instance of ManifoldCAD.org? Once you have that working it should be pretty easy to poke around and see how it's put together.

[tonyhschu]

Sorry I haven't had a lot of time to look into this. I'm not very familiar with C or WASM, so I'm getting stuck here:
emcmake cmake -DCMAKE_BUILD_TYPE=Debug .. && emmake make in this README

What's emmake? Is that just a typo of emcmake? Assuming that it is ... the next error I ran into looks like this

emcmake: error: 'make -DCMAKE_TOOLCHAIN_FILE=/opt/homebrew/Cellar/emscripten/3.1.51/libexec/cmake/Modules/Platform/Emscripten.cmake -DCMAKE_CROSSCOMPILING_EMULATOR=/opt/homebrew/opt/node/bin/node' failed (returned 2)

I'm on a M2 Mac. I ran the cmake command in the root readme without issue. I have done the brew install nodejs and brew install emscripten as well.

[elalish]

Not a typo - normally you run cmake to create the make files, then make to build the executable. The emscripten versions just put "em" in front of both commands. Does it work as written?

[pca006132]

I think for the vscode extension, it is fine to open another repo and use npm, so there is no need to build manifold by yourself.

[elalish]

Oh yeah, good call.

[tonyhschu]

Ok sounds good. I'll keep digging on the vscode extension front.

[tonyhschu]

Hey @elalish & @pca006132,

I dug into writing a VSCode extension a bunch - it felt like a lot of overhead. I went back and tried the npx command approach. Here's a very barebones prototype: https://github.com/tonyhschu/manifold-live

I still don't thoroughly understand how everything in worker.ts works, but I pulled together enough bits and pieces to have the following:

1. A nodejs server that serves a static HTML file
2. The server listens for changes to a target .ts file, and when a change occurs...
3. Imports the .ts file as a module, and gets the manifold object that results.
4. Writes a .glb file locally
5. The HTML, noticing a new timestamp on the server, refreshes itself and loads the new .glb.

It does roughly what I had set out to do, i.e. be able to write code on one screen, and see the result in the browser in a live-reload like manner. I would love guidance regarding the following:

1. How to wire up the code from worker.ts properly so that the animation, etc. also work.
2. Any advice on the module importing side -- I'm using ts-import which seems ... ok?

[elalish]

If you're using an unmodified worker.ts, you probably have animation export working fine. I'd guess you just need to grab the animation controls from editor.js and hook them up with your index.html.

I like the sound of importing your live code as a TS module and running it. This will be key to allowing ManifoldCAD to use libraries, like OpenSCAD modules. I'll be interested to see how that works.

Can you give me any details of what you learned of VSCode extensions? It's unfortunate if there's a bunch of overhead, but I think that's the direction that makes more sense from a packaging and usability perspective.