@transitive-sdk/utils-web 0.3.0

package/client.js

@@ -0,0 +1,40 @@
+
+// It is OK to use paths outside of this package because webpack will bundle them
+export * from '../common/common.js';
+
+export const decodeJWT = (jwt) => JSON.parse(atob(jwt.split('.')[1]));
+
+/** parse document cookies */
+export const parseCookie = str =>
+  str.split(';')
+    .map(v => v.split('='))
+    .reduce((acc, v) => {
+      acc[decodeURIComponent(v[0].trim())] =
+        v[1] && decodeURIComponent(v[1].trim());
+      return acc;
+    }, {});
+
+/* get or post (if body given) json */
+export const fetchJson = (url, callback, options = {}) => {
+  fetch(url, {
+    method: options.method || (options.body ? 'post' : 'get'),
+    mode: 'cors',
+    cache: 'no-cache',
+    // Maybe we'll need this (when embedding)?
+    // credentials: 'same-origin', // include, *same-origin, omit
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    redirect: 'follow',
+    referrerPolicy: 'no-referrer',
+    body: options.body ? JSON.stringify(options.body) : undefined
+  }).then(res => {
+    if (!res.ok) {
+      throw new Error(`fetching ${url} failed: ${res.status} ${res.statusText}`)
+    }
+    return res.json();
+  }).then(data => callback(null, data))
+    .catch((error) => callback(`error: ${error}`));
+};
+
+export const whoami = '@transitive-robotics/utils-web';

package/dist/index.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _shared = require("./shared.jsx");
+
+Object.keys(_shared).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _shared[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _shared[key];
+    }
+  });
+});
+
+var _hooks = require("./hooks.jsx");
+
+Object.keys(_hooks).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _hooks[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _hooks[key];
+    }
+  });
+});

package/dist/utils-web.js

