‹div›RIOTS Tools

‹div›RIOTS are makers of online studios dedicated to Design Systems and Components. We use the Vite project in the rendering process of the built-in preview in the editor itself.

Vite for Browser ⚡

This is a fork of vite which aims at being used in a browser (served by service worker).

Here are the changes made, required to run it in the Browser:

Generate an un-bundled browser build: rollup.config.js#L218-L274
- avoids duplicate dependencies in App using it
- prefers browser alternatives for dependencies
Shim CLI-only dependencies (chalk,debug...): rollup.config.js#L470-L477
Limit FS dependency
- remove watch/glob/config
- but keep resolving project files through FS (will be shimmed in-App)
Remove serve
Remove dependency handling/optimizing/resolving
- handled in-App through custom plugins
- using a service to generate/serve optimized dependencies (see below)

Another change was made to support running the dependency optimizer as a service:

Parse CJS exports (using cjs-module-lexer) to avoid the es-interop transform (further de-coupling vite & optimizer): #8e80d8

That's all folks ! Below is upstream README !

Vite ⚡

Next Generation Frontend Tooling

💡 Instant Server Start
⚡️ Lightning Fast HMR
🛠️ Rich Features
📦 Optimized Build
🔩 Universal Plugin Interface
🔑 Fully Typed APIs

Vite (French word for "fast", pronounced /vit/) is a new breed of frontend build tool that significantly improves the frontend development experience. It consists of two major parts:

A dev server that serves your source files over native ES modules, with rich built-in features and astonishingly fast Hot Module Replacement (HMR).
A build command that bundles your code with Rollup, pre-configured to output highly optimized static assets for production.

In addition, Vite is highly extensible via its Plugin API and JavaScript API with full typing support.

Read the Docs to Learn More.