@soleil-se/app-util 5.6.0 → 5.6.2

package/CHANGELOG.md

@@ -1,10 +1,21 @@
-# Changelog
+---
+title: 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).
 
+## [5.6.2] - 2023-12-14
+
+- Update to correct homepage in `package.json`.
+
+## [5.6.1] - 2023-12-14
+
+- Hydrate when children other than HTML Elements exist in target.
+- New argument for client side Svelte rendering for `hydrate`.
+
 ## [5.6.0] - 2023-11-23
 
 - New constants: `isServer` and `isBrowser`.
@@ -166,7 +177,7 @@ See [MIGRATION](./MIGRATION.md).
 - 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.
-- `vue` is now an optional depedency.  
+- `vue` is now an optional depedency.
 
 ## [2.0.0] - 2020-02-12
 

package/client/svelte/index.js

@@ -14,11 +14,10 @@ export function render(App, {
   target,
   props,
   intro = false,
+  hydrate = target.hasChildNodes(),
 } = {}) {
   setAppProps(props);
 
-  const hydrate = target.childElementCount > 0;
-
   return new App({
     hydrate,
     target,

package/docs/1.svelte.md

@@ -1,11 +1,11 @@
-# Svelte
+---
+title: 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`
@@ -13,20 +13,19 @@ For rendering a client side only app use the framework agnostic [client renderer
 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.
+**Returns**: `String` - 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. |
+| Param   | Type     | Default | Description                           |
+|---------|----------|---------|---------------------------------------|
+| [App]   | `Svelte` |         | Svelte app to be rendered.            |
+| [props] | `Object` | `{}`    | Props that will be passed to the app. |
 
 ### Universal
 
 Render an app with both server and client code.
 
-`index.js`
-
 ```javascript
+// index.js
 import router from '@sitevision/api/common/router';
 import { render } from '@soleil-api/webapp-util/server/svelte';
 
@@ -35,7 +34,7 @@ import App from './App.svelte';
 router.get('/', (req, res) => {
   const props = { foo: 'bar' };
   const html = render(App, props);
-  res.agnosticRender(html, props);  
+  res.agnosticRender(html, props);
 });
 ```
 
@@ -43,9 +42,8 @@ router.get('/', (req, res) => {
 
 Render an app with only server side code.
 
-`index.js`
-
-```javascript
+```js
+// index.js
 import router from '@sitevision/api/common/router';
 import { render } from '@soleil-api/webapp-util/server/svelte';
 
@@ -54,7 +52,7 @@ import App from './App.svelte';
 router.get('/', (req, res) => {
   const props = { foo: 'bar' };
   const html = render(App, props);
-  res.send(html);  
+  res.send(html);
 });
 ```
 
@@ -62,9 +60,8 @@ router.get('/', (req, res) => {
 
 Render an app with only client side code.
 
-`index.js`
-
 ```javascript
+// index.js
 import router from '@sitevision/api/common/router';
 
 router.get('/', (req, res) => {
@@ -81,19 +78,19 @@ router.get('/', (req, res) => {
 
 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. |
+**Returns**: `SvelteComponent` - Initialized Svelte component.
 
-`main.js`
+| Param              | Type              | Default                  | Description                                                                                                                                                                           |
+|--------------------|-------------------|--------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| App                | `SvelteComponent` |                          | Svelte app root component.                                                                                                                                                            |
+| [settings]         | `Object`          | `{}`                     | Settings object.                                                                                                                                                                      |
+| [settings.target]  | `Element`         |                          | Target where app should be mounted.                                                                                                                                                   |
+| [settings.props]   | `Object`          |                          | Root component props.                                                                                                                                                                 |
+| [settings.intro]   | `Boolean`         | `false`                  | If true, will play transitions on initial render, rather than waiting for subsequent state changes.                                                                                   |
+| [settings.hydrate] | `Boolean`         | `target.hasChildNodes()` | Instructs Svelte to upgrade existing DOM (usually from server-side rendering) rather than creating new elements. By default the app will hydrate when the target has any child nodes. |
 
 ```javascript
+// main.js
 import { render } from '@soleil-api/webapp-util/client/svelte';
 import App from './App.svelte';
 
@@ -103,9 +100,9 @@ export default (props, target) => {
 ```
 
 Mount the app in another element:
-`main.js`
 
 ```javascript
+// main.js
 import { render } from '@soleil-api/webapp-util/client/svelte';
 import App from './App.svelte';
 

package/package.json

@@ -1,19 +1,19 @@
 {
   "name": "@soleil-se/app-util",
-  "version": "5.6.0",
+  "version": "5.6.2",
   "description": "Utility and rendering functions for WebApps.",
   "main": "./common/index.js",
   "author": "Soleil AB",
   "license": "UNLICENSED",
   "private": false,
-  "homepage": "https://docs.soleil.se/03.packages/01.@soleil-api&app-util/",
+  "homepage": "https://docs.soleil.se/packages/app-util/",
   "devDependencies": {
-    "@sitevision/api": "^1.0.10",
-    "svelte": "^3.44.1"
+    "@sitevision/api": "^2023.9.2",
+    "svelte": "^3.59.2"
   },
   "peerDependencies": {
     "@sitevision/api": "*"
   },
-  "gitHead": "d3fa2582d5479445835e6d6df052f7160b1eae1b",
+  "gitHead": "454db615bcb04eb8f1475f0f8ab9a9fee5fce15f",
   "dependencies": {}
 }