@homekynd/hk-embed-sdk 0.0.4 → 0.0.6

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react"),n="http://localhost:3000";async function y(s,e){try{const t=await fetch(`${n}/api/v1/company/generate-token`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({api_secret:s,id:e})}),a=await t.json();if(t.ok)return a.token;console.error("Error fetching token: please confirm your API Secret and Client ID",a)}catch(t){console.error("Fetch error:",t)}}const R={root:"/company",renders:"/renders",spaces:"/spaces"};class g{container;iframe;currentToken;created=!1;constructor(e){const{container:t}=e;if(!t)throw new Error("Container element is required");this.container=t,this.create(e)}async create(e){if(this.created)return;const{clientId:t,apiKey:a,path:c="root",width:i="100%",height:h="100%",enablePathSync:m=!0}=e,d=new URL(window.location.href),o=d.searchParams.get("ifpath")||R[c],p=n.endsWith("/")?n:n+"/",w=o.startsWith("/")?o.substring(1):o,f=new URL(w,p),u=await y(a,t);this.currentToken=u,u&&f.searchParams.set("token",u);const r=document.createElement("iframe");return r.src=f.toString(),r.style.border="0",r.style.width=isNaN(Number(i))?i:`${i}px`,r.style.height=isNaN(Number(h))?h:`${h}px`,console.log("applying user styles/sizing"),this.iframe=r,r.onload=()=>{this.currentToken&&this.sendMessage({type:"SET_TOKEN",token:this.currentToken})},this.container.innerHTML="",this.container.appendChild(r),m&&(d.searchParams.set("ifpath",o),window.history.replaceState({},"",d.toString())),this.setupMessageHandling(),this.created=!0,{sendMessage:this.sendMessage.bind(this),onMessage:this.onMessage.bind(this)}}setupMessageHandling(){window.addEventListener("message",e=>{e.data?.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),a=n.endsWith("/")?n:n+"/",c=e.startsWith("/")?e.substring(1):e,i=new URL(c,a);t.pathname!==i.pathname&&(this.iframe.src=i.toString())}sendMessage(e){if(this.iframe?.contentWindow){const t=new URL(n).origin;this.iframe.contentWindow.postMessage(e,t)}}onMessage(e){window.addEventListener("message",t=>{e(t.data)})}}const b=s=>{const e=l.useRef(null),t=l.useRef(null);return l.useLayoutEffect(()=>(e.current&&!t.current&&(t.current=new g({...s,container:e.current})),()=>{t.current=null}),[s]),React.createElement("div",{ref:e,style:s.style})};exports.HKEmbed=g;exports.HKReactEmbed=b;
+"use strict";var k=Object.defineProperty,U=Object.defineProperties;var L=Object.getOwnPropertyDescriptors;var E=Object.getOwnPropertySymbols;var T=Object.prototype.hasOwnProperty,H=Object.prototype.propertyIsEnumerable;var w=(n,e,t)=>e in n?k(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)&&w(n,t,e[t]);if(E)for(var t of E(e))H.call(e,t)&&w(n,t,e[t]);return n},b=(n,e)=>U(n,L(e));var f=(n,e,t)=>w(n,typeof e!="symbol"?e+"":e,t);var y=(n,e,t)=>new Promise((r,o)=>{var s=a=>{try{h(t.next(a))}catch(l){o(l)}},u=a=>{try{h(t.throw(a))}catch(l){o(l)}},h=a=>a.done?r(a.value):Promise.resolve(a.value).then(s,u);h((t=t.apply(n,e)).next())});Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react"),c="https://staging.homekynd.com/";function I(n,e){return y(this,null,function*(){try{const t=yield fetch(`${c}/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={root:"/company",renders:"/renders",spaces:"/spaces"};class P{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 y(this,null,function*(){if(this.created)return;const{clientId:t,apiKey:r,path:o="root",width:s="100%",height:u="100%",enablePathSync:h=!0}=e,a=new URL(window.location.href),m=a.searchParams.get("ifpath")||N[o],S=c.endsWith("/")?c:c+"/",M=m.startsWith("/")?m.substring(1):m,p=new URL(M,S),g=yield I(r,t);this.currentToken=g,g&&p.searchParams.set("token",g);const d=document.createElement("iframe");return d.src=p.toString(),d.style.border="0",d.style.width=isNaN(Number(s))?s:`${s}px`,d.style.height=isNaN(Number(u))?u:`${u}px`,this.iframe=d,d.onload=()=>{this.currentToken&&this.sendMessage({type:"SET_TOKEN",token:this.currentToken})},this.container.innerHTML="",this.container.appendChild(d),h&&(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=c.endsWith("/")?c:c+"/",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(c).origin;this.iframe.contentWindow.postMessage(e,r)}}onMessage(e){window.addEventListener("message",t=>{e(t.data)})}}const v=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 P(b(R({},s),{container:e.current}))}catch(h){console.error("Error creating HKEmbed:",h)}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=P;exports.HKReactEmbed=v;

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { JSX } from 'react/jsx-runtime';
+import { default as default_2 } from 'react';
 
 export declare type GenericMessageObject = any;
 
