@soleil-se/app-util 1.1.0 → 1.1.2

package/dist/index.js

@@ -39,7 +39,15 @@ export function renderTemplate(template, values) {
  * Get HTML for rendering a Vue application.
  * @param {String} name Name of the app, has to match the name of the Vue application.
  * @param {Object} data Data that will be available in `$options`.
- * @param {String} [noScript=''] HTML that will be printed when JavaScript is not available.
+ * @param {Object} settings Settings object.
+ * @param {String} [settings.noScript=''] HTML that will be rendered when JavaScript
+ * is not available.
+ * @param {String} [settings.selector=`[data-vue-portlet="${portletId}"]`] Query selector for
+ * where the app should be mounted.
+ * @param {Boolean} [settings.async=true] If the app script should be loaded asynchronously.
+ * [Read more about async and defer.](https://flaviocopes.com/javascript-async-defer/)
+ * @param {Boolean} [settings.defer=false] If the app script should be loaded after DOM is ready.
+ * [Read more about async and defer.](https://flaviocopes.com/javascript-async-defer/)
  * @returns {String} HTML for rendering a Vue application.
  */
 export function renderVue(name, data, ref) {
@@ -51,8 +59,11 @@ export function renderVue(name, data, ref) {
 
   var options = Object.assign({}, {webapp: app, isOffline: isOffline}, data);
   var vueUri = getResourceUri('vue/index.js');
-  var html = "\n<!-- Generated by WebappUtil.renderVue() -->\n<div data-vue-portlet=\"" + portletId + "\">" + noScript + "</div>\n<script>\n  function renderVue" + portletId + "() {\n    vueApps['" + name + "'].render('" + name + "', '" + selector + "', " + (JSON.stringify(options)) + ");\n  }  \n</script>\n<script src=\"" + vueUri + "\" " + (async ? 'async' : '') + " " + (defer ? 'defer' : '') + " onload=\"renderVue" + portletId + "();\"></script>\n";
-  return html;
+
+  if (isOffline) {
+    return ("\n<!-- Generated by WebappUtil.renderVue() -->\n<div data-vue-portlet=\"" + portletId + "\">" + noScript + "</div>\n<script src=\"" + vueUri + "\"></script>\n<script>  \n    vueApps['" + name + "'].render('" + name + "', '" + selector + "', " + (JSON.stringify(options)) + ");\n</script>\n");
+  }
+  return ("\n<!-- Generated by WebappUtil.renderVue() -->\n<div data-vue-portlet=\"" + portletId + "\">" + noScript + "</div>\n<script>\n  function renderVue" + portletId + "() {\n    vueApps['" + name + "'].render('" + name + "', '" + selector + "', " + (JSON.stringify(options)) + ");\n  }  \n</script>\n<script src=\"" + vueUri + "\" " + (async && !defer ? 'async' : '') + " " + (defer ? 'defer' : '') + " onload=\"renderVue" + portletId + "();\"></script>\n");
 }
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soleil-se/app-util",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "main": "./dist/index.js",
   "author": "Soleil AB",
   "license": "UNLICENSED",

package/render-vue/index.js

@@ -1,3 +1,4 @@
+/* eslint-disable-next-line import/no-unresolved */
 import Vue from 'vue';
 
 window.vueApps = window.vueApps || {};
@@ -15,7 +16,12 @@ var offlineModeMixin = {
     }
   },
 };
-
+/**
+ * Render a Vue application
+ * @param {String} name Name of the application, has to match both on server and client.
+ * @param {String} selector Selector for element where the app should be mounted.
+ * @param {Object} [options={}] Options for `$options`.
+ */
 export default function render(name, selector, options) {
   if ( options === void 0 ) options = {};
 

package/src/index.js

@@ -56,7 +56,18 @@ export function renderVue(name, data, {
 } = {}) {
   const options = { webapp: app, isOffline, ...data };
   const vueUri = getResourceUri('vue/index.js');
-  const html = `
+
+  if (isOffline) {
+    return `
+<!-- Generated by WebappUtil.renderVue() -->
+<div data-vue-portlet="${portletId}">${noScript}</div>
+<script src="${vueUri}"></script>
+<script>  
+    vueApps['${name}'].render('${name}', '${selector}', ${JSON.stringify(options)});
+</script>
+`;
+  }
+  return `
 <!-- Generated by WebappUtil.renderVue() -->
 <div data-vue-portlet="${portletId}">${noScript}</div>
 <script>
@@ -64,9 +75,8 @@ export function renderVue(name, data, {
     vueApps['${name}'].render('${name}', '${selector}', ${JSON.stringify(options)});
   }  
 </script>
-<script src="${vueUri}" ${async ? 'async' : ''} ${defer ? 'defer' : ''} onload="renderVue${portletId}();"></script>
+<script src="${vueUri}" ${async && !defer ? 'async' : ''} ${defer ? 'defer' : ''} onload="renderVue${portletId}();"></script>
 `;
-  return html;
 }
 
 /**