@soleil-se/app-util 4.0.0 → 4.1.0

package/CHANGELOG.md

@@ -4,6 +4,14 @@ 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.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.   
 See [MIGRATION](./MIGRATION.md).
@@ -12,6 +20,7 @@ See [MIGRATION](./MIGRATION.md).
 - Major refactoring of package.
 - 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>`.

package/MIGRATION.md

@@ -5,6 +5,8 @@ Migration from version 2 or 3 to 4.
 <!-- TOC -->
 
 - [renderApp](#renderapp)
+  - [Export](#export)
+  - [Settings](#settings)
 - [renderTemplate](#rendertemplate)
 - [getRouteUri](#getrouteuri)
 - [AppData](#appdata)
@@ -18,6 +20,7 @@ Migration from version 2 or 3 to 4.
 <!-- /TOC -->
 
 ## renderApp
+### Export
 Export moved and renamed.
 
 Old:
@@ -28,6 +31,23 @@ New:
 ```js
 import { render } from '@soleil-api/webapp-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-api/webapp-util/client/vue';
+import App from './App.vue';
+
+render(App, { selector: '#mount_app_here' });
+```
+
 ## renderTemplate
 Export moved.   
 

package/client/svelte/index.js

@@ -1,27 +1,26 @@
 /* eslint-disable import/prefer-default-export */
-import { decodeAttribute } from '../attribute-util';
-import { getAppData } from '../../common';
+import { appId, getAppData } from '../../common';
 
 /**
- * Renders a Svelte application
- * @param {Svelte} App Svelte application to be started.
+ * Renders a client side Svelte application.
+ * @param {*} App Svelte app root component.
+ * @param {Object} [settings={}] Settings object.
+ * @param {String} [settings.selector=`#app_mount_${appId}`] Query selector for mount element.
+ * @param {String} [settings.intro=false] If true, will play transitions on initial render,
+ * rather than waiting for subsequent state changes.
+ * @return {*} Initialized Svelte component.
  */
