@soleil-se/app-util 1.1.2 → 1.1.3

package/README.md

@@ -4,20 +4,21 @@
 
 ## Usage
 ```javascript
-import { renderVue, getRouteUri, getResourceUri, renderTemplate, isOffline } from '@soleil-se/webapp-util';
+import { renderApp, getRouteUri, getResourceUri, renderTemplate, isOffline } from '@soleil-se/webapp-util';
 ```
-### `renderVue(name, data, [noScript])` ⇒ `String`
-Get HTML for rendering a Vue application.   
-To be used together with `@soleil-se/webapp-util/render-vue` in the client code.   
-**Returns**: `String` - HTML for rendering a Vue application.
+### `renderApp(name, data, [noScript])` ⇒ `String`
+Get HTML string for rendering an application.   
+To be used together with `@soleil-se/webapp-util/render-vue` or a custom render function in the client code. 
+
+**Returns**: <code>String</code> - HTML for rendering an application.
 
 | Param | Type | Default | Description |
 | --- | --- | --- | --- |
-| name | <code>String</code> |  | Name of the app, has to match the name of the Vue application. |
-| data | <code>Object</code> |  | Data that will be available in `$options`. |
+| name | <code>String</code> |  | Name of the app, has to match the name of the application. |
+| data | <code>Object</code> |  | Server data that will be available in the app. In Vue it will be available in the `$options` object. |
 | settings | <code>Object</code> |  | Settings object. |
 | [settings.noScript] | <code>String</code> | <code>&#x27;&#x27;</code> | HTML that will be rendered when JavaScript is not available. |
