vite-plugin-bruh
v0.6.0
Published
A vite plugin to integrate with bruh
Downloads
9
Readme
vite-plugin-bruh - A vite plugin to integrate with bruh
Install
npm i -D vite-plugin-bruh or use npm init bruh with the vite template to quickly get started.
Use
Example vite.config.mjs file:
import { defineConfig } from "vite"
import bruh from "vite-plugin-bruh"
export default defineConfig({
plugins: [
bruh({
// Regex for the page render file extention
// Defaults to /\.html\.(mjs|jsx?|tsx?)$/
htmlRenderFileExtention,
// Absolute path of the root pages directory
// Defaults to vite's root
root,
// Options for the MDX compiler (xdm)
// Documentation at https://github.com/wooorm/xdm#compilefile-options
// e.g. for adding syntax highlighting by setting to { rehypePlugins: [ await import("@mapbox/rehype-prism") ] }
xdmOptions
})
]
})This allows you to use the typical vite for development and vite build for production.
vite-plugin-bruh will automatically allow you to prerender html files before vite sees them.
Here is an example project structure:
.
├── index.css
├── index.html.jsx
├── index.mjs
├── package-lock.json
├── package.json
└── vite.config.mjsHow it works
Upon a page request for /x in dev:
- The
x.html.mjs(orx/index.html.mjs,...js/jsx/ts/tsx) file is imported - The default export is called and
awaited - The returned string is exposed to vite as if it were from
x.html(orx/index.html)
At build time, all x.html.mjs files are automatically included as entry points (as if they were x.html)
If this is index.html.mjs:
export default async () =>
`<!doctype html>
<html>
<head>
...
</head>
<body>
...
</body>
</html>
`Vite sees this as if index.html existed and contained:
<!doctype html>
<html>
<head>
...
</head>
<body>
...
</body>
</html>During dev, vite will automatically and quickly reload the page as index.html.mjs and its imports are edited.
JSX/TSX
This plugin automatically includes jsx support for bruh, meaning that you can freely write jsx content in both
render files (x.html.jsx) and hydrate files (x.jsx, what vite typically handles).
Current Caveats
For MDX support, there is a workaround that replaces (in mdx files) any className strings with class.
You probably won't run into that problem before it is fixed in a more correct way, but it can be solved
by just writing "class" + "Name", "class\u004eame", className or something similar.