https://github.com/humanspeak/svelte-render
https://github.com/humanspeak/svelte-render
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/humanspeak/svelte-render
- Owner: humanspeak
- License: mit
- Created: 2024-11-10T23:43:46.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2025-04-04T14:56:36.000Z (about 2 months ago)
- Last Synced: 2025-04-06T05:48:07.791Z (about 1 month ago)
- Language: TypeScript
- Homepage:
- Size: 961 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# svelte-render
[](https://www.npmjs.com/package/@humanspeak/svelte-render)
[](https://github.com/humanspeak/svelte-render/actions/workflows/npm-publish.yml)
[](https://coveralls.io/github/humanspeak/svelte-render?branch=main)
[](https://github.com/humanspeak/svelte-render/blob/main/LICENSE)
[](https://www.npmjs.com/package/@humanspeak/svelte-render)
[](https://github.com/humanspeak/svelte-render/actions/workflows/codeql.yml)
[](https://packagephobia.com/result?p=@humanspeak/svelte-render)
[](https://trunk.io)
[](http://www.typescriptlang.org/)
[](https://www.npmjs.com/package/@humanspeak/svelte-render)
[](https://github.com/humanspeak/svelte-render/graphs/commit-activity)
Manage complex Svelte behaviors outside of templates with full type safety.
```svelte
import { Render, createRender } from '@humanspeak/svelte-subscribe'
import Avatar from './Avatar.svelte'
// ...
const avatar = createRender(Avatar, { name: 'Ada Lovelace' })
.on('click', handleClick)
.on('launch', handleLaunch)
```
## Installation
```bash
npm i -D @humanspeak/svelte-render
```
## API
Svelte Render was primarily built to support complex rendering definitions for [Svelte Headless Table](https://github.com/humanspeak/svelte-headless-table).
### ``
`` handles props and automatically registers the event handlers defined with `.on` as well as slot data defined with `.slot`.
`of` accepts:
- primitive data such as `number` and `string`
- `Writable` and `Writable` for dynamic primitive data
- `ComponentRenderConfig` returned by `createRender`
```svelte
const avatar = createRender(Avatar, { name: 'Ada Lovelace' })
```
becomes
```svelte
```
### `createRender: (component, props)`
`createRender` accepts a Svelte component and its props as arguments.
`props` can be omitted if the component does not receive props but must be included otherwise.
```ts
const icon = createRender(TickIcon) // ✅
const avatar = createRender(Avatar) // ❌ Type error.
const avatar = createRender(Avatar, { name: 'Ada Lovelace' }) // ✅
```
If you need prop reactivity, `props` must be a [Svelte store](https://svelte.dev/tutorial/writable-stores).
```ts
const avatarProps = writable({ name: 'Ada Lovelace' })
const avatar = createRender(Avatar, avatarProps)
```
### `.on(event, handler)`
**deprecated** Note: this will be removed in a future version. It still works by concating the event to an on for instance `onclick` will be passed to the renderer.
Svelte Render supports the Svelte event system by chaining `.on` calls on `createRender()`. Multiple event handlers can be registered for the same event type like the Svelte `on:` directive.
```ts
const button = createRender(Button)
.on('click', handleClick)
.on('click', (ev) => console.log(ev))
```
`` becomes:
```svelte
console.log(ev)} />
```
However, note that the callback handler passed into `.on(event, handler)` is not dynamic and will only capture references to variables as they were when the render configuration is created.
If you need a handler to access dynamic data, use a dynamic system like Svelte Stores.
```ts
const counter = writable(0)
const button = createRender(Button).on('click', (ev) => counter.update((c) => c + 1))
```
### `.slot(...config)`
Svelte Render also supports Svelte's default slot system.
`.slot` receives any number of arguments with the same type as `of`, including `ComponentRenderConfig` returned by `createRender`, primitive data, and `Writable`. This makes it useful for rendering wrapper components such as `` and ``.
_Due to technical limitations with Svelte 5, it is not possible to assign render configurations to named slots._
```ts
const button = createRender(Button).slot(createRender(Icon, { name: 'user' }), 'Log in')
```
`` becomes:
```svelte
Log in
```