@soleil-se/app-util 4.1.1 → 4.1.3

package/CHANGELOG.md

@@ -4,6 +4,17 @@ 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.3] - 2021-03-31
+### Fixed
+- Consistent rendering when using `serverServer` and `render` for Svelte.
+
+### Added
+- Docs for Svelte `renderServer` function.
+
+## [4.1.2] - 2021-02-24
+### Fixed
+- Escape tags when parsing data to prevent closure of script tags.
+
 ## [4.1.1] - 2021-02-17
 ### Fixed
 - Validation error for `id` on script tags, even though it's allowed.

package/client/.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  extends: '@soleil/eslint-config-sitevision/client',
+  root: true,
+};

package/client/utils/index.js

@@ -1,5 +1,9 @@
 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.
@@ -17,5 +21,7 @@ export const getAttribute = (attribute) => {
 
 export const parseJson = (type) => {
   const id = getAttribute('data-app-id');
-  return JSON.parse(document.querySelector(`[data-id="${type}_${id}"]`)?.textContent || '{}');
+  let json = document.querySelector(`[data-id="${type}_${id}"]`)?.textContent || '{}';
+  json = unescapeTags(json);
+  return JSON.parse(json);
 };

package/docs/1.render.md

@@ -1,7 +1,10 @@
 # Render
-Returns HTML for a script tag with server data avaliable as attributes on the tag.    
+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([data], [settings]) ⇒ <code>String</code>
 `@soleil-api/webapp-util/server`  

package/docs/2.svelte.md

@@ -14,6 +14,7 @@ If a client bundle is available the server rendered HTML will be hydrated and no
 
 | 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. |
 | [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. |
@@ -35,6 +36,31 @@ router.get('/', (req, res) => {
 });
 ```
 
+### `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 '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, data));  
+});
+```
+
 ## main.js
 
 ### `render(App, [settings])`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soleil-se/app-util",
-  "version": "4.1.1",
+  "version": "4.1.3",
   "description": "Utility functions for Webapps.",
   "main": "./common/index.js",
   "author": "Soleil AB",
@@ -14,7 +14,7 @@
   "optionalDependencies": {
     "vue": "^2.6.11"
   },
-  "gitHead": "ec464f4ae29e5b27c3b04a765b5b5bbfdc88ce3f",
+  "gitHead": "9fc1fba75e8419058746c7170dcf96ea6c78f4eb",
   "dependencies": {},
   "devDependencies": {}
 }

package/server/index.js

@@ -12,6 +12,10 @@ const isIE = (req) => {
   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} [data={}] Server data that will be available in the attribute.
@@ -37,7 +41,7 @@ export function render(data, {
 
   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 dataScriptTag = data ? `<script data-id="app_data_${appId}" type="application/json">${JSON.stringify(data)}</script>` : '';
+  const dataScriptTag = data ? `<script data-id="app_data_${appId}" type="application/json">${escapeTags(JSON.stringify(data))}</script>` : '';
 
   if (isOffline) {
     return `

package/server/svelte/index.js

@@ -1,8 +1,13 @@
 /* eslint-disable import/prefer-default-export */
 import appResource from 'appResource';
-import { setAppData } from '../../common';
+import { appId, setAppData } from '../../common';
 import { render as renderClient } from '../index';
 
+const initSSR = (App, props) => {
+  setAppData(props);
+  return App.render(props).html;
+};
+
 /**
  * SSR Svelte App.
  * @export
@@ -11,9 +16,8 @@ import { render as renderClient } from '../index';
  * @return {String} - HTML for rendering a Svelte application.
  */
 export function renderServer(App, props = {}) {
-  setAppData(props);
-  const { html } = App.render(props);
-  return html;
+  const html = initSSR(App, props);
+  return `<div id="app_mount_${appId}">${html}</div>`;
 }
 
 /**
@@ -25,9 +29,9 @@ export function renderServer(App, props = {}) {
  * @return {String} - HTML for rendering a Svelte application.
  */
 export function render(App, props = {}, settings) {
-  const html = renderServer(App, props);
+  const html = initSSR(App, props);
   if (appResource.getNode('client/index.js')) {
     return renderClient(props, { ...settings, html });
   }
-  return html;
+  return `<div id="app_mount_${appId}">${html}</div>`;
 }

package/client/.eslintrc

@@ -1,4 +0,0 @@
-{
-  "extends": "@soleil/eslint-config-sitevision/client",
-  "root": true  
-}