vite-plugin-vanjs

A mini meta-framework for VanJS developed around the awesome vite and tested with vitest. The plugin comes with a set of modules to streamline your workflow:

• @vanjs/router - one of the most important part of an application which allows you to split code and lazy load page like components with ease, handles both Client Side Rendering (SSR) and Server Side Rendering (CSR) and makes it really easy to work with;
• @vanjs/meta - allows you to create metadata for your pages as well as load additional assets with ease;
• @vanjs/jsx - enables JSX transformation with automatic namespace resolution;
• @vanjs/setup - enables loading VanJS modules isomorphically;
• @vanjs/server - provides various tools for Server Side Rendering (SSR);
• @vanjs/client - provides various tools for Client Side Rendering (CSR).

Install

npm install vite-plugin-vanjs@latest

pnpm add vite-plugin-vanjs@latest

deno add npm:vite-plugin-vanjs@latest

bun add vite-plugin-vanjs@latest

Wiki

For a complete guide on how to use the plugin, be sure to check the wiki:

• Quick Start: the right place to get started;
• Routing: a complete guide on how to configure routing;
• Metadata: the quick guide to help you manage your app meta tags;
• JSX: a complete guide on how to use JSX transformation;
• Isomorphic: a quick guide on isomorphism in VanJS;
• Hydration: a quick note on how the plugin handles hydration;
• About: some note on the project.

Notes

• The plugin will automatically load the appropriate Van or VanX objects depending on the client/server environment with zero configuration needed. It uses the mini-van-plate/shared module to register the required mini-van-plate/van-plate on the server.
• Also in development mode, the plugin will load the van.debug.js module to help you better troubleshoot your VanJS application. However JSX transformation is not compatible with the van.debug.js module.
• The plugin uses van-ext along with mini-van-plate so you can have everything ready from the start.
• Kickstart your VanJS project with npm create vanjs@latest. Some starter templates feature this plugin and most essential tools.

Credits

• van-jsx a simple Vanilla JSX implementation;
• vanjs-jsx the official VanJS addon;
• surplus for Typescript definitions also used by SolidJS;
• inferno also for typescript definitions.

License

Released under MIT.