@hopara/iframe 0.2.0 → 0.2.2

package/README.md

@@ -21,11 +21,11 @@ Using Hopara CDN:
 ### React
 ```js
 import React from 'react'
-import * as hopara from 'hopara'
+import Hopara from 'hopara'
 
 class MyComponent extends React.Component {
   componentDidMount(): void {
-    hopara.init({
+    Hopara.init({
       app: 'my-hopara-app',
       accessToken: 'my-hopara-token',
       targetElementId: 'my-target-element',
@@ -46,7 +46,7 @@ class MyComponent extends React.Component {
     <script src="https://statics.hopara.app/embedded/latest/client.js"></script>
     <script>
       document.addEventListener("DOMContentLoaded", function(){
-        hopara.init({
+        Hopara.init({
           app: 'my-hopara-app',
           accessToken: 'my-hopara-token',
           targetElementId: 'my-target-element',
@@ -64,18 +64,29 @@ class MyComponent extends React.Component {
 
 ### Init
 ```js
-hopara.init(config)
+Hopara.init(config)
 ```
 
 ### Hopara Config
-```js
+```typescript
 {
-  app: 'my-hopara-app',
-  accessToken: 'my-hopara-token',
-  // `targetElementId` is the DOM element id where Hopara should load
-  targetElementId: 'my-target-element',
-  // `tenant` parameter is optional
-  // sets which tenant hopara app should load, defaults to first of your user configured tenant
-  tenant: 'my-hopara-tenant'
+  // The app id
+  app: string
+
+  // The accessToken fetched from the auth API
+  accessToken: string
+
+  // Overwrites the data at render time
+  dataLoaders: DataLoader[] | undefined
+
+  // Provides a custom ways to update data
+  dataUpdaters: DataUpdaters[] | undefined
+
+  // The initial position to load the visualization
+  initialPosition: InitialPosition | undefined
+
+  // The initial row (e.g. asset) to load the visualization
+  initialRow: InitialRow | undefined
 }
-```
+```
+for more information about the initialization props go to our [@hopara/react](https://www.npmjs.com/package/@hopara/react) module

package/build/client.js

@@ -1 +1 @@
-(function webpackUniversalModuleDefinition(root,factory){if(typeof exports==="object"&&typeof module==="object")module.exports=factory();else if(typeof define==="function"&&define.amd)define([],factory);else if(typeof exports==="object")exports["hopara"]=factory();else root["hopara"]=factory()})(this,(function(){return function(modules){var installedModules={};function __webpack_require__(moduleId){if(installedModules[moduleId]){return installedModules[moduleId].exports}var module=installedModules[moduleId]={i:moduleId,l:false,exports:{}};modules[moduleId].call(module.exports,module,module.exports,__webpack_require__);module.l=true;return module.exports}__webpack_require__.m=modules;__webpack_require__.c=installedModules;__webpack_require__.d=function(exports,name,getter){if(!__webpack_require__.o(exports,name)){Object.defineProperty(exports,name,{enumerable:true,get:getter})}};__webpack_require__.r=function(exports){if(typeof Symbol!=="undefined"&&Symbol.toStringTag){Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"})}Object.defineProperty(exports,"__esModule",{value:true})};__webpack_require__.t=function(value,mode){if(mode&1)value=__webpack_require__(value);if(mode&8)return value;if(mode&4&&typeof value==="object"&&value&&value.__esModule)return value;var ns=Object.create(null);__webpack_require__.r(ns);Object.defineProperty(ns,"default",{enumerable:true,value});if(mode&2&&typeof value!="string")for(var key in value)__webpack_require__.d(ns,key,function(key){return value[key]}.bind(null,key));return ns};__webpack_require__.n=function(module){var getter=module&&module.__esModule?function getDefault(){return module["default"]}:function getModuleExports(){return module};__webpack_require__.d(getter,"a",getter);return getter};__webpack_require__.o=function(object,property){return Object.prototype.hasOwnProperty.call(object,property)};__webpack_require__.p="";return __webpack_require__(__webpack_require__.s=0)}([function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__);__webpack_require__.d(__webpack_exports__,"init",(function(){return init}));const createIframe=function(document,version){let debug=arguments.length>2&&arguments[2]!==undefined?arguments[2]:false;const iframeSrc=`https://statics.hopara.app/embedded/${version?version:"latest"}/index.html${debug?"?debug=true":""}`;const iframeStyle="background-color: transparent; border: 0px none transparent; padding: 0px; overflow: hidden; width: 100%; height: 100%;";const iframe=document.createElement("iframe");iframe.src=iframeSrc;iframe.style=iframeStyle;return iframe};const makeInit=config=>{const targetElement=document.getElementById(config.targetElementId);if(!targetElement)return console&&console.warn("Hopara: targetElement not found");const iframe=createIframe(document,config.version,config.debug);window.addEventListener("message",(event=>{if(event.data.__hopara__eventType__==="ready"){var _iframe$contentWindow;(_iframe$contentWindow=iframe.contentWindow)===null||_iframe$contentWindow===void 0?void 0:_iframe$contentWindow.postMessage(Object.assign(config,{__hopara__eventType__:"init"}),"*")}}));targetElement.appendChild(iframe)};const init=config=>{if(!config&&console){console.warn("Hopara: init config not present");return}if((!window||!window.document)&&console){console.warn("Hopara: window is not available");return}return makeInit(config)}}])}));
+(function webpackUniversalModuleDefinition(root,factory){if(typeof exports==="object"&&typeof module==="object")module.exports=factory();else if(typeof define==="function"&&define.amd)define([],factory);else{var a=factory();for(var i in a)(typeof exports==="object"?exports:root)[i]=a[i]}})(this,(function(){return function(modules){var installedModules={};function __webpack_require__(moduleId){if(installedModules[moduleId]){return installedModules[moduleId].exports}var module=installedModules[moduleId]={i:moduleId,l:false,exports:{}};modules[moduleId].call(module.exports,module,module.exports,__webpack_require__);module.l=true;return module.exports}__webpack_require__.m=modules;__webpack_require__.c=installedModules;__webpack_require__.d=function(exports,name,getter){if(!__webpack_require__.o(exports,name)){Object.defineProperty(exports,name,{enumerable:true,get:getter})}};__webpack_require__.r=function(exports){if(typeof Symbol!=="undefined"&&Symbol.toStringTag){Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"})}Object.defineProperty(exports,"__esModule",{value:true})};__webpack_require__.t=function(value,mode){if(mode&1)value=__webpack_require__(value);if(mode&8)return value;if(mode&4&&typeof value==="object"&&value&&value.__esModule)return value;var ns=Object.create(null);__webpack_require__.r(ns);Object.defineProperty(ns,"default",{enumerable:true,value});if(mode&2&&typeof value!="string")for(var key in value)__webpack_require__.d(ns,key,function(key){return value[key]}.bind(null,key));return ns};__webpack_require__.n=function(module){var getter=module&&module.__esModule?function getDefault(){return module["default"]}:function getModuleExports(){return module};__webpack_require__.d(getter,"a",getter);return getter};__webpack_require__.o=function(object,property){return Object.prototype.hasOwnProperty.call(object,property)};__webpack_require__.p="";return __webpack_require__(__webpack_require__.s=0)}([function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__);__webpack_require__.d(__webpack_exports__,"Hopara",(function(){return client_Hopara}));let EventType;(function(EventType){EventType["INIT"]="init";EventType["READY"]="ready";EventType["LOAD_DATA"]="loadData";EventType["LOAD_DATA_RESPONSE"]="loadDataResponse";EventType["UPDATE_DATA"]="updateData";EventType["UPDATE_DATA_RESPONSE"]="updateDataResponse"})(EventType||(EventType={}));const HOPARA_EVENT_TYPE="__hopara__eventType__";const isReadyEvent=event=>event.data[HOPARA_EVENT_TYPE]===EventType.READY;const isLoadDataEvent=event=>event.data[HOPARA_EVENT_TYPE]===EventType.LOAD_DATA;const isUpdateDataEvent=event=>event.data[HOPARA_EVENT_TYPE]===EventType.UPDATE_DATA;class EventEmitter_EventEmitter{static sendMessage(data,targetWindow){const target=targetWindow||window.parent||window.top;if(!window||window===target)return;target.postMessage(data,"*")}static ready(){this.sendMessage({[HOPARA_EVENT_TYPE]:EventType.READY})}static init(config,targetWindow){this.sendMessage(Object.assign(config,{[HOPARA_EVENT_TYPE]:EventType.INIT}),targetWindow)}static loadDataRequest(dataLoader,filterSet){this.sendMessage({[HOPARA_EVENT_TYPE]:EventType.LOAD_DATA,data:{name:dataLoader.name,source:dataLoader.source},filterSet})}static loadDataResponse(config,dataLoader,rows,targetWindow){this.sendMessage(Object.assign(config,{[HOPARA_EVENT_TYPE]:EventType.LOAD_DATA_RESPONSE},{data:{name:dataLoader.name,source:dataLoader.source},rows}),targetWindow)}static updateDataRequest(dataUpdater,newRow,oldRow,diff){this.sendMessage({[HOPARA_EVENT_TYPE]:EventType.UPDATE_DATA,data:{name:dataUpdater.name,source:dataUpdater.source},newRow,oldRow,diff})}}class client_Hopara{constructor(config){this.config=void 0;this.doInit=()=>{const targetElement=document.getElementById(this.config.targetElementId);if(!targetElement)return console&&console.warn("Hopara: targetElement not found");const iframe=this.createIframe();this.createListeners(iframe);targetElement.appendChild(iframe)};this.config=config}getIframeSrc(){const url=this.config.embeddedUrl?this.config.embeddedUrl:`https://statics.hopara.app/embedded/${this.config.version?this.config.version:"latest"}/index.html`;return`${url}${this.config.debug?"?debug=true":""}`}getIframeStyle(){return"background-color: transparent; border: 0px none transparent; padding: 0px; overflow: hidden; width: 100%; height: 100%;"}createIframe(){const iframe=document.createElement("iframe");iframe.src=this.getIframeSrc();iframe.style=this.getIframeStyle();return iframe}getCleanConfig(){var _this$config$dataLoad,_this$config$dataUpda;return{accessToken:this.config.accessToken,app:this.config.app,tenant:this.config.tenant,initialPosition:this.config.initialPosition,initialDataBrowserId:this.config.initialDataBrowserId,initialRowId:this.config.initialRowId,dataLoaders:(_this$config$dataLoad=this.config.dataLoaders)===null||_this$config$dataLoad===void 0?void 0:_this$config$dataLoad.map((dataLoader=>({name:dataLoader.name,source:dataLoader.source}))),dataUpdaters:(_this$config$dataUpda=this.config.dataUpdaters)===null||_this$config$dataUpda===void 0?void 0:_this$config$dataUpda.map((dataUpdater=>({name:dataUpdater.name,source:dataUpdater.source})))}}createListeners(iframe){window.addEventListener("message",(event=>{const targetWindow=iframe.contentWindow;if(!targetWindow)throw new Error("Hopara: targetWindow is not available");if(isReadyEvent(event)){return EventEmitter_EventEmitter.init(this.getCleanConfig(),targetWindow)}if(isLoadDataEvent(event)){var _this$config$dataLoad2;const dataLoader=(_this$config$dataLoad2=this.config.dataLoaders)===null||_this$config$dataLoad2===void 0?void 0:_this$config$dataLoad2.find((dataLoader=>dataLoader.name===event.data.data.name&&dataLoader.source===event.data.data.source));if(dataLoader)return dataLoader.loader(event.data.filterSet).then((data=>EventEmitter_EventEmitter.loadDataResponse(this.getCleanConfig(),dataLoader,data,targetWindow)))}if(isUpdateDataEvent(event)){var _this$config$dataUpda2;const dataUpdater=(_this$config$dataUpda2=this.config.dataUpdaters)===null||_this$config$dataUpda2===void 0?void 0:_this$config$dataUpda2.find((dataUpdater=>dataUpdater.name===event.data.data.name&&dataUpdater.source===event.data.data.source));if(dataUpdater)return dataUpdater.updater(event.data.newRow,event.data.oldRow,event.data.diff)}}))}static init(config){if(!config&&console){console.warn("Hopara: init config not present");return}if((!window||!window.document)&&console){console.warn("Hopara: window is not available");return}const client=new client_Hopara(config);return client.doInit()}}var client=__webpack_exports__["default"]=client_Hopara}])}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hopara/iframe",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "main": "build/client.js",
   "scripts": {
     "start": "ESLINT_NO_DEV_ERRORS=true react-app-rewired start",
@@ -27,8 +27,8 @@
   ],
   "devDependencies": {
     "@babel/register": "^7.15.3",
-    "@hopara/components": "^0.2.0",
-    "@hopara/system-test": "^0.2.0",
+    "@hopara/react": "^0.2.2",
+    "@hopara/system-test": "^0.2.2",
     "babel-loader": "8.1.0",
     "customize-cra": "^1.0.0",
     "react": "^18.2.0",