Instantiating component in typescript

[fabian-michael]

Instantiating a Component inside typescript is working but my IDE is freaking out because the imported function does not match ({target, props}) from svelte.

Argument type {target: HTMLElement, props: {...}} is not assignable to parameter type IAppProps

[mistlog]

To suppress this warning, we can add //@ts-nocheck at the top of main.js.

Although seems unprofessional, it may be the most efficient way to solve this problem currently. Or we can provide a render function (just like React) such as:

import App from './App';
import { render } from 'svelte-draft';

render(document.body, <App name='world'/>);

But what happens underhood is that we have to translate these code to exactly the same as current main.js, svelte-draft in essence is a compile time translator. Would you like to give some suggestions on this?

[fabian-michael]

The render function sounds good. I'd say what happens under the hood in the end doesn't matter that much. It should also be somehow possible to instantiate/render a component without JSX/TSX.

[mistlog]

instantiate/render a component without JSX/TSX.

Yes, we can provide a simple helper function such as create:

import App from './App';
import { create } from 'svelte-draft';

const app = create(App, {
    target: document.body,
    props: {
    name: 'world'
    }
});

export default app;

I think this approach is better than render because it's explicit and easy to reason about. A single render works well, however, if we add other logics it would be hard to translate.

[mistlog]

now it's available in latest svelte-draft-template

[fabian-michael]

Alright, nice!