@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';

/**
 * @template {import('svelte').Component<any, any>} TComponent
 * @typedef {object} RenderSettings
 * @property {HTMLElement} [target] Target where app should be mounted.
 * @property {import('svelte').ComponentProps<TComponent>} [props] Root component props.
 * @property {boolean} [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.
 * @property {boolean} [intro=false] If true, will play transitions on initial render, rather than
 * waiting for subsequent state changes.
 */

/**
 * Renders a client side Svelte application.
 * @template {import('svelte').Component<any, any>} TComponent
 * @param {TComponent} App Svelte app root component.
 * @param {RenderSettings<TComponent>} [settings={}] Settings object.
 */
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 });
  }
}