Vite Integration and Document Ownership
Use vite integration and document ownership with the current published Askr packages.
@askrjs/vite0.0.7
How to use vite integration and document ownership
Install the Askr Vite plugin once and keep the HTML document owned by the selected SPA, SSR, or SSG entry instead of generating competing shells.
- Import the published @askrjs/vite entrypoint.
- Keep vite integration and document ownership configuration next to the component, route, or server composition root that owns it.
- Handle pending, unavailable, cancellation, and failure states, then verify the production path.
import { askrVitePlugin } from '@askrjs/vite';
import { defineConfig } from 'vite';
export default defineConfig({
plugins: [askrVitePlugin()],
});Askr Vite plugin
askr() from @askrjs/vite is the entry point every Askr app needs in vite.config.ts. It accepts an optional options object with three booleans -- transformJsx, optimizeTemplates, and ssrPrecompile -- and returns a plugin object whose only publicly-typed field is name: 'askr:vite'. That minimal public type is deliberate: keeping Vite's own (recursive, versioned) Plugin type out of the shipped declarations avoids type-identity conflicts when something like vite-plus compares plugin instances across separately-installed Vite versions.
Browser build
On the client side, the plugin's job is applying Askr's JSX and template transforms so a normal Vite dev server and build pipeline understand Askr syntax without any other configuration. You install it alongside vite and @askrjs/askr (npm install -D @askrjs/vite vite, npm install @askrjs/askr) and add plugins: [askr()] to a standard defineConfig call -- there's no additional loader or babel config required.
Server entry
askrServer({ entry, exportName?, indexHtml? }), imported from the @askrjs/vite/server subpath, wires up the SSR side: entry points at your server entry module (for example src/server/entry-server.ts), and the plugin composes the app's rendered response against your HTML document template. Like the browser plugin, its published type only exposes name: 'askr:server' publicly, for the same cross-Vite-version type-identity reason.
Document ownership
Vite is the sole owner of the HTML document at runtime: a server-rendered template must contain exactly one <!--askr-head--> marker inside <head> and one <!--askr-app--> marker inside the app root, and the server plugin validates both are present before it will patch anything. It preserves any application-authored head content you already have, injects only normalized Askr-owned title/meta/link/JSON-LD nodes at the head marker, patches the existing html element's lang and dir attributes, and streams the composed response between the template's prefix and suffix without buffering the full body -- and none of the internal coordination headers it uses for that composition are ever sent to the browser.