Closed fabian-michael closed 4 years ago
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?
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.
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.
now it's available in latest svelte-draft-template
Alright, nice!
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