@soleil-se/app-util 2.4.0 → 3.0.0

package/CHANGELOG.md

@@ -4,6 +4,16 @@ 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).
 
+## [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.

package/README.md

@@ -1,5 +1,37 @@
 # Webapp Util
 Utility functions for Webapps.
+
+<!-- TOC -->
+
+- [Install](#install)
+- [Changelog](#changelog)
+- [Migration 1.x.x to 2.x.x](#migration-1xx-to-2xx)
+- [Usage](#usage)
+  - [`renderApp([config], [settings])` ⇒ `String`](#renderappconfig-settings-⇒-string)
+    - [Example](#example)
+      - [**Vue**](#vue)
+  - [`getRouteUri(route)` ⇒ `String`](#getrouteuriroute-⇒-string)
+    - [Example](#example-1)
+  - [`getViewUri(route)` ⇒ `String`](#getviewuriroute-⇒-string)
+    - [Example](#example-2)
+  - [`getResourceUri(resource)` ⇒ `String`](#getresourceuriresource-⇒-string)
+    - [Example](#example-3)
+  - [`renderTemplate(template, [values])` ⇒ `String`](#rendertemplatetemplate-values-⇒-string)
+    - [Example](#example-4)
+  - [`isOffline`](#isoffline)
+  - [`isOnline`](#isonline)
+  - [`uniqueId`](#uniqueid)
+- [AppData](#appdata)
+- [Svelte](#svelte)
+  - [Server](#server)
+    - [`render(App, [data], [settings])` ⇒ `String`](#renderapp-data-settings-⇒-string)
+    - [`renderServer(App, [data])` ⇒ `String`](#renderserverapp-data-⇒-string)
+    - [`renderClient(App, [data], [settings])` ⇒ `String`](#renderclientapp-data-settings-⇒-string)
+  - [Client](#client)
+    - [`render(App)`](#renderapp)
+
+<!-- /TOC -->
+
 ## Install
 `yarn add @soleil-se/webapp-util`
 
@@ -20,8 +52,8 @@ See [example](#example).
 import { renderApp, getRouteUri, getViewUri, getResourceUri, renderTemplate, isOffline, isOnline } from '@soleil-se/webapp-util';
 ```
 ### `renderApp([config], [settings])` ⇒ `String`
-Get HTML string for rendering an application.   
-Can be used together with `@soleil-se/webapp-util/render-vue` or a custom render function in the client code. 
+Get HTML string for rendering a client side application.   
+Can be used together with `@soleil-se/webapp-util/render-vue`, `@soleil-se/webapp-util/svelte-client` or a custom render function in the client code. 
 
 **Returns**: <code>String</code> - HTML for rendering an application.
 
@@ -54,7 +86,7 @@ router.get('/', (req, res) => {
 });
 ```
 ##### **Vue**
-In `app_src/client/index.js`.
+In `app_src/client/index.js` or `app_src/main.js`.
 ```javascript
 import render from '@soleil-se/webapp-util/render-vue';
 import App from './App.vue';
@@ -62,24 +94,6 @@ import App from './App.vue';
 render(App);
 ```
 
-##### **App data**
-If you need to use the data that is available for the App you can use `@soleil-se/webapp-util/app-data`.
-
-For example when you need a route URI from the server:
-```javascript
-import AppData from '@soleil-se/webapp-util/app-data';
-import superagent from 'superagent';
-​
-const searchThings = async (query) => {
-  const { body } = await superagent
-    .get(AppData.searchRoute)
-    .query({ query });
-  return body;
-};
-​
-export default searchThings;
-```
-
 ### `getRouteUri(route)` ⇒ `String`
 Get URI for a route, same as `getStandaloneUrl` in SiteVision template.   
 https://developer.sitevision.se/docs/webapps/template#h-Methods
@@ -169,7 +183,8 @@ 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!   
 ### `isOffline`
-If the webapp is running in offline mode or not.
+If the webapp is running in offline mode or not.   
+This value is also passed to AppData.
 
 ```javascript
 if(isOffline) {
@@ -178,10 +193,137 @@ if(isOffline) {
 ```
 
 ### `isOnline`
-If the webapp is running in online mode or not.
+If the webapp is running in online mode or not.   
+This value is also passed to AppData.
 
 ```javascript
 if(isOnline) {
   // Do something
 }
 ```
+
+### `uniqueId`
+A unique ID for the WebApp.    
+This value is also passed to AppData.
+
+## AppData
+`@soleil-se/webapp-util/app-data`   
+Data that is available for the WebApp.   
+```javascript
+import AppData from '@soleil-se/webapp-util/app-data';
+
+// These are avaliable per default:
+const { isOffline, isOnline, uniqueId } = AppData;
+```
+
+All data passed to the app is available in AppData:   
+index.js
+```javascript
+res.send(renderApp({ foo: 'bar' }))
+```
+In app:
+```javascript
+import AppData from '@soleil-se/webapp-util/app-data';
+
+console.log(AppData.foo);
+
+// Or descructured
+const { foo } = AppData;
+console.log(foo);
+```
+
+## Svelte
+Functions for rendering a Svelte application.
+
+### Server 
+`@soleil-se/webapp-util/svelte-server`
+#### `render(App, [data], [settings])` ⇒ `String`
+Get HTML string for rendering a universal Svelte application.   
+To be used together with `@soleil-se/webapp-util/svelte-client`. 
+
+**Returns**: <code>String</code> - HTML for rendering an application.
+
+| Param | Type | Default | Description |
+| --- | --- | --- | --- |
+| [App] | <code>Svelte</code> |  | Svelte application. |
+| [data] | <code>Object</code> | <code>{}</code> | Server data or config that will be available from `@soleil-se/webapp-util/app-data` |
+| [settings] | <code>Object</code> | <code>{}</code> | Settings object. |
+| [settings.async] | <code>Boolean</code> | <code>false</code> | If the app script should be loaded asynchronously. [Read more about async and defer.](https://flaviocopes.com/javascript-async-defer/) |
+| [settings.defer] | <code>Boolean</code> | <code>true</code> | If the app script should be loaded after DOM is ready. [Read more about async and defer.](https://flaviocopes.com/javascript-async-defer/) |
+| [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. |
+
+In `app_src/server/index.js` or `app_src/index.js`.
+```javascript
+import router from 'router';
+import { render } from '@soleil-se/webapp-util/svelte-server';
+
+import App from './App.svelte';
+
+router.get('/', (req, res) => {
+  const data = { foo: 'bar' }; 
+  res.send(renderSvelte(App, data));  
+});
+```
+
+#### `renderServer(App, [data])` ⇒ `String`
+Get HTML string for a server only rendered Svelte application.   
+
+**Returns**: <code>String</code> - HTML for rendering an application.
+
+| Param | Type | Default | Description |
+| --- | --- | --- | --- |
+| [App] | <code>Svelte</code> |  | Svelte application. |
+| [data] | <code>Object</code> | <code>{}</code> | Server data or config that will be available from `@soleil-se/webapp-util/app-data` |
+
+In `app_src/server/index.js` or `app_src/index.js`.
+```javascript
+import router from 'router';
+import { renderServer } from '@soleil-se/webapp-util/svelte-server';
+
+import App from './App.svelte';
+
+router.get('/', (req, res) => {
+  const data = { foo: 'bar' }; 
+  res.send(renderServer(App, data));  
+});
+```
+
+#### `renderClient(App, [data], [settings])` ⇒ `String`
+Get HTML string for a client only rendered Svelte application.   
+Can be used together with `@soleil-se/webapp-util/svelte-client`. 
+
+**Returns**: <code>String</code> - HTML for rendering an application.
+
+| Param | Type | Default | Description |
+| --- | --- | --- | --- |
+| [App] | <code>Svelte</code> |  | Svelte application. |
+| [data] | <code>Object</code> | <code>{}</code> | Server data or config that will be available from `@soleil-se/webapp-util/app-data` |
+| [settings] | <code>Object</code> | <code>{}</code> | Settings object. |
+| [settings.async] | <code>Boolean</code> | <code>false</code> | If the app script should be loaded asynchronously. [Read more about async and defer.](https://flaviocopes.com/javascript-async-defer/) |
+| [settings.defer] | <code>Boolean</code> | <code>true</code> | If the app script should be loaded after DOM is ready. [Read more about async and defer.](https://flaviocopes.com/javascript-async-defer/) |
+| [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. |
+
+In `app_src/server/index.js` or `app_src/index.js`.
+```javascript
+import router from 'router';
+import { renderClient } from '@soleil-se/webapp-util/svelte-server';
+
+import App from './App.svelte';
+
+router.get('/', (req, res) => {
+  const data = { foo: 'bar' }; 
+  res.send(renderSvelte(App, data));  
+});
+```
+
+### Client
+`@soleil-se/webapp-util/svelte-client`
+#### `render(App)`
+In `app_src/client/index.js` or `app_src/main.js`.
+```javascript
+import { render } from '@soleil-se/webapp-util/svelte-client';
+import App from './App.svelte';
+
+render(App);
+```
+

package/app-data/index.js

@@ -1,7 +1,16 @@
 import { parseAttribute } from '../attribute-util';
 
-/**
- * Get appData from the currentScript element.
- * @returns {Object} AppData.
- */
-export default parseAttribute('data-app');
+let appData = {};
+
+export function setAppData(data) {
+  appData = data;
+}
+
+export function getAppData(key) {
+  if (!Object.keys(appData).length && process && process.browser) {
+    setAppData(parseAttribute('data-app'));
+  }
+  return key ? appData[key] : appData;
+}
+
+export default process && process.browser ? parseAttribute('data-app') : appData;

package/attribute-util/index.js

@@ -1,4 +1,3 @@
-const { currentScript } = document;
 /**
  * JSON decode an attribute on the currentScript element.
  * Use if attribute contains a JSON-object.
@@ -6,7 +5,7 @@ const { currentScript } = document;
  * @returns {Object} Decoded JSON object.
  */
 export const decodeAttribute = (attribute) => {
-  const encoded = currentScript.getAttribute(attribute);
+  const encoded = document.currentScript.getAttribute(attribute);
   if (encoded) {
     return decodeURIComponent(encoded);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soleil-se/app-util",
-  "version": "2.4.0",
+  "version": "3.0.0",
   "description": "Utility functions for Webapps.",
   "main": "./src/index.js",
   "author": "Soleil AB",
@@ -10,11 +10,11 @@
   ],
   "license": "UNLICENSED",
   "private": false,
-  "homepage": "https://github.com/soleilit/server-monorepo/tree/master/packages/app-util",
+  "homepage": "https://github.com/soleilit/server-monorepo/tree/app-util/next/packages/webapp-util#readme",
   "dependencies": {
     "current-script-polyfill": "^1.0.0"
   },
-  "optionalDependencies": {
+  "peerDependencies": {
     "vue": "^2.6.11"
   },
   "devDependencies": {}

package/render-vue/index.js

@@ -1,8 +1,11 @@
 import 'current-script-polyfill';
 import Vue from 'vue';
 
-import { decodeAttribute } from '../attribute-util';
-import appData from '../app-data';
+import { decodeAttribute, parseAttribute } from '../attribute-util';
+import { setAppData } from '../app-data';
+
+const options = parseAttribute('data-app');
+setAppData(options);
 
 const offlineModeMixin = {
   mounted() {
@@ -23,7 +26,6 @@ const offlineModeMixin = {
  */
 export default function render(App) {
   const selector = decodeAttribute('data-selector');
-  const options = appData;
 
   Object.assign(App, options, {
     mixins: [offlineModeMixin],

package/src/index.js

@@ -13,7 +13,19 @@ export const isOffline = VersionUtil.getCurrentVersion() === VersionUtil.OFFLINE
 export const isOnline = !isOffline;
 
 const currentPortlet = PortletContextUtil.getCurrentPortlet();
-const portletId = currentPortlet ? currentPortlet.getIdentifier().replace('.', '_') : '';
+
+const getUniqueId = () => {
+  const id = (currentPortlet ? currentPortlet.getIdentifier() : appInfo['jcr:uuid']).replace('.', '_');
+  const decoratedNode = PortletContextUtil.getCurrentDecoratedNode();
+
+  if (decoratedNode) {
+    return `${decoratedNode.getIdentifier().replace('.', '_')}_${id}`;
+  }
+  return id;
+};
+
+
+export const uniqueId = getUniqueId();
 
 /**
  * Get URI for a resource.
@@ -39,7 +51,8 @@ export function renderTemplate(template, values = {}) {
 
 /**
  * Get a HTML string for rendering an application.
- * @param {Object} [data={}] Server config or data that will be available in the attribute
+ * @param {Svelte} [App] Svelte application.
+ * @param {Object} [data={}] Server config or data that will be available in the attribute.
  * `data-app` on currentScript. In Vue it will also be available in the `$options` object.
  * @param {Object} [settings={}] Settings object.
  * @param {String} [settings.noScript=''] HTML that will be rendered when JavaScript
@@ -56,7 +69,8 @@ export function renderTemplate(template, values = {}) {
  */
 export function renderApp(data, {
   noScript = '',
-  selector = `[data-portlet-id="${portletId}"]`,
+  html = '',
+  selector = `[data-portlet-id="${uniqueId}"]`,
   async = false,
   defer = true,
   req,
@@ -71,25 +85,31 @@ export function renderApp(data, {
     return /Trident\/|MSIE/.test(userAgent);
   };
 
+  const getHtml = () => (html || (noScript ? `<noscript>${noScript}</noscript>` : ''));
+
+  const appData = {
+    ...data, isOffline, isOnline, uniqueId,
+  };
+
   if (isOffline) {
     return `
-<div data-portlet-id="${portletId}">${noScript}</div>
+<div data-portlet-id="${uniqueId}">${getHtml()}</div>
 <script>
   window.svDocReady(function() {
-    var targetElement = document.querySelector('[data-portlet-id="${portletId}"]');
-    var script = document.createElement('script');
-    script.src = '${getResourceUri('client/index.js')}?${appInfo.appImportDate}${portletId.replace('_', '')}';
-    script.setAttribute('data-app', '${encodeURIComponent(JSON.stringify({ ...data, isOffline }))}');
-    script.setAttribute('data-selector', '${encodeURIComponent(selector)}');
+    var targetElement = document.querySelector('[data-portlet-id="${uniqueId}"]');
+    var script = document.createElement("script");
+    script.src = "${getResourceUri('client/index.js')}?${appInfo.appImportDate}${uniqueId.replace('_', '')}";
+    script.setAttribute("data-app", "${encodeURIComponent(JSON.stringify(appData))}");
+    script.setAttribute("data-selector", "${encodeURIComponent(selector)}");
     targetElement.parentNode.insertBefore(script, targetElement.nextSibling);
   });
 </script>`;
   }
   return `
-<div data-portlet-id="${portletId}"><noscript>${noScript}</noscript></div>
+<div data-portlet-id="${uniqueId}">${getHtml()}</div>
 <script 
-  src="${getResourceUri('client/index.js')}?${appInfo.appImportDate}${isIE() ? portletId.replace('_', '') : ''}" 
-  data-app="${encodeURIComponent(JSON.stringify({ ...data, isOffline }))}" 
+  src="${getResourceUri('client/index.js')}?${appInfo.appImportDate}${isIE() ? uniqueId.replace('_', '') : ''}" 
+  data-app="${encodeURIComponent(JSON.stringify(appData))}" 
   data-selector="${encodeURIComponent(selector)}" 
   ${async && !defer ? 'async' : ''} 
   ${defer ? 'defer' : ''}>

package/svelte-client/.eslintrc

@@ -0,0 +1,4 @@
+{
+  "extends": "@soleil/eslint-config-sitevision/client",
+  "root": true  
+}

package/svelte-client/index.js

@@ -0,0 +1,31 @@
+/* eslint-disable import/prefer-default-export */
+import 'current-script-polyfill';
+
+import { decodeAttribute, parseAttribute } from '../attribute-util';
+import { setAppData } from '../app-data';
+
+const props = parseAttribute('data-app');
+setAppData(props);
+
+/**
+ * Render a Svelte application
+ * @param {Svelte} App Svelte application to be started.
+ */
+export function render(App) {
+  const selector = decodeAttribute('data-selector');
+
+  const mountElement = document.querySelector(selector);
+  const hydrate = mountElement.childElementCount > 0;
+  if (mountElement) {
+    return new App({
+      hydrate,
+      target: document.querySelector(selector),
+      props,
+    });
+  }
+  return document.addEventListener('DOMContentLoaded', () => new App({
+    hydrate,
+    target: document.querySelector(selector),
+    props,
+  }));
+}

package/svelte-server/index.js

@@ -0,0 +1,26 @@
+import appResource from 'appResource';
+import { setAppData } from '../app-data';
+import {
+  renderApp, isOffline, isOnline, uniqueId,
+} from '../src';
+
+export function renderClient(data, settings) {
+  return renderApp(data, settings);
+}
+
+export function renderServer(App, data) {
+  const appData = {
+    ...data, isOffline, isOnline, uniqueId,
+  };
+  setAppData(appData);
+  const { html } = App.render(appData);
+  return html;
+}
+
+export function render(App, data, settings) {
+  const html = renderServer(App, data);
+  if (appResource.getNode('client/index.js')) {
+    return renderClient(data, { html, ...settings });
+  }
+  return html;
+}