Skip to content

Vite plugin that embeds .js and .css as base85 data

License

Notifications You must be signed in to change notification settings

molgenis/vite-plugin-inline

Repository files navigation

Build Status

vite-plugin-inline

Vite plugin that embeds .js and .css as gzipped base85 encoded data. Can be used together with the provided loader to create a stand-alone .html that can be viewed offline in a web browser. See https://github.com/molgenis/vip-report-template for an example.

Usage

Configuration

Update vite-config.ts as follows:

import { defineConfig } from "vitest/config";
import inlinePlugin from "@molgenis/vite-plugin-inline/src/vite-plugin-inline.js";

export default defineConfig({
  plugins: [inlinePlugin()],
  esbuild: {
    // @molgenis/vite-plugin-inline requires ascii input and cannot handle UTF-8 input
    charset: "ascii",
  },
  build: {
    rollupOptions: {
      input: ["./index.html", "@molgenis/vite-plugin-inline/src/loader.ts"],
      output: {
        manualChunks: undefined,
      },
    },
  },
});

Change ./index.html if your .html path differs.

Build

Execute npm run build to build a stand-alone .html.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="icon" href="data:,">
  <title>Example</title>
  <script type="application/gzip" class="ldr-js"><!-- put your base85 encoded gzipped JavaScript here --></script>
  <script type="application/gzip" class="ldr-css"><!-- put your base85 encoded CSS here --></script>
</head>
<body>
  <div id="app"></div>
  <script id="ldr"><!-- loader is injected here that unzips and decodes data --></script>
</body>
</html>