@prpl/plugin-html-imports

PRPL plugin that resolves HTML imports at build time

Usage no npm install needed!

<script type="module">
  import prplPluginHtmlImports from 'https://cdn.skypack.dev/@prpl/plugin-html-imports';
</script>

README

@prpl/plugin-html-imports

A plugin for PRPL that resolves HTML import statements at build time.

The PRPL dev server is not yet aware of the graph of resources in your site and will not be able to detect changes in imported HTML files. Given that HTML imports is a deprecated specification, it's recommended to only use this plugin for fragments of HTML that you do not need live reloads of during development (for example, meta tags).

Dependencies

@prpl/plugin-html-imports has zero dependencies.

Functions

resolveHTMLImports is the only export. See the source code for its signature.

Usage

import { interpolate } from '@prpl/core';
import { resolveHTMLImports } from '@prpl/plugin-html-imports';

await interpolate();
await resolveHTMLImports();

Notes

Given HTML file hello-world.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <base href="/" />
    <link rel="import" href="meta.html" />
    <title>Hello world</title>
  </head>
  <body>
    <main class="index">
      <h1>Hello world</h1>
    </main>
  </body>
</html>

and an HTML fragment meta.html:

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />

and resolveHTMLImports is called, the output of HTML file hello-world.html will be:

<html lang="en">
  <head>
    <base href="/" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
    <title>Hello world</title>
  </head>
  <body>
    <main class="index">
      <h1>Hello world</h1>
    </main>
  </body>
</html>