Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add browser target #100

Open
rougsig opened this issue Feb 26, 2025 · 5 comments
Open

Add browser target #100

rougsig opened this issue Feb 26, 2025 · 5 comments

Comments

@rougsig
Copy link
Contributor

rougsig commented Feb 26, 2025

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.

@oscarotero
Copy link
Member

oscarotero commented Feb 26, 2025

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, layout or import tags) or create a specific loader for browsers that uses fetch.
  • Transformer: Vento uses some dependencies like meriyah to 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 escape and unescape uses jsr:@std/html dependency. But this is a simple function that could be implemented directly in Vento so we can remove this dependency.

@rougsig
Copy link
Contributor Author

rougsig commented Feb 26, 2025

  • 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

@rougsig
Copy link
Contributor Author

rougsig commented Feb 26, 2025

And full vento size based on npm.

Fun fact
Deno shim that does not needed for browser use more space that meriyah

Image

@oscarotero
Copy link
Member

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.

@rougsig
Copy link
Contributor Author

rougsig commented Mar 11, 2025

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants