@machinemetrics/mm-react-embeddable 1.2.1-0 → 1.3.0-1

package/dist/mm-react-embeddable.cjs.js

@@ -1,6 +1,6 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),R=require("prop-types"),v=require("styled-components"),Z=e.createContext(null),A=({children:n,manifestProxyBaseUrl:c=null})=>{const[i,u]=e.useState({}),[l,a]=e.useState({}),f=e.useRef({}),d=e.useRef({}),p=e.useRef({}),$=e.useCallback((r,s)=>{var t;return!!((t=p.current[r])!=null&&t.has(s))},[]),E=e.useCallback((r,s,t)=>{u(o=>({...o,[r]:{origin:s,frameRef:t}}))},[]),I=e.useCallback(r=>{u(s=>{const t={...s};return delete t[r],t}),a(s=>{const t={...s};return delete t[r],t}),delete p.current[r]},[]);e.useEffect(()=>{const r=(t=[],o)=>{t.forEach(b=>b(o))},s=t=>{var S,x,C,T,U;if(!((S=t==null?void 0:t.data)!=null&&S.instanceId))return;const{instanceId:o,type:b}=t.data,g=f.current;if(b==="response"){const{callbackId:M,response:B,error:D}=t.data,j=d.current[M];j&&(j(B,D),delete d.current[M]);return}if(b==="mark-registered"){const{requestType:M}=t.data;p.current[o]||(p.current[o]=new Set),p.current[o].add(M);return}b==="ready"&&a(M=>({...M,[o]:!0})),r((x=g[o])==null?void 0:x[b],t.data),r((C=g["*"])==null?void 0:C[b],t.data),r((T=g[o])==null?void 0:T["*"],t.data),r((U=g["*"])==null?void 0:U["*"],t.data)};return window.addEventListener("message",s),()=>{window.removeEventListener("message",s)}},[i]);const m=e.useCallback((r,s,t)=>{var b,g;const o=i[r];if(!o){console.warn(`Origin not set for id: ${r}. Unable to send message.`);return}(g=(b=o==null?void 0:o.frameRef)==null?void 0:b.current)!=null&&g.contentWindow&&o.frameRef.current.contentWindow.postMessage({type:s,...t,instanceId:r},o.origin)},[i]),q=e.useRef(0),y=e.useCallback(()=>`${Date.now()}-${++q.current}`,[]),w=e.useCallback(async(r,s,t={})=>new Promise((o,b)=>{const g=y(),S=(x,C)=>{delete d.current[g],C?b(C):o(x)};d.current[g]=S,m(r,"request",{callbackId:g,requestType:s,data:t})}),[m]),k=e.useCallback((r,s)=>{m(r,"load-options",s)},[m]),F=e.useCallback((r,s)=>{m(r,"validate",s)},[m]),h=e.useMemo(()=>({registerFrame:E,unregisterFrame:I,sendMessage:m,sendRequest:w,loadOptions:k,validate:F,hasHandler:$,readyFrames:l,manifestProxyBaseUrl:c,addListener:(r,s,t)=>(f.current[r]||(f.current[r]={}),f.current[r][s]||(f.current[r][s]=[]),f.current[r][s].push(t),()=>{f.current[r][s]=f.current[r][s].filter(o=>o!==t)})}),[E,I,m,w,k,F,$,l,c]);return e.createElement(Z.Provider,{value:h},n)},L={},O=async(n,c=null)=>{try{const i=new URL(n).origin;if(L[i]!==void 0)return L[i];const u=c?`${c}?url=${encodeURIComponent(`${i}/mm-app-manifest.json`)}`:`${i}/mm-app-manifest.json`,a=await(await fetch(u)).json();if(!a.version)throw new Error("Invalid manifest");return L[i]=a,a}catch{}return L[new URL(n).origin]=!1,!1},W=async(n,c=null)=>!!await O(n,c),P=(n,c,i)=>{const u=e.useContext(Z);if(u===null)throw new Error("useEmbeddedEffect must be used within a MMEmbeddableZoneProvider");const l=e.useRef(i);e.useEffect(()=>{l.current=i},[i]),e.useEffect(()=>{if(!(!n||!c)){if(c.startsWith("key:")){const a=c.substring(4);return u.readyFrames[n]&&u.sendMessage(n,"subscribe-key",{keyChord:a}),u.addListener(n,`key-pressed:${a}`,(...d)=>l.current(...d))}return u.addListener(n,c,(...a)=>l.current(...a))}},[u,n,c])};A.propTypes={children:R.node.isRequired,manifestProxyBaseUrl:R.string};const _=v.default||v,z=_.iframe`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),w=require("prop-types"),v=require("styled-components"),T=e.createContext(null),A=({children:t})=>{const[i,l]=e.useState({}),[d,f]=e.useState({}),c=e.useRef({}),g=e.useRef({}),b=e.useRef({}),$=e.useCallback((r,s)=>{var n;return!!((n=b.current[r])!=null&&n.has(s))},[]),E=e.useCallback((r,s,n)=>{l(o=>({...o,[r]:{origin:s,frameRef:n}}))},[]),M=e.useCallback(r=>{l(s=>{const n={...s};return delete n[r],n}),f(s=>{const n={...s};return delete n[r],n}),delete b.current[r]},[]);e.useEffect(()=>{const r=(n=[],o)=>{n.forEach(a=>a(o))},s=n=>{var R,S,F,q,P;if(!((R=n==null?void 0:n.data)!=null&&R.instanceId))return;const{instanceId:o,type:a}=n.data,u=c.current;if(a==="response"){const{callbackId:C,response:H,error:B}=n.data,U=g.current[C];U&&(U(H,B),delete g.current[C]);return}if(a==="mark-registered"){const{requestType:C}=n.data;b.current[o]||(b.current[o]=new Set),b.current[o].add(C);return}a==="ready"&&f(C=>({...C,[o]:!0})),r((S=u[o])==null?void 0:S[a],n.data),r((F=u["*"])==null?void 0:F[a],n.data),r((q=u[o])==null?void 0:q["*"],n.data),r((P=u["*"])==null?void 0:P["*"],n.data)};return window.addEventListener("message",s),()=>{window.removeEventListener("message",s)}},[i]);const m=e.useCallback((r,s,n)=>{var a,u;const o=i[r];if(!o){console.warn(`Origin not set for id: ${r}. Unable to send message.`);return}(u=(a=o==null?void 0:o.frameRef)==null?void 0:a.current)!=null&&u.contentWindow&&o.frameRef.current.contentWindow.postMessage({type:s,...n,instanceId:r},o.origin)},[i]),y=e.useRef(0),x=e.useCallback(()=>`${Date.now()}-${++y.current}`,[]),h=e.useCallback(async(r,s,n={})=>new Promise((o,a)=>{const u=x(),R=(S,F)=>{delete g.current[u],F?a(F):o(S)};g.current[u]=R,m(r,"request",{callbackId:u,requestType:s,data:n})}),[m]),I=e.useCallback((r,s)=>{m(r,"load-options",s)},[m]),p=e.useCallback((r,s)=>{m(r,"validate",s)},[m]),L=e.useMemo(()=>({registerFrame:E,unregisterFrame:M,sendMessage:m,sendRequest:h,loadOptions:I,validate:p,hasHandler:$,readyFrames:d,addListener:(r,s,n)=>(c.current[r]||(c.current[r]={}),c.current[r][s]||(c.current[r][s]=[]),c.current[r][s].push(n),()=>{c.current[r][s]=c.current[r][s].filter(o=>o!==n)})}),[E,M,m,h,I,p,$,d]);return e.createElement(T.Provider,{value:L},t)},k={},O=async t=>{try{const i=new URL(t).origin;if(k[i]!==void 0)return k[i];const d=await(await fetch(`${i}/mm-app-manifest.json`)).json();if(!d.version)throw new Error("Invalid manifest");return k[i]=d,d}catch{}return k[origin]=!1,!1},j=async t=>!!await O(t),Z=(t,i,l)=>{const d=e.useContext(T);if(d===null)throw new Error("useEmbeddedEffect must be used within a MMEmbeddableZoneProvider");const f=e.useRef(l);e.useEffect(()=>{f.current=l},[l]),e.useEffect(()=>{if(!(!t||!i)){if(i.startsWith("key:")){const c=i.substring(4);return d.readyFrames[t]&&d.sendMessage(t,"subscribe-key",{keyChord:c}),d.addListener(t,`key-pressed:${c}`,(...b)=>f.current(...b))}return d.addListener(t,i,(...c)=>f.current(...c))}},[d,t,i])};A.propTypes={children:w.node.isRequired};const D=v.default||v,_=D.iframe`
   width: 100%;
   height: 100%;
   border: none;
-  visibility: ${n=>n.$isReady?"visible":"hidden"};
-`,H=({id:n,src:c,path:i,onInit:u=()=>{},context:l={},params:a={},...f})=>{if("isConfiguring"in f)return console.error("isConfiguring must be passed via the params prop to MMEmbeddableZone"),null;if("colorMode"in l)return console.error("colorMode must be passed via the params prop to MMEmbeddableZone"),null;if("isFullScreen"in l)return console.error("isFullScreen must be passed via the params prop to MMEmbeddableZone"),null;const d=e.useRef(),[p,$]=e.useState(),[E,I]=e.useState(0),{registerFrame:m,unregisterFrame:q,sendMessage:y,manifestProxyBaseUrl:w}=e.useContext(Z),[k,F]=e.useState(!0),[h,r]=e.useState();e.useEffect(()=>{E&&y(n,"set-context",{context:{...l,colorMode:a.colorMode,isFullScreen:a.isFullScreen}})},[l,a.colorMode,a.isFullScreen,n,E]),e.useEffect(()=>{E&&(y(n,"set-params",{params:a}),y(n,"set-configuring",{isConfiguring:a.isConfiguring}))},[a,n,E]),e.useEffect(()=>{i!==void 0&&r((i==null?void 0:i.indexOf("/"))===0?i:`/${i}`)},[i]),e.useEffect(()=>{h===void 0||!E||y(n,"navigate",{path:h})},[h,E,n,y]),e.useEffect(()=>{if(!(!c||!n||!d))return(async()=>{const t=await W(c,w);if(F(t),t){const o=new URL(c);m(n,o.origin,d),u(),$(`${o.origin}/mm-embedded-interop?id=${n}&origin=${window.location.origin}`);return}})(),()=>{q(n)}},[c,n,m,d,w]),P(n,"ready",()=>I(t=>t+1));const s=e.useRef();return P(n,"heartbeat",()=>{s.current&&clearTimeout(s.current),s.current=setTimeout(()=>{if(d.current){const t=new URL(c);d.current.src=`${t.origin}/mm-embedded-interop?id=${n}&origin=${window.location.origin}`}},6e3)}),e.useEffect(()=>()=>{s.current&&clearTimeout(s.current)},[]),k?e.createElement(z,{$isReady:E,ref:d,src:p,...f}):e.createElement("div",{style:{height:"100%",display:"flex",flex:1,alignItems:"center",justifyContent:"center"}},e.createElement("div",{style:{textAlign:"center"}},"Application must adhere to the MM App Manifest specification to be embedded."))};H.propTypes={id:R.string,src:R.string.isRequired,path:R.string,onInit:R.func};exports.MMEmbeddableZone=H;exports.MMEmbeddableZoneContext=Z;exports.MMEmbeddableZoneProvider=A;exports.getAppInfo=O;exports.testIsEmbeddable=W;exports.useEmbeddedEffect=P;
+  visibility: ${t=>t.$isReady?"visible":"hidden"};
+`,W=({id:t,src:i,path:l,onInit:d=()=>{},context:f={},params:c={},skipManifestCheck:g=!1,readyTimeout:b=5e3,...$})=>{if("isConfiguring"in $)return console.error("isConfiguring must be passed via the params prop to MMEmbeddableZone"),null;if("colorMode"in f)return console.error("colorMode must be passed via the params prop to MMEmbeddableZone"),null;if("isFullScreen"in f)return console.error("isFullScreen must be passed via the params prop to MMEmbeddableZone"),null;const E=e.useRef(),[M,m]=e.useState(),[y,x]=e.useState(0),{registerFrame:h,unregisterFrame:I,sendMessage:p}=e.useContext(T),[L,r]=e.useState(!0),[s,n]=e.useState(),o=e.useRef();e.useEffect(()=>{y&&p(t,"set-context",{context:{...f,colorMode:c.colorMode,isFullScreen:c.isFullScreen}})},[f,c.colorMode,c.isFullScreen,t,y]),e.useEffect(()=>{y&&(p(t,"set-params",{params:c}),p(t,"set-configuring",{isConfiguring:c.isConfiguring}))},[c,t,y]),e.useEffect(()=>{l!==void 0&&n((l==null?void 0:l.indexOf("/"))===0?l:`/${l}`)},[l]),e.useEffect(()=>{s===void 0||!y||p(t,"navigate",{path:s})},[s,y,t,p]),e.useEffect(()=>{if(!(!i||!t||!E)){if(g){const u=new URL(i);h(t,u.origin,E),d(),m(`${u.origin}/mm-embedded-interop?id=${t}&origin=${window.location.origin}`)}else(async()=>{const u=await j(i);if(r(u),u){const R=new URL(i);h(t,R.origin,E),d(),m(`${R.origin}/mm-embedded-interop?id=${t}&origin=${window.location.origin}`)}})();return()=>{I(t)}}},[i,t,h,E,g]),e.useEffect(()=>{if(!(!g||!M||b==null))return o.current=setTimeout(()=>r(!1),b),()=>clearTimeout(o.current)},[M,g,b]),Z(t,"ready",()=>{clearTimeout(o.current),x(u=>u+1)});const a=e.useRef();return Z(t,"heartbeat",()=>{a.current&&clearTimeout(a.current),a.current=setTimeout(()=>{if(E.current){const u=new URL(i);E.current.src=`${u.origin}/mm-embedded-interop?id=${t}&origin=${window.location.origin}`}},6e3)}),e.useEffect(()=>()=>{a.current&&clearTimeout(a.current)},[]),L?e.createElement(_,{$isReady:y,ref:E,src:M,...$}):e.createElement("div",{style:{height:"100%",display:"flex",flex:1,alignItems:"center",justifyContent:"center"}},e.createElement("div",{style:{textAlign:"center"}},"Application must support the MM App Framework to be embedded."))};W.propTypes={id:w.string,src:w.string.isRequired,path:w.string,onInit:w.func,skipManifestCheck:w.bool,readyTimeout:w.number};exports.MMEmbeddableZone=W;exports.MMEmbeddableZoneContext=T;exports.MMEmbeddableZoneProvider=A;exports.getAppInfo=O;exports.testIsEmbeddable=j;exports.useEmbeddedEffect=Z;

