@soleil-se/app-util 4.1.3 → 4.2.0

package/CHANGELOG.md

@@ -1,107 +1,172 @@
 # Changelog
+
 All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [4.1.4] - 2021-08-20
+
+### Added
+
+- `getAppProps` for getting props passed to the app when rendering.
+
+### Changed
+
+- `getAppData` deprecated due to confusion, use `getAppProps` instead.
+
+## [4.1.4] - 2021-05-25
+
+### Fixed
+
+- Return empty object instead of undefined when app data isn't set.
+
+### Removed
+
+- Remove `vue` as optional dependency.
+
 ## [4.1.3] - 2021-03-31
+
 ### Fixed
+
 - Consistent rendering when using `serverServer` and `render` for Svelte.
 
 ### Added
+
 - Docs for Svelte `renderServer` function.
 
 ## [4.1.2] - 2021-02-24
+
 ### Fixed
+
 - Escape tags when parsing data to prevent closure of script tags.
 
 ## [4.1.1] - 2021-02-17
+
 ### Fixed
+
 - Validation error for `id` on script tags, even though it's allowed.
 
 ## [4.1.0] - 2021-02-17
+
 ### Changed
+
 - Put app data and metadata in script elements instead of data attributes.
 
 ## [4.0.1] - 2021-01-28
+
 ### Fixed
+
 - Crashes when no data is passed to app and then trying to call `getAppData`.
 
 ## [4.0.0] - 2021-01-27
-A much needed major overhaul of the package.   
+
+A much needed major overhaul of the package.
 See [MIGRATION](./MIGRATION.md).
 
 ### Changed
+
 - Major refactoring of package.
-- Exports for render functions are moved. 
+- Exports for render functions are moved.
 - All documented constants and functions from base import (`@soleil-api/webapp-util`) now works both in a server and client context.
 - Settings for selector is moved from server to client rendering functions.
 
 ### Removed
