Skip to content

Reference

@vidact/start

Route definitions, the client, the server handler, and the Vite plugin for Vidact Start.

Vidact Start is split across four entry points: @vidact/start for route modules, @vidact/start/client for the browser, @vidact/start/server for the request handler, and @vidact/start/vite for the plugin.

@vidact/start

defineFileRoute(options)

Creates the Route export of a route module.

OptionTypeDescription
component(props: RouteComponentProps<Data>) => VidactNodeThe route's UI. Must be a named function
loader(context: RouteLoaderContext) => Data | Promise<Data>Runs on the server before rendering; its result becomes loaderData
server.handlersRecord<string, RouteServerHandler>HTTP method handlers, keyed by uppercase method name

RouteComponentProps<Data>

PropTypeDescription
loaderDataDataThe loader's result
paramsRecord<string, string>Dynamic segments; the catch-all remainder is under '*'
requestUrlstringThe current request URL
childrenVidactNodeThe matched child route, in layouts

RouteLoaderContext

FieldType
paramsRecord<string, string>
requestRequest
parentDataRecord<string, FrameworkValue> keyed by ancestor route ID

RouteServerContext

{ params, request }. Handlers return a Response or a promise of one.

Renders an <a> that navigates client-side after hydration.

PropDescription
hrefTarget URL, required
replaceReplace the history entry instead of pushing
reloadDocumentLet the browser perform a full navigation

All other props are passed to the anchor.

Router helpers

matchRoutes, createRouteManifest, runRouteLoaders, and related functions are exported for advanced use and for tests. Their signatures follow the types above.

@vidact/start/client

hydrateStart(options)

Hydrates the current page and installs navigation handling. Resolves to a StartClient.

OptionDefaultDescription
manifestrequiredThe route manifest from virtual:vidact-start/routes
rootdocumentWhere to look for the root element
rootId'vidact-start-root'ID of the element containing the app HTML
snapshotId'vidact-start-snapshot'ID of the <script type="application/json"> holding loader data
snapshotread from DOMOverride the snapshot text
fetchglobalThis.fetchUsed for navigation requests

StartClient

MemberDescription
navigate(to, options?)Navigate to a URL. Resolves true when applied, false when cancelled. Options: replace, scroll
replace(component)Replace the route root with an arbitrary compiled application
unmount()Remove listeners and dispose the root

@vidact/start/server

createStartHandler(options)

Returns (request: Request) => Promise<Response>.

OptionDefaultDescription
manifestrequiredThe route manifest
clientEntrynoneURL of the client script to include in the document
renderDocument(context)built-in templateProduce the full HTML document
notFound(request)404 text responseCalled when no route matches
rootId'vidact-start-root'ID for the root element
snapshotId'vidact-start-snapshot'ID for the snapshot script

The handler serves route components on GET and HEAD, dispatches other methods to server.handlers, and answers navigation requests (identified by a request header) with a snapshot instead of a document.

renderDocument context

ts
{  applicationHtml: string   // the rendered route tree  clientEntry: string | undefined  rootId: string  snapshot: string          // JSON, already escaped for a <script> element  snapshotId: string}

Your template must place applicationHtml inside an element with id={rootId}, and snapshot inside <script id={snapshotId} type="application/json">, and load clientEntry as a module. Do not decode or transform the snapshot.

@vidact/start/vite

vidactStart(options)

Returns the Vite plugins for a Start project.

OptionDefaultDescription
routesDirectory'src/routes'Where to discover routes
serverEntry'src/server.ts'Module whose default export is the request handler for vite dev; false disables the dev middleware
serverExport'default'Export name of the handler in serverEntry
compiler{}Options passed to @vidact/vite, except target, which Start controls

The framework feature is always enabled. Pass additional features through compiler.features.

virtual:vidact-start/routes

A generated module exporting routeManifest, built from the routes directory. Import it in the client entry and the server handler.

Constants

VIDACT_START_NAVIGATION_HEADER and VIDACT_START_SNAPSHOT_MEDIA_TYPE identify navigation requests and responses, for tests and proxies.