Skip to main content

Web (browser)

These classes and functions are available via the @transitive-sdk/utils-web npm package and are for use in the browser or other browser based front-ends.

Example

In this example we create a new web-component (custom element) from a React component using mqttSync to subscribe to some data and re-rendering it in real-time whenever it changes.

import React, { useEffect } from 'react';

import { createWebComponent, useTransitive, getLogger }
from '@transitive-sdk/utils-web';

const log = getLogger('my-new-capability');
log.setLevel('debug');

// Get the name of the package we are part of. TR_PKG_NAME is set by esbuild.
const [scope, capabilityName] = TR_PKG_NAME.split('/');

const Device = ({jwt, id, host, ssl}) => {

const { mqttSync, data, StatusComponent, prefixVersion } =
useTransitive({ jwt, id, host, ssl,
capability: TR_PKG_NAME,
versionNS: TR_PKG_VERSION_NS
});

// once mqttSync is connected, subscribe to some topics
useEffect(() => {
if (!mqttSync) return;
mqttSync.subscribe(`${prefixVersion}/device`);
mqttSync.subscribe(`${prefixVersion}/cloud`);
}, [mqttSync]);

log.debug({prefixVersion, data, TR_PKG_NAME, TR_PKG_VERSION, TR_PKG_VERSION_NS});

return <div>
<StatusComponent />
<pre>
{/* Render the data. This updates automatically whenever data changes. */}
{JSON.stringify(data, true, 2)}
</pre>
</div>;
};

createWebComponent(Device, `${capabilityName}-device`, ['jwt']);

ErrorBoundary

Extends React.Component

A simple error boundary. Usage:

<ErrorBoundary message="Something went wrong">
<SomeFlakyComponent />
</ErrorBoundary>

Parameters

  • props

Code

Reusable component for showing code

Parameters

createWebComponent

Create a WebComponent from the given react component and name that is reactive to the given attributes (if any). Used in web capabilities. Example:

createWebComponent(Diagnostics, 'health-monitoring-device', ['jwt', 'host', 'device'], TR_PKG_VERSION);

Parameters

  • Component
  • name
  • reactiveAttributes (optional, default [])
  • version (optional, default '0.0.0')
  • options (optional, default {})

fetchJson

get or post (if body given) json

Parameters

  • url
  • callback
  • options (optional, default {})

parseCookie

parse document cookies

Parameters

  • str

useMqttSync

hook for using MqttSync in React

Parameters

  • $0 Object

    • $0.jwt
    • $0.id
    • $0.mqttUrl

useTransitive

Hook for using Transitive in React. Connects to MQTT, establishes sync, and exposes reactive data state variable.

Parameters

  • $0 Object

    • $0.jwt
    • $0.id
    • $0.host
    • $0.ssl
    • $0.capability
    • $0.versionNS