@soleil-se/config-svelte

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

GitHub

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.

• DropdownSelector
• ListSelector
• NodeSelector
• NumberSpinner
• TagSelector
• CustomSelector

Input

Regular inputs

• Checkbox
• CheckboxGroup
• InputField
• RadioGroup
• SelectField

Custom

Custom components

• LinkSelector
• TextList
• ImageSelector
• CustomList
• RepositoryNodeSelector

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

Standard

Using Sitevision default functions with name attributes as usual. The values object is available as a prop and CONFIG_VALUES global variable.

Svelte 5

config.js

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

import App from './App.svelte';

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

Svelte 4

config.js

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

import App from './App.svelte';

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

Deprecated (Svelte 4)

config.js

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

import App from './App.svelte';

createConfigApp(App);

App.svelte

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

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

Advanced

NOT RECOMENDED

Usually the standard configuration is enough for 99% of use cases and the advanced configuration will be deprecated in future versions.

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.

Svelte 5

config.js

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

import App from './App.svelte';

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

Svelte 4

config.js

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

import App from './App.svelte';

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

Deprecated (Svelte 4)

config.js

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

import App from './App.svelte';

createConfigApp(App);

App.svelte

<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>

Utils

i18n

Since 1.6.0

Simple i18n utility for translating the configuration.

i18n.js

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}!',
  },
});

App.svelte

<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.

Caution

Only one onSave call should be present in the app.

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.

index.js

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));
});

index.html

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

App.svelte

<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

index.js

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

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

App.svelte

<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.

index.html

<!-- 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.