Add browser target
Currently, running Vento in the browser requires workarounds such as polyfills or using JSR to fetch raw TypeScript files and handling the build process on the bundler side.
The core of Vento is easy to adapt for browsers. But there are other features that are more challenging, unless they are disabled for browsers:
- Loaders: The default file loader of Vento use's Deno's filesystem functions to read files from the disk. We can disable loaders for browsers (to only render strings templates, but without
include,layoutorimporttags) or create a specific loader for browsers that usesfetch. - Transformer: Vento uses some dependencies like
meriyahto resolve automatically the variables (converting{{ varname }}to{{ it.varname }}). This feature can be removed for browsers, because it's just a syntax sugar, and it would reduce significantly the size of the library). - The default filters
escapeandunescapeusesjsr:@std/htmldependency. But this is a simple function that could be implemented directly in Vento so we can remove this dependency.
- would reduce significantly the size of the library
Will add Bundle size is 16.3 kB -> 5.94 kB (gzip) In reason of it tree-shakable and vento does not use the all meriyah lib.
Details here https://bundlejs.com/?q=meriyah%406.0.5&treeshake=%5B%7B+astring%2CESTree%2Cmeriyah%2Cwalker+%7D%5D
And full vento size based on npm.
Fun fact Deno shim that does not needed for browser use more space that meriyah
Will add Bundle size is 16.3 kB -> 5.94 kB (gzip) In reason of it tree-shakable and vento does not use the all meriyah lib.
Ok, we can try, although 16Kb in browser is not so little.
So i thought the best way to do it for now. It publish another npm package for browser. Because browser does not need deno shims, when nodejs need it.
I close this because Vento 2 is 100% compatible with browsers without compilation.