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.mjs

How it works

Upon a page request for /x in dev:

The x.html.mjs (or x/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 (or x/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.

Keywords

FAQs

What is vite-plugin-bruh?

Is vite-plugin-bruh popular?

Is vite-plugin-bruh well maintained?

Package last updated on 24 Oct 2021

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

vite-plugin-bruh

Install

Use

How it works

JSX/TSX

Current Caveats

Keywords

Related posts

Linux Foundation Warns Open Source Developers: Compliance with Sanctions Is Not Optional

Maven Central Adds Sigstore Signature Validation