Svelte

Sitevision supports both server and client side rendering with Svelte.

index.js

render(App, [props])

@soleil-se/app-util/server/svelte/5
@soleil-se/app-util/server/svelte/4
@soleil-se/app-util/server/svelte/3
@soleil-se/app-util/server/svelte Deprecated

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: String - HTML for rendering a Svelte application.

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.

Svelte 5

index.js

import router from '@sitevision/api/common/router';
import { render } from '@soleil-se/app-util/server/svelte/5';

import App from './App.svelte';

router.get('/', (req, res) => {
  const props = { foo: 'bar' };
  const html = render(App, props);
  res.agnosticRender(html, props);
});

Svelte 4

index.js

import router from '@sitevision/api/common/router';
import { render } from '@soleil-se/app-util/server/svelte/4';

import App from './App.svelte';

router.get('/', (req, res) => {
  const props = { foo: 'bar' };
  const html = render(App, props);
  res.agnosticRender(html, props);
});

Svelte 3

index.js

import router from '@sitevision/api/common/router';
import { render } from '@soleil-se/app-util/server/svelte/3';

import App from './App.svelte';

router.get('/', (req, res) => {
  const props = { foo: 'bar' };
  const html = render(App, props);
  res.agnosticRender(html, props);
});

Deprecated

index.js

import router from '@sitevision/api/common/router';
import { render } from '@soleil-se/app-util/server/svelte';

import App from './App.svelte';

router.get('/', (req, res) => {
  const props = { foo: 'bar' };
  const html = render(App, props);
  res.agnosticRender(html, props);
});

SSR

Render an app with only server side code.

Svelte 5

index.js

import router from '@sitevision/api/common/router';
import { render } from '@soleil-se/app-util/server/svelte/5';

import App from './App.svelte';

router.get('/', (req, res) => {
  const props = { foo: 'bar' };
  const html = render(App, props);
  res.send(html);
});

Svelte 4

index.js

import router from '@sitevision/api/common/router';
import { render } from '@soleil-se/app-util/server/svelte/4';

import App from './App.svelte';

router.get('/', (req, res) => {
  const props = { foo: 'bar' };
  const html = render(App, props);
  res.send(html);
});

Svelte 3

index.js

import router from '@sitevision/api/common/router';
import { render } from '@soleil-se/app-util/server/svelte/3';

import App from './App.svelte';

router.get('/', (req, res) => {
  const props = { foo: 'bar' };
  const html = render(App, props);
  res.send(html);
});

Deprecated

index.js

import router from '@sitevision/api/common/router';
import { render } from '@soleil-se/app-util/server/svelte';

import App from './App.svelte';

router.get('/', (req, res) => {
  const props = { foo: 'bar' };
  const html = render(App, props);
  res.send(html);
});

CSR

Render an app with only client side code.

index.js

import router from '@sitevision/api/common/router';

router.get('/', (req, res) => {
  const props = { foo: 'bar' };
  res.agnosticRender('', props)
});

main.js

render(App, { target, props })

@soleil-se/app-util/client/svelte/5
@soleil-se/app-util/client/svelte/4
@soleil-se/app-util/client/svelte/3
@soleil-se/app-util/client/svelte Deprecated

Renders a client side Svelte application.

Returns: Initialized Svelte component.

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.

Svelte 5

main.js

import { render } from '@soleil-se/app-util/client/svelte/5';
import App from './App.svelte';

export default (props, target) => {
  render(App, { props, target });
};

Mount the app in another element:

main.js

import { render } from '@soleil-se/app-util/client/svelte/5';
import App from './App.svelte';

export default (props) => {
  render(App, { props, target: document.querySelector('#mount_app_here') });
};

Svelte 4

main.js

import { render } from '@soleil-se/app-util/client/svelte/4';
import App from './App.svelte';

export default (props, target) => {
  render(App, { props, target });
};

Mount the app in another element:

main.js

import { render } from '@soleil-se/app-util/client/svelte/4';
import App from './App.svelte';

export default (props) => {
  render(App, { props, target: document.querySelector('#mount_app_here') });
};

Svelte 3

main.js

import { render } from '@soleil-se/app-util/client/svelte/3';
import App from './App.svelte';

export default (props, target) => {
  render(App, { props, target });
};

Mount the app in another element:

main.js

import { render } from '@soleil-se/app-util/client/svelte/3';
import App from './App.svelte';

export default (props) => {
  render(App, { props, target: document.querySelector('#mount_app_here') });
};

Deprecated

main.js

import { render } from '@soleil-se/app-util/client/svelte';
import App from './App.svelte';

export default (props, target) => {
  render(App, { props, target });
};

Mount the app in another element:

main.js

import { render } from '@soleil-se/app-util/client/svelte';
import App from './App.svelte';

export default (props) => {
  render(App, { props, target: document.querySelector('#mount_app_here') });
};