@machinemetrics/mm-react-embeddable 0.9.9 → 0.9.11

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

@@ -1,6 +1,6 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),l=require("prop-types"),P=require("styled-components"),p=e.createContext(null),M=({children:n})=>{const[c,i]=e.useState({}),t=e.useRef({}),f=e.useCallback((s,r,a)=>{i(o=>({...o,[s]:{origin:r,frameRef:a}}))},[]);e.useEffect(()=>{const s=r=>{var o,m;if(!((o=r==null?void 0:r.data)!=null&&o.instanceId))return;(((m=t.current[r.data.instanceId])==null?void 0:m[r.data.type])||[]).forEach(E=>E(r.data))};return window.addEventListener("message",s),()=>{window.removeEventListener("message",s)}},[c]);const u=e.useCallback((s,r,a)=>{const o=c[s];if(!o){console.warn(`Origin not set for id: ${s}. Unable to send message.`);return}o.frameRef.current.contentWindow.postMessage({type:r,...a,instanceId:s},o.origin)},[c]),d={registerFrame:f,sendMessage:u,addListener:(s,r,a)=>(t.current[s]||(t.current[s]={}),t.current[s][r]||(t.current[s][r]=[]),t.current[s][r].push(a),()=>{t.current[s][r]=t.current[s][r].filter(o=>o!==a)})};return e.createElement(p.Provider,{value:d},n)},y=(n,c,i)=>{const t=e.useContext(p);if(t===null)throw new Error("useEmbeddedEffect must be used within a MMEmbeddableZoneProvider");const f=e.useRef(i);return e.useEffect(()=>{f.current=i},[i]),e.useEffect(()=>{if(!(!n||!c))return t.addListener(n,c,(...u)=>f.current(...u))},[t,n,c]),e.useCallback((u,d)=>t.sendMessage(n,u,d),[t,n])};M.propTypes={children:l.node.isRequired};const x=P.iframe`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),m=require("prop-types"),h=require("styled-components"),p=t.createContext(null),w=({children:n})=>{const[i,c]=t.useState({}),s=t.useRef({}),[l,d]=t.useState(!0),[f,E]=t.useState({}),b=t.useCallback((r,e,o)=>{c(a=>({...a,[r]:{origin:e,frameRef:o}}))},[]),y=t.useCallback(async r=>{try{const e=new URL(r).origin;if(f[e]!==void 0)return f[e];if(!(await(await fetch(`${e}/mm-app-manifest.json`)).json()).version)throw new Error("Invalid manifest");return E(u=>({...u,[e]:!0})),!0}catch{d(!1)}return E(e=>({...e,[origin]:!1})),!1},[f]);t.useEffect(()=>{const r=e=>{var a,u;if(!((a=e==null?void 0:e.data)!=null&&a.instanceId))return;(((u=s.current[e.data.instanceId])==null?void 0:u[e.data.type])||[]).forEach(C=>C(e.data))};return window.addEventListener("message",r),()=>{window.removeEventListener("message",r)}},[i]);const g=t.useCallback((r,e,o)=>{const a=i[r];if(!a){console.warn(`Origin not set for id: ${r}. Unable to send message.`);return}a.frameRef.current.contentWindow.postMessage({type:e,...o,instanceId:r},a.origin)},[i]),M={testIsEmbeddable:y,isEmbeddable:l,registerFrame:b,sendMessage:g,addListener:(r,e,o)=>(s.current[r]||(s.current[r]={}),s.current[r][e]||(s.current[r][e]=[]),s.current[r][e].push(o),()=>{s.current[r][e]=s.current[r][e].filter(a=>a!==o)})};return t.createElement(p.Provider,{value:M},n)},R=(n,i,c)=>{const s=t.useContext(p);if(s===null)throw new Error("useEmbeddedEffect must be used within a MMEmbeddableZoneProvider");const l=t.useRef(c);return t.useEffect(()=>{l.current=c},[c]),t.useEffect(()=>{if(!(!n||!i))return s.addListener(n,i,(...d)=>l.current(...d))},[s,n,i]),t.useCallback((d,f)=>s.sendMessage(n,d,f),[s,n])};w.propTypes={children:m.node.isRequired};const v=h.default||h,x=v.iframe`
   width: 100%;
   height: 100%;
   border: none;
   visibility: ${n=>n.isready?"visible":"hidden"};
