@soleil-se/app-util 4.2.0 → 5.0.0

package/CHANGELOG.md

@@ -5,7 +5,25 @@ 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).
 
-## [4.1.4] - 2021-08-20
+## [5.0.0] - 2021-xx-xx
+
+### Changed
+
+- Using WebApps 2 for rendering apps.
+
+### Removed
+
+- `getAppData`, use `getAppProps` instead.
+- `server/render`, use `res.agnosticRender` for framework agnostic rendering.
+- `server/renderTemplate`, used for rendering underscore templates.
+
+## [4.2.1] - 2021-09-06
+
+### Fixed
+
+- Underscore is misspelled in `renderTemplate`.
+
+## [4.2.0] - 2021-08-20
 
 ### Added
 

package/MIGRATION.md

@@ -1,156 +1,149 @@
 # Migration
 
-Migration from version 2 or 3 to 4.
+Migration from version 4 to 5.
 
 <!-- TOC -->
 
-- [renderApp](#renderapp)
-  - [Export](#export)
-  - [Settings](#settings)
-- [renderTemplate](#rendertemplate)
-- [getRouteUri](#getrouteuri)
-- [AppData](#appdata)
-  - [Get data](#get-data)
-  - [Standard values](#standard-values)
-- [Svelte](#svelte)
-  - [Server](#server)
-  - [Client](#client)
-- [Vue](#vue)
+- [Manifest](#manifest)
+- [index.js](#indexjs)
+  - [Universal app](#universal-app)
+  - [SSR app](#ssr-app)
+  - [CSR app](#csr-app)
+- [main.js](#mainjs)
 
 <!-- /TOC -->
 
-## renderApp
-### Export
-Export moved and renamed.
+## Manifest
 
-Old:
-```js
-import { renderApp } from '@soleil-api/webapp-util';
-```
-New:
-```js
-import { render } from '@soleil-api/webapp-util/server';
-```
+Add `"bundled": true` to the app manifest file.
 
-### Settings
-Selector is moved to client side rendering functions.
+manifest.json
+
+```json
+{
+  "id": "se.soleil.myApp",
+  "version": "1.0.0",
+  "name": "My app",
+  "author": "Soleil AB",
+  "description": "",
+  "helpUrl": "https://soleil.se/support",
+  "type": "WebApp",
+  "bundled": true
+}
 
-Old (index.js):
-```js
-res.send(renderApp(data, { selector: '#mount_app_here' }));
 ```
 
-New (main.js):
-```js
-import { render } from '@soleil-api/webapp-util/client/vue';
-import App from './App.vue';
+## index.js
 
-render(App, { selector: '#mount_app_here' });
-```
+Rendering is now using Webapps 2 render functions.
 
-## renderTemplate
-Export moved.   
+### Universal app
 
-Old:
-```js
-import { renderTemplate } from '@soleil-api/webapp-util';
-```
-New:
-```js
-import { renderTemplate } from '@soleil-api/webapp-util/server';
-```
-## getRouteUri
-URIs for routes was previously passed as props when rendering an application. This is no longer needed.   
-Now you can use `getRouteUri` in a client context as well.  
+Old
 
-Old:
 ```js
-import AppData from '@soleil-api/webapp-util/app-data';
+import router from '@sitevision/api/common/router';
+import { render } from '@soleil-api/webapp-util/server/svelte';
 
-const getItems = async () => {
-  return fetch(AppData.itemsRoute)
-    .then((res) => res.json());
-};
-``` 
-New:
-```js
-import { getRouteUri } from '@soleil-api/webapp-util';
+import App from './App.svelte';
 
-const getItems = async () => {
-  return fetch(getRouteUri('/items'))
-    .then((res) => res.json());
-};
+router.get('/', (req, res) => {
+  const props = { foo: 'bar' };
+  res.send(render(App, props));
+});
 ```
-## AppData
 
-### Get data
-The default export as object and `@soleil-api/webapp-util/app-data` import is removed.
+New
 
-Old:
 ```js
-import AppData from '@soleil-api/webapp-util/app-data';
+import router from '@sitevision/api/common/router';
+import { render } from '@soleil-api/webapp-util/server/svelte';
 
-const { myValue } = AppData;
-```
-New:
-```js
-import { getAppData } from '@soleil-api/webapp-util';
+import App from './App.svelte';
 
-// Get value with key
-const myValue = getAppData('myValue');
-// Or with destructuring
-const { myValue } = getAppData();
+router.get('/', (req, res) => {
+  const props = { foo: 'bar' };
+  const html = render(App, props);
+  res.agnosticRender(html, props);  
+});
 ```
-### Standard values
-Values that was set as sandard are now moved.
 
-Old:
-```js
-import AppData from '@soleil-api/webapp-util/app-data';
+### SSR app
+
+Old
 
-const { isOnline, isOffline, uniqueId } = AppData;
-```
-New:
 ```js
-import { isOffline, isOnline, getNamespace } from '@soleil-api/webapp-util';
+import router from '@sitevision/api/common/router';
+import { renderServer } from '@soleil-api/webapp-util/server/svelte';
 
-const uniqueId = getNamespace();
+import App from './App.svelte';
+
+router.get('/', (req, res) => {
+  const props = { foo: 'bar' };
+  res.send(renderServer(App, props));
+});
 ```
 
-## Svelte
-### Server
-Export moved.   
-Export `renderClient` is removed, use `render` from `'@soleil-api/webapp-util/server`
+New
 
-Old:
-```js
-import { render } from '@soleil-api/webapp-util/svelte-server';
-```
-New:
 ```js
+import router from '@sitevision/api/common/router';
 import { render } from '@soleil-api/webapp-util/server/svelte';
+
+import App from './App.svelte';
+
+router.get('/', (req, res) => {
+  const props = { foo: 'bar' };
+  const html = render(App, props);
+  res.send(html);  
+});
 ```
-### Client
-Export moved.
 
-Old:
+### CSR app
+
+Old
+
 ```js
-import { render } from '@soleil-api/webapp-util/svelte-client';
+import router from '@sitevision/api/common/router';
+import { render } from '@soleil-api/webapp-util/server';
+
+router.get('/', (req, res) => {
+  const props = { foo: 'bar' };
+  res.send(render(props));
+});
 ```
-New:
+
+New
+
 ```js
-import { render } from '@soleil-api/webapp-util/client/svelte';
+import router from '@sitevision/api/common/router';
+
+router.get('/', (req, res) => {
+  const props = { foo: 'bar' };
+  res.agnosticRender('', props)
+});
 ```
 
-## Vue
-Export moved.
+## main.js
+
+Is now expecting a default export containing a function
+
+Old
 
-Old:
 ```js
-import render from '@soleil-api/webapp-util/render-vue';
+import { render } from '@soleil-api/webapp-util/client/svelte';
+import App from './App.svelte';
+
+render(App);
 ```
-New:
+
+New
+
 ```js
-import { render } from '@soleil-api/webapp-util/client/vue';
-```
+import { render } from '@soleil-api/webapp-util/client/svelte';
+import App from './App.svelte';
 
+export default (props, target) => {
+  render(App, { props, target });
+};
+```

package/README.md

@@ -1,7 +1,7 @@
 
-# `@soleil-se/webapp-util@^4.0.0`
+# `@soleil-se/webapp-util@^5.0.0`
 
-Utility functions for Webapps.
+Utility functions for WebApps.
 
 [GitHub](https://github.com/soleilit/server-monorepo/tree/master/packages/webapp-util)
 [NPM](https://www.npmjs.com/package/@soleil-se/webapp-util)
@@ -10,7 +10,27 @@ Utility functions for Webapps.
 
 ## Requirements
 
-`@soleil-se/sv-gulp-build` 4 or later (Works best with ^4.3.0).
+* Sitevision 9.1.0 or later.  
+* `@soleil-se/sv-app-build` 1.0.0 or later.
+* WebApps 2 enabled app.
+
+### Manifest
+
+`bundled` needs to be enabled in [WebApp manifest](https://developer.sitevision.se/docs/webapps/webapps-2/manifest) for WebApps 2.
+
+```json
+{
+  "id": "se.soleil.myApp",
+  "version": "1.0.0",
+  "name": "My app",
+  "author": "Soleil AB",
+  "description": "",
+  "helpUrl": "https://soleil.se/support",
+  "type": "WebApp",
+  "bundled": true
+}
+
+```
 
 ## Install
 
@@ -18,7 +38,7 @@ Utility functions for Webapps.
 
 ## Migration
 
-Migrating from version 2 or 3?
+Migrating from version 4?
 See [MIGRATION](./MIGRATION.md).
 
 ## API
@@ -57,9 +77,6 @@ All imports from base package are available both on the server and client.
 <dt><a href="#getAppProps">getAppProps([key])</a> ⇒ <code>*</code> | <code>Object</code></dt>
 <dd><p>Get props that are passed to app when rendering.</p>
 </dd>
-<dt><del><a href="#getAppData">getAppData([key])</a> ⇒ <code>*</code> | <code>Object</code></del></dt>
-<dd><p>Get props that are passed to app when rendering.</p>
-</dd>
 </dl>
 
 <a name="appId"></a>
@@ -200,32 +217,7 @@ const myValue = getAppProps('myValue');
 const { myValue } = getAppProps();
 ```
 
-<a name="getAppData"></a>
-
-### getAppData([key]) ⇒ `*` | `Object` (DEPRECATED)
-
-Use [getAppProps](#getAppProps) instead.  
-
-Get props that are passed to app when rendering.
-
-**Returns**: `*` | `Object` - Value or object.
-
-| Param | Type | Description |
-| --- | --- | --- |
-| [key] | `String` | Key for value. |
-
-```js
-import { getAppData } from '@soleil-se/webapp-util';
-
-// Get value with key
-const myValue = getAppData('myValue');
-// Or with destructuring
-const { myValue } = getAppData();
-```
-
 ## Rendering
 
-- [Render](./docs/1.render.md)
-- [Svelte](./docs/2.svelte.md)
-- [Vue](./docs/3.vue.md)
-- [Underscore](./docs/4.underscore.md)
+* [Svelte](./docs/1.svelte.md)
+* [Vue (DEPRECATED)](./docs/2.vue.md)

package/client/svelte/index.js

@@ -1,22 +1,24 @@
-/* eslint-disable import/prefer-default-export */
-import { appId, getAppProps } from '../../common';
+import { setAppProps } from '../../common';
 
 /**
  * Renders a client side Svelte application.
  * @param {*} App Svelte app root component.
- * @param {Object} [settings={}] Settings object.
- * @param {String} [settings.selector=`#app_mount_${appId}`] Query selector for mount element.
- * @param {String} [settings.intro=false] If true, will play transitions on initial render,
+ * @param {object} [settings={}] Settings object.
+ * @param {string} [settings.target] Target where app should be mounted.
+ * @param {string} [settings.props] Root component props.
+ * @param {string} [settings.intro=false] If true, will play transitions on initial render,
  * rather than waiting for subsequent state changes.
  * @return {*} Initialized Svelte component.
  */
 export function render(App, {
-  selector = `#app_mount_${appId}`,
+  target,
+  props,
   intro = false,
 } = {}) {
-  const target = document.querySelector(selector);
+  setAppProps(props);
+
   const hydrate = target.childElementCount > 0;
-  const props = getAppProps();
+
   return new App({
     hydrate,
     target,

package/common/index.js

@@ -1,24 +1,14 @@
+/* global document */
 /* eslint-disable global-require */
-import { parseJson } from '../client/utils';
-import getLegacyRouteUri from './legacy/getRouteUri';
-import getLegacyViewUri from './legacy/getViewUri';
 
-const appMetadata = process.browser ? parseJson('app_meta') : {};
+import router from '@sitevision/api/common/router';
+import app from '@sitevision/api/common/app';
 
 /**
  * Get an ID for the app.
  * @return {String} ID
  */
-const getAppId = () => {
-  const PortletContextUtil = require('PortletContextUtil');
-  const id = (PortletContextUtil.getPortletNamespace('') || 'ADDON_PREVIEW').replace('.', '_');
-  const decoratedNode = PortletContextUtil.getCurrentDecoratedNode();
-
-  if (decoratedNode) {
-    return `${decoratedNode.getIdentifier().replace('.', '_')}_${id}`;
-  }
-  return id;
-};
+const getAppId = () => app.portletId.replace('.', '_');
 
 /**
  * Regex for selecting leading slashes
@@ -34,21 +24,21 @@ const trailingSlashes = /(\/)*$/g;
 
 /**
  * DOM friendly unique identifier for the WebApp.
- * @constant {String}
+ * @constant {string}
  */
-export const appId = process.server ? getAppId() : appMetadata.id;
+export const appId = getAppId();
 
 /**
  * If the WebApp is running in offline mode or not.
- * @constant {Boolean}
+ * @constant {boolean}
  */
 export const isOffline = process.server
   ? require('VersionUtil').getCurrentVersion() === require('VersionUtil').OFFLINE_VERSION
-  : appMetadata.isOffline;
+  : document.documentElement.classList.contains('sv-edit-mode');
 
 /**
  * If the WebApp is running in online mode or not.
- * @constant {Boolean}
+ * @constant {boolean}
  */
 export const isOnline = !isOffline;
 
@@ -62,92 +52,48 @@ export function getNamespace(prefix = 'app') {
 }
 
 /**
- * Get URI for a route.
- * @param {String} route A route.
- * @returns {String} URI for route.
+ * Get URI for a route, same as `getStandaloneUrl` in Sitevision router.
+ * @param {string} route A route.
+ * @param {object} query Query parameters.
+ * @returns {string} URI for route.
  */
-export function getRouteUri(route = '') {
+export function getRouteUri(route = '', query) {
   const path = route.replace(leadingSlashes, '');
-  if (process.server) {
-    const router = require('router');
-    if (router.getStandaloneUrl) {
-      return router
-        .getStandaloneUrl(path !== '' ? `/${path}` : path)
-        .replace(trailingSlashes, '');
-    }
-    // If Sitevision 7 or older.
-    return getLegacyRouteUri(path);
-  }
-  return `${appMetadata.baseRouteUri}/${path}`;
+  return router.getStandaloneUrl(path !== '' ? `/${path}` : path, query).replace(trailingSlashes, '');
 }
 
 /**
- * Get URI for a view.
- * @param {String} route A route.
- * @returns {String} URI for view.
+ * Get URI for a view, same as `getUrl` in Sitevision router.
+ * @param {string} route A route.
+ * @returns {string} URI for view.
  */
 export function getViewUri(route = '') {
-  if (process.server) {
-    const router = require('router');
-    if (router.getUrl) {
-      return router.getUrl(route);
-    }
-    // If Sitevision 7 or older.
-    return getLegacyViewUri(route, { isOffline });
-  }
-  return appMetadata.baseViewUri + route;
+  return router.getUrl(route);
 }
 
 /**
  * Get URI for a resource.
- * @param {String} resource A resource.
- * @returns {String} URI for a resource.
+ * @param {string} resource A resource.
+ * @returns {string} URI for a resource.
  */
 export function getResourceUri(resource = '') {
+  const { webAppId, webAppVersion } = app;
   const path = resource.replace(leadingSlashes, '');
-  if (process.server) {
-    const appInfo = require('appInfo');
-    return `/webapp-files/${appInfo.appIdentifier}/${appInfo.appVersion}/${path}`
-      .replace(trailingSlashes, '');
-  }
-  return `${appMetadata.baseResourceUri}/${path}`;
-}
-
-export function getAppMetadata() {
-  return {
-    id: appId,
-    isOffline,
-    isOnline,
-    baseRouteUri: getRouteUri(),
-    baseViewUri: getViewUri(),
-    baseResourceUri: getResourceUri(),
-  };
+  return `/webapp-files/${webAppId}/${webAppVersion}/${path}`;
 }
 
-let appProps = process.browser ? parseJson('app_props') : {};
+let appProps = {};
 
 export function setAppProps(data) {
   appProps = data;
 }
 
 /**
- * Get props that are passed to app when rendering.
- * @param {String} [key] Key for value.
- * @returns {*|Object} Value or object.
+ * Get appData value or object that is passed to app when rendering.
+ * @export
+ * @param {string} [key] - Key for value.
+ * @return {*|object} - Value or object.
  */
 export function getAppProps(key) {
-  if (process.browser && !appProps) {
-    setAppProps(parseJson('app_props'));
-  }
   return key ? appProps[key] : appProps;
 }
-
-/**
- * Get props that are passed to app when rendering.
- * @deprecated Use `getAppProps` instead.
- * @param {String} [key] - Key for value.
- * @return {*|Object} Value or object.
- */
-export function getAppData(key) {
-  return getAppProps(key);
-}

package/docs/1.svelte.md

@@ -0,0 +1,115 @@
+# Svelte
+
+Sitevision supports both server and client side rendering with Svelte.
+
+## index.js
+
+For rendering a client side only app use the framework agnostic [client renderer](./1.render.md).
+
+### `render(App, [props])`
+
+`@soleil-api/webapp-util/server/svelte`
+
+Get a HTML string for rendering a universal Svelte application.
+If a client bundle is available the server rendered HTML will be hydrated and not completely re-rendered.
+
+**Returns**: <code>String</code> - HTML for rendering a Svelte application.
+
+| Param | Type | Default | Description |
+| --- | --- | --- | --- |
+| [App] | <code>Svelte</code> | | Svelte app to be rendered. |
+| [props] | <code>Object</code> | <code>{}</code> | Props that will be passed to the app. |
+
+### Universal
+
+Render an app with both server and client code.
+
+`index.js`
+
+```javascript
+import router from '@sitevision/api/common/router';
+import { render } from '@soleil-api/webapp-util/server/svelte';
+
+import App from './App.svelte';
+
+router.get('/', (req, res) => {
+  const props = { foo: 'bar' };
+  const html = render(App, props);
+  res.agnosticRender(html, props);  
+});
+```
+
+### SSR
+
+Render an app with only server side code.
+
+`index.js`
+
+```javascript
+import router from '@sitevision/api/common/router';
+import { render } from '@soleil-api/webapp-util/server/svelte';
+
+import App from './App.svelte';
+
+router.get('/', (req, res) => {
+  const props = { foo: 'bar' };
+  const html = render(App, props);
+  res.send(html);  
+});
+```
+
+### CSR
+
+Render an app with only client side code.
+
+`index.js`
+
+```javascript
+import router from '@sitevision/api/common/router';
+
+router.get('/', (req, res) => {
+  const props = { foo: 'bar' };
+  res.agnosticRender('', props)
+});
+```
+
+## main.js
+
+### `render(App, { target, props })`
+
+`@soleil-api/webapp-util/client/svelte`
+
+Renders a client side Svelte application.
+
+**Returns**: <code>\*</code> - Initialized Svelte component.
+
+| Param | Type | Default | Description |
+| --- | --- | --- | --- |
+| App | <code>\*</code> |  | Svelte app root component. |
+| [settings] | <code>Object</code> | <code>{}</code> | Settings object. |
+| [settings.target] | <code>Element</code> | | Target where app should be mounted. |
+| [settings.props] | <code>Object</code> | | Root component props. |
+| [settings.intro] | <code>String</code> | <code>false</code> | If true, will play transitions on initial render, rather than waiting for subsequent state changes. |
+
+`main.js`
+
+```javascript
+import { render } from '@soleil-api/webapp-util/client/svelte';
+import App from './App.svelte';
+
+export default (props, target) => {
+  render(App, { props, target });
+};
+```
+
+Mount the app in another element:
+`main.js`
+
+```javascript
+import { render } from '@soleil-api/webapp-util/client/svelte';
+import App from './App.svelte';
+
+export default (props) => {
+  render(App, { props, target: document.querySelector('#mount_app_here') });
+};
+```

package/docs/2.vue.md

@@ -0,0 +1,57 @@
+# Vue (DEPRECATED)
+
+Sitevision only supports client side rendering with Vue.
+
+## index.js
+
+Render an app with only client code.
+`index.js`
+
+```javascript
+import router from '@sitevision/api/common/router';
+
+router.get('/', (req, res) => {
+  const props = { foo: 'bar' };
+  res.agnosticRender('', props)
+});
+```
+
+## main.js
+
+### `render(App, { target, props })`
+
+`@soleil-api/webapp-util/client/vue`
+
+Renders a client side Vue application.
+
+**Returns**: <code>\*</code> - Initialized Vue app.
+
+| Param | Type | Default | Description |
+| --- | --- | --- | --- |
+| App | <code>\*</code> |  | Svelte app root component. |
+| [settings] | <code>Object</code> | <code>{}</code> | Settings object. |
+| [settings.target] | <code>Element</code> | | Target where app should be mounted. |
+| [settings.props] | <code>Object</code> | | Root component props. |
+
+`main.js`
+
+```javascript
+import { render } from '@soleil-api/webapp-util/client/vue';
+import App from './App.vue';
+
+export default (props, target) => {
+  render(App, { props, target });
+};
+```
+
+Mount the app in another element:
+`main.js`
+
+```javascript
+import { render } from '@soleil-api/webapp-util/client/vue';
+import App from './App.vue';
+
+export default (props) => {
+  render(App, { props, target: document.querySelector('#mount_app_here') });
+};
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soleil-se/app-util",
-  "version": "4.2.0",
+  "version": "5.0.0",
   "description": "Utility and rendering functions for WebApps.",
   "main": "./common/index.js",
   "author": "Soleil AB",
@@ -11,7 +11,12 @@
   "license": "UNLICENSED",
   "private": false,
   "homepage": "https://docs.soleilit.se/03.packages/@soleil-api&app-util",
-  "gitHead": "56b2bb3947dc881fa4dbed17b6cb9cf90a8d0a85",
-  "dependencies": {},
-  "devDependencies": {}
+  "devDependencies": {
+    "@sitevision/api": "^1.0.10",
+    "svelte": "^3.44.1"
+  },
+  "peerDependencies": {
+    "@sitevision/api": "^1.0.10"
+  },
+  "dependencies": {}
 }

package/server/svelte/index.js

@@ -1,36 +1,13 @@
-import appResource from 'appResource';
-import { appId, setAppProps } from '../../common';
-import { render as renderClient } from '../index';
-
-const initSSR = (App, props) => {
-  setAppProps(props);
-  return App.render(props).html;
-};
-
-/**
- * SSR Svelte App.
- * @export
- * @param {SvelteComponent} App - Svelte component that is root of app.
- * @param {Object} [props] - Props available on root component. Also avaliable with getAppProps.
- * @return {String} - HTML for rendering a Svelte application.
- */
-export function renderServer(App, props = {}) {
-  const html = initSSR(App, props);
-  return `<div id="app_mount_${appId}">${html}</div>`;
-}
+import { setAppProps } from '../../common';
 
 /**
- * Render a Svelte App.
- * @export
+ * Returns HTML for a server rendered Svelte app.
  * @param {SvelteComponent} App - Svelte component that is root of app.
- * @param {Object} [props] - Props available on root component. Also avaliable with getAppProps.
- * @param {Object} [settings] - Settings for rendering a client app.
- * @return {String} - HTML for rendering a Svelte application.
+ * @param {object} props - Props passed to root component.
+ * @return {string} - HTML for the server rendered app.
  */
-export function render(App, props = {}, settings) {
-  const html = initSSR(App, props);
-  if (appResource.getNode('client/index.js')) {
-    return renderClient(props, { ...settings, html });
-  }
-  return `<div id="app_mount_${appId}">${html}</div>`;
+export function render(App, props) {
+  setAppProps(props);
+  const { html } = App.render(props);
+  return html;
 }

package/client/utils/getCurrentScript.js

@@ -1,56 +0,0 @@
-/* Scoped version of https://github.com/amiller-gh/currentScript-polyfill */
-// document.currentScript polyfill by Adam Miller
-// MIT license
-
-export default function getCurrentScript() {
-  if (!('currentScript' in document)) {
-    // IE 8-10 support script readyState
-    // IE 11+ support stack trace
-    try {
-      throw new Error();
-    } catch (err) {
-      // Find the second match for the "at" string to get file src url from stack.
-      // Specifically works with the format of stack traces in IE.
-      let i = 0;
-      const stackDetails = (/.*at [^(]*\((.*):(.+):(.+)\)$/ig).exec(err.stack);
-      const scriptLocation = (stackDetails && stackDetails[1]) || false;
-      const line = (stackDetails && stackDetails[2]) || false;
-      const currentLocation = document.location.href.replace(document.location.hash, '');
-      let pageSource;
-      let inlineScriptSourceRegExp;
-      let inlineScriptSource;
-      const scripts = document.getElementsByTagName('script'); // Live NodeList collection
-
-      if (scriptLocation === currentLocation) {
-        pageSource = document.documentElement.outerHTML;
-        inlineScriptSourceRegExp = new RegExp(`(?:[^\\n]+?\\n){0,${line - 2}}[^<]*<script>([\\d\\D]*?)<\\/script>[\\d\\D]*`, 'i');
-        inlineScriptSource = pageSource.replace(inlineScriptSourceRegExp, '$1').trim();
-      }
-
-      for (; i < scripts.length; i += 1) {
-        // If ready state is interactive, return the script tag
-        if (scripts[i].readyState === 'interactive') {
-          return scripts[i];
-        }
-
-        // If src matches, return the script tag
-        if (scripts[i].src === scriptLocation) {
-          return scripts[i];
-        }
-
-        // If inline source matches, return the script tag
-        if (
-          scriptLocation === currentLocation
-          && scripts[i].innerHTML
-          && scripts[i].innerHTML.trim() === inlineScriptSource
-        ) {
-          return scripts[i];
-        }
-      }
-
-      // If no match, return null
-      return null;
-    }
-  }
-  return document.currentScript;
-}

package/client/utils/index.js

@@ -1,27 +0,0 @@
-import getCurrentScript from './getCurrentScript';
-
-const unescapeTags = (unsafe) => unsafe
-  .replace(/&lt;/g, '<')
-  .replace(/&gt;/g, '>');
-
-/**
- * JSON decode an attribute on the currentScript element.
- * Use if attribute contains a JSON-object.
- * @param {String} attribute Attribute to decode.
- * @returns {Object} Decoded JSON object.
- */
-export const getAttribute = (attribute) => {
-  const currentScript = getCurrentScript();
-  const encoded = currentScript.getAttribute(attribute);
-  if (encoded) {
-    return decodeURIComponent(encoded);
-  }
-  return undefined;
-};
-
-export const parseJson = (type) => {
-  const id = getAttribute('data-app-id');
-  let json = document.querySelector(`[data-id="${type}_${id}"]`)?.textContent || '{}';
-  json = unescapeTags(json);
-  return JSON.parse(json);
-};

package/client/vue/index.js

@@ -1,33 +0,0 @@
-/* eslint-disable import/prefer-default-export */
-/* eslint-disable-next-line import/no-unresolved, import/no-extraneous-dependencies */
-import Vue from 'vue';
-
-import { appId, getAppProps, isOffline } from '../../common';
-
-const offlineModeMixin = {
-  mounted() {
-    const $anchors = this.$el.querySelectorAll('a');
-    $anchors.forEach(($anchor) => {
-      $anchor.addEventListener('click', (e) => {
-        e.preventDefault();
-        window.$svjq($anchor).trigger('click');
-      }, false);
-    });
-  },
-};
-/**
- * Renders a client side Vue application.
- * @param {*} App Vue app root component.
- * @param {Object} [settings={}] Settings object.
- * @param {String} [settings.selector=`#app_mount_${appId}`] Query selector for mount element.
- */
-export function render(App, { selector = `#app_mount_${appId}` } = {}) {
-  const options = getAppProps();
-
-  Object.assign(App, options, {
-    propsData: options,
-    mixins: isOffline ? [offlineModeMixin] : [],
-  });
-
-  new Vue(App).$mount(selector);
-}

package/common/legacy/getRouteUri.js

@@ -1,19 +0,0 @@
-/* eslint-disable global-require */
-
-/**
- * Regex for selecting trailing slashes
- * @constant {Regex}
- */
-const trailingSlashes = /(\/)*$/g;
-
-export default function getRouteUri(route) {
-  const PortletContextUtil = require('PortletContextUtil');
-  const currentPage = PortletContextUtil.getCurrentPage();
-  const currentPortlet = PortletContextUtil.getCurrentPortlet();
-  if (currentPage && currentPortlet) {
-    const currentPageId = currentPage.getIdentifier().replace('_sitePage', '');
-    const currentPortletId = currentPortlet.getIdentifier();
-    return `/appresource/${currentPageId}/${currentPortletId}/${route}`.replace(trailingSlashes, '');
-  }
-  return '/';
-}

package/common/legacy/getViewUri.js

@@ -1,21 +0,0 @@
-/* eslint-disable global-require */
-
-export default function getViewUri(route, { isOffline }) {
-  const PortletContextUtil = require('PortletContextUtil');
-  const PropertyUtil = require('PropertyUtil');
-  const appInfo = require('appInfo');
-  const currentPage = PortletContextUtil.getCurrentPage();
-  const currentPortlet = PortletContextUtil.getCurrentPortlet();
-
-  if (currentPage && currentPortlet) {
-    const currentPageId = currentPage.getIdentifier().replace('_sitePage', '');
-    const currentPageUri = PropertyUtil.getString(currentPage, 'URI');
-    const currentPortletId = PortletContextUtil.getCurrentPortlet().getIdentifier();
-    if (isOffline) {
-      return `/edit-offline/${currentPageId}?sv.target=${currentPortletId}&sv.${currentPortletId}.route=${encodeURI(route)}`;
-    }
-    return `${currentPageUri}?sv.target=${currentPortletId}&sv.${currentPortletId}.route=${encodeURI(route)}`;
-  }
-  const addonId = appInfo['jcr:uuid'];
-  return `/edit-web-app-offline/${addonId}?sv.target=${addonId}&sv.${addonId}.route=${encodeURI(route)}`;
-}

package/docs/1.render.md

@@ -1,58 +0,0 @@
-# Render
-
-Returns HTML for a script tag with the possibility to pass data from the server.
-Framework agnostic.
-
-Server data is embedded as JSON in script tags.
-<https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#embedding_data_in_html>
-
-## index.js
-
-### render([props], [settings]) ⇒ <code>String</code>
-
-`@soleil-api/webapp-util/server`  
-
-Get a HTML string for rendering an application.
-
-**Returns**: <code>String</code> - HTML for rendering an application.
-
-| Param | Type | Default | Description |
-| --- | --- | --- | --- |
-| [props] | <code>Object</code> | <code>{}</code> | Props that will be passed to the app |
-| [settings] | <code>Object</code> | <code>{}</code> | Settings object. |
-| [settings.html] | <code>String</code> | <code>&#x27;&#x27;</code> | HTML that will be rendered inside mount element. |
-| [settings.async] | <code>Boolean</code> | <code>false</code> | If the app script should be loaded asynchronously.  |
-| [settings.defer] | <code>Boolean</code> | <code>true</code> | If the app script should be loaded after DOM is ready.  |
-| [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. |
-
-[Read more about async and defer.](https://flaviocopes.com/javascript-async-defer/)
-
-### Example
-
-```js
-import router from '@Sitevision/api/common/router';
-import { render } from '@soleil-api/webapp-util/server';
-
-router.get('/', (req, res) => {
-  const props = { foo: 'bar' };  
-  res.send(render(props));  
-};
-```
-
-**All settings**
-
-```js
-import router from '@Sitevision/api/common/router';
-import { render } from '@soleil-api/webapp-util/server';
-
-router.get('/', (req, res) => {
-  const props = { foo: 'bar' };  
-  const settings = {
-    html: '<noscript>You can put a noscript message here for example!</noscript>',   
-    async: false,
-    defer: true,
-    req,
-  }
-  res.send(render(props, settings));  
-};
-```

package/docs/2.svelte.md

@@ -1,103 +0,0 @@
-# Svelte
-
-Sitevision supports both server and client side rendering with Svelte.
-
-## index.js
-
-For rendering a client side only app use the framework agnostic [client renderer](./1.render.md).
-
-### `render(App, [props], [settings])`
-
-`@soleil-api/webapp-util/server/svelte`
-
-Get a HTML string for rendering a universal Svelte application.
-If a client bundle is available the server rendered HTML will be hydrated and not completely re-rendered.
-
-**Returns**: <code>String</code> - HTML for rendering a Svelte application.
-
-| Param | Type | Default | Description |
-| --- | --- | --- | --- |
-| [App] | <code>Svelte</code> | | Svelte app to be rendered. |
-| [props] | <code>Object</code> | <code>{}</code> | Props that will be passed to the app. |
-| [settings] | <code>Object</code> | <code>{}</code> | Settings object. Forwarded to  |
-| [settings.async] | <code>Boolean</code> | <code>false</code> | If the app script should be loaded asynchronously. |
-| [settings.defer] | <code>Boolean</code> | <code>true</code> | If the app script should be loaded after DOM is ready. |
-| [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. |
-
-[Read more about async and defer.](https://flaviocopes.com/javascript-async-defer/)
-
-In `app_src/index.js` or `app_src/server/index.js`.
-
-```javascript
-import router from '@Sitevision/api/common/router';
-import { render } from '@soleil-api/webapp-util/server/svelte';
-
-import App from './App.svelte';
-
-router.get('/', (req, res) => {
-  const props = { foo: 'bar' }; 
-  res.send(render(App, props));  
-});
-```
-
-### `renderServer(App, [props])`
-
-`@soleil-api/webapp-util/server/svelte`
-
-Get a HTML string for rendering a server side Svelte application.
-
-**Returns**: <code>String</code> - HTML for rendering a Svelte application.
-
-| Param | Type | Default | Description |
-| --- | --- | --- | --- |
-| [App] | <code>Svelte</code> | | Svelte app to be rendered. |
-| [props] | <code>Object</code> | <code>{}</code> | Server data that will be available as props and as app data. |
-
-In `app_src/index.js` or `app_src/server/index.js`.
-
-```javascript
-import router from '@Sitevision/api/common/router';
-import { renderServer } from '@soleil-api/webapp-util/server/svelte';
-
-import App from './App.svelte';
-
-router.get('/', (req, res) => {
-  const props = { foo: 'bar' }; 
-  res.send(render(App, props));  
-});
-```
-
-## main.js
-
-### `render(App, [settings])`
-
-`@soleil-api/webapp-util/client/svelte`
-
-Renders a client side Svelte application.
-
-**Returns**: <code>\*</code> - Initialized Svelte component.
-
-| Param | Type | Default | Description |
-| --- | --- | --- | --- |
-| App | <code>\*</code> |  | Svelte app root component. |
-| [settings] | <code>Object</code> | <code>{}</code> | Settings object. |
-| [settings.selector] | <code>String</code> | <code>&#x60;#app_mount_${appId}&#x60;</code> | Query selector for mount element. |
-| [settings.intro] | <code>String</code> | <code>false</code> | If true, will play transitions on initial render, rather than waiting for subsequent state changes. |
-
-In `app_src/main.js` or `app_src/client/index.js`.
-
-```javascript
-import { render } from '@soleil-api/webapp-util/client/svelte';
-import App from './App.svelte';
-
-render(App);
-```
-
-Mount the app in another element:
-
-```javascript
-import { render } from '@soleil-api/webapp-util/client/svelte';
-import App from './App.svelte';
-
-render(App, { selector: '#mount_app_here' });
-```

package/docs/3.vue.md

@@ -1,38 +0,0 @@
-# Vue
-
-Sitevision supports client side rendering with Vue.
-
-## index.js
-
-For rendering a client side only app use the framework agnostic [client renderer](./1.render.md).
-
-## main.js
-
-### `render(App, [settings])`
-
-`@soleil-api/webapp-util/client/vue`
-Renders a client side Vue application.
-
-| Param | Type | Default | Description |
-| --- | --- | --- | --- |
-| App | <code>\*</code> |  | Vue app root component. |
-| [settings] | <code>Object</code> | <code>{}</code> | Settings object. |
-| [settings.selector] | <code>String</code> | <code>&#x60;#app_mount_${appId}&#x60;</code> | Query selector for mount element. |
-
-In `app_src/main.js` or `app_src/client/index.js`.
-
-```javascript
-import { render } from '@soleil-api/webapp-util/client/vue';
-import App from './App.vue';
-
-render(App);
-```
-
-Mount the app in another element:
-
-```javascript
-import { render } from '@soleil-api/webapp-util/client/vue';
-import App from './App.vue';
-
-render(App, { selector: '#mount_app_here' });
-```

package/docs/4.underscore.md

@@ -1,57 +0,0 @@
-# Underscore
-
-Render a Underscore template.
-
-## `renderTemplate(template, [values])` ⇒ `String`
-
-Renders a Underscore template and returns a string.
-This function is also available inside the template.
-
-**Returns**: `String` - Rendered template
-
-| Param | Type | Default | Description |
-| --- | --- | --- | --- |
-| template | `String` |  | Underscore template. |
-| [values] | `Object` | `{}` | Values. |
-
-### Examples
-
-**Simple example**
-
-```javascript
-import { renderTemplate } from '@soleil-api/webapp-util/server';
-
-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-api/webapp-util/server';
-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!

package/server/index.js

@@ -1,83 +0,0 @@
-import { appImportDate } from 'appInfo';
-import {
-  appId, isOffline, getResourceUri, getAppMetadata,
-} from '../common';
-
-const isIE = (req) => {
-  if (!req) return true;
-  const userAgent = req.header('user-agent');
-  return /Trident\/|MSIE/.test(userAgent);
-};
-
-const escapeTags = (unsafe) => unsafe
-  .replace(/</g, '&lt;')
-  .replace(/>/g, '&gt;');
-
-/**
- * Get a HTML string for rendering an application.
- * @param {Object} [props={}] Props that will be passed to the app.
- * @param {Object} [settings={}] Settings object.
- * @param {String} [settings.html=''] HTML that will be rendered inside mount element.
- * 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/)
- * @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 render(props, {
-  html = '',
-  async = false,
-  defer = true,
-  req,
-} = {}) {
-  const appMetadata = getAppMetadata();
-
-  const mountElement = `<div id="app_mount_${appId}">${html}</div>`;
-  const metaScriptTag = `<script data-id="app_meta_${appId}" type="application/json">${JSON.stringify(appMetadata)}</script>`;
-  const propsScriptTag = props ? `<script data-id="app_props_${appId}" type="application/json">${escapeTags(JSON.stringify(props))}</script>` : '';
-
-  if (isOffline) {
-    return `
-${mountElement}
-${metaScriptTag}
-${propsScriptTag}
-<script>
-  window.svDocReady(function() {
-    var targetElement = document.getElementById('app_mount_${appId}');
-    var script = document.createElement("script");
-    script.src = "${getResourceUri('client/index.js')}?${appImportDate}${appId}";
-    script.setAttribute("data-app-id", "${appId}");  
-    targetElement.parentNode.insertBefore(script, targetElement.nextSibling);
-  });
-</script>`;
-  }
-  return `
-${mountElement}
-${metaScriptTag}
-${propsScriptTag}
-<script 
-  src="${getResourceUri('client/index.js')}?${appImportDate}${isIE(req) ? appId : ''}"  
-  data-app-id="${appId}" 
-  ${async && !defer ? 'async' : ''} 
-  ${defer ? 'defer' : ''}>
-</script>`;
-}
-
-/**
- * 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 = {}) {
-  // Import undercore dynamically in the rare case this function is still used.
-  // eslint-disable-next-line global-require
-  const _ = require('undercore');
-  if (typeof template === 'function') {
-    return template({ ...values, renderTemplate });
-  }
-  return _.template(template)(({ ...values, renderTemplate }));
-}