@machinemetrics/mm-react-embeddable 0.9.3 → 0.9.4

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

@@ -1,6 +1,6 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react"),l=require("prop-types"),I=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(g=>g(r.data))};return window.addEventListener("message",s),()=>{window.removeEventListener("message",s)}},[c]);const d=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]),u={registerFrame:f,sendMessage:d,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:u},n)},h=(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,(...d)=>f.current(...d))},[t,n,c]),e.useCallback((d,u)=>t.sendMessage(n,d,u),[t,n])};M.propTypes={children:l.node.isRequired};const L=I.iframe`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),l=require("prop-types"),I=require("styled-components"),h=e.createContext(null),p=({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(h.Provider,{value:d},n)},M=(n,c,i)=>{const t=e.useContext(h);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])};p.propTypes={children:l.node.isRequired};const P=I.iframe`
   width: 100%;
   height: 100%;
   border: none;
   visibility: ${n=>n.isready?"visible":"hidden"};
-`,y=({id:n,genericFrameFallback:c,src:i,path:t,onInit:f=()=>{},...d})=>{const u=e.useRef(),[s,r]=e.useState(),[a,o]=e.useState(0),{registerFrame:m,sendMessage:g}=e.useContext(MMEmbeddedWrapperContext),[E,w]=e.useState(),[R,x]=e.useState(!1);return e.useEffect(()=>{t!==void 0&&(console.log(t),w(t))},[t]),e.useEffect(()=>{E===void 0||!a||g(n,"navigate",{path:E})},[E,a,n,g]),e.useEffect(()=>{!i||!n||!u||(async()=>{const b=new URL(i);m(n,b.origin,u),f();try{if((await(await fetch(`${b.origin}/mm-app-manifest.json`)).json()).manifestVersion)r(`${b.origin}/mm-embedded-interop?id=${n}`);else throw Error()}catch{c?(r(i),o(1)):x(!0)}})()},[i,n,m,u]),h(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(L,{isready:a,ref:u,src:s,...d})};y.propTypes={id:l.string,genericFrameFallback:l.bool,src:l.string.isRequired,path:l.string,onInit:l.func};const P={MMEmbeddableZone:y,MMEmbeddableZoneProvider:M,useEmbeddedEffect:h};exports.default=P;
+`,y=({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(MMEmbeddedWrapperContext),[g,w]=e.useState(),[R,x]=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()).manifestVersion)r(`${b.origin}/mm-embedded-interop?id=${n}`);else throw Error()}catch{c?(r(i),o(1)):x(!0)}})()},[i,n,m,d]),M(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(P,{isready:a,ref:d,src:s,...u})};y.propTypes={id:l.string,genericFrameFallback:l.bool,src:l.string.isRequired,path:l.string,onInit:l.func};module.exports={MMEmbeddableZone:y,MMEmbeddableZoneProvider:p,useEmbeddedEffect:M};exports.MMEmbeddableZone=y;exports.MMEmbeddableZoneProvider=p;exports.useEmbeddedEffect=M;

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

@@ -113,11 +113,13 @@ L.propTypes = {
   path: f.string,
   onInit: f.func
 };
-const W = {
+module.exports = {
   MMEmbeddableZone: L,
   MMEmbeddableZoneProvider: x,
   useEmbeddedEffect: I
 };
 export {
-  W as default
+  L as MMEmbeddableZone,
+  x as MMEmbeddableZoneProvider,
+  I as useEmbeddedEffect
 };

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

@@ -1,6 +1,6 @@
-(function(u,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):(u=typeof globalThis<"u"?globalThis:u||self,e(u["mm-react-embeddable"]={},u.React,u.PropTypes,u.styled))})(this,function(u,e,l,x){"use strict";const h=e.createContext(null),y=({children:s})=>{const[f,d]=e.useState({}),t=e.useRef({}),m=e.useCallback((r,n,i)=>{d(o=>({...o,[r]:{origin:n,frameRef:i}}))},[]);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(E=>E(n.data))};return window.addEventListener("message",r),()=>{window.removeEventListener("message",r)}},[f]);const c=e.useCallback((r,n,i)=>{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,...i,instanceId:r},o.origin)},[f]),a={registerFrame:m,sendMessage:c,addListener:(r,n,i)=>(t.current[r]||(t.current[r]={}),t.current[r][n]||(t.current[r][n]=[]),t.current[r][n].push(i),()=>{t.current[r][n]=t.current[r][n].filter(o=>o!==i)})};return e.createElement(h.Provider,{value:a},s)},M=(s,f,d)=>{const t=e.useContext(h);if(t===null)throw new Error("useEmbeddedEffect must be used within a MMEmbeddableZoneProvider");const m=e.useRef(d);return e.useEffect(()=>{m.current=d},[d]),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 C=x.iframe`
+(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,x){"use strict";const w=e.createContext(null),g=({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(p=>p(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(w.Provider,{value:a},s)},M=(s,f,u)=>{const t=e.useContext(w);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])};g.propTypes={children:l.node.isRequired};const C=x.iframe`
   width: 100%;
   height: 100%;
   border: none;
   visibility: ${s=>s.isready?"visible":"hidden"};
-`,w=({id:s,genericFrameFallback:f,src:d,path:t,onInit:m=()=>{},...c})=>{const a=e.useRef(),[r,n]=e.useState(),[i,o]=e.useState(0),{registerFrame:b,sendMessage:E}=e.useContext(MMEmbeddedWrapperContext),[g,L]=e.useState(),[S,F]=e.useState(!1);return e.useEffect(()=>{t!==void 0&&(console.log(t),L(t))},[t]),e.useEffect(()=>{g===void 0||!i||E(s,"navigate",{path:g})},[g,i,s,E]),e.useEffect(()=>{!d||!s||!a||(async()=>{const p=new URL(d);b(s,p.origin,a),m();try{if((await(await fetch(`${p.origin}/mm-app-manifest.json`)).json()).manifestVersion)n(`${p.origin}/mm-embedded-interop?id=${s}`);else throw Error()}catch{f?(n(d),o(1)):F(!0)}})()},[d,s,b,a]),M(s,"ready",()=>o(p=>p+1)),S?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(C,{isready:i,ref:a,src:r,...c})};w.propTypes={id:l.string,genericFrameFallback:l.bool,src:l.string.isRequired,path:l.string,onInit:l.func};const I={MMEmbeddableZone:w,MMEmbeddableZoneProvider:y,useEmbeddedEffect:M};u.default=I,Object.defineProperties(u,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+`,h=({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:p}=e.useContext(MMEmbeddedWrapperContext),[y,I]=e.useState(),[L,S]=e.useState(!1);return e.useEffect(()=>{t!==void 0&&(console.log(t),I(t))},[t]),e.useEffect(()=>{y===void 0||!d||p(s,"navigate",{path:y})},[y,d,s,p]),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()).manifestVersion)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(C,{isready:d,ref:a,src:r,...c})};h.propTypes={id:l.string,genericFrameFallback:l.bool,src:l.string.isRequired,path:l.string,onInit:l.func},module.exports={MMEmbeddableZone:h,MMEmbeddableZoneProvider:g,useEmbeddedEffect:M},i.MMEmbeddableZone=h,i.MMEmbeddableZoneProvider=g,i.useEmbeddedEffect=M,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})});

package/package.json

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