Dynamic import (injecting) HTML files for vanilla JS projects.

[rifkyniyas]

Hi everyone, I recently started using Vite for vanilla JS projects since it's extremely powerful tool for optimization in production. I use vanilla JS for mostly simple landing page designs, etc.

The main issue that arises when working with HTML files is that a single file gets bloated with HTML tags and it would be extremely convenient to have the file split up into multiple files and include them in to the main file. I would like to know whether there is an option to include HTML files inside HTML files in vite?

[Scrum]

@rifkyniyas You can use for this https://github.com/posthtml/posthtml

[viktorkasap]

Thanks for the advice.
Could you show an example of using this library with VITE?

[Scrum]

Thanks for the advice. Could you show an example of using this library with VITE?

Of course there is already existing plugin vite-plugin-posthtml which you can use right now:

import { defineConfig } from 'vite';
const { posthtmlPlugin } = require('vite-plugin-posthtml');
const expressions = require('posthtml-expressions');

export default defineConfig({
    plugins: [
        posthtmlPlugin({
            plugins: [expressions({ locals: { foo: 'bar' } })]
        })
    ]
})

or you can add the plugin yourself using posthtml

import { defineConfig } from 'vite';
import posthtml from 'posthtml';

const plugin = function (tree) {
    tree.match({ tag: 'h1' }, function (node) {
        node.content = 'Hello-World';
        return node;
    })

    return tree;
}

function vitePluginPosthtml() {
    return {
        name: 'vite-plugin-posthtml',
        async transformIndexHtml(html) {
            const { html: transformedHtml } = await posthtml(plugin).process(html);
            return transformedHtml;
        }
    }
}

export default defineConfig({
    plugins: [
        vitePluginPosthtml()
    ]
})

[DanielTate]

What does this code actually do? I tried it and it doesn't seem to do anything.