package/dist/mm-react-embeddable.es.js

@@ -1,219 +1,230 @@
-import Z, { createContext as z, useState as h, useRef as R, useCallback as y, useEffect as p, useMemo as G, useContext as B } from "react";
-import $ from "prop-types";
-import W from "styled-components";
-const j = z(null), J = ({ children: n, manifestProxyBaseUrl: i = null }) => {
-  const [o, a] = h({}), [d, c] = h({}), l = R({}), u = R({}), w = R({}), x = y((r, t) => {
-    var e;
-    return !!((e = w.current[r]) != null && e.has(t));
-  }, []), b = y((r, t, e) => {
-    a((s) => ({ ...s, [r]: { origin: t, frameRef: e } }));
-  }, []), L = y((r) => {
-    a((t) => {
-      const e = { ...t };
-      return delete e[r], e;
-    }), c((t) => {
-      const e = { ...t };
-      return delete e[r], e;
-    }), delete w.current[r];
+import U, { createContext as _, useState as T, useRef as E, useCallback as R, useEffect as p, useMemo as z, useContext as H } from "react";
+import h from "prop-types";
+import v from "styled-components";
+const q = _(null), G = ({ children: r }) => {
+  const [o, d] = T({}), [u, l] = T({}), i = E({}), g = E({}), f = E({}), x = R((e, t) => {
+    var n;
+    return !!((n = f.current[e]) != null && n.has(t));
+  }, []), b = R((e, t, n) => {
+    d((s) => ({ ...s, [e]: { origin: t, frameRef: n } }));
+  }, []), $ = R((e) => {
+    d((t) => {
+      const n = { ...t };
+      return delete n[e], n;
+    }), l((t) => {
+      const n = { ...t };
+      return delete n[e], n;
+    }), delete f.current[e];
   }, []);
   p(() => {
-    const r = (e = [], s) => {
-      e.forEach((f) => f(s));
-    }, t = (e) => {
-      var T, P, C, A, O;
-      if (!((T = e == null ? void 0 : e.data) != null && T.instanceId))
+    const e = (n = [], s) => {
+      n.forEach((a) => a(s));
+    }, t = (n) => {
+      var M, P, L, A, O;
+      if (!((M = n == null ? void 0 : n.data) != null && M.instanceId))
         return;
-      const { instanceId: s, type: f } = e.data, g = l.current;
-      if (f === "response") {
-        const { callbackId: E, response: D, error: _ } = e.data, v = u.current[E];
-        v && (v(D, _), delete u.current[E]);
+      const { instanceId: s, type: a } = n.data, c = i.current;
+      if (a === "response") {
+        const { callbackId: I, response: B, error: D } = n.data, j = g.current[I];
+        j && (j(B, D), delete g.current[I]);
         return;
       }
-      if (f === "mark-registered") {
-        const { requestType: E } = e.data;
-        w.current[s] || (w.current[s] = /* @__PURE__ */ new Set()), w.current[s].add(E);
+      if (a === "mark-registered") {
+        const { requestType: I } = n.data;
+        f.current[s] || (f.current[s] = /* @__PURE__ */ new Set()), f.current[s].add(I);
         return;
       }
-      f === "ready" && c((E) => ({ ...E, [s]: !0 })), r((P = g[s]) == null ? void 0 : P[f], e.data), r((C = g["*"]) == null ? void 0 : C[f], e.data), r((A = g[s]) == null ? void 0 : A["*"], e.data), r((O = g["*"]) == null ? void 0 : O["*"], e.data);
+      a === "ready" && l((I) => ({ ...I, [s]: !0 })), e((P = c[s]) == null ? void 0 : P[a], n.data), e((L = c["*"]) == null ? void 0 : L[a], n.data), e((A = c[s]) == null ? void 0 : A["*"], n.data), e((O = c["*"]) == null ? void 0 : O["*"], n.data);
     };
     return window.addEventListener("message", t), () => {
       window.removeEventListener("message", t);
     };
   }, [o]);
-  const m = y(
-    (r, t, e) => {
-      var f, g;
-      const s = o[r];
+  const m = R(
+    (e, t, n) => {
+      var a, c;
+      const s = o[e];
       if (!s) {
-        console.warn(`Origin not set for id: ${r}. Unable to send message.`);
+        console.warn(`Origin not set for id: ${e}. Unable to send message.`);
         return;
       }
-      (g = (f = s == null ? void 0 : s.frameRef) == null ? void 0 : f.current) != null && g.contentWindow && s.frameRef.current.contentWindow.postMessage(
-        { type: t, ...e, instanceId: r },
+      (c = (a = s == null ? void 0 : s.frameRef) == null ? void 0 : a.current) != null && c.contentWindow && s.frameRef.current.contentWindow.postMessage(
+        { type: t, ...n, instanceId: e },
         s.origin
       );
     },
     [o]
-  ), q = R(0), M = y(() => `${Date.now()}-${++q.current}`, []), I = y(
-    async (r, t, e = {}) => new Promise((s, f) => {
-      const g = M(), T = (P, C) => {
-        delete u.current[g], C ? f(C) : s(P);
+  ), w = E(0), Z = R(() => `${Date.now()}-${++w.current}`, []), F = R(
+    async (e, t, n = {}) => new Promise((s, a) => {
+      const c = Z(), M = (P, L) => {
+        delete g.current[c], L ? a(L) : s(P);
       };
-      u.current[g] = T, m(r, "request", { callbackId: g, requestType: t, data: e });
+      g.current[c] = M, m(e, "request", { callbackId: c, requestType: t, data: n });
     }),
     [m]
-  ), k = y(
-    (r, t) => {
-      m(r, "load-options", t);
+  ), C = R(
+    (e, t) => {
+      m(e, "load-options", t);
     },
     [m]
-  ), U = y(
-    (r, t) => {
-      m(r, "validate", t);
+  ), y = R(
+    (e, t) => {
+      m(e, "validate", t);
     },
     [m]
-  ), F = G(
+  ), k = z(
     () => ({
       registerFrame: b,
-      unregisterFrame: L,
+      unregisterFrame: $,
       sendMessage: m,
-      sendRequest: I,
-      loadOptions: k,
-      validate: U,
+      sendRequest: F,
+      loadOptions: C,
+      validate: y,
       hasHandler: x,
-      readyFrames: d,
-      manifestProxyBaseUrl: i,
-      addListener: (r, t, e) => (l.current[r] || (l.current[r] = {}), l.current[r][t] || (l.current[r][t] = []), l.current[r][t].push(e), () => {
-        l.current[r][t] = l.current[r][t].filter((s) => s !== e);
+      readyFrames: u,
+      addListener: (e, t, n) => (i.current[e] || (i.current[e] = {}), i.current[e][t] || (i.current[e][t] = []), i.current[e][t].push(n), () => {
+        i.current[e][t] = i.current[e][t].filter((s) => s !== n);
       })
     }),
     [
       b,
-      L,
+      $,
       m,
-      I,
-      k,
-      U,
+      F,
+      C,
+      y,
       x,
-      d,
-      i
+      u
     ]
   );
-  return /* @__PURE__ */ Z.createElement(j.Provider, { value: F }, n);
-}, S = {}, K = async (n, i = null) => {
+  return /* @__PURE__ */ U.createElement(q.Provider, { value: k }, r);
+}, S = {}, J = async (r) => {
   try {
-    const o = new URL(n).origin;
+    const o = new URL(r).origin;
     if (S[o] !== void 0)
       return S[o];
-    const a = i ? `${i}?url=${encodeURIComponent(`${o}/mm-app-manifest.json`)}` : `${o}/mm-app-manifest.json`, c = await (await fetch(a)).json();
-    if (!c.version)
+    const u = await (await fetch(`${o}/mm-app-manifest.json`)).json();
+    if (!u.version)
       throw new Error("Invalid manifest");
-    return S[o] = c, c;
+    return S[o] = u, u;
   } catch {
   }
-  return S[new URL(n).origin] = !1, !1;
-}, Q = async (n, i = null) => !!await K(n, i), H = (n, i, o) => {
-  const a = B(j);
-  if (a === null)
+  return S[origin] = !1, !1;
+}, K = async (r) => !!await J(r), W = (r, o, d) => {
+  const u = H(q);
+  if (u === null)
     throw new Error(
       "useEmbeddedEffect must be used within a MMEmbeddableZoneProvider"
     );
-  const d = R(o);
+  const l = E(d);
   p(() => {
-    d.current = o;
-  }, [o]), p(() => {
-    if (!(!n || !i)) {
-      if (i.startsWith("key:")) {
-        const c = i.substring(4);
-        return a.readyFrames[n] && a.sendMessage(n, "subscribe-key", { keyChord: c }), a.addListener(
-          n,
-          `key-pressed:${c}`,
-          (...u) => d.current(...u)
+    l.current = d;
+  }, [d]), p(() => {
+    if (!(!r || !o)) {
+      if (o.startsWith("key:")) {
+        const i = o.substring(4);
+        return u.readyFrames[r] && u.sendMessage(r, "subscribe-key", { keyChord: i }), u.addListener(
+          r,
+          `key-pressed:${i}`,
+          (...f) => l.current(...f)
         );
       }
-      return a.addListener(
-        n,
-        i,
-        (...c) => d.current(...c)
+      return u.addListener(
+        r,
+        o,
+        (...i) => l.current(...i)
       );
     }
-  }, [a, n, i]);
+  }, [u, r, o]);
 };
-J.propTypes = {
-  children: $.node.isRequired,
-  manifestProxyBaseUrl: $.string
+G.propTypes = {
+  children: h.node.isRequired
 };
-const V = W.default || W, X = V.iframe`
+const Q = v.default || v, V = Q.iframe`
   width: 100%;
   height: 100%;
   border: none;
-  visibility: ${(n) => n.$isReady ? "visible" : "hidden"};
-`, Y = ({
-  id: n,
-  src: i,
-  path: o,
-  onInit: a = () => {
+  visibility: ${(r) => r.$isReady ? "visible" : "hidden"};
+`, X = ({
+  id: r,
+  src: o,
+  path: d,
+  onInit: u = () => {
   },
-  context: d = {},
-  params: c = {},
-  ...l
+  context: l = {},
+  params: i = {},
+  skipManifestCheck: g = !1,
+  readyTimeout: f = 5e3,
+  ...x
 }) => {
-  if ("isConfiguring" in l)
+  if ("isConfiguring" in x)
     return console.error(
       "isConfiguring must be passed via the params prop to MMEmbeddableZone"
     ), null;
-  if ("colorMode" in d)
+  if ("colorMode" in l)
     return console.error(
       "colorMode must be passed via the params prop to MMEmbeddableZone"
     ), null;
-  if ("isFullScreen" in d)
+  if ("isFullScreen" in l)
     return console.error(
       "isFullScreen must be passed via the params prop to MMEmbeddableZone"
     ), null;
-  const u = R(), [w, x] = h(), [b, L] = h(0), { registerFrame: m, unregisterFrame: q, sendMessage: M, manifestProxyBaseUrl: I } = B(
-    j
-  ), [k, U] = h(!0), [F, r] = h();
+  const b = E(), [$, m] = T(), [w, Z] = T(0), { registerFrame: F, unregisterFrame: C, sendMessage: y } = H(
+    q
+  ), [k, e] = T(!0), [t, n] = T(), s = E();
   p(() => {
-    b && M(n, "set-context", {
+    w && y(r, "set-context", {
       context: {
-        ...d,
+        ...l,
         // TODO: Remove this once everything is migrated to params
-        colorMode: c.colorMode,
-        isFullScreen: c.isFullScreen
+        colorMode: i.colorMode,
+        isFullScreen: i.isFullScreen
       }
     });
-  }, [d, c.colorMode, c.isFullScreen, n, b]), p(() => {
-    b && (M(n, "set-params", { params: c }), M(n, "set-configuring", { isConfiguring: c.isConfiguring }));
-  }, [c, n, b]), p(() => {
-    o !== void 0 && r((o == null ? void 0 : o.indexOf("/")) === 0 ? o : `/${o}`);
-  }, [o]), p(() => {
-    F === void 0 || !b || M(n, "navigate", { path: F });
-  }, [F, b, n, M]), p(() => {
-    if (!(!i || !n || !u))
-      return (async () => {
-        const e = await Q(i, I);
-        if (U(e), e) {
-          const s = new URL(i);
-          m(n, s.origin, u), a(), x(
-            `${s.origin}/mm-embedded-interop?id=${n}&origin=${window.location.origin}`
-          );
-          return;
-        }
-      })(), () => {
-        q(n);
+  }, [l, i.colorMode, i.isFullScreen, r, w]), p(() => {
+    w && (y(r, "set-params", { params: i }), y(r, "set-configuring", { isConfiguring: i.isConfiguring }));
+  }, [i, r, w]), p(() => {
+    d !== void 0 && n((d == null ? void 0 : d.indexOf("/")) === 0 ? d : `/${d}`);
+  }, [d]), p(() => {
+    t === void 0 || !w || y(r, "navigate", { path: t });
+  }, [t, w, r, y]), p(() => {
+    if (!(!o || !r || !b)) {
+      if (g) {
+        const c = new URL(o);
+        F(r, c.origin, b), u(), m(
+          `${c.origin}/mm-embedded-interop?id=${r}&origin=${window.location.origin}`
+        );
+      } else
+        (async () => {
+          const c = await K(o);
+          if (e(c), c) {
+            const M = new URL(o);
+            F(r, M.origin, b), u(), m(
+              `${M.origin}/mm-embedded-interop?id=${r}&origin=${window.location.origin}`
+            );
+          }
+        })();
+      return () => {
+        C(r);
       };
-  }, [i, n, m, u, I]), H(n, "ready", () => L((e) => e + 1));
-  const t = R();
-  return H(n, "heartbeat", () => {
-    t.current && clearTimeout(t.current), t.current = setTimeout(() => {
-      if (u.current) {
-        const e = new URL(i);
-        u.current.src = `${e.origin}/mm-embedded-interop?id=${n}&origin=${window.location.origin}`;
+    }
+  }, [o, r, F, b, g]), p(() => {
+    if (!(!g || !$ || f == null))
+      return s.current = setTimeout(() => e(!1), f), () => clearTimeout(s.current);
+  }, [$, g, f]), W(r, "ready", () => {
+    clearTimeout(s.current), Z((c) => c + 1);
+  });
+  const a = E();
+  return W(r, "heartbeat", () => {
+    a.current && clearTimeout(a.current), a.current = setTimeout(() => {
+      if (b.current) {
+        const c = new URL(o);
+        b.current.src = `${c.origin}/mm-embedded-interop?id=${r}&origin=${window.location.origin}`;
       }
     }, 6e3);
   }), p(() => () => {
-    t.current && clearTimeout(t.current);
-  }, []), k ? /* @__PURE__ */ Z.createElement(X, { $isReady: b, ref: u, src: w, ...l }) : /* @__PURE__ */ Z.createElement(
+    a.current && clearTimeout(a.current);
+  }, []), k ? /* @__PURE__ */ U.createElement(V, { $isReady: w, ref: b, src: $, ...x }) : /* @__PURE__ */ U.createElement(
     "div",
     {
       style: {
@@ -224,20 +235,22 @@ const V = W.default || W, X = V.iframe`
         justifyContent: "center"
       }
     },
-    /* @__PURE__ */ Z.createElement("div", { style: { textAlign: "center" } }, "Application must adhere to the MM App Manifest specification to be embedded.")
+    /* @__PURE__ */ U.createElement("div", { style: { textAlign: "center" } }, "Application must support the MM App Framework to be embedded.")
   );
 };
-Y.propTypes = {
-  id: $.string,
-  src: $.string.isRequired,
-  path: $.string,
-  onInit: $.func
+X.propTypes = {
+  id: h.string,
+  src: h.string.isRequired,
+  path: h.string,
+  onInit: h.func,
+  skipManifestCheck: h.bool,
+  readyTimeout: h.number
 };
 export {
-  Y as MMEmbeddableZone,
-  j as MMEmbeddableZoneContext,
-  J as MMEmbeddableZoneProvider,
-  K as getAppInfo,
-  Q as testIsEmbeddable,
-  H as useEmbeddedEffect
+  X as MMEmbeddableZone,
+  q as MMEmbeddableZoneContext,
+  G as MMEmbeddableZoneProvider,
+  J as getAppInfo,
+  K as testIsEmbeddable,
+  W as useEmbeddedEffect
 };

package/dist/mm-react-embeddable.umd.js

@@ -1,6 +1,6 @@
-(function(c,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("react"),require("prop-types"),require("styled-components")):typeof define=="function"&&define.amd?define(["exports","react","prop-types","styled-components"],e):(c=typeof globalThis!="undefined"?globalThis:c||self,e(c["mm-react-embeddable"]={},c.React,c.PropTypes,c.styled))})(this,(function(c,e,w,v){"use strict";const k=e.createContext(null),A=({children:t,manifestProxyBaseUrl:u=null})=>{const[i,l]=e.useState({}),[f,d]=e.useState({}),m=e.useRef({}),a=e.useRef({}),y=e.useRef({}),S=e.useCallback((r,s)=>{var n;return!!((n=y.current[r])!=null&&n.has(s))},[]),p=e.useCallback((r,s,n)=>{l(o=>({...o,[r]:{origin:s,frameRef:n}}))},[]),L=e.useCallback(r=>{l(s=>{const n={...s};return delete n[r],n}),d(s=>{const n={...s};return delete n[r],n}),delete y.current[r]},[]);e.useEffect(()=>{const r=(n=[],o)=>{n.forEach(b=>b(o))},s=n=>{var U,x,I,H,B;if(!((U=n==null?void 0:n.data)!=null&&U.instanceId))return;const{instanceId:o,type:b}=n.data,E=m.current;if(b==="response"){const{callbackId:h,response:G,error:J}=n.data,D=a.current[h];D&&(D(G,J),delete a.current[h]);return}if(b==="mark-registered"){const{requestType:h}=n.data;y.current[o]||(y.current[o]=new Set),y.current[o].add(h);return}b==="ready"&&d(h=>({...h,[o]:!0})),r((x=E[o])==null?void 0:x[b],n.data),r((I=E["*"])==null?void 0:I[b],n.data),r((H=E[o])==null?void 0:H["*"],n.data),r((B=E["*"])==null?void 0:B["*"],n.data)};return window.addEventListener("message",s),()=>{window.removeEventListener("message",s)}},[i]);const g=e.useCallback((r,s,n)=>{var b,E;const o=i[r];if(!o){console.warn(`Origin not set for id: ${r}. Unable to send message.`);return}(E=(b=o==null?void 0:o.frameRef)==null?void 0:b.current)!=null&&E.contentWindow&&o.frameRef.current.contentWindow.postMessage({type:s,...n,instanceId:r},o.origin)},[i]),T=e.useRef(0),M=e.useCallback(()=>`${Date.now()}-${++T.current}`,[]),C=e.useCallback(async(r,s,n={})=>new Promise((o,b)=>{const E=M(),U=(x,I)=>{delete a.current[E],I?b(I):o(x)};a.current[E]=U,g(r,"request",{callbackId:E,requestType:s,data:n})}),[g]),Z=e.useCallback((r,s)=>{g(r,"load-options",s)},[g]),q=e.useCallback((r,s)=>{g(r,"validate",s)},[g]),$=e.useMemo(()=>({registerFrame:p,unregisterFrame:L,sendMessage:g,sendRequest:C,loadOptions:Z,validate:q,hasHandler:S,readyFrames:f,manifestProxyBaseUrl:u,addListener:(r,s,n)=>(m.current[r]||(m.current[r]={}),m.current[r][s]||(m.current[r][s]=[]),m.current[r][s].push(n),()=>{m.current[r][s]=m.current[r][s].filter(o=>o!==n)})}),[p,L,g,C,Z,q,S,f,u]);return e.createElement(k.Provider,{value:$},t)},F={},O=async(t,u=null)=>{try{const i=new URL(t).origin;if(F[i]!==void 0)return F[i];const l=u?`${u}?url=${encodeURIComponent(`${i}/mm-app-manifest.json`)}`:`${i}/mm-app-manifest.json`,d=await(await fetch(l)).json();if(!d.version)throw new Error("Invalid manifest");return F[i]=d,d}catch{}return F[new URL(t).origin]=!1,!1},P=async(t,u=null)=>!!await O(t,u),j=(t,u,i)=>{const l=e.useContext(k);if(l===null)throw new Error("useEmbeddedEffect must be used within a MMEmbeddableZoneProvider");const f=e.useRef(i);e.useEffect(()=>{f.current=i},[i]),e.useEffect(()=>{if(!(!t||!u)){if(u.startsWith("key:")){const d=u.substring(4);return l.readyFrames[t]&&l.sendMessage(t,"subscribe-key",{keyChord:d}),l.addListener(t,`key-pressed:${d}`,(...a)=>f.current(...a))}return l.addListener(t,u,(...d)=>f.current(...d))}},[l,t,u])};A.propTypes={children:w.node.isRequired,manifestProxyBaseUrl:w.string};const z=(v.default||v).iframe`
+(function(f,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("react"),require("prop-types"),require("styled-components")):typeof define=="function"&&define.amd?define(["exports","react","prop-types","styled-components"],e):(f=typeof globalThis!="undefined"?globalThis:f||self,e(f["mm-react-embeddable"]={},f.React,f.PropTypes,f.styled))})(this,(function(f,e,p,j){"use strict";const k=e.createContext(null),v=({children:n})=>{const[i,a]=e.useState({}),[l,m]=e.useState({}),u=e.useRef({}),E=e.useRef({}),b=e.useRef({}),I=e.useCallback((r,s)=>{var t;return!!((t=b.current[r])!=null&&t.has(s))},[]),y=e.useCallback((r,s,t)=>{a(o=>({...o,[r]:{origin:s,frameRef:t}}))},[]),C=e.useCallback(r=>{a(s=>{const t={...s};return delete t[r],t}),m(s=>{const t={...s};return delete t[r],t}),delete b.current[r]},[]);e.useEffect(()=>{const r=(t=[],o)=>{t.forEach(c=>c(o))},s=t=>{var h,q,S,W,H;if(!((h=t==null?void 0:t.data)!=null&&h.instanceId))return;const{instanceId:o,type:c}=t.data,d=u.current;if(c==="response"){const{callbackId:F,response:z,error:G}=t.data,B=E.current[F];B&&(B(z,G),delete E.current[F]);return}if(c==="mark-registered"){const{requestType:F}=t.data;b.current[o]||(b.current[o]=new Set),b.current[o].add(F);return}c==="ready"&&m(F=>({...F,[o]:!0})),r((q=d[o])==null?void 0:q[c],t.data),r((S=d["*"])==null?void 0:S[c],t.data),r((W=d[o])==null?void 0:W["*"],t.data),r((H=d["*"])==null?void 0:H["*"],t.data)};return window.addEventListener("message",s),()=>{window.removeEventListener("message",s)}},[i]);const g=e.useCallback((r,s,t)=>{var c,d;const o=i[r];if(!o){console.warn(`Origin not set for id: ${r}. Unable to send message.`);return}(d=(c=o==null?void 0:o.frameRef)==null?void 0:c.current)!=null&&d.contentWindow&&o.frameRef.current.contentWindow.postMessage({type:s,...t,instanceId:r},o.origin)},[i]),w=e.useRef(0),T=e.useCallback(()=>`${Date.now()}-${++w.current}`,[]),$=e.useCallback(async(r,s,t={})=>new Promise((o,c)=>{const d=T(),h=(q,S)=>{delete E.current[d],S?c(S):o(q)};E.current[d]=h,g(r,"request",{callbackId:d,requestType:s,data:t})}),[g]),Z=e.useCallback((r,s)=>{g(r,"load-options",s)},[g]),M=e.useCallback((r,s)=>{g(r,"validate",s)},[g]),U=e.useMemo(()=>({registerFrame:y,unregisterFrame:C,sendMessage:g,sendRequest:$,loadOptions:Z,validate:M,hasHandler:I,readyFrames:l,addListener:(r,s,t)=>(u.current[r]||(u.current[r]={}),u.current[r][s]||(u.current[r][s]=[]),u.current[r][s].push(t),()=>{u.current[r][s]=u.current[r][s].filter(o=>o!==t)})}),[y,C,g,$,Z,M,I,l]);return e.createElement(k.Provider,{value:U},n)},L={},A=async n=>{try{const i=new URL(n).origin;if(L[i]!==void 0)return L[i];const l=await(await fetch(`${i}/mm-app-manifest.json`)).json();if(!l.version)throw new Error("Invalid manifest");return L[i]=l,l}catch{}return L[origin]=!1,!1},O=async n=>!!await A(n),x=(n,i,a)=>{const l=e.useContext(k);if(l===null)throw new Error("useEmbeddedEffect must be used within a MMEmbeddableZoneProvider");const m=e.useRef(a);e.useEffect(()=>{m.current=a},[a]),e.useEffect(()=>{if(!(!n||!i)){if(i.startsWith("key:")){const u=i.substring(4);return l.readyFrames[n]&&l.sendMessage(n,"subscribe-key",{keyChord:u}),l.addListener(n,`key-pressed:${u}`,(...b)=>m.current(...b))}return l.addListener(n,i,(...u)=>m.current(...u))}},[l,n,i])};v.propTypes={children:p.node.isRequired};const D=(j.default||j).iframe`
   width: 100%;
   height: 100%;
   border: none;
-  visibility: ${t=>t.$isReady?"visible":"hidden"};
-`,W=({id:t,src:u,path:i,onInit:l=()=>{},context:f={},params:d={},...m})=>{if("isConfiguring"in m)return console.error("isConfiguring must be passed via the params prop to MMEmbeddableZone"),null;if("colorMode"in f)return console.error("colorMode must be passed via the params prop to MMEmbeddableZone"),null;if("isFullScreen"in f)return console.error("isFullScreen must be passed via the params prop to MMEmbeddableZone"),null;const a=e.useRef(),[y,S]=e.useState(),[p,L]=e.useState(0),{registerFrame:g,unregisterFrame:T,sendMessage:M,manifestProxyBaseUrl:C}=e.useContext(k),[Z,q]=e.useState(!0),[$,r]=e.useState();e.useEffect(()=>{p&&M(t,"set-context",{context:{...f,colorMode:d.colorMode,isFullScreen:d.isFullScreen}})},[f,d.colorMode,d.isFullScreen,t,p]),e.useEffect(()=>{p&&(M(t,"set-params",{params:d}),M(t,"set-configuring",{isConfiguring:d.isConfiguring}))},[d,t,p]),e.useEffect(()=>{i!==void 0&&r((i==null?void 0:i.indexOf("/"))===0?i:`/${i}`)},[i]),e.useEffect(()=>{$===void 0||!p||M(t,"navigate",{path:$})},[$,p,t,M]),e.useEffect(()=>{if(!(!u||!t||!a))return(async()=>{const n=await P(u,C);if(q(n),n){const o=new URL(u);g(t,o.origin,a),l(),S(`${o.origin}/mm-embedded-interop?id=${t}&origin=${window.location.origin}`);return}})(),()=>{T(t)}},[u,t,g,a,C]),j(t,"ready",()=>L(n=>n+1));const s=e.useRef();return j(t,"heartbeat",()=>{s.current&&clearTimeout(s.current),s.current=setTimeout(()=>{if(a.current){const n=new URL(u);a.current.src=`${n.origin}/mm-embedded-interop?id=${t}&origin=${window.location.origin}`}},6e3)}),e.useEffect(()=>()=>{s.current&&clearTimeout(s.current)},[]),Z?e.createElement(z,{$isReady:p,ref:a,src:y,...m}):e.createElement("div",{style:{height:"100%",display:"flex",flex:1,alignItems:"center",justifyContent:"center"}},e.createElement("div",{style:{textAlign:"center"}},"Application must adhere to the MM App Manifest specification to be embedded."))};W.propTypes={id:w.string,src:w.string.isRequired,path:w.string,onInit:w.func},c.MMEmbeddableZone=W,c.MMEmbeddableZoneContext=k,c.MMEmbeddableZoneProvider=A,c.getAppInfo=O,c.testIsEmbeddable=P,c.useEmbeddedEffect=j,Object.defineProperty(c,Symbol.toStringTag,{value:"Module"})}));
+  visibility: ${n=>n.$isReady?"visible":"hidden"};
+`,P=({id:n,src:i,path:a,onInit:l=()=>{},context:m={},params:u={},skipManifestCheck:E=!1,readyTimeout:b=5e3,...I})=>{if("isConfiguring"in I)return console.error("isConfiguring must be passed via the params prop to MMEmbeddableZone"),null;if("colorMode"in m)return console.error("colorMode must be passed via the params prop to MMEmbeddableZone"),null;if("isFullScreen"in m)return console.error("isFullScreen must be passed via the params prop to MMEmbeddableZone"),null;const y=e.useRef(),[C,g]=e.useState(),[w,T]=e.useState(0),{registerFrame:$,unregisterFrame:Z,sendMessage:M}=e.useContext(k),[U,r]=e.useState(!0),[s,t]=e.useState(),o=e.useRef();e.useEffect(()=>{w&&M(n,"set-context",{context:{...m,colorMode:u.colorMode,isFullScreen:u.isFullScreen}})},[m,u.colorMode,u.isFullScreen,n,w]),e.useEffect(()=>{w&&(M(n,"set-params",{params:u}),M(n,"set-configuring",{isConfiguring:u.isConfiguring}))},[u,n,w]),e.useEffect(()=>{a!==void 0&&t((a==null?void 0:a.indexOf("/"))===0?a:`/${a}`)},[a]),e.useEffect(()=>{s===void 0||!w||M(n,"navigate",{path:s})},[s,w,n,M]),e.useEffect(()=>{if(!(!i||!n||!y)){if(E){const d=new URL(i);$(n,d.origin,y),l(),g(`${d.origin}/mm-embedded-interop?id=${n}&origin=${window.location.origin}`)}else(async()=>{const d=await O(i);if(r(d),d){const h=new URL(i);$(n,h.origin,y),l(),g(`${h.origin}/mm-embedded-interop?id=${n}&origin=${window.location.origin}`)}})();return()=>{Z(n)}}},[i,n,$,y,E]),e.useEffect(()=>{if(!(!E||!C||b==null))return o.current=setTimeout(()=>r(!1),b),()=>clearTimeout(o.current)},[C,E,b]),x(n,"ready",()=>{clearTimeout(o.current),T(d=>d+1)});const c=e.useRef();return x(n,"heartbeat",()=>{c.current&&clearTimeout(c.current),c.current=setTimeout(()=>{if(y.current){const d=new URL(i);y.current.src=`${d.origin}/mm-embedded-interop?id=${n}&origin=${window.location.origin}`}},6e3)}),e.useEffect(()=>()=>{c.current&&clearTimeout(c.current)},[]),U?e.createElement(D,{$isReady:w,ref:y,src:C,...I}):e.createElement("div",{style:{height:"100%",display:"flex",flex:1,alignItems:"center",justifyContent:"center"}},e.createElement("div",{style:{textAlign:"center"}},"Application must support the MM App Framework to be embedded."))};P.propTypes={id:p.string,src:p.string.isRequired,path:p.string,onInit:p.func,skipManifestCheck:p.bool,readyTimeout:p.number},f.MMEmbeddableZone=P,f.MMEmbeddableZoneContext=k,f.MMEmbeddableZoneProvider=v,f.getAppInfo=A,f.testIsEmbeddable=O,f.useEmbeddedEffect=x,Object.defineProperty(f,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@machinemetrics/mm-react-embeddable",
-  "version": "1.2.1-0",
+  "version": "1.3.0-1",
   "license": "MIT",
   "module": "dist/mm-react-embeddable.es.js",
   "main": "dist/mm-react-embeddable.cjs.js",