Skip to content

A library which uses svelte compiler to convert html & css to jsx. Useful for using satori with svelte & Kit

Notifications You must be signed in to change notification settings

etherCorps/svelte-h2j

Repository files navigation

Contributors Forks Stargazers Issues MIT License LinkedIn


Jsxify-html
Svelte H2J

Library to convert HTML + CSS to JSX with Svelte Compiler.

Gitter

Key FeaturesHow To UseDownloadCreditsRelatedLicense

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.
# NPM
$ npm install @ethercorps/svelte-h2j css-tree
# PNPM
$ pnpm install @ethercorps/svelte-h2j css-tree
# Yarn
$ yarn add @ethercorps/svelte-h2j css-tree
# bun
$ bun install @ethercorps/svelte-h2j css-tree
  • Add vite plugin to vite.config.[js,ts]
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)
import {toReactElement} from "@ethercorps/svelte-h2j"
const htmlString =`
 <div tw="bg-gray-50 flex w-full h-full items-center justify-center">
    <div tw="flex flex-col md:flex-row w-full py-12 px-4 md:items-center justify-between p-8">
      <h2 tw="flex flex-col text-3xl sm:text-4xl font-bold tracking-tight text-gray-900 text-left">
        <span>Ready to dive in?</span>
        <span tw="text-indigo-600">Start your free trial today.</span>
      </h2>
      <div tw="mt-8 flex md:mt-0">
        <div tw="flex rounded-md shadow">
          <a href="#" tw="flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-5 py-3 text-base font-medium text-white">Get started</a>
        </div>
        <div tw="ml-3 flex rounded-md shadow">
          <a href="#" tw="flex items-center justify-center rounded-md border border-transparent bg-white px-5 py-3 text-base font-medium text-indigo-600">Learn more</a>
        </div>
      </div>
    </div>
  </div>
`;

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.
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:

Related

satori-html - Similar but uses other libraries as dependency when we can approach with svelte compiler in sveltekit.

You may also like...

  • Sveltekit OG - An alternative to @vercel/og for sveltekit.

License

MIT


ethercorps.io  ·  GitHub @theetherGit  ·  Twitter @theether0

About

A library which uses svelte compiler to convert html & css to jsx. Useful for using satori with svelte & Kit

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published