Connectors

Each STLSe application is a group of modules that have a backend and/or a frontend part to it.

In order for all of these modules to communicate and collaborate with each other they need to connect to the central orchestrator.
This the job of the connectors.
Each module must call the connector as it is considered as a "constructor" for modules.

The connector call is mandatory for any STLSe module to work.

In fact a module can consist of just 1 line of code

There are two connector types, one for the frontend and one for the backend.
All you need is to call the constructor which is already provided on the global object, meaning you do not need to import it,
but if you prefer you can also import it from the library.

For Frontend

frontendConnector({})

And Backend

backendConnector({})

Both are valid fully working complete modules with only 1 line of code. But obviously they will have no effect.

Backend Connector:

The backend connector is used by the backend part of the modules and it is used as follows:

// optional import, it is also provided globally
import { backendConnector }  from '@stlse/backend-connector';

backendConnector({
  // ... options
});

The options that you can pass to the backendConnector() are:

backendConnector({
  /** 
   * Use this parameter to configure your external module or your local development instance
   */
  localServer: null | { secret: string, port?: number },
  /** 
   * Use this parameter to configure your external module or your local development instance 
   */
  remoteServer: null | { secret: string, address?: string, tunnel?: string },
  /**
   * Here you list statically all the filters/actions that you want to inject your code into
   * 
   * When specifying the hook function, you can either just write the function or add an object 
   * with the "fn" property containing the function and the "priority" property containing the 
   * priority for the hook to be executed
   * 
   * By default all hooks have priority 10, if you want to execute your hook earlier 
   * you need to decrease the priority to lower than 10.
   * If you want to execute your hook after other hooks you need to increase priority higher than 10
   */
  hooks?: {
    filters?: Array<{ 
      [A in keyof filters]?: Function | { fn: Function, priority?: number } 
    }>,
    actions?: Array<{ 
      [A in keyof actions]?: Function | { fn: Function, priority?: number }
    }>,
  },
});

Frontend Connector:

The frontend connector is used by the frontend part of the modules and it is used as follows:

// optional import, it is also provided globally
import { frontendConnector }  from '@stlse/frontend-connector';

frontendConnector({
  // ... options
});

The options that you can pass to the frontendConnector() are:

frontendConnector({
  /**
   * Here you list statically all the filters/actions/react that you want to inject your code into
   * 
   * When specifying the hook function, you can either just write the function or add an object 
   * with the "fn" property containing the function and the "priority" property containing the 
   * priority for the hook to be executed
   * 
   * By default all hooks have priority 10, if you want to execute your hook earlier 
   * you need to decrease the priority to lower than 10.
   * If you want to execute your hook after other hooks you need to increase priority higher than 10
   */
  hooks?: {
    filters?: Array<{ 
      [A in keyof filters]?: Function | { fn: Function, priority?: number }
    }>,
    actions?: Array<{ 
      [A in keyof actions]?: Function | { fn: Function, priority?: number }
    }>,
    react?: Array<{
      [A in keyof react_hooks]?: Function | { fn: Function, priority?: number }
    }>
  },
  
  /**
   * Socket connection to orchestrator to receive live updates from the backend modules
   * @default 'optional'
   */
  socket?: false | 'optional' | 'required',

  /**
   * When building a theme module or connecting from a third party domain you need to pass the authentication credentials here
   */
  authentication?: ConnectorPayload | ConnectorPayloadDynamic,

  /**
   * In case you will be using react hooks you need to expose your local react version so that STLSe can properly adapt your module
   */
  react?: { React: typeof React; ReactDOM: typeof ReactDOM; createPortal: typeof createPortal },

});