@soleil-se/app-util 4.1.2 → 4.1.4

package/CHANGELOG.md

@@ -1,100 +1,162 @@
 # Changelog
+
 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-05-25
+
+### Fixed
+
+- Return empty object instead of undefined when app data isn't set.
+
+### Removed
+
+- Remove `vue` as optional dependency.
+
+## [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.
 
 ## [4.1.0] - 2021-02-17
+
 ### Changed
+
 - Put app data and metadata in script elements instead of data attributes.
 
 ## [4.0.1] - 2021-01-28
+
 ### Fixed
+
 - Crashes when no data is passed to app and then trying to call `getAppData`.
 
 ## [4.0.0] - 2021-01-27
-A much needed major overhaul of the package.   
+
+A much needed major overhaul of the package.
 See [MIGRATION](./MIGRATION.md).
 
 ### Changed
+
 - Major refactoring of package.
-- Exports for render functions are moved. 
+- Exports for render functions are moved.
 - All documented constants and functions from base import (`@soleil-api/webapp-util`) now works both in a server and client context.
 - Settings for selector is moved from server to client rendering functions.
 
 ### Removed
+
 - `noScript` option in `render` (formerly `renderApp`) has been removed. If a no script message is needed use the `html` option wrapped in `<noscript>`.
 - `@soleil-api/webapp-util/app-data` has been removed, use [getAppData](./README.md#getAppData) from `@soleil-api/webapp-util`.
 
 ## [3.0.3] - 2020-11-03
+
 - Nothing, Lerna wanted to publish...
 
 ## [3.0.2] - 2020-10-19
+
 - Nothing, Lerna wanted to publish...
 
 ## [3.0.1] - 2020-09-28
+
 ### Added
+
 - Homepage link
 
 ## [3.0.0] - 2020-09-28
+
 ### Added
+
 - Svelte support.
 - New exports:
   - `uniqueId` - A unique id for the app instance.
 
 ## [2.4.1] - 2020-09-01
+
 ### Fixed
+
 - App data with single quotes crashes app in edit mode, use double quotes instead.
 
 ## [2.4.0] - 2020-05-26
+
 ### Fixed
+
 - `getViewUri` returns correct URI when in offline mode and in the Addons view.
 
 ## [2.3.0] - 2020-05-22
+
 ### Added
-- `renderApp` now accepts `req` as a setting to opimize script loading when multiple instances of the app exists. If `req` is present the script will only be loaded once in all browsers except IE11 that needs a unique script src for the currentScript polyfill to work. 
+
+- `renderApp` now accepts `req` as a setting to opimize script loading when multiple instances of the app exists. If `req` is present the script will only be loaded once in all browsers except IE11 that needs a unique script src for the currentScript polyfill to work.
 
 ### Fixed
+
 - `noScript` in `renderApp` was not wrapped in a `<noscript>` tag.
 
 ## [2.2.0] - 2020-05-20
+
 ### Added
+
 - `renderTemplate` function is now available inside templates rendered by the function.
+
 ## [2.1.4] - 2020-04-07
+
 ### Fixed
+
 - `getViewUri` had incorrect portlet ID.
+
 ## [2.1.3] - 2020-02-25
+
 ### Fixed
+
 - Add timestamp to script url in edit mode as well.
 
 ## [2.1.2] - 2020-02-21
+
 ### Fixed
+
 - Wrapped `renderApp` script in svDocReady in edit mode to be sure it executes when other bundles are loaded.
 
 ## [2.1.1] - 2020-02-14
+
 ### Changed
+
 - Updated readme, heading levels and examples.
 
 ## [2.1.0] - 2020-02-14
+
 ### Added
+
 - App data import in client, `@soleil-api/webapp-util/app-data`.
 - `getViewUri` to get the URI that also renders the page.
 - `isOnline` to see if the app is online.
 
 ### Changed
+
 - `vue` is now an optional depedency.  
 
 ## [2.0.0] - 2020-02-12
+
 ### Changed
+
 - Now using `currentScript` to reference the script element the app is running in to pass data when using `renderApp`.
 - `renderApp` is no longer using appName.
-- `render` is now called directly in `./app_src/client/index.js`. 
-- `render` and `App` no longer needs to be exported from `./app_src/client/index.js`. 
+- `render` is now called directly in `./app_src/client/index.js`.
+- `render` and `App` no longer needs to be exported from `./app_src/client/index.js`.

package/client/.eslintrc.js

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

package/common/index.js

@@ -124,7 +124,7 @@ export function getAppMetadata() {
   };
 }
 
-let appData = process.browser ? parseJson('app_data') : undefined;
+let appData = process.browser ? parseJson('app_data') : {};
 
 export function setAppData(data) {
   appData = data;

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,7 +1,7 @@
 {
   "name": "@soleil-se/app-util",
-  "version": "4.1.2",
-  "description": "Utility functions for Webapps.",
+  "version": "4.1.4",
+  "description": "Utility and rendering functions for WebApps.",
   "main": "./common/index.js",
   "author": "Soleil AB",
   "contributors": [
@@ -11,10 +11,7 @@
   "license": "UNLICENSED",
   "private": false,
   "homepage": "https://docs.soleilit.se/03.packages/@soleil-api&app-util",
-  "optionalDependencies": {
-    "vue": "^2.6.11"
-  },
-  "gitHead": "810b8ad5ceb960a03f7af40052b663b444763794",
+  "gitHead": "6651e6eb4eb4133134d952e498c45121176c0b13",
   "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  
-}