# Svelte

Sitevision supports both server and client side rendering with Svelte.

## index.js

For rendering a client side only app use the framework agnostic [client renderer](/packages/app-util/version-4/svelte).

### `render(App, [props], [settings])`

`@soleil-se/app-util/server/svelte`

Get a HTML string for rendering a universal Svelte application. If a client bundle is available the server rendered HTML will be hydrated and not completely re-rendered.

**Returns**: `String` - HTML for rendering a Svelte application.

| Param             | Type      | Default | Description                                                                                                                      |
| ----------------- | --------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- |
| \[App]            | `Svelte`  |         | Svelte app to be rendered.                                                                                                       |
| \[props]          | `Object`  | `{}`    | Props that will be passed to the app.                                                                                            |
| \[settings]       | `Object`  | `{}`    | Settings object. Forwarded to                                                                                                    |
| \[settings.async] | `Boolean` | `false` | If the app script should be loaded asynchronously.                                                                               |
| \[settings.defer] | `Boolean` | `true`  | If the app script should be loaded after DOM is ready.                                                                           |
| \[settings.req]   | `Object`  |         | The req object from Sitevision, pass this to optimize browser specific script loading if you have multiple instances of the app. |

[Read more about async and defer.](https://flaviocopes.com/javascript-async-defer/)

In `app_src/index.js` or `app_src/server/index.js`.

```javascript
import router from '@sitevision/api/common/router';
import { render } from '@soleil-se/app-util/server/svelte';


import App from './App.svelte';


router.get('/', (req, res) => {
  const props = { foo: 'bar' };
  res.send(render(App, props));
});
```

### `renderServer(App, [props])`

`@soleil-se/app-util/server/svelte`

Get a HTML string for rendering a server side Svelte application.

**Returns**: `String` - HTML for rendering a Svelte application.

| Param    | Type     | Default | Description                                                  |
| -------- | -------- | ------- | ------------------------------------------------------------ |
| \[App]   | `Svelte` |         | Svelte app to be rendered.                                   |
| \[props] | `Object` | `{}`    | Server data that will be available as props and as app data. |

In `app_src/index.js` or `app_src/server/index.js`.

```javascript
import router from '@sitevision/api/common/router';
import { renderServer } from '@soleil-se/app-util/server/svelte';


import App from './App.svelte';


router.get('/', (req, res) => {
  const props = { foo: 'bar' };
  res.send(render(App, props));
});
```

## main.js

### `render(App, [settings])`

`@soleil-se/app-util/client/svelte`

Renders a client side Svelte application.

**Returns**: `*` - Initialized Svelte component.

| Param                | Type     | Default                     | Description                                                                                         |
| -------------------- | -------- | --------------------------- | --------------------------------------------------------------------------------------------------- |
| App                  | `*`      |                             | Svelte app root component.                                                                          |
| \[settings]          | `Object` | `{}`                        | Settings object.                                                                                    |
| \[settings.selector] | `String` | `` `#app_mount_${appId}` `` | Query selector for mount element.                                                                   |
| \[settings.intro]    | `String` | `false`                     | If true, will play transitions on initial render, rather than waiting for subsequent state changes. |

In `app_src/main.js` or `app_src/client/index.js`.

```javascript
import { render } from '@soleil-se/app-util/client/svelte';
import App from './App.svelte';


render(App);
```

Mount the app in another element:

```javascript
import { render } from '@soleil-se/app-util/client/svelte';
import App from './App.svelte';


render(App, { selector: '#mount_app_here' });
```