Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/etherCorps/svelte-h2j
A library which uses svelte compiler to convert html & css to jsx. Useful for using satori with svelte & Kit
https://github.com/etherCorps/svelte-h2j
html-to-jsx satori-html satori-jsx svelte svelte-jsx sveltekit
Last synced: 16 days ago
JSON representation
A library which uses svelte compiler to convert html & css to jsx. Useful for using satori with svelte & Kit
- Host: GitHub
- URL: https://github.com/etherCorps/svelte-h2j
- Owner: etherCorps
- Created: 2023-08-16T17:36:06.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-06-11T11:21:59.000Z (8 months ago)
- Last Synced: 2024-09-13T10:34:53.709Z (5 months ago)
- Topics: html-to-jsx, satori-html, satori-jsx, svelte, svelte-jsx, sveltekit
- Language: TypeScript
- Homepage:
- Size: 909 KB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[![Contributors][contributors-shield]][contributors-url]
[![Forks][forks-shield]][forks-url]
[![Stargazers][stars-shield]][stars-url]
[![Issues][issues-shield]][issues-url]
[![MIT License][license-shield]][license-url]
[![LinkedIn][linkedin-shield]][linkedin-url]
Svelte H2J
Library to convert HTML + CSS to JSX with Svelte Compiler.
Key Features •
How To Use •
Download •
Credits •
Related •
License
## Key Features
- Convert html/css to jsx
- Useful when you are going to use satori with Svelte & Kit.
- Compatible with new version of svelte
- As new versions are coming for better performance in svelte we maintain that.
- Easy to use with all available syntax in html css.
- Support for class based internal style.
- inline css
## How To Use
- Install @ethercorps/svelte-h2j using your favourite node package manager.
```bash
# NPM
$ npm install @ethercorps/svelte-h2j css-tree
```
```bash
# PNPM
$ pnpm install @ethercorps/svelte-h2j css-tree
```
```bash
# Yarn
$ yarn add @ethercorps/svelte-h2j css-tree
```
```bash
# bun
$ bun install @ethercorps/svelte-h2j css-tree
```
- Add `vite` plugin to `vite.config.[js,ts]`
```js
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vitest/config';
import {vitePluginSvelteH2J} from "@ethercorps/svelte-h2j/vite"
export default defineConfig({
plugins: [sveltekit(), vitePluginSvelteH2J()],
test: {
include: ['src/**/*.{test,spec}.{js,ts}']
}
});
```
> This is required as we build for production and add css-tree while build.
- To convert html, css to JSX (Also supports Tailwind, inline css)
```javascript
import {toReactElement} from "@ethercorps/svelte-h2j"
const htmlString =`
`;
const jsx = toReactElement(htmlTemplate) // Takes a string only
const svg = await satori(jsx, {
width: options.width,
height: options.height,
debug: options.debug,
fonts: options.fonts || [
{
name: 'sans serif',
data: fontData,
style: 'normal',
weight: 700
}
]
});
```
- We also provide a server side api for converting svelte components to JSX.
```javascript
import {svelteComponentToJsx} from "@ethercorps/svelte-h2j";
import SvelteComponent from "SvelteComponent.svelte"
const jsx = svelteComponentToJsx(SvelteComponent, props = {
a: 2 // if you have `export let a;` in component
}) // Takes two parameters 1. Component 2. Component Props
const svg = await satori(jsx, {
width: options.width,
height: options.height,
debug: options.debug,
fonts: options.fonts || [
{
name: 'sans serif',
data: fontData,
style: 'normal',
weight: 700
}
]
});
```
## Credits
This software uses the following open source packages:
- [Svelte](https://github.com/sveltejs/svelte)
## Related
[satori-html](https://github.com/natemoo-re/satori-html) - Similar but uses other libraries as dependency when we
can approach with svelte compiler in sveltekit.
## You may also like...
- [Sveltekit OG](https://github.com/etherCorps/sveltekit-og) - An alternative to @vercel/og for sveltekit.
## License
MIT
---
> [ethercorps.io](https://www.ethercorps.io) ·
> GitHub [@theetherGit](https://github.com/theetherGit) ·
> Twitter [@theether0](https://twitter.com/theether0)
[contributors-shield]: https://img.shields.io/github/contributors/etherCorps/svelte-h2j.svg?style=for-the-badge
[contributors-url]: https://github.com/etherCorps/svelte-h2j/graphs/contributors
[forks-shield]: https://img.shields.io/github/forks/etherCorps/svelte-h2j.svg?style=for-the-badge
[forks-url]: https://github.com/etherCorps/svelte-h2j/network/members
[stars-shield]: https://img.shields.io/github/stars/etherCorps/svelte-h2j.svg?style=for-the-badge
[stars-url]: https://github.com/etherCorps/svelte-h2j/stargazers
[issues-shield]: https://img.shields.io/github/issues/etherCorps/svelte-h2j.svg?style=for-the-badge
[issues-url]: https://github.com/etherCorps/svelte-h2j/issues
[license-shield]: https://img.shields.io/github/license/etherCorps/svelte-h2j.svg?style=for-the-badge
[license-url]: https://github.com/etherCorps/svelte-h2j/blob/master/LICENSE
[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge&logo=linkedin&colorB=555
[linkedin-url]: https://linkedin.com/in/theether0