@transitive-sdk/utils-web 0.7.6 → 0.8.0

package/README.md

@@ -8,4 +8,4 @@
 
 Utilities used by the web components of [Transitive Robotics](https://transitiverobotics.com) capabilities.
 
-[API Documentation](./docs/index.md)
+[Documentation](https://transitiverobotics.com/docs/sdk/utils-web)

package/{client.js → client/client.js}

@@ -1,12 +1,11 @@
-
 // It is OK to use paths outside of this package because webpack will bundle them
-export * from '../common/common.js';
-import MS from '../common/MqttSync.js';
-export * from '../common/DataCache';
-
+export * from '../../common/common.js';
+export * from '../../common/DataCache';
+import MS from '../../common/MqttSync.js';
 export const MqttSync = MS;
 
-export const decodeJWT = (jwt) => JSON.parse(atob(jwt.split('.')[1]));
+// moved to common
+// export const decodeJWT = (jwt) => JSON.parse(atob(jwt.split('.')[1]));
 
 /** parse document cookies */
 export const parseCookie = str =>

package/client/docs_header.md

@@ -0,0 +1,49 @@
+# 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.
+
+```js
+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']);
+```
+

package/{hooks.jsx → client/hooks.jsx}

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useMemo } from 'react';
 import _ from 'lodash';
 import mqtt from 'mqtt-browser';
 import { decodeJWT, getLogger, clone, pathToTopic } from './client';
-const MqttSync = require('../common/MqttSync');
+const MqttSync = require('../../common/MqttSync');
 
 const log = getLogger('utils-web/hooks');
 log.setLevel('info');

package/{react-web-component → client/react-web-component}/extractAttributes.js

@@ -1,4 +1,4 @@
-/**
+/*
  * Takes in a node attributes map and returns an object with camelCased
  * properties and values
  * @param nodeMap

package/{react-web-component → client/react-web-component}/getStyleElementsFromReactWebComponentStyleLoader.js

@@ -1,4 +1,4 @@
-/**
+/*
  * An optional library which is conditionally added
  * @returns {[]}
  */

package/{react-web-component → client/react-web-component}/index.js

@@ -16,7 +16,7 @@ const lifeCycleHooks = {
 };
 
 module.exports = {
-  /**
+  /*
    * @param {JSX.Element} wrapper: the wrapper component class to be instantiated and wrapped
    * @param {string} tagName - The name of the web component. Has to be minus "-" delimited.
    * @param {boolean} useShadowDom - If the value is set to "true" the web component will use the `shadowDom`. The default value is true.
@@ -90,13 +90,13 @@ module.exports = {
         this.callLifeCycleHook('adoptedCallback', [oldDocument, newDocument]);
       }
 
-      /** call a function defined in the component, either as a class method, or
+      /* call a function defined in the component, either as a class method, or
       * via useImperativeHandle */
       call(functionName, args) {
         return compRef?.current?.[functionName]?.call(compRef?.current, args);
       }
 
-      /** predefined function to retrieve the pre-defined config object of the
+      /* predefined function to retrieve the pre-defined config object of the
        * state, populated via the pre-defined `setConfig` method given as prop
        * to the wrapped component. */
       getConfig() {

package/{shared.jsx → client/shared.jsx}

@@ -30,10 +30,10 @@ const levelBadges = [
   <Badge bg="secondary" style={styles.badge}>Stale</Badge>,
 ];
 
-/** The right badge for the level */
+/* The right badge for the level */
 export const LevelBadge = ({level}) => levelBadges[level] || <span>{level}</span>;
 
-/** reusable component for showing code */
+/** Reusable component for showing code */
 export const Code = ({children}) => <pre style={styles.code}>
   {children}
 </pre>;
@@ -103,9 +103,11 @@ export const Timer = ({duration, onTimeout, onStart, setOnDisconnect, children})
 };
 
 /** A simple error boundary. Usage:
+```jsx
  <ErrorBoundary message="Something went wrong">
    <SomeFlakyComponent />
  </ErrorBoundary>
+```
 */
 export class ErrorBoundary extends React.Component {
   constructor(props) {
@@ -128,7 +130,7 @@ export class ErrorBoundary extends React.Component {
   }
 };
 
-/** whether or not the given react component allows refs, i.e., is either
+/* whether or not the given react component allows refs, i.e., is either
  * a functional component wrapped with forwardRef or a class component */
 const componentPermitsRefs = (Component) =>
   (Component.$$typeof == Symbol.for('react.forward_ref'))
@@ -136,7 +138,12 @@ const componentPermitsRefs = (Component) =>
 
 
 /** Create a WebComponent from the given react component and name that is
-    reactive to the given attributes (if any). */
+    reactive to the given attributes (if any). Used in web capabilities.
+Example:
+```js
+    createWebComponent(Diagnostics, 'health-monitoring-device', ['jwt', 'host', 'device'], TR_PKG_VERSION);
+```
+*/
 export const createWebComponent = (Component, name,
     reactiveAttributes = [],
     version = '0.0.0',
@@ -155,7 +162,7 @@ export const createWebComponent = (Component, name,
       // state = this.props;
       state = {};
 
-      /** function used by `Component` to register a onDisconnect handler */
+      /* function used by `Component` to register a onDisconnect handler */
       setOnDisconnect(fn) {
         this.onDisconnect = fn;
       }
@@ -171,7 +178,7 @@ export const createWebComponent = (Component, name,
         }
       }
 
-      /** Note this relies on the changes made in
+      /* Note this relies on the changes made in
       github:amay0048/react-web-component#780950800e2962f45f0f029be618bb8b84610c89
       that we used in our copy.
       TODO: move this into our copy, i.e., do it internally to react-web-component
@@ -183,7 +190,7 @@ export const createWebComponent = (Component, name,
         this.setState(newState);
       }
 
-      /** method exposed to the wrapped component via prop that allows setting
+      /* method exposed to the wrapped component via prop that allows setting
       * the "config" state variable inside the wrapper (not the component
       * itself). This config is retrieved by the portal for inclusion in the
       * embedding instructions. */

package/dist/utils-web.js

@@ -1 +1 @@
-(()=>{var e={720:(e,t,n)=>{function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function a(e,t,n){!function(e,t){if(t.has(e))throw new TypeError("Cannot initialize the same private elements twice on an object")}(e,t),t.set(e,n)}function c(e,t){return function(e,t){return t.get?t.get.call(e):t.value}(e,s(e,t,"get"))}function u(e,t,n){return function(e,t,n){if(t.set)t.set.call(e,n);else{if(!t.writable)throw new TypeError("attempted to set read only private field");t.value=n}}(e,s(e,t,"set"),n),n}function s(e,t,n){if(!t.has(e))throw new TypeError("attempted to "+n+" private field on non-instance");return t.get(e)}var l={get:n(712),set:n(298),unset:n(305),forEach:n(848),map:n(707),isEmpty:n(699),eq:n(113),isPlainObject:n(452),merge:n(831)},f=n(362),p=f.topicToPath,h=f.pathToTopic,d=f.toFlatObject,b=f.topicMatch,y=f.forMatchIterator,v=function e(t,n){if(n&&0!=n.length){l.unset(t,n);var r=n.slice(0,-1),o=0==r.length?t:l.get(t,r);return l.isEmpty(o)?e(t,r):n}},g=function e(t,n){if(0!=n.length){var r=n[0];if(r)for(var o in t)o==r||"*"==r||r.startsWith("+")?e(t[o],n.slice(1)):delete t[o]}},m=new WeakMap,w=new WeakMap,O=new WeakMap,S=function(){function e(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};o(this,e),a(this,m,{writable:!0,value:{}}),a(this,w,{writable:!0,value:[]}),a(this,O,{writable:!0,value:[]}),u(this,m,t)}var t,n;return t=e,n=[{key:"updateFromArray",value:function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},o=l.get(c(this,m),e);if(null==t){if(null==o)return{};v(c(this,m),e)}else{if(l.eq(o,t))return{};l.set(c(this,m),e,t)}var i,a=h(e),u=r({},a,t);if(t instanceof Object){var s=d(t);i={},l.forEach(s,(function(e,t){i["".concat(a).concat(t)]=e}))}else i=u;return c(this,w).forEach((function(e){return e(u,n)})),c(this,O).forEach((function(e){return e(i,n)})),i}},{key:"update",value:function(e,t,n){if("string"==typeof e)return this.updateFromTopic(e,t,n);if(e instanceof Array)return this.updateFromArray(e,t,n);throw new Error("unrecognized path expression")}},{key:"updateFromTopic",value:function(e,t,n){return this.updateFromArray(p(e),t,n)}},{key:"updateFromModifier",value:function(e,t){var n=this;return l.map(e,(function(e,r){return n.updateFromTopic(r,e,t)}))}},{key:"subscribe",value:function(e){e instanceof Function?c(this,w).push(e):console.warn("DataCache.subscribe expects a function as argument. Did you mean to use subscribePath?")}},{key:"subscribePath",value:function(e,t){c(this,w).push((function(n,r){l.forEach(n,(function(n,o){var i=b(e,o);i&&t(n,o,i,r)}))}))}},{key:"subscribePathFlat",value:function(e,t){c(this,O).push((function(n,r){l.forEach(n,(function(n,o){var i=b(e,o);i&&t(n,o,i,r)}))}))}},{key:"unsubscribe",value:function(e){u(this,w,c(this,w).filter((function(t){return t!=e})))}},{key:"get",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[];return 0==e.length?c(this,m):l.get(c(this,m),e)}},{key:"getByTopic",value:function(e){return this.get(p(e))}},{key:"filter",value:function(e){var t=JSON.parse(JSON.stringify(this.get()));return g(t,e),t}},{key:"filterByTopic",value:function(e){return this.filter(p(e))}},{key:"forMatch",value:function(e,t){var n=p(e);this.forPathMatch(n,t)}},{key:"forPathMatch",value:function(e,t){y(this.get(),e,t)}}],n&&i(t.prototype,n),Object.defineProperty(t,"prototype",{writable:!1}),e}();e.exports={DataCache:S,updateObject:function(e,t){return l.forEach(t,(function(t,n){var r=p(n);null==t?v(e,r):l.set(e,r,t)})),e}}},890:(e,t,n)=>{"use strict";function r(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function o(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function i(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(e){return a="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},a(e)}var c=n(362),u=c.mqttParsePayload,s=c.topicMatch,l=c.topicToPath,f=c.pathToTopic,p=c.toFlatObject,h=c.getLogger,d=c.mergeVersions,b=c.parseMQTTTopic,y=c.isSubTopicOf,v=c.versionCompare,g=c.encodeTopicElement,m=n(720).DataCache,w=n(517),O=h("MqttSync"),S="$SYS/broker/uptime",E=function(){},k=function(e){return e.endsWith("/#")?e:e.endsWith("/")?e.concat("#"):e.concat("/#")},j=function(e){return e.replace(/\/\//g,"/")},C=function(){function e(t){var n=this,r=t.mqttClient,o=t.onChange,a=t.ignoreRetain,c=t.migrate,s=t.onReady,p=t.sliceTopic;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),i(this,"data",new m),i(this,"subscribedPaths",{}),i(this,"publishedPaths",{}),i(this,"publishedMessages",{}),i(this,"publishQueue",new Map),i(this,"heartbeatWaitersOnce",[]),i(this,"heartbeats",0),i(this,"beforeDisconnectHooks",[]),this.mqtt=r,this.mqtt.on("message",(function(e,t,r){var i=t&&t.toString();if(O.debug("got message",e,i.slice(0,180),i.length>180?"... (".concat(i.length," bytes)"):"",r.retain),e==S)n.heartbeats>0&&(n.heartbeatWaitersOnce.forEach((function(e){return e()})),n.heartbeatWaitersOnce=[]),1==n.heartbeats&&!c&&s&&s(),n.heartbeats++;else if(r.retain||a){O.debug("processing message",e),p&&(e=f(l(e).slice(p)));var h=u(t);if(n.isPublished(e))n.publishedMessages[e]=h,n.data.update(e,h,{external:!0});else if(n.isSubscribed(e)){O.debug("applying received update",e);var d=n.data.update(e,h);o&&Object.keys(d).length>0&&o(d)}}})),this.mqtt.subscribe(S,{rap:!0},O.debug),(null==c?void 0:c.length)>0&&this.migrate(c,(function(){O.debug("done migrating",s),s&&n.waitForHeartbeatOnce(s)}))}var t,n;return t=e,n=[{key:"publishAtLevel",value:function(e,t,n){var r=this;O.debug("publishingAtLevel ".concat(n),e,t),n>0?w.forEach(t,(function(t,o){var i="".concat(e,"/").concat(g(o));O.debug("publishing ".concat(i)),r.publishAtLevel(i,t,n-1)})):this.mqtt.publish(e,JSON.stringify(t),{retain:!0},(function(e){e&&O.warn("Error when publishing migration result",e)}))}},{key:"migrate",value:function(e){var t=this,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:void 0,r=e.length;if(0!=r){var o=function(){return 0==--r&&n&&n()};e.forEach((function(e){var n=e.topic,r=e.newVersion,i=e.transform,a=void 0===i?void 0:i,c=e.flat,u=void 0!==c&&c,s=e.level,h=void 0===s?0:s;O.debug("migrating",n,r);var y=b(n),g=y.organization,m=y.device,S=y.capability,E=y.sub,k="/".concat(g,"/").concat(m,"/").concat(S),C=0==E.length?"/#":f(E),T="".concat(k,"/+").concat(C);t.subscribe(T,(function(e){if(e)return O.warn("Error during migration",e),void o();t.waitForHeartbeatOnce((function(){O.debug("got heartbeat",n,T);var e=t.data.getByTopic(k);if(!e)return t.unsubscribe(T),void o();var i=d(e,C,{maxVersion:r}),c=w.get(i,l(C)),s=a?a(c):c,b=j("".concat(k,"/").concat(r,"/").concat(C));if(O.debug("publishing merged",b),u){var y=p(s),g=l(b);w.forEach(y,(function(e,n){var r=f(g.concat(l(n)));t.mqtt.publish(r,JSON.stringify(e),{retain:!0},(function(e){e&&O.warn("Error when publishing migration result for ".concat(n),e)}))}))}else t.publishAtLevel(b,s,h);t.unsubscribe(T),t.waitForHeartbeatOnce((function(){var n=Object.keys(e).filter((function(e){return v(e,r)<0})).map((function(e){return j("".concat(k,"/").concat(e,"/").concat(C))}));O.debug({prefixesToClear:n}),t.clear(n),o()}))}))}))}))}else n&&n()}},{key:"clear",value:function(e){var t=this,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:void 0,r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},o=[],i=function(t){e.forEach((function(e){return s("".concat(e,"/#"),t)&&(!r.filter||r.filter(t))&&o.push(t)}))};this.mqtt.on("message",i),e.forEach((function(e){"string"==typeof e?t.mqtt.subscribe("".concat(e,"/#")):O.warn("Ignoring",e,"since it is not a string.")}));var a="undefined"!=typeof Buffer?Buffer.alloc(0):null;this.waitForHeartbeatOnce((function(){t.mqtt.removeListener("message",i),e.forEach((function(e){return t.mqtt.unsubscribe("".concat(e,"/#"))}));var r=o.length;O.debug("clearing ".concat(r," retained messages from ").concat(e)),o.forEach((function(e){t.mqtt.publish(e,a,{retain:!0})})),n&&n(r)}))}},{key:"waitForHeartbeatOnce",value:function(e){var t=this;setTimeout((function(){return t.heartbeatWaitersOnce.push(e)}),1)}},{key:"isSubscribed",value:function(e){return Object.keys(this.subscribedPaths).some((function(t){return s(t,e)}))}},{key:"isPublished",value:function(e){var t=this;return Object.keys(this.publishedPaths).some((function(n){return s(n,e)&&!t.publishedPaths[n].atomic}))}},{key:"subscribe",value:function(e){var t=this,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:E;if(e=k(e),this.subscribedPaths[e])return O.debug("already subscribed to",e),void n();this.mqtt.subscribe(e,{rap:!0},(function(r,o){O.debug("subscribe",e,"granted:",o),o&&o.some((function(t){return t.topic==e&&t.qos<128}))?(t.subscribedPaths[e]=1,n(null)):n("not permitted to subscribe to topic ".concat(e,", ").concat(JSON.stringify(o)))}))}},{key:"unsubscribe",value:function(e){this.subscribedPaths[e]&&(this.mqtt.unsubscribe(e),delete this.subscribedPaths[e])}},{key:"_actuallyPublish",value:function(e,t){return this.mqtt.connected?(O.debug("actually publishing",e),this.mqtt.publish(e,null==t?null:JSON.stringify(t),{retain:!0}),!0):(O.warn("not connected, not publishing",e),!1)}},{key:"_processQueue_rec",value:function(e){var t=this;if(this.publishQueue.size>0){var n=function(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,i=[],a=!0,c=!1;try{for(n=n.call(e);!(a=(r=n.next()).done)&&(i.push(r.value),!t||i.length!==t);a=!0);}catch(e){c=!0,o=e}finally{try{a||null==n.return||n.return()}finally{if(c)throw o}}return i}}(e,t)||function(e,t){if(e){if("string"==typeof e)return r(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?r(e,t):void 0}}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}(this.publishQueue.entries().next().value,2),o=n[0],i=n[1];this._actuallyPublish(o,i)?(this.publishQueue.delete(o),this._processQueue_rec(e)):setTimeout((function(){return t._processQueue_rec(e)}),5e3)}else e()}},{key:"_processQueue",value:function(){var e=this;this._processing||(this._processing=!0,this._processQueue_rec((function(){return e._processing=!1})))}},{key:"setThrottle",value:function(e){this._processQueueThrottled=w.throttle(this._processQueue.bind(this),e)}},{key:"clearThrottle",value:function(){delete this._processQueueThrottled}},{key:"addToQueue",value:function(e,t){this.publishQueue.set(e,t)}},{key:"_enqueue",value:function(e,t){var n;O.debug("enqueuing",e),this.addToQueue(e,t),this._processQueueThrottled?this._processQueueThrottled():this._processQueue(),null==t?delete this.publishedMessages[e]:this.publishedMessages[e]="object"==a(n=t)?JSON.parse(JSON.stringify(n)):n}},{key:"publish",value:function(e){var t=this,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{atomic:!1};return e=k(e),!w.isEqual(this.publishedPaths[e],n)&&(this.publishedPaths[e]=n,n.atomic?(this.data.subscribePath(e,(function(n,r,o,i){if(null==i||!i.external){O.debug("processing change (atomic)",r,e);var a=e.slice(0,e.length-2),c=f(l(r).slice(0,l(a).length));t._enqueue(c,t.data.getByTopic(c))}})),!0):(this.mqtt.subscribe(e),void this.data.subscribePath(e,(function(e,n,r,o){if(null==o||!o.external)return O.debug("processing change",n),w.each(t.publishedMessages,(function(e,r){if(O.trace("oldKey",r),r==n)return!0;if(y(r,n)&&t._enqueue(r,null),y(n,r)){t._enqueue(r,null);var o=p(e);w.each(o,(function(e,n){var o="".concat(r).concat(n);t._enqueue(o,e)}))}})),t._enqueue(n,e),!0}))))}},{key:"beforeDisconnect",value:function(){var e=this;this.beforeDisconnectHooks.forEach((function(t){return t(e)}))}},{key:"onBeforeDisconnect",value:function(e){this.beforeDisconnectHooks.push(e)}}],n&&o(t.prototype,n),Object.defineProperty(t,"prototype",{writable:!1}),e}();e.exports=C},362:(e,t,n)=>{function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var o=n(13),i=n(84),a={get:n(712),set:n(298),unset:n(305),forEach:n(848),map:n(707),isEmpty:n(699),eq:n(113),isPlainObject:n(452),merge:n(831)},c=n(316),u=n(22),s=n(499);c.setAll=function(e){return Object.values(c.getLoggers()).forEach((function(t){return t.setLevel(e)}))};var l={warn:u.yellow,error:u.red,info:u.green,debug:u.gray},f=c.methodFactory;c.methodFactory=function(e,t,n){var r=f(e,t,n);if("undefined"!=typeof window){var o="".concat(n," ").concat(e);return function(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];return r.apply(void 0,["[".concat(o,"]")].concat(t))}}var i,a="".concat(n," ").concat(l[i=e]?l[i](i):i);return function(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];return r.apply(void 0,["[".concat(u.blue((new Date).toISOString())," ").concat(a,"]")].concat(t))}};var p=c.getLogger,h=function(e){return e.replace(/%/g,"%25").replace(/\//g,"%2F")},d=function(e){return e.replace(/%25/g,"%").replace(/%2F/g,"/")},b=function(e){return"/".concat(e.map((function(e){return e.startsWith("+")?"+":e})).map(h).join("/"))},y=function(e){var t=e.split("/").map(d);return t.length>0&&0==t[0].length&&t.shift(),t.length>0&&0==t.at(-1).length&&t.pop(),t},v=function(e,t){return function e(t,n){if(0==t.length)return!0;if("#"==t[0][0])return!0;if(0==n.length)return!0;if(t[0]==n[0])return e(t.slice(1),n.slice(1));if("+"==t[0][0]){var o=e(t.slice(1),n.slice(1));return o&&Object.assign(r({},t[0].slice(1),n[0]),o)}return!1}(y(e),y(t))},g=function e(t,n){return 0==t.length||t[0]==n[0]&&e(t.slice(1),n.slice(1))},m=function(e,t){return o(i(e),i(t))},w=["B","KB","MB","GB","TB"];e.exports={parseMQTTUsername:function(e){var t=e.split(":");return{organization:t[0],client:t[1],sub:t.slice(2)}},parseMQTTTopic:function(e){var t=y(e);return{organization:t[0],device:t[1],capabilityScope:t[2],capabilityName:t[3],capability:"".concat(t[2],"/").concat(t[3]),version:t[4],sub:t.slice(5)}},pathToTopic:b,topicToPath:y,toFlatObject:function e(t){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};return a.forEach(t,(function(t,o){var i=n.concat(String(o));(a.isPlainObject(t)||t instanceof Array)&&null!==t?e(t,i,r):r[b(i)]=t})),r},topicMatch:v,mqttParsePayload:function(e){return 0==e.length?null:JSON.parse(e.toString("utf-8"))},getRandomId:function(){return Math.random().toString(36).slice(2)},versionCompare:m,loglevel:c,getLogger:p,mergeVersions:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:void 0,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};if(!e)return t?a.set({},t,e):e;var r=Object.keys(e).filter((function(e){return(!n.maxVersion||m(e,n.maxVersion)<=0)&&(!n.minVersion||m(n.minVersion,e)<=0)})).sort(m),o={},i=t&&y(t);return r.forEach((function(t){var n=i?a.get(e[t],i):e[t];a.merge(o,n)})),i?a.set({},i,o):o},mqttClearRetained:function(e,t,n){var r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:1e3,o=[],i=function(e){t.forEach((function(t){return v("".concat(t,"/#"),e)&&o.push(e)}))};e.on("message",i),t.forEach((function(t){"string"==typeof t?e.subscribe("".concat(t,"/#")):console.warn("Ignoring",t,"since it is not a string.")}));var a="undefined"!=typeof Buffer?Buffer.alloc(0):null;setTimeout((function(){e.removeListener("message",i),t.forEach((function(t){return e.unsubscribe("".concat(t,"/#"))}));var r=o.length;console.log("clearing ".concat(r," retained messages from ").concat(t)),o.forEach((function(t){e.publish(t,a,{retain:!0})})),n&&n(r)}),r)},isSubTopicOf:function(e,t){var n=y(t),r=y(e);return g(n,r)&&n.length<r.length},clone:function(e){return JSON.parse(JSON.stringify(e))},setFromPath:function e(t,n,r){if(0==n.length)return t;var o=n.shift();0==n.length?t[o]=r:(t[o]||(t[o]={}),e(t[o],n,r))},forMatchIterator:function e(t,n,o){var i=arguments.length>3&&void 0!==arguments[3]?arguments[3]:[],a=arguments.length>4&&void 0!==arguments[4]?arguments[4]:{};if(0!=n.length&&"#"!=n[0]){var c=n[0];if(c)for(var u in t)if(u==c||"*"==c||c.startsWith("+")){var s=c.startsWith("+")&&c.length>1?Object.assign({},a,r({},c.slice(1),u)):a;e(t[u],n.slice(1),o,i.concat([u]),s)}}else o(t,i,a)},encodeTopicElement:h,decodeTopicElement:d,constants:s,visit:function e(t,n,r){var o;t&&(r(t),null===(o=t[n])||void 0===o||o.forEach((function(t){return e(t,n,r)})))},wait:function(e){return new Promise((function(t){setTimeout(t,e)}))},formatBytes:function(e){if(!e)return"--";for(var t=0;e>1024;)e/=1024,t++;return"".concat(e.toFixed(2)," ").concat(w[t])},formatDuration:function(e){if(!e)return"--";var t={};e>3600&&(t.h=Math.floor(e/3600),e%=3600),e>60&&(t.m=Math.floor(e/60),e%=60),t.s=Math.floor(e);var n="";return t.h>0&&(n+="".concat(t.h,"h ")),t.m>0&&(n+="".concat(t.m,"m ")),!t.h&&(n+="".concat(t.s,"s")),n.trim()},tryJSONParse:function(e){try{return JSON.parse(e)}catch(e){return null}}}},499:e=>{e.exports={rosReleases:{kinetic:{rosVersion:1,ubuntuCodename:"xenial"},melodic:{rosVersion:1,ubuntuCodename:"bionic"},noetic:{rosVersion:1,ubuntuCodename:"focal"},dashing:{rosVersion:2},eloquent:{rosVersion:2},foxy:{rosVersion:2},galactic:{rosVersion:2},humble:{rosVersion:2},iron:{rosVersion:2},rolling:{rosVersion:2}}}},368:(e,t,n)=>{"use strict";n.r(t),n.d(t,{MqttSync:()=>u,decodeJWT:()=>s,fetchJson:()=>f,parseCookie:()=>l});var r=n(362),o={};for(const e in r)["default","MqttSync","decodeJWT","parseCookie","fetchJson"].indexOf(e)<0&&(o[e]=()=>r[e]);n.d(t,o);var i=n(890),a=n.n(i),c=n(720);o={};for(const e in c)["default","MqttSync","decodeJWT","parseCookie","fetchJson"].indexOf(e)<0&&(o[e]=()=>c[e]);n.d(t,o);var u=a(),s=function(e){return JSON.parse(atob(e.split(".")[1]))},l=function(e){return e.split(";").map((function(e){return e.split("=")})).reduce((function(e,t){return e[decodeURIComponent(t[0].trim())]=t[1]&&decodeURIComponent(t[1].trim()),e}),{})},f=function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};fetch(e,{method:n.method||(n.body?"post":"get"),mode:"cors",cache:"no-cache",headers:{"Content-Type":"application/json"},redirect:"follow",referrerPolicy:"no-referrer",body:n.body?JSON.stringify(n.body):void 0}).then((function(n){var r=!n.ok&&"fetching ".concat(e," failed: ").concat(n.status," ").concat(n.statusText);n.json().then((function(e){return t(r,e)})).catch((function(e){throw new Error(e)}))})).catch((function(e){return t("error: ".concat(e))}))}},442:(e,t,n)=>{"use strict";n.d(t,{H:()=>v,D:()=>g});var r=n(689),o=n.n(r),i=n(517),a=n.n(i);const c=require("mqtt-browser");var u=n.n(c),s=n(368);function l(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function f(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?l(Object(n),!0).forEach((function(t){p(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):l(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function p(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function h(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,i=[],a=!0,c=!1;try{for(n=n.call(e);!(a=(r=n.next()).done)&&(i.push(r.value),!t||i.length!==t);a=!0);}catch(e){c=!0,o=e}finally{try{a||null==n.return||n.return()}finally{if(c)throw o}}return i}}(e,t)||function(e,t){if(e){if("string"==typeof e)return d(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?d(e,t):void 0}}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function d(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var b=n(890),y=(0,s.getLogger)("utils-web/hooks");y.setLevel("info");var v=function(e){var t=e.jwt,n=e.id,i=e.mqttUrl,c=h((0,r.useState)("connecting"),2),l=c[0],f=c[1],p=h((0,r.useState)(),2),d=p[0],v=p[1],g=h((0,r.useState)({}),2),m=g[0],w=g[1];return(0,r.useEffect)((function(){var e=(0,s.decodeJWT)(t),r=u().connect(i,{username:JSON.stringify({id:n,payload:e}),password:t});return r.on("connect",(function(){y.debug("connected");var e=new b({mqttClient:r,ignoreRetain:!0});v(e),f("connected"),e.data.subscribe(a().debounce((function(){return w((0,s.clone)(e.data.get()))}),100))})),r.on("error",(function(e){y.error(e),f("error: ".concat(e))})),function(){y.info("cleaning up useMQTTSync"),d&&d.beforeDisconnect?(d.beforeDisconnect(),d.waitForHeartbeatOnce((function(){return r.end()}))):r.end()}}),[t,n]),{status:l,ready:"connected"==l,StatusComponent:function(){return o().createElement("div",null,l)},mqttSync:d,data:m}},g=function(e){var t=e.jwt,n=e.id,r=e.host,o=e.ssl,i=e.capability,a=e.versionNS,c=h(i.split("/"),2),u=c[0],l=c[1],p=(0,s.decodeJWT)(t).device,d=[n,p,u,l],b=(0,s.pathToTopic)(d),y=[].concat(d,[a]),g=(0,s.pathToTopic)(y),m="".concat(o&&JSON.parse(o)?"wss":"ws","://mqtt.").concat(r);return f(f({},v({jwt:t,id:n,mqttUrl:m})),{},{device:p,prefixPath:d,prefix:b,prefixPathVersion:y,prefixVersion:g})}},335:e=>{function t(e,t){if(e){if("string"==typeof e)return n(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?n(e,t):void 0}}function n(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}e.exports=function(e){if(!e.attributes)return{};var r,o,i,a={},c=(i=e.attributes,function(e){if(Array.isArray(e))return n(e)}(i)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(i)||t(i)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()).map((function(e){return function(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}({},e.name,e.value)})),u=function(e,n){var r="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(!r){if(Array.isArray(e)||(r=t(e))){r&&(e=r);var o=0,i=function(){};return{s:i,n:function(){return o>=e.length?{done:!0}:{done:!1,value:e[o++]}},e:function(e){throw e},f:i}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var a,c=!0,u=!1;return{s:function(){r=r.call(e)},n:function(){var e=r.next();return c=e.done,e},e:function(e){u=!0,a=e},f:function(){try{c||null==r.return||r.return()}finally{if(u)throw a}}}}(c);try{for(u.s();!(o=u.n()).done;){r=o.value;var s=Object.keys(r)[0];a[s.replace(/-([a-z])/g,(function(e){return e[1].toUpperCase()}))]=r[s]}}catch(e){u.e(e)}finally{u.f()}return a}},899:(e,t,n)=>{e.exports=function(){try{return n(962).styleElements}catch(e){return[]}}},271:(e,t,n)=>{function r(e){return r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},r(e)}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function a(e,t,n){return t&&i(e.prototype,t),n&&i(e,n),Object.defineProperty(e,"prototype",{writable:!1}),e}function c(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&d(e,t)}function u(e){var t=h();return function(){var n,r=b(e);if(t){var o=b(this).constructor;n=Reflect.construct(r,arguments,o)}else n=r.apply(this,arguments);return s(this,n)}}function s(e,t){if(t&&("object"===r(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return l(e)}function l(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function f(e){var t="function"==typeof Map?new Map:void 0;return f=function(e){if(null===e||(n=e,-1===Function.toString.call(n).indexOf("[native code]")))return e;var n;if("function"!=typeof e)throw new TypeError("Super expression must either be null or a function");if(void 0!==t){if(t.has(e))return t.get(e);t.set(e,r)}function r(){return p(e,arguments,b(this).constructor)}return r.prototype=Object.create(e.prototype,{constructor:{value:r,enumerable:!1,writable:!0,configurable:!0}}),d(r,e)},f(e)}function p(e,t,n){return p=h()?Reflect.construct:function(e,t,n){var r=[null];r.push.apply(r,t);var o=new(Function.bind.apply(e,r));return n&&d(o,n.prototype),o},p.apply(null,arguments)}function h(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}function d(e,t){return d=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e},d(e,t)}function b(e){return b=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)},b(e)}function y(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var v=n(689),g=n(405),m=n(430),w=n(899),O=n(335);n(622),n(268);var S={attachedCallback:"webComponentAttached",connectedCallback:"webComponentConnected",disconnectedCallback:"webComponentDisconnected",attributeChangedCallback:"webComponentAttributeChanged",adoptedCallback:"webComponentAdopted"};e.exports={create:function(e,t){var n=!(arguments.length>2&&void 0!==arguments[2])||arguments[2],r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:[],i=arguments.length>4&&void 0!==arguments[4]?arguments[4]:void 0,s=function(t){c(f,t);var s=u(f);function f(){var e;o(this,f);for(var t=arguments.length,n=new Array(t),r=0;r<t;r++)n[r]=arguments[r];return y(l(e=s.call.apply(s,[this].concat(n))),"instance",null),e}return a(f,[{key:"callConstructorHook",value:function(){this.instance.webComponentConstructed&&this.instance.webComponentConstructed.apply(this.instance,[this])}},{key:"callLifeCycleHook",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],n=S[e];n&&this.instance&&this.instance[n]&&this.instance[n].apply(this.instance,t)}},{key:"connectedCallback",value:function(){var t=this,r=t;if(n){var o=t.attachShadow({mode:"open"});r=document.createElement("div"),w().forEach((function(e){o.appendChild(e.cloneNode(o))})),o.appendChild(r),m(o)}g.render(v.createElement(e,O(t)),r,(function(){t.instance=this,t.callConstructorHook(),t.callLifeCycleHook("connectedCallback")}))}},{key:"disconnectedCallback",value:function(){this.callLifeCycleHook("disconnectedCallback")}},{key:"attributeChangedCallback",value:function(e,t,n,r){this.callLifeCycleHook("attributeChangedCallback",[e,t,n,r])}},{key:"adoptedCallback",value:function(e,t){this.callLifeCycleHook("adoptedCallback",[e,t])}},{key:"call",value:function(e,t){var n,r;return null==i||null===(n=i.current)||void 0===n||null===(r=n[e])||void 0===r?void 0:r.call(null==i?void 0:i.current,t)}},{key:"getConfig",value:function(){return this.instance.state.config}}],[{key:"observedAttributes",get:function(){return r}}]),f}(f(HTMLElement));customElements.define(t,s)}}},11:(e,t,n)=>{"use strict";n.d(t,{EK:()=>j,SV:()=>q,ZM:()=>C,U5:()=>k,B7:()=>x,ax:()=>P,eZ:()=>M});var r=n(689),o=n.n(r);const i=require("react-bootstrap");var a=n(271),c=n.n(a);function u(e){return u="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},u(e)}function s(){return s=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},s.apply(this,arguments)}function l(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function f(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function p(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function h(e,t,n){return t&&p(e.prototype,t),n&&p(e,n),Object.defineProperty(e,"prototype",{writable:!1}),e}function d(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&b(e,t)}function b(e,t){return b=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e},b(e,t)}function y(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var n,r=m(e);if(t){var o=m(this).constructor;n=Reflect.construct(r,arguments,o)}else n=r.apply(this,arguments);return v(this,n)}}function v(e,t){if(t&&("object"===u(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return g(e)}function g(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function m(e){return m=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)},m(e)}function w(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,i=[],a=!0,c=!1;try{for(n=n.call(e);!(a=(r=n.next()).done)&&(i.push(r.value),!t||i.length!==t);a=!0);}catch(e){c=!0,o=e}finally{try{a||null==n.return||n.return()}finally{if(c)throw o}}return i}}(e,t)||function(e,t){if(e){if("string"==typeof e)return O(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?O(e,t):void 0}}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function O(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}n(368);var S={badge:{width:"4em"},code:{color:"#700",borderLeft:"3px solid #aaa",padding:"0.5em 0px 0.5em 2em",backgroundColor:"#f0f0f0",borderRadius:"4px",marginTop:"0.5em"},inlineCode:{color:"#700",margin:"0px 0.5em 0px 0.5em"}},E=[o().createElement(i.Badge,{bg:"success",style:S.badge},"OK"),o().createElement(i.Badge,{bg:"warning",style:S.badge},"Warn"),o().createElement(i.Badge,{bg:"danger",style:S.badge},"Error"),o().createElement(i.Badge,{bg:"secondary",style:S.badge},"Stale")],k=function(e){var t=e.level;return E[t]||o().createElement("span",null,t)},j=function(e){var t=e.children;return o().createElement("pre",{style:S.code},t)},C=function(e){var t=e.children;return o().createElement("tt",{style:S.inlineCode},t)},T={},P=o().createContext({}),x=function(e){var t=e.duration,n=e.onTimeout,a=e.onStart,c=e.setOnDisconnect,u=e.children;t=t||60;var s=w((0,r.useState)(t),2),l=s[0],f=s[1],p=w((0,r.useState)(!1),2),h=p[0],d=p[1],b=(0,r.useMemo)((function(){return Math.random().toString(36).slice(2)}),[]),y=function(){console.log("stopping timer for",b),n&&setTimeout(n,1),clearInterval(T[b]),T[b]=null,d(!1)};(0,r.useEffect)((function(){var e;l>0&&!h&&(e=T[b],console.log(e,T,l),!e&&l>0&&(d(!0),T[b]=setInterval((function(){return f((function(e){if(--e>0)return e;y()}))}),1e3),a&&setTimeout(a,1)))}),[l]),(0,r.useEffect)((function(){return y}),[]),c&&c((function(){y()}));var v=function(){return f(t)};return o().createElement(P.Provider,{value:{reset:v,duration:t,timer:l}},l>0?o().createElement("div",null,u,l<60&&o().createElement("div",null,"Timeout in: ",l," seconds")):o().createElement("div",null,"Timed out. ",o().createElement(i.Button,{onClick:v},"Resume")))},q=function(e){d(n,e);var t=y(n);function n(e){var r;return f(this,n),(r=t.call(this,e)).state={hasError:!1},r}return h(n,[{key:"componentDidCatch",value:function(e,t){console.warn("ErrorBoundary caught:",e,t)}},{key:"render",value:function(){return this.state.hasError?o().createElement("div",null,this.props.message||"Something went wrong here."):this.props.children}}],[{key:"getDerivedStateFromError",value:function(e){return{hasError:!0}}}]),n}(o().Component),_=function(e){var t;return e.$$typeof==Symbol.for("react.forward_ref")||(null===(t=e.prototype)||void 0===t?void 0:t.render)},M=function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:[],r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"0.0.0",i=arguments.length>4&&void 0!==arguments[4]?arguments[4]:{},a=_(e)?o().createRef():null,u=function(n){d(u,n);var c=y(u);function u(){var e;f(this,u);for(var t=arguments.length,n=new Array(t),r=0;r<t;r++)n[r]=arguments[r];return l(g(e=c.call.apply(c,[this].concat(n))),"onDisconnect",null),l(g(e),"state",{}),e}return h(u,[{key:"setOnDisconnect",value:function(e){this.onDisconnect=e}},{key:"webComponentDisconnected",value:function(){this.setState({_disconnected:!0});try{this.onDisconnect&&this.onDisconnect()}catch(e){console.log("Error during onDisconnect of web-component",e)}}},{key:"webComponentAttributeChanged",value:function(e,t,n){var r=this.state;r[e]=n,this.setState(r)}},{key:"setConfig",value:function(e){this.setState({config:e})}},{key:"render",value:function(){var n=i.stylesheets||["https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"];return o().createElement("div",{id:"cap-".concat(t,"-").concat(r)},o().createElement("style",null,n.map((function(e){return"@import url(".concat(e,");")}))),!this.state._disconnected&&o().createElement(e,s({ref:a},this.state,this.props,{setOnDisconnect:this.setOnDisconnect.bind(this),setConfig:this.setConfig.bind(this)})))}}]),u}(o().Component);c().create(u,t,i.shadowDOM||!1,n,a)}},268:e=>{"use strict";e.exports=require("@webcomponents/custom-elements")},622:e=>{"use strict";e.exports=require("@webcomponents/shadydom")},22:e=>{"use strict";e.exports=require("chalk")},517:e=>{"use strict";e.exports=require("lodash")},848:e=>{"use strict";e.exports=require("lodash/forEach")},712:e=>{"use strict";e.exports=require("lodash/get")},699:e=>{"use strict";e.exports=require("lodash/isEmpty")},113:e=>{"use strict";e.exports=require("lodash/isEqual")},452:e=>{"use strict";e.exports=require("lodash/isPlainObject")},707:e=>{"use strict";e.exports=require("lodash/map")},831:e=>{"use strict";e.exports=require("lodash/merge")},298:e=>{"use strict";e.exports=require("lodash/set")},305:e=>{"use strict";e.exports=require("lodash/unset")},316:e=>{"use strict";e.exports=require("loglevel")},689:e=>{"use strict";e.exports=require("react")},405:e=>{"use strict";e.exports=require("react-dom")},430:e=>{"use strict";e.exports=require("react-shadow-dom-retarget-events")},962:e=>{"use strict";e.exports=require("react-web-component-style-loader/exports")},13:e=>{"use strict";e.exports=require("semver/functions/compare")},84:e=>{"use strict";e.exports=require("semver/ranges/min-version")}},t={};function n(r){var o=t[r];if(void 0!==o)return o.exports;var i=t[r]={exports:{}};return e[r](i,i.exports,n),i.exports}n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var r={};(()=>{"use strict";n.r(r),n.d(r,{Code:()=>e.EK,ErrorBoundary:()=>e.SV,InlineCode:()=>e.ZM,LevelBadge:()=>e.U5,Timer:()=>e.B7,TimerContext:()=>e.ax,createWebComponent:()=>e.eZ,useMqttSync:()=>t.H,useTransitive:()=>t.D});var e=n(11),t=n(442),o=n(368),i={};for(const e in o)["default","Code","ErrorBoundary","InlineCode","LevelBadge","Timer","TimerContext","createWebComponent","useMqttSync","useTransitive"].indexOf(e)<0&&(i[e]=()=>o[e]);n.d(r,i)})();var o=exports;for(var i in r)o[i]=r[i];r.__esModule&&Object.defineProperty(o,"__esModule",{value:!0})})();
+(()=>{var e={720:(e,t,n)=>{function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function a(e,t,n){!function(e,t){if(t.has(e))throw new TypeError("Cannot initialize the same private elements twice on an object")}(e,t),t.set(e,n)}function c(e,t){return function(e,t){return t.get?t.get.call(e):t.value}(e,s(e,t,"get"))}function u(e,t,n){return function(e,t,n){if(t.set)t.set.call(e,n);else{if(!t.writable)throw new TypeError("attempted to set read only private field");t.value=n}}(e,s(e,t,"set"),n),n}function s(e,t,n){if(!t.has(e))throw new TypeError("attempted to "+n+" private field on non-instance");return t.get(e)}var l={get:n(712),set:n(298),unset:n(305),forEach:n(848),map:n(707),isEmpty:n(699),eq:n(113),isPlainObject:n(452),merge:n(831)},f=n(362),p=f.topicToPath,h=f.pathToTopic,d=f.toFlatObject,b=f.topicMatch,y=f.forMatchIterator,v=function e(t,n){if(n&&0!=n.length){l.unset(t,n);var r=n.slice(0,-1),o=0==r.length?t:l.get(t,r);return l.isEmpty(o)?e(t,r):n}},g=function e(t,n){if(0!=n.length){var r=n[0];if(r)for(var o in t)o==r||"*"==r||r.startsWith("+")?e(t[o],n.slice(1)):delete t[o]}},m=new WeakMap,w=new WeakMap,O=new WeakMap,S=function(){function e(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};o(this,e),a(this,m,{writable:!0,value:{}}),a(this,w,{writable:!0,value:[]}),a(this,O,{writable:!0,value:[]}),u(this,m,t)}var t,n;return t=e,n=[{key:"updateFromArray",value:function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},o=l.get(c(this,m),e);if(null==t){if(null==o)return{};v(c(this,m),e)}else{if(l.eq(o,t))return{};l.set(c(this,m),e,t)}var i,a=h(e),u=r({},a,t);if(t instanceof Object){var s=d(t);i={},l.forEach(s,(function(e,t){i["".concat(a).concat(t)]=e}))}else i=u;return c(this,w).forEach((function(e){return e(u,n)})),c(this,O).forEach((function(e){return e(i,n)})),i}},{key:"update",value:function(e,t,n){if("string"==typeof e)return this.updateFromTopic(e,t,n);if(e instanceof Array)return this.updateFromArray(e,t,n);throw new Error("unrecognized path expression")}},{key:"updateFromTopic",value:function(e,t,n){return this.updateFromArray(p(e),t,n)}},{key:"updateFromModifier",value:function(e,t){var n=this;return l.map(e,(function(e,r){return n.updateFromTopic(r,e,t)}))}},{key:"subscribe",value:function(e){e instanceof Function?c(this,w).push(e):console.warn("DataCache.subscribe expects a function as argument. Did you mean to use subscribePath?")}},{key:"subscribePath",value:function(e,t){c(this,w).push((function(n,r){l.forEach(n,(function(n,o){var i=b(e,o);i&&t(n,o,i,r)}))}))}},{key:"subscribePathFlat",value:function(e,t){c(this,O).push((function(n,r){l.forEach(n,(function(n,o){var i=b(e,o);i&&t(n,o,i,r)}))}))}},{key:"unsubscribe",value:function(e){u(this,w,c(this,w).filter((function(t){return t!=e})))}},{key:"get",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[];return 0==e.length?c(this,m):l.get(c(this,m),e)}},{key:"getByTopic",value:function(e){return this.get(p(e))}},{key:"filter",value:function(e){var t=JSON.parse(JSON.stringify(this.get()));return g(t,e),t}},{key:"filterByTopic",value:function(e){return this.filter(p(e))}},{key:"forMatch",value:function(e,t){var n=p(e);this.forPathMatch(n,t)}},{key:"forPathMatch",value:function(e,t){y(this.get(),e,t)}}],n&&i(t.prototype,n),Object.defineProperty(t,"prototype",{writable:!1}),e}();e.exports={DataCache:S,updateObject:function(e,t){return l.forEach(t,(function(t,n){var r=p(n);null==t?v(e,r):l.set(e,r,t)})),e}}},890:(e,t,n)=>{"use strict";function r(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function o(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function i(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(e){return a="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},a(e)}var c=n(362),u=c.mqttParsePayload,s=c.topicMatch,l=c.topicToPath,f=c.pathToTopic,p=c.toFlatObject,h=c.getLogger,d=c.mergeVersions,b=c.parseMQTTTopic,y=c.isSubTopicOf,v=c.versionCompare,g=c.encodeTopicElement,m=n(720).DataCache,w=n(517),O=h("MqttSync"),S="$SYS/broker/uptime",E=function(){},k=function(e){return e.endsWith("/#")?e:e.endsWith("/")?e.concat("#"):e.concat("/#")},j=function(e){return e.replace(/\/\//g,"/")},C=function(){function e(t){var n=this,r=t.mqttClient,o=t.onChange,a=t.ignoreRetain,c=t.migrate,s=t.onReady,p=t.sliceTopic;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),i(this,"data",new m),i(this,"subscribedPaths",{}),i(this,"publishedPaths",{}),i(this,"publishedMessages",{}),i(this,"publishQueue",new Map),i(this,"heartbeatWaitersOnce",[]),i(this,"heartbeats",0),i(this,"beforeDisconnectHooks",[]),this.mqtt=r,this.mqtt.on("message",(function(e,t,r){var i=t&&t.toString();if(O.debug("got message",e,i.slice(0,180),i.length>180?"... (".concat(i.length," bytes)"):"",r.retain),e==S)n.heartbeats>0&&(n.heartbeatWaitersOnce.forEach((function(e){return e()})),n.heartbeatWaitersOnce=[]),1==n.heartbeats&&!c&&s&&s(),n.heartbeats++;else if(r.retain||a){O.debug("processing message",e),p&&(e=f(l(e).slice(p)));var h=u(t);if(n.isPublished(e))n.publishedMessages[e]=h,n.data.update(e,h,{external:!0});else if(n.isSubscribed(e)){O.debug("applying received update",e);var d=n.data.update(e,h);o&&Object.keys(d).length>0&&o(d)}}})),this.mqtt.subscribe(S,{rap:!0},O.debug),(null==c?void 0:c.length)>0&&this.migrate(c,(function(){O.debug("done migrating",s),s&&n.waitForHeartbeatOnce(s)}))}var t,n;return t=e,n=[{key:"publishAtLevel",value:function(e,t,n){var r=this;O.debug("publishingAtLevel ".concat(n),e,t),n>0?w.forEach(t,(function(t,o){var i="".concat(e,"/").concat(g(o));O.debug("publishing ".concat(i)),r.publishAtLevel(i,t,n-1)})):this.mqtt.publish(e,JSON.stringify(t),{retain:!0},(function(e){e&&O.warn("Error when publishing migration result",e)}))}},{key:"migrate",value:function(e){var t=this,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:void 0,r=e.length;if(0!=r){var o=function(){return 0==--r&&n&&n()};e.forEach((function(e){var n=e.topic,r=e.newVersion,i=e.transform,a=void 0===i?void 0:i,c=e.flat,u=void 0!==c&&c,s=e.level,h=void 0===s?0:s;O.debug("migrating",n,r);var y=b(n),g=y.organization,m=y.device,S=y.capability,E=y.sub,k="/".concat(g,"/").concat(m,"/").concat(S),C=0==E.length?"/#":f(E),T="".concat(k,"/+").concat(C);t.subscribe(T,(function(e){if(e)return O.warn("Error during migration",e),void o();t.waitForHeartbeatOnce((function(){O.debug("got heartbeat",n,T);var e=t.data.getByTopic(k);if(!e)return t.unsubscribe(T),void o();var i=d(e,C,{maxVersion:r}),c=w.get(i,l(C)),s=a?a(c):c,b=j("".concat(k,"/").concat(r,"/").concat(C));if(O.debug("publishing merged",b),u){var y=p(s),g=l(b);w.forEach(y,(function(e,n){var r=f(g.concat(l(n)));t.mqtt.publish(r,JSON.stringify(e),{retain:!0},(function(e){e&&O.warn("Error when publishing migration result for ".concat(n),e)}))}))}else t.publishAtLevel(b,s,h);t.unsubscribe(T),t.waitForHeartbeatOnce((function(){var n=Object.keys(e).filter((function(e){return v(e,r)<0})).map((function(e){return j("".concat(k,"/").concat(e,"/").concat(C))}));O.debug({prefixesToClear:n}),t.clear(n),o()}))}))}))}))}else n&&n()}},{key:"clear",value:function(e){var t=this,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:void 0,r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},o=[],i=function(t){e.forEach((function(e){return s("".concat(e,"/#"),t)&&(!r.filter||r.filter(t))&&o.push(t)}))};this.mqtt.on("message",i),e.forEach((function(e){"string"==typeof e?t.mqtt.subscribe("".concat(e,"/#")):O.warn("Ignoring",e,"since it is not a string.")}));var a="undefined"!=typeof Buffer?Buffer.alloc(0):null;this.waitForHeartbeatOnce((function(){t.mqtt.removeListener("message",i),e.forEach((function(e){return t.mqtt.unsubscribe("".concat(e,"/#"))}));var r=o.length;O.debug("clearing ".concat(r," retained messages from ").concat(e)),o.forEach((function(e){t.mqtt.publish(e,a,{retain:!0})})),n&&n(r)}))}},{key:"waitForHeartbeatOnce",value:function(e){var t=this;setTimeout((function(){return t.heartbeatWaitersOnce.push(e)}),1)}},{key:"isSubscribed",value:function(e){return Object.keys(this.subscribedPaths).some((function(t){return s(t,e)}))}},{key:"isPublished",value:function(e){var t=this;return Object.keys(this.publishedPaths).some((function(n){return s(n,e)&&!t.publishedPaths[n].atomic}))}},{key:"subscribe",value:function(e){var t=this,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:E;if(e=k(e),this.subscribedPaths[e])return O.debug("already subscribed to",e),void n();this.mqtt.subscribe(e,{rap:!0},(function(r,o){O.debug("subscribe",e,"granted:",o),o&&o.some((function(t){return t.topic==e&&t.qos<128}))?(t.subscribedPaths[e]=1,n(null)):n("not permitted to subscribe to topic ".concat(e,", ").concat(JSON.stringify(o)))}))}},{key:"unsubscribe",value:function(e){this.subscribedPaths[e]&&(this.mqtt.unsubscribe(e),delete this.subscribedPaths[e])}},{key:"_actuallyPublish",value:function(e,t){return this.mqtt.connected?(O.debug("actually publishing",e),this.mqtt.publish(e,null==t?null:JSON.stringify(t),{retain:!0}),!0):(O.warn("not connected, not publishing",e),!1)}},{key:"_processQueue_rec",value:function(e){var t=this;if(this.publishQueue.size>0){var n=function(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,i=[],a=!0,c=!1;try{for(n=n.call(e);!(a=(r=n.next()).done)&&(i.push(r.value),!t||i.length!==t);a=!0);}catch(e){c=!0,o=e}finally{try{a||null==n.return||n.return()}finally{if(c)throw o}}return i}}(e,t)||function(e,t){if(e){if("string"==typeof e)return r(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?r(e,t):void 0}}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}(this.publishQueue.entries().next().value,2),o=n[0],i=n[1];this._actuallyPublish(o,i)?(this.publishQueue.delete(o),this._processQueue_rec(e)):setTimeout((function(){return t._processQueue_rec(e)}),5e3)}else e()}},{key:"_processQueue",value:function(){var e=this;this._processing||(this._processing=!0,this._processQueue_rec((function(){return e._processing=!1})))}},{key:"setThrottle",value:function(e){this._processQueueThrottled=w.throttle(this._processQueue.bind(this),e)}},{key:"clearThrottle",value:function(){delete this._processQueueThrottled}},{key:"addToQueue",value:function(e,t){this.publishQueue.set(e,t)}},{key:"_enqueue",value:function(e,t){var n;O.debug("enqueuing",e),this.addToQueue(e,t),this._processQueueThrottled?this._processQueueThrottled():this._processQueue(),null==t?delete this.publishedMessages[e]:this.publishedMessages[e]="object"==a(n=t)?JSON.parse(JSON.stringify(n)):n}},{key:"publish",value:function(e){var t=this,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{atomic:!1};return e=k(e),!w.isEqual(this.publishedPaths[e],n)&&(this.publishedPaths[e]=n,n.atomic?(this.data.subscribePath(e,(function(n,r,o,i){if(null==i||!i.external){O.debug("processing change (atomic)",r,e);var a=e.slice(0,e.length-2),c=f(l(r).slice(0,l(a).length));t._enqueue(c,t.data.getByTopic(c))}})),!0):(this.mqtt.subscribe(e),void this.data.subscribePath(e,(function(e,n,r,o){if(null==o||!o.external)return O.debug("processing change",n),w.each(t.publishedMessages,(function(e,r){if(O.trace("oldKey",r),r==n)return!0;if(y(r,n)&&t._enqueue(r,null),y(n,r)){t._enqueue(r,null);var o=p(e);w.each(o,(function(e,n){var o="".concat(r).concat(n);t._enqueue(o,e)}))}})),t._enqueue(n,e),!0}))))}},{key:"beforeDisconnect",value:function(){var e=this;this.beforeDisconnectHooks.forEach((function(t){return t(e)}))}},{key:"onBeforeDisconnect",value:function(e){this.beforeDisconnectHooks.push(e)}}],n&&o(t.prototype,n),Object.defineProperty(t,"prototype",{writable:!1}),e}();e.exports=C},362:(e,t,n)=>{function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var o=n(13),i=n(84),a={get:n(712),set:n(298),unset:n(305),forEach:n(848),map:n(707),isEmpty:n(699),eq:n(113),isPlainObject:n(452),merge:n(831)},c=n(316),u=n(22),s=n(499);c.setAll=function(e){return Object.values(c.getLoggers()).forEach((function(t){return t.setLevel(e)}))};var l={warn:u.yellow,error:u.red,info:u.green,debug:u.gray},f=c.methodFactory;c.methodFactory=function(e,t,n){var r=f(e,t,n);if("undefined"!=typeof window){var o="".concat(n," ").concat(e);return function(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];return r.apply(void 0,["[".concat(o,"]")].concat(t))}}var i,a="".concat(n," ").concat(l[i=e]?l[i](i):i);return function(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];return r.apply(void 0,["[".concat(u.blue((new Date).toISOString())," ").concat(a,"]")].concat(t))}};var p=c.getLogger,h=function(e){return e.replace(/%/g,"%25").replace(/\//g,"%2F")},d=function(e){return e.replace(/%25/g,"%").replace(/%2F/g,"/")},b=function(e){return"/".concat(e.map((function(e){return e.startsWith("+")?"+":e})).map(h).join("/"))},y=function(e){var t=e.split("/").map(d);return t.length>0&&0==t[0].length&&t.shift(),t.length>0&&0==t.at(-1).length&&t.pop(),t},v=function(e,t){return function e(t,n){if(0==t.length)return!0;if("#"==t[0][0])return!0;if(0==n.length)return!0;if(t[0]==n[0])return e(t.slice(1),n.slice(1));if("+"==t[0][0]){var o=e(t.slice(1),n.slice(1));return o&&Object.assign(r({},t[0].slice(1),n[0]),o)}return!1}(y(e),y(t))},g=function e(t,n){return 0==t.length||t[0]==n[0]&&e(t.slice(1),n.slice(1))},m=function(e,t){return o(i(e),i(t))},w=["B","KB","MB","GB","TB"];e.exports={parseMQTTUsername:function(e){var t=e.split(":");return{organization:t[0],client:t[1],sub:t.slice(2)}},parseMQTTTopic:function(e){var t=y(e);return{organization:t[0],device:t[1],capabilityScope:t[2],capabilityName:t[3],capability:"".concat(t[2],"/").concat(t[3]),version:t[4],sub:t.slice(5)}},pathToTopic:b,topicToPath:y,toFlatObject:function e(t){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};return a.forEach(t,(function(t,o){var i=n.concat(String(o));(a.isPlainObject(t)||t instanceof Array)&&null!==t?e(t,i,r):r[b(i)]=t})),r},topicMatch:v,mqttParsePayload:function(e){return 0==e.length?null:JSON.parse(e.toString("utf-8"))},getRandomId:function(){return Math.random().toString(36).slice(2)},versionCompare:m,loglevel:c,getLogger:p,mergeVersions:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:void 0,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};if(!e)return t?a.set({},t,e):e;var r=Object.keys(e).filter((function(e){return(!n.maxVersion||m(e,n.maxVersion)<=0)&&(!n.minVersion||m(n.minVersion,e)<=0)})).sort(m),o={},i=t&&y(t);return r.forEach((function(t){var n=i?a.get(e[t],i):e[t];a.merge(o,n)})),i?a.set({},i,o):o},mqttClearRetained:function(e,t,n){var r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:1e3,o=[],i=function(e){t.forEach((function(t){return v("".concat(t,"/#"),e)&&o.push(e)}))};e.on("message",i),t.forEach((function(t){"string"==typeof t?e.subscribe("".concat(t,"/#")):console.warn("Ignoring",t,"since it is not a string.")}));var a="undefined"!=typeof Buffer?Buffer.alloc(0):null;setTimeout((function(){e.removeListener("message",i),t.forEach((function(t){return e.unsubscribe("".concat(t,"/#"))}));var r=o.length;console.log("clearing ".concat(r," retained messages from ").concat(t)),o.forEach((function(t){e.publish(t,a,{retain:!0})})),n&&n(r)}),r)},isSubTopicOf:function(e,t){var n=y(t),r=y(e);return g(n,r)&&n.length<r.length},clone:function(e){return JSON.parse(JSON.stringify(e))},setFromPath:function e(t,n,r){if(0==n.length)return t;var o=n.shift();0==n.length?t[o]=r:(t[o]||(t[o]={}),e(t[o],n,r))},forMatchIterator:function e(t,n,o){var i=arguments.length>3&&void 0!==arguments[3]?arguments[3]:[],a=arguments.length>4&&void 0!==arguments[4]?arguments[4]:{};if(0!=n.length&&"#"!=n[0]){var c=n[0];if(c)for(var u in t)if(u==c||"*"==c||c.startsWith("+")){var s=c.startsWith("+")&&c.length>1?Object.assign({},a,r({},c.slice(1),u)):a;e(t[u],n.slice(1),o,i.concat([u]),s)}}else o(t,i,a)},encodeTopicElement:h,decodeTopicElement:d,constants:s,visit:function e(t,n,r){var o;t&&(r(t),null===(o=t[n])||void 0===o||o.forEach((function(t){return e(t,n,r)})))},wait:function(e){return new Promise((function(t){setTimeout(t,e)}))},formatBytes:function(e){if(!e)return"--";for(var t=0;e>1024;)e/=1024,t++;return"".concat(e.toFixed(2)," ").concat(w[t])},formatDuration:function(e){if(!e)return"--";var t={};e>3600&&(t.h=Math.floor(e/3600),e%=3600),e>60&&(t.m=Math.floor(e/60),e%=60),t.s=Math.floor(e);var n="";return t.h>0&&(n+="".concat(t.h,"h ")),t.m>0&&(n+="".concat(t.m,"m ")),!t.h&&(n+="".concat(t.s,"s")),n.trim()},tryJSONParse:function(e){try{return JSON.parse(e)}catch(e){return null}},decodeJWT:function(e){return JSON.parse(atob(e.split(".")[1]))}}},499:e=>{e.exports={rosReleases:{kinetic:{rosVersion:1,ubuntuCodename:"xenial"},melodic:{rosVersion:1,ubuntuCodename:"bionic"},noetic:{rosVersion:1,ubuntuCodename:"focal"},dashing:{rosVersion:2},eloquent:{rosVersion:2},foxy:{rosVersion:2},galactic:{rosVersion:2},humble:{rosVersion:2},iron:{rosVersion:2},rolling:{rosVersion:2}}}},216:(e,t,n)=>{"use strict";n.r(t),n.d(t,{MqttSync:()=>c,fetchJson:()=>s,parseCookie:()=>u});var r=n(362),o={};for(const e in r)["default","MqttSync","parseCookie","fetchJson"].indexOf(e)<0&&(o[e]=()=>r[e]);n.d(t,o);var i=n(720);o={};for(const e in i)["default","MqttSync","parseCookie","fetchJson"].indexOf(e)<0&&(o[e]=()=>i[e]);n.d(t,o);var a=n(890),c=n.n(a)(),u=function(e){return e.split(";").map((function(e){return e.split("=")})).reduce((function(e,t){return e[decodeURIComponent(t[0].trim())]=t[1]&&decodeURIComponent(t[1].trim()),e}),{})},s=function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};fetch(e,{method:n.method||(n.body?"post":"get"),mode:"cors",cache:"no-cache",headers:{"Content-Type":"application/json"},redirect:"follow",referrerPolicy:"no-referrer",body:n.body?JSON.stringify(n.body):void 0}).then((function(n){var r=!n.ok&&"fetching ".concat(e," failed: ").concat(n.status," ").concat(n.statusText);n.json().then((function(e){return t(r,e)})).catch((function(e){throw new Error(e)}))})).catch((function(e){return t("error: ".concat(e))}))}},782:(e,t,n)=>{"use strict";n.d(t,{H:()=>v,D:()=>g});var r=n(689),o=n.n(r),i=n(517),a=n.n(i);const c=require("mqtt-browser");var u=n.n(c),s=n(216);function l(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function f(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?l(Object(n),!0).forEach((function(t){p(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):l(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function p(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function h(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,i=[],a=!0,c=!1;try{for(n=n.call(e);!(a=(r=n.next()).done)&&(i.push(r.value),!t||i.length!==t);a=!0);}catch(e){c=!0,o=e}finally{try{a||null==n.return||n.return()}finally{if(c)throw o}}return i}}(e,t)||function(e,t){if(e){if("string"==typeof e)return d(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?d(e,t):void 0}}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function d(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var b=n(890),y=(0,s.getLogger)("utils-web/hooks");y.setLevel("info");var v=function(e){var t=e.jwt,n=e.id,i=e.mqttUrl,c=h((0,r.useState)("connecting"),2),l=c[0],f=c[1],p=h((0,r.useState)(),2),d=p[0],v=p[1],g=h((0,r.useState)({}),2),m=g[0],w=g[1];return(0,r.useEffect)((function(){var e=(0,s.decodeJWT)(t),r=u().connect(i,{username:JSON.stringify({id:n,payload:e}),password:t});return r.on("connect",(function(){y.debug("connected");var e=new b({mqttClient:r,ignoreRetain:!0});v(e),f("connected"),e.data.subscribe(a().debounce((function(){return w((0,s.clone)(e.data.get()))}),100))})),r.on("error",(function(e){y.error(e),f("error: ".concat(e))})),function(){y.info("cleaning up useMQTTSync"),d&&d.beforeDisconnect?(d.beforeDisconnect(),d.waitForHeartbeatOnce((function(){return r.end()}))):r.end()}}),[t,n]),{status:l,ready:"connected"==l,StatusComponent:function(){return o().createElement("div",null,l)},mqttSync:d,data:m}},g=function(e){var t=e.jwt,n=e.id,r=e.host,o=e.ssl,i=e.capability,a=e.versionNS,c=h(i.split("/"),2),u=c[0],l=c[1],p=(0,s.decodeJWT)(t).device,d=[n,p,u,l],b=(0,s.pathToTopic)(d),y=[].concat(d,[a]),g=(0,s.pathToTopic)(y),m="".concat(o&&JSON.parse(o)?"wss":"ws","://mqtt.").concat(r);return f(f({},v({jwt:t,id:n,mqttUrl:m})),{},{device:p,prefixPath:d,prefix:b,prefixPathVersion:y,prefixVersion:g})}},809:e=>{function t(e,t){if(e){if("string"==typeof e)return n(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?n(e,t):void 0}}function n(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}e.exports=function(e){if(!e.attributes)return{};var r,o,i,a={},c=(i=e.attributes,function(e){if(Array.isArray(e))return n(e)}(i)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(i)||t(i)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()).map((function(e){return function(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}({},e.name,e.value)})),u=function(e,n){var r="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(!r){if(Array.isArray(e)||(r=t(e))){r&&(e=r);var o=0,i=function(){};return{s:i,n:function(){return o>=e.length?{done:!0}:{done:!1,value:e[o++]}},e:function(e){throw e},f:i}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var a,c=!0,u=!1;return{s:function(){r=r.call(e)},n:function(){var e=r.next();return c=e.done,e},e:function(e){u=!0,a=e},f:function(){try{c||null==r.return||r.return()}finally{if(u)throw a}}}}(c);try{for(u.s();!(o=u.n()).done;){r=o.value;var s=Object.keys(r)[0];a[s.replace(/-([a-z])/g,(function(e){return e[1].toUpperCase()}))]=r[s]}}catch(e){u.e(e)}finally{u.f()}return a}},613:(e,t,n)=>{e.exports=function(){try{return n(962).styleElements}catch(e){return[]}}},927:(e,t,n)=>{function r(e){return r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},r(e)}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function a(e,t,n){return t&&i(e.prototype,t),n&&i(e,n),Object.defineProperty(e,"prototype",{writable:!1}),e}function c(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&d(e,t)}function u(e){var t=h();return function(){var n,r=b(e);if(t){var o=b(this).constructor;n=Reflect.construct(r,arguments,o)}else n=r.apply(this,arguments);return s(this,n)}}function s(e,t){if(t&&("object"===r(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return l(e)}function l(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function f(e){var t="function"==typeof Map?new Map:void 0;return f=function(e){if(null===e||(n=e,-1===Function.toString.call(n).indexOf("[native code]")))return e;var n;if("function"!=typeof e)throw new TypeError("Super expression must either be null or a function");if(void 0!==t){if(t.has(e))return t.get(e);t.set(e,r)}function r(){return p(e,arguments,b(this).constructor)}return r.prototype=Object.create(e.prototype,{constructor:{value:r,enumerable:!1,writable:!0,configurable:!0}}),d(r,e)},f(e)}function p(e,t,n){return p=h()?Reflect.construct:function(e,t,n){var r=[null];r.push.apply(r,t);var o=new(Function.bind.apply(e,r));return n&&d(o,n.prototype),o},p.apply(null,arguments)}function h(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}function d(e,t){return d=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e},d(e,t)}function b(e){return b=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)},b(e)}function y(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var v=n(689),g=n(405),m=n(430),w=n(613),O=n(809);n(622),n(268);var S={attachedCallback:"webComponentAttached",connectedCallback:"webComponentConnected",disconnectedCallback:"webComponentDisconnected",attributeChangedCallback:"webComponentAttributeChanged",adoptedCallback:"webComponentAdopted"};e.exports={create:function(e,t){var n=!(arguments.length>2&&void 0!==arguments[2])||arguments[2],r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:[],i=arguments.length>4&&void 0!==arguments[4]?arguments[4]:void 0,s=function(t){c(f,t);var s=u(f);function f(){var e;o(this,f);for(var t=arguments.length,n=new Array(t),r=0;r<t;r++)n[r]=arguments[r];return y(l(e=s.call.apply(s,[this].concat(n))),"instance",null),e}return a(f,[{key:"callConstructorHook",value:function(){this.instance.webComponentConstructed&&this.instance.webComponentConstructed.apply(this.instance,[this])}},{key:"callLifeCycleHook",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],n=S[e];n&&this.instance&&this.instance[n]&&this.instance[n].apply(this.instance,t)}},{key:"connectedCallback",value:function(){var t=this,r=t;if(n){var o=t.attachShadow({mode:"open"});r=document.createElement("div"),w().forEach((function(e){o.appendChild(e.cloneNode(o))})),o.appendChild(r),m(o)}g.render(v.createElement(e,O(t)),r,(function(){t.instance=this,t.callConstructorHook(),t.callLifeCycleHook("connectedCallback")}))}},{key:"disconnectedCallback",value:function(){this.callLifeCycleHook("disconnectedCallback")}},{key:"attributeChangedCallback",value:function(e,t,n,r){this.callLifeCycleHook("attributeChangedCallback",[e,t,n,r])}},{key:"adoptedCallback",value:function(e,t){this.callLifeCycleHook("adoptedCallback",[e,t])}},{key:"call",value:function(e,t){var n,r;return null==i||null===(n=i.current)||void 0===n||null===(r=n[e])||void 0===r?void 0:r.call(null==i?void 0:i.current,t)}},{key:"getConfig",value:function(){return this.instance.state.config}}],[{key:"observedAttributes",get:function(){return r}}]),f}(f(HTMLElement));customElements.define(t,s)}}},498:(e,t,n)=>{"use strict";n.d(t,{EK:()=>j,SV:()=>q,ZM:()=>C,U5:()=>k,B7:()=>x,ax:()=>P,eZ:()=>M});var r=n(689),o=n.n(r);const i=require("react-bootstrap");var a=n(927),c=n.n(a);function u(e){return u="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},u(e)}function s(){return s=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},s.apply(this,arguments)}function l(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function f(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function p(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function h(e,t,n){return t&&p(e.prototype,t),n&&p(e,n),Object.defineProperty(e,"prototype",{writable:!1}),e}function d(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&b(e,t)}function b(e,t){return b=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e},b(e,t)}function y(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var n,r=m(e);if(t){var o=m(this).constructor;n=Reflect.construct(r,arguments,o)}else n=r.apply(this,arguments);return v(this,n)}}function v(e,t){if(t&&("object"===u(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return g(e)}function g(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function m(e){return m=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)},m(e)}function w(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,i=[],a=!0,c=!1;try{for(n=n.call(e);!(a=(r=n.next()).done)&&(i.push(r.value),!t||i.length!==t);a=!0);}catch(e){c=!0,o=e}finally{try{a||null==n.return||n.return()}finally{if(c)throw o}}return i}}(e,t)||function(e,t){if(e){if("string"==typeof e)return O(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?O(e,t):void 0}}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function O(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}n(216);var S={badge:{width:"4em"},code:{color:"#700",borderLeft:"3px solid #aaa",padding:"0.5em 0px 0.5em 2em",backgroundColor:"#f0f0f0",borderRadius:"4px",marginTop:"0.5em"},inlineCode:{color:"#700",margin:"0px 0.5em 0px 0.5em"}},E=[o().createElement(i.Badge,{bg:"success",style:S.badge},"OK"),o().createElement(i.Badge,{bg:"warning",style:S.badge},"Warn"),o().createElement(i.Badge,{bg:"danger",style:S.badge},"Error"),o().createElement(i.Badge,{bg:"secondary",style:S.badge},"Stale")],k=function(e){var t=e.level;return E[t]||o().createElement("span",null,t)},j=function(e){var t=e.children;return o().createElement("pre",{style:S.code},t)},C=function(e){var t=e.children;return o().createElement("tt",{style:S.inlineCode},t)},T={},P=o().createContext({}),x=function(e){var t=e.duration,n=e.onTimeout,a=e.onStart,c=e.setOnDisconnect,u=e.children;t=t||60;var s=w((0,r.useState)(t),2),l=s[0],f=s[1],p=w((0,r.useState)(!1),2),h=p[0],d=p[1],b=(0,r.useMemo)((function(){return Math.random().toString(36).slice(2)}),[]),y=function(){console.log("stopping timer for",b),n&&setTimeout(n,1),clearInterval(T[b]),T[b]=null,d(!1)};(0,r.useEffect)((function(){var e;l>0&&!h&&(e=T[b],console.log(e,T,l),!e&&l>0&&(d(!0),T[b]=setInterval((function(){return f((function(e){if(--e>0)return e;y()}))}),1e3),a&&setTimeout(a,1)))}),[l]),(0,r.useEffect)((function(){return y}),[]),c&&c((function(){y()}));var v=function(){return f(t)};return o().createElement(P.Provider,{value:{reset:v,duration:t,timer:l}},l>0?o().createElement("div",null,u,l<60&&o().createElement("div",null,"Timeout in: ",l," seconds")):o().createElement("div",null,"Timed out. ",o().createElement(i.Button,{onClick:v},"Resume")))},q=function(e){d(n,e);var t=y(n);function n(e){var r;return f(this,n),(r=t.call(this,e)).state={hasError:!1},r}return h(n,[{key:"componentDidCatch",value:function(e,t){console.warn("ErrorBoundary caught:",e,t)}},{key:"render",value:function(){return this.state.hasError?o().createElement("div",null,this.props.message||"Something went wrong here."):this.props.children}}],[{key:"getDerivedStateFromError",value:function(e){return{hasError:!0}}}]),n}(o().Component),_=function(e){var t;return e.$$typeof==Symbol.for("react.forward_ref")||(null===(t=e.prototype)||void 0===t?void 0:t.render)},M=function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:[],r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"0.0.0",i=arguments.length>4&&void 0!==arguments[4]?arguments[4]:{},a=_(e)?o().createRef():null,u=function(n){d(u,n);var c=y(u);function u(){var e;f(this,u);for(var t=arguments.length,n=new Array(t),r=0;r<t;r++)n[r]=arguments[r];return l(g(e=c.call.apply(c,[this].concat(n))),"onDisconnect",null),l(g(e),"state",{}),e}return h(u,[{key:"setOnDisconnect",value:function(e){this.onDisconnect=e}},{key:"webComponentDisconnected",value:function(){this.setState({_disconnected:!0});try{this.onDisconnect&&this.onDisconnect()}catch(e){console.log("Error during onDisconnect of web-component",e)}}},{key:"webComponentAttributeChanged",value:function(e,t,n){var r=this.state;r[e]=n,this.setState(r)}},{key:"setConfig",value:function(e){this.setState({config:e})}},{key:"render",value:function(){var n=i.stylesheets||["https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"];return o().createElement("div",{id:"cap-".concat(t,"-").concat(r)},o().createElement("style",null,n.map((function(e){return"@import url(".concat(e,");")}))),!this.state._disconnected&&o().createElement(e,s({ref:a},this.state,this.props,{setOnDisconnect:this.setOnDisconnect.bind(this),setConfig:this.setConfig.bind(this)})))}}]),u}(o().Component);c().create(u,t,i.shadowDOM||!1,n,a)}},268:e=>{"use strict";e.exports=require("@webcomponents/custom-elements")},622:e=>{"use strict";e.exports=require("@webcomponents/shadydom")},22:e=>{"use strict";e.exports=require("chalk")},517:e=>{"use strict";e.exports=require("lodash")},848:e=>{"use strict";e.exports=require("lodash/forEach")},712:e=>{"use strict";e.exports=require("lodash/get")},699:e=>{"use strict";e.exports=require("lodash/isEmpty")},113:e=>{"use strict";e.exports=require("lodash/isEqual")},452:e=>{"use strict";e.exports=require("lodash/isPlainObject")},707:e=>{"use strict";e.exports=require("lodash/map")},831:e=>{"use strict";e.exports=require("lodash/merge")},298:e=>{"use strict";e.exports=require("lodash/set")},305:e=>{"use strict";e.exports=require("lodash/unset")},316:e=>{"use strict";e.exports=require("loglevel")},689:e=>{"use strict";e.exports=require("react")},405:e=>{"use strict";e.exports=require("react-dom")},430:e=>{"use strict";e.exports=require("react-shadow-dom-retarget-events")},962:e=>{"use strict";e.exports=require("react-web-component-style-loader/exports")},13:e=>{"use strict";e.exports=require("semver/functions/compare")},84:e=>{"use strict";e.exports=require("semver/ranges/min-version")}},t={};function n(r){var o=t[r];if(void 0!==o)return o.exports;var i=t[r]={exports:{}};return e[r](i,i.exports,n),i.exports}n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var r={};(()=>{"use strict";n.r(r),n.d(r,{Code:()=>e.EK,ErrorBoundary:()=>e.SV,InlineCode:()=>e.ZM,LevelBadge:()=>e.U5,Timer:()=>e.B7,TimerContext:()=>e.ax,createWebComponent:()=>e.eZ,useMqttSync:()=>t.H,useTransitive:()=>t.D});var e=n(498),t=n(782),o=n(216),i={};for(const e in o)["default","Code","ErrorBoundary","InlineCode","LevelBadge","Timer","TimerContext","createWebComponent","useMqttSync","useTransitive"].indexOf(e)<0&&(i[e]=()=>o[e]);n.d(r,i)})();var o=exports;for(var i in r)o[i]=r[i];r.__esModule&&Object.defineProperty(o,"__esModule",{value:!0})})();

package/docs/client.md

@@ -0,0 +1,142 @@
+# 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.
+
+```js
+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']);
+```
+
+<!-- Generated by documentation.js. Update this documentation by updating the source code. -->
+
+## ErrorBoundary
+
+**Extends React.Component**
+
+A simple error boundary. Usage:
+
+```jsx
+<ErrorBoundary message="Something went wrong">
+<SomeFlakyComponent />
+</ErrorBoundary>
+```
+
+#### Parameters
+
+*   `props` &#x20;
+
+## Code
+
+Reusable component for showing code
+
+#### Parameters
+
+*   `$0` **[Object][1]**&#x20;
+
+    *   `$0.children` &#x20;
+
+## 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:
+
+```js
+createWebComponent(Diagnostics, 'health-monitoring-device', ['jwt', 'host', 'device'], TR_PKG_VERSION);
+```
+
+#### Parameters
+
+*   `Component` &#x20;
+*   `name` &#x20;
+*   `reactiveAttributes`   (optional, default `[]`)
+*   `version`   (optional, default `'0.0.0'`)
+*   `options`   (optional, default `{}`)
+
+## fetchJson
+
+get or post (if body given) json
+
+#### Parameters
+
+*   `url` &#x20;
+*   `callback` &#x20;
+*   `options`   (optional, default `{}`)
+
+## parseCookie
+
+parse document cookies
+
+#### Parameters
+
+*   `str` &#x20;
+
+## useMqttSync
+
+hook for using MqttSync in React
+
+#### Parameters
+
+*   `$0` **[Object][1]**&#x20;
+
+    *   `$0.jwt` &#x20;
+    *   `$0.id` &#x20;
+    *   `$0.mqttUrl` &#x20;
+
+## useTransitive
+
+Hook for using Transitive in React. Connects to MQTT, establishes sync, and
+exposes reactive `data` state variable.
+
+#### Parameters
+
+*   `$0` **[Object][1]**&#x20;
+
+    *   `$0.jwt` &#x20;
+    *   `$0.id` &#x20;
+    *   `$0.host` &#x20;
+    *   `$0.ssl` &#x20;
+    *   `$0.capability` &#x20;
+    *   `$0.versionNS` &#x20;
+
+[1]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object

package/index.js

@@ -1,3 +1,3 @@
-export * from './shared.jsx';
-export * from './hooks.jsx';
-export * from './client';
+export * from './client/shared.jsx';
+export * from './client/hooks.jsx';
+export * from './client/client';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transitive-sdk/utils-web",
-  "version": "0.7.6",
+  "version": "0.8.0",
   "description": "Web utils for the Transitive framework",
   "homepage": "https://transitiverobotics.com",
   "author": {
@@ -19,7 +19,7 @@
     "test": "webpack serve -c webpack-test.config.js",
     "build-test": "webpack -c webpack-test.config.js",
     "prepare": "webpack --no-watch --mode=production",
-    "prepack": "cat ../docs.js | node --input-type=module"
+    "prepack": "cat ../docs.js | node --input-type=module - client"
   },
   "dependencies": {
     "@babel/runtime": "^7.16.7",

package/docs/index.md

@@ -1,708 +0,0 @@
-<!-- Generated by documentation.js. Update this documentation by updating the source code. -->
-
-## DataCache
-
-A class implementing a local data cache, used as a local data store with
-deduplication detection and update events.
-
-#### Parameters
-
-*   `data`   (optional, default `{}`)
-
-### filter
-
-filter the object using path with wildcards
-
-##### Parameters
-
-*   `path` &#x20;
-
-### filterByTopic
-
-filter the object using topic with wildcards
-
-##### Parameters
-
-*   `topic` &#x20;
-
-### forMatch
-
-for each topic match, invoke the callback with the value, topic, and match
-just like subscribePath
-
-##### Parameters
-
-*   `topic` &#x20;
-*   `callback` &#x20;
-
-### forPathMatch
-
-for each path match, invoke the callback with the value, topic, and match
-just like subscribePath
-
-##### Parameters
-
-*   `path` &#x20;
-*   `callback` &#x20;
-
-### get
-
-get sub-value at path, or entire object if none given
-
-##### Parameters
-
-*   `path`   (optional, default `[]`)
-
-### subscribe
-
-add a callback for change events
-
-##### Parameters
-
-*   `callback` &#x20;
-
-### subscribePath
-
-Subscribe to a specific topic only. Unlike in `subscribe`, here callback
-only receives the value.
-
-##### Parameters
-
-*   `topic` &#x20;
-*   `callback` &#x20;
-
-### subscribePathFlat
-
-Same as subscribePath but always get all changes in flat form
-
-##### Parameters
-
-*   `topic` &#x20;
-*   `callback` &#x20;
-
-### unsubscribe
-
-remove a callback
-
-##### Parameters
-
-*   `callback` &#x20;
-
-### update
-
-update the value at the given path (array or dot separated string)
-
-##### Parameters
-
-*   `path` &#x20;
-*   `value` &#x20;
-*   `tags` &#x20;
-
-### updateFromArray
-
-update the object with the given value at the given path, remove empty;
-return the flat changes (see toFlatObject). Add `tags` to updates to mark
-them somehow based on the context, e.g., so that some subscriptions can choose
-to ignore updates with a certain tag.
-
-##### Parameters
-
-*   `path` &#x20;
-*   `value` &#x20;
-*   `tags`   (optional, default `{}`)
-
-### updateFromModifier
-
-update data from a modifier object where keys are topic names to be
-interpreted as paths, and values are the values to set
-
-##### Parameters
-
-*   `modifier` &#x20;
-*   `tags` &#x20;
-
-### updateFromTopic
-
-set value from the given topic (with or without leading or trailing slash)
-
-##### Parameters
-
-*   `topic` &#x20;
-*   `value` &#x20;
-*   `tags` &#x20;
-
-## ErrorBoundary
-
-**Extends React.Component**
-
-A simple error boundary. Usage: <ErrorBoundary message="Something went wrong"> <SomeFlakyComponent /> </ErrorBoundary>
-
-#### Parameters
-
-*   `props` &#x20;
-
-## MqttSync
-
-A class that combines DataCache and MQTT to implement a data synchronization
-feature over the latter. Relies on retained messages in mqtt for persistence.
-
-#### Parameters
-
-*   `$0` **[Object][1]**&#x20;
-
-    *   `$0.mqttClient` &#x20;
-    *   `$0.onChange` &#x20;
-    *   `$0.ignoreRetain` &#x20;
-    *   `$0.migrate` &#x20;
-    *   `$0.onReady` &#x20;
-    *   `$0.sliceTopic` &#x20;
-
-### beforeDisconnect
-
-Run all registered hooks before disconnecting
-
-### clear
-
-Delete all retained messages in a certain topic prefix, waiting for
-a mqtt broker heartbeat to collect existing retained. Use with care, never
-delete topics not owned by us. Harmless within capabilities, which are
-namespaced already.
-
-`options.filter(topic)`: a function that can be provided to further,
-programmatically filter the set of topics to clear, e.g., to onlt clear
-topics of old versions.
-
-Note: This may not yet work in robot-capabilities, since the subscription
-prefix and received topic prefix don't match (the device prefix is added to
-subscription by localMQTT.
-
-##### Parameters
-
-*   `prefixes` &#x20;
-*   `callback`   (optional, default `undefined`)
-*   `options`   (optional, default `{}`)
-
-### clearThrottle
-
-clear the set throttling delay
-
-### isPublished
-
-Check whether we are publishing the given topic in a non-atomic way.
-This is used to determine whether to store the published value or not.
-
-##### Parameters
-
-*   `topic` &#x20;
-
-### isSubscribed
-
-check whether we are subscribed to the given topic
-
-##### Parameters
-
-*   `topic` &#x20;
-
-### migrate
-
-Migrate a list of {topic, newVersion, transform}. The version number in
-topic will be ignored, and all versions' values will be merged, applied in
-order, such that the latest version is applied last.
-
-##### Parameters
-
-*   `list` &#x20;
-*   `onReady`   (optional, default `undefined`)
-
-### onBeforeDisconnect
-
-register a new hook to be called before disconnecting
-
-##### Parameters
-
-*   `fn` &#x20;
-
-### publish
-
-Register a listener for path in data. Make sure to populate the data
-before calling this or set the data all at once afterwards.
-
-With option "atomic" this will always send the whole sub-document,
-not flat changes. Useful, e.g., for desiredPackages, see
-[https://github.com/chfritz/transitive/issues/85][2].
-
-##### Parameters
-
-*   `topic` &#x20;
-*   `options`   (optional, default `{atomic:false}`)
-
-Returns **any** true if publication added (false, e.g., when already present)
-
-### publishAtLevel
-
-Publish all values at the given level of the given object under the given
-topic (plus sub-key, of course).
-TODO: Is this OK, or do we need to go through this.publish?
-
-##### Parameters
-
-*   `topic` &#x20;
-*   `value` &#x20;
-*   `level` &#x20;
-
-### setThrottle
-
-set min delay between processing of queue
-
-##### Parameters
-
-*   `delay` &#x20;
-
-### subscribe
-
-Subscribe to the given topic (and all sub-topics). The callback will
-indicate success/failure, *not* a message on the topic.
-
-##### Parameters
-
-*   `topic` &#x20;
-*   `callback`   (optional, default `noop`)
-
-### waitForHeartbeatOnce
-
-register a callback for the next heartbeat from the broker
-
-##### Parameters
-
-*   `callback` &#x20;
-
-### heartbeatWaitersOnce
-
-List of callbacks waiting for next heartbeat, gets purged with each
-heartbeat
-
-### publishedMessages
-
-Store messages retained on mqtt so we can publish what is necessary to
-achieve the "should-be" state. Note that we cannot use a structured document
-for storing these publishedMessages since we need to be able to store separate
-values at non-leaf nodes in the object (just like mqtt, where you can have
-/a/b = 1 and /a/b/c = 1 at the same time). Note: not used in atomic mode.
-
-### publishQueue
-
-The order in which we send retained messages matters, which is why we use
-a queue for sending things. Note that we here use the property of Map that it
-remembers insertion order of keys.
-
-### subscribedPaths
-
-Directory of paths we've subscribed to in this class; this matters
-because the same mqtt client may have subscriptions to paths that we don't
-care to store (sync).
-
-## clone
-
-clone a mqtt payload, if necessary
-
-#### Parameters
-
-*   `payload` &#x20;
-
-## clone
-
-Deep-clone the given object. All functionality is lost, just data is kept.
-
-#### Parameters
-
-*   `obj` &#x20;
-
-## Code
-
-reusable component for showing code
-
-#### Parameters
-
-*   `$0` **[Object][1]**&#x20;
-
-    *   `$0.children` &#x20;
-
-## componentPermitsRefs
-
-whether or not the given react component allows refs, i.e., is either
-a functional component wrapped with forwardRef or a class component
-
-#### Parameters
-
-*   `Component` &#x20;
-
-## createWebComponent
-
-Create a WebComponent from the given react component and name that is
-reactive to the given attributes (if any).
-
-#### Parameters
-
-*   `Component` &#x20;
-*   `name` &#x20;
-*   `reactiveAttributes`   (optional, default `[]`)
-*   `version`   (optional, default `'0.0.0'`)
-*   `options`   (optional, default `{}`)
-
-## dropWildcardIds
-
-reduce wildcards with Ids, such as `+sessionId`, to just +
-
-#### Parameters
-
-*   `x` &#x20;
-
-## ensureHashSuffix
-
-return new string that ends in /# for sure
-
-#### Parameters
-
-*   `topic` &#x20;
-
-## fetchJson
-
-get or post (if body given) json
-
-#### Parameters
-
-*   `url` &#x20;
-*   `callback` &#x20;
-*   `options`   (optional, default `{}`)
-
-## forMatchIterator
-
-Iterate through the object and invoke callback for each match of path (with
-named wildcards)
-
-#### Parameters
-
-*   `obj` &#x20;
-*   `path` &#x20;
-*   `callback` &#x20;
-*   `pathSoFar`   (optional, default `[]`)
-*   `matchSoFar`   (optional, default `{}`)
-
-## getLogger
-
-get a new logger; call with a name, e.g., `module.id`
-
-## isPrefixOf
-
-prefixArray is a prefix of the array
-
-#### Parameters
-
-*   `prefixArray` &#x20;
-*   `array` &#x20;
-
-## isSubTopicOf
-
-sub is a strict sub-topic of parent, and in particular not equal
-
-#### Parameters
-
-*   `sub` &#x20;
-*   `parent` &#x20;
-
-## LevelBadge
-
-The right badge for the level
-
-#### Parameters
-
-*   `$0` **[Object][1]**&#x20;
-
-    *   `$0.level` &#x20;
-
-## mergeVersions
-
-given an object where the keys are versions, merge this into one object
-where the latest version of each subfield overwrites any previous
-
-#### Parameters
-
-*   `versionsObject` &#x20;
-*   `subTopic`   (optional, default `undefined`)
-*   `options`   (optional, default `{}`)
-
-## mqttClearRetained
-
-delete all retained messages in a certain topic prefix, waiting for
-a given delay to collect existing retained. Use with care, never delete topics
-not owned by us. Harmless within capabilities, which are namespaced already.
-
-#### Parameters
-
-*   `mqttClient` &#x20;
-*   `prefixes` &#x20;
-*   `callback` &#x20;
-*   `delay`   (optional, default `1000`)
-
-## oneDown
-
-called each time one item is done
-
-## parseCookie
-
-parse document cookies
-
-#### Parameters
-
-*   `str` &#x20;
-
-## parseMQTTTopic
-
-parse an MQTT topic according to our topic schema
-
-#### Parameters
-
-*   `topic` &#x20;
-
-## parseMQTTUsername
-
-parse usernames used in MQTT
-
-#### Parameters
-
-*   `username` &#x20;
-
-## pathToTopic
-
-convert a path array to mqtt topic; reduces +id identifiers to +
-
-#### Parameters
-
-*   `pathArray` &#x20;
-
-## resolveDoubleSlashes
-
-given a path, replace any double slashes, '//', with single ones
-
-#### Parameters
-
-*   `path` &#x20;
-
-## selectFromObject
-
-given an object and a path with wildcards (\* and +), *modify* the object
-to only contain elements matched by the path, e.g.,
-{a: {b: 1, c: 2}, d: 2} and \['a','+'] would give {a: {b: 1, c: 2}}
-
-#### Parameters
-
-*   `obj` **[object][1]** The object to select from
-*   `path` **[array][3]** An array specifying the path to select, potentially
-    containing mqtt wildcards ('+').
-
-## setFromPath
-
-Like \_.set but without arrays. This allows using numbers as keys.
-
-#### Parameters
-
-*   `obj` &#x20;
-*   `path` &#x20;
-*   `value` &#x20;
-
-## toFlatObject
-
-given an object, return a new object where all sub-objects are
-replaced by topic-values, e.g.:
-{a: {b: 1, c: 2}, d: 3}   ->   {'/a/b': 1, '/a/c': 2, d: 3}
-Note: not idempotent!
-{'/a/b': 1, '/a/c': 2, d: 3}  -> {'%2Fa%2Fb': 1, '%2Fa%2Fc': 2, d: 3}
-
-#### Parameters
-
-*   `obj` &#x20;
-*   `prefix`   (optional, default `[]`)
-*   `rtv`   (optional, default `{}`)
-
-## topicMatch
-
-match a slash-separated topic with a selector using +XYZ for (named)
-wildcards. Return the matching result.
-
-#### Parameters
-
-*   `selector` &#x20;
-*   `topic` &#x20;
-
-## topicToPath
-
-convert topic to path array
-
-#### Parameters
-
-*   `topic` &#x20;
-
-## tryJSONParse
-
-try parsing JSON, return null if unsuccessful
-
-#### Parameters
-
-*   `string` &#x20;
-
-## unset
-
-Unset the topic in that obj, and clean up parent if empty, recursively.
-Return the path to the removed node.
-
-#### Parameters
-
-*   `obj` &#x20;
-*   `path` &#x20;
-
-## updateObject
-
-given a modifier {"a/b/c": "xyz"} update the object `obj` such that
-obj.a.b.c = "xyz"
-
-#### Parameters
-
-*   `obj` &#x20;
-*   `modifier` &#x20;
-
-## useMqttSync
-
-hook for using MqttSync in React
-
-#### Parameters
-
-*   `$0` **[Object][1]**&#x20;
-
-    *   `$0.jwt` &#x20;
-    *   `$0.id` &#x20;
-    *   `$0.mqttUrl` &#x20;
-
-## useTransitive
-
-Hook for using Transitive in React. Connects to MQTT, establishes sync, and
-exposes reactive `data` state variable.
-
-#### Parameters
-
-*   `$0` **[Object][1]**&#x20;
-
-    *   `$0.jwt` &#x20;
-    *   `$0.id` &#x20;
-    *   `$0.host` &#x20;
-    *   `$0.ssl` &#x20;
-    *   `$0.capability` &#x20;
-    *   `$0.versionNS` &#x20;
-
-## versionCompare
-
-Compare to version strings. Return -1 if a is lower than b,
-0 if they are equal, and 1 otherwise. If either is not a complete version,
-e.g., 2.0, interpret it as a range and use its minimum version for the
-comparison. Hence, 2.0 < 2.0.1.
-
-#### Parameters
-
-*   `a` &#x20;
-*   `b` &#x20;
-
-## visit
-
-reusable visitor pattern: iteratively visits all nodes in the tree
-described by `object`, where `childField` indicates the child-of predicate.
-
-#### Parameters
-
-*   `object` &#x20;
-*   `childField` &#x20;
-*   `visitor` &#x20;
-
-## wait
-
-wait for delay ms, usable in async functions
-
-#### Parameters
-
-*   `delay` &#x20;
-
-## create
-
-#### Parameters
-
-*   `wrapper` **JSX.Element** : the wrapper component class to be instantiated and wrapped
-*   `tagName` **[string][4]** The name of the web component. Has to be minus "-" delimited.
-*   `useShadowDom` **[boolean][5]** If the value is set to "true" the web component will use the `shadowDom`. The default value is true. (optional, default `true`)
-*   `observedAttributes` **[Array][3]<[string][4]>** The observed attributes of the web component (optional, default `[]`)
-*   `compRef`   (optional, default `undefined`)
-
-## extractAttributes
-
-Takes in a node attributes map and returns an object with camelCased
-properties and values
-
-#### Parameters
-
-*   `nodeMap` &#x20;
-
-Returns **{}**&#x20;
-
-## getStyleElementsFromReactWebComponentStyleLoader
-
-An optional library which is conditionally added
-
-Returns **\[]**&#x20;
-
-## setAll
-
-convenience function to set all loggers to the given level
-
-#### Parameters
-
-*   `level` &#x20;
-
-## setConfig
-
-method exposed to the wrapped component via prop that allows setting
-the "config" state variable inside the wrapper (not the component
-itself). This config is retrieved by the portal for inclusion in the
-embedding instructions.
-
-#### Parameters
-
-*   `config` &#x20;
-
-## setOnDisconnect
-
-function used by `Component` to register a onDisconnect handler
-
-#### Parameters
-
-*   `fn` &#x20;
-
-## webComponentAttributeChanged
-
-Note this relies on the changes made in
-github:amay0048/react-web-component#780950800e2962f45f0f029be618bb8b84610c89
-that we used in our copy.
-TODO: move this into our copy, i.e., do it internally to react-web-component
-and update props.
-
-#### Parameters
-
-*   `name` &#x20;
-*   `oldValue` &#x20;
-*   `newValue` &#x20;
-
-[1]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
-
-[2]: https://github.com/chfritz/transitive/issues/85
-
-[3]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
-
-[4]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
-
-[5]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean