API Reference

The script tags for any +client.(js,ts,jsx,tsx) within src can be accessed through the client context variable. This is useful if you are wanting to include a client side script but are not using a page file for your HTML, since the names of these tags will be different after your client application has been built.

For example, if you are using JSX to render the markup for your application you can utilize the client variable to include client side scripts.

Also, the link tags for any css imported into the script will be included.

In development, the tags will link directly to the script.

In production, domco will read dist/client/.vite/manifest.json and use the hashed file names generated from the build.

Param

If routePath is left undefined, the current route’s ./+client.(js,ts,jsx,tsx) will be returned. Otherwise, you can use an alternative routePath to get a different route’s tags.

Example

// HTML example
// src/.../+server.(js,ts,jsx,tsx)

import { Hono } from "hono";
import { html } from "hono/html";

const app = new Hono();

app.get("/", (c) => {
	// gets `./+client.(js,ts,jsx,tsx)`
	const tags = c.var.client();

	// gets `src/route/path/+client.(js,ts,jsx,tsx)`
	const differentTags = c.var.client("/route/path")

	return c.html(html`
		${tags}
		<p>Partial with client side script</p>
	`);
});

export default app;

// JSX example

app.get("/", (c) => {
	return c.html(
		<>
			{c.var.client()}
			<p>Partial with client side script</p>
		</>
	`);
});

page

page: Page

Any +page.html within src can be accessed through the page context variable. This provides the HTML after processing by Vite.

Param

If routePath is left undefined, the current route’s ./+page.html will be returned. Otherwise, you can use an alternative routePath to get a different page.

Example

// src/.../+server.(js,ts,jsx,tsx)
import { Hono } from "hono";

app.get("/", (c) => {
	// gets `./+page.html`
	const page = c.var.page();

	// gets `src/route/path/+page.html`
	const differentPage = c.var.page("/route/path");

	return c.html(page);
});

export default app;

server

server: Server

fetch with the origin set, pass in the local path instead of the entire url.

// src/.../+server.(js,ts,jsx,tsx)
import { Hono } from "hono";

const app = new Hono();

app.get("/", (c) => {
	// dev: fetch("http://localhost:5173/route/path")
	// prod: fetch("https://example.com/route/path")
	const res = await c.var.server("/route/path")

	// ...
});

export default app;

Example

// src/global.d.ts
/// <reference types="vite/client" />
import type { DomcoContextVariableMap } from "domco";
import "hono";

declare module "hono" {
	interface ContextVariableMap extends DomcoContextVariableMap {}
}

Defined in

types/public/index.ts:171

Page()

Page: (routePath?) => string

Prerender: string[] | true

Paths to prerender relative to the current route.

Example

// src/posts/+server.ts
import type { Prerender } from "domco";

// prerender current route
export const prerender: Prerender = true;

// prerender multiple paths relative to the current route.
export const prerender: Prerender = ["/", "/post-1", "/post-2"];

Defined in

types/public/index.ts:142

Server()

Server: (pathname, init?) => MaybePromise<Response>

domco(domcoConfig): Promise<Plugin<any>[]>

Creates domco Vite plugin, add to your plugins array within your vite.config to start using domco.

// vite.config.ts
import { domco } from "domco";
import { defineConfig } from "vite";

export default defineConfig({
	plugins: [domco()],
});

Defined in

plugin/index.ts:31

Edit this page