# @soleil-se/app-util@4

Utility functions for WebApps.

[NPM](https://npm.soleilit.se/-/web/detail/@soleil-se/app-util)

## Requirements

`@soleil/sv-gulp-build` 4 or later (Works best with ^4.3.0).

## Install

`yarn add @soleil-se/app-util@^4.0.0`

## Migration

Migrating from version 2 or 3? See [MIGRATION](/packages/app-util/version-4/migration).

## API

All imports from base package are available both on the server and client.

### appId : `String`

DOM friendly unique identifier for the WebApp.

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


console.log(appId); // For example: 12_682d461b1708a9bb1ea13efd
```

### isOffline : `Boolean`

If the WebApp is running in offline mode or not.

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


console.log(isOffline);  // true or false
```

### isOnline : `Boolean`

If the WebApp is running in online mode or not.

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


console.log(isOnline); // true or false
```

### getNamespace(\[prefix]) ⇨ `String`

Get a prefixed namespace unique for app.

**Returns**: `String` - Prefixed namespace.

| Param     | Type     | Default                       |
| --------- | -------- | ----------------------------- |
| \[prefix] | `string` | `"'app'"` |

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


console.log(getNamespace());
// For example: app_12_682d461b1708a9bb1ea13efd


console.log(getNamespace('input'));
// For example: input_12_682d461b1708a9bb1ea13efd


// If the app is in a decoration template the Portlet ID is the same for all instances, so the ID of the decorated node is used as well.
console.log(getNamespace('decoration'));
// For example: decoration_10_3871c02f1754f3aa8f9d4eb_12_70c3d424173b4900fc550e1c
```

### getRouteUri(route) ⇨ `String`

Get URI for a route.

**Returns**: `String` - URI for route.

| Param | Type     | Description |
| ----- | -------- | ----------- |
| route | `String` | A route.    |

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


console.log(getRouteUri('/items'));
// URI structure: /appresource/<pageId>/<portletId>/items
```

### getViewUri(route) ⇨ `String`

Get URI for a view.

**Returns**: `String` - URI for view.

| Param | Type     | Description |
| ----- | -------- | ----------- |
| route | `String` | A route.    |

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


console.log(getViewUri('/items'));
// URI structure: ?sv.target=<id>&sv.<id>.route=/items
```

### getResourceUri(resource) ⇨ `String`

Get URI for a resource.

**Returns**: `String` - URI for a resource.

| Param    | Type     | Description |
| -------- | -------- | ----------- |
| resource | `String` | A resource. |

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


console.log(getResourceUri('/image.png'));
// URI structure: /webapp-files/<webappname>/<webappversion>/image.png
```

### getAppProps(\[key]) ⇨ `*` | `Object`

Get props that are passed to app when rendering.

**Returns**: `*` | `Object` - Value or object.

| Param  | Type     | Description    |
| ------ | -------- | -------------- |
| \[key] | `String` | Key for value. |

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


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

### getAppData(\[key]) ⇨ `*` | `Object` (DEPRECATED)

Use `getAppProps` instead.

Get props that are passed to app when rendering.

**Returns**: `*` | `Object` - Value or object.

| Param  | Type     | Description    |
| ------ | -------- | -------------- |
| \[key] | `String` | Key for value. |

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


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

## Rendering

* [Render](/packages/app-util/version-4/render)
* [Svelte](/packages/app-util/version-4/svelte)
* [Vue](/packages/app-util/version-4/vue)
* [Underscore](/packages/app-util/version-4/underscore)