svelte-render

Manage complex Svelte behaviors outside of templates with full type safety.

<script>
  import {Render, createRender} from 'svelte-render';
  import Avatar from './Avatar.svelte';
  // ...
  const avatar = createRender(Avatar, {name: 'Ada Lovelace'})
    .on('click', handleClick)
    .on('launch', handleLaunch);
</script>

<Render of={avatar} />

Installation

$ npm i -D svelte-render

API

Svelte Render was primarily built to support complex rendering definitions for Svelte Headless Table. You can find full documentation on createRender on the documentation site.

<Render />

<Render /> 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<number> and Writable<string> for dynamic primitive data
• ComponentRenderConfig returned by createRender

<script>
  const avatar = createRender(Avatar, {name: 'Ada Lovelace'});
</script>

<Render of={avatar} />

becomes

<Avatar name="Ada Lovelace" />

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.

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.

const avatarProps = writable({name: 'Ada Lovelace'});
const avatar = createRender(Avatar, avatarProps);

.on(event, handler)

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.

const button = createRender(Button)
  .on('click', handleClick)
  .on('click', (ev) => console.log(ev));

<Render of={button} /> becomes:

<Button on:click={handleClick} on:click={(ev) => 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.

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 <Button /> and <Label />.

Due to technical limitations with Svelte 4, it is not possible to assign render configurations to named slots.

const button = createRender(Button).slot(createRender(Icon, {name: 'user'}), 'Log in');

<Render of={button} /> becomes:

<Button>
  <Icon name="user" />
  Log in
</Button>