-`,h=({id:n,genericFrameFallback:c,src:i,path:t,onInit:f=()=>{},...u})=>{const d=e.useRef(),[s,r]=e.useState(),[a,o]=e.useState(0),{registerFrame:m,sendMessage:E}=e.useContext(p),[g,w]=e.useState(),[R,C]=e.useState(!1);return e.useEffect(()=>{t!==void 0&&(console.log(t),w(t))},[t]),e.useEffect(()=>{g===void 0||!a||E(n,"navigate",{path:g})},[g,a,n,E]),e.useEffect(()=>{!i||!n||!d||(async()=>{const b=new URL(i);m(n,b.origin,d),f();try{if((await(await fetch(`${b.origin}/mm-app-manifest.json`)).json()).version)r(`${b.origin}/mm-embedded-interop?id=${n}`);else throw Error()}catch{c?(r(i),o(1)):C(!0)}})()},[i,n,m,d]),y(n,"ready",()=>o(b=>b+1)),R?e.createElement("div",{style:{height:"100%",display:"flex",alignItems:"center",justifyContent:"center"}},e.createElement("div",{style:{textAlign:"center"}},"Application must adhere to the MM App Manifest specification to be embedded.")):e.createElement(x,{isready:a,ref:d,src:s,...u})};h.propTypes={id:l.string,genericFrameFallback:l.bool,src:l.string.isRequired,path:l.string,onInit:l.func};exports.MMEmbeddableZone=h;exports.MMEmbeddableZoneProvider=M;exports.useEmbeddedEffect=y;
+`,I=({id:n,src:i,path:c,onInit:s=()=>{},...l})=>{const d=t.useRef(),[f,E]=t.useState(),[b,y]=t.useState(0),{registerFrame:g,sendMessage:M,testIsEmbeddable:r,isEmbeddable:e}=t.useContext(p),[o,a]=t.useState();return t.useEffect(()=>{c!==void 0&&a(c)},[c]),t.useEffect(()=>{o===void 0||!b||M(n,"navigate",{path:o})},[o,b,n,M]),t.useEffect(()=>{!i||!n||!d||(async()=>{if(r(i)){const u=new URL(i);g(n,u.origin,d),s(),E(`${u.origin}/mm-embedded-interop?id=${n}`);return}})()},[i,n,g,d]),R(n,"ready",()=>y(u=>u+1)),e?t.createElement(x,{isready:b,ref:d,src:f,...l}):t.createElement("div",{style:{height:"100%",display:"flex",alignItems:"center",justifyContent:"center"}},t.createElement("div",{style:{textAlign:"center"}},"Application must adhere to the MM App Manifest specification to be embedded."))};I.propTypes={id:m.string,src:m.string.isRequired,path:m.string,onInit:m.func};exports.MMEmbeddableZone=I;exports.MMEmbeddableZoneContext=p;exports.MMEmbeddableZoneProvider=w;exports.useEmbeddedEffect=R;

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

