Posthtml-svelte NPM

posthtml-svelte

Write Svelte in your HTML.

This PostHTML plugin is a proof-of-concept that compiles Svelte written within an HTML file.

<!DOCTYPE html>
<html>
  <body>
    <svelte>
      <script>
        let count = 0;
      </script>

      <button on:click="{() => { count++; }}">
        Increment the count: {count}
      </button>
    </svelte>
  </body>
</html>

Steps

Use PostHTML to extract Svelte code inside of a non-standard svelte tag
Use the Svelte compiler to generate static markup and styles
Use Rollup to generate the JavaScript bundle that hydrates the HTML
Use PostHTML to inject the static markup and bundle into the HTML

Example

Before

After

Install

yarn add -D posthtml-svelte
# OR
npm i -D posthtml-svelte

Usage

Single file

By default, the bundled JavaScript is injected into the HTML. This is not ideal for caching.

const fs = require("fs");
const posthtml = require("posthtml");
const { svelte } = require("posthtml-svelte");

(async () => {
  const html = fs.readFileSync("./src/before.html");
  const result = await posthtml([
    svelte({
      out: "src/processed", // if definied, JS will be generated/minified as a separate file
      currentDir: "src/", // folder relative to the working directory
      key: "<hash>", // unique key for the Svelte component that is written to disk
    }),
  ]).process(html);

  fs.writeFileSync("./src/processed/after.html", result.html);
})();