@homekynd/hk-embed-sdk 0.0.5 → 0.0.7

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 (7) hide show
  1. package/README.md +105 -58
  2. package/dist/index.cjs +1 -22
  3. package/dist/index.d.ts +2 -2
  4. package/dist/index.js +133 -357
  5. package/package.json +11 -9
  6. package/dist/hk-embed.iife.js +0 -22
  7. package/dist/hk-embed.umd.js +0 -22
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 install via npm:
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,93 @@ npm install @homekynd/hk-embed-sdk
24
34
  ### For React Applications
25
35
 
26
36
  ```tsx
27
- import React from 'react';
28
- import { HKReactEmbed } from '@homekynd/hk-embed-sdk';
37
+ import React from "react";
38
+ import { HKReactEmbed } from "@homekynd/hk-embed-sdk";
29
39
 
30
40
  function MyComponent() {
31
- return (
32
- <HKReactEmbed
33
- clientId="your-client-id"
34
- apiKey="your-api-key"
35
- width="100%"
36
- height="600px"
37
- style={{ border: '1px solid #ddd', borderRadius: '8px' }}
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
- ### For Vanilla JavaScript
53
+ ### Configuration Options React
54
+
55
+ | Option | Type | Required | Default | Description |
56
+ | ---------- | --------------------- | -------- | -------- | ----------------------------------------- |
57
+ | `clientId` | `string` | ✅ Yes | - | Your Homekynd client ID |
58
+ | `apiKey` | `string` | ✅ Yes | - | Your Homekynd API key |
59
+ | `width` | `string \| number` | No | `"100%"` | Embed width (e.g., "500px", "100%", 500) |
60
+ | `height` | `string \| number` | No | `"100%"` | Embed height (e.g., "400px", "50vh", 400) |
61
+ | `path` | `string` | No | `"root"` | Initial page to load |
62
+ | `style` | `React.CSSProperties` | No | - | Custom styles |
63
+
64
+ ### For Vanilla JavaScript (NPM)
44
65
 
45
66
  ```html
46
67
  <!DOCTYPE html>
47
68
  <html>
48
- <head>
69
+ <head>
49
70
  <title>My Website</title>
50
- </head>
51
- <body>
71
+ </head>
72
+ <body>
52
73
  <div id="homekynd-embed" style="width: 100%; height: 600px;"></div>
53
-
74
+
54
75
  <script type="module">
55
- import { HKEmbed } from '@homekynd/hk-embed-sdk';
56
-
57
- new HKEmbed({
58
- container: document.getElementById('homekynd-embed'),
59
- clientId: 'your-client-id',
60
- apiKey: 'your-api-key',
61
- width: '100%',
62
- height: '600px'
63
- });
76
+ import { HKEmbed } from "@homekynd/hk-embed-sdk";
77
+
78
+ new HKEmbed({
79
+ container: document.getElementById("homekynd-embed"),
80
+ clientId: "your-client-id",
81
+ apiKey: "your-api-key",
82
+ width: "100%",
83
+ height: "600px",
84
+ });
64
85
  </script>
65
- </body>
86
+ </body>
66
87
  </html>
67
88
  ```
68
89
 
69
- ## Configuration Options
90
+ ### For Vanilla JavaScript (CDN)
70
91
 
71
- | Option | Type | Required | Default | Description |
72
- |--------|------|----------|---------|-------------|
73
- | `clientId` | `string` | ✅ Yes | - | Your Homekynd client ID |
74
- | `apiKey` | `string` | ✅ Yes | - | Your Homekynd API key |
75
- | `container` | `HTMLElement` | ✅ Yes* | - | Container element (*Vanilla JS only) |
76
- | `width` | `string \| number` | No | `"100%"` | Embed width (e.g., "500px", "100%", 500) |
77
- | `height` | `string \| number` | No | `"100%"` | Embed height (e.g., "400px", "50vh", 400) |
78
- | `path` | `string` | No | `"root"` | Initial page to load |
79
- | `style` | `React.CSSProperties` | No | - | Custom styles (*React only) |
92
+ ```html
93
+ <!DOCTYPE html>
94
+ <html>
95
+ <head>
96
+ <script src="https://storage.googleapis.com/hk-prod-main/sdk/hk-sdk.cdn.x.x.x.umd.js"></script>
97
+ </head>
98
+
99
+ <body>
100
+ <div id="homekynd-embed"></div>
101
+ <script>
102
+ new HkEmbed({
103
+ container: document.getElementById("homekynd-embed"),
104
+ clientId: "your-client-id",
105
+ apiKey: "your-api-key",
106
+ width: "100%",
107
+ height: "600px",
108
+ });
109
+ </script>
110
+ </body>
111
+ </html>
112
+ ```
113
+
114
+ ### Configuration Options Vanilla
115
+
116
+ | Option | Type | Required | Default | Description |
117
+ | ----------- | ------------------ | -------- | -------- | ----------------------------------------- |
118
+ | `clientId` | `string` | ✅ Yes | - | Your Homekynd client ID |
119
+ | `apiKey` | `string` | ✅ Yes | - | Your Homekynd API key |
120
+ | `container` | `HTMLElement` | ✅ Yes | - | Container element |
121
+ | `width` | `string \| number` | No | `"100%"` | Embed width (e.g., "500px", "100%", 500) |
122
+ | `height` | `string \| number` | No | `"100%"` | Embed height (e.g., "400px", "50vh", 400) |
123
+ | `path` | `string` | No | `"root"` | Initial page to load |
80
124
 
81
125
  ## Common Examples
82
126
 
@@ -84,10 +128,10 @@ function MyComponent() {
84
128
 
85
129
  ```tsx
86
130
  <HKReactEmbed
87
- clientId="your-client-id"
88
- apiKey="your-api-key"
89
- width="100%"
90
- height="500px"
131
+ clientId="your-client-id"
132
+ apiKey="your-api-key"
133
+ width="100%"
134
+ height="500px"
91
135
  />
92
136
  ```
93
137
 
@@ -95,10 +139,10 @@ function MyComponent() {
95
139
 
96
140
  ```tsx
97
141
  <HKReactEmbed
98
- clientId="your-client-id"
99
- apiKey="your-api-key"
100
- width={800}
101
- height={600}
142
+ clientId="your-client-id"
143
+ apiKey="your-api-key"
144
+ width={800}
145
+ height={600}
102
146
  />
103
147
  ```
104
148
 
@@ -106,31 +150,34 @@ function MyComponent() {
106
150
 
107
151
  ```tsx
108
152
  <HKReactEmbed
109
- clientId="your-client-id"
110
- apiKey="your-api-key"
111
- width="100%"
112
- height="70vh"
113
- style={{
114
- minHeight: '400px',
115
- maxWidth: '1200px',
116
- margin: '0 auto'
117
- }}
153
+ clientId="your-client-id"
154
+ apiKey="your-api-key"
155
+ width="100%"
156
+ height="70vh"
157
+ style={{
158
+ minHeight: "400px",
159
+ maxWidth: "1200px",
160
+ margin: "0 auto",
161
+ }}
118
162
  />
