@machinemetrics/mm-react-embeddable 0.9.5 → 0.9.7

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"),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(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 P=I.iframe`
+"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`
   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(MMEmbeddedWrapperContext),[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()).manifestVersion)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(P,{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;
+`,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()).manifestVersion)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;

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

@@ -1,7 +1,7 @@
-import E, { createContext as F, useState as b, useRef as M, useCallback as y, useEffect as l, useContext as w } from "react";
+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 P from "styled-components";
-const R = F(null), $ = ({ children: n }) => {
+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 } }));
   }, []);
@@ -10,7 +10,7 @@ const R = F(null), $ = ({ children: n }) => {
       var s, m;
       if (!((s = t == null ? void 0 : t.data) != null && s.instanceId))
         return;
-      (((m = e.current[t.data.instanceId]) == null ? void 0 : m[t.data.type]) || []).forEach((g) => g(t.data));
+      (((m = e.current[t.data.instanceId]) == null ? void 0 : m[t.data.type]) || []).forEach((p) => p(t.data));
     };
     return window.addEventListener("message", r), () => {
       window.removeEventListener("message", r);
@@ -36,9 +36,9 @@ const R = F(null), $ = ({ children: n }) => {
       e.current[r][t] = e.current[r][t].filter((s) => s !== o);
     })
   };
-  return /* @__PURE__ */ E.createElement(R.Provider, { value: c }, n);
+  return /* @__PURE__ */ E.createElement(w.Provider, { value: c }, n);
 }, Z = (n, a, i) => {
-  const e = w(R);
+  const e = R(w);
   if (e === null)
     throw new Error(
       "useEmbeddedEffect must be used within a MMEmbeddableZoneProvider"
@@ -61,7 +61,7 @@ const R = F(null), $ = ({ children: n }) => {
 $.propTypes = {
   children: f.node.isRequired
 };
-const j = P.iframe`
+const j = C.iframe`
   width: 100%;
   height: 100%;
   border: none;
@@ -75,25 +75,25 @@ const j = P.iframe`
   },
   ...d
 }) => {
-  const c = M(), [r, t] = b(), [o, s] = b(0), { registerFrame: m, sendMessage: g } = w(MMEmbeddedWrapperContext), [h, x] = b(), [I, L] = b(!1);
+  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), x(e));
+    e !== void 0 && (console.log(e), I(e));
   }, [e]), l(() => {
-    h === void 0 || !o || g(n, "navigate", { path: h });
-  }, [h, o, n, g]), l(() => {
+    h === void 0 || !o || p(n, "navigate", { path: h });
+  }, [h, o, n, p]), l(() => {
     !i || !n || !c || (async () => {
-      const p = new URL(i);
-      m(n, p.origin, c), u();
+      const g = new URL(i);
+      m(n, g.origin, c), u();
       try {
-        if ((await (await fetch(`${p.origin}/mm-app-manifest.json`)).json()).manifestVersion)
-          t(`${p.origin}/mm-embedded-interop?id=${n}`);
+        if ((await (await fetch(`${g.origin}/mm-app-manifest.json`)).json()).manifestVersion)
+          t(`${g.origin}/mm-embedded-interop?id=${n}`);
         else
           throw Error();
       } catch {
         a ? (t(i), s(1)) : L(!0);
       }
     })();
-  }, [i, n, m, c]), Z(n, "ready", () => s((p) => p + 1)), I ? /* @__PURE__ */ E.createElement(
+  }, [i, n, m, c]), Z(n, "ready", () => s((g) => g + 1)), x ? /* @__PURE__ */ E.createElement(
     "div",
     {
       style: {

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 M=e.createContext(null),h=({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(M.Provider,{value:a},s)},y=(s,f,u)=>{const t=e.useContext(M);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])};h.propTypes={children:l.node.isRequired};const x=C.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,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`
   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:p}=e.useContext(MMEmbeddedWrapperContext),[g,I]=e.useState(),[L,S]=e.useState(!1);return e.useEffect(()=>{t!==void 0&&(console.log(t),I(t))},[t]),e.useEffect(()=>{g===void 0||!d||p(s,"navigate",{path:g})},[g,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]),y(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(x,{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=h,i.useEmbeddedEffect=y,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})});
+`,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()).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(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"})});

package/package.json

@@ -1,10 +1,16 @@
 {
   "name": "@machinemetrics/mm-react-embeddable",
-  "version": "0.9.5",
+  "version": "0.9.7",
   "license": "MIT",
   "module": "dist/mm-react-embeddable.es.js",
   "main": "dist/mm-react-embeddable.cjs.js",
   "source": "src/index.js",
+  "exports": {
+    ".": {
+      "imports": "./dist/mm-react-embeddable.es.js",
+      "require": "./dist/mm-react-embeddable.cjs.js"
+    }
+  },
   "type": "module",
   "engines": {
     "node": ">=18"