https://github.com/ssssota/svelte-preact-snippet

Create svelte snippets with JSX syntax based on preact
https://github.com/ssssota/svelte-preact-snippet

preact svelte

Last synced: 29 days ago
JSON representation

Create svelte snippets with JSX syntax based on preact

• Host: GitHub
• URL: https://github.com/ssssota/svelte-preact-snippet
• Owner: ssssota
• License: other
• Created: 2024-08-17T03:17:30.000Z (3 months ago)
• Default Branch: main
• Last Pushed: 2024-08-17T03:24:34.000Z (3 months ago)
• Last Synced: 2024-09-29T10:49:30.909Z (about 1 month ago)
• Topics: preact, svelte
• Language: TypeScript
• Homepage: https://ssssota.github.io/svelte-preact-snippet/
• Size: 22.5 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# svelte-preact-snippet

You can create svelte snippets with JSX syntax based on preact.

## Usage

```sh

npm i svelte-preact-snippet preact

```

tsconfig.json

```jsonc

{

  "compilerOptions": {

    // ...

    "jsx": "react-jsx",

    "jsxImportSource": "preact"

  }

}

```

snippet.tsx

```tsx

export const snippet = createSnippet<[string, string]>((title, content) => (

  


    

      
{title()}

    

    
{content()}


     alert('Clicked!\n' + content())}>Click me

  

));

```


App.svelte

```svelte

  import {page} from '$lib';

  let name = $state('preact');

{@render page('svelte-preact-snippet', `Hello ${name}!`)}

```

→ **[Demo](https://ssssota.github.io/svelte-preact-snippet/)**

## License

MIT