@soleil-se/app-util 1.2.2 → 2.0.0

package/README.md

@@ -1,108 +1,108 @@
-# Webapp Util
-Utility functions for Webapps.
-## Install
-`yarn add @soleil-se/webapp-util`
-
-## Usage
-```javascript
-import { renderApp, getRouteUri, getResourceUri, renderTemplate, isOffline } from '@soleil-se/webapp-util';
-```
-### `renderApp(name, [data], [settings])` ⇒ `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 application. |
-| [data] | <code>Object</code> | <code>{}</code> | Server data that will be available in the app. In Vue it will be available in the `$options` object. |
-| [settings] | <code>Object</code> | <code>{}</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-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/) |
-
-#### Example
-In `app_src/server/index.js`.
-```javascript
-router.get('/', (req, res) => {
-  // Most common usage.
-  res.send(renderApp('AppName', data));
-
-  // With all settings.
-  res.send(renderApp('AppName', data, {
-    noScript: 'You need JS for this!',
-    selector: '#mount_me_here',
-    async: false,
-    defer: true,
-  }));
-});
-```
-##### **Vue**
-In `app_src/client/index.js`.
-```javascript
-import render from '@soleil-se/webapp-util/render-vue';
-import App from './App.vue';
-
-window.Soleil.webapps[App.name] = {
-  App,
-  render,
-};
-
-// If your application name matches the folder name of your Webapp you can use the default export.
-export default {
-  App,
-  render,
-};
-```
-### `getRouteUri(route)` ⇒ `String`
-Get URI for a route.
-
-**Returns**: `String` - URI for route.
-
-| Param | Type | Description |
-| --- | --- | --- |
-| route | `String` | A route. |
-
-#### Example
-```javascript
-const routeUri = getRouteUri('/my-route');
-```
-### `getResourceUri(resource)` ⇒ `String`
-Get URI for a resource.
-
-**Returns**: `String` - URI for a resource.
-
-| Param | Type | Description |
-| --- | --- | --- |
-| resource | `String` | A resource. |
-
-#### Example
-```javascript
-const resourceUri = getResourceUri('file/in/resource.png');
-```
-### `renderTemplate(template, [values])` ⇒ `String`
-Renders a Underscore template and returns a string.
-
-**Returns**: `String` - Rendered template
-
-| Param | Type | Default | Description |
-| --- | --- | --- | --- |
-| template | `String` |  | Underscore template. |
-| [values] | `Object` | `{}` | Values. |
-
-#### Example
-```javascript
-const string = renderTemplate('<div><%= foo %></div>', {
-  foo: 'bar',
-});
-```
-### `isOffline`
-If the webapp is running in offline mode or not.
-
-```javascript
-if(isOffline) {
-  // Do something
-}
-```
+# Webapp Util
+Utility functions for Webapps.
+## Install
+`yarn add @soleil-se/webapp-util`
+
+## Migration 1.x.x to 2.x.x
+
+Now using `currentScript` to reference the script element the app is running in to pass data. 
+
+Remove appName from the `renderApp` call in `./app_src/server/index.js`.   
+Remove export of `App` and `render` and replace with a call to `render(App)` in `./app_src/client/index.js`.   
+
+See [example](#example).
+
+## Usage
+```javascript
+import { renderApp, getRouteUri, getResourceUri, renderTemplate, isOffline } from '@soleil-se/webapp-util';
+```
+### `renderApp([config], [settings])` ⇒ `String`
+Get HTML string for rendering an application.   
+Can 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 |
+| --- | --- | --- | --- |
+| [config] | <code>Object</code> | <code>{}</code> | Server config or data that will be available in the attribute `data-app` on currentScript. In Vue it will also be available in the `$options` object. |
+| [settings] | <code>Object</code> | <code>{}</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-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/) |
+
+#### Example
+In `app_src/server/index.js`.
+```javascript
+router.get('/', (req, res) => {
+  const data = { foo: 'bar' };
+  // Most common usage.
+  res.send(renderApp(data));
+
+  // With all settings.
+  res.send(renderApp(data, {
+    noScript: 'You need JS for this!',
+    selector: '#mount_me_here',
+    async: false,
+    defer: true,
+  }));
+});
+```
+##### **Vue**
+In `app_src/client/index.js`.
+```javascript
+import render from '@soleil-se/webapp-util/render-vue';
+import App from './App.vue';
+
+render(App);
+```
+### `getRouteUri(route)` ⇒ `String`
+Get URI for a route.
+
+**Returns**: `String` - URI for route.
+
+| Param | Type | Description |
+| --- | --- | --- |
+| route | `String` | A route. |
+
+#### Example
+```javascript
+const routeUri = getRouteUri('/my-route');
+```
+### `getResourceUri(resource)` ⇒ `String`
+Get URI for a resource.
+
+**Returns**: `String` - URI for a resource.
+
+| Param | Type | Description |
+| --- | --- | --- |
+| resource | `String` | A resource. |
+
+#### Example
+```javascript
+const resourceUri = getResourceUri('file/in/resource.png');
+```
+### `renderTemplate(template, [values])` ⇒ `String`
+Renders a Underscore template and returns a string.
+
+**Returns**: `String` - Rendered template
+
+| Param | Type | Default | Description |
+| --- | --- | --- | --- |
+| template | `String` |  | Underscore template. |
+| [values] | `Object` | `{}` | Values. |
+
+#### Example
+```javascript
+const string = renderTemplate('<div><%= foo %></div>', {
+  foo: 'bar',
+});
+```
+### `isOffline`
+If the webapp is running in offline mode or not.
+
+```javascript
+if(isOffline) {
+  // Do something
+}
+```

