Skip to main content

Svelte

Openexus JavaScript/TypeScript support provides the ability to use the Svelte framework within a node. This provides the node with all the power of Svelte, JSX/TSX, and Reactive programming.

In Openexus this may be achieved in one of two ways:

Openexus Helper SDK​

The Svelte Helper SDK provides a means to tell Openexus that you are using Svelte, and a way to interact with Openexus items such as nodes and properties.

To use Svelte and the Openexus Javascript/TypeScript Svelte Helper SDK...

  1. Import Framework and the SDK;
  2. Setup the Helper SDK;
  3. Setup a Renderer.

Once the above steps are satisfied the node is ready to use Svelte and Openexus together. There may be additional things to do to work with Openexus items within Svelte, so make sure to read the Framework Specific Documentation below.

Import Framework and the Helper SDK​

src/main.jsx
import * as svelteStore from 'svelte/store';
import * as svelte from 'svelte';
import { setup } from 'openexus/svelte';

Setup the Helper SDK​

src/main.jsx
setup(context, svelte, svelteStore);

Setup a Renderer​

A renderer tells a node what base Svelte component to display for the node. Some nodes may not require a renderer, but most do. If you have a View property, or a property that has a datatype of html you will need to setup a renderer for it as shown here.

src/SomeComponent.svelte
<p>
  Hello world!
</p>
src/main.jsx
// Set the View property to the Component.
import SomeComponent from './SomeComponent.svelte';
context.set('view', context.render(SomeComponent));`,

Example​

Framework Specifics​

Using the Svelte framework with Openexus has some small differences over regular Svelte, especially where one needs to interact with Openexus. These differences are outlined below.

Property References​

In order to use a reference to a Openexus node property, the property must be obtained from Openexus. The SDK provides an easy to use way to do this with context.use(). context.use() takes the name of a specific node property (as defined in your properties.yaml file) and creates an object which allows setting the value and subscribing to changes on the value.

Definition:

context.use(<property-name>) => svelteSetter

Usage:

let count = undefined; // create our get value
const setCount = context.use('count'); // get out setter from Openexus
setCount.subscribe((value)=>count=value); // Setup a function to update our get value when the setter is invoked.

Because of the manner in which Svelte makes getters just local variables, we need to create a local variable for count let count = undefined; and then we need to update it any time its associated setter is updated: setCount.subscribe((value)=>count=value);.

The object returned by context.use() is called a svelteSetter. It has two functions:

  • svelteSetter.set(value): Sets the value of this item.
  • svelteSetter.subscribe(f): Executes the given function f whenever svelteObject.set() is called.

Manual Setup​

For more specific control, one may choose to interface with the Svelte library without using the Openexus Svelte Helper SDK.

Render View​

Without using the Openexus Svelte Helper SDK, one must manually pass in the element through new SvelteComponent() when setting up the ((view)) property.

src/main.ts
import SvelteComponent from './SvelteComponent.svelte';

context.set('view', (el) => new SvelteComponent({ target: el }));

Property References​

Without using the Openexus Svelte Helper SDK, one must manually create ref and setup subscription. This is an example helper function.

src/SvelteComponent.vue
<script>
  import { onMount } from 'svelte';
  import { writable } from 'svelte/store';

  const count = writable(context.get('count'));

  onMount(() => {
    context.subscribe('count', (v) => {
      count.set(v);
    });
  });

  count.subscribe((value) => {
    context.set('count', value)
  })

  function onClick() {
    countWritable.set(count + 1);
  }
</script>

<button 
  on:click={onClick} 
  class='bg-blue-500 hover:bg-blue-700 text-white py-2 px-4 rounded'
>{`Count is ${count}`}</button>