@soleil-se/app-util 2.2.0 → 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,
   }));
 });
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soleil-se/app-util",
-  "version": "2.2.0",
+  "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';
@@ -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' : ''}