# Svelte

Sitevision supports both server and client side rendering with Svelte.

## index.js

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

`@soleil-se/app-util/server/svelte/5`\
`@soleil-se/app-util/server/svelte/4`\
`@soleil-se/app-util/server/svelte/3`\
`@soleil-se/app-util/server/svelte` Deprecated

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. |

### Universal

Render an app with both server and client code.

* Svelte 5

  **index.js**

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


  import App from './App.svelte';


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

* Svelte 4

  **index.js**

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


  import App from './App.svelte';


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

* Svelte 3

  **index.js**

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


  import App from './App.svelte';


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

* Deprecated

  **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' };
    const html = render(App, props);
    res.agnosticRender(html, props);
  });
  ```

### SSR

Render an app with only server side code.

* Svelte 5

  **index.js**

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


  import App from './App.svelte';


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

* Svelte 4

  **index.js**

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


  import App from './App.svelte';


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

* Svelte 3

  **index.js**

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


  import App from './App.svelte';


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

* Deprecated

  **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' };
    const html = render(App, props);
    res.send(html);
  });
  ```

### CSR

Render an app with only client side code.

**index.js**

```javascript
import router from '@sitevision/api/common/router';


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

## main.js

### `render(App, { target, props })`

`@soleil-se/app-util/client/svelte/5`\
`@soleil-se/app-util/client/svelte/4`\
`@soleil-se/app-util/client/svelte/3`\
`@soleil-se/app-util/client/svelte` Deprecated

Renders a client side Svelte application.

**Returns**: Initialized Svelte component.

| Param               | Type              | Default                  | Description                                                                                                                                                                           |
| ------------------- | ----------------- | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| App                 | `SvelteComponent` |                          | Svelte app root component.                                                                                                                                                            |
| \[settings]         | `Object`          | `{}`                     | Settings object.                                                                                                                                                                      |
| \[settings.target]  | `Element`         |                          | Target where app should be mounted.                                                                                                                                                   |
| \[settings.props]   | `Object`          |                          | Root component props.                                                                                                                                                                 |
| \[settings.intro]   | `Boolean`         | `false`                  | If true, will play transitions on initial render, rather than waiting for subsequent state changes.                                                                                   |
| \[settings.hydrate] | `Boolean`         | `target.hasChildNodes()` | Instructs Svelte to upgrade existing DOM (usually from server-side rendering) rather than creating new elements. By default the app will hydrate when the target has any child nodes. |

* Svelte 5

  **main.js**

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


  export default (props, target) => {
    render(App, { props, target });
  };
  ```

  Mount the app in another element:

  **main.js**

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


  export default (props) => {
    render(App, { props, target: document.querySelector('#mount_app_here') });
  };
  ```

* Svelte 4

  **main.js**

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


  export default (props, target) => {
    render(App, { props, target });
  };
  ```

  Mount the app in another element:

  **main.js**

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


  export default (props) => {
    render(App, { props, target: document.querySelector('#mount_app_here') });
  };
  ```

* Svelte 3

  **main.js**

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


  export default (props, target) => {
    render(App, { props, target });
  };
  ```

  Mount the app in another element:

  **main.js**

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


  export default (props) => {
    render(App, { props, target: document.querySelector('#mount_app_here') });
  };
  ```

* Deprecated

  **main.js**

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


  export default (props, target) => {
    render(App, { props, target });
  };
  ```

  Mount the app in another element:

  **main.js**

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


  export default (props) => {
    render(App, { props, target: document.querySelector('#mount_app_here') });
  };
  ```