This package has changed name, was previously @soleil/svelte-config.
More information

@soleil-se/config-svelte

A collection of Svelte components and utilities for WebApp, RESTApp and Widget configurations.

Changelog

See the latest updates in the CHANGELOG.

Installation

Install locally in your WebApp

npm install @soleil-se/config-svelte

Components

UI

Panel
Modal

Sitevision

Wrappers for Sitevision components.

Input

Regular inputs

Custom

Custom components

Structure

Only standard config:

DirectoryMyApp
- Directoryconfig
  - App.svelte
  - config.js
- Directorysrc/
  - …
- …

With global config:

DirectoryMyApp
- Directoryconfig
  - App.svelte
  - config.js
- Directoryconfig_global
  - App.svelte
  - config.js
- Directorysrc/
  - …
- …

With server side code:

DirectoryMyApp
- Directoryconfig
  - App.svelte
  - config.js
  - index.js
- Directorysrc/
  - …
- …

Examples

Using Sitevision default functions with name attributes as usual.

import { createConfigApp } from '@soleil-se/config-svelte';
import { mount } from 'svelte';

import App from './App.svelte';

createConfigApp(({ target, props }) => mount(App, { target, props }));

import { createConfigApp } from '@soleil-se/config-svelte';

import App from './App.svelte';

createConfigApp(({ target, props }) => new App({ target, props }));

import { createConfigApp } from '@soleil-se/config-svelte';

import App from './App.svelte';

createConfigApp(App);

<script>
  import { Panel, InputField } from '@soleil-se/config-svelte';
</script>

<Panel heading="Inställningar">
  <InputField name="text" label="Text" />
</Panel>

Advanced

Binding values. Sometimes you need full control over the data that is saved to the server, but usually the default functions are enough. Import a utility function that saves values to the server.

import { createConfigApp } from '@soleil-se/config-svelte';
import { mount } from 'svelte';

import App from './App.svelte';

createConfigApp(({ target, props }) => mount(App, { target, props }));

import { createConfigApp } from '@soleil-se/config-svelte';

import App from './App.svelte';

createConfigApp(({ target, props }) => new App({ target, props }));

import { createConfigApp } from '@soleil-se/config-svelte';

import App from './App.svelte';

createConfigApp(App);

<script>
  import { Panel, InputField } from '@soleil-se/config-svelte';
  import { onSave } from '@soleil-se/config-svelte/utils';

  // Values are available as a prop on root component
  export let values;

  // Set default values if needed
  values = {
    text: '',
    ...values
  };

  onSave(() => values);
</script>

<Panel heading="Inställningar">
  <InputField bind:value={values.text} label="Text" />
</Panel>

Saved values

The values object is available as a prop and CONFIG_VALUES global variable.

Svelte 5
Svelte 4

<script>
  import { Panel, InputField } from '@soleil-se/config-svelte';

  let { values } = $props();

  console.log(values, '===', window.CONFIG_VALUES);
</script>

<Panel heading="Inställningar">
  <InputField name="text" label="Text" />
</Panel>

<script>
  import { Panel, InputField } from '@soleil-se/config-svelte';

  export let values;

  console.log(values, '===', window.CONFIG_VALUES);
</script>

<Panel heading="Inställningar">
  <InputField name="text" label="Text" />
</Panel>

Utils

i18n

Since 1.6.0

Simple i18n utility for translating the configuration.

import { createI18n } from '@soleil-se/config-svelte/utils';

export default createI18n({
  sv: {
    label: 'Välj sida',
    hello: 'Hej {name}!',
  },
  no: {
    label: 'Velg side',
    hello: 'Hallo {name}!',
  },
  en: {
    label: 'Select page',
    hello: 'Hello {name}!',
  },
});

<script>
  import { Panel, NodeSelector } from '@soleil-se/config-svelte';
  import i18n from './i18n.js';

  const hello = i18n('hello', { name: 'Foo' });
</script>

<Panel>
  <NodeSelector name="page" type="page-selector" label={i18n('label')} />
</Panel>

generateId

Generates a unique ID inside the configuration context. Prefixed with input per default;

import { generateId } from '@soleil-se/config-svelte/utils';

const id = generateId(); // input_pcp61fn1u
const idCustomPrefix = generateId('foo'); // foo_pcp61fn1u

setupComponent

Triggers the setup-component event on the element with passed ID.
Read more on developer.sitevision.se

import { setupComponent } from '@soleil-se/config-svelte/utils';

setupComponent('myId');

getAppProps

Since 1.8.0

Get props passed to the app when using server data.

import { getAppProps } from '@soleil-se/config-svelte/utils';

const appProps = getAppProps();
const { myProp } = getAppProps();

getAppContext

Since 1.17.0

Get app context value or object that is created for app when rendering with createAppContext.

import { getAppContext } from '@soleil-se/config-svelte/utils';

const appContext = getAppProps();
const { siteName } = getAppProps();
const siteName = getAppProps('siteName');

onSave

Runs the supplied callback when config is saved.
The callback should return the values to be saved as an Object.

import { onSave } from '@soleil-se/config-svelte/utils';

onSave(() => ({ foo: 'bar' }));

pluckPrefix

Plucks object properties with keys prefixed with ‘link’ and removes the prefix. { linkType, linkValue, linkNewWindow } will be converted to { type, value, newWindow }. If no object is passed the saved config data from CONFIG_VALUES will be used.

Sitevision needs a flat object structure to manage ID

when exporting and importing a site.

import { pluckPrefix } from '@soleil-se/config-svelte/utils';

const link1 = pluckPrefix('link'); // Will pluck from window.CONFIG_VALUES
const link2 = pluckPrefix('link', { linkType: 'internal', linkValue: '4.xxxx', linkNewWindow: false, willNotBePlucked: 'Wrong prefix' });

addPrefix

Prefixes keys in an object { type, value, newWindow } will be converted to { linkType, linkValue, linkNewWindow }.

Sitevision needs a flat object structure to manage ID

when exporting and importing a site.

import { addPrefix } from '@soleil-se/config-svelte/utils';

const link = { type: 'internal', value: '4.xxxx', newWindow: false }
const prefixed = addPrefix('link', link);

Server

Props

Since 1.8.0

If you need to pass data from a server context to the app you can use the utility function createAppProps. Data will be avalilable as props in the root component and with getAppProps.

import router from '@sitevision/api/common/router';
import { createAppProps } from '@soleil-se/config-svelte/server';

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

<!-- This file can be omitted if using @soleil-se/app-build -->
<div id="app_root"></div>

<script>
  export let foo;
  export let fizz;
</script>

<p>{foo}</p>
<p>{fizz}</p>

Before 1.8.0 Use createAppData function instead.

Context

Contains information about app context.

pageId - ID of current page.
portletId - ID of current portlet.
siteId - ID of site.
siteName - Name of site.
@sitevision/api/server/appInfo

Is needed for some components to function.

RepositoryNodeSelector

import router from '@sitevision/api/common/router';
import { createAppContext } from '@soleil-se/config-svelte/server';

router.get('/', (req, res) => {
  createAppContext(res);
});

<script>
  import { getAppContext } from '@soleil-se/config-svelte/utils';

  const { siteName } = getAppContext()
</script>

<h1>{siteName}</h1>

Global configuration

For global configuration to work you need an index.html file in the global folder with a div where the app can be mounted.

<!-- This file can be omitted if using @soleil-se/app-build -->
<div id="root"></div>

Validation

All components are compatible with @soleil-se/config-validate.