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

This branch is up to date with main.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

7cb923a · Feb 14, 2025

History

91 Commits
Apr 23, 2024
Nov 6, 2024
Nov 4, 2024
May 18, 2022
May 18, 2022
Nov 6, 2024
May 18, 2022
May 18, 2022
Feb 4, 2025
May 18, 2022
Aug 28, 2024
Jan 25, 2024
Aug 28, 2024
Feb 14, 2025
Feb 14, 2025
Nov 6, 2024
Dec 6, 2023

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>