# Migration

Migration from version 4 to 5.

<!-- TOC -->

- [Manifest](#manifest)
- [index.js](#indexjs)
  - [Universal app](#universal-app)
  - [SSR app](#ssr-app)
  - [CSR app](#csr-app)
- [main.js](#mainjs)

<!-- /TOC -->

## Manifest

Add `"bundled": true` to the app manifest file.

manifest.json

```json
{
  "id": "se.soleil.myApp",
  "version": "1.0.0",
  "name": "My app",
  "author": "Soleil AB",
  "description": "",
  "helpUrl": "https://soleil.se/support",
  "type": "WebApp",
  "bundled": true
}

```

## index.js

Rendering is now using Webapps 2 render functions.

### Universal app

Old

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

import App from './App.svelte';

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

New

```js
import router from '@sitevision/api/common/router';
import { render } from '@soleil-api/webapp-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 app

Old

```js
import router from '@sitevision/api/common/router';
import { renderServer } from '@soleil-api/webapp-util/server/svelte';

import App from './App.svelte';

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

New

```js
import router from '@sitevision/api/common/router';
import { render } from '@soleil-api/webapp-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 app

Old

```js
import router from '@sitevision/api/common/router';
import { render } from '@soleil-api/webapp-util/server';

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

New

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

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

## main.js

Is now expecting a default export containing a function

Old

```js
import { render } from '@soleil-api/webapp-util/client/svelte';
import App from './App.svelte';

render(App);
```

New

```js
import { render } from '@soleil-api/webapp-util/client/svelte';
import App from './App.svelte';

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