https://github.com/metonym/posthtml-svelte
Write Svelte in your HTML
https://github.com/metonym/posthtml-svelte
posthtml posthtml-plugin rollup svelte
Last synced: 2 months ago
JSON representation
Write Svelte in your HTML
- Host: GitHub
- URL: https://github.com/metonym/posthtml-svelte
- Owner: metonym
- License: mit
- Created: 2020-04-19T02:02:07.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2020-05-15T02:10:00.000Z (about 6 years ago)
- Last Synced: 2025-09-08T07:30:05.798Z (9 months ago)
- Topics: posthtml, posthtml-plugin, rollup, svelte
- Language: HTML
- Size: 195 KB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# posthtml-svelte
[![Build][build]][build-badge]
> Write Svelte in your HTML.
This [PostHTML](https://github.com/posthtml/posthtml) plugin is a proof-of-concept that compiles Svelte written within an HTML file.
```html
let count = 0;
Increment the count: {count}
```
## Steps
1. Use PostHTML to extract Svelte code inside of a non-standard `svelte` tag
2. Use the Svelte compiler to generate static markup and styles
3. Use Rollup to generate the JavaScript bundle that hydrates the HTML
4. Use PostHTML to inject the static markup and bundle into the HTML
## Example
### [Before](src/__fixtures__/Count.html)
### [After](src/__fixtures__/Count.out.html)
## Install
```bash
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.
```js
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: "", // unique key for the Svelte component that is written to disk
}),
]).process(html);
fs.writeFileSync("./src/processed/after.html", result.html);
})();
```
## License
[MIT](LICENSE)
[build]: https://travis-ci.com/metonym/posthtml-svelte.svg?branch=master
[build-badge]: https://travis-ci.com/metonym/posthtml-svelte