@@ -1,99 +1,104 @@
-import E, { createContext as P, useState as b, useRef as M, useCallback as y, useEffect as l, useContext as R } from "react";
-import f from "prop-types";
-import C from "styled-components";
-const w = P(null), $ = ({ children: n }) => {
-  const [a, i] = b({}), e = M({}), u = y((r, t, o) => {
-    i((s) => ({ ...s, [r]: { origin: t, frameRef: o } }));
-  }, []);
-  l(() => {
-    const r = (t) => {
-      var s, m;
-      if (!((s = t == null ? void 0 : t.data) != null && s.instanceId))
+import y, { createContext as P, useState as l, useRef as R, useCallback as w, useEffect as m, useContext as x } from "react";
+import g from "prop-types";
+import L from "styled-components";
+const I = P(null), C = ({ children: r }) => {
+  const [i, d] = l({}), n = R({}), [f, a] = l(!0), [u, p] = l({}), b = w((t, e, o) => {
+    d((s) => ({ ...s, [t]: { origin: e, frameRef: o } }));
+  }, []), M = w(
+    async (t) => {
+      try {
+        const e = new URL(t).origin;
+        if (u[e] !== void 0)
+          return u[e];
+        if (!(await (await fetch(`${e}/mm-app-manifest.json`)).json()).version)
+          throw new Error("Invalid manifest");
+        return p((c) => ({ ...c, [e]: !0 })), !0;
+      } catch {
+        a(!1);
+      }
+      return p((e) => ({ ...e, [origin]: !1 })), !1;
+    },
+    [u]
+  );
+  m(() => {
+    const t = (e) => {
+      var s, c;
+      if (!((s = e == null ? void 0 : e.data) != null && s.instanceId))
         return;
-      (((m = e.current[t.data.instanceId]) == null ? void 0 : m[t.data.type]) || []).forEach((p) => p(t.data));
+      (((c = n.current[e.data.instanceId]) == null ? void 0 : c[e.data.type]) || []).forEach((v) => v(e.data));
     };
-    return window.addEventListener("message", r), () => {
-      window.removeEventListener("message", r);
+    return window.addEventListener("message", t), () => {
+      window.removeEventListener("message", t);
     };
-  }, [a]);
-  const d = y(
-    (r, t, o) => {
-      const s = a[r];
+  }, [i]);
+  const E = w(
+    (t, e, o) => {
+      const s = i[t];
       if (!s) {
-        console.warn(`Origin not set for id: ${r}. Unable to send message.`);
+        console.warn(`Origin not set for id: ${t}. Unable to send message.`);
         return;
       }
       s.frameRef.current.contentWindow.postMessage(
-        { type: t, ...o, instanceId: r },
+        { type: e, ...o, instanceId: t },
         s.origin
       );
     },
-    [a]
-  ), c = {
-    registerFrame: u,
-    sendMessage: d,
-    addListener: (r, t, o) => (e.current[r] || (e.current[r] = {}), e.current[r][t] || (e.current[r][t] = []), e.current[r][t].push(o), () => {
-      e.current[r][t] = e.current[r][t].filter((s) => s !== o);
+    [i]
+  ), h = {
+    testIsEmbeddable: M,
+    isEmbeddable: f,
+    registerFrame: b,
+    sendMessage: E,
+    addListener: (t, e, o) => (n.current[t] || (n.current[t] = {}), n.current[t][e] || (n.current[t][e] = []), n.current[t][e].push(o), () => {
+      n.current[t][e] = n.current[t][e].filter((s) => s !== o);
     })
   };
-  return /* @__PURE__ */ E.createElement(w.Provider, { value: c }, n);
-}, v = (n, a, i) => {
-  const e = R(w);
-  if (e === null)
+  return /* @__PURE__ */ y.createElement(I.Provider, { value: h }, r);
+}, $ = (r, i, d) => {
+  const n = x(I);
+  if (n === null)
     throw new Error(
       "useEmbeddedEffect must be used within a MMEmbeddableZoneProvider"
     );
-  const u = M(i);
-  return l(() => {
-    u.current = i;
-  }, [i]), l(() => {
-    if (!(!n || !a))
-      return e.addListener(
-        n,
-        a,
-        (...d) => u.current(...d)
+  const f = R(d);
+  return m(() => {
+    f.current = d;
+  }, [d]), m(() => {
+    if (!(!r || !i))
+      return n.addListener(
+        r,
+        i,
+        (...a) => f.current(...a)
       );
-  }, [e, n, a]), y(
-    (d, c) => e.sendMessage(n, d, c),
-    [e, n]
+  }, [n, r, i]), w(
+    (a, u) => n.sendMessage(r, a, u),
+    [n, r]
   );
 };
-$.propTypes = {
-  children: f.node.isRequired
+C.propTypes = {
+  children: g.node.isRequired
 };
-const Z = C.iframe`
+const F = L.default || L, U = F.iframe`
   width: 100%;
   height: 100%;
   border: none;
-  visibility: ${(n) => n.isready ? "visible" : "hidden"};
-`, j = ({
-  id: n,
-  genericFrameFallback: a,
-  src: i,
-  path: e,
-  onInit: u = () => {
-  },
-  ...d
-}) => {
-  const c = M(), [r, t] = b(), [o, s] = b(0), { registerFrame: m, sendMessage: p } = R(w), [h, I] = b(), [x, L] = b(!1);
-  return l(() => {
-    e !== void 0 && (console.log(e), I(e));
-  }, [e]), l(() => {
-    h === void 0 || !o || p(n, "navigate", { path: h });
-  }, [h, o, n, p]), l(() => {
-    !i || !n || !c || (async () => {
-      const g = new URL(i);
-      m(n, g.origin, c), u();
-      try {
-        if ((await (await fetch(`${g.origin}/mm-app-manifest.json`)).json()).version)
-          t(`${g.origin}/mm-embedded-interop?id=${n}`);
-        else
-          throw Error();
-      } catch {
-        a ? (t(i), s(1)) : L(!0);
+  visibility: ${(r) => r.isready ? "visible" : "hidden"};
+`, Z = ({ id: r, src: i, path: d, onInit: n = () => {
+}, ...f }) => {
+  const a = R(), [u, p] = l(), [b, M] = l(0), { registerFrame: E, sendMessage: h, testIsEmbeddable: t, isEmbeddable: e } = x(I), [o, s] = l();
+  return m(() => {
+    d !== void 0 && s(d);
+  }, [d]), m(() => {
+    o === void 0 || !b || h(r, "navigate", { path: o });
+  }, [o, b, r, h]), m(() => {
+    !i || !r || !a || (async () => {
+      if (t(i)) {
+        const c = new URL(i);
+        E(r, c.origin, a), n(), p(`${c.origin}/mm-embedded-interop?id=${r}`);
+        return;
       }
     })();
-  }, [i, n, m, c]), v(n, "ready", () => s((g) => g + 1)), x ? /* @__PURE__ */ E.createElement(
+  }, [i, r, E, a]), $(r, "ready", () => M((c) => c + 1)), e ? /* @__PURE__ */ y.createElement(U, { isready: b, ref: a, src: u, ...f }) : /* @__PURE__ */ y.createElement(
     "div",
     {
       style: {
@@ -103,18 +108,18 @@ const Z = C.iframe`
         justifyContent: "center"
       }
     },
-    /* @__PURE__ */ E.createElement("div", { style: { textAlign: "center" } }, "Application must adhere to the MM App Manifest specification to be embedded.")
-  ) : /* @__PURE__ */ E.createElement(Z, { isready: o, ref: c, src: r, ...d });
+    /* @__PURE__ */ y.createElement("div", { style: { textAlign: "center" } }, "Application must adhere to the MM App Manifest specification to be embedded.")
+  );
 };
-j.propTypes = {
-  id: f.string,
-  genericFrameFallback: f.bool,
-  src: f.string.isRequired,
-  path: f.string,
-  onInit: f.func
+Z.propTypes = {
+  id: g.string,
+  src: g.string.isRequired,
+  path: g.string,
+  onInit: g.func
 };
 export {
-  j as MMEmbeddableZone,
-  $ as MMEmbeddableZoneProvider,
-  v as useEmbeddedEffect
+  Z as MMEmbeddableZone,
+  I as MMEmbeddableZoneContext,
+  C as MMEmbeddableZoneProvider,
+  $ as useEmbeddedEffect
 };

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

@@ -1,6 +1,6 @@
-(function(i,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("react"),require("prop-types"),require("styled-components")):typeof define=="function"&&define.amd?define(["exports","react","prop-types","styled-components"],e):(i=typeof globalThis<"u"?globalThis:i||self,e(i["mm-react-embeddable"]={},i.React,i.PropTypes,i.styled))})(this,function(i,e,l,C){"use strict";const p=e.createContext(null),y=({children:s})=>{const[f,u]=e.useState({}),t=e.useRef({}),m=e.useCallback((r,n,d)=>{u(o=>({...o,[r]:{origin:n,frameRef:d}}))},[]);e.useEffect(()=>{const r=n=>{var o,b;if(!((o=n==null?void 0:n.data)!=null&&o.instanceId))return;(((b=t.current[n.data.instanceId])==null?void 0:b[n.data.type])||[]).forEach(g=>g(n.data))};return window.addEventListener("message",r),()=>{window.removeEventListener("message",r)}},[f]);const c=e.useCallback((r,n,d)=>{const o=f[r];if(!o){console.warn(`Origin not set for id: ${r}. Unable to send message.`);return}o.frameRef.current.contentWindow.postMessage({type:n,...d,instanceId:r},o.origin)},[f]),a={registerFrame:m,sendMessage:c,addListener:(r,n,d)=>(t.current[r]||(t.current[r]={}),t.current[r][n]||(t.current[r][n]=[]),t.current[r][n].push(d),()=>{t.current[r][n]=t.current[r][n].filter(o=>o!==d)})};return e.createElement(p.Provider,{value:a},s)},M=(s,f,u)=>{const t=e.useContext(p);if(t===null)throw new Error("useEmbeddedEffect must be used within a MMEmbeddableZoneProvider");const m=e.useRef(u);return e.useEffect(()=>{m.current=u},[u]),e.useEffect(()=>{if(!(!s||!f))return t.addListener(s,f,(...c)=>m.current(...c))},[t,s,f]),e.useCallback((c,a)=>t.sendMessage(s,c,a),[t,s])};y.propTypes={children:l.node.isRequired};const I=C.iframe`
+(function(o,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("react"),require("prop-types"),require("styled-components")):typeof define=="function"&&define.amd?define(["exports","react","prop-types","styled-components"],e):(o=typeof globalThis<"u"?globalThis:o||self,e(o["mm-react-embeddable"]={},o.React,o.PropTypes,o.styled))})(this,function(o,e,b,w){"use strict";const g=e.createContext(null),I=({children:r})=>{const[d,f]=e.useState({}),s=e.useRef({}),[m,a]=e.useState(!0),[l,p]=e.useState({}),E=e.useCallback((n,t,u)=>{f(i=>({...i,[n]:{origin:t,frameRef:u}}))},[]),M=e.useCallback(async n=>{try{const t=new URL(n).origin;if(l[t]!==void 0)return l[t];if(!(await(await fetch(`${t}/mm-app-manifest.json`)).json()).version)throw new Error("Invalid manifest");return p(c=>({...c,[t]:!0})),!0}catch{a(!1)}return p(t=>({...t,[origin]:!1})),!1},[l]);e.useEffect(()=>{const n=t=>{var i,c;if(!((i=t==null?void 0:t.data)!=null&&i.instanceId))return;(((c=s.current[t.data.instanceId])==null?void 0:c[t.data.type])||[]).forEach(S=>S(t.data))};return window.addEventListener("message",n),()=>{window.removeEventListener("message",n)}},[d]);const y=e.useCallback((n,t,u)=>{const i=d[n];if(!i){console.warn(`Origin not set for id: ${n}. Unable to send message.`);return}i.frameRef.current.contentWindow.postMessage({type:t,...u,instanceId:n},i.origin)},[d]),h={testIsEmbeddable:M,isEmbeddable:m,registerFrame:E,sendMessage:y,addListener:(n,t,u)=>(s.current[n]||(s.current[n]={}),s.current[n][t]||(s.current[n][t]=[]),s.current[n][t].push(u),()=>{s.current[n][t]=s.current[n][t].filter(i=>i!==u)})};return e.createElement(g.Provider,{value:h},r)},C=(r,d,f)=>{const s=e.useContext(g);if(s===null)throw new Error("useEmbeddedEffect must be used within a MMEmbeddableZoneProvider");const m=e.useRef(f);return e.useEffect(()=>{m.current=f},[f]),e.useEffect(()=>{if(!(!r||!d))return s.addListener(r,d,(...a)=>m.current(...a))},[s,r,d]),e.useCallback((a,l)=>s.sendMessage(r,a,l),[s,r])};I.propTypes={children:b.node.isRequired};const L=(w.default||w).iframe`
   width: 100%;
   height: 100%;
   border: none;
-  visibility: ${s=>s.isready?"visible":"hidden"};
-`,w=({id:s,genericFrameFallback:f,src:u,path:t,onInit:m=()=>{},...c})=>{const a=e.useRef(),[r,n]=e.useState(),[d,o]=e.useState(0),{registerFrame:b,sendMessage:g}=e.useContext(p),[h,x]=e.useState(),[L,S]=e.useState(!1);return e.useEffect(()=>{t!==void 0&&(console.log(t),x(t))},[t]),e.useEffect(()=>{h===void 0||!d||g(s,"navigate",{path:h})},[h,d,s,g]),e.useEffect(()=>{!u||!s||!a||(async()=>{const E=new URL(u);b(s,E.origin,a),m();try{if((await(await fetch(`${E.origin}/mm-app-manifest.json`)).json()).version)n(`${E.origin}/mm-embedded-interop?id=${s}`);else throw Error()}catch{f?(n(u),o(1)):S(!0)}})()},[u,s,b,a]),M(s,"ready",()=>o(E=>E+1)),L?e.createElement("div",{style:{height:"100%",display:"flex",alignItems:"center",justifyContent:"center"}},e.createElement("div",{style:{textAlign:"center"}},"Application must adhere to the MM App Manifest specification to be embedded.")):e.createElement(I,{isready:d,ref:a,src:r,...c})};w.propTypes={id:l.string,genericFrameFallback:l.bool,src:l.string.isRequired,path:l.string,onInit:l.func},i.MMEmbeddableZone=w,i.MMEmbeddableZoneProvider=y,i.useEmbeddedEffect=M,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})});
+  visibility: ${r=>r.isready?"visible":"hidden"};
+`,v=({id:r,src:d,path:f,onInit:s=()=>{},...m})=>{const a=e.useRef(),[l,p]=e.useState(),[E,M]=e.useState(0),{registerFrame:y,sendMessage:h,testIsEmbeddable:n,isEmbeddable:t}=e.useContext(g),[u,i]=e.useState();return e.useEffect(()=>{f!==void 0&&i(f)},[f]),e.useEffect(()=>{u===void 0||!E||h(r,"navigate",{path:u})},[u,E,r,h]),e.useEffect(()=>{!d||!r||!a||(async()=>{if(n(d)){const c=new URL(d);y(r,c.origin,a),s(),p(`${c.origin}/mm-embedded-interop?id=${r}`);return}})()},[d,r,y,a]),C(r,"ready",()=>M(c=>c+1)),t?e.createElement(L,{isready:E,ref:a,src:l,...m}):e.createElement("div",{style:{height:"100%",display:"flex",alignItems:"center",justifyContent:"center"}},e.createElement("div",{style:{textAlign:"center"}},"Application must adhere to the MM App Manifest specification to be embedded."))};v.propTypes={id:b.string,src:b.string.isRequired,path:b.string,onInit:b.func},o.MMEmbeddableZone=v,o.MMEmbeddableZoneContext=g,o.MMEmbeddableZoneProvider=I,o.useEmbeddedEffect=C,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@machinemetrics/mm-react-embeddable",
-  "version": "0.9.9",
+  "version": "0.9.11",
   "license": "MIT",
   "module": "dist/mm-react-embeddable.es.js",
   "main": "dist/mm-react-embeddable.cjs.js",
@@ -16,7 +16,7 @@
     "node": ">=18"
   },
   "scripts": {
-    "build": "vite build",
+    "build": "vite build --debug",
     "start": "vite build --watch"
   },
   "files": [