@soleil-se/app-util 4.1.2 → 4.1.3

package/CHANGELOG.md

@@ -4,6 +4,13 @@ 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.

package/client/.eslintrc.js

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

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.2",
+  "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": "810b8ad5ceb960a03f7af40052b663b444763794",
+  "gitHead": "9fc1fba75e8419058746c7170dcf96ea6c78f4eb",
   "dependencies": {},
   "devDependencies": {}
 }

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  
-}