119
163
  ```
120
164
 
121
165
  ## Troubleshooting
122
166
 
123
167
  ### The embed doesn't load
168
+
124
169
  - ✅ Check that your `clientId` and `apiKey` are correct
125
170
  - ✅ Verify your credentials are active (contact support if needed)
126
171
  - ✅ Ensure the container element exists before initializing
127
172
 
128
173
  ### The embed appears but shows an error
174
+
129
175
  - ✅ Your credentials may be expired or inactive
130
176
  - ✅ Check the browser console for specific error messages
131
177
  - ✅ Contact Homekynd support with the error details
132
178
 
133
179
  ### Styling issues
180
+
134
181
  - ✅ Make sure the container has explicit width/height
135
182
  - ✅ Check for CSS conflicts in your application
136
183
  - ✅ Use the `style` prop (React) for custom styling
package/dist/index.cjs CHANGED
@@ -1,22 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const S=require("react"),E="http://localhost:3000";async function ne(u,t){try{const n=await fetch(`${E}/api/v1/company/generate-token`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({api_secret:u,id:t})}),l=await n.json();if(n.ok)return l.token;console.error("Error fetching token: please confirm your API Secret and Client ID",l)}catch(n){console.error("Fetch error:",n)}}const ae={root:"/company",renders:"/renders",spaces:"/spaces"};class H{container;iframe;currentToken;created=!1;constructor(t){const{container:n}=t;if(!n)throw new Error("Container element is required");this.container=n,this.create(t)}async create(t){if(this.created)return;const{clientId:n,apiKey:l,path:c="root",width:o="100%",height:m="100%",enablePathSync:R=!0}=t,g=new URL(window.location.href),p=g.searchParams.get("ifpath")||ae[c],y=E.endsWith("/")?E:E+"/",b=p.startsWith("/")?p.substring(1):p,T=new URL(b,y),v=await ne(l,n);this.currentToken=v,v&&T.searchParams.set("token",v);const f=document.createElement("iframe");return f.src=T.toString(),f.style.border="0",f.style.width=isNaN(Number(o))?o:`${o}px`,f.style.height=isNaN(Number(m))?m:`${m}px`,console.log("applying user styles/sizing"),this.iframe=f,f.onload=()=>{this.currentToken&&this.sendMessage({type:"SET_TOKEN",token:this.currentToken})},this.container.innerHTML="",this.container.appendChild(f),R&&(g.searchParams.set("ifpath",p),window.history.replaceState({},"",g.toString())),this.setupMessageHandling(),this.created=!0,{sendMessage:this.sendMessage.bind(this),onMessage:this.onMessage.bind(this)}}setupMessageHandling(){window.addEventListener("message",t=>{t.data?.type==="ROUTE_CHANGE"&&this.onRouteChange(t.data.path)})}onRouteChange(t){this.inputParentRoute(t),this.inputIframeRoute(t)}inputParentRoute(t){const n=new URL(window.location.href);n.searchParams.set("ifpath",t),window.history.replaceState({},"",n.toString())}inputIframeRoute(t){if(!this.iframe)return;const n=new URL(this.iframe.src),l=E.endsWith("/")?E:E+"/",c=t.startsWith("/")?t.substring(1):t,o=new URL(c,l);n.pathname!==o.pathname&&(this.iframe.src=o.toString())}sendMessage(t){if(this.iframe?.contentWindow){const n=new URL(E).origin;this.iframe.contentWindow.postMessage(t,n)}}onMessage(t){window.addEventListener("message",n=>{t(n.data)})}}var P={exports:{}},w={};/**
2
- * @license React
3
- * react-jsx-runtime.production.js
4
- *
5
- * Copyright (c) Meta Platforms, Inc. and affiliates.
6
- *
7
- * This source code is licensed under the MIT license found in the
8
- * LICENSE file in the root directory of this source tree.
9
- */var F;function oe(){if(F)return w;F=1;var u=Symbol.for("react.transitional.element"),t=Symbol.for("react.fragment");function n(l,c,o){var m=null;if(o!==void 0&&(m=""+o),c.key!==void 0&&(m=""+c.key),"key"in c){o={};for(var R in c)R!=="key"&&(o[R]=c[R])}else o=c;return c=o.ref,{$$typeof:u,type:l,key:m,ref:c!==void 0?c:null,props:o}}return w.Fragment=t,w.jsx=n,w.jsxs=n,w}var k={};/**
10
- * @license React
11
- * react-jsx-runtime.development.js
12
- *
13
- * Copyright (c) Meta Platforms, Inc. and affiliates.
14
- *
15
- * This source code is licensed under the MIT license found in the
16
- * LICENSE file in the root directory of this source tree.
17
- */var D;function se(){return D||(D=1,process.env.NODE_ENV!=="production"&&(function(){function u(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===ee?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case f:return"Fragment";case z:return"Profiler";case J:return"StrictMode";case K:return"Suspense";case B:return"SuspenseList";case Q:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case v:return"Portal";case V:return(e.displayName||"Context")+".Provider";case G:return(e._context.displayName||"Context")+".Consumer";case X:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case Z:return r=e.displayName||null,r!==null?r:u(e.type)||"Memo";case U:r=e._payload,e=e._init;try{return u(e(r))}catch{}}return null}function t(e){return""+e}function n(e){try{t(e);var r=!1}catch{r=!0}if(r){r=console;var a=r.error,s=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return a.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",s),t(e)}}function l(e){if(e===f)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===U)return"<...>";try{var r=u(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function c(){var e=O.A;return e===null?null:e.getOwner()}function o(){return Error("react-stack-top-frame")}function m(e){if(M.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function R(e,r){function a(){L||(L=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r))}a.isReactWarning=!0,Object.defineProperty(e,"key",{get:a,configurable:!0})}function g(){var e=u(this.type);return I[e]||(I[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function C(e,r,a,s,h,d,j,N){return a=d.ref,e={$$typeof:T,type:e,key:r,props:d,_owner:h},(a!==void 0?a:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:g}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:j}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:N}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function p(e,r,a,s,h,d,j,N){var i=r.children;if(i!==void 0)if(s)if(re(i)){for(s=0;s<i.length;s++)y(i[s]);Object.freeze&&Object.freeze(i)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else y(i);if(M.call(r,"key")){i=u(e);var _=Object.keys(r).filter(function(te){return te!=="key"});s=0<_.length?"{key: someKey, "+_.join(": ..., ")+": ...}":"{key: someKey}",W[i+s]||(_=0<_.length?"{"+_.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
18
- let props = %s;
19
- <%s {...props} />
20
- React keys must be passed directly to JSX without using spread:
21
- let props = %s;
22
- <%s key={someKey} {...props} />`,s,i,_,i),W[i+s]=!0)}if(i=null,a!==void 0&&(n(a),i=""+a),m(r)&&(n(r.key),i=""+r.key),"key"in r){a={};for(var x in r)x!=="key"&&(a[x]=r[x])}else a=r;return i&&R(a,typeof e=="function"?e.displayName||e.name||"Unknown":e),C(e,i,d,h,c(),a,j,N)}function y(e){typeof e=="object"&&e!==null&&e.$$typeof===T&&e._store&&(e._store.validated=1)}var b=S,T=Symbol.for("react.transitional.element"),v=Symbol.for("react.portal"),f=Symbol.for("react.fragment"),J=Symbol.for("react.strict_mode"),z=Symbol.for("react.profiler"),G=Symbol.for("react.consumer"),V=Symbol.for("react.context"),X=Symbol.for("react.forward_ref"),K=Symbol.for("react.suspense"),B=Symbol.for("react.suspense_list"),Z=Symbol.for("react.memo"),U=Symbol.for("react.lazy"),Q=Symbol.for("react.activity"),ee=Symbol.for("react.client.reference"),O=b.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,M=Object.prototype.hasOwnProperty,re=Array.isArray,A=console.createTask?console.createTask:function(){return null};b={react_stack_bottom_frame:function(e){return e()}};var L,I={},Y=b.react_stack_bottom_frame.bind(b,o)(),$=A(l(o)),W={};k.Fragment=f,k.jsx=function(e,r,a,s,h){var d=1e4>O.recentlyCreatedOwnerStacks++;return p(e,r,a,!1,s,h,d?Error("react-stack-top-frame"):Y,d?A(l(e)):$)},k.jsxs=function(e,r,a,s,h){var d=1e4>O.recentlyCreatedOwnerStacks++;return p(e,r,a,!0,s,h,d?Error("react-stack-top-frame"):Y,d?A(l(e)):$)}})()),k}var q;function ie(){return q||(q=1,process.env.NODE_ENV==="production"?P.exports=oe():P.exports=se()),P.exports}var ce=ie();const ue=u=>{const t=S.useRef(null),n=S.useRef(null);return S.useLayoutEffect(()=>(t.current&&!n.current&&(n.current=new H({...u,container:t.current})),()=>{n.current=null}),[u]),ce.jsx("div",{ref:t,style:u.style})};exports.HKEmbed=H;exports.HKReactEmbed=ue;
1
+ "use strict";var M=Object.defineProperty,U=Object.defineProperties;var L=Object.getOwnPropertyDescriptors;var E=Object.getOwnPropertySymbols;var T=Object.prototype.hasOwnProperty,H=Object.prototype.propertyIsEnumerable;var g=(n,e,t)=>e in n?M(n,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):n[e]=t,R=(n,e)=>{for(var t in e||(e={}))T.call(e,t)&&g(n,t,e[t]);if(E)for(var t of E(e))H.call(e,t)&&g(n,t,e[t]);return n},b=(n,e)=>U(n,L(e));var f=(n,e,t)=>g(n,typeof e!="symbol"?e+"":e,t);var w=(n,e,t)=>new Promise((r,o)=>{var s=a=>{try{c(t.next(a))}catch(l){o(l)}},u=a=>{try{c(t.throw(a))}catch(l){o(l)}},c=a=>a.done?r(a.value):Promise.resolve(a.value).then(s,u);c((t=t.apply(n,e)).next())});Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react"),I="https://app.homekynd.com";function N(n,e){return w(this,null,function*(){try{const t=yield fetch(`${I}/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 v={root:"/company",renders:"/renders",spaces:"/spaces"},d="https://app.homekynd.com";class S{constructor(e){f(this,"container");f(this,"iframe");f(this,"currentToken");f(this,"created",!1);const{container:t}=e;if(!t)throw new Error("Container element is required");this.container=t,this.create(e)}create(e){return w(this,null,function*(){if(this.created)return;const{clientId:t,apiKey:r,path:o="root",width:s="100%",height:u="100%",enablePathSync:c=!0}=e,a=new URL(window.location.href),m=a.searchParams.get("ifpath")||v[o],P=d.endsWith("/")?d:d+"/",k=m.startsWith("/")?m.substring(1):m,y=new URL(k,P),p=yield N(r,t);this.currentToken=p,p&&y.searchParams.set("token",p);const h=document.createElement("iframe");return h.src=y.toString(),h.style.border="0",h.style.width=isNaN(Number(s))?s:`${s}px`,h.style.height=isNaN(Number(u))?u:`${u}px`,this.iframe=h,h.onload=()=>{this.currentToken&&this.sendMessage({type:"SET_TOKEN",token:this.currentToken})},this.container.innerHTML="",this.container.appendChild(h),c&&(a.searchParams.set("ifpath",m),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;((t=e.data)==null?void 0:t.type)==="ROUTE_CHANGE"&&this.onRouteChange(e.data.path)})}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=d.endsWith("/")?d:d+"/",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(d).origin;this.iframe.contentWindow.postMessage(e,r)}}onMessage(e){window.addEventListener("message",t=>{e(t.data)})}}const K=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 S(b(R({},s),{container:e.current}))}catch(c){console.error("Error creating HKEmbed:",c)}return()=>{t.current&&(t.current=null)}}},[s,r]),r?i.createElement("div",{ref:e,style:n.style}):i.createElement("div",{ref:e,style:n.style})};exports.HKEmbed=S;exports.HKReactEmbed=K;
package/dist/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { JSX } from 'react/jsx-runtime';
1
+ import { default as default_2 } from 'react';
2
2
 