@@ -44,6 +44,6 @@ export declare type HKPath = Record<HKPathKey, string>;
 
 export declare type HKPathKey = "root" | "renders" | "spaces";
 
-export declare const HKReactEmbed: (options: HKEmbedConfigReact) => JSX.Element;
+export declare const HKReactEmbed: default_2.FC<HKEmbedConfigReact>;
 
 export { }

package/dist/index.js

@@ -1,64 +1,98 @@
-import { useRef as f, useLayoutEffect as w } from "react";
-const n = "http://localhost:3000";
-async function y(s, e) {
-  try {
-    const t = await fetch(`${n}/api/v1/company/generate-token`, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json"
-      },
-      body: JSON.stringify({ api_secret: s, id: e })
-    }), a = await t.json();
-    if (t.ok)
-      return a.token;
-    console.error(
-      "Error fetching token: please confirm your API Secret and Client ID",
-      a
-    );
-  } catch (t) {
-    console.error("Fetch error:", t);
-  }
+var U = Object.defineProperty, L = Object.defineProperties;
+var T = Object.getOwnPropertyDescriptors;
+var E = Object.getOwnPropertySymbols;
+var I = Object.prototype.hasOwnProperty, N = Object.prototype.propertyIsEnumerable;
+var g = (n, e, t) => e in n ? U(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t, R = (n, e) => {
+  for (var t in e || (e = {}))
+    I.call(e, t) && g(n, t, e[t]);
+  if (E)
+    for (var t of E(e))
+      N.call(e, t) && g(n, t, e[t]);
+  return n;
+}, b = (n, e) => L(n, T(e));
+var u = (n, e, t) => g(n, typeof e != "symbol" ? e + "" : e, t);
+var w = (n, e, t) => new Promise((r, i) => {
+  var s = (a) => {
+    try {
+      c(t.next(a));
+    } catch (f) {
+      i(f);
+    }
+  }, d = (a) => {
+    try {
+      c(t.throw(a));
+    } catch (f) {
+      i(f);
+    }
+  }, c = (a) => a.done ? r(a.value) : Promise.resolve(a.value).then(s, d);
+  c((t = t.apply(n, e)).next());
+});
+import p, { useRef as P, useMemo as v, useEffect as k, useLayoutEffect as C } from "react";
+const o = "https://staging.homekynd.com/";
+function H(n, e) {
+  return w(this, null, function* () {
+    try {
+      const t = yield fetch(`${o}/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 R = {
+const K = {
   root: "/company",
   renders: "/renders",
   spaces: "/spaces"
 };
-class b {
-  container;
-  iframe;
-  currentToken;
-  created = !1;
+class O {
   constructor(e) {
+    u(this, "container");
+    u(this, "iframe");
+    u(this, "currentToken");
+    u(this, "created", !1);
     const { container: t } = e;
     if (!t) throw new Error("Container element is required");
     this.container = t, this.create(e);
   }
-  async create(e) {
-    if (this.created) return;
-    const {
-      clientId: t,
-      apiKey: a,
-      path: c = "root",
-      width: i = "100%",
-      height: h = "100%",
-      enablePathSync: g = !0
-    } = e, d = new URL(window.location.href), o = d.searchParams.get("ifpath") || R[c], m = n.endsWith("/") ? n : n + "/", p = o.startsWith("/") ? o.substring(1) : o, l = new URL(p, m), u = await y(a, t);
-    this.currentToken = u, u && l.searchParams.set("token", u);
-    const r = document.createElement("iframe");
-    return r.src = l.toString(), r.style.border = "0", r.style.width = isNaN(Number(i)) ? i : `${i}px`, r.style.height = isNaN(Number(h)) ? h : `${h}px`, console.log("applying user styles/sizing"), this.iframe = r, r.onload = () => {
-      this.currentToken && this.sendMessage({
-        type: "SET_TOKEN",
-        token: this.currentToken
-      });
-    }, this.container.innerHTML = "", this.container.appendChild(r), g && (d.searchParams.set("ifpath", o), window.history.replaceState({}, "", d.toString())), this.setupMessageHandling(), this.created = !0, {
-      sendMessage: this.sendMessage.bind(this),
-      onMessage: this.onMessage.bind(this)
-    };
+  create(e) {
+    return w(this, null, function* () {
+      if (this.created) return;
+      const {
+        clientId: t,
+        apiKey: r,
+        path: i = "root",
+        width: s = "100%",
+        height: d = "100%",
+        enablePathSync: c = !0
+      } = e, a = new URL(window.location.href), l = a.searchParams.get("ifpath") || K[i], M = o.endsWith("/") ? o : o + "/", S = l.startsWith("/") ? l.substring(1) : l, y = new URL(S, M), m = yield H(r, t);
+      this.currentToken = m, m && y.searchParams.set("token", m);
+      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(d)) ? d : `${d}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", l), 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) => {
-      e.data?.type === "ROUTE_CHANGE" && this.onRouteChange(e.data.path);
+      var t;
+      ((t = e.data) == null ? void 0 : t.type) === "ROUTE_CHANGE" && this.onRouteChange(e.data.path);
     });
   }
   onRouteChange(e) {
@@ -70,13 +104,14 @@ class b {
   }
   inputIframeRoute(e) {
     if (!this.iframe) return;
-    const t = new URL(this.iframe.src), a = n.endsWith("/") ? n : n + "/", c = e.startsWith("/") ? e.substring(1) : e, i = new URL(c, a);
-    t.pathname !== i.pathname && (this.iframe.src = i.toString());
+    const t = new URL(this.iframe.src), r = o.endsWith("/") ? o : o + "/", i = e.startsWith("/") ? e.substring(1) : e, s = new URL(i, r);
+    t.pathname !== s.pathname && (this.iframe.src = s.toString());
   }
   sendMessage(e) {
-    if (this.iframe?.contentWindow) {
-      const t = new URL(n).origin;
-      this.iframe.contentWindow.postMessage(e, t);
+    var t;
+    if ((t = this.iframe) != null && t.contentWindow) {
+      const r = new URL(o).origin;
+      this.iframe.contentWindow.postMessage(e, r);
     }
   }
   onMessage(e) {
@@ -85,16 +120,37 @@ class b {
     });
   }
 }
-const U = (s) => {
-  const e = f(null), t = f(null);
-  return w(() => (e.current && !t.current && (t.current = new b({
-    ...s,
-    container: e.current
-  })), () => {
-    t.current = null;
-  }), [s]), /* @__PURE__ */ React.createElement("div", { ref: e, style: s.style });
+const x = (n) => {
+  const e = P(null), t = P(null), [r, i] = p.useState(!1), s = v(
+    () => n,
+    [
+      n.clientId,
+      n.apiKey,
+      n.path,
+      n.width,
+      n.height,
+      n.enablePathSync
+    ]
+  );
+  return k(() => {
+    i(!0);
+  }, []), (typeof window != "undefined" ? C : k)(() => {
+    if (!(!r || typeof window == "undefined")) {
+      if (e.current && !t.current)
+        try {
+          t.current = new O(b(R({}, s), {
+            container: e.current
+          }));
+        } catch (c) {
+          console.error("Error creating HKEmbed:", c);
+        }
+      return () => {
+        t.current && (t.current = null);
+      };
+    }
+  }, [s, r]), r ? /* @__PURE__ */ p.createElement("div", { ref: e, style: n.style }) : /* @__PURE__ */ p.createElement("div", { ref: e, style: n.style });
 };
 export {
-  b as HKEmbed,
-  U as HKReactEmbed
+  O as HKEmbed,
+  x as HKReactEmbed
 };

package/package.json

@@ -1,12 +1,10 @@
 {
   "name": "@homekynd/hk-embed-sdk",
   "private": false,
-  "version": "0.0.4",
+  "version": "0.0.6",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
-  "unpkg": "dist/hk-embed.iife.js",
-  "jsdelivr": "dist/hk-embed.iife.js",
   "types": "dist/index.d.ts",
   "exports": {
     ".": {
@@ -36,17 +34,17 @@
     "**/*": "prettier --write --ignore-unknown"
   },
   "peerDependencies": {
-    "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-    "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
   },
   "devDependencies": {
     "vite-plugin-dts": "^4.5.4",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "@eslint/js": "^9.33.0",
     "@types/node": "^24.3.0",
-    "@types/react": "^19.1.10",
-    "@types/react-dom": "^19.1.7",
+    "@types/react": "^18.3.17",
+    "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^5.0.0",
     "eslint": "^9.33.0",
     "eslint-plugin-react-hooks": "^5.2.0",

package/dist/hk-embed.iife.js

@@ -1 +0,0 @@
-var HKEmbed=(function(o,h){"use strict";const n="http://localhost:3000";async function p(s,e){try{const t=await fetch(`${n}/api/v1/company/generate-token`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({api_secret:s,id:e})}),a=await t.json();if(t.ok)return a.token;console.error("Error fetching token: please confirm your API Secret and Client ID",a)}catch(t){console.error("Fetch error:",t)}}const w={root:"/company",renders:"/renders",spaces:"/spaces"};class g{container;iframe;currentToken;created=!1;constructor(e){const{container:t}=e;if(!t)throw new Error("Container element is required");this.container=t,this.create(e)}async create(e){if(this.created)return;const{clientId:t,apiKey:a,path:d="root",width:i="100%",height:u="100%",enablePathSync:R=!0}=e,l=new URL(window.location.href),c=l.searchParams.get("ifpath")||w[d],b=n.endsWith("/")?n:n+"/",E=c.startsWith("/")?c.substring(1):c,m=new URL(E,b),f=await p(a,t);this.currentToken=f,f&&m.searchParams.set("token",f);const r=document.createElement("iframe");return r.src=m.toString(),r.style.border="0",r.style.width=isNaN(Number(i))?i:`${i}px`,r.style.height=isNaN(Number(u))?u:`${u}px`,console.log("applying user styles/sizing"),this.iframe=r,r.onload=()=>{this.currentToken&&this.sendMessage({type:"SET_TOKEN",token:this.currentToken})},this.container.innerHTML="",this.container.appendChild(r),R&&(l.searchParams.set("ifpath",c),window.history.replaceState({},"",l.toString())),this.setupMessageHandling(),this.created=!0,{sendMessage:this.sendMessage.bind(this),onMessage:this.onMessage.bind(this)}}setupMessageHandling(){window.addEventListener("message",e=>{e.data?.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),a=n.endsWith("/")?n:n+"/",d=e.startsWith("/")?e.substring(1):e,i=new URL(d,a);t.pathname!==i.pathname&&(this.iframe.src=i.toString())}sendMessage(e){if(this.iframe?.contentWindow){const t=new URL(n).origin;this.iframe.contentWindow.postMessage(e,t)}}onMessage(e){window.addEventListener("message",t=>{e(t.data)})}}const y=s=>{const e=h.useRef(null),t=h.useRef(null);return h.useLayoutEffect(()=>(e.current&&!t.current&&(t.current=new g({...s,container:e.current})),()=>{t.current=null}),[s]),React.createElement("div",{ref:e,style:s.style})};return o.HKEmbed=g,o.HKReactEmbed=y,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"}),o})({},React);

package/dist/hk-embed.umd.js

@@ -1 +0,0 @@
-(function(n,r){typeof exports=="object"&&typeof module<"u"?r(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],r):(n=typeof globalThis<"u"?globalThis:n||self,r(n.HKEmbed={},n.React))})(this,(function(n,r){"use strict";const s="http://localhost:3000";async function g(a,e){try{const t=await fetch(`${s}/api/v1/company/generate-token`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({api_secret:a,id:e})}),o=await t.json();if(t.ok)return o.token;console.error("Error fetching token: please confirm your API Secret and Client ID",o)}catch(t){console.error("Fetch error:",t)}}const w={root:"/company",renders:"/renders",spaces:"/spaces"};class m{container;iframe;currentToken;created=!1;constructor(e){const{container:t}=e;if(!t)throw new Error("Container element is required");this.container=t,this.create(e)}async create(e){if(this.created)return;const{clientId:t,apiKey:o,path:d="root",width:c="100%",height:u="100%",enablePathSync:R=!0}=e,f=new URL(window.location.href),h=f.searchParams.get("ifpath")||w[d],b=s.endsWith("/")?s:s+"/",E=h.startsWith("/")?h.substring(1):h,p=new URL(E,b),l=await g(o,t);this.currentToken=l,l&&p.searchParams.set("token",l);const i=document.createElement("iframe");return i.src=p.toString(),i.style.border="0",i.style.width=isNaN(Number(c))?c:`${c}px`,i.style.height=isNaN(Number(u))?u:`${u}px`,console.log("applying user styles/sizing"),this.iframe=i,i.onload=()=>{this.currentToken&&this.sendMessage({type:"SET_TOKEN",token:this.currentToken})},this.container.innerHTML="",this.container.appendChild(i),R&&(f.searchParams.set("ifpath",h),window.history.replaceState({},"",f.toString())),this.setupMessageHandling(),this.created=!0,{sendMessage:this.sendMessage.bind(this),onMessage:this.onMessage.bind(this)}}setupMessageHandling(){window.addEventListener("message",e=>{e.data?.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),o=s.endsWith("/")?s:s+"/",d=e.startsWith("/")?e.substring(1):e,c=new URL(d,o);t.pathname!==c.pathname&&(this.iframe.src=c.toString())}sendMessage(e){if(this.iframe?.contentWindow){const t=new URL(s).origin;this.iframe.contentWindow.postMessage(e,t)}}onMessage(e){window.addEventListener("message",t=>{e(t.data)})}}const y=a=>{const e=r.useRef(null),t=r.useRef(null);return r.useLayoutEffect(()=>(e.current&&!t.current&&(t.current=new m({...a,container:e.current})),()=>{t.current=null}),[a]),React.createElement("div",{ref:e,style:a.style})};n.HKEmbed=m,n.HKReactEmbed=y,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})}));