API Reference

createRender

createRender lets you define complex Svelte component behaviors within the script.

It combines a component with props and events to create a ComponentRenderConfig that is passed into Render#of to dynamically render Svelte components.

createRender accepts a Svelte component and either:

1. an object of static props; or
2. a Readable object for dynamic props.

To define event handlers, chain .on(type, handler) method calls.

# Usage

# createRender: (component: Component, props?: Props) => ComponentRenderConfig

Creates a render configuration with a Svelte component and static props.

<script>
  import Profile from './Profile.svelte';
  const profile = createRender(Profile, {
    name: 'Alan Turing'
  });
</script>

<Render of={profile} />

# createRender: (component: Component, props?: Readable<Props>) => ComponentRenderConfig

Creates a render configuration with a Svelte component and dynamic props.

<script>
  import Profile from './Profile.svelte';
  const name = writable('Grace Hopper');
  const profile = createRender(
    Profile,
    derived(name, n => ({ name: n }))
  );
</script>

<Render of={profile} />

# .on(type: EventType, handler: (ev) => void)

ComponentRenderConfig exposes an .on() method that allows events to be defined and attached to the component when it is mounted.

<script>
  import Notice from './Notice.svelte';
  const noticeProps = writable({ count: 0 });
  const notice = createRender(Notice, noticeProps)
    .on('click', (() => $noticeProps.count++))
    .on('click', ev => console.log(ev));
</script>

<Render of={notice} />