Skip to main content

Solid

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

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

Openexus Helper SDK​

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

To use Solid and the Openexus Javascript/TypeScript Solid 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 Solid and Openexus together. There may be additional things to do to work with Openexus items within Solid, so make sure to read the Framework Specific Documentation below.

Import Framework and the Helper SDK​

src/main.jsx
import * as solidWeb from 'solid-js/web';
import * as solid from 'solid-js';
import { setup } from 'openexus/solid';

Setup the Helper SDK​

src/main.jsx
setup(context, solid, solidWeb);

Setup a Renderer​

A renderer tells a node what base Solid 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/main.jsx
// Create a render function
function SomeComponent() {
  return (
    <p>Hello world!</p>
  );
}

// Set the View property to the Component.
context.set('view', context.render(SomeComponent)); // alt

Example​

In order to do this Openexus requires the usage of the Openexus Javascript/TypeScript Solid SDK. The SDK provides a means to tell Openexus that you are using Solid, and a way to interact with Openexus items such as nodes and properties.

Framework Specifics​

Using the Solid framework with Openexus has some small differences over regular Solid, 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 a useable reactive signal from it.

Definition:

context.use(<property-name>) => [getter, setter]

Usage:

const [count, setCount] = context.use('count');

Manual Setup​

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

Render View​

Without using the Openexus Solid Helper SDK, one must manually createRoot and render on the element when setting up the ((view)) property.

src/main.ts
import { render } from "solid-js/web"
import SolidComponent from './SolidComponent.jsx';

context.set('view', (el) => render(SolidComponent, el));

Property References​

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

src/SolidComponent.tsx
import { useState, useRef, useEffect, createElement } from 'react';

function SolidComponent() {
  const [count, setCount] = createSignal(context.get('count'));

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

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

  return (
    <button
      onClick={() => setCount(count + 1)}
      class='bg-blue-500 hover:bg-blue-700 text-white py-2 px-4 rounded'
    >
      {`Count is ${count()}`}
    </button>
  );
}