@soleil-se/app-util 2.1.4 → 2.3.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).
 
+## [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. 
+
+### 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.

package/README.md

@@ -33,6 +33,7 @@ Can be used together with `@soleil-se/webapp-util/render-vue` or a custom render
 | [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. [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. |
 
 #### Example
 In `app_src/server/index.js`.
@@ -48,6 +49,7 @@ router.get('/', (req, res) => {
     selector: '#mount_me_here',
     async: false,
     defer: true,
+    req,
   }));
 });
 ```
@@ -123,7 +125,8 @@ Get URI for a resource.
 const resourceUri = getResourceUri('file/in/resource.png');
 ```
 ### `renderTemplate(template, [values])` ⇒ `String`
-Renders a Underscore template and returns a string.
+Renders a Underscore template and returns a string.   
+This function is also available inside the template.
 
 **Returns**: `String` - Rendered template
 
@@ -133,11 +136,38 @@ Renders a Underscore template and returns a string.
 | [values] | `Object` | `{}` | Values. |
 
 #### Example
+**Simple example**
 ```javascript
 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-se/webapp-util';
+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!   
 ### `isOffline`
 If the webapp is running in offline mode or not.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soleil-se/app-util",
-  "version": "2.1.4",
+  "version": "2.3.0",
   "description": "Utility functions for Webapps.",
   "main": "./src/index.js",
   "author": "Soleil AB",

package/src/index.js

@@ -2,6 +2,7 @@ import PortletContextUtil from 'PortletContextUtil';
 import PropertyUtil from 'PropertyUtil';
 import VersionUtil from 'VersionUtil';
 import appInfo from 'appInfo';
+
 /* Underscore is provided by SiteVision */
 /* eslint-disable-next-line import/no-extraneous-dependencies */
 import _ from 'underscore';
@@ -31,9 +32,9 @@ export function getResourceUri(resource) {
  */
 export function renderTemplate(template, values = {}) {
   if (typeof template === 'function') {
-    return template(values);
+    return template({ ...values, renderTemplate });
   }
-  return _.template(template)(values);
+  return _.template(template)(({ ...values, renderTemplate }));
 }
 
 /**
@@ -49,6 +50,8 @@ export function renderTemplate(template, values = {}) {
  * [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 renderApp(data, {
@@ -56,10 +59,18 @@ export function renderApp(data, {
   selector = `[data-portlet-id="${portletId}"]`,
   async = false,
   defer = true,
+  req,
 } = {}) {
   if (typeof data === 'string') {
     throw new Error('As of version 2 renderApp no longer needs the application name.');
   }
+
+  const isIE = () => {
+    if (!req) return true;
+    const userAgent = req.header('user-agent');
+    return /Trident\/|MSIE/.test(userAgent);
+  };
+
   if (isOffline) {
     return `
 <div data-portlet-id="${portletId}">${noScript}</div>
@@ -75,9 +86,9 @@ export function renderApp(data, {
 </script>`;
   }
   return `
-<div data-portlet-id="${portletId}">${noScript}</div>
+<div data-portlet-id="${portletId}"><noscript>${noScript}</noscript></div>
 <script 
-  src="${getResourceUri('client/index.js')}?${appInfo.appImportDate}${portletId.replace('_', '')}" 
+  src="${getResourceUri('client/index.js')}?${appInfo.appImportDate}${isIE() ? portletId.replace('_', '') : ''}" 
   data-app="${encodeURIComponent(JSON.stringify({ ...data, isOffline }))}" 
   data-selector="${encodeURIComponent(selector)}" 
   ${async && !defer ? 'async' : ''}