A Vite plugin to rewrite HTML tags.
// vite.config.js
import { defineConfig } from 'vite';
import rewriteHTML from 'vite-plugin-html-rewrite';
export default defineConfig({
plugins: [
rewriteHTML([
{
match: (element) => element.name.startsWith('php-'),
render({ name, ...elementDetails }) {
return `<?php do_something('${name}', '${JSON.stringify(
elementDetails,
).replaceAll("'", "\\'")}}$'); ?>`;
},
},
]),
],
});<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<php-header variant="dark" size="big">
<a href="/">Home</a>
<a href="/about">about</a>
</php-header>
<div>Here some ordinary content.</div>
<php-footer src="src/partials/footer" />
</body>
</html>This will result in a dev and runtime generated index.html looking like
<!-- generated index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<?php do_something('php-header', '{"attribs":{"variant":"dark","size":"big"},"attributes":[{"name":"variant","value":"dark"},{"name":"size","value":"big"}],"nodeType":1,"startIndex":231,"tagName":"php-header","type":"tag","innerHTML":"\n <a href=\"/\">Home</a>\n <a href=\"/about\">about</a>\n "}}$'); ?>
<div>Here some ordinary content.</div>
<?php do_something('php-footer', '{"attribs":{"src":"src/partials/footer"},"attributes":[{"name":"src","value":"src/partials/footer"}],"nodeType":1,"startIndex":276,"tagName":"php-footer","type":"tag","innerHTML":""}}$'); ?>
</body>
</html>You are able to specify when the rewrites are going to happen.
It's either pre, post or undefined. See Vite's guide on transformIndexHtml.
Defaults is set pre, so before other hooks.
rewriteHTML([
{
order: 'post',
match: (element) => element.name.startsWith('php-'),
render({ name, ...elementDetails }) {
return `<?php do_something('${name}', '${JSON.stringify(
elementDetails,
).replaceAll("'", "\\'")}}$'); ?>`;
},
},
]);type Transformation = {
order?: 'pre' | 'post' | undefined;
match: (element: Element) => boolean;
render: (
elementDetails: Pick<
Element,
| 'attribs'
| 'attributes'
| 'name'
| 'namespace'
| 'nodeType'
| 'startIndex'
| 'endIndex'
| 'tagName'
| 'type'
| 'x-attribsNamespace'
| 'x-attribsPrefix'
> & { innerHTML: string },
index: number,
) => false | undefined | null | string;
};Love open source? Enjoying my project?
Your support can keep the momentum going! Consider a donation to fuel the creation of more innovative open source software.
| via Ko-Fi | Buy me a coffee | via PayPal |
|---|---|---|
 |
 |
 |