+
 - `noScript` option in `render` (formerly `renderApp`) has been removed. If a no script message is needed use the `html` option wrapped in `<noscript>`.
 - `@soleil-api/webapp-util/app-data` has been removed, use [getAppData](./README.md#getAppData) from `@soleil-api/webapp-util`.
 
 ## [3.0.3] - 2020-11-03
+
 - Nothing, Lerna wanted to publish...
 
 ## [3.0.2] - 2020-10-19
+
 - Nothing, Lerna wanted to publish...
 
 ## [3.0.1] - 2020-09-28
+
 ### Added
+
 - Homepage link
 
 ## [3.0.0] - 2020-09-28
+
 ### Added
+
 - Svelte support.
 - New exports:
   - `uniqueId` - A unique id for the app instance.
 
 ## [2.4.1] - 2020-09-01
+
 ### Fixed
+
 - App data with single quotes crashes app in edit mode, use double quotes instead.
 
 ## [2.4.0] - 2020-05-26
+
 ### Fixed
+
 - `getViewUri` returns correct URI when in offline mode and in the Addons view.
 
 ## [2.3.0] - 2020-05-22
+
 ### Added
-- `renderApp` now accepts `req` as a setting to opimize script loading when multiple instances of the app exists. If `req` is present the script will only be loaded once in all browsers except IE11 that needs a unique script src for the currentScript polyfill to work. 
+
+- `renderApp` now accepts `req` as a setting to opimize script loading when multiple instances of the app exists. If `req` is present the script will only be loaded once in all browsers except IE11 that needs a unique script src for the currentScript polyfill to work.
 
 ### Fixed
+
 - `noScript` in `renderApp` was not wrapped in a `<noscript>` tag.
 
 ## [2.2.0] - 2020-05-20
+
 ### Added
+
 - `renderTemplate` function is now available inside templates rendered by the function.
+
 ## [2.1.4] - 2020-04-07
+
 ### Fixed
+
 - `getViewUri` had incorrect portlet ID.
+
 ## [2.1.3] - 2020-02-25
+
 ### Fixed
+
 - Add timestamp to script url in edit mode as well.
 
 ## [2.1.2] - 2020-02-21
+
 ### Fixed
+
 - Wrapped `renderApp` script in svDocReady in edit mode to be sure it executes when other bundles are loaded.
 
 ## [2.1.1] - 2020-02-14
+
 ### Changed
+
 - Updated readme, heading levels and examples.
 
 ## [2.1.0] - 2020-02-14
+
 ### Added
+
 - App data import in client, `@soleil-api/webapp-util/app-data`.
 - `getViewUri` to get the URI that also renders the page.
 - `isOnline` to see if the app is online.
 
 ### Changed
+
 - `vue` is now an optional depedency.  
 
 ## [2.0.0] - 2020-02-12
+
 ### Changed
+
 - Now using `currentScript` to reference the script element the app is running in to pass data when using `renderApp`.
 - `renderApp` is no longer using appName.
-- `render` is now called directly in `./app_src/client/index.js`. 
-- `render` and `App` no longer needs to be exported from `./app_src/client/index.js`. 
+- `render` is now called directly in `./app_src/client/index.js`.
+- `render` and `App` no longer needs to be exported from `./app_src/client/index.js`.

package/README.md

@@ -1,40 +1,28 @@
+
 # `@soleil-se/webapp-util@^4.0.0`
+
 Utility functions for Webapps.
 
-[GitHub](https://github.com/soleilit/server-monorepo/tree/master/packages/webapp-util)    
+[GitHub](https://github.com/soleilit/server-monorepo/tree/master/packages/webapp-util)
 [NPM](https://www.npmjs.com/package/@soleil-se/webapp-util)
 
-<!-- TOC -->
-
-- [Requirements](#requirements)
-- [Install](#install)
-- [Migration](#migration)
-- [API](#api)
-  - [Constants](#constants)
-  - [Functions](#functions)
-  - [appId : <code>String</code>](#appid--codestringcode)
-  - [isOffline : <code>Boolean</code>](#isoffline--codebooleancode)
-  - [isOnline : <code>Boolean</code>](#isonline--codebooleancode)
-  - [getNamespace([prefix]) ⇒ <code>String</code>](#getnamespaceprefix-⇒-codestringcode)
-  - [getRouteUri(route) ⇒ <code>String</code>](#getrouteuriroute-⇒-codestringcode)
-  - [getViewUri(route) ⇒ <code>String</code>](#getviewuriroute-⇒-codestringcode)
-  - [getResourceUri(resource) ⇒ <code>String</code>](#getresourceuriresource-⇒-codestringcode)
-  - [getAppData([key]) ⇒ <code>\*</code> \| <code>Object</code>](#getappdatakey-⇒-code\code-\-codeobjectcode)
-- [Rendering](#rendering)
-
-<!-- /TOC -->
+
 
 ## Requirements
+
 `@soleil-se/sv-gulp-build` 4 or later (Works best with ^4.3.0).
 
 ## Install
+
 `yarn add @soleil-se/webapp-util`
 
 ## Migration
-Migrating from version 2 or 3?   
+
+Migrating from version 2 or 3?
 See [MIGRATION](./MIGRATION.md).
 
 ## API
+
 All imports from base package are available both on the server and client.
 
 ### Constants
@@ -58,22 +46,26 @@ All imports from base package are available both on the server and client.
 <dd><p>Get a prefixed namespace unique for app.</p>
 </dd>
 <dt><a href="#getRouteUri">getRouteUri(route)</a> ⇒ <code>String</code></dt>
-<dd><p>Get URI for a route, same as <code>getStandaloneUrl</code> in SiteVision template.</p>
+<dd><p>Get URI for a route.
 </dd>
 <dt><a href="#getViewUri">getViewUri(route)</a> ⇒ <code>String</code></dt>
-<dd><p>Get URI for a view, same as <code>getUrl</code> in SiteVision template.</p>
+<dd><p>Get URI for a view.
 </dd>
 <dt><a href="#getResourceUri">getResourceUri(resource)</a> ⇒ <code>String</code></dt>
 <dd><p>Get URI for a resource.</p>
 </dd>
-<dt><a href="#getAppData">getAppData([key])</a> ⇒ <code>*</code> | <code>Object</code></dt>
-<dd><p>Get appData value or object.</p>
+<dt><a href="#getAppProps">getAppProps([key])</a> ⇒ <code>*</code> | <code>Object</code></dt>
+<dd><p>Get props that are passed to app when rendering.</p>
+</dd>
+<dt><del><a href="#getAppData">getAppData([key])</a> ⇒ <code>*</code> | <code>Object</code></del></dt>
+<dd><p>Get props that are passed to app when rendering.</p>
 </dd>
 </dl>
 
 <a name="appId"></a>
 
-### appId : <code>String</code>
+### appId : `String`
+
 DOM friendly unique identifier for the WebApp.
 
 ```js
@@ -84,7 +76,8 @@ console.log(appId); // For example: 12_682d461b1708a9bb1ea13efd
 
 <a name="isOffline"></a>
 
-### isOffline : <code>Boolean</code>
+### isOffline : `Boolean`
+
 If the WebApp is running in offline mode or not.
 
 ```js
@@ -95,7 +88,8 @@ console.log(isOffline);  // true or false
 
 <a name="isOnline"></a>
 
-### isOnline : <code>Boolean</code>
+### isOnline : `Boolean`
+
 If the WebApp is running in online mode or not.
 
 ```js
@@ -104,14 +98,15 @@ import { isOnline } from '@soleil-se/webapp-util';
 console.log(isOnline); // true or false
 ```
 
-### getNamespace([prefix]) ⇒ <code>String</code>
+### getNamespace([prefix]) ⇒ `String`
+
 Get a prefixed namespace unique for app.
 
-**Returns**: <code>String</code> - Prefixed namespace.
+**Returns**: `String` - Prefixed namespace.
 
 | Param | Type | Default |
 | --- | --- | --- |
-| [prefix] | <code>string</code> | <code>&quot;&#x27;app&#x27;&quot;</code> |
+| [prefix] | `string` | `&quot;&#x27;app&#x27;&quot;` |
 
 ```js
 import { getNamespace } from '@soleil-se/webapp-util';
@@ -129,14 +124,15 @@ console.log(getNamespace('decoration'));
 
 <a name="getRouteUri"></a>
 
-### getRouteUri(route) ⇒ <code>String</code>
-Get URI for a route, same as `getStandaloneUrl` in SiteVision template.
+### getRouteUri(route) ⇒ `String`
 
-**Returns**: <code>String</code> - URI for route.
+Get URI for a route.
+
+**Returns**: `String` - URI for route.
 
 | Param | Type | Description |
 | --- | --- | --- |
-| route | <code>String</code> | A route. |
+| route | `String` | A route. |
 
 ```js
 import { getRouteUri } from '@soleil-se/webapp-util';
@@ -147,14 +143,15 @@ console.log(getRouteUri('/items'));
 
 <a name="getViewUri"></a>
 
-### getViewUri(route) ⇒ <code>String</code>
-Get URI for a view, same as `getUrl` in SiteVision template.
+### getViewUri(route) ⇒ `String`
+
+Get URI for a view.
 
-**Returns**: <code>String</code> - URI for view.
+**Returns**: `String` - URI for view.
 
 | Param | Type | Description |
 | --- | --- | --- |
-| route | <code>String</code> | A route. |
+| route | `String` | A route. |
 
 ```js
 import { getViewUri } from '@soleil-se/webapp-util';
@@ -164,14 +161,16 @@ console.log(getViewUri('/items'));
 ```
 
 <a name="getResourceUri"></a>
-### getResourceUri(resource) ⇒ <code>String</code>
+
+### getResourceUri(resource) ⇒ `String`
+
 Get URI for a resource.
 
-**Returns**: <code>String</code> - URI for a resource.
+**Returns**: `String` - URI for a resource.
 
 | Param | Type | Description |
 | --- | --- | --- |
-| resource | <code>String</code> | A resource. |
+| resource | `String` | A resource. |
 
 ```js
 import { getResourceUri } from '@soleil-se/webapp-util';
@@ -180,16 +179,40 @@ console.log(getResourceUri('/image.png'));
 // URI structure: /webapp-files/<webappname>/<webappversion>/image.png
 ```
 
+<a name="getAppProps"></a>
+
+### 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/webapp-util';
+
+// Get value with key
+const myValue = getAppProps('myValue');
+// Or with destructuring
+const { myValue } = getAppProps();
+```
+
 <a name="getAppData"></a>
 
-### getAppData([key]) ⇒ <code>\*</code> \| <code>Object</code>
-Get appData value or object that is passed to app when rendering.
+### getAppData([key]) ⇒ `*` | `Object` (DEPRECATED)
+
+Use [getAppProps](#getAppProps) instead.  
 
-**Returns**: <code>\*</code> \| <code>Object</code> - Value or object.
+Get props that are passed to app when rendering.
+
+**Returns**: `*` | `Object` - Value or object.
 
 | Param | Type | Description |
 | --- | --- | --- |
-| [key] | <code>String</code> | Key for value. |
+| [key] | `String` | Key for value. |
 
 ```js
 import { getAppData } from '@soleil-se/webapp-util';
@@ -202,8 +225,7 @@ const { myValue } = getAppData();
 
 ## Rendering
 
-* [Render](./docs/1.render.md)
-* [Svelte](./docs/2.svelte.md)
-* [Vue](./docs/3.vue.md)
-* [Underscore](./docs/4.underscore.md)
-
+- [Render](./docs/1.render.md)
+- [Svelte](./docs/2.svelte.md)
+- [Vue](./docs/3.vue.md)
+- [Underscore](./docs/4.underscore.md)

package/client/svelte/index.js

@@ -1,5 +1,5 @@
 /* eslint-disable import/prefer-default-export */
-import { appId, getAppData } from '../../common';
+import { appId, getAppProps } from '../../common';
 
 /**
  * Renders a client side Svelte application.
@@ -16,7 +16,7 @@ export function render(App, {
 } = {}) {
   const target = document.querySelector(selector);
   const hydrate = target.childElementCount > 0;
-  const props = getAppData();
+  const props = getAppProps();
   return new App({
     hydrate,
     target,

package/client/vue/index.js

@@ -2,7 +2,7 @@
 /* eslint-disable-next-line import/no-unresolved, import/no-extraneous-dependencies */
 import Vue from 'vue';
 
-import { appId, getAppData, isOffline } from '../../common';
+import { appId, getAppProps, isOffline } from '../../common';
 
 const offlineModeMixin = {
   mounted() {
@@ -22,9 +22,10 @@ const offlineModeMixin = {
  * @param {String} [settings.selector=`#app_mount_${appId}`] Query selector for mount element.
  */
 export function render(App, { selector = `#app_mount_${appId}` } = {}) {
-  const options = getAppData();
+  const options = getAppProps();
 
   Object.assign(App, options, {
+    propsData: options,
     mixins: isOffline ? [offlineModeMixin] : [],
   });
 

package/common/index.js

@@ -62,7 +62,7 @@ export function getNamespace(prefix = 'app') {
 }
 
 /**
- * Get URI for a route, same as `getStandaloneUrl` in SiteVision template.
+ * Get URI for a route.
  * @param {String} route A route.
  * @returns {String} URI for route.
  */
@@ -75,14 +75,14 @@ export function getRouteUri(route = '') {
         .getStandaloneUrl(path !== '' ? `/${path}` : path)
         .replace(trailingSlashes, '');
     }
-    // If SiteVision 7 or older.
+    // If Sitevision 7 or older.
     return getLegacyRouteUri(path);
   }
   return `${appMetadata.baseRouteUri}/${path}`;
 }
 
 /**
- * Get URI for a view, same as `getUrl` in SiteVision template.
+ * Get URI for a view.
  * @param {String} route A route.
  * @returns {String} URI for view.
  */
@@ -92,7 +92,7 @@ export function getViewUri(route = '') {
     if (router.getUrl) {
       return router.getUrl(route);
     }
-    // If SiteVision 7 or older.
+    // If Sitevision 7 or older.
     return getLegacyViewUri(route, { isOffline });
   }
   return appMetadata.baseViewUri + route;
@@ -124,21 +124,30 @@ export function getAppMetadata() {
   };
 }
 
-let appData = process.browser ? parseJson('app_data') : undefined;
+let appProps = process.browser ? parseJson('app_props') : {};
 
-export function setAppData(data) {
-  appData = data;
+export function setAppProps(data) {
+  appProps = data;
 }
 
 /**
- * Get appData value or object that is passed to app when rendering.
- * @export
+ * Get props that are passed to app when rendering.
+ * @param {String} [key] Key for value.
+ * @returns {*|Object} Value or object.
+ */
+export function getAppProps(key) {
+  if (process.browser && !appProps) {
+    setAppProps(parseJson('app_props'));
+  }
+  return key ? appProps[key] : appProps;
+}
+
+/**
+ * Get props that are passed to app when rendering.
+ * @deprecated Use `getAppProps` instead.
  * @param {String} [key] - Key for value.
- * @return {*|Object} - Value or object.
+ * @return {*|Object} Value or object.
  */
 export function getAppData(key) {
-  if (process.browser && !appData) {
-    setAppData(parseJson('app_data'));
-  }
-  return key ? appData[key] : appData;
+  return getAppProps(key);
 }

package/docs/1.render.md

@@ -1,12 +1,15 @@
 # Render
-Returns HTML for a script tag with the possibility to pass data from the server.    
+
+Returns HTML for a script tag with the possibility to pass data from the server.
 Framework agnostic.
 
-Server data is embedded as JSON in script tags.   
-https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#embedding_data_in_html
+Server data is embedded as JSON in script tags.
+<https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#embedding_data_in_html>
 
 ## index.js
-### render([data], [settings]) ⇒ <code>String</code>
+
+### render([props], [settings]) ⇒ <code>String</code>
+
 `@soleil-api/webapp-util/server`  
 
 Get a HTML string for rendering an application.
@@ -15,40 +18,41 @@ Get a HTML string for rendering an application.
 
 | Param | Type | Default | Description |
 | --- | --- | --- | --- |
-| [data] | <code>Object</code> | <code>{}</code> | Server data that will be available in the attribute. `data-app-data` on the script tag. |
+| [props] | <code>Object</code> | <code>{}</code> | Props that will be passed to the app |
 | [settings] | <code>Object</code> | <code>{}</code> | Settings object. |
 | [settings.html] | <code>String</code> | <code>&#x27;&#x27;</code> | HTML that will be rendered inside mount element. |
 | [settings.async] | <code>Boolean</code> | <code>false</code> | If the app script should be loaded asynchronously.  |
 | [settings.defer] | <code>Boolean</code> | <code>true</code> | If the app script should be loaded after DOM is ready.  |
-| [settings.req] | <code>Object</code> |  | The req object from SiteVision, pass this to optimize browser specific script loading if you have multiple instances of the app. |
+| [settings.req] | <code>Object</code> |  | 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/)
 
 ### Example
 
 ```js
-import router from 'router';
+import router from '@Sitevision/api/common/router';
 import { render } from '@soleil-api/webapp-util/server';
 
 router.get('/', (req, res) => {
-  const data = { foo: 'bar' };  
-  res.send(render(data));  
+  const props = { foo: 'bar' };  
+  res.send(render(props));  
 };
 ```
 
 **All settings**
+
 ```js
-import router from 'router';
+import router from '@Sitevision/api/common/router';
 import { render } from '@soleil-api/webapp-util/server';
 
 router.get('/', (req, res) => {
-  const data = { foo: 'bar' };  
+  const props = { foo: 'bar' };  
   const settings = {
     html: '<noscript>You can put a noscript message here for example!</noscript>',   
     async: false,
     defer: true,
     req,
   }
-  res.send(render(data, settings));  
+  res.send(render(props, settings));  
 };
 ```

package/docs/2.svelte.md

@@ -1,13 +1,16 @@
 # Svelte
-SiteVision supports both server and client side rendering with Svelte.
 
-## index.js 
+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](./1.render.md).
 
 ### `render(App, [props], [settings])`
-`@soleil-api/webapp-util/server/svelte`   
 
-Get a HTML string for rendering a universal Svelte application.    
+`@soleil-api/webapp-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**: <code>String</code> - HTML for rendering a Svelte application.
@@ -15,31 +18,33 @@ If a client bundle is available the server rendered HTML will be hydrated and no
 | Param | Type | Default | Description |
 | --- | --- | --- | --- |
 | [App] | <code>Svelte</code> | | Svelte app to be rendered. |
-| [props] | <code>Object</code> | <code>{}</code> | Server data that will be available as props and as app data. |
+| [props] | <code>Object</code> | <code>{}</code> | Props that will be passed to the app. |
 | [settings] | <code>Object</code> | <code>{}</code> | Settings object. Forwarded to  |
 | [settings.async] | <code>Boolean</code> | <code>false</code> | If the app script should be loaded asynchronously. |
 | [settings.defer] | <code>Boolean</code> | <code>true</code> | If the app script should be loaded after DOM is ready. |
-| [settings.req] | <code>Object</code> |  | The req object from SiteVision, pass this to optimize browser specific script loading if you have multiple instances of the app. |
+| [settings.req] | <code>Object</code> |  | 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 'router';
+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, data));  
+  res.send(render(App, props));  
 });
 ```
 
 ### `renderServer(App, [props])`
-`@soleil-api/webapp-util/server/svelte`   
 
-Get a HTML string for rendering a server side Svelte application.   
+`@soleil-api/webapp-util/server/svelte`
+
+Get a HTML string for rendering a server side Svelte application.
 
 **Returns**: <code>String</code> - HTML for rendering a Svelte application.
 
@@ -49,21 +54,23 @@ Get a HTML string for rendering a server side Svelte application.
 | [props] | <code>Object</code> | <code>{}</code> | 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 'router';
+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(render(App, data));  
+  res.send(render(App, props));  
 });
 ```
 
 ## main.js
 
 ### `render(App, [settings])`
+
 `@soleil-api/webapp-util/client/svelte`
 
 Renders a client side Svelte application.
@@ -77,8 +84,8 @@ Renders a client side Svelte application.
 | [settings.selector] | <code>String</code> | <code>&#x60;#app_mount_${appId}&#x60;</code> | Query selector for mount element. |
 | [settings.intro] | <code>String</code> | <code>false</code> | 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-api/webapp-util/client/svelte';
 import App from './App.svelte';
@@ -87,6 +94,7 @@ render(App);
 ```
 
 Mount the app in another element:
+
 ```javascript
 import { render } from '@soleil-api/webapp-util/client/svelte';
 import App from './App.svelte';

package/docs/3.vue.md

@@ -1,12 +1,15 @@
 # Vue
-SiteVision supports client side rendering with Vue.
 
-## index.js 
+Sitevision supports client side rendering with Vue.
+
+## index.js
+
 For rendering a client side only app use the framework agnostic [client renderer](./1.render.md).
 
 ## main.js
 
 ### `render(App, [settings])`
+
 `@soleil-api/webapp-util/client/vue`
 Renders a client side Vue application.
 
@@ -17,6 +20,7 @@ Renders a client side Vue application.
 | [settings.selector] | <code>String</code> | <code>&#x60;#app_mount_${appId}&#x60;</code> | Query selector for mount element. |
 
 In `app_src/main.js` or `app_src/client/index.js`.
+
 ```javascript
 import { render } from '@soleil-api/webapp-util/client/vue';
 import App from './App.vue';
@@ -25,10 +29,10 @@ render(App);
 ```
 
 Mount the app in another element:
+
 ```javascript
 import { render } from '@soleil-api/webapp-util/client/vue';
 import App from './App.vue';
 
 render(App, { selector: '#mount_app_here' });
 ```
-

package/docs/4.underscore.md

@@ -1,9 +1,11 @@
 # Underscore
+
 Render a Underscore template.
 
-## `renderTemplate(template, [values])` ⇒ `String`   
-Renders a Underscore template and returns a string.   
-This function is also available inside the template.   
+## `renderTemplate(template, [values])` ⇒ `String`
+
+Renders a Underscore template and returns a string.
+This function is also available inside the template.
 
 **Returns**: `String` - Rendered template
 
@@ -13,7 +15,9 @@ This function is also available inside the template.
 | [values] | `Object` | `{}` | Values. |
 
 ### Examples
+
 **Simple example**
+
 ```javascript
 import { renderTemplate } from '@soleil-api/webapp-util/server';
 
@@ -21,13 +25,16 @@ const string = renderTemplate('<div><%= foo %></div>', {
   foo: 'bar',
 });
 ```
+
 **Multiple templates**
+
 ```html
 /* views/item.html */
 <li>
   <%- name %>
 </li>
 ```
+
 ```html
 /* views/main.html */
 <ul>
@@ -36,6 +43,7 @@ const string = renderTemplate('<div><%= foo %></div>', {
   <% }); %>
 </ul>
 ```
+
 ```javascript
 import { renderTemplate } from '@soleil-api/webapp-util/server';
 import mainTemplate from './views/main.html';
@@ -44,5 +52,6 @@ import itemTemplate from './views/item.html';
 const items = [{ name: 'Foo' }, { name: 'Bar' }, { name: 'Baz' }];
 const string = renderTemplate(mainTemplate, { items, itemTemplate });
 ```
-> **NOTE**   
-> Remember that the second argument must be an object and that objects properties are accessed directly in any child templates!   
+
+> **NOTE**
+> Remember that the second argument must be an object and that objects properties are accessed directly in any child templates!

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@soleil-se/app-util",
-  "version": "4.1.3",
-  "description": "Utility functions for Webapps.",
+  "version": "4.2.0",
+  "description": "Utility and rendering functions for WebApps.",
   "main": "./common/index.js",
   "author": "Soleil AB",
   "contributors": [
@@ -11,10 +11,7 @@
   "license": "UNLICENSED",
   "private": false,
   "homepage": "https://docs.soleilit.se/03.packages/@soleil-api&app-util",
-  "optionalDependencies": {
-    "vue": "^2.6.11"
-  },
-  "gitHead": "9fc1fba75e8419058746c7170dcf96ea6c78f4eb",
+  "gitHead": "56b2bb3947dc881fa4dbed17b6cb9cf90a8d0a85",
   "dependencies": {},
   "devDependencies": {}
 }

package/server/index.js

@@ -1,7 +1,4 @@
 import { appImportDate } from 'appInfo';
-/* Underscore is provided by SiteVision */
-/* eslint-disable-next-line import/no-extraneous-dependencies */
-import _ from 'underscore';
 import {
   appId, isOffline, getResourceUri, getAppMetadata,
 } from '../common';
@@ -18,8 +15,7 @@ const escapeTags = (unsafe) => unsafe
 
 /**
  * Get a HTML string for rendering an application.
- * @param {Object} [data={}] Server data that will be available in the attribute.
- * `data-app-data` on the script tag.
+ * @param {Object} [props={}] Props that will be passed to the app.
  * @param {Object} [settings={}] Settings object.
  * @param {String} [settings.html=''] HTML that will be rendered inside mount element.
  * where the app should be mounted.
@@ -27,11 +23,11 @@ const escapeTags = (unsafe) => unsafe
  * [Read more about async and defer.](https://flaviocopes.com/javascript-async-defer/)
  * @param {Boolean} [settings.defer=true] If the app script should be loaded after DOM is ready.
  * [Read more about async and defer.](https://flaviocopes.com/javascript-async-defer/)
- * @param {Object} [settings.req] The req object from SiteVision, pass this to optimize browser
+ * @param {Object} [settings.req] The req object from Sitevision, pass this to optimize browser
  * specific script loading if you have multiple instances of the app.
  * @returns {String} HTML for rendering an application.
  */
-export function render(data, {
+export function render(props, {
   html = '',
   async = false,
   defer = true,
@@ -41,13 +37,13 @@ export function render(data, {
 
   const mountElement = `<div id="app_mount_${appId}">${html}</div>`;
   const metaScriptTag = `<script data-id="app_meta_${appId}" type="application/json">${JSON.stringify(appMetadata)}</script>`;
-  const dataScriptTag = data ? `<script data-id="app_data_${appId}" type="application/json">${escapeTags(JSON.stringify(data))}</script>` : '';
+  const propsScriptTag = props ? `<script data-id="app_props_${appId}" type="application/json">${escapeTags(JSON.stringify(props))}</script>` : '';
 
   if (isOffline) {
     return `
 ${mountElement}
 ${metaScriptTag}
-${dataScriptTag}
+${propsScriptTag}
 <script>
   window.svDocReady(function() {
     var targetElement = document.getElementById('app_mount_${appId}');
@@ -61,7 +57,7 @@ ${dataScriptTag}
   return `
 ${mountElement}
 ${metaScriptTag}
-${dataScriptTag}
+${propsScriptTag}
 <script 
   src="${getResourceUri('client/index.js')}?${appImportDate}${isIE(req) ? appId : ''}"  
   data-app-id="${appId}" 
@@ -77,6 +73,9 @@ ${dataScriptTag}
  * @returns {String} Rendered template
  */
 export function renderTemplate(template, values = {}) {
+  // Import undercore dynamically in the rare case this function is still used.
+  // eslint-disable-next-line global-require
+  const _ = require('undercore');
   if (typeof template === 'function') {
     return template({ ...values, renderTemplate });
   }

package/server/svelte/index.js

@@ -1,10 +1,9 @@
-/* eslint-disable import/prefer-default-export */
 import appResource from 'appResource';
-import { appId, setAppData } from '../../common';
+import { appId, setAppProps } from '../../common';
 import { render as renderClient } from '../index';
 
 const initSSR = (App, props) => {
-  setAppData(props);
+  setAppProps(props);
   return App.render(props).html;
 };
 
@@ -12,7 +11,7 @@ const initSSR = (App, props) => {
  * SSR Svelte App.
  * @export
  * @param {SvelteComponent} App - Svelte component that is root of app.
- * @param {Object} [props] - Properties available on root component. Also forwarded as appData.
+ * @param {Object} [props] - Props available on root component. Also avaliable with getAppProps.
  * @return {String} - HTML for rendering a Svelte application.
  */
 export function renderServer(App, props = {}) {
@@ -24,8 +23,8 @@ export function renderServer(App, props = {}) {
  * Render a Svelte App.
  * @export
  * @param {SvelteComponent} App - Svelte component that is root of app.
- * @param {Object} [props] - Properties available on root component. Also forwarded as appData.
- * @param {Object} [settings] - Settings forwarded to render function for client app.
+ * @param {Object} [props] - Props available on root component. Also avaliable with getAppProps.
+ * @param {Object} [settings] - Settings for rendering a client app.
  * @return {String} - HTML for rendering a Svelte application.
  */
 export function render(App, props = {}, settings) {