<Selo/>

<Selo/> - is a root component or entry point. It creates an entry World from the provided component. Selo holds a connection to the Reflector server, initialize Virtual Time. Internally it returns a <Dynamic/> Solid JS component.
Selo in Krestianstvo SDK 4 application architecture is the FRP representation of the Croquet Island / VWF instance. All components inside <Selo/> register thier internal properties and actions in form of Signals/Stores in it. These components are Objects.

Initialized Selo is accessible to the components inside it through: props.selo

<Selo
    nodeID={"simple"}
    seloID={"1"}
    component={Simple}
    reflectorHost={"https://localhost:3001"}
/>

Properties

• seloID - unique connection key. That key is shared between users to connect to the World instance, used in URL ?k= parameter
• nodeID - unique id or name of the world component by default
• component - entry component
• reflectorHost - Reflector server address
• worlds - an {key:value} object, containing all preloaded Worlds (Lazy loading is not supported yet)
• fallbackWorld - default 404 component to use in portals

In one page or component there are can be several <Selo/> components coexisting together.
Use the same seloID and component for creating shared Worlds.
Use unique seloID for instantiating World in parallel to others.

Methods

There are helper methods from Krestianstvo lib to work with Selos.

import { createLocalStore, getSelos, getSeloByID } from "krestianstvo";

Example

Entry world component: Simple.jsx

import { createLocalStore } from "krestianstvo";

export default function Simple(props) {

    const [local, setLocal] = createLocalStore({
        data: {
            type: "App",
            nodeID: props.nodeID,
            properties: {
                name: props.name ? props.name : props.nodeID
            },
            dynamic: []
        }
    }, props);

    return (
        <div>Welcome to {local.data.properties.name} !
            <br />
            Initialised in Selo: {props.selo.id}
        </div>
    )
}

Root component: Index.jsx

import { render } from 'solid-js/web';
import { Selo } from "krestianstvo";
import Simple from './Simple.jsx'

render(() => (
    <Selo
        nodeID={"simple"}
        seloID={"1"}
        component={Simple}
        reflectorHost={"https://localhost:3001"}
    />

), document.getElementById('root'));

Prev | Next