-| [settings.selector] | <code>String</code> | <code>&#x60;[data-vue-portlet&#x3D;&quot;${portletId}&quot;]&#x60;</code> | Query selector for where the app should be mounted. |
+| [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>true</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>false</code> | If the app script should be loaded after DOM is ready. [Read more about async and defer.](https://flaviocopes.com/javascript-async-defer/) |
 
@@ -26,10 +27,10 @@ In `app_src/server/index.js`.
 ```javascript
 router.get('/', (req, res) => {
   // Most common usage.
-  res.send(renderVue('AppName', data));
+  res.send(renderApp('AppName', data));
 
   // With all settings.
-  res.send(renderVue('AppName', data, {
+  res.send(renderApp('AppName', data, {
     noScript: 'You need JS for this!',
     selector: '#mount_me_here',
     async: false,
@@ -37,6 +38,7 @@ router.get('/', (req, res) => {
   }));
 });
 ```
+Vue example.   
 In `app_src/vue/index.js`.
 ```javascript
 import render from '@soleil-se/webapp-util/render-vue';

package/dist/index.js

@@ -36,34 +36,35 @@ 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`.
+ * Get HTML string for rendering an application.
+ * @param {String} name Name of the app, has to match the name of the application.
+ * @param {Object} data Server data that will be available in the app.
+ * In Vue it will be available in the `$options` object.
  * @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
+ * @param {String} [settings.selector=`[data-portlet-id="${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.
+ * @returns {String} HTML for rendering an application.
  */
-export function renderVue(name, data, ref) {
+export function renderApp(name, data, ref) {
   if ( ref === void 0 ) ref = {};
   var noScript = ref.noScript; if ( noScript === void 0 ) noScript = '';
-  var selector = ref.selector; if ( selector === void 0 ) selector = "[data-vue-portlet=\"" + portletId + "\"]";
+  var selector = ref.selector; if ( selector === void 0 ) selector = "[data-portlet-id=\"" + portletId + "\"]";
   var async = ref.async; if ( async === void 0 ) async = true;
   var defer = ref.defer; if ( defer === void 0 ) defer = false;
 
   var options = Object.assign({}, {webapp: app, isOffline: isOffline}, data);
-  var vueUri = getResourceUri('vue/index.js');
+  var clientUri = getResourceUri('client/index.js');
 
   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.renderApp() -->\n<div data-portlet-id=\"" + portletId + "\">" + noScript + "</div>\n<script src=\"" + clientUri + "\"></script>\n<script>  \n  Soleil.webapps['" + 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");
+  return ("\n<!-- Generated by WebappUtil.renderApp() -->\n<div data-portlet-id=\"" + portletId + "\">" + noScript + "</div>\n<script>\n  function renderApp" + portletId + "() {\n    Soleil.webapps['" + name + "'].render('" + name + "', '" + selector + "', " + (JSON.stringify(options)) + ");\n  }  \n</script>\n<script src=\"" + clientUri + "\" " + (async && !defer ? 'async' : '') + " " + (defer ? 'defer' : '') + " onload=\"renderApp" + portletId + "();\"></script>\n");
 }
 
 /**
@@ -84,7 +85,7 @@ export function getRouteUri(route) {
 export default {
   getRouteUri: getRouteUri,
   getResourceUri: getResourceUri,
-  renderVue: renderVue,
+  renderApp: renderApp,
   renderTemplate: renderTemplate,
   isOffline: isOffline,
 };

package/package.json

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

package/render-vue/index.js

@@ -1,7 +1,8 @@
 /* eslint-disable-next-line import/no-unresolved */
 import Vue from 'vue';
 
-window.vueApps = window.vueApps || {};
+window.Soleil = window.Soleil || {};
+window.Soleil.webapps = window.Soleil.webapps || {};
 
 var offlineModeMixin = {
   mounted: function mounted() {
@@ -25,7 +26,7 @@ var offlineModeMixin = {
 export default function render(name, selector, options) {
   if ( options === void 0 ) options = {};
 
-  var ref = window.vueApps[name];
+  var ref = window.Soleil.webapps[name];
   var App = ref.App;
   Object.assign(App, options, {
     mixins: [offlineModeMixin],

package/render-vue/src/index.js

@@ -1,7 +1,8 @@
 /* eslint-disable-next-line import/no-unresolved */
 import Vue from 'vue';
 
-window.vueApps = window.vueApps || {};
+window.Soleil = window.Soleil || {};
+window.Soleil.webapps = window.Soleil.webapps || {};
 
 const offlineModeMixin = {
   mounted() {
@@ -25,7 +26,7 @@ const offlineModeMixin = {
 export default function render(name, selector, options = {}) {
   const {
     App,
-  } = window.vueApps[name];
+  } = window.Soleil.webapps[name];
   Object.assign(App, options, {
     mixins: [offlineModeMixin],
   });

package/src/index.js

@@ -34,48 +34,49 @@ 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`.
+ * Get HTML string for rendering an application.
+ * @param {String} name Name of the app, has to match the name of the application.
+ * @param {Object} data Server data that will be available in the app.
+ * In Vue it will be available in the `$options` object.
  * @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
+ * @param {String} [settings.selector=`[data-portlet-id="${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.
+ * @returns {String} HTML for rendering an application.
  */
-export function renderVue(name, data, {
+export function renderApp(name, data, {
   noScript = '',
-  selector = `[data-vue-portlet="${portletId}"]`,
+  selector = `[data-portlet-id="${portletId}"]`,
   async = true,
   defer = false,
 } = {}) {
   const options = { webapp: app, isOffline, ...data };
-  const vueUri = getResourceUri('vue/index.js');
+  const clientUri = getResourceUri('client/index.js');
 
   if (isOffline) {
     return `
-<!-- Generated by WebappUtil.renderVue() -->
-<div data-vue-portlet="${portletId}">${noScript}</div>
-<script src="${vueUri}"></script>
+<!-- Generated by WebappUtil.${this.name}() -->
+<div data-portlet-id="${portletId}">${noScript}</div>
+<script src="${clientUri}"></script>
 <script>  
-    vueApps['${name}'].render('${name}', '${selector}', ${JSON.stringify(options)});
+  Soleil.webapps['${name}'].render('${name}', '${selector}', ${JSON.stringify(options)});
 </script>
 `;
   }
   return `
-<!-- Generated by WebappUtil.renderVue() -->
-<div data-vue-portlet="${portletId}">${noScript}</div>
+<!-- Generated by WebappUtil.${this.name}() -->
+<div data-portlet-id="${portletId}">${noScript}</div>
 <script>
-  function renderVue${portletId}() {
-    vueApps['${name}'].render('${name}', '${selector}', ${JSON.stringify(options)});
+  function renderApp${portletId}() {
+    Soleil.webapps['${name}'].render('${name}', '${selector}', ${JSON.stringify(options)});
   }  
 </script>
-<script src="${vueUri}" ${async && !defer ? 'async' : ''} ${defer ? 'defer' : ''} onload="renderVue${portletId}();"></script>
+<script src="${clientUri}" ${async && !defer ? 'async' : ''} ${defer ? 'defer' : ''} onload="renderApp${portletId}();"></script>
 `;
 }
 
@@ -97,7 +98,7 @@ export function getRouteUri(route) {
 export default {
   getRouteUri,
   getResourceUri,
-  renderVue,
+  renderApp,
   renderTemplate,
   isOffline,
 };