3
3
  export declare type GenericMessageObject = any;
4
4
 
@@ -44,6 +44,6 @@ export declare type HKPath = Record<HKPathKey, string>;
44
44
 
45
45
  export declare type HKPathKey = "root" | "renders" | "spaces";
46
46
 
47
- export declare const HKReactEmbed: (options: HKEmbedConfigReact) => JSX.Element;
47
+ export declare const HKReactEmbed: default_2.FC<HKEmbedConfigReact>;
48
48
 
49
49
  export { }
package/dist/index.js CHANGED
@@ -1,380 +1,156 @@
1
- import te, { useRef as W, useLayoutEffect as ne } from "react";
2
- const E = "http://localhost:3000";
3
- async function ae(u, t) {
4
- try {
5
- const n = await fetch(`${E}/api/v1/company/generate-token`, {
6
- method: "POST",
7
- headers: {
8
- "Content-Type": "application/json"
9
- },
10
- body: JSON.stringify({ api_secret: u, id: t })
11
- }), l = await n.json();
12
- if (n.ok)
13
- return l.token;
14
- console.error(
15
- "Error fetching token: please confirm your API Secret and Client ID",
16
- l
17
- );
18
- } catch (n) {
19
- console.error("Fetch error:", n);
20
- }
1
+ var L = Object.defineProperty, M = Object.defineProperties;
2
+ var T = Object.getOwnPropertyDescriptors;
3
+ var E = Object.getOwnPropertySymbols;
4
+ var I = Object.prototype.hasOwnProperty, N = Object.prototype.propertyIsEnumerable;
5
+ var p = (n, e, t) => e in n ? L(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t, R = (n, e) => {
6
+ for (var t in e || (e = {}))
7
+ I.call(e, t) && p(n, t, e[t]);
8
+ if (E)
9
+ for (var t of E(e))
10
+ N.call(e, t) && p(n, t, e[t]);
11
+ return n;
12
+ }, b = (n, e) => M(n, T(e));
13
+ var u = (n, e, t) => p(n, typeof e != "symbol" ? e + "" : e, t);
14
+ var g = (n, e, t) => new Promise((r, i) => {
15
+ var s = (a) => {
16
+ try {
17
+ o(t.next(a));
18
+ } catch (f) {
19
+ i(f);
20
+ }
21
+ }, d = (a) => {
22
+ try {
23
+ o(t.throw(a));
24
+ } catch (f) {
25
+ i(f);
26
+ }
27
+ }, o = (a) => a.done ? r(a.value) : Promise.resolve(a.value).then(s, d);
28
+ o((t = t.apply(n, e)).next());
29
+ });
30
+ import w, { useRef as k, useMemo as v, useEffect as P, useLayoutEffect as C } from "react";
31
+ const H = "https://app.homekynd.com";
32
+ function K(n, e) {
33
+ return g(this, null, function* () {
34
+ try {
35
+ const t = yield fetch(`${H}/api/v1/company/generate-token`, {
36
+ method: "POST",
37
+ headers: {
38
+ "Content-Type": "application/json"
39
+ },
40
+ body: JSON.stringify({ api_secret: n, id: e })
41
+ }), r = yield t.json();
42
+ if (t.ok)
43
+ return r.token;
44
+ console.error(
45
+ "Error fetching token: please confirm your API Secret and Client ID",
46
+ r
47
+ );
48
+ } catch (t) {
49
+ console.error("Fetch error:", t);
50
+ }
51
+ });
21
52
  }
22
- const oe = {
53
+ const O = {
23
54
  root: "/company",
24
55
  renders: "/renders",
25
56
  spaces: "/spaces"
26
- };
27
- class se {
28
- container;
29
- iframe;
30
- currentToken;
31
- created = !1;
32
- constructor(t) {
33
- const { container: n } = t;
34
- if (!n) throw new Error("Container element is required");
35
- this.container = n, this.create(t);
57
+ }, h = "https://app.homekynd.com";
58
+ class W {
59
+ constructor(e) {
60
+ u(this, "container");
61
+ u(this, "iframe");
62
+ u(this, "currentToken");
63
+ u(this, "created", !1);
64
+ const { container: t } = e;
65
+ if (!t) throw new Error("Container element is required");
66
+ this.container = t, this.create(e);
36
67
  }
37
- async create(t) {
38
- if (this.created) return;
39
- const {
40
- clientId: n,
41
- apiKey: l,
42
- path: c = "root",
43
- width: o = "100%",
44
- height: m = "100%",
45
- enablePathSync: R = !0
46
- } = t, T = new URL(window.location.href), p = T.searchParams.get("ifpath") || oe[c], y = E.endsWith("/") ? E : E + "/", b = p.startsWith("/") ? p.substring(1) : p, g = new URL(b, y), v = await ae(l, n);
47
- this.currentToken = v, v && g.searchParams.set("token", v);
48
- const f = document.createElement("iframe");
49
- return f.src = g.toString(), f.style.border = "0", f.style.width = isNaN(Number(o)) ? o : `${o}px`, f.style.height = isNaN(Number(m)) ? m : `${m}px`, console.log("applying user styles/sizing"), this.iframe = f, f.onload = () => {
50
- this.currentToken && this.sendMessage({
51
- type: "SET_TOKEN",
52
- token: this.currentToken
53
- });
54
- }, this.container.innerHTML = "", this.container.appendChild(f), R && (T.searchParams.set("ifpath", p), window.history.replaceState({}, "", T.toString())), this.setupMessageHandling(), this.created = !0, {
55
- sendMessage: this.sendMessage.bind(this),
56
- onMessage: this.onMessage.bind(this)
57
- };
68
+ create(e) {
69
+ return g(this, null, function* () {
70
+ if (this.created) return;
71
+ const {
72
+ clientId: t,
73
+ apiKey: r,
74
+ path: i = "root",
75
+ width: s = "100%",
76
+ height: d = "100%",
77
+ enablePathSync: o = !0
78
+ } = e, a = new URL(window.location.href), l = a.searchParams.get("ifpath") || O[i], S = h.endsWith("/") ? h : h + "/", U = l.startsWith("/") ? l.substring(1) : l, y = new URL(U, S), m = yield K(r, t);
79
+ this.currentToken = m, m && y.searchParams.set("token", m);
80
+ const c = document.createElement("iframe");
81
+ return c.src = y.toString(), c.style.border = "0", c.style.width = isNaN(Number(s)) ? s : `${s}px`, c.style.height = isNaN(Number(d)) ? d : `${d}px`, this.iframe = c, c.onload = () => {
82
+ this.currentToken && this.sendMessage({
83
+ type: "SET_TOKEN",
84
+ token: this.currentToken
85
+ });
86
+ }, this.container.innerHTML = "", this.container.appendChild(c), o && (a.searchParams.set("ifpath", l), window.history.replaceState({}, "", a.toString())), this.setupMessageHandling(), this.created = !0, {
87
+ sendMessage: this.sendMessage.bind(this),
88
+ onMessage: this.onMessage.bind(this)
89
+ };
90
+ });
58
91
  }
59
92
  setupMessageHandling() {
60
- window.addEventListener("message", (t) => {
61
- t.data?.type === "ROUTE_CHANGE" && this.onRouteChange(t.data.path);
93
+ window.addEventListener("message", (e) => {
94
+ var t;
95
+ ((t = e.data) == null ? void 0 : t.type) === "ROUTE_CHANGE" && this.onRouteChange(e.data.path);
62
96
  });
63
97
  }
64
- onRouteChange(t) {
65
- this.inputParentRoute(t), this.inputIframeRoute(t);
98
+ onRouteChange(e) {
99
+ this.inputParentRoute(e), this.inputIframeRoute(e);
66
100
  }
67
- inputParentRoute(t) {
68
- const n = new URL(window.location.href);
69
- n.searchParams.set("ifpath", t), window.history.replaceState({}, "", n.toString());
101
+ inputParentRoute(e) {
102
+ const t = new URL(window.location.href);
103
+ t.searchParams.set("ifpath", e), window.history.replaceState({}, "", t.toString());
70
104
  }
71
- inputIframeRoute(t) {
105
+ inputIframeRoute(e) {
72
106
  if (!this.iframe) return;
73
- const n = new URL(this.iframe.src), l = E.endsWith("/") ? E : E + "/", c = t.startsWith("/") ? t.substring(1) : t, o = new URL(c, l);
74
- n.pathname !== o.pathname && (this.iframe.src = o.toString());
107
+ const t = new URL(this.iframe.src), r = h.endsWith("/") ? h : h + "/", i = e.startsWith("/") ? e.substring(1) : e, s = new URL(i, r);
108
+ t.pathname !== s.pathname && (this.iframe.src = s.toString());
75
109
  }
76
- sendMessage(t) {
77
- if (this.iframe?.contentWindow) {
78
- const n = new URL(E).origin;
79
- this.iframe.contentWindow.postMessage(t, n);
110
+ sendMessage(e) {
111
+ var t;
112
+ if ((t = this.iframe) != null && t.contentWindow) {
113
+ const r = new URL(h).origin;
114
+ this.iframe.contentWindow.postMessage(e, r);
80
115
  }
81
116
  }
82
- onMessage(t) {
83
- window.addEventListener("message", (n) => {
84
- t(n.data);
117
+ onMessage(e) {
118
+ window.addEventListener("message", (t) => {
119
+ e(t.data);
85
120
  });
86
121
  }
87
122
  }
88
- var P = { exports: {} }, w = {};
89
- /**
90
- * @license React
91
- * react-jsx-runtime.production.js
92
- *
93
- * Copyright (c) Meta Platforms, Inc. and affiliates.
94
- *
95
- * This source code is licensed under the MIT license found in the
96
- * LICENSE file in the root directory of this source tree.
97
- */
98
- var F;
99
- function ie() {
100
- if (F) return w;
101
- F = 1;
102
- var u = Symbol.for("react.transitional.element"), t = Symbol.for("react.fragment");
103
- function n(l, c, o) {
104
- var m = null;
105
- if (o !== void 0 && (m = "" + o), c.key !== void 0 && (m = "" + c.key), "key" in c) {
106
- o = {};
107
- for (var R in c)
108
- R !== "key" && (o[R] = c[R]);
109
- } else o = c;
110
- return c = o.ref, {
111
- $$typeof: u,
112
- type: l,
113
- key: m,
114
- ref: c !== void 0 ? c : null,
115
- props: o
116
- };
117
- }
118
- return w.Fragment = t, w.jsx = n, w.jsxs = n, w;
119
- }
120
- var k = {};
121
- /**
122
- * @license React
123
- * react-jsx-runtime.development.js
124
- *
125
- * Copyright (c) Meta Platforms, Inc. and affiliates.
126
- *
127
- * This source code is licensed under the MIT license found in the
128
- * LICENSE file in the root directory of this source tree.
129
- */
130
- var D;
131
- function ce() {
132
- return D || (D = 1, process.env.NODE_ENV !== "production" && (function() {
133
- function u(e) {
134
- if (e == null) return null;
135
- if (typeof e == "function")
136
- return e.$$typeof === Q ? null : e.displayName || e.name || null;
137
- if (typeof e == "string") return e;
138
- switch (e) {
139
- case f:
140
- return "Fragment";
141
- case z:
142
- return "Profiler";
143
- case J:
144
- return "StrictMode";
145
- case X:
146
- return "Suspense";
147
- case B:
148
- return "SuspenseList";
149
- case Z:
150
- return "Activity";
151
- }
152
- if (typeof e == "object")
153
- switch (typeof e.tag == "number" && console.error(
154
- "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
155
- ), e.$$typeof) {
156
- case v:
157
- return "Portal";
158
- case G:
159
- return (e.displayName || "Context") + ".Provider";
160
- case H:
161
- return (e._context.displayName || "Context") + ".Consumer";
162
- case V:
163
- var r = e.render;
164
- return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
165
- case K:
166
- return r = e.displayName || null, r !== null ? r : u(e.type) || "Memo";
167
- case C:
168
- r = e._payload, e = e._init;
169
- try {
170
- return u(e(r));
171
- } catch {
172
- }
123
+ const $ = (n) => {
124
+ const e = k(null), t = k(null), [r, i] = w.useState(!1), s = v(
125
+ () => n,
126
+ [
127
+ n.clientId,
128
+ n.apiKey,
129
+ n.path,
130
+ n.width,
131
+ n.height,
132
+ n.enablePathSync
133
+ ]
134
+ );
135
+ return P(() => {
136
+ i(!0);
137
+ }, []), (typeof window != "undefined" ? C : P)(() => {
138
+ if (!(!r || typeof window == "undefined")) {
139
+ if (e.current && !t.current)
140
+ try {
141
+ t.current = new W(b(R({}, s), {
142
+ container: e.current
143
+ }));
144
+ } catch (o) {
145
+ console.error("Error creating HKEmbed:", o);
173
146
  }
174
- return null;
175
- }
176
- function t(e) {
177
- return "" + e;
178
- }
179
- function n(e) {
180
- try {
181
- t(e);
182
- var r = !1;
183
- } catch {
184
- r = !0;
185
- }
186
- if (r) {
187
- r = console;
188
- var a = r.error, s = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
189
- return a.call(
190
- r,
191
- "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
192
- s
193
- ), t(e);
194
- }
195
- }
196
- function l(e) {
197
- if (e === f) return "<>";
198
- if (typeof e == "object" && e !== null && e.$$typeof === C)
199
- return "<...>";
200
- try {
201
- var r = u(e);
202
- return r ? "<" + r + ">" : "<...>";
203
- } catch {
204
- return "<...>";
205
- }
147
+ return () => {
148
+ t.current && (t.current = null);
149
+ };
206
150
  }
207
- function c() {
208
- var e = S.A;
209
- return e === null ? null : e.getOwner();
210
- }
211
- function o() {
212
- return Error("react-stack-top-frame");
213
- }
214
- function m(e) {
215
- if (U.call(e, "key")) {
216
- var r = Object.getOwnPropertyDescriptor(e, "key").get;
217
- if (r && r.isReactWarning) return !1;
218
- }
219
- return e.key !== void 0;
220
- }
221
- function R(e, r) {
222
- function a() {
223
- L || (L = !0, console.error(
224
- "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
225
- r
226
- ));
227
- }
228
- a.isReactWarning = !0, Object.defineProperty(e, "key", {
229
- get: a,
230
- configurable: !0
231
- });
232
- }
233
- function T() {
234
- var e = u(this.type);
235
- return M[e] || (M[e] = !0, console.error(
236
- "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
237
- )), e = this.props.ref, e !== void 0 ? e : null;
238
- }
239
- function N(e, r, a, s, h, d, A, j) {
240
- return a = d.ref, e = {
241
- $$typeof: g,
242
- type: e,
243
- key: r,
244
- props: d,
245
- _owner: h
246
- }, (a !== void 0 ? a : null) !== null ? Object.defineProperty(e, "ref", {
247
- enumerable: !1,
248
- get: T
249
- }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
250
- configurable: !1,
251
- enumerable: !1,
252
- writable: !0,
253
- value: 0
254
- }), Object.defineProperty(e, "_debugInfo", {
255
- configurable: !1,
256
- enumerable: !1,
257
- writable: !0,
258
- value: null
259
- }), Object.defineProperty(e, "_debugStack", {
260
- configurable: !1,
261
- enumerable: !1,
262
- writable: !0,
263
- value: A
264
- }), Object.defineProperty(e, "_debugTask", {
265
- configurable: !1,
266
- enumerable: !1,
267
- writable: !0,
268
- value: j
269
- }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
270
- }
271
- function p(e, r, a, s, h, d, A, j) {
272
- var i = r.children;
273
- if (i !== void 0)
274
- if (s)
275
- if (ee(i)) {
276
- for (s = 0; s < i.length; s++)
277
- y(i[s]);
278
- Object.freeze && Object.freeze(i);
279
- } else
280
- console.error(
281
- "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
282
- );
283
- else y(i);
284
- if (U.call(r, "key")) {
285
- i = u(e);
286
- var _ = Object.keys(r).filter(function(re) {
287
- return re !== "key";
288
- });
289
- s = 0 < _.length ? "{key: someKey, " + _.join(": ..., ") + ": ...}" : "{key: someKey}", $[i + s] || (_ = 0 < _.length ? "{" + _.join(": ..., ") + ": ...}" : "{}", console.error(
290
- `A props object containing a "key" prop is being spread into JSX:
291
- let props = %s;
292
- <%s {...props} />
293
- React keys must be passed directly to JSX without using spread:
294
- let props = %s;
295
- <%s key={someKey} {...props} />`,
296
- s,
297
- i,
298
- _,
299
- i
300
- ), $[i + s] = !0);
301
- }
302
- if (i = null, a !== void 0 && (n(a), i = "" + a), m(r) && (n(r.key), i = "" + r.key), "key" in r) {
303
- a = {};
304
- for (var x in r)
305
- x !== "key" && (a[x] = r[x]);
306
- } else a = r;
307
- return i && R(
308
- a,
309
- typeof e == "function" ? e.displayName || e.name || "Unknown" : e
310
- ), N(
311
- e,
312
- i,
313
- d,
314
- h,
315
- c(),
316
- a,
317
- A,
318
- j
319
- );
320
- }
321
- function y(e) {
322
- typeof e == "object" && e !== null && e.$$typeof === g && e._store && (e._store.validated = 1);
323
- }
324
- var b = te, g = Symbol.for("react.transitional.element"), v = Symbol.for("react.portal"), f = Symbol.for("react.fragment"), J = Symbol.for("react.strict_mode"), z = Symbol.for("react.profiler"), H = Symbol.for("react.consumer"), G = Symbol.for("react.context"), V = Symbol.for("react.forward_ref"), X = Symbol.for("react.suspense"), B = Symbol.for("react.suspense_list"), K = Symbol.for("react.memo"), C = Symbol.for("react.lazy"), Z = Symbol.for("react.activity"), Q = Symbol.for("react.client.reference"), S = b.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, U = Object.prototype.hasOwnProperty, ee = Array.isArray, O = console.createTask ? console.createTask : function() {
325
- return null;
326
- };
327
- b = {
328
- react_stack_bottom_frame: function(e) {
329
- return e();
330
- }
331
- };
332
- var L, M = {}, I = b.react_stack_bottom_frame.bind(
333
- b,
334
- o
335
- )(), Y = O(l(o)), $ = {};
336
- k.Fragment = f, k.jsx = function(e, r, a, s, h) {
337
- var d = 1e4 > S.recentlyCreatedOwnerStacks++;
338
- return p(
339
- e,
340
- r,
341
- a,
342
- !1,
343
- s,
344
- h,
345
- d ? Error("react-stack-top-frame") : I,
346
- d ? O(l(e)) : Y
347
- );
348
- }, k.jsxs = function(e, r, a, s, h) {
349
- var d = 1e4 > S.recentlyCreatedOwnerStacks++;
350
- return p(
351
- e,
352
- r,
353
- a,
354
- !0,
355
- s,
356
- h,
357
- d ? Error("react-stack-top-frame") : I,
358
- d ? O(l(e)) : Y
359
- );
360
- };
361
- })()), k;
362
- }
363
- var q;
364
- function ue() {
365
- return q || (q = 1, process.env.NODE_ENV === "production" ? P.exports = ie() : P.exports = ce()), P.exports;
366
- }
367
- var le = ue();
368
- const de = (u) => {
369
- const t = W(null), n = W(null);
370
- return ne(() => (t.current && !n.current && (n.current = new se({
371
- ...u,
372
- container: t.current
373
- })), () => {
374
- n.current = null;
375
- }), [u]), /* @__PURE__ */ le.jsx("div", { ref: t, style: u.style });
151
+ }, [s, r]), r ? /* @__PURE__ */ w.createElement("div", { ref: e, style: n.style }) : /* @__PURE__ */ w.createElement("div", { ref: e, style: n.style });
376
152
  };
377
153
  export {
378
- se as HKEmbed,
379
- de as HKReactEmbed
154
+ W as HKEmbed,
155
+ $ as HKReactEmbed
380
156
  };
package/package.json CHANGED
@@ -1,12 +1,10 @@
1
1
  {
2
2
  "name": "@homekynd/hk-embed-sdk",
3
3
  "private": false,
4
- "version": "0.0.5",
4
+ "version": "0.0.7",
5
5
  "type": "module",
6
6
  "main": "dist/index.cjs",
7
7
  "module": "dist/index.js",
8
- "unpkg": "dist/hk-embed.iife.js",
9
- "jsdelivr": "dist/hk-embed.iife.js",
10
8
  "types": "dist/index.d.ts",
11
9
  "exports": {
12
10
  ".": {
@@ -27,6 +25,10 @@
27
25
  "dev:vanilla": "cp src/dev/vanilla.html index.html && vite",
28
26
  "dev:react": "cp src/dev/react.html index.html && vite",
29
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",
30
32
  "lint": "eslint .",
31
33
  "preview": "vite preview",
32
34
  "prepare": "husky",
@@ -36,17 +38,17 @@
36
38
  "**/*": "prettier --write --ignore-unknown"
37
39
  },
38
40
  "peerDependencies": {
39
- "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
40
- "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
41
+ "react": ">=16.8.0",
42
+ "react-dom": ">=16.8.0"
41
43
  },
42
44
  "devDependencies": {
43
45
  "vite-plugin-dts": "^4.5.4",
44
- "react": "^19.1.1",
45
- "react-dom": "^19.1.1",
46
+ "react": "^18.3.1",
47
+ "react-dom": "^18.3.1",
46
48
  "@eslint/js": "^9.33.0",
47
49
  "@types/node": "^24.3.0",
48
- "@types/react": "^19.1.10",
49
- "@types/react-dom": "^19.1.7",
50
+ "@types/react": "^18.3.17",
51
+ "@types/react-dom": "^18.3.0",
50
52
  "@vitejs/plugin-react": "^5.0.0",
51
53
  "eslint": "^9.33.0",
52
54
  "eslint-plugin-react-hooks": "^5.2.0",
package/dist/hk-embed.iife.js DELETED
@@ -1,22 +0,0 @@
1
- var HKEmbed=(function(y,P){"use strict";const h="http://localhost:3000";async function G(u,t){try{const n=await fetch(`${h}/api/v1/company/generate-token`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({api_secret:u,id:t})}),l=await n.json();if(n.ok)return l.token;console.error("Error fetching token: please confirm your API Secret and Client ID",l)}catch(n){console.error("Fetch error:",n)}}const V={root:"/company",renders:"/renders",spaces:"/spaces"};class U{container;iframe;currentToken;created=!1;constructor(t){const{container:n}=t;if(!n)throw new Error("Container element is required");this.container=n,this.create(t)}async create(t){if(this.created)return;const{clientId:n,apiKey:l,path:c="root",width:o="100%",height:m="100%",enablePathSync:R=!0}=t,v=new URL(window.location.href),b=v.searchParams.get("ifpath")||V[c],O=h.endsWith("/")?h:h+"/",p=b.startsWith("/")?b.substring(1):b,w=new URL(p,O),k=await G(l,n);this.currentToken=k,k&&w.searchParams.set("token",k);const f=document.createElement("iframe");return f.src=w.toString(),f.style.border="0",f.style.width=isNaN(Number(o))?o:`${o}px`,f.style.height=isNaN(Number(m))?m:`${m}px`,console.log("applying user styles/sizing"),this.iframe=f,f.onload=()=>{this.currentToken&&this.sendMessage({type:"SET_TOKEN",token:this.currentToken})},this.container.innerHTML="",this.container.appendChild(f),R&&(v.searchParams.set("ifpath",b),window.history.replaceState({},"",v.toString())),this.setupMessageHandling(),this.created=!0,{sendMessage:this.sendMessage.bind(this),onMessage:this.onMessage.bind(this)}}setupMessageHandling(){window.addEventListener("message",t=>{t.data?.type==="ROUTE_CHANGE"&&this.onRouteChange(t.data.path)})}onRouteChange(t){this.inputParentRoute(t),this.inputIframeRoute(t)}inputParentRoute(t){const n=new URL(window.location.href);n.searchParams.set("ifpath",t),window.history.replaceState({},"",n.toString())}inputIframeRoute(t){if(!this.iframe)return;const n=new URL(this.iframe.src),l=h.endsWith("/")?h:h+"/",c=t.startsWith("/")?t.substring(1):t,o=new URL(c,l);n.pathname!==o.pathname&&(this.iframe.src=o.toString())}sendMessage(t){if(this.iframe?.contentWindow){const n=new URL(h).origin;this.iframe.contentWindow.postMessage(t,n)}}onMessage(t){window.addEventListener("message",n=>{t(n.data)})}}var S={exports:{}},g={};/**
2
- * @license React
3
- * react-jsx-runtime.production.js
4
- *
5
- * Copyright (c) Meta Platforms, Inc. and affiliates.
6
- *
7
- * This source code is licensed under the MIT license found in the
8
- * LICENSE file in the root directory of this source tree.
9
- */var M;function q(){if(M)return g;M=1;var u=Symbol.for("react.transitional.element"),t=Symbol.for("react.fragment");function n(l,c,o){var m=null;if(o!==void 0&&(m=""+o),c.key!==void 0&&(m=""+c.key),"key"in c){o={};for(var R in c)R!=="key"&&(o[R]=c[R])}else o=c;return c=o.ref,{$$typeof:u,type:l,key:m,ref:c!==void 0?c:null,props:o}}return g.Fragment=t,g.jsx=n,g.jsxs=n,g}var T={};/**
10
- * @license React
11
- * react-jsx-runtime.development.js
12
- *
13
- * Copyright (c) Meta Platforms, Inc. and affiliates.
14
- *
15
- * This source code is licensed under the MIT license found in the
16
- * LICENSE file in the root directory of this source tree.
17
- */var L;function K(){return L||(L=1,process.env.NODE_ENV!=="production"&&(function(){function u(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===ce?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case f:return"Fragment";case ee:return"Profiler";case Q:return"StrictMode";case ae:return"Suspense";case oe:return"SuspenseList";case ie:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case k:return"Portal";case te:return(e.displayName||"Context")+".Provider";case re:return(e._context.displayName||"Context")+".Consumer";case ne:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case se:return r=e.displayName||null,r!==null?r:u(e.type)||"Memo";case W:r=e._payload,e=e._init;try{return u(e(r))}catch{}}return null}function t(e){return""+e}function n(e){try{t(e);var r=!1}catch{r=!0}if(r){r=console;var a=r.error,s=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return a.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",s),t(e)}}function l(e){if(e===f)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===W)return"<...>";try{var r=u(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function c(){var e=A.A;return e===null?null:e.getOwner()}function o(){return Error("react-stack-top-frame")}function m(e){if(F.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function R(e,r){function a(){D||(D=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r))}a.isReactWarning=!0,Object.defineProperty(e,"key",{get:a,configurable:!0})}function v(){var e=u(this.type);return H[e]||(H[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function Y(e,r,a,s,E,d,N,x){return a=d.ref,e={$$typeof:w,type:e,key:r,props:d,_owner:E},(a!==void 0?a:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:v}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:N}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:x}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function b(e,r,a,s,E,d,N,x){var i=r.children;if(i!==void 0)if(s)if(ue(i)){for(s=0;s<i.length;s++)O(i[s]);Object.freeze&&Object.freeze(i)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else O(i);if(F.call(r,"key")){i=u(e);var _=Object.keys(r).filter(function(le){return le!=="key"});s=0<_.length?"{key: someKey, "+_.join(": ..., ")+": ...}":"{key: someKey}",z[i+s]||(_=0<_.length?"{"+_.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
18
- let props = %s;
19
- <%s {...props} />
20
- React keys must be passed directly to JSX without using spread:
21
- let props = %s;
22
- <%s key={someKey} {...props} />`,s,i,_,i),z[i+s]=!0)}if(i=null,a!==void 0&&(n(a),i=""+a),m(r)&&(n(r.key),i=""+r.key),"key"in r){a={};for(var C in r)C!=="key"&&(a[C]=r[C])}else a=r;return i&&R(a,typeof e=="function"?e.displayName||e.name||"Unknown":e),Y(e,i,d,E,c(),a,N,x)}function O(e){typeof e=="object"&&e!==null&&e.$$typeof===w&&e._store&&(e._store.validated=1)}var p=P,w=Symbol.for("react.transitional.element"),k=Symbol.for("react.portal"),f=Symbol.for("react.fragment"),Q=Symbol.for("react.strict_mode"),ee=Symbol.for("react.profiler"),re=Symbol.for("react.consumer"),te=Symbol.for("react.context"),ne=Symbol.for("react.forward_ref"),ae=Symbol.for("react.suspense"),oe=Symbol.for("react.suspense_list"),se=Symbol.for("react.memo"),W=Symbol.for("react.lazy"),ie=Symbol.for("react.activity"),ce=Symbol.for("react.client.reference"),A=p.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,F=Object.prototype.hasOwnProperty,ue=Array.isArray,j=console.createTask?console.createTask:function(){return null};p={react_stack_bottom_frame:function(e){return e()}};var D,H={},$=p.react_stack_bottom_frame.bind(p,o)(),J=j(l(o)),z={};T.Fragment=f,T.jsx=function(e,r,a,s,E){var d=1e4>A.recentlyCreatedOwnerStacks++;return b(e,r,a,!1,s,E,d?Error("react-stack-top-frame"):$,d?j(l(e)):J)},T.jsxs=function(e,r,a,s,E){var d=1e4>A.recentlyCreatedOwnerStacks++;return b(e,r,a,!0,s,E,d?Error("react-stack-top-frame"):$,d?j(l(e)):J)}})()),T}var I;function X(){return I||(I=1,process.env.NODE_ENV==="production"?S.exports=q():S.exports=K()),S.exports}var B=X();const Z=u=>{const t=P.useRef(null),n=P.useRef(null);return P.useLayoutEffect(()=>(t.current&&!n.current&&(n.current=new U({...u,container:t.current})),()=>{n.current=null}),[u]),B.jsx("div",{ref:t,style:u.style})};return y.HKEmbed=U,y.HKReactEmbed=Z,Object.defineProperty(y,Symbol.toStringTag,{value:"Module"}),y})({},React);
package/dist/hk-embed.umd.js DELETED
@@ -1,22 +0,0 @@
1
- (function(h,E){typeof exports=="object"&&typeof module<"u"?E(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],E):(h=typeof globalThis<"u"?globalThis:h||self,E(h.HKEmbed={},h.React))})(this,(function(h,E){"use strict";const p="http://localhost:3000";async function G(u,t){try{const n=await fetch(`${p}/api/v1/company/generate-token`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({api_secret:u,id:t})}),l=await n.json();if(n.ok)return l.token;console.error("Error fetching token: please confirm your API Secret and Client ID",l)}catch(n){console.error("Fetch error:",n)}}const V={root:"/company",renders:"/renders",spaces:"/spaces"};class U{container;iframe;currentToken;created=!1;constructor(t){const{container:n}=t;if(!n)throw new Error("Container element is required");this.container=n,this.create(t)}async create(t){if(this.created)return;const{clientId:n,apiKey:l,path:c="root",width:o="100%",height:m="100%",enablePathSync:b=!0}=t,k=new URL(window.location.href),T=k.searchParams.get("ifpath")||V[c],O=p.endsWith("/")?p:p+"/",_=T.startsWith("/")?T.substring(1):T,y=new URL(_,O),P=await G(l,n);this.currentToken=P,P&&y.searchParams.set("token",P);const f=document.createElement("iframe");return f.src=y.toString(),f.style.border="0",f.style.width=isNaN(Number(o))?o:`${o}px`,f.style.height=isNaN(Number(m))?m:`${m}px`,console.log("applying user styles/sizing"),this.iframe=f,f.onload=()=>{this.currentToken&&this.sendMessage({type:"SET_TOKEN",token:this.currentToken})},this.container.innerHTML="",this.container.appendChild(f),b&&(k.searchParams.set("ifpath",T),window.history.replaceState({},"",k.toString())),this.setupMessageHandling(),this.created=!0,{sendMessage:this.sendMessage.bind(this),onMessage:this.onMessage.bind(this)}}setupMessageHandling(){window.addEventListener("message",t=>{t.data?.type==="ROUTE_CHANGE"&&this.onRouteChange(t.data.path)})}onRouteChange(t){this.inputParentRoute(t),this.inputIframeRoute(t)}inputParentRoute(t){const n=new URL(window.location.href);n.searchParams.set("ifpath",t),window.history.replaceState({},"",n.toString())}inputIframeRoute(t){if(!this.iframe)return;const n=new URL(this.iframe.src),l=p.endsWith("/")?p:p+"/",c=t.startsWith("/")?t.substring(1):t,o=new URL(c,l);n.pathname!==o.pathname&&(this.iframe.src=o.toString())}sendMessage(t){if(this.iframe?.contentWindow){const n=new URL(p).origin;this.iframe.contentWindow.postMessage(t,n)}}onMessage(t){window.addEventListener("message",n=>{t(n.data)})}}var S={exports:{}},v={};/**
2
- * @license React
3
- * react-jsx-runtime.production.js
4
- *
5
- * Copyright (c) Meta Platforms, Inc. and affiliates.
6
- *
7
- * This source code is licensed under the MIT license found in the
8
- * LICENSE file in the root directory of this source tree.
9
- */var M;function q(){if(M)return v;M=1;var u=Symbol.for("react.transitional.element"),t=Symbol.for("react.fragment");function n(l,c,o){var m=null;if(o!==void 0&&(m=""+o),c.key!==void 0&&(m=""+c.key),"key"in c){o={};for(var b in c)b!=="key"&&(o[b]=c[b])}else o=c;return c=o.ref,{$$typeof:u,type:l,key:m,ref:c!==void 0?c:null,props:o}}return v.Fragment=t,v.jsx=n,v.jsxs=n,v}var w={};/**
10
- * @license React
11
- * react-jsx-runtime.development.js
12
- *
13
- * Copyright (c) Meta Platforms, Inc. and affiliates.
14
- *
15
- * This source code is licensed under the MIT license found in the
16
- * LICENSE file in the root directory of this source tree.
17
- */var L;function K(){return L||(L=1,process.env.NODE_ENV!=="production"&&(function(){function u(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===ce?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case f:return"Fragment";case ee:return"Profiler";case Q:return"StrictMode";case ae:return"Suspense";case oe:return"SuspenseList";case ie:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case P:return"Portal";case te:return(e.displayName||"Context")+".Provider";case re:return(e._context.displayName||"Context")+".Consumer";case ne:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case se:return r=e.displayName||null,r!==null?r:u(e.type)||"Memo";case W:r=e._payload,e=e._init;try{return u(e(r))}catch{}}return null}function t(e){return""+e}function n(e){try{t(e);var r=!1}catch{r=!0}if(r){r=console;var a=r.error,s=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return a.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",s),t(e)}}function l(e){if(e===f)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===W)return"<...>";try{var r=u(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function c(){var e=A.A;return e===null?null:e.getOwner()}function o(){return Error("react-stack-top-frame")}function m(e){if(F.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function b(e,r){function a(){D||(D=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r))}a.isReactWarning=!0,Object.defineProperty(e,"key",{get:a,configurable:!0})}function k(){var e=u(this.type);return H[e]||(H[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function Y(e,r,a,s,R,d,x,N){return a=d.ref,e={$$typeof:y,type:e,key:r,props:d,_owner:R},(a!==void 0?a:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:k}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:x}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:N}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function T(e,r,a,s,R,d,x,N){var i=r.children;if(i!==void 0)if(s)if(ue(i)){for(s=0;s<i.length;s++)O(i[s]);Object.freeze&&Object.freeze(i)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else O(i);if(F.call(r,"key")){i=u(e);var g=Object.keys(r).filter(function(le){return le!=="key"});s=0<g.length?"{key: someKey, "+g.join(": ..., ")+": ...}":"{key: someKey}",z[i+s]||(g=0<g.length?"{"+g.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
18
- let props = %s;
19
- <%s {...props} />
20
- React keys must be passed directly to JSX without using spread:
21
- let props = %s;
22
- <%s key={someKey} {...props} />`,s,i,g,i),z[i+s]=!0)}if(i=null,a!==void 0&&(n(a),i=""+a),m(r)&&(n(r.key),i=""+r.key),"key"in r){a={};for(var C in r)C!=="key"&&(a[C]=r[C])}else a=r;return i&&b(a,typeof e=="function"?e.displayName||e.name||"Unknown":e),Y(e,i,d,R,c(),a,x,N)}function O(e){typeof e=="object"&&e!==null&&e.$$typeof===y&&e._store&&(e._store.validated=1)}var _=E,y=Symbol.for("react.transitional.element"),P=Symbol.for("react.portal"),f=Symbol.for("react.fragment"),Q=Symbol.for("react.strict_mode"),ee=Symbol.for("react.profiler"),re=Symbol.for("react.consumer"),te=Symbol.for("react.context"),ne=Symbol.for("react.forward_ref"),ae=Symbol.for("react.suspense"),oe=Symbol.for("react.suspense_list"),se=Symbol.for("react.memo"),W=Symbol.for("react.lazy"),ie=Symbol.for("react.activity"),ce=Symbol.for("react.client.reference"),A=_.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,F=Object.prototype.hasOwnProperty,ue=Array.isArray,j=console.createTask?console.createTask:function(){return null};_={react_stack_bottom_frame:function(e){return e()}};var D,H={},$=_.react_stack_bottom_frame.bind(_,o)(),J=j(l(o)),z={};w.Fragment=f,w.jsx=function(e,r,a,s,R){var d=1e4>A.recentlyCreatedOwnerStacks++;return T(e,r,a,!1,s,R,d?Error("react-stack-top-frame"):$,d?j(l(e)):J)},w.jsxs=function(e,r,a,s,R){var d=1e4>A.recentlyCreatedOwnerStacks++;return T(e,r,a,!0,s,R,d?Error("react-stack-top-frame"):$,d?j(l(e)):J)}})()),w}var I;function X(){return I||(I=1,process.env.NODE_ENV==="production"?S.exports=q():S.exports=K()),S.exports}var B=X();const Z=u=>{const t=E.useRef(null),n=E.useRef(null);return E.useLayoutEffect(()=>(t.current&&!n.current&&(n.current=new U({...u,container:t.current})),()=>{n.current=null}),[u]),B.jsx("div",{ref:t,style:u.style})};h.HKEmbed=U,h.HKReactEmbed=Z,Object.defineProperty(h,Symbol.toStringTag,{value:"Module"})}));