- Hello, welcome to ViteConf 2024. I'm Johnson Chu, the creator of Volar. js.
On volarjs. dev, it says that Volar is the embedded language tooling framework. Today, I will talk about how Volar.
js works. Volar is a framework for building language tools that can support any embedded language for any online framework in any environment. Currently, Volar has been widely adopted, and many useful language tools has been built based on it.
We have made many improvements over the past 20 months for this. Now, let me show you how Volar achieves this capability through its architecture. This diagram shows the module relationships of Volar.
The language core module is the most fundamental module, used to control these language applications. The language service module encapsulates the handling of embedded codes, and exposes language filters APIs based on LSP types. It is used to control this language service application.
Finally, front-end frameworks can use language application and language service application to build their language tools. You can see the plugin layer before the language core module which defines the capability to handle embedded language for all downstream modules. In the language plugin layer, the language tool needs to define the visual code's transformation and mapping method based on the Volar language plugin interface.
In the gray whistle code hook, you can deconstruct a language that a downstream module does not recognize into readable language visual code and mapping that downstream modules do recognize. This provides Volar with enough information to part language filters and handle further mapping issues. In the LSP and TS plugin, there is no direct way to load the language ID of a file that has not been synchronized to the language server.
Returning a different language ID for recognized file extension in get language ID hook helps downstream language applications correctly handle files that are not open in IDE. Now, let's look at the language application layer. The Volar language module accepts multiple language plugins as a parameter and returns scripts and mass properties.
The scripts property provides an interface to query the relationship between the source code and the visual code. The mass property provides the mapping functionality between the source code and the visual code. This gives language applications the ability to handle embedded language.
In the language service plugin layer, Volar improvement the language service plugin interface for each available embedded language through a glue layer. Through the language service plugin interface, the Volar language service can add language filters for any embedded language in a pluggable manner. Implementing and maintaining the glue layer for third-party libraries require a lot of work, but the Volar team has already done it for you.
In the language service glue layer, Volar integrated language service API for each useful use case and packaged them into a more user-friendly library, including LSP, SIR2, Monaco, et cetera. Finally, in the integration layer, Volar modularizes each use case and exposes easy to use APIs. Volar's modularization is carefully designed.
You don't need to worry about package dependency relationship. This diagram greatly simplified the work done behind the integration. Like Erica said, this is work that you don't need to care about and don't want to care about.
If you have searched for LSP on Google, you have probably seen the image above, which clearly shows how LSP effectively reduces repetitive work in software engineering. Volar. js was created for similar reasons, but goes a step further.
In addition to solving the repetitive work of implementing embedded language support, we are also adjusting the repetitive work of implementing a complete tool chain for financing work. We are gradually moving toward the reason of improving the DS of the entire finance ecosystem. There is even a chain ware ecosystem and relating to the funding of benefiting from Volar.
Finally, I want to say thank you to my sponsor. A special big thanks to StackBlitz, who have unconditionally fund my full-time development of Volar. js for the past 20 months.
They have never made any demands or exerted any pressure on me. I'm very grateful for their trust in my work and research. The progress Volar has made was unimaginable a year ago.
Similarly, I cannot predict what will happen a year from now. So I look forward to talk about Volar review again this year. Thank you for watching this talk and see you next time.
