@rantingjs/vite

The Vite plugin of ranting apps. It builds the browser entries into public/build with the manifest <Vite> reads, points pages at the dev server while it runs, reloads them when server views change, versions static files for Vite.asset() and self-hosts fonts for <Fonts />. The fullstack and auth templates come with it, and with Tailwind CSS v4:

// vite.config.ts
import ranting, { bunny } from '@rantingjs/vite';
import tailwindcss from '@tailwindcss/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    ranting({
      input: ['assets/css/app.css', 'assets/js/app.ts'],
      refresh: true,
      fonts: [bunny('Instrument Sans', { weights: [400, 500, 600] })],
    }),
    tailwindcss(),
  ],
});

// src/views/layouts/app.tsx
<head>
  <Fonts />
  <Vite entry={['assets/css/app.css', 'assets/js/app.ts']} />
</head>

Development and production

• bun run dev (ranting dev) starts Vite's dev server beside the app. The plugin writes its address to public/hot (and removes it on exit); while it exists <Vite> links @vite/client and the entries from there, and URLs in served CSS and JS point at it. CSS and modules update in place; with refresh a change to a server view reloads the page.
• bunx ranting build runs vite build into public/build, with manifest.json, and then builds the server. The app serves those files, cached for good: their names carry a hash of their content. ASSET_URL in .env puts them on a CDN (the build's base, and the URLs <Vite> writes).
• @ imports from assets/js (import '@/charts.ts').

Options

| Option | Default | | |---|---|---| | input | | The entries, as <Vite entry> names them. A string or a list also works in place of the options. | | publicDirectory | public | The app's public folder. Vite neither copies nor serves it: the app does. | | buildDirectory | build | Where builds go inside it, served at /build/. | | hotFile | public/hot | Written while the dev server runs. | | refresh | false | Reload the page when these change: true for src/views/**, src/modules/**/*.tsx and src/lang/**; globs; or { paths, config: { delay, waitForApp, log } }. A change under src/ waits until the restarted app answers again. | | assets | | Static files to version, for Vite.asset('assets/images/logo.png'): ['assets/images/**', 'assets/fonts/**']. | | fonts | | Fonts to self-host, see below. | | transformOnServe | | (code, devServerUrl) => code: rewrite served code, for plugins that need the dev server's address. | | modules | true | Build the feature modules' assets too: src/modules/*/assets/{css,js}/app.* are entries (<Vite module="shop" entry="assets/js/app.ts" />), assets/images and assets/fonts are versioned for Vite.asset(). A module module:disable turned off is left out. |

Fonts

import { bunny, fontsource, google, local } from '@rantingjs/vite';

fonts: [
  bunny('Instrument Sans', { weights: [400, 500, 600] }),                      // fonts.bunny.net
  google('Inter', { alias: 'sans', subsets: ['latin'], fallbacks: ['system-ui', 'sans-serif'] }),
  fontsource('JetBrains Mono', { alias: 'mono' }),                             // bun add -d @fontsource/jetbrains-mono
  local('Brand Sans', { alias: 'brand', src: 'assets/fonts/brand-sans' }),     // weight and style from the file names
]

Remote fonts are downloaded once at build time (cached in node_modules/.cache/ranting-vite/fonts) and served by the app like the other built files, so pages make no request to the font provider. Each font gets a CSS variable (--font-instrument-sans, or --font-<alias>) and a class (.font-instrument-sans); point Tailwind at it with @theme { --font-sans: var(--font-instrument-sans), ui-sans-serif, system-ui, sans-serif; }. <Fonts /> writes the @font-face rules and preloads the woff2 files (preload: [{ weight: 400 }] picks which; false for none). With fontaine installed (bun add -d fontaine) each font also gets a local fallback face sized like it, so text does not move when the font arrives (optimizedFallbacks: false turns it off). Other options: weights, styles, subsets, display (swap), variable.

Builds write fonts.css and fonts-manifest.json into public/build; the dev server serves the files itself and writes public/fonts-manifest.dev.json.