posthtml-svelte
v0.4.7
Published
Write Svelte in your HTML
Maintainers
metonymReadme
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
sveltetagUse 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-svelteUsage
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);
})();