svelte-jsx-snippet
v0.6.0
Published
Write JSX as Svelte snippets for testing.
Downloads
5
Readme
svelte-jsx-snippet
Write JSX as Svelte snippets for testing.
Setup
npm install -D 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()],
});
Usage
For example: MyComponent.svelte
<script>
const { children } = $props();
</script>
<section>{@render children}</section>
For Storybook
import MyComponent from "./MyComponent.svelte";
export default {
component: MyComponent,
};
export const Default = {
props: {
children: <h1 class="text-xl font-bold">Hello, World!</h1>,
},
};
For Vitest
import { test, expect } from "vitest";
import { render } from "@testing-library/svelte";
import MyComponent from "./MyComponent.svelte";
test("render snippet ", () => {
const { getByText } = render(MyComponent, {
props: {
children: <h1 class="text-xl font-bold">Hello, World!</h1>,
},
});
expect(getByText("Hello, World!")).toBeInTheDocument();
});
Constraints
- Support only Svelte5
- because Snippet is a feature of Svelte5.
- You can't use Svelte's special syntax.
- For example,
#if
,#each
,#await
, etc.
- For example,
License
MIT