@homekynd/hk-embed-sdk 0.0.6 → 0.1.0
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.
- package/README.md +112 -58
- package/dist/index.cjs +1 -1
- package/dist/index.d.ts +20 -2
- package/dist/index.js +91 -50
- package/package.json +5 -1
package/README.md
CHANGED
|
@@ -1,21 +1,31 @@
|
|
|
1
|
+
A lightweight SDK for embedding Homekynd applications into your website with secure authentication and seamless integration.
|
|
2
|
+
|
|
3
|
+
---
|
|
4
|
+
|
|
1
5
|
<p align="center">
|
|
2
6
|
<img width="160" height="160" alt="package-logo" src="https://storage.googleapis.com/hk-prod-main/hk-sdk-logo.png" />
|
|
3
7
|
</p>
|
|
4
8
|
|
|
5
9
|
<h1 align="center">HKEmbed SDK</h1>
|
|
6
10
|
|
|
7
|
-
#### A lightweight SDK for embedding Homekynd applications into your website with secure authentication and seamless integration.
|
|
8
|
-
|
|
9
|
-
---
|
|
10
|
-
|
|
11
11
|
## Installation
|
|
12
12
|
|
|
13
|
-
Contact your Homekynd representative to get access credentials, then
|
|
13
|
+
Contact your Homekynd representative to get access credentials, then choose one of the installation methods below:
|
|
14
|
+
|
|
15
|
+
### NPM Package
|
|
14
16
|
|
|
15
17
|
```bash
|
|
16
18
|
npm install @homekynd/hk-embed-sdk
|
|
17
19
|
```
|
|
18
20
|
|
|
21
|
+
### CDN
|
|
22
|
+
|
|
23
|
+
```html
|
|
24
|
+
<script src="https://storage.googleapis.com/hk-prod-main/sdk/hk-sdk.cdn.x.x.x.umd.js"></script>
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
Replace `x.x.x` with the desired version number (e.g., `1.0.0`, `2.1.3`).
|
|
28
|
+
|
|
19
29
|
> [!IMPORTANT]
|
|
20
30
|
> This package requires authentication credentials provided by Homekynd. Contact support@homekynd.com for access.
|
|
21
31
|
|
|
@@ -24,59 +34,100 @@ npm install @homekynd/hk-embed-sdk
|
|
|
24
34
|
### For React Applications
|
|
25
35
|
|
|
26
36
|
```tsx
|
|
27
|
-
import React from
|
|
28
|
-
import { HKReactEmbed } from
|
|
37
|
+
import React from "react";
|
|
38
|
+
import { HKReactEmbed } from "@homekynd/hk-embed-sdk";
|
|
29
39
|
|
|
30
40
|
function MyComponent() {
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
41
|
+
return (
|
|
42
|
+
<HKReactEmbed
|
|
43
|
+
clientId="your-client-id"
|
|
44
|
+
apiKey="your-api-key"
|
|
45
|
+
width="100%"
|
|
46
|
+
height="600px"
|
|
47
|
+
style={{ border: "1px solid #ddd", borderRadius: "8px" }}
|
|
48
|
+
/>
|
|
49
|
+
);
|
|
40
50
|
}
|
|
41
51
|
```
|
|
42
52
|
|
|
43
|
-
###
|
|
53
|
+
### Available Handlers
|
|
54
|
+
|
|
55
|
+
| Function | Type |
|
|
56
|
+
| --------------------------- | --------------------------------------------------------- |
|
|
57
|
+
| `addModel(modelId: string)` | Adds a model in the iframe canvas by passing the model ID |
|
|
58
|
+
| `getDeviceId()` | Provides the device unique identification (uuid format) |
|
|
59
|
+
|
|
60
|
+
### Configuration Options React
|
|
61
|
+
|
|
62
|
+
| Option | Type | Required | Default | Description |
|
|
63
|
+
| ---------- | -------------------------------- | -------- | -------------- | ----------------------------------------- |
|
|
64
|
+
| `clientId` | `string` | ✅ Yes | - | Your Homekynd client ID |
|
|
65
|
+
| `apiKey` | `string` | ✅ Yes | - | Your Homekynd API key |
|
|
66
|
+
| `width` | `string \| number` | No | `"100%"` | Embed width (e.g., "500px", "100%", 500) |
|
|
67
|
+
| `height` | `string \| number` | No | `"100%"` | Embed height (e.g., "400px", "50vh", 400) |
|
|
68
|
+
| `path` | `"designTool" \| "configurator"` | No | `"designTool"` | Initial page to load |
|
|
69
|
+
| `style` | `React.CSSProperties` | No | - | Custom styles |
|
|
70
|
+
|
|
71
|
+
### For Vanilla JavaScript (NPM)
|
|
44
72
|
|
|
45
73
|
```html
|
|
46
74
|
<!DOCTYPE html>
|
|
47
75
|
<html>
|
|
48
|
-
<head>
|
|
76
|
+
<head>
|
|
49
77
|
<title>My Website</title>
|
|
50
|
-
</head>
|
|
51
|
-
<body>
|
|
78
|
+
</head>
|
|
79
|
+
<body>
|
|
52
80
|
<div id="homekynd-embed" style="width: 100%; height: 600px;"></div>
|
|
53
|
-
|
|
81
|
+
|
|
54
82
|
<script type="module">
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
83
|
+
import { HKEmbed } from "@homekynd/hk-embed-sdk";
|
|
84
|
+
|
|
85
|
+
new HKEmbed({
|
|
86
|
+
container: document.getElementById("homekynd-embed"),
|
|
87
|
+
clientId: "your-client-id",
|
|
88
|
+
apiKey: "your-api-key",
|
|
89
|
+
width: "100%",
|
|
90
|
+
height: "600px",
|
|
91
|
+
});
|
|
92
|
+
</script>
|
|
93
|
+
</body>
|
|
94
|
+
</html>
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
### For Vanilla JavaScript (CDN)
|
|
98
|
+
|
|
99
|
+
```html
|
|
100
|
+
<!DOCTYPE html>
|
|
101
|
+
<html>
|
|
102
|
+
<head>
|
|
103
|
+
<script src="https://storage.googleapis.com/hk-prod-main/sdk/hk-sdk.cdn.x.x.x.umd.js"></script>
|
|
104
|
+
</head>
|
|
105
|
+
|
|
106
|
+
<body>
|
|
107
|
+
<div id="homekynd-embed"></div>
|
|
108
|
+
<script>
|
|
109
|
+
new HkEmbed({
|
|
110
|
+
container: document.getElementById("homekynd-embed"),
|
|
111
|
+
clientId: "your-client-id",
|
|
112
|
+
apiKey: "your-api-key",
|
|
113
|
+
width: "100%",
|
|
114
|
+
height: "600px",
|
|
115
|
+
});
|
|
64
116
|
</script>
|
|
65
|
-
</body>
|
|
117
|
+
</body>
|
|
66
118
|
</html>
|
|
67
119
|
```
|
|
68
120
|
|
|
69
|
-
|
|
121
|
+
### Configuration Options Vanilla
|
|
70
122
|
|
|
71
|
-
| Option
|
|
72
|
-
|
|
73
|
-
| `clientId`
|
|
74
|
-
| `apiKey`
|
|
75
|
-
| `container` | `HTMLElement`
|
|
76
|
-
| `width`
|
|
77
|
-
| `height`
|
|
78
|
-
| `path`
|
|
79
|
-
| `style` | `React.CSSProperties` | No | - | Custom styles (*React only) |
|
|
123
|
+
| Option | Type | Required | Default | Description |
|
|
124
|
+
| ----------- | -------------------------------- | -------- | -------------- | ----------------------------------------- |
|
|
125
|
+
| `clientId` | `string` | ✅ Yes | - | Your Homekynd client ID |
|
|
126
|
+
| `apiKey` | `string` | ✅ Yes | - | Your Homekynd API key |
|
|
127
|
+
| `container` | `HTMLElement` | ✅ Yes | - | Container element |
|
|
128
|
+
| `width` | `string \| number` | No | `"100%"` | Embed width (e.g., "500px", "100%", 500) |
|
|
129
|
+
| `height` | `string \| number` | No | `"100%"` | Embed height (e.g., "400px", "50vh", 400) |
|
|
130
|
+
| `path` | `"designTool" \| "configurator"` | No | `"designTool"` | Initial page to load |
|
|
80
131
|
|
|
81
132
|
## Common Examples
|
|
82
133
|
|
|
@@ -84,10 +135,10 @@ function MyComponent() {
|
|
|
84
135
|
|
|
85
136
|
```tsx
|
|
86
137
|
<HKReactEmbed
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
138
|
+
clientId="your-client-id"
|
|
139
|
+
apiKey="your-api-key"
|
|
140
|
+
width="100%"
|
|
141
|
+
height="500px"
|
|
91
142
|
/>
|
|
92
143
|
```
|
|
93
144
|
|
|
@@ -95,10 +146,10 @@ function MyComponent() {
|
|
|
95
146
|
|
|
96
147
|
```tsx
|
|
97
148
|
<HKReactEmbed
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
149
|
+
clientId="your-client-id"
|
|
150
|
+
apiKey="your-api-key"
|
|
151
|
+
width={800}
|
|
152
|
+
height={600}
|
|
102
153
|
/>
|
|
103
154
|
```
|
|
104
155
|
|
|
@@ -106,31 +157,34 @@ function MyComponent() {
|
|
|
106
157
|
|
|
107
158
|
```tsx
|
|
108
159
|
<HKReactEmbed
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
160
|
+
clientId="your-client-id"
|
|
161
|
+
apiKey="your-api-key"
|
|
162
|
+
width="100%"
|
|
163
|
+
height="70vh"
|
|
164
|
+
style={{
|
|
165
|
+
minHeight: "400px",
|
|
166
|
+
maxWidth: "1200px",
|
|
167
|
+
margin: "0 auto",
|
|
168
|
+
}}
|
|
118
169
|
/>
|
|
119
170
|
```
|
|
120
171
|
|
|
121
172
|
## Troubleshooting
|
|
122
173
|
|
|
123
174
|
### The embed doesn't load
|
|
175
|
+
|
|
124
176
|
- ✅ Check that your `clientId` and `apiKey` are correct
|
|
125
177
|
- ✅ Verify your credentials are active (contact support if needed)
|
|
126
178
|
- ✅ Ensure the container element exists before initializing
|
|
127
179
|
|
|
128
180
|
### The embed appears but shows an error
|
|
181
|
+
|
|
129
182
|
- ✅ Your credentials may be expired or inactive
|
|
130
183
|
- ✅ Check the browser console for specific error messages
|
|
131
184
|
- ✅ Contact Homekynd support with the error details
|
|
132
185
|
|
|
133
186
|
### Styling issues
|
|
187
|
+
|
|
134
188
|
- ✅ Make sure the container has explicit width/height
|
|
135
189
|
- ✅ Check for CSS conflicts in your application
|
|
136
190
|
- ✅ Use the `style` prop (React) for custom styling
|
package/dist/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var v=Object.defineProperty,D=Object.defineProperties;var L=Object.getOwnPropertyDescriptors;var M=Object.getOwnPropertySymbols;var P=Object.prototype.hasOwnProperty,T=Object.prototype.propertyIsEnumerable;var w=(n,e,t)=>e in n?v(n,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):n[e]=t,b=(n,e)=>{for(var t in e||(e={}))P.call(e,t)&&w(n,t,e[t]);if(M)for(var t of M(e))T.call(e,t)&&w(n,t,e[t]);return n},I=(n,e)=>D(n,L(e));var h=(n,e,t)=>w(n,typeof e!="symbol"?e+"":e,t);var y=(n,e,t)=>new Promise((r,o)=>{var s=a=>{try{c(t.next(a))}catch(l){o(l)}},f=a=>{try{c(t.throw(a))}catch(l){o(l)}},c=a=>a.done?r(a.value):Promise.resolve(a.value).then(s,f);c((t=t.apply(n,e)).next())});Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react"),U="https://app.homekynd.com";function O(n,e){return y(this,null,function*(){try{const t=yield fetch(`${U}/api/v1/company/generate-token`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({api_secret:n,id:e})}),r=yield t.json();if(t.ok)return r.token;console.error("Error fetching token: please confirm your API Secret and Client ID",r)}catch(t){console.error("Fetch error:",t)}})}const N={designTool:"/company",configurator:"/configurator"},u="https://app.homekynd.com",_="https://hk-socket-987653813850.us-central1.run.app";class m{static setDeviceId(e){this.deviceId=e}static getDeviceId(){return this.deviceId}}h(m,"deviceId");class R{constructor(e){h(this,"container");h(this,"iframe");h(this,"currentToken");h(this,"created",!1);h(this,"screenMode","design-tool");const{container:t}=e;if(!t)throw new Error("Container element is required");this.container=t,this.create(e)}create(e){return y(this,null,function*(){if(this.created)return;const{clientId:t,apiKey:r,path:o="designTool",width:s="100%",height:f="100%",enablePathSync:c=!0}=e;o==="configurator"?this.screenMode="configurator":this.screenMode="design-tool";const a=new URL(window.location.href),g=a.searchParams.get("ifpath")||N[o],k=u.endsWith("/")?u:u+"/",S=g.startsWith("/")?g.substring(1):g,E=new URL(S,k),p=yield O(r,t);this.currentToken=p,p&&E.searchParams.set("token",p);const d=document.createElement("iframe");return d.src=E.toString(),d.style.border="0",d.style.width=isNaN(Number(s))?s:`${s}px`,d.style.height=isNaN(Number(f))?f:`${f}px`,this.iframe=d,d.onload=()=>{this.currentToken&&this.sendMessage({type:"SET_TOKEN",token:this.currentToken})},this.container.innerHTML="",this.container.appendChild(d),c&&(a.searchParams.set("ifpath",g),window.history.replaceState({},"",a.toString())),this.setupMessageHandling(),this.created=!0,{sendMessage:this.sendMessage.bind(this),onMessage:this.onMessage.bind(this)}})}setupMessageHandling(){window.addEventListener("message",e=>{var t;switch((t=e.data)==null?void 0:t.type){case"ROUTE_CHANGE":this.onRouteChange(e.data.path);break;case"SET_DEVICE_ID":m.setDeviceId(e.data.deviceId);break;case"ADD_MODEL":this.addModel(e.data.modelId);break}})}onRouteChange(e){this.inputParentRoute(e),this.inputIframeRoute(e)}inputParentRoute(e){const t=new URL(window.location.href);t.searchParams.set("ifpath",e),window.history.replaceState({},"",t.toString())}inputIframeRoute(e){if(!this.iframe)return;const t=new URL(this.iframe.src),r=u.endsWith("/")?u:u+"/",o=e.startsWith("/")?e.substring(1):e,s=new URL(o,r);t.pathname!==s.pathname&&(this.iframe.src=s.toString())}sendMessage(e){var t;if((t=this.iframe)!=null&&t.contentWindow){const r=new URL(u).origin;this.iframe.contentWindow.postMessage(e,r)}}onMessage(e){window.addEventListener("message",t=>{e(t.data)})}addModel(e){fetch(`${_}/api/${this.screenMode}/addmodel`,{method:"POST",body:JSON.stringify({modelData:{modelId:e},deviceId:m.getDeviceId()})})}}const C=n=>{const e=i.useRef(null),t=i.useRef(null),[r,o]=i.useState(!1),s=i.useMemo(()=>n,[n.clientId,n.apiKey,n.path,n.width,n.height,n.enablePathSync]);return i.useEffect(()=>{o(!0)},[]),(typeof window!="undefined"?i.useLayoutEffect:i.useEffect)(()=>{if(!(!r||typeof window=="undefined")){if(e.current&&!t.current)try{t.current=new R(I(b({},s),{container:e.current}))}catch(c){console.error("Error creating HKEmbed:",c)}return()=>{t.current&&(t.current=null)}}},[s,r]),i.createElement("div",{ref:e,style:n.style})},H=n=>{try{return window.postMessage({type:"ADD_MODEL",modelId:n}),{success:!0,message:"Model added"}}catch(e){return console.error(e),{success:!1,message:e instanceof Error?e.message:"An unknown error occurred"}}},K=()=>m.getDeviceId();exports.HKEmbed=R;exports.HKReactEmbed=C;exports.addModel=H;exports.getDeviceId=K;
|
package/dist/index.d.ts
CHANGED
|
@@ -1,12 +1,29 @@
|
|
|
1
1
|
import { default as default_2 } from 'react';
|
|
2
2
|
|
|
3
|
+
/**
|
|
4
|
+
*
|
|
5
|
+
* @description Adds a model to the iframe
|
|
6
|
+
*/
|
|
7
|
+
export declare const addModel: (modelId: string) => {
|
|
8
|
+
success: boolean;
|
|
9
|
+
message: string;
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
export declare type DisplayMode = "configurator" | "web-embedded";
|
|
13
|
+
|
|
3
14
|
export declare type GenericMessageObject = any;
|
|
4
15
|
|
|
16
|
+
/**
|
|
17
|
+
* @description Returns the device ID
|
|
18
|
+
*/
|
|
19
|
+
export declare const getDeviceId: () => string;
|
|
20
|
+
|
|
5
21
|
export declare class HKEmbed {
|
|
6
22
|
private container;
|
|
7
23
|
private iframe?;
|
|
8
24
|
private currentToken?;
|
|
9
25
|
private created;
|
|
26
|
+
private screenMode;
|
|
10
27
|
constructor(options: HKEmbedConfigVanilla);
|
|
11
28
|
private create;
|
|
12
29
|
private setupMessageHandling;
|
|
@@ -15,6 +32,7 @@ export declare class HKEmbed {
|
|
|
15
32
|
private inputIframeRoute;
|
|
16
33
|
private sendMessage;
|
|
17
34
|
private onMessage;
|
|
35
|
+
private addModel;
|
|
18
36
|
}
|
|
19
37
|
|
|
20
38
|
export declare interface HKEmbedConfigContainer {
|
|
@@ -23,7 +41,7 @@ export declare interface HKEmbedConfigContainer {
|
|
|
23
41
|
|
|
24
42
|
export declare interface HKEmbedConfigOptions {
|
|
25
43
|
clientId: string;
|
|
26
|
-
apiKey: string
|
|
44
|
+
apiKey: `hk-${string}`;
|
|
27
45
|
path?: HKPathKey;
|
|
28
46
|
width?: string | number;
|
|
29
47
|
height?: string | number;
|
|
@@ -42,7 +60,7 @@ export declare interface HKEmbedConfigVanilla extends HKEmbedConfigContainer, HK
|
|
|
42
60
|
|
|
43
61
|
export declare type HKPath = Record<HKPathKey, string>;
|
|
44
62
|
|
|
45
|
-
export declare type HKPathKey = "
|
|
63
|
+
export declare type HKPathKey = "designTool" | "configurator";
|
|
46
64
|
|
|
47
65
|
export declare const HKReactEmbed: default_2.FC<HKEmbedConfigReact>;
|
|
48
66
|
|
package/dist/index.js
CHANGED
|
@@ -1,38 +1,38 @@
|
|
|
1
|
-
var
|
|
1
|
+
var D = Object.defineProperty, P = Object.defineProperties;
|
|
2
2
|
var T = Object.getOwnPropertyDescriptors;
|
|
3
3
|
var E = Object.getOwnPropertySymbols;
|
|
4
|
-
var
|
|
5
|
-
var
|
|
4
|
+
var U = Object.prototype.hasOwnProperty, v = Object.prototype.propertyIsEnumerable;
|
|
5
|
+
var p = (n, e, t) => e in n ? D(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t, M = (n, e) => {
|
|
6
6
|
for (var t in e || (e = {}))
|
|
7
|
-
|
|
7
|
+
U.call(e, t) && p(n, t, e[t]);
|
|
8
8
|
if (E)
|
|
9
9
|
for (var t of E(e))
|
|
10
|
-
|
|
10
|
+
v.call(e, t) && p(n, t, e[t]);
|
|
11
11
|
return n;
|
|
12
|
-
},
|
|
13
|
-
var
|
|
14
|
-
var w = (n, e, t) => new Promise((r,
|
|
12
|
+
}, I = (n, e) => P(n, T(e));
|
|
13
|
+
var d = (n, e, t) => p(n, typeof e != "symbol" ? e + "" : e, t);
|
|
14
|
+
var w = (n, e, t) => new Promise((r, o) => {
|
|
15
15
|
var s = (a) => {
|
|
16
16
|
try {
|
|
17
|
-
|
|
17
|
+
i(t.next(a));
|
|
18
18
|
} catch (f) {
|
|
19
|
-
|
|
19
|
+
o(f);
|
|
20
20
|
}
|
|
21
|
-
},
|
|
21
|
+
}, u = (a) => {
|
|
22
22
|
try {
|
|
23
|
-
|
|
23
|
+
i(t.throw(a));
|
|
24
24
|
} catch (f) {
|
|
25
|
-
|
|
25
|
+
o(f);
|
|
26
26
|
}
|
|
27
|
-
},
|
|
28
|
-
|
|
27
|
+
}, i = (a) => a.done ? r(a.value) : Promise.resolve(a.value).then(s, u);
|
|
28
|
+
i((t = t.apply(n, e)).next());
|
|
29
29
|
});
|
|
30
|
-
import
|
|
31
|
-
const
|
|
32
|
-
function
|
|
30
|
+
import R, { useRef as k, useMemo as O, useEffect as b, useLayoutEffect as N } from "react";
|
|
31
|
+
const _ = "https://app.homekynd.com";
|
|
32
|
+
function C(n, e) {
|
|
33
33
|
return w(this, null, function* () {
|
|
34
34
|
try {
|
|
35
|
-
const t = yield fetch(`${
|
|
35
|
+
const t = yield fetch(`${_}/api/v1/company/generate-token`, {
|
|
36
36
|
method: "POST",
|
|
37
37
|
headers: {
|
|
38
38
|
"Content-Type": "application/json"
|
|
@@ -50,17 +50,26 @@ function H(n, e) {
|
|
|
50
50
|
}
|
|
51
51
|
});
|
|
52
52
|
}
|
|
53
|
-
const
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
53
|
+
const A = {
|
|
54
|
+
designTool: "/company",
|
|
55
|
+
configurator: "/configurator"
|
|
56
|
+
}, h = "https://app.homekynd.com", H = "https://hk-socket-987653813850.us-central1.run.app";
|
|
57
|
+
class g {
|
|
58
|
+
static setDeviceId(e) {
|
|
59
|
+
this.deviceId = e;
|
|
60
|
+
}
|
|
61
|
+
static getDeviceId() {
|
|
62
|
+
return this.deviceId;
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
d(g, "deviceId");
|
|
66
|
+
class K {
|
|
59
67
|
constructor(e) {
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
68
|
+
d(this, "container");
|
|
69
|
+
d(this, "iframe");
|
|
70
|
+
d(this, "currentToken");
|
|
71
|
+
d(this, "created", !1);
|
|
72
|
+
d(this, "screenMode", "design-tool");
|
|
64
73
|
const { container: t } = e;
|
|
65
74
|
if (!t) throw new Error("Container element is required");
|
|
66
75
|
this.container = t, this.create(e);
|
|
@@ -71,19 +80,21 @@ class O {
|
|
|
71
80
|
const {
|
|
72
81
|
clientId: t,
|
|
73
82
|
apiKey: r,
|
|
74
|
-
path:
|
|
83
|
+
path: o = "designTool",
|
|
75
84
|
width: s = "100%",
|
|
76
|
-
height:
|
|
77
|
-
enablePathSync:
|
|
78
|
-
} = e
|
|
85
|
+
height: u = "100%",
|
|
86
|
+
enablePathSync: i = !0
|
|
87
|
+
} = e;
|
|
88
|
+
o === "configurator" ? this.screenMode = "configurator" : this.screenMode = "design-tool";
|
|
89
|
+
const a = new URL(window.location.href), l = a.searchParams.get("ifpath") || A[o], S = h.endsWith("/") ? h : h + "/", L = l.startsWith("/") ? l.substring(1) : l, y = new URL(L, S), m = yield C(r, t);
|
|
79
90
|
this.currentToken = m, m && y.searchParams.set("token", m);
|
|
80
|
-
const
|
|
81
|
-
return
|
|
91
|
+
const c = document.createElement("iframe");
|
|
92
|
+
return c.src = y.toString(), c.style.border = "0", c.style.width = isNaN(Number(s)) ? s : `${s}px`, c.style.height = isNaN(Number(u)) ? u : `${u}px`, this.iframe = c, c.onload = () => {
|
|
82
93
|
this.currentToken && this.sendMessage({
|
|
83
94
|
type: "SET_TOKEN",
|
|
84
95
|
token: this.currentToken
|
|
85
96
|
});
|
|
86
|
-
}, this.container.innerHTML = "", this.container.appendChild(
|
|
97
|
+
}, this.container.innerHTML = "", this.container.appendChild(c), i && (a.searchParams.set("ifpath", l), window.history.replaceState({}, "", a.toString())), this.setupMessageHandling(), this.created = !0, {
|
|
87
98
|
sendMessage: this.sendMessage.bind(this),
|
|
88
99
|
onMessage: this.onMessage.bind(this)
|
|
89
100
|
};
|
|
@@ -92,7 +103,17 @@ class O {
|
|
|
92
103
|
setupMessageHandling() {
|
|
93
104
|
window.addEventListener("message", (e) => {
|
|
94
105
|
var t;
|
|
95
|
-
((t = e.data) == null ? void 0 : t.type)
|
|
106
|
+
switch ((t = e.data) == null ? void 0 : t.type) {
|
|
107
|
+
case "ROUTE_CHANGE":
|
|
108
|
+
this.onRouteChange(e.data.path);
|
|
109
|
+
break;
|
|
110
|
+
case "SET_DEVICE_ID":
|
|
111
|
+
g.setDeviceId(e.data.deviceId);
|
|
112
|
+
break;
|
|
113
|
+
case "ADD_MODEL":
|
|
114
|
+
this.addModel(e.data.modelId);
|
|
115
|
+
break;
|
|
116
|
+
}
|
|
96
117
|
});
|
|
97
118
|
}
|
|
98
119
|
onRouteChange(e) {
|
|
@@ -104,13 +125,13 @@ class O {
|
|
|
104
125
|
}
|
|
105
126
|
inputIframeRoute(e) {
|
|
106
127
|
if (!this.iframe) return;
|
|
107
|
-
const t = new URL(this.iframe.src), r =
|
|
128
|
+
const t = new URL(this.iframe.src), r = h.endsWith("/") ? h : h + "/", o = e.startsWith("/") ? e.substring(1) : e, s = new URL(o, r);
|
|
108
129
|
t.pathname !== s.pathname && (this.iframe.src = s.toString());
|
|
109
130
|
}
|
|
110
131
|
sendMessage(e) {
|
|
111
132
|
var t;
|
|
112
133
|
if ((t = this.iframe) != null && t.contentWindow) {
|
|
113
|
-
const r = new URL(
|
|
134
|
+
const r = new URL(h).origin;
|
|
114
135
|
this.iframe.contentWindow.postMessage(e, r);
|
|
115
136
|
}
|
|
116
137
|
}
|
|
@@ -119,9 +140,18 @@ class O {
|
|
|
119
140
|
e(t.data);
|
|
120
141
|
});
|
|
121
142
|
}
|
|
143
|
+
addModel(e) {
|
|
144
|
+
fetch(`${H}/api/${this.screenMode}/addmodel`, {
|
|
145
|
+
method: "POST",
|
|
146
|
+
body: JSON.stringify({
|
|
147
|
+
modelData: { modelId: e },
|
|
148
|
+
deviceId: g.getDeviceId()
|
|
149
|
+
})
|
|
150
|
+
});
|
|
151
|
+
}
|
|
122
152
|
}
|
|
123
153
|
const x = (n) => {
|
|
124
|
-
const e =
|
|
154
|
+
const e = k(null), t = k(null), [r, o] = R.useState(!1), s = O(
|
|
125
155
|
() => n,
|
|
126
156
|
[
|
|
127
157
|
n.clientId,
|
|
@@ -132,25 +162,36 @@ const x = (n) => {
|
|
|
132
162
|
n.enablePathSync
|
|
133
163
|
]
|
|
134
164
|
);
|
|
135
|
-
return
|
|
136
|
-
|
|
137
|
-
}, []), (typeof window != "undefined" ?
|
|
165
|
+
return b(() => {
|
|
166
|
+
o(!0);
|
|
167
|
+
}, []), (typeof window != "undefined" ? N : b)(() => {
|
|
138
168
|
if (!(!r || typeof window == "undefined")) {
|
|
139
169
|
if (e.current && !t.current)
|
|
140
170
|
try {
|
|
141
|
-
t.current = new
|
|
171
|
+
t.current = new K(I(M({}, s), {
|
|
142
172
|
container: e.current
|
|
143
173
|
}));
|
|
144
|
-
} catch (
|
|
145
|
-
console.error("Error creating HKEmbed:",
|
|
174
|
+
} catch (i) {
|
|
175
|
+
console.error("Error creating HKEmbed:", i);
|
|
146
176
|
}
|
|
147
177
|
return () => {
|
|
148
178
|
t.current && (t.current = null);
|
|
149
179
|
};
|
|
150
180
|
}
|
|
151
|
-
}, [s, r]),
|
|
152
|
-
}
|
|
181
|
+
}, [s, r]), /* @__PURE__ */ R.createElement("div", { ref: e, style: n.style });
|
|
182
|
+
}, j = (n) => {
|
|
183
|
+
try {
|
|
184
|
+
return window.postMessage({
|
|
185
|
+
type: "ADD_MODEL",
|
|
186
|
+
modelId: n
|
|
187
|
+
}), { success: !0, message: "Model added" };
|
|
188
|
+
} catch (e) {
|
|
189
|
+
return console.error(e), { success: !1, message: e instanceof Error ? e.message : "An unknown error occurred" };
|
|
190
|
+
}
|
|
191
|
+
}, B = () => g.getDeviceId();
|
|
153
192
|
export {
|
|
154
|
-
|
|
155
|
-
x as HKReactEmbed
|
|
193
|
+
K as HKEmbed,
|
|
194
|
+
x as HKReactEmbed,
|
|
195
|
+
j as addModel,
|
|
196
|
+
B as getDeviceId
|
|
156
197
|
};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@homekynd/hk-embed-sdk",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "0.0
|
|
4
|
+
"version": "0.1.0",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.cjs",
|
|
7
7
|
"module": "dist/index.js",
|
|
@@ -25,6 +25,10 @@
|
|
|
25
25
|
"dev:vanilla": "cp src/dev/vanilla.html index.html && vite",
|
|
26
26
|
"dev:react": "cp src/dev/react.html index.html && vite",
|
|
27
27
|
"build": "tsc -b && vite build",
|
|
28
|
+
"build:cdn:dev": "vite build --mode development --config vite.config.cdn.js",
|
|
29
|
+
"build:cdn:staging": "vite build --mode staging --config vite.config.cdn.js",
|
|
30
|
+
"build:cdn:production": "vite build --mode production --config vite.config.cdn.js",
|
|
31
|
+
"build:cdn": "npm run build:cdn:dev && npm run build:cdn:staging && npm run build:cdn:production",
|
|
28
32
|
"lint": "eslint .",
|
|
29
33
|
"preview": "vite preview",
|
|
30
34
|
"prepare": "husky",
|