Setup
npm install svelte-jsx-snippet
tsconfig.json
{
"compilerOptions": {
// set jsx config
"jsx": "preserve",
"jsxImportSource": "svelte-jsx-snippet",
},
// include jsx/tsx files
"include": ["**/*.svelte", "**/*.ts", "**/*.tsx"],
}
vite.config.ts
import { sveltekit } from "@sveltejs/kit/vite";
import { defineConfig } from "vite";
// Put svelteJsxSnippet plugin
import { svelteJsxSnippet } from "svelte-jsx-snippet/vite";
export default defineConfig({
plugins: [sveltekit(), svelteJsxSnippet()],
});
API
JSX
JSX will be Svelte snippet. The following two are synonymous:
const hello = <h3>Hello, world!</h3> // JSX
{#snippet hello()}
<h3>Hello, world!</h3> <!-- Svelte -->
{/snippet}