After a couple of simple VS Code and Theia based demo applications, I officially published my first productive extension recently. ODX Commander is a simple editor and navigator for large diagnostic data sets in Open Diagnostics eXchange format. The tool hopefully helps the one or the other person working in the automotive industry to survive the working day.
Category Archives: HTML 5
From Theia to VS Code and back again
After upgrading all Theia dependencies to version 1.5 the URDF extension unfortunately no longer worked as expected. After a little research I stumbled about this inconspicuous information in the 1.4 release notes:
@theia/languages
extension is deprecated, use VS Code extensions to provide language smartness
To avoid finding myself in a technical dead end again, I decided to rewrite the designer as a pure Visual Studio Code extension instead. As you might already know, Theia was designed to run VS Code extensions from the beginning. Amongst other things, implementing VS Code extensions provides the following benefits:
- Better documentation and developer experience
- VS Code extensions can be used both in Theia and VS Code
- Integration in Che and Gitpod
- More sophisticated API
On this occasion I also dropped the heavyweight XText and Spring based LSP server gadgetry. This keeps things more simple and using just declarative language features might be adequate for most scenarios.
Thanks to the excellent documentation, rewriting the extension was fun and relatively straightforward. Only bringing the Babylon.js based renderer into a Webview was a little bit fiddly. Below you see the final result installed in Visual Studio Code.
I published the code together with a sample workspace comprising two simple robots on Github. Checkout the workspace and install the released extension if you wanna see it in action. However before doing that, better read about the Gitpod integration first!
After I have rewritten the URDF application in Visual Studio Code, I wanted to bring it back into Theia. According to this comparison, Theia roughly estimated implements 90% of VS Code’s public API.
In theory using the released Visual Studio Code extension in Theia is as simple as adding a single line in the package.json:
"theiaPlugins": { "vscode-builtin-xml": "https://github.com/theia-ide/vscode-builtin-extensions/releases/download/v1.39.1-prel/xml-1.39.1-prel.vsix" }
However in practice I had some minor issues with unsupported API, URI.joinPath(), Extension.extensionUri(), ExtensionContext.extensionUri() just to name a few, that I could work around using already supported API.
After that unproblematic modifications, now the plugin runs in Theia again. I still have some problems with context sensitive buttons and rearranging the preview window behaves slightly different. Anyway good enough for the moment and as you can see below, both applications look almost identical.
Whilst the period in which I have implemented this demo, the first version of Gitpod was released. This blog post perfectly describes what Gitpod exactly is:
Gitpod is an online IDE which can be launched from any GitHub page. Simply prefix any GitHub-URL with “https://gitpod.io#” or use out browser extension that adds a button to GitHub pages.
It turned out that Gitpod (right now) only supports VS Code compatible extensions. To be honest, another reason for me to rewrite the extension again.
Since Gitpod’s integrated IDE is based on Theia, all Visual Studio Code extensions running in Theia can be reused in Gitpod too. The installation is amazingly simple. The image below shows the extension running in Gitpod. If you have a valid Github account, just follow this link to see it online.
Conclusion
What have I learned so far? Theia’s proprietary extension API is challenging and nothing I’d recommend to start with. The documentation is minimalistic and the API might still change over time as happened when dropping @theia/languages.
So better start implementing your application by writing Visual Studio Code extensions. I guess Theia is supposed to implement the entire VS Code API in the long term. In the short term, try to avoid latest VS Code features and check Theia for compatibility every now and then. Theia in combination with Gitpod is great and you should definitely give it a try. Hopefully the team can keep up the pace with Microsoft’s monthly release cycle. If not, or the project is stopped one day, you can still use VS Code or VSCodium instead!
All good things …
This post has nothing to do with programming in general, but since my 40th birthday is coming closer and closer I think it’s a good time to conserve some work of my childhood here.
More than 25 years ago I read an interesting book containing a chapter with blueprints of wooden cube puzzles. After building multiple puzzles by means of the pictured blueprints, I decided to design my own. Unfortunately the original version made of wood got lost over time. Since I needed a playground project to start with babylon.js I created a digital version. Here is the result:
The live version is hosted on Orionhub, source and Blender model can be found here.
The cube is not perfectly symmetrical. Anyway I think it looks pretty cool. And of course I can definitively not guarantee whether this puzzle was not already designed by someone else:) Let me know if you have seen it before, thanks!