@soleil-se/app-util 3.0.2 → 4.0.0

package/client/attribute-util/getCurrentScript.js

@@ -0,0 +1,56 @@
+/* Scoped version of https://github.com/amiller-gh/currentScript-polyfill */
+// document.currentScript polyfill by Adam Miller
+// MIT license
+
+export default function getCurrentScript() {
+  if (!('currentScript' in document)) {
+    // IE 8-10 support script readyState
+    // IE 11+ support stack trace
+    try {
+      throw new Error();
+    } catch (err) {
+      // Find the second match for the "at" string to get file src url from stack.
+      // Specifically works with the format of stack traces in IE.
+      let i = 0;
+      const stackDetails = (/.*at [^(]*\((.*):(.+):(.+)\)$/ig).exec(err.stack);
+      const scriptLocation = (stackDetails && stackDetails[1]) || false;
+      const line = (stackDetails && stackDetails[2]) || false;
+      const currentLocation = document.location.href.replace(document.location.hash, '');
+      let pageSource;
+      let inlineScriptSourceRegExp;
+      let inlineScriptSource;
+      const scripts = document.getElementsByTagName('script'); // Live NodeList collection
+
+      if (scriptLocation === currentLocation) {
+        pageSource = document.documentElement.outerHTML;
+        inlineScriptSourceRegExp = new RegExp(`(?:[^\\n]+?\\n){0,${line - 2}}[^<]*<script>([\\d\\D]*?)<\\/script>[\\d\\D]*`, 'i');
+        inlineScriptSource = pageSource.replace(inlineScriptSourceRegExp, '$1').trim();
+      }
+
+      for (; i < scripts.length; i += 1) {
+        // If ready state is interactive, return the script tag
+        if (scripts[i].readyState === 'interactive') {
+          return scripts[i];
+        }
+
+        // If src matches, return the script tag
+        if (scripts[i].src === scriptLocation) {
+          return scripts[i];
+        }
+
+        // If inline source matches, return the script tag
+        if (
+          scriptLocation === currentLocation
+          && scripts[i].innerHTML
+          && scripts[i].innerHTML.trim() === inlineScriptSource
+        ) {
+          return scripts[i];
+        }
+      }
+
+      // If no match, return null
+      return null;
+    }
+  }
+  return document.currentScript;
+}

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

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

package/{svelte-client → client/svelte}/index.js

@@ -1,14 +1,9 @@
 /* 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);
+import { decodeAttribute } from '../attribute-util';
+import { getAppData } from '../../common';
 
 /**
- * Render a Svelte application
+ * Renders a Svelte application
  * @param {Svelte} App Svelte application to be started.
  */
 export function render(App) {
@@ -16,6 +11,7 @@ export function render(App) {
 
   const mountElement = document.querySelector(selector);
   const hydrate = mountElement.childElementCount > 0;
+  const props = getAppData();
   if (mountElement) {
     return new App({
       hydrate,

package/{render-vue → client/vue}/index.js

@@ -1,15 +1,13 @@
-import 'current-script-polyfill';
+/* eslint-disable import/prefer-default-export */
+/* eslint-disable-next-line import/no-unresolved */
 import Vue from 'vue';
 
-import { decodeAttribute, parseAttribute } from '../attribute-util';
-import { setAppData } from '../app-data';
-
-const options = parseAttribute('data-app');
-setAppData(options);
+import { decodeAttribute } from '../attribute-util';
+import { getAppData, isOffline } from '../../common';
 
 const offlineModeMixin = {
   mounted() {
-    if (this.$options.isOffline) {
+    if (isOffline) {
       const $anchors = this.$el.querySelectorAll('a');
       $anchors.forEach(($anchor) => {
         $anchor.addEventListener('click', (e) => {
@@ -24,8 +22,9 @@ const offlineModeMixin = {
  * Render a Vue application
  * @param {Vue} App Vue application to be started.
  */
-export default function render(App) {
+export function render(App) {
   const selector = decodeAttribute('data-selector');
+  const options = getAppData();
 
   Object.assign(App, options, {
     mixins: [offlineModeMixin],

package/common/index.js

@@ -0,0 +1,144 @@
+/* eslint-disable global-require */
+import { parseAttribute } from '../client/attribute-util';
+import getLegacyRouteUri from './legacy/getRouteUri';
+import getLegacyViewUri from './legacy/getViewUri';
+
+const appMetadata = process.browser ? parseAttribute('data-metadata') : {};
+
+/**
+ * Get an ID for the app.
+ * @return {String} ID
+ */
+const getAppId = () => {
+  const PortletContextUtil = require('PortletContextUtil');
+  const id = (PortletContextUtil.getPortletNamespace('') || 'ADDON_PREVIEW').replace('.', '_');
+  const decoratedNode = PortletContextUtil.getCurrentDecoratedNode();
+
+  if (decoratedNode) {
+    return `${decoratedNode.getIdentifier().replace('.', '_')}_${id}`;
+  }
+  return id;
+};
+
+/**
+ * Regex for selecting leading slashes
+ * @constant {Regex}
+ */
+const leadingSlashes = /^(\/)*/g;
+
+/**
+ * Regex for selecting trailing slashes
+ * @constant {Regex}
+ */
+const trailingSlashes = /(\/)*$/g;
+
+/**
+ * DOM friendly unique identifier for the WebApp.
+ * @constant {String}
+ */
+export const appId = process.server ? getAppId() : appMetadata.id;
+
+/**
+ * If the WebApp is running in offline mode or not.
+ * @constant {Boolean}
+ */
+export const isOffline = process.server
+  ? require('VersionUtil').getCurrentVersion() === require('VersionUtil').OFFLINE_VERSION
+  : appMetadata.isOffline;
+
+/**
+ * If the WebApp is running in online mode or not.
+ * @constant {Boolean}
+ */
+export const isOnline = !isOffline;
+
+/**
+ * Get a prefixed namespace unique for app.
+ * @param {string} [prefix='app']
+ * @return {String} - Prefixed namespace.
+ */
+export function getNamespace(prefix = 'app') {
+  return `${prefix}_${appId}`;
+}
+
+/**
+ * Get URI for a route, same as `getStandaloneUrl` in SiteVision template.
+ * @param {String} route A route.
+ * @returns {String} URI for route.
+ */
+export function getRouteUri(route = '') {
+  const path = route.replace(leadingSlashes, '');
+  if (process.server) {
+    const router = require('router');
+    if (router.getStandaloneUrl) {
+      return router
+        .getStandaloneUrl(path !== '' ? `/${path}` : path)
+        .replace(trailingSlashes, '');
+    }
+    // If SiteVision 7 or older.
+    return getLegacyRouteUri(path);
+  }
+  return `${appMetadata.baseRouteUri}/${path}`;
+}
+
+/**
+ * Get URI for a view, same as `getUrl` in SiteVision template.
+ * @param {String} route A route.
+ * @returns {String} URI for view.
+ */
+export function getViewUri(route = '') {
+  if (process.server) {
+    const router = require('router');
+    if (router.getUrl) {
+      return router.getUrl(route);
+    }
+    // If SiteVision 7 or older.
+    return getLegacyViewUri(route, { isOffline });
+  }
+  return appMetadata.baseViewUri + route;
+}
+
+/**
+ * Get URI for a resource.
+ * @param {String} resource A resource.
+ * @returns {String} URI for a resource.
+ */
+export function getResourceUri(resource = '') {
+  const path = resource.replace(leadingSlashes, '');
+  if (process.server) {
+    const appInfo = require('appInfo');
+    return `/webapp-files/${appInfo.appIdentifier}/${appInfo.appVersion}/${path}`
+      .replace(trailingSlashes, '');
+  }
+  return `${appMetadata.baseResourceUri}/${path}`;
+}
+
+export function getAppMetadata() {
+  return {
+    id: appId,
+    isOffline,
+    isOnline,
+    baseRouteUri: getRouteUri(),
+    baseViewUri: getViewUri(),
+    baseResourceUri: getResourceUri(),
+  };
+}
+
+let appData = process.browser ? parseAttribute('data-app-data') : {};
+
+export function setAppData(data) {
+  appData = data;
+}
+
+/**
+ * Get appData value or object that is passed to app when rendering.
+ * @export
+ * @param {String} [key] - Key for value.
+ * @return {*|Object} - Value or object.
+ */
+export function getAppData(key) {
+  if (process.browser && !Object.keys(appData).length) {
+    setAppData(parseAttribute('data-options'));
+  }
+  return key ? appData[key] : appData;
+}

package/common/legacy/getRouteUri.js

@@ -0,0 +1,19 @@
+/* eslint-disable global-require */
+
+/**
+ * Regex for selecting trailing slashes
+ * @constant {Regex}
+ */
+const trailingSlashes = /(\/)*$/g;
+
+export default function getRouteUri(route) {
+  const PortletContextUtil = require('PortletContextUtil');
+  const currentPage = PortletContextUtil.getCurrentPage();
+  const currentPortlet = PortletContextUtil.getCurrentPortlet();
+  if (currentPage && currentPortlet) {
+    const currentPageId = currentPage.getIdentifier().replace('_sitePage', '');
+    const currentPortletId = currentPortlet.getIdentifier();
+    return `/appresource/${currentPageId}/${currentPortletId}/${route}`.replace(trailingSlashes, '');
+  }
+  return '/';
+}

package/common/legacy/getViewUri.js

@@ -0,0 +1,21 @@
+/* eslint-disable global-require */
+
+export default function getViewUri(route, { isOffline }) {
+  const PortletContextUtil = require('PortletContextUtil');
+  const PropertyUtil = require('PropertyUtil');
+  const appInfo = require('appInfo');
+  const currentPage = PortletContextUtil.getCurrentPage();
+  const currentPortlet = PortletContextUtil.getCurrentPortlet();
+
+  if (currentPage && currentPortlet) {
+    const currentPageId = currentPage.getIdentifier().replace('_sitePage', '');
+    const currentPageUri = PropertyUtil.getString(currentPage, 'URI');
+    const currentPortletId = PortletContextUtil.getCurrentPortlet().getIdentifier();
+    if (isOffline) {
+      return `/edit-offline/${currentPageId}?sv.target=${currentPortletId}&sv.${currentPortletId}.route=${encodeURI(route)}`;
+    }
+    return `${currentPageUri}?sv.target=${currentPortletId}&sv.${currentPortletId}.route=${encodeURI(route)}`;
+  }
+  const addonId = appInfo['jcr:uuid'];
+  return `/edit-web-app-offline/${addonId}?sv.target=${addonId}&sv.${addonId}.route=${encodeURI(route)}`;
+}

package/docs/1.render.md

@@ -0,0 +1,53 @@
+# Render
+Returns HTML for a script tag with server data avaliable as attributes on the tag.    
+Framework independent
+
+## index.js
+### render([data], [settings]) ⇒ <code>String</code>
+`@soleil-api/webapp-util/server`  
+
+Get a HTML string for rendering an application.
+
+**Returns**: <code>String</code> - HTML 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. |
+| [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. |
+
+[Read more about async and defer.](https://flaviocopes.com/javascript-async-defer/)
+
+### Example
+
+```js
+import router from 'router';
+import { render } from '@soleil-api/webapp-util/server';
+
+router.get('/', (req, res) => {
+  const data = { foo: 'bar' };  
+  res.send(render(data));  
+};
+```
+
+**All settings**
+```js
+import router from 'router';
+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',
+    async: false,
+    defer: true,
+    req,
+  }
+  res.send(render(data, settings));  
+};
+```

package/docs/2.svelte.md

@@ -0,0 +1,52 @@
+# Svelte
+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).
+
+### `render(App, [props], [settings])` ⇒ `String`
+`@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.
+
+| Param | Type | Default | Description |
+| --- | --- | --- | --- |
+| [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. |
+
+[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 { 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));  
+});
+```
+
+## main.js
+
+### `render(App)`
+`@soleil-api/webapp-util/client/svelte`
+
+Renders the client side app.
+
+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';
+
+render(App);
+```

package/docs/3.vue.md

@@ -0,0 +1,19 @@
+# Vue
+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).
+
+## main.js
+### `render(App)`
+`@soleil-api/webapp-util/client/vue`
+
+Renders the client side app.
+
+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';
+
+render(App);
+```

package/docs/4.underscore.md

@@ -0,0 +1,48 @@
+# 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.   
+
+**Returns**: `String` - Rendered template
+
+| Param | Type | Default | Description |
+| --- | --- | --- | --- |
+| template | `String` |  | Underscore template. |
+| [values] | `Object` | `{}` | Values. |
+
+### Examples
+**Simple example**
+```javascript
+import { renderTemplate } from '@soleil-api/webapp-util/server';
+
+const string = renderTemplate('<div><%= foo %></div>', {
+  foo: 'bar',
+});
+```
+**Multiple templates**
+```html
+/* views/item.html */
+<li>
+  <%- name %>
+</li>
+```
+```html
+/* views/main.html */
+<ul>
+  <% items.forEach(function(item) { %>
+    <%= renderTemplate(itemTemplate, item) %>
+  <% }); %>
+</ul>
+```
+```javascript
+import { renderTemplate } from '@soleil-api/webapp-util/server';
+import mainTemplate from './views/main.html';
+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!   

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@soleil-se/app-util",
-  "version": "3.0.2",
+  "version": "4.0.0",
   "description": "Utility functions for Webapps.",
-  "main": "./src/index.js",
+  "main": "./common/index.js",
   "author": "Soleil AB",
   "contributors": [
     "Kimmy Monassar",
@@ -10,13 +10,11 @@
   ],
   "license": "UNLICENSED",
   "private": false,
-  "homepage": "https://github.com/soleilit/server-monorepo/tree/master/packages/app-util#readme",
-  "dependencies": {
-    "current-script-polyfill": "^1.0.0"
-  },
-  "peerDependencies": {
+  "homepage": "https://docs.soleilit.se/03.packages/@soleil-api&app-util",
+  "optionalDependencies": {
     "vue": "^2.6.11"
   },
-  "gitHead": "70fb8e9913e3cee064f5987a0e8157a5115ff29a",
+  "gitHead": "a59289650f6f1c5277566106c29fb8db01fbebd1",
+  "dependencies": {},
   "devDependencies": {}
 }

package/server/index.js

@@ -0,0 +1,78 @@
+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';
+
+const isIE = (req) => {
+  if (!req) return true;
+  const userAgent = req.header('user-agent');
+  return /Trident\/|MSIE/.test(userAgent);
+};
+
+/**
+ * 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} [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/)
+ * @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
+ * specific script loading if you have multiple instances of the app.
+ * @returns {String} HTML for rendering an application.
+ */
+export function render(data, {
+  html = '',
+  selector = `[data-portlet-id="${appId}"]`,
+  async = false,
+  defer = true,
+  req,
+} = {}) {
+  const appMetadata = getAppMetadata();
+
+  if (isOffline) {
+    return `
+<div data-portlet-id="${appId}">${html}</div>
+<script>
+  window.svDocReady(function() {
+    var targetElement = document.querySelector('[data-portlet-id="${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)}");
+    targetElement.parentNode.insertBefore(script, targetElement.nextSibling);
+  });
+</script>`;
+  }
+  return `
+<div data-portlet-id="${appId}">${html}</div>
+<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)}" 
+  ${async && !defer ? 'async' : ''} 
+  ${defer ? 'defer' : ''}>
+</script>`;
+}
+
+/**
+ * Renders a Underscore template and returns a string.
+ * @param {String} template Underscore template.
+ * @param {Object} [values={}] Values.
+ * @returns {String} Rendered template
+ */
+export function renderTemplate(template, values = {}) {
+  if (typeof template === 'function') {
+    return template({ ...values, renderTemplate });
+  }
+  return _.template(template)(({ ...values, renderTemplate }));
+}

package/server/svelte/index.js

@@ -0,0 +1,33 @@
+/* eslint-disable import/prefer-default-export */
+import appResource from 'appResource';
+import { setAppData } from '../../common';
+import { render as renderClient } from '../index';
+
+/**
+ * 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.
+ * @return {String} - HTML for rendering a Svelte application.
+ */
+export function renderServer(App, props = {}) {
+  setAppData(props);
+  const { html } = App.render(props);
+  return html;
+}
+
+/**
+ * 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.
+ * @return {String} - HTML for rendering a Svelte application.
+ */
+export function render(App, props = {}, settings) {
+  const html = renderServer(App, props);
+  if (appResource.getNode('client/index.js')) {
+    return renderClient(props, { ...settings, html });
+  }
+  return html;
+}

package/app-data/.eslintrc

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

package/app-data/index.js

@@ -1,16 +0,0 @@
-import { parseAttribute } from '../attribute-util';
-
-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/.eslintrc

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