@hopara/iframe 0.1.90

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +81 -0
  2. package/babel.config.js +1 -0
  3. package/build/client.js +1 -0
  4. package/package.json +55 -0
package/README.md ADDED
@@ -0,0 +1,81 @@
1
+ # Hopara Iframe Client
2
+ The Hopara Iframe Client enables you to embed an Hopara App on your web site.
3
+
4
+ # Installing
5
+ Using npm:
6
+ ```shell
7
+ $ npm install @hopara/iframe
8
+ ```
9
+
10
+ Using yarn:
11
+ ```shell
12
+ $ yarn add @hopara/iframe
13
+ ```
14
+
15
+ Using Hopara CDN:
16
+ ```html
17
+ <script src="https://statics.hopara.app/embedded/latest/client.js"></script>
18
+ ```
19
+
20
+ # Example
21
+ ### React
22
+ ```js
23
+ import React from 'react'
24
+ import * as hopara from 'hopara'
25
+
26
+ class MyComponent extends React.Component {
27
+ componentDidMount(): void {
28
+ hopara.init({
29
+ app: 'my-hopara-app',
30
+ accessToken: 'my-hopara-token',
31
+ targetElementId: 'my-target-element',
32
+ })
33
+ }
34
+
35
+ render() {
36
+ <div id="my-target-element" />
37
+ }
38
+ }
39
+ ```
40
+
41
+ ### HTML
42
+ ```html
43
+ <html>
44
+ <head>
45
+ ...
46
+ <script src="https://statics.hopara.app/embedded/latest/client.js"></script>
47
+ <script>
48
+ document.addEventListener("DOMContentLoaded", function(){
49
+ hopara.init({
50
+ app: 'my-hopara-app',
51
+ accessToken: 'my-hopara-token',
52
+ targetElementId: 'my-target-element',
53
+ })
54
+ });
55
+ </script>
56
+ </head>
57
+ <body>
58
+ <div id="my-target-element"></div>
59
+ </body>
60
+ </html>
61
+ ```
62
+
63
+ # API
64
+
65
+ ### Init
66
+ ```js
67
+ hopara.init(config)
68
+ ```
69
+
70
+ ### Hopara Config
71
+ ```js
72
+ {
73
+ app: 'my-hopara-app',
74
+ accessToken: 'my-hopara-token',
75
+ // `targetElementId` is the DOM element id where Hopara should load
76
+ targetElementId: 'my-target-element',
77
+ // `tenant` parameter is optional
78
+ // sets which tenant hopara app should load, defaults to first of your user configured tenant
79
+ tenant: 'my-hopara-tenant'
80
+ }
81
+ ```
package/babel.config.js ADDED
@@ -0,0 +1 @@
1
+ module.exports = {presets: ['@babel/preset-env']}
package/build/client.js ADDED
@@ -0,0 +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=(document,version)=>{const iframeSrc=`https://statics.hopara.app/embedded/${version?version:"latest"}/index.html`;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);window.addEventListener("message",(event=>{if(event.data.__hopara__eventType__==="ready"){var _iframe$contentWindow;console.log("ready");(_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}document.addEventListener("DOMContentLoaded",(()=>makeInit(config)))}}])}));
package/package.json ADDED
@@ -0,0 +1,55 @@
1
+ {
2
+ "name": "@hopara/iframe",
3
+ "version": "0.1.90",
4
+ "main": "build/client.js",
5
+ "scripts": {
6
+ "start": "ESLINT_NO_DEV_ERRORS=true react-app-rewired start",
7
+ "build": "react-app-rewired build",
8
+ "eject": "react-app-rewired eject",
9
+ "lint": "eslint --fix 'src/**/*.{ts,js,tsx,jsx}' && tsc --noEmit",
10
+ "check-types": "tsc --noEmit"
11
+ },
12
+ "eslintConfig": {
13
+ "extends": "react-app",
14
+ "overrides": [
15
+ {
16
+ "files": [
17
+ "**/*.stories.*"
18
+ ],
19
+ "rules": {
20
+ "import/no-anonymous-default-export": "off"
21
+ }
22
+ }
23
+ ]
24
+ },
25
+ "browserslist": [
26
+ "defaults, not ie 11"
27
+ ],
28
+ "dependencies": {
29
+ "@babel/register": "^7.15.3",
30
+ "@hopara/auth-front": "^0.1.90",
31
+ "@hopara/components": "^0.1.90",
32
+ "@hopara/design-system": "^0.1.90",
33
+ "@hopara/fpsmeter": "^0.1.90",
34
+ "babel-loader": "8.1.0",
35
+ "config": "~3.3.6",
36
+ "d3": "^6.3.1",
37
+ "mime": "^3.0.0",
38
+ "react": "^18.2.0",
39
+ "react-dom": "^18.2.0",
40
+ "react-transition-group": "~4.4.1",
41
+ "typesafe-actions": "^5.1.0"
42
+ },
43
+ "devDependencies": {
44
+ "canvas": "^2.9.1",
45
+ "chromedriver": "^101.0.0",
46
+ "customize-cra": "^1.0.0",
47
+ "mockttp": "~1.0.4",
48
+ "nightwatch": "^2.0.10",
49
+ "react-app-rewired": "^2.2.1",
50
+ "resemblejs": "~4.0.1",
51
+ "sharp": "~0.30.5",
52
+ "typescript": "^4.5.2",
53
+ "webpack": "4.44.2"
54
+ }
55
+ }