@@ -0,0 +1 @@
+(()=>{var e={890:(e,t,n)=>{"use strict";function r(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 o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e){return i="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},i(e)}var u=n(362),a=u.DataCache,c=u.mqttParsePayload,s=u.pathMatch,l=u.topicToPath,f=u.pathToTopic,p=u.toFlatObject,d=u.getLogger,h=n(517),b=d(e.id||"MqttSync"),y="$SYS/broker/uptime",v=function(){},m=function(e){return e.endsWith("/#")?e:e.endsWith("/")?e.concat("#"):e.concat("/#")},g=function(){function e(t){var n=this,r=t.mqttClient,i=t.onChange,u=t.ignoreRetain;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),o(this,"data",new a),o(this,"subscribedPaths",{}),o(this,"publishedPaths",{}),o(this,"publishedMessages",{}),o(this,"publishQueue",[]),o(this,"heartbeatWaitersOnce",[]),this.mqtt=r,this.mqtt.on("message",(function(e,t,r){if(b.debug("got message",e,t&&t.toString(),r.retain),e==y)n.initialHeartbeat?(n.heartbeatWaitersOnce.forEach((function(e){return e()})),n.heartbeatWaitersOnce=[]):n.initialHeartbeat=!0;else if(r.retain||u){b.debug("processing message",e,t&&t.toString());var o=c(t);if(n.isPublished(e))n.publishedMessages[e]=o;else if(n.isSubscribed(e)){b.debug("applying received update",e,o);var a=n.data.update(e,o);i&&Object.keys(a).length>0&&i(a)}}})),this.mqtt.subscribe(y,{rap:!0},b.debug)}var t,n;return t=e,n=[{key:"waitForHeartbeatOnce",value:function(e){this.heartbeatWaitersOnce.push(e)}},{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]:v;if(e=m(e),this.subscribedPaths[e])return b.debug("already subscribed to",e),void n();this.mqtt.subscribe(e,{rap:!0},(function(r,o){b.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))}))}},{key:"_actuallyPublish",value:function(e,t){var n=this;return b.debug("actually publishing",e,t),new Promise((function(r,o){return n.mqtt.publish(e,null==t?null:JSON.stringify(t),{retain:!0},(function(e){e?o(e):r()}))}))}},{key:"_processQueue_rec",value:function(e){var t=this;if(this.publishQueue.length>0){var n=this.publishQueue.shift(),r=n.topic,o=n.value;this._actuallyPublish(r,o).then((function(){return t._processQueue_rec(e)}))}else e()}},{key:"_processQueue",value:function(){var e=this;this._processing||(this._processing=!0,this._processQueue_rec((function(){return e._processing=!1})))}},{key:"_enqueue",value:function(e,t){var n;b.debug("enqueuing",e,t),this.publishQueue.push({topic:e,value:t}),this._processQueue(),null==t?delete this.publishedMessages[e]:this.publishedMessages[e]="object"==i(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=m(e),!h.isEqual(this.publishedPaths[e],n)&&(this.publishedPaths[e]=n,n.atomic?(this.data.subscribePath(e,(function(n,r,o){b.debug("processing change (atomic)",r,n,e);var i=e.slice(0,e.length-2),u=f(l(r).slice(0,l(i).length));t._enqueue(u,t.data.getByTopic(u))})),!0):(this.mqtt.subscribe(e),void this.data.subscribePath(e,(function(e,n){return b.debug("processing change",n,e),h.each(t.publishedMessages,(function(e,r){if(b.trace("oldKey",r),r==n)return!0;if(r.startsWith(n)&&t._enqueue(r,null),n.startsWith(r)){t._enqueue(r,null);var o=p(e);h.each(o,(function(e,n){var o="".concat(r).concat(n);t._enqueue(o,e)}))}})),t._enqueue(n,e),!0}))))}}],n&&r(t.prototype,n),e}();e.exports=g},362:(e,t,n)=>{function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}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){!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 u(e,t){return function(e,t){return t.get?t.get.call(e):t.value}(e,c(e,t,"get"))}function a(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,c(e,t,"set"),n),n}function c(e,t,n){if(!t.has(e))throw new TypeError("attempted to "+n+" private field on non-instance");return t.get(e)}function s(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var l=n(13),f={get:n(712),set:n(298),unset:n(305),forEach:n(848),map:n(707),isEmpty:n(699),eq:n(113),isPlainObject:n(452)},p=n(316);p.setAll=function(e){return Object.values(p.getLoggers()).forEach((function(t){return t.setLevel(e)}))};var d=function e(t,n){if(n&&0!=n.length){f.unset(t,n);var r=n.slice(0,-1),o=0==r.length?t:f.get(t,r);return f.isEmpty(o)?e(t,r):n}},h=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 f.forEach(t,(function(t,o){var i=n.concat([String(o)]);(f.isPlainObject(t)||t instanceof Array)&&null!==t?e(t,i,r):r[y(i)]=t})),r},b=function e(t,n){if(0!=n.length){var r=n[0];if(r)for(var o in t)o!=r&&"*"!=r&&"+"!=r?delete t[o]:e(t[o],n.slice(1))}},y=function(e){return"/".concat(e.map((function(e){return e.startsWith("+")?"+":e})).join("/"))},v=function(e){var t=e.split("/");return t.length>0&&0==t[0].length&&t.shift(),t.length>0&&0==t[t.length-1].length&&t.pop(),t},m=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 r=e(t.slice(1),n.slice(1));return r&&Object.assign(s({},t[0].slice(1),n[0]),r)}return!1}(e.split("/"),t.split("/"))},g=new WeakMap,w=new WeakMap,S=function(){function e(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};r(this,e),i(this,g,{writable:!0,value:{}}),i(this,w,{writable:!0,value:[]}),a(this,g,t)}var t,n;return t=e,n=[{key:"updateFromArray",value:function(e,t){var n=f.get(u(this,g),e);if(null==t){if(null==n)return{};d(u(this,g),e)}else{if(f.eq(n,t))return{};f.set(u(this,g),e,t)}var r=h(s({},e.join("/"),t)),o=y(e);return u(this,w).forEach((function(e){return e(s({},o,t))})),r}},{key:"update",value:function(e,t){if("string"==typeof e)return this.updateFromTopic(e,t);if(e instanceof Array)return this.updateFromArray(e,t);throw new Error("unrecognized path expression")}},{key:"updateFromTopic",value:function(e,t){return this.updateFromArray(v(e),t)}},{key:"updateFromModifier",value:function(e){var t=this;return f.map(e,(function(e,n){return t.updateFromTopic(n,e)}))}},{key:"subscribe",value:function(e){u(this,w).push(e)}},{key:"subscribePath",value:function(e,t){u(this,w).push((function(n){f.forEach(n,(function(n,r){var o=m(e,r);o&&t(n,r,o)}))}))}},{key:"unsubscribe",value:function(e){a(this,w,u(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?u(this,g):f.get(u(this,g),e)}},{key:"getByTopic",value:function(e){return this.get(v(e))}},{key:"filter",value:function(e){var t=JSON.parse(JSON.stringify(this.get()));return b(t,e),t}}],n&&o(t.prototype,n),e}(),O=l;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=e.split("/");return{organization:t[1],device:t[2],capabilityScope:t[3],capabilityName:t[4],capability:"".concat(t[3],"/").concat(t[4]),version:t[5],sub:t.slice(6)}},updateObject:function(e,t){return f.forEach(t,(function(t,n){var r=n.split("/").slice(1);null==t?d(e,r):f.set(e,r,t)})),e},DataCache:S,pathToTopic:y,topicToPath:v,toFlatObject:h,mqttTopicMatch:function(e,t){return function e(t,n){return 0==n.length&&0==t.length||!(0==n.length&&t.length>0)&&("#"==n[0]||!(n.length>0&&0==t.length)&&("+"==n[0]||n[0]==t[0])&&e(t.slice(1),n.slice(1)))}(e.split("/"),t.split("/"))},pathMatch:m,mqttParsePayload:function(e){return 0==e.length?null:JSON.parse(e.toString("utf-8"))},getRandomId:function(){return Math.random().toString(36).slice(2)},versionCompare:O,loglevel:p,getLogger:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"?",t=String(e).split("/").slice(-1)[0],n=p.getLogger(t),r=n.methodFactory;return n.methodFactory=function(e,n,o){var i=r(e,n,o);if(r.patched)return i;r.patched=!0;var u="[".concat(t,", ").concat(e,"]");return function(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];return i.apply(void 0,[u].concat(t))}},n}}},368:(e,t,n)=>{"use strict";n.r(t),n.d(t,{decodeJWT:()=>i,parseCookie:()=>u,fetchJson:()=>a,whoami:()=>c});var r=n(362),o={};for(const e in r)["default","decodeJWT","parseCookie","fetchJson","whoami"].indexOf(e)<0&&(o[e]=()=>r[e]);n.d(t,o);var i=function(e){return JSON.parse(atob(e.split(".")[1]))},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}),{})},a=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(t){if(!t.ok)throw new Error("fetching ".concat(e," failed: ").concat(t.status," ").concat(t.statusText));return t.json()})).then((function(e){return t(null,e)})).catch((function(e){return t("error: ".concat(e))}))},c="@transitive-robotics/utils-web"},442:(e,t,n)=>{"use strict";n.d(t,{H:()=>p});var r=n(689),o=n.n(r),i=n(368);const u=require("mqtt-browser");var a=n.n(u);function c(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=[],u=!0,a=!1;try{for(n=n.call(e);!(u=(r=n.next()).done)&&(i.push(r.value),!t||i.length!==t);u=!0);}catch(e){a=!0,o=e}finally{try{u||null==n.return||n.return()}finally{if(a)throw o}}return i}}(e,t)||function(e,t){if(e){if("string"==typeof e)return s(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)?s(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 s(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 l=n(890),f=(0,i.getLogger)("utils-web/hooks"),p=function(e){var t=e.jwt,n=e.id,u=e.mqttUrl,s=c((0,r.useState)("connecting"),2),p=s[0],d=s[1],h=c((0,r.useState)(),2),b=h[0],y=h[1],v=c((0,r.useState)({}),2),m=v[0],g=v[1];return(0,r.useEffect)((function(){var e=(0,i.decodeJWT)(t),r=a().connect(u,{username:JSON.stringify({id:n,payload:e}),password:t});return r.on("connect",(function(){f.debug("connected");var e=new l({mqttClient:r,onChange:function(){g(JSON.parse(JSON.stringify(e.data.get())))},ignoreRetain:!0});y(e),d("connected")})),r.on("error",(function(e){f.error(e),d("error: ".concat(e))})),function(){f.info("cleaning up useMQTTSync"),r.end()}}),[t,n]),{status:p,ready:"connected"==p,StatusComponent:function(){return o().createElement("div",null,p)},mqttSync:b,data:m}}},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,u={},a=(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)})),c=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 u,a=!0,c=!1;return{s:function(){r=r.call(e)},n:function(){var e=r.next();return a=e.done,e},e:function(e){c=!0,u=e},f:function(){try{a||null==r.return||r.return()}finally{if(c)throw u}}}}(a);try{for(c.s();!(o=c.n()).done;){r=o.value;var s=Object.keys(r)[0];u[s.replace(/-([a-z])/g,(function(e){return e[1].toUpperCase()}))]=r[s]}}catch(e){c.e(e)}finally{c.f()}return u}},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 u(e,t,n){return t&&i(e.prototype,t),n&&i(e,n),e}function a(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}}),t&&d(e,t)}function c(e){var t=p();return function(){var n,r=h(e);if(t){var o=h(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 function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e)}function l(e){var t="function"==typeof Map?new Map:void 0;return l=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 f(e,arguments,h(this).constructor)}return r.prototype=Object.create(e.prototype,{constructor:{value:r,enumerable:!1,writable:!0,configurable:!0}}),d(r,e)},l(e)}function f(e,t,n){return f=p()?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},f.apply(null,arguments)}function p(){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 h(e){return h=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)},h(e)}var b=n(689),y=n(405),v=n(430),m=n(899),g=n(335);n(622),n(268),e.exports={create:function(e,t){var n,r=!(arguments.length>2&&void 0!==arguments[2])||arguments[2],i=arguments.length>3&&void 0!==arguments[3]?arguments[3]:[],s={attachedCallback:"webComponentAttached",connectedCallback:"webComponentConnected",disconnectedCallback:"webComponentDisconnected",attributeChangedCallback:"webComponentAttributeChanged",adoptedCallback:"webComponentAdopted"};function f(e){n.webComponentConstructed&&n.webComponentConstructed.apply(n,[e])}function p(e,t){var r=t||[],o=s[e];o&&n&&n[o]&&n[o].apply(n,r)}var d=function(t){a(l,t);var s=c(l);function l(){return o(this,l),s.apply(this,arguments)}return u(l,[{key:"connectedCallback",value:function(){var t=this,o=t;if(r){var i=t.attachShadow({mode:"open"});o=document.createElement("div"),m().forEach((function(e){i.appendChild(e.cloneNode(i))})),i.appendChild(o),v(i)}y.render(b.cloneElement(e,g(t)),o,(function(){n=this,f(t),p("connectedCallback")}))}},{key:"disconnectedCallback",value:function(){p("disconnectedCallback")}},{key:"attributeChangedCallback",value:function(e,t,n,r){p("attributeChangedCallback",[e,t,n,r])}},{key:"adoptedCallback",value:function(e,t){p("adoptedCallback",[e,t])}}],[{key:"observedAttributes",get:function(){return i}}]),l}(l(HTMLElement));customElements.define(t,d)}}},11:(e,t,n)=>{"use strict";n.d(t,{EK:()=>j,ZM:()=>k,U5:()=>E,B7:()=>P,eZ:()=>q});var r=n(689),o=n.n(r);const i=require("react-bootstrap");var u=n(271),a=n.n(u);function c(e){return c="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},c(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){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function f(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 p(e,t,n){return t&&f(e.prototype,t),n&&f(e,n),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}}),t&&h(e,t)}function h(e,t){return h=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e},h(e,t)}function b(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 y(this,n)}}function y(e,t){if(t&&("object"===c(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return v(e)}function v(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 g(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,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=[],u=!0,a=!1;try{for(n=n.call(e);!(u=(r=n.next()).done)&&(i.push(r.value),!t||i.length!==t);u=!0);}catch(e){a=!0,o=e}finally{try{u||null==n.return||n.return()}finally{if(a)throw o}}return i}}(e,t)||function(e,t){if(e){if("string"==typeof e)return S(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)?S(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 S(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 O={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"}},C=[o().createElement(i.Badge,{bg:"success",style:O.badge},"OK"),o().createElement(i.Badge,{bg:"warning",style:O.badge},"Warn"),o().createElement(i.Badge,{bg:"danger",style:O.badge},"Error"),o().createElement(i.Badge,{bg:"secondary",style:O.badge},"Stale")],E=function(e){var t=e.level;return C[t]||o().createElement("span",null,t)},j=function(e){var t=e.children;return o().createElement("pre",{style:O.code},t)},k=function(e){var t=e.children;return o().createElement("tt",{style:O.inlineCode},t)},T={},P=function(e){var t=e.duration,n=e.onTimeout,u=e.onStart,a=e.setOnDisconnect,c=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),d=p[0],h=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,h(!1)};(0,r.useEffect)((function(){var e;l>0&&!d&&(e=T[b],console.log(e,T,l),!e&&l>0&&(h(!0),T[b]=setInterval((function(){return f((function(e){if(--e>0)return e;y()}))}),1e3),u&&setTimeout(u,1)))}),[l]),(0,r.useEffect)((function(){return y}),[]),a&&a((function(){y()}));var v=function(){return f(t)};return l>0?o().createElement("div",null,o().Children.map(c,(function(e){return o().cloneElement(e,{resetTimer:v})})),l<.5*t&&o().createElement("div",null,"Timeout in: ",l," seconds")):o().createElement("div",null,"Timed out. ",o().createElement(i.Button,{onClick:v},"Resume"))},q=function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:[],r=function(t){d(r,t);var n=b(r);function r(){var e;l(this,r);for(var t=arguments.length,o=new Array(t),i=0;i<t;i++)o[i]=arguments[i];return g(v(e=n.call.apply(n,[this].concat(o))),"onDisconnect",null),g(v(e),"state",{}),e}return p(r,[{key:"setOnDisconnect",value:function(e){this.onDisconnect=e}},{key:"webComponentDisconnected",value:function(){this.onDisconnect&&this.onDisconnect(),this.setState({_disconnected:!0})}},{key:"webComponentAttributeChanged",value:function(e,t,n){var r=this.state;r[e]=n,this.setState(r)}},{key:"render",value:function(){return o().createElement("div",null,o().createElement("style",null,'@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css");'),!this.state._disconnected&&o().createElement(e,s({},this.state,this.props,{setOnDisconnect:this.setOnDisconnect.bind(this)})))}}]),r}(o().Component);a().create(o().createElement(r,null),t,!1,n)}},268:e=>{"use strict";e.exports=require("@webcomponents/custom-elements")},622:e=>{"use strict";e.exports=require("@webcomponents/shadydom")},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")},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")}},t={};function n(r){var o=t[r];if(void 0!==o)return o.exports;var i=t[r]={id: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,InlineCode:()=>e.ZM,LevelBadge:()=>e.U5,Timer:()=>e.B7,createWebComponent:()=>e.eZ,useMqttSync:()=>t.H});var e=n(11),t=n(442),o=n(368),i={};for(const e in o)["default","Code","InlineCode","LevelBadge","Timer","createWebComponent","useMqttSync"].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/hooks.jsx

@@ -0,0 +1,53 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import { decodeJWT, getLogger } from './client';
+// import MqttSync from '../MqttSync';
+const MqttSync = require('../common/MqttSync');
+import mqtt from 'mqtt-browser';
+const log = getLogger('utils-web/hooks');
+
+
+/** hook for using MqttSync in react */
+export const useMqttSync = ({jwt, id, mqttUrl}) => {
+  const [status, setStatus] = useState('connecting');
+  const [mqttSync, setMqttSync] = useState();
+  const [data, setData] = useState({});
+
+  useEffect(() => {
+      const payload = decodeJWT(jwt);
+      const client = mqtt.connect(mqttUrl, {
+        username: JSON.stringify({id, payload}),
+        password: jwt
+      });
+      client.on('connect', () => {
+        log.debug('connected');
+        const mqttSyncClient = new MqttSync({
+          mqttClient: client,
+          onChange: () => {
+            // log.debug('onChange', mqttSyncClient.data.get());
+            // Note: need to clone the object to force a reaction
+            setData(JSON.parse(JSON.stringify(mqttSyncClient.data.get())));
+          },
+          ignoreRetain: true
+        });
+        setMqttSync(mqttSyncClient);
+        setStatus('connected');
+      });
+      client.on('error', (error) => {
+        log.error(error);
+        setStatus(`error: ${error}`);
+      });
+
+      return () => {
+        log.info('cleaning up useMQTTSync');
+        client.end();
+      };
+    }, [jwt, id]);
+
+  return {
+    status,
+    ready: status == 'connected',
+    StatusComponent: () => <div>{status}</div>,
+    mqttSync, // Note: mqttSync.data is not reactive.
+    data, // This is a reactive data-source (to use meteor terminology).
+  };
+};

package/index.js

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

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@transitive-sdk/utils-web",
+  "version": "0.3.0",
+  "description": "Web utils for the Transitive framework",
+  "homepage": "https://transitiverobotics.com",
+  "author": {
+    "name" : "Christian Fritz",
+    "email" : "christian@transitiverobotics.com"
+  },
+  "keywords": [
+    "robotics"
+  ],
+  "license": "Apache-2.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "dist/utils-web.js",
+  "scripts": {
+    "test": "webpack serve -c webpack-test.config.js",
+    "build-test": "webpack -c webpack-test.config.js",
+    "prepare": "webpack --no-watch --mode=production"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.16.7",
+    "@webcomponents/custom-elements": "^1.2.1",
+    "@webcomponents/shadydom": "^1.4.3",
+    "bootstrap": "^4.6.0",
+    "jsonwebtoken": "^8.5.1",
+    "lodash": "^4.17.21",
+    "loglevel": "^1.8.0",
+    "mqtt-browser": "^4.2.7",
+    "react-shadow-dom-retarget-events": "^1.0.8",
+    "semver": "^7.3.5"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.13.8",
+    "@babel/plugin-proposal-class-properties": "^7.13.0",
+    "@babel/plugin-transform-runtime": "^7.16.10",
+    "@babel/preset-env": "^7.13.9",
+    "@babel/preset-react": "^7.12.10",
+    "babel-loader": "^8.2.2",
+    "css-loader": "^5.0.1",
+    "extract-loader": "^5.1.0",
+    "react": "^17.0.1",
+    "react-bootstrap": "^1.4.3",
+    "react-dom": "^17.0.1",
+    "react-web-component-style-loader": "^0.1.4-alpha",
+    "webpack": "^5.65.0",
+    "webpack-cli": "^4.9.1",
+    "webpack-dev-server": "^4.7.3",
+    "webpack-node-externals": "^3.0.0",
+    "websocket-stream": "^5.5.2"
+  }
+}

package/react-web-component/extractAttributes.js

@@ -0,0 +1,23 @@
+/**
+ * Takes in a node attributes map and returns an object with camelCased properties and values
+ * @param nodeMap
+ * @returns {{}}
+ */
+module.exports = function extractAttributes(nodeMap) {
+  if (!nodeMap.attributes) {
+    return {};
+  }
+
+  let obj = {};
+  let attribute;
+  const attributesAsNodeMap = [...nodeMap.attributes];
+  const attributes = attributesAsNodeMap.map((attribute) => ({ [attribute.name]: attribute.value }));
+
+  for (attribute of attributes) {
+    const key = Object.keys(attribute)[0];
+    const camelCasedKey = key.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+    obj[camelCasedKey] = attribute[key];
+  }
+
+  return obj;
+};

package/react-web-component/getStyleElementsFromReactWebComponentStyleLoader.js

@@ -0,0 +1,11 @@
+/**
+ * An optional library which is conditionally added
+ * @returns {[]}
+ */
+module.exports = () => {
+  try {
+    return require('react-web-component-style-loader/exports').styleElements;
+  } catch (e) {
+    return [];
+  }
+};

package/react-web-component/index.js

@@ -0,0 +1,89 @@
+const React = require('react');
+const ReactDOM = require('react-dom');
+const retargetEvents = require('react-shadow-dom-retarget-events');
+const getStyleElementsFromReactWebComponentStyleLoader = require('./getStyleElementsFromReactWebComponentStyleLoader');
+const extractAttributes = require('./extractAttributes');
+
+require('@webcomponents/shadydom');
+require('@webcomponents/custom-elements');
+
+module.exports = {
+  /**
+   * @param {JSX.Element} app
+   * @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.
+   * @param {string[]} observedAttributes - The observed attributes of the web component
+   */
+  create: (app, tagName, useShadowDom = true, observedAttributes = []) => {
+    let appInstance;
+
+    const lifeCycleHooks = {
+      attachedCallback: 'webComponentAttached',
+      connectedCallback: 'webComponentConnected',
+      disconnectedCallback: 'webComponentDisconnected',
+      attributeChangedCallback: 'webComponentAttributeChanged',
+      adoptedCallback: 'webComponentAdopted'
+    };
+
+    function callConstructorHook(webComponentInstance) {
+      if (appInstance['webComponentConstructed']) {
+        appInstance['webComponentConstructed'].apply(appInstance, [webComponentInstance])
+      }
+    }
+
+    function callLifeCycleHook(hook, params) {
+      const instanceParams = params || [];
+      const instanceMethod = lifeCycleHooks[hook];
+
+      if (instanceMethod && appInstance && appInstance[instanceMethod]) {
+        appInstance[instanceMethod].apply(appInstance, instanceParams);
+      }
+    }
+
+    const proto = class extends HTMLElement {
+      static get observedAttributes() {
+        return observedAttributes;
+      }
+      connectedCallback() {
+        const webComponentInstance = this;
+        let mountPoint = webComponentInstance;
+
+        if (useShadowDom) {
+          // Re-assign the webComponentInstance (this) to the newly created shadowRoot
+          const shadowRoot = webComponentInstance.attachShadow({ mode: 'open' });
+          // Re-assign the mountPoint to the newly created "div" element
+          mountPoint = document.createElement('div');
+
+          // Move all of the styles assigned to the react component inside of the shadowRoot.
+          // By default this is not used, only if the library is explicitly installed
+          const styles = getStyleElementsFromReactWebComponentStyleLoader();
+          styles.forEach((style) => {
+            shadowRoot.appendChild(style.cloneNode(shadowRoot));
+          });
+
+          shadowRoot.appendChild(mountPoint);
+
+          retargetEvents(shadowRoot);
+        }
+
+        ReactDOM.render(React.cloneElement(app, extractAttributes(webComponentInstance)) , mountPoint, function () {
+          appInstance = this;
+
+          callConstructorHook(webComponentInstance);
+          callLifeCycleHook('connectedCallback');
+        });
+      }
+      disconnectedCallback () {
+          callLifeCycleHook('disconnectedCallback');
+      }
+      attributeChangedCallback (attributeName, oldValue, newValue, namespace) {
+        callLifeCycleHook('attributeChangedCallback', [attributeName, oldValue, newValue, namespace]);
+      }
+      adoptedCallback (oldDocument, newDocument) {
+        callLifeCycleHook('adoptedCallback', [oldDocument, newDocument]);
+      }
+    }
+
+    customElements.define(tagName, proto);
+  },
+};

package/react-web-component/readme.md

@@ -0,0 +1,4 @@
+Copy of `src/dev` folder of
+https://github.com/amay0048/react-web-component/commit/780950800e2962f45f0f029be618bb8b84610c89
+
+By copying it, we avoid the extra react import that caused us to run into [Invalid hook call errors](https://reactjs.org/link/invalid-hook-call).

package/shared.jsx

@@ -0,0 +1,163 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import { Button, Accordion, AccordionContext, Card, Badge }
+from 'react-bootstrap';
+import ReactWebComponent from './react-web-component';
+
+import { parseCookie } from './client';
+
+const styles = {
+  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',
+  }
+};
+
+const levelBadges = [
+  <Badge bg="success" style={styles.badge}>OK</Badge>,
+  <Badge bg="warning" style={styles.badge}>Warn</Badge>,
+  <Badge bg="danger" style={styles.badge}>Error</Badge>,
+  <Badge bg="secondary" style={styles.badge}>Stale</Badge>,
+];
+
+/** The right badge for the level */
+export const LevelBadge = ({level}) => levelBadges[level] || <span>{level}</span>;
+
+/** reusable component for showing code */
+export const Code = ({children}) => <pre style={styles.code}>
+  {children}
+</pre>;
+
+export const InlineCode = ({children}) => <tt style={styles.inlineCode}>
+  {children}
+</tt>;
+
+
+const intervals = {};
+
+export const Timer = ({duration, onTimeout, onStart, setOnDisconnect, children}) => {
+  duration = duration || 60;
+  const [timer, setTimer] = useState(duration);
+  const [running, setRunning] = useState(false);
+  const id = useMemo(() => Math.random().toString(36).slice(2), []);
+
+  const stop = () => {
+    console.log('stopping timer for', id);
+    onTimeout && setTimeout(onTimeout, 1);
+    clearInterval(intervals[id]);
+    intervals[id] = null;
+    setRunning(false);
+  };
+
+  const startTimer = () => {
+    const interval = intervals[id];
+    console.log(interval, intervals, timer);
+    if (!interval && timer > 0) {
+      setRunning(true);
+      intervals[id] = setInterval(() =>
+        setTimer(t => {
+          if (--t > 0) {
+            return t;
+          } else {
+            stop();
+          }
+        }), 1000);
+      onStart && setTimeout(onStart, 1);
+    }
+
+    return stop;
+  };
+
+  useEffect(() => { timer > 0 && !running && startTimer() }, [timer]);
+
+  useEffect(() => stop, []);
+
+  setOnDisconnect && setOnDisconnect(() => {
+    // call on disconnect of the web component
+    stop()
+  });
+
+  const resetTimer = () => setTimer(duration);
+
+  return timer > 0 ?
+  <div>
+    { /** Inject prop into children to reset timer */
+      React.Children.map(children, (child) =>
+        React.cloneElement(child, {resetTimer})
+      )
+    }
+    {timer < duration * 0.5 && <div>Timeout in: {timer} seconds</div>}
+  </div>
+  :
+  <div>Timed out. <Button onClick={resetTimer}>
+      Resume
+    </Button>
+  </div>;
+};
+
+
+/** Create a WebComponent from the given react component and name that is
+    reactive to the given attributes (if any). */
+export const createWebComponent = (Component, name, reactiveAttributes = []) => {
+
+  class Wrapper extends React.Component {
+
+    onDisconnect = null;
+
+    // state = JSON.parse(JSON.stringify(this.props));
+    // state = this.props;
+    state = {};
+
+    /** function used by `Component` to register a onDisconnect handler */
+    setOnDisconnect(fn) {
+      this.onDisconnect = fn;
+    }
+
+    webComponentDisconnected() {
+      this.onDisconnect && this.onDisconnect();
+      // this ensures that the react component unmounts and all useEffect
+      // cleanups are called.
+      this.setState({_disconnected: true});
+    }
+
+    /**
+    Note this relies on the changed 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.
+    */
+    webComponentAttributeChanged(name, oldValue, newValue) {
+      // console.log('webComponentAttributeChanged', name, oldValue, newValue, this.props, this.state);
+      const newState = this.state;
+      newState[name] = newValue;
+      this.setState(newState);
+    }
+
+    render() {
+      // @import url("https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css");
+      return <div>
+        <style>
+          @import url("https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css");
+        </style>
+        {!this.state._disconnected &&
+          <Component
+            {...this.state}
+            {...this.props}
+            setOnDisconnect={this.setOnDisconnect.bind(this)}/>}
+      </div>;
+    }
+  };
+
+  ReactWebComponent.create(<Wrapper />, name, false, reactiveAttributes);
+};