# Migration

Migration from version 2 or 3 to 4.

* [renderApp](#renderapp)

  * [Export](#export)
  * [Settings](#settings)

* [renderTemplate](#rendertemplate)

* [getRouteUri](#getrouteuri)

* [AppData](#appdata)

  * [Get data](#get-data)
  * [Standard values](#standard-values)

* [Svelte](#svelte)

  * [Server](#server)
  * [Client](#client)

* [Vue](#vue)

## renderApp

### Export

Export moved and renamed.

Old:

```js
import { renderApp } from '@soleil-se/app-util';
```

New:

```js
import { render } from '@soleil-se/app-util/server';
```

### Settings

Selector is moved to client side rendering functions.

Old (index.js):

```js
res.send(renderApp(data, { selector: '#mount_app_here' }));
```

New (main.js):

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


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

## renderTemplate

Export moved.

Old:

```js
import { renderTemplate } from '@soleil-se/app-util';
```

New:

```js
import { renderTemplate } from '@soleil-se/app-util/server';
```

## getRouteUri

URIs for routes was previously passed as props when rendering an application. This is no longer needed. Now you can use `getRouteUri` in a client context as well.

Old:

```js
import AppData from '@soleil-se/app-util/app-data';


const getItems = async () => {
  return fetch(AppData.itemsRoute)
    .then((res) => res.json());
};
```

New:

```js
import { getRouteUri } from '@soleil-se/app-util';


const getItems = async () => {
  return fetch(getRouteUri('/items'))
    .then((res) => res.json());
};
```

## AppData

### Get data

The default export as object and `@soleil-se/app-util/app-data` import is removed.

Old:

```js
import AppData from '@soleil-se/app-util/app-data';


const { myValue } = AppData;
```

New:

```js
import { getAppData } from '@soleil-se/app-util';


// Get value with key
const myValue = getAppData('myValue');
// Or with destructuring
const { myValue } = getAppData();
```

### Standard values

Values that was set as sandard are now moved.

Old:

```js
import AppData from '@soleil-se/app-util/app-data';


const { isOnline, isOffline, uniqueId } = AppData;
```

New:

```js
import { isOffline, isOnline, getNamespace } from '@soleil-se/app-util';


const uniqueId = getNamespace();
```

## Svelte

### Server

Export moved. Export `renderClient` is removed, use `render` from `'@soleil-se/app-util/server`

Old:

```js
import { render } from '@soleil-se/app-util/svelte-server';
```

New:

```js
import { render } from '@soleil-se/app-util/server/svelte';
```

### Client

Export moved.

Old:

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

New:

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

## Vue

Export moved.

Old:

```js
import render from '@soleil-se/app-util/render-vue';
```

New:

```js
import { render } from '@soleil-se/app-util/client/vue';
```