-export function render(App) {
-  const selector = decodeAttribute('data-selector');
-
-  const mountElement = document.querySelector(selector);
-  const hydrate = mountElement.childElementCount > 0;
+export function render(App, {
+  selector = `#app_mount_${appId}`,
+  intro = false,
+} = {}) {
+  const target = document.querySelector(selector);
+  const hydrate = target.childElementCount > 0;
   const props = getAppData();
-  if (mountElement) {
-    return new App({
-      hydrate,
-      target: document.querySelector(selector),
-      props,
-    });
-  }
-  return document.addEventListener('DOMContentLoaded', () => new App({
+  return new App({
     hydrate,
-    target: document.querySelector(selector),
+    target,
     props,
-  }));
+    intro,
+  });
 }

package/client/{attribute-util → utils}/index.js

@@ -6,7 +6,7 @@ import getCurrentScript from './getCurrentScript';
  * @param {String} attribute Attribute to decode.
  * @returns {Object} Decoded JSON object.
  */
-export const decodeAttribute = (attribute) => {
+export const getAttribute = (attribute) => {
   const currentScript = getCurrentScript();
   const encoded = currentScript.getAttribute(attribute);
   if (encoded) {
@@ -15,10 +15,7 @@ export const decodeAttribute = (attribute) => {
   return undefined;
 };
 
-/**
- * Parse an attribute on the currentScript element.
- * Us if the attribute is a String.
- * @param {String} attribute
- * @returns {String} Parsed attribute value.
- */
-export const parseAttribute = (attribute) => JSON.parse(decodeAttribute(attribute));
+export const parseJson = (type) => {
+  const id = getAttribute('data-app-id');
+  return JSON.parse(document.getElementById(`${type}_${id}`)?.textContent || '{}');
+};

package/client/vue/index.js

@@ -1,42 +1,32 @@
 /* eslint-disable import/prefer-default-export */
-/* eslint-disable-next-line import/no-unresolved */
+/* eslint-disable-next-line import/no-unresolved, import/no-extraneous-dependencies */
 import Vue from 'vue';
 
-import { decodeAttribute } from '../attribute-util';
-import { getAppData, isOffline } from '../../common';
+import { appId, getAppData, isOffline } from '../../common';
 
 const offlineModeMixin = {
   mounted() {
-    if (isOffline) {
-      const $anchors = this.$el.querySelectorAll('a');
-      $anchors.forEach(($anchor) => {
-        $anchor.addEventListener('click', (e) => {
-          e.preventDefault();
-          window.$svjq($anchor).trigger('click');
-        }, false);
-      });
-    }
+    const $anchors = this.$el.querySelectorAll('a');
+    $anchors.forEach(($anchor) => {
+      $anchor.addEventListener('click', (e) => {
+        e.preventDefault();
+        window.$svjq($anchor).trigger('click');
+      }, false);
+    });
   },
 };
 /**
- * Render a Vue application
- * @param {Vue} App Vue application to be started.
+ * Renders a client side Vue application.
+ * @param {*} App Vue app root component.
+ * @param {Object} [settings={}] Settings object.
+ * @param {String} [settings.selector=`#app_mount_${appId}`] Query selector for mount element.
  */
-export function render(App) {
-  const selector = decodeAttribute('data-selector');
+export function render(App, { selector = `#app_mount_${appId}` } = {}) {
   const options = getAppData();
 
   Object.assign(App, options, {
-    mixins: [offlineModeMixin],
+    mixins: isOffline ? [offlineModeMixin] : [],
   });
 
-  const mountElementExists = !!document.querySelector(selector);
-
-  if (mountElementExists) {
-    new Vue(App).$mount(selector);
-  } else {
-    document.addEventListener('DOMContentLoaded', () => {
-      new Vue(App).$mount(selector);
-    });
-  }
+  new Vue(App).$mount(selector);
 }

package/common/index.js

@@ -1,9 +1,9 @@
 /* eslint-disable global-require */
-import { parseAttribute } from '../client/attribute-util';
+import { parseJson } from '../client/utils';
 import getLegacyRouteUri from './legacy/getRouteUri';
 import getLegacyViewUri from './legacy/getViewUri';
 
-const appMetadata = process.browser ? parseAttribute('data-metadata') : {};
+const appMetadata = process.browser ? parseJson('app_meta') : {};
 
 /**
  * Get an ID for the app.
@@ -124,7 +124,7 @@ export function getAppMetadata() {
   };
 }
 
-let appData = process.browser ? parseAttribute('data-app-data') : {};
+let appData = process.browser ? parseJson('app_data') : undefined;
 
 export function setAppData(data) {
   appData = data;
@@ -137,8 +137,8 @@ export function setAppData(data) {
  * @return {*|Object} - Value or object.
  */
 export function getAppData(key) {
-  if (process.browser && !Object.keys(appData).length) {
-    setAppData(parseAttribute('data-options'));
+  if (process.browser && !appData) {
+    setAppData(parseJson('app_data'));
   }
   return key ? appData[key] : appData;
 }

package/docs/1.render.md

@@ -1,6 +1,6 @@
 # Render
 Returns HTML for a script tag with server data avaliable as attributes on the tag.    
-Framework independent
+Framework agnostic.
 
 ## index.js
 ### render([data], [settings]) ⇒ <code>String</code>
@@ -15,7 +15,6 @@ Get a HTML string for rendering an application.
 | [data] | <code>Object</code> | <code>{}</code> | Server data that will be available in the attribute. `data-app-data` on the script tag. |
 | [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.selector] | <code>String</code> | <code>&#x60;[data-portlet-id&#x3D;&quot;${portletId}&quot;]&#x60;</code> | Query selector for where the app should be mounted. |
 | [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. |
@@ -42,8 +41,7 @@ import { render } from '@soleil-api/webapp-util/server';
 router.get('/', (req, res) => {
   const data = { foo: 'bar' };  
   const settings = {
-    html: '<noscript>You can put a noscript message here for example!</noscript>',
-    selector: '#mount_me_here',
+    html: '<noscript>You can put a noscript message here for example!</noscript>',   
     async: false,
     defer: true,
     req,

package/docs/2.svelte.md

@@ -2,9 +2,9 @@
 SiteVision supports both server and client side rendering with Svelte.
 
 ## index.js 
-For rendering a client side only app use the framework independent [client renderer](./1.render.md).
+For rendering a client side only app use the framework agnostic [client renderer](./1.render.md).
 
-### `render(App, [props], [settings])` ⇒ `String`
+### `render(App, [props], [settings])`
 `@soleil-api/webapp-util/server/svelte`   
 
 Get a HTML string for rendering a universal Svelte application.    
@@ -16,7 +16,6 @@ If a client bundle is available the server rendered HTML will be hydrated and no
 | --- | --- | --- | --- |
 | [props] | <code>Object</code> | <code>{}</code> | Server data that will be available as props and as app data. |
 | [settings] | <code>Object</code> | <code>{}</code> | Settings object. Forwarded to  |
-| [settings.selector] | <code>String</code> | <code>&#x60;[data-portlet-id&#x3D;&quot;${portletId}&quot;]&#x60;</code> | Query selector for where the app should be mounted. |
 | [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. |
@@ -38,10 +37,20 @@ router.get('/', (req, res) => {
 
 ## main.js
 
-### `render(App)`
+### `render(App, [settings])`
 `@soleil-api/webapp-util/client/svelte`
 
-Renders the client side app.
+Renders a client side Svelte application.
+
+**Returns**: <code>\*</code> - Initialized Svelte component.
+
+| Param | Type | Default | Description |
+| --- | --- | --- | --- |
+| App | <code>\*</code> |  | Svelte app root component. |
+| [settings] | <code>Object</code> | <code>{}</code> | Settings object. |
+| [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
@@ -50,3 +59,11 @@ import App from './App.svelte';
 
 render(App);
 ```
+
+Mount the app in another element:
+```javascript
+import { render } from '@soleil-api/webapp-util/client/svelte';
+import App from './App.svelte';
+
+render(App, { selector: '#mount_app_here' });
+```

package/docs/3.vue.md

@@ -2,13 +2,19 @@
 SiteVision supports client side rendering with Vue.
 
 ## index.js 
-For rendering a client side only app use the framework independent [client renderer](./1.render.md).
+For rendering a client side only app use the framework agnostic [client renderer](./1.render.md).
 
 ## main.js
-### `render(App)`
+
+### `render(App, [settings])`
 `@soleil-api/webapp-util/client/vue`
+Renders a client side Vue application.
 
-Renders the client side app.
+| Param | Type | Default | Description |
+| --- | --- | --- | --- |
+| App | <code>\*</code> |  | Vue app root component. |
+| [settings] | <code>Object</code> | <code>{}</code> | Settings object. |
+| [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
@@ -17,3 +23,12 @@ import App from './App.vue';
 
 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soleil-se/app-util",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "description": "Utility functions for Webapps.",
   "main": "./common/index.js",
   "author": "Soleil AB",
@@ -14,7 +14,7 @@
   "optionalDependencies": {
     "vue": "^2.6.11"
   },
-  "gitHead": "a59289650f6f1c5277566106c29fb8db01fbebd1",
+  "gitHead": "5248563f9ecdec86866cb5cd361990c5ff8626a5",
   "dependencies": {},
   "devDependencies": {}
 }

package/server/index.js

@@ -18,7 +18,6 @@ const isIE = (req) => {
  * `data-app-data` on the script tag.
  * @param {Object} [settings={}] Settings object.
  * @param {String} [settings.html=''] HTML that will be rendered inside mount element.
- * @param {String} [settings.selector=`[data-portlet-id="${portletId}"]`] Query selector for
  * where the app should be mounted.
  * @param {Boolean} [settings.async=false] If the app script should be loaded asynchronously.
  * [Read more about async and defer.](https://flaviocopes.com/javascript-async-defer/)
@@ -30,35 +29,38 @@ const isIE = (req) => {
  */
 export function render(data, {
   html = '',
-  selector = `[data-portlet-id="${appId}"]`,
   async = false,
   defer = true,
   req,
 } = {}) {
   const appMetadata = getAppMetadata();
 
+  const mountElement = `<div id="app_mount_${appId}">${html}</div>`;
+  const metaScriptTag = `<script id="app_meta_${appId}" type="application/json">${JSON.stringify(appMetadata)}</script>`;
+  const dataScriptTag = data ? `<script id="app_data_${appId}" type="application/json">${JSON.stringify(data)}</script>` : '';
+
   if (isOffline) {
     return `
-<div data-portlet-id="${appId}">${html}</div>
+${mountElement}
+${metaScriptTag}
+${dataScriptTag}
 <script>
   window.svDocReady(function() {
-    var targetElement = document.querySelector('[data-portlet-id="${appId}"]');
+    var targetElement = document.getElementById('app_mount_${appId}');
     var script = document.createElement("script");
     script.src = "${getResourceUri('client/index.js')}?${appImportDate}${appId}";
-    script.setAttribute("data-metadata", "${encodeURIComponent(JSON.stringify(appMetadata))}");
-    script.setAttribute("data-app-data", "${encodeURIComponent(JSON.stringify(data))}");
-    script.setAttribute("data-selector", "${encodeURIComponent(selector)}");
+    script.setAttribute("data-app-id", "${appId}");  
     targetElement.parentNode.insertBefore(script, targetElement.nextSibling);
   });
 </script>`;
   }
   return `
-<div data-portlet-id="${appId}">${html}</div>
+${mountElement}
+${metaScriptTag}
+${dataScriptTag}
 <script 
-  src="${getResourceUri('client/index.js')}?${appImportDate}${isIE(req) ? appId : ''}" 
-  data-metadata="${encodeURIComponent(JSON.stringify(appMetadata))}" 
-  data-app-data="${encodeURIComponent(JSON.stringify(data))}" 
-  data-selector="${encodeURIComponent(selector)}" 
+  src="${getResourceUri('client/index.js')}?${appImportDate}${isIE(req) ? appId : ''}"  
+  data-app-id="${appId}" 
   ${async && !defer ? 'async' : ''} 
   ${defer ? 'defer' : ''}>
 </script>`;