mirror of https://github.com/sveltejs/svelte
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
77 lines
2.0 KiB
77 lines
2.0 KiB
4 months ago
|
---
|
||
|
|
title: Imperative component API
|
||
|
|
---
|
||
|
|
|
||
|
|
better title needed?
|
||
|
|
|
||
|
|
- mount
|
||
|
|
- unmount
|
||
|
|
- render
|
||
|
|
- hydrate
|
||
|
|
- how they interact with each other
|
||
|
|
|
||
|
|
Every Svelte application starts by imperatively creating a root component. On the client this component is mounted to a specific element. On the server, you want to get back a string of HTML instead which you can render. The following functions help you achieve those tasks.
|
||
|
|
|
||
|
|
## `mount`
|
||
|
|
|
||
|
|
Instantiates a component and mounts it to the given target:
|
||
|
|
|
||
|
|
```js
|
||
|
|
// @errors: 2322
|
||
|
|
import { mount } from 'svelte';
|
||
|
|
import App from './App.svelte';
|
||
|
|
|
||
|
|
const app = mount(App, {
|
||
|
|
target: document.querySelector('#app'),
|
||
|
|
props: { some: 'property' }
|
||
|
|
});
|
||
|
|
```
|
||
|
|
|
||
|
|
You can mount multiple components per page, and you can also mount from within your application, for example when creating a tooltip component and attaching it to the hovered element.
|
||
|
|
|
||
|
|
## `unmount`
|
||
|
|
|
||
|
|
Unmounts a component created with [`mount`](#mount) or [`hydrate`](#hydrate):
|
||
|
|
|
||
|
|
```js
|
||
|
|
// @errors: 1109
|
||
|
|
import { mount, unmount } from 'svelte';
|
||
|
|
import App from './App.svelte';
|
||
|
|
|
||
|
|
const app = mount(App, {...});
|
||
|
|
|
||
|
|
// later
|
||
|
|
unmount(app);
|
||
|
|
```
|
||
|
|
|
||
|
|
## `render`
|
||
|
|
|
||
|
|
Only available on the server and when compiling with the `server` option. Takes a component and returns an object with `body` and `head` properties on it, which you can use to populate the HTML when server-rendering your app:
|
||
|
|
|
||
|
|
```js
|
||
|
|
// @errors: 2724 2305 2307
|
||
|
|
import { render } from 'svelte/server';
|
||
|
|
import App from './App.svelte';
|
||
|
|
|
||
|
|
const result = render(App, {
|
||
|
|
props: { some: 'property' }
|
||
|
|
});
|
||
|
|
result.body; // HTML for somewhere in this <body> tag
|
||
|
|
result.head; // HTML for somewhere in this <head> tag
|
||
|
|
```
|
||
|
|
|
||
|
|
## `hydrate`
|
||
|
|
|
||
|
|
Like `mount`, but will reuse up any HTML rendered by Svelte's SSR output (from the [`render`](#server-render) function) inside the target and make it interactive:
|
||
|
|
|
||
|
|
```js
|
||
|
|
// @errors: 2322
|
||
|
|
import { hydrate } from 'svelte';
|
||
|
|
import App from './App.svelte';
|
||
|
|
|
||
|
|
const app = hydrate(App, {
|
||
|
|
target: document.querySelector('#app'),
|
||
|
|
props: { some: 'property' }
|
||
|
|
});
|
||
|
|
```
|