Build Tool Plugin
@dathra/pluginprovides build tool plugins viaunplugin. It
integrates Dathra's JSX transformer into your build pipeline.
For exact plugin option signatures, see the Plugin API Reference.
Vite
Vite is the primary documented setup. Use CSR mode for browser-only apps and SSR mode when the dev server should call a Dathra server entry.
CSR
ts
import { dathraVitePlugin } from "@dathra/plugin";
import { defineConfig } from "vite";
export default defineConfig({
plugins: [
dathraVitePlugin({
mode: "csr",
}),
],
});SSR
ts
import { dathraVitePlugin } from "@dathra/plugin";
import { defineConfig } from "vite";
export default defineConfig({
plugins: [
dathraVitePlugin({
mode: "ssr",
ssr: {
entry: "/src/entry-server.tsx",
},
}),
],
});Webpack
The package also exposes unplugin adapters for other bundlers. Keep the same modeoption, but wire SSR server behavior according to that bundler's own
server integration model.
js
import { dathraWebpackPlugin } from "@dathra/plugin";
// webpack.config.js
module.exports = {
plugins: [dathraWebpackPlugin({ mode: "csr" })],
};Rollup
ts
import { dathraRollupPlugin } from "@dathra/plugin";
export default {
plugins: [dathraRollupPlugin({ mode: "csr" })],
};esbuild
ts
import { dathraEsbuildPlugin } from "@dathra/plugin";
import esbuild from "esbuild";
esbuild.build({
plugins: [dathraEsbuildPlugin({ mode: "csr" })],
});Options
ts
type PluginOptions = {
mode?: "csr" | "ssr"; // render mode, defaults to "csr"
include?: string[]; // defaults to [".tsx", ".jsx"]
exclude?: string[]; // path substrings to skip
runtimeModule?: string; // defaults to "@dathra/core"
ssr?: false | {
entry: string; // SSR entry point for dev server
outlet?: string; // HTML placeholder to replace
renderExport?: string; // entry export to call
};
};Universal Plugin
Use thedathra()factory for a framework-agnostic unplugin instance:
ts
import { dathra } from "@dathra/plugin";
const plugin = dathra({ mode: "csr" });
// Works with any unplugin-compatible bundlerTypeScript Settings
Dathra's transformer must receive JSX syntax from the build pipeline. Configure TypeScript
to preserve JSX and point JSX types at@dathra/core:
json
{
"compilerOptions": {
"jsx": "preserve",
"jsxImportSource": "@dathra/core"
}
}