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.

render(App, [props], [settings])

@soleil-se/app-util/server/svelte

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.
[settings]	Object	{}	Settings object. Forwarded to
[settings.async]	Boolean	false	If the app script should be loaded asynchronously.
[settings.defer]	Boolean	true	If the app script should be loaded after DOM is ready.
[settings.req]	Object		The req object from Sitevision, pass this to optimize browser specific script loading if you have multiple instances of the app.

Read more about async and defer.

In app_src/index.js or app_src/server/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' };
  res.send(render(App, props));
});

renderServer(App, [props])

@soleil-se/app-util/server/svelte

Get a HTML string for rendering a server side Svelte application.

Returns: String - HTML for rendering a Svelte application.

Param	Type	Default	Description
[App]	Svelte		Svelte app to be rendered.
[props]	Object	{}	Server data that will be available as props and as app data.

In app_src/index.js or app_src/server/index.js.

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

import App from './App.svelte';

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

main.js

render(App, [settings])

@soleil-se/app-util/client/svelte

Renders a client side Svelte application.

Returns: * - Initialized Svelte component.

Param	Type	Default	Description
App	*		Svelte app root component.
[settings]	Object	{}	Settings object.
[settings.selector]	String	`#app_mount_${appId}`	Query selector for mount element.
[settings.intro]	String	false	If true, will play transitions on initial render, rather than waiting for subsequent state changes.

In app_src/main.js or app_src/client/index.js.

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

render(App);

Mount the app in another element:

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

render(App, { selector: '#mount_app_here' });