hub / github.com/donnikitos/vite-plugin-html-inject

github.com/donnikitos/vite-plugin-html-inject @v1.0.4

Chat with this repo

repository ↗ · DeepWiki ↗ · release v1.0.4 ↗ · + Follow

6 symbols 12 edges 2 files 0 documented · 0% 1 cross-repo links ● updated 2y agov1.0.4 · 2023-09-12★ 884 open issues

What it actually does AI analysis from the code graph — generated when you open this

loading…

README

vite-plugin-html-inject

Split your index.html into smaller, reusable static HTML pieces.

// vite.config.js
import { defineConfig } from 'vite';
import injectHTML from 'vite-plugin-html-inject';

export default defineConfig({
    plugins: [injectHTML()],
});

Load those sweet separate HTML files


<!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>

        <load ="src/html/header/branding.html" />

        <load ="src/html/header" />



            <load ="src/html/body/sidebar.html" />
            <load ="src/html/body" />



        <load ="src/html/footer" />
    </body>
</html>

Pass down static arguments to injected HTML parts

The plugin also allows you to supply your HTML parts with some basic arguments, so you can reuse the same piece of code in multiple places.

For example you can reuse a similarly styled link somewhere in your index.html:


...




    <load
        ="src/some-static-link.htm"
        label="Go to DuckDuckGo"
        href="https://duckduckgo.com/"
    />
    <load
        ="src/some-static-link.htm"
        label="Go to Google"
        href="https://google.com"
    />



...

And that src/some-static-link.htm:


<a href="https://github.com/donnikitos/vite-plugin-html-inject/raw/v1.0.4/{=$href}" class="some-cool-link-style">{=$label}</a>

This will result in a dev and runtime generated index.html looking like


...




    <a href="https://duckduckgo.com/" class="some-cool-link-style">
        Go to DuckDuckGo
    </a>
    <a href="https://google.com" class="some-cool-link-style">Go to Google</a>



...

Debugging

By default the debugging option is turned off. However, if you encounter issues loading files, you can turn on path logging.

injectHTML({
    debug: {
        logPath: true,
    },
});

Core symbols most depended-on inside this repo

Shape

Function 6

Languages

TypeScript100%

Modules by API surface

src/index.ts6 symbols

Used by 1 indexed graphs manifest dependencies, hub-wide

github.com/monkeytypegame/monkeytype

For agents

$ claude mcp add vite-plugin-html-inject \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact