@soleil-se/app-util/client/svelte/5/index.js

Utility functions for WebApps, RESTApps and Widgets in Sitevision.

// eslint-disable-next-line import/no-extraneous-dependencies
import { mount as svelteMount, hydrate as svelteHydrate } from 'svelte';

import { setAppProps } from '../../../common';

/** @typedef {import('svelte').Component} Component */

/**
 * Renders a client side Svelte application.
 * @param {Component} App Svelte app root component.
 * @param {object} [settings={}] Settings object.
 * @param {HTMLElement} [settings.target] Target where app should be mounted.
 * @param {object} [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 });
  }
}