I'm working on a project using both of native JS and Svelte. And I worked on a Svelte component and I want to know how can I import this later into my JS file.
*index.js*
// js code here
alert('here is my sweet Svelte compoent');
-- the svelte component must be here ---
...
//
**MyComponent.svelte**
<script>
... the Svelte code ...
</script>
<style>
... the Svelte component's style ...
</style>
<div>
...
...
</div>
You can simply do
import MyComponent from 'MyComponent.svelte'
to create an instance of it you would then do
new MyComponent({
target: mountpoint // here the dom node where you want to mount it
})
If you are using JavaScript ES6 the syntax to import svelte and anything else is below:
const svelte = require('svelte')
And don't forget to update the rollup.config.js file by simply adding :
import svelte from "rollup-plugin-svelte";
and
svelte()
in the plugins' array like this :
plugin : [
svelte()
]
With svelte 5.0, the way of mounting component into js has been changed. Now it looks like that:
import { mount } from "svelte";
mount(Component, {target: targetNode});
