Generating .svelte component dynamically without using <svelte:component/>

Question

Problem

I'm trying to generate svelte component dynamically in a .ts file. Thus, I'm not able to use <svelte:component> element as it can only be used inside .svelte files; in the HTML section. Is it possible to create some kind of svelte component renderer helper function?

Looking for solution

I'd need a logic for function of type: (component: SvelteComponent, props: any) => HTMLElement

Context

I figure rendering components like this might go around most (or maybe even every) intended coding patterns by Svelte, yet it would be a clean solution for what I'm trying to do. Specifically - I'm trying to inject content in Full calendar as it's described here.

brunnerh · Accepted Answer · 2025-01-22 14:02:12Z

6

The event can return a DOM node array and you can render any component to DOM nodes directly using the client-side component API, so e.g.:

// Svelte 5
import { mount } from 'svelte';
// ...
eventContent() {
  const content = document.createElement('div');
  mount(Component, { target: content, props: ... });

  return { domNodes: [content] }
}

// Svelte 3/4
eventContent() {
  const content = document.createElement('div');
  new Component({ target: content, props: ... });

  return { domNodes: [content] }
}

edited Jan 22 at 14:02

answered Jan 20, 2023 at 15:00

brunnerh

188k30 gold badges362 silver badges434 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rokas Rudgalvis Over a year ago

Yup, that the gist of it, works perfectly, thank you H.B.! I'll update my question with an answer of expanded logic so it could be used as a helper function ✌️

Rokas Rudgalvis · Accepted Answer · 2023-01-20 15:30:57Z

2

Following up on H.B. answer, the code could be extracted into a helper function with corrent TS typing like so:

import type {ComponentType} from "svelte";

export const componentToDom = (componentClass: ComponentType, props: object): HTMLElement => {
    const target = document.createElement('div')

    new componentClass({target, props})

    return target
}

And then inside Full calendar config:

eventContent: () => ({domNodes: [componentToDom(MySvelteComponent, {})]})

edited Jan 20, 2023 at 15:30

answered Jan 20, 2023 at 15:19

Rokas Rudgalvis

4265 silver badges16 bronze badges

2 Comments

brunnerh Over a year ago

Regarding types, svelte exports ComponentType which gives you the constructor signature, btw.

Rokas Rudgalvis Over a year ago

H.B., Legend 🤝

Collectives™ on Stack Overflow

Generating .svelte component dynamically without using <svelte:component/>

Problem

Looking for solution

Context

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Problem

Looking for solution

Context

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related