@soleil-se/app-util 5.7.1 → 5.8.0

package/CHANGELOG.md

@@ -7,6 +7,16 @@ 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.8.0] - 2024-10-21
+
+- Restructure rendering function for different Svelte versions.
+- Add rendering function for Svelte 5.
+- Deprecate old Svelte rendering functions.
+
+## [5.7.2] - 2024-08-21
+
+- Add `?version=0` properly to `getRouteUri` when called in offline mode.
+
 ## [5.7.1] - 2024-08-07
 
 - Change widget detection to use `window.sv.PageContext.dashboardId`.

package/client/svelte/3/index.js

@@ -0,0 +1 @@
+export { render } from '../4';

package/client/svelte/4/index.js

@@ -0,0 +1,30 @@
+import { setAppProps } from '../../../common';
+
+/**
+ * Renders a client side Svelte application.
+ * @param {import('svelte').SvelteComponent} App Svelte app root component.
+ * @param {object} [settings={}] Settings object.
+ * @param {string} [settings.target] Target where app should be mounted.
+ * @param {string} [settings.props] Root component props.
+ * @param {boolean} [settings.hydrate=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.
+ * @param {boolean} [settings.intro=false] If true, will play transitions on initial render,
+ * rather than waiting for subsequent state changes.
+ * @return {import('svelte').SvelteComponent} Initialized Svelte component.
+ */
+export function render(App, {
+  target,
+  props,
+  intro = false,
+  hydrate = target.hasChildNodes(),
+} = {}) {
+  setAppProps(props);
+
+  return new App({
+    hydrate,
+    target,
+    props,
+    intro,
+  });
+}

package/client/svelte/5/index.js

@@ -0,0 +1,31 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { mount as svelteMount, hydrate as svelteHydrate } from 'svelte';
+
+import { setAppProps } from '../../../common';
+
+/**
+ * Renders a client side Svelte application.
+ * @param {import('svelte').Component} App Svelte app root component.
+ * @param {object} [settings={}] Settings object.
+ * @param {string} [settings.target] Target where app should be mounted.
+ * @param {string} [settings.props] Root component props.
+ * @param {boolean} [settings.hydrate=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.
+ * @param {boolean} [settings.intro=false] If true, will play transitions on initial render,
+ * rather than waiting for subsequent state changes.
+ */
+export function render(App, {
+  target,
+  props,
+  hydrate = target.hasChildNodes(),
+  intro = false,
+} = {}) {
+  setAppProps(props);
+
+  if (hydrate) {
+    svelteHydrate(App, { target, props, intro });
+  } else {
+    svelteMount(App, { target, props, intro });
+  }
+}

package/client/svelte/index.js

@@ -1,27 +1,20 @@
-import { setAppProps } from '../../common';
+import { render as render4 } from './4';
 
 /**
- * Renders a client side Svelte application.
- * @param {*} App Svelte app root component.
+ * Renders a client side Svelte 3 or 4 application.
+ * @deprecated Use rendering function for specific Svelte version instead.
+ * `import { render } from '@soleil-api/webapp-util/client/{3|4|5}';`
+ * @param {import('svelte').SvelteComponent} App Svelte app root component.
  * @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,
+ * @param {boolean} [settings.hydrate=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.
+ * @param {boolean} [settings.intro=false] If true, will play transitions on initial render,
  * rather than waiting for subsequent state changes.
- * @return {*} Initialized Svelte component.
+ * @return {import('svelte').SvelteComponent} Initialized Svelte component.
  */
-export function render(App, {
-  target,
-  props,
-  intro = false,
-  hydrate = target.hasChildNodes(),
-} = {}) {
-  setAppProps(props);
-
-  return new App({
-    hydrate,
-    target,
-    props,
-    intro,
-  });
+export function render(App, settings) {
+  return render4(App, settings);
 }

package/common/index.js

@@ -129,9 +129,13 @@ export function parseParams(url = '') {
  */
 export function getRouteUri(route = '', params = undefined) {
   const path = route.replace(leadingSlashes, '');
-  const qs = stringifyParams(params, { addQueryPrefix: true });
+  const qs = stringifyParams({
+    version: isOffline ? '0' : undefined,
+    ...params,
+  }, { addQueryPrefix: true });
   if (router?.getStandaloneUrl) {
-    return router.getStandaloneUrl((path !== '' ? `/${path}` : path).replace(trailingSlashes, '')) + qs;
+    return router.getStandaloneUrl((path !== '' ? `/${path}` : path).replace(trailingSlashes, ''))
+      .replace('?version=0', '') + qs;
   }
   /* Import of @sitevision/api/common/router is not avaliable in hooks, need to build the route URI
    * manually instead of using router.getStandaloneUri */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soleil-se/app-util",
-  "version": "5.7.1",
+  "version": "5.8.0",
   "description": "Utility and rendering functions for WebApps.",
   "main": "./common/index.js",
   "author": "Soleil AB",
@@ -9,11 +9,11 @@
   "homepage": "https://docs.soleil.se/packages/app-util/",
   "devDependencies": {
     "@sitevision/api": "^2023.9.2",
-    "svelte": "^3.59.2"
+    "svelte": "^4.2.18"
   },
   "peerDependencies": {
     "@sitevision/api": "*"
   },
-  "gitHead": "c16a10d52ce59fe1cfa51fb270549c1655f81db3",
+  "gitHead": "cb815ee398e467bc9440e1b4e98640e12462dd41",
   "dependencies": {}
 }

package/server/svelte/3/index.js

@@ -0,0 +1 @@
+export { render } from '../4';

package/server/svelte/4/index.js

@@ -0,0 +1,13 @@
+import { setAppProps } from '../../../common';
+
+/**
+ * Returns HTML for a server rendered Svelte app.
+ * @param {import('svelte').SvelteComponent} App Svelte component that is root of app.
+ * @param {object} props Props passed to root component.
+ * @return {string} HTML for the server rendered app.
+ */
+export function render(App, props) {
+  setAppProps(props);
+  const { html } = App.render(props);
+  return html;
+}

package/server/svelte/5/index.js

@@ -0,0 +1,15 @@
+import { render as svelteRender } from 'svelte/server';
+import { setAppProps } from '../../../common';
+
+/**
+ * Returns HTML for a server rendered Svelte app.
+ * @param {import('svelte').Component} App Svelte component that is root of app.
+ * @param {object} props Props passed to root component.
+ * @return {string} HTML for the server rendered app.
+ */
+export function render(App, props) {
+  setAppProps(props);
+
+  const { body } = svelteRender(App, props);
+  return body;
+}

package/server/svelte/index.js

@@ -1,13 +1,13 @@
-import { setAppProps } from '../../common';
+import { render as render4 } from './4';
 
 /**
- * Returns HTML for a server rendered Svelte app.
- * @param {SvelteComponent} App - Svelte component that is root of app.
- * @param {object} props - Props passed to root component.
- * @return {string} - HTML for the server rendered app.
+ * Returns HTML for a server rendered Svelte 3 or 4 app.
+ * @deprecated Use rendering function for specific Svelte version instead.
+ * `import { render } from '@soleil-api/webapp-util/server/{3|4|5}';`
+ * @param {import('svelte').SvelteComponent} App Svelte component that is root of app.
+ * @param {object} props Props passed to root component.
+ * @return {string} HTML for the server rendered app.
  */
 export function render(App, props) {
-  setAppProps(props);
-  const { html } = App.render(props);
-  return html;
+  return render4(App, props);
 }