@machinemetrics/mm-react-embeddable 1.2.0 → 1.3.0-0

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

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

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

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

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

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