package/package.json

@@ -1,20 +1,18 @@
 {
   "name": "@soleil-se/app-util",
-  "version": "1.2.2",
+  "version": "2.0.0",
   "description": "Utility functions for Webapps.",
-  "main": "./dist/index.js",
+  "main": "./src/index.js",
   "author": "Soleil AB",
   "contributors": [
-    "Kimmy Monassar"
+    "Kimmy Monassar",
+    "Jonas Gällman"
   ],
   "license": "UNLICENSED",
   "private": false,
   "homepage": "https://github.com/soleilit/server-monorepo/tree/master/packages/app-util",
-  "scripts": {
-    "build": "yarn build-server && yarn build-render-vue",
-    "build-server": "npx buble ./src/index.js --output ./dist/index.js --no modules,arrow --objectAssign=Object.assign",
-    "build-render-vue": "npx buble ./render-vue/src/index.js --output ./render-vue/index.js --no modules --objectAssign=Object.assign"
+  "dependencies": {
+    "current-script-polyfill": "^1.0.0"
   },
-  "dependencies": {},
   "devDependencies": {}
 }

package/render-vue/{src/.eslintrc → .eslintrc}

@@ -1,3 +1,3 @@
-{
-  "extends": "@soleil/eslint-config-sitevision/client"
-}
+{
+  "extends": "@soleil/eslint-config-sitevision/client"
+}

package/render-vue/index.js

@@ -1,43 +1,50 @@
-/* eslint-disable-next-line import/no-unresolved */
-import Vue from 'vue';
-
-window.Soleil = window.Soleil || {};
-window.Soleil.webapps = window.Soleil.webapps || {};
-
-var offlineModeMixin = {
-  mounted: function mounted() {
-    if (this.$options.isOffline) {
-      var $anchors = this.$el.querySelectorAll('a');
-      $anchors.forEach(function ($anchor) {
-        $anchor.addEventListener('click', function (e) {
-          e.preventDefault();
-          window.$svjq($anchor).trigger('click');
-        }, false);
-      });
-    }
-  },
-};
-/**
- * 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 = {};
-
-  var ref = window.Soleil.webapps[name];
-  var App = ref.App;
-  Object.assign(App, options, {
-    mixins: [offlineModeMixin],
-  });
-
-  var mountElementExists = !!document.querySelector(selector);
-  if (mountElementExists) {
-    new Vue(App).$mount(selector);
-  } else {
-    document.addEventListener('DOMContentLoaded', function () {
-      new Vue(App).$mount(selector);
-    });
-  }
-}
+import 'current-script-polyfill';
+import Vue from 'vue';
+
+const { currentScript } = document;
+
+const decodeAttribute = (attribute) => {
+  const encoded = currentScript.getAttribute(attribute);
+  if (encoded) {
+    return decodeURIComponent(encoded);
+  }
+  return undefined;
+};
+
+const parseAttribute = (attribute) => JSON.parse(decodeAttribute(attribute));
+
+const offlineModeMixin = {
+  mounted() {
+    if (this.$options.isOffline) {
+      const $anchors = this.$el.querySelectorAll('a');
+      $anchors.forEach(($anchor) => {
+        $anchor.addEventListener('click', (e) => {
+          e.preventDefault();
+          window.$svjq($anchor).trigger('click');
+        }, false);
+      });
+    }
+  },
+};
+/**
+ * Render a Vue application
+ * @param {Vue} App Vue application to be started.
+ */
+export default function render(App) {
+  const selector = decodeAttribute('data-selector');
+  const options = parseAttribute('data-app');
+
+  Object.assign(App, options, {
+    mixins: [offlineModeMixin],
+  });
+  
+  const mountElementExists = !!document.querySelector(selector);
+
+  if (mountElementExists) {
+    new Vue(App).$mount(selector);
+  } else {
+    document.addEventListener('DOMContentLoaded', () => {
+      new Vue(App).$mount(selector);
+    });
+  }
+}

package/src/index.js

@@ -1,99 +1,101 @@
-import PortletContextUtil from 'PortletContextUtil';
-import VersionUtil from 'VersionUtil';
-import appInfo from 'appInfo';
-/* Underscore is provided by SiteVision */
-/* eslint-disable-next-line import/no-extraneous-dependencies */
-import _ from 'underscore';
-
-/** If the webapp is running in offline mode or not. */
-export const isOffline = VersionUtil.getCurrentVersion() === VersionUtil.OFFLINE_VERSION;
-
-const portletId = PortletContextUtil.getCurrentPortlet().getIdentifier().replace('.', '_');
-
-/**
- * Get URI for a resource.
- * @param {String} resource A resource.
- * @returns {String} URI for a resource.
- */
-export function getResourceUri(resource) {
-  return `/webapp-files/${appInfo.appIdentifier}/${appInfo.appVersion}/${resource}`;
-}
-
-/**
- * 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);
-  }
-  return _.template(template)(values);
-}
-
-/**
- * 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-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 an application.
- */
-export function renderApp(name, data, {
-  noScript = '',
-  selector = `[data-portlet-id="${portletId}"]`,
-  async = true,
-  defer = false,
-} = {}) {
-  const options = { ...data, isOffline };
-  const clientUri = getResourceUri('client/index.js');
-
-  if (isOffline) {
-    return `
-<!-- Generated by WebappUtil.renderApp() -->
-<div data-portlet-id="${portletId}">${noScript}</div>
-<script src="${clientUri}?${appInfo.appImportDate}"></script>
-<script>  
-  Soleil.webapps['${name}'].render('${name}', '${selector}', ${JSON.stringify(options)});
-</script>
-`;
-  }
-  return `
-<!-- Generated by WebappUtil.renderApp() -->
-<div data-portlet-id="${portletId}">${noScript}</div>
-<script>
-  function renderApp${portletId}() {
-    Soleil.webapps['${name}'].render('${name}', '${selector}', ${JSON.stringify(options)});
-  }  
-</script>
-<script src="${clientUri}?${appInfo.appImportDate}" ${async && !defer ? 'async' : ''} ${defer ? 'defer' : ''} onload="renderApp${portletId}();"></script>
-`;
-}
-
-/**
- * Get URI for a route.
- * @param {String} route A route.
- * @returns {String} URI for route.
- */
-export function getRouteUri(route) {
-  const currentPageId = PortletContextUtil.getCurrentPage().getIdentifier().replace('_sitePage', '');
-  const currentPortletId = PortletContextUtil.getCurrentPortlet().getIdentifier();
-  return `/appresource/${currentPageId}/${currentPortletId}/${route}`.replace(/\/\//g, '/');
-}
-
-export default {
-  getRouteUri,
-  getResourceUri,
-  renderApp,
-  renderTemplate,
-  isOffline,
-};
+import PortletContextUtil from 'PortletContextUtil';
+import VersionUtil from 'VersionUtil';
+import appInfo from 'appInfo';
+/* Underscore is provided by SiteVision */
+/* eslint-disable-next-line import/no-extraneous-dependencies */
+import _ from 'underscore';
+
+/** If the webapp is running in offline mode or not. */
+export const isOffline = VersionUtil.getCurrentVersion() === VersionUtil.OFFLINE_VERSION;
+
+const portletId = PortletContextUtil.getCurrentPortlet().getIdentifier().replace('.', '_');
+
+/**
+ * Get URI for a resource.
+ * @param {String} resource A resource.
+ * @returns {String} URI for a resource.
+ */
+export function getResourceUri(resource) {
+  return `/webapp-files/${appInfo.appIdentifier}/${appInfo.appVersion}/${resource}`;
+}
+
+/**
+ * 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);
+  }
+  return _.template(template)(values);
+}
+
+/**
+ * Get a HTML string for rendering an application.
+ * @param {Object} [data={}] Server config or data that will be available in the attribute
+ * `data-app` on currentScript. In Vue it will also 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-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/)
+ * @returns {String} HTML for rendering an application.
+ */
+export function renderApp(data, {
+  noScript = '',
+  selector = `[data-portlet-id="${portletId}"]`,
+  async = false,
+  defer = true,
+} = {}) {
+  if (typeof data === 'string') {
+    throw new Error('As of version 2 renderApp no longer needs the application name.');
+  }
+  if (isOffline) {
+    return `
+<div data-portlet-id="${portletId}">${noScript}</div>
+<script>
+  (function(){
+    var targetElement = document.querySelector('[data-portlet-id="${portletId}"]');
+    var script = document.createElement('script');
+    script.src = '${getResourceUri('client/index.js')}?${portletId.replace('_', '')}';
+    script.setAttribute('data-app', '${encodeURIComponent(JSON.stringify({ ...data, isOffline }))}');
+    script.setAttribute('data-selector', '${encodeURIComponent(selector)}');
+    targetElement.parentNode.insertBefore(script, targetElement.nextSibling);
+  })();
+</script>`;
+  }
+  return `
+<div data-portlet-id="${portletId}">${noScript}</div>
+<script 
+  src="${getResourceUri('client/index.js')}?${appInfo.appImportDate}${portletId.replace('_', '')}" 
+  data-app="${encodeURIComponent(JSON.stringify({ ...data, isOffline }))}" 
+  data-selector="${encodeURIComponent(selector)}" 
+  ${async && !defer ? 'async' : ''} 
+  ${defer ? 'defer' : ''}>
+</script>`;
+}
+
+/**
+ * Get URI for a route.
+ * @param {String} route A route.
+ * @returns {String} URI for route.
+ */
+export function getRouteUri(route) {
+  const currentPageId = PortletContextUtil.getCurrentPage().getIdentifier().replace('_sitePage', '');
+  const currentPortletId = PortletContextUtil.getCurrentPortlet().getIdentifier();
+  return `/appresource/${currentPageId}/${currentPortletId}/${route}`.replace(/\/\//g, '/');
+}
+
+export default {
+  getRouteUri,
+  getResourceUri,
+  renderApp,
+  renderTemplate,
+  isOffline,
+};

package/dist/index.js

@@ -1,86 +0,0 @@
-import PortletContextUtil from 'PortletContextUtil';
-import VersionUtil from 'VersionUtil';
-import appInfo from 'appInfo';
-/* Underscore is provided by SiteVision */
-/* eslint-disable-next-line import/no-extraneous-dependencies */
-import _ from 'underscore';
-
-/** If the webapp is running in offline mode or not. */
-export var isOffline = VersionUtil.getCurrentVersion() === VersionUtil.OFFLINE_VERSION;
-
-var portletId = PortletContextUtil.getCurrentPortlet().getIdentifier().replace('.', '_');
-
-/**
- * Get URI for a resource.
- * @param {String} resource A resource.
- * @returns {String} URI for a resource.
- */
-export function getResourceUri(resource) {
-  return ("/webapp-files/" + (appInfo.appIdentifier) + "/" + (appInfo.appVersion) + "/" + resource);
-}
-
-/**
- * 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 ( values === void 0 ) values = {};
-
-  if (typeof template === 'function') {
-    return template(values);
-  }
-  return _.template(template)(values);
-}
-
-/**
- * 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-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 an application.
- */
-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-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({}, data, {isOffline: isOffline});
-  var clientUri = getResourceUri('client/index.js');
-
-  if (isOffline) {
-    return ("\n<!-- Generated by WebappUtil.renderApp() -->\n<div data-portlet-id=\"" + portletId + "\">" + noScript + "</div>\n<script src=\"" + clientUri + "?" + (appInfo.appImportDate) + "\"></script>\n<script>  \n  Soleil.webapps['" + 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>\n  function renderApp" + portletId + "() {\n    Soleil.webapps['" + name + "'].render('" + name + "', '" + selector + "', " + (JSON.stringify(options)) + ");\n  }  \n</script>\n<script src=\"" + clientUri + "?" + (appInfo.appImportDate) + "\" " + (async && !defer ? 'async' : '') + " " + (defer ? 'defer' : '') + " onload=\"renderApp" + portletId + "();\"></script>\n");
-}
-
-/**
- * Get URI for a route.
- * @param {String} route A route.
- * @returns {String} URI for route.
- */
-export function getRouteUri(route) {
-  var currentPageId = PortletContextUtil.getCurrentPage().getIdentifier().replace('_sitePage', '');
-  var currentPortletId = PortletContextUtil.getCurrentPortlet().getIdentifier();
-  return ("/appresource/" + currentPageId + "/" + currentPortletId + "/" + route).replace(/\/\//g, '/');
-}
-
-export default {
-  getRouteUri: getRouteUri,
-  getResourceUri: getResourceUri,
-  renderApp: renderApp,
-  renderTemplate: renderTemplate,
-  isOffline: isOffline,
-};

package/render-vue/src/index.js

@@ -1,42 +0,0 @@
-/* eslint-disable-next-line import/no-unresolved */
-import Vue from 'vue';
-
-window.Soleil = window.Soleil || {};
-window.Soleil.webapps = window.Soleil.webapps || {};
-
-const offlineModeMixin = {
-  mounted() {
-    if (this.$options.isOffline) {
-      const $anchors = this.$el.querySelectorAll('a');
-      $anchors.forEach(($anchor) => {
-        $anchor.addEventListener('click', (e) => {
-          e.preventDefault();
-          window.$svjq($anchor).trigger('click');
-        }, false);
-      });
-    }
-  },
-};
-/**
- * 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 = {}) {
-  const {
-    App,
-  } = window.Soleil.webapps[name];
-  Object.assign(App, options, {
-    mixins: [offlineModeMixin],
-  });
-
-  const mountElementExists = !!document.querySelector(selector);
-  if (mountElementExists) {
-    new Vue(App).$mount(selector);
-  } else {
-    document.addEventListener('DOMContentLoaded', () => {
-      new Vue(App).$mount(selector);
-    });
-  }
-}