Custom Web Components

Custom web components are HTML tags that you can directly embed into your HTML code. The advantage is that no further javascript framework is required, i.e. you can use the components of this library in a framework that does not use reactjs.

This package exports three custom web components:

Components

General Usage

The custom web components expose more or less the same API as their counter parts in react. The only difference is that you do not pass javascript objects in here but strings that are then interpreted accordingly.

The most common usecase to render a DASF backend works like this:

<dasf-module
  websocket-url="ws://<someserver>/ws"
  topic="sometopic"
></dasf-module>
<script
  type="module"
  src="/node_modules/@dasf/dasf-messaging/dist/wc/dasf.js"
></script>

Here the dasf-module custom web component is used with a websocket-url and a topic that are used to create the connection to the message broker. Furthermore we have to load this libary in a script tag.

Custom response, error and progress handlers

If we want to handle the response ourselve using the onResponse option, we to listen to the response event of the custom web component. The response data can then be accessed via the event.detail attribute:

<script>
  setTimeout(() => {
    const element = document.querySelector('dasf-module');
    element.addEventListener('response', (event) => {
      console.log('received response', event.detail);
    });
  });
</script>
<dasf-module
  websocket-url="ws://<someserver>/ws"
  topic="sometopic"
></dasf-module>
<script
  type="module"
  src="/node_modules/@dasf/dasf-messaging/dist/wc/dasf.js"
></script>

The same works for the errors via the error event, and progress reports via the progress event.

If we want to skip the default handling of response, error or progress reports, we can set the corresponding attribute out of skip-default-response-handler, skip-default-error-handler and skip-default-progress-handler or use the corresponding ...-check functions for this. See the

class:

ContainerBaseOptions for more information on these arguments..

Creating the connection via function

When we want to create the connection ourselve as we may want to use it in several places, we have to create a function that returns the connection we created

<script type="module">
  import {
    DASFConnection,
    WebsocketUrlBuilder,
  } from '/node_modules/@dasf/dasf-messaging';

  const connection = new DASFConnection(
    new WebsocketUrlBuilder('ws://localhost:8080/ws', 'mytesttopic'),
  );

  const getConnection = () => {
    return connection;
  };
  window['getConnection'] = getConnection;
</script>
<dasf-module connection="getConnection"></dasf-module>
<script
  type="module"
  src="/node_modules/@dasf/dasf-messaging/dist/wc/dasf.js"
></script>

For more information on the properties for the components, see the corresponding sections for the dasf-module properties, dasf-class properties and dasf-function properties.