@machinemetrics/mm-react-embeddable 0.9.14 → 0.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),m=require("prop-types"),R=require("styled-components"),p=t.createContext(null),I=({children:n})=>{const[o,c]=t.useState({}),s=t.useRef({}),u=t.useCallback((r,e,d)=>{c(a=>({...a,[r]:{origin:e,frameRef:d}}))},[]);t.useEffect(()=>{const r=e=>{var a,f;if(!((a=e==null?void 0:e.data)!=null&&a.instanceId))return;(((f=s.current[e.data.instanceId])==null?void 0:f[e.data.type])||[]).forEach(M=>M(e.data))};return window.addEventListener("message",r),()=>{window.removeEventListener("message",r)}},[o]);const i=t.useCallback((r,e,d)=>{const a=o[r];if(!a){console.warn(`Origin not set for id: ${r}. Unable to send message.`);return}a.frameRef.current.contentWindow.postMessage({type:e,...d,instanceId:r},a.origin)},[o]),b=t.useCallback((r,e)=>{i(r,"load-options",e)},[i]),l=t.useCallback((r,e)=>{i(r,"validate",e)},[i]),y={registerFrame:u,sendMessage:i,loadOptions:b,validate:l,addListener:(r,e,d)=>(s.current[r]||(s.current[r]={}),s.current[r][e]||(s.current[r][e]=[]),s.current[r][e].push(d),()=>{s.current[r][e]=s.current[r][e].filter(a=>a!==d)})};return t.createElement(p.Provider,{value:y},n)},g={},v=async n=>{try{const o=new URL(n).origin;if(g[o]!==void 0)return g[o];const s=await(await fetch(`${o}/mm-app-manifest.json`)).json();if(!s.version)throw new Error("Invalid manifest");return g[o]=s,s}catch{}return g[origin]=!1,!1},C=async n=>!!await v(n),x=(n,o,c)=>{const s=t.useContext(p);if(s===null)throw new Error("useEmbeddedEffect must be used within a MMEmbeddableZoneProvider");const u=t.useRef(c);return t.useEffect(()=>{u.current=c},[c]),t.useEffect(()=>{if(!(!n||!o))return s.addListener(n,o,(...i)=>u.current(...i))},[s,n,o]),t.useCallback((i,b)=>s.sendMessage(n,i,b),[s,n])};I.propTypes={children:m.node.isRequired};const S=R.default||R,Z=S.iframe`
|
|
2
2
|
width: 100%;
|
|
3
3
|
height: 100%;
|
|
4
4
|
border: none;
|
|
5
|
-
visibility: ${
|
|
6
|
-
`,
|
|
5
|
+
visibility: ${n=>n.$isReady?"visible":"hidden"};
|
|
6
|
+
`,L=({id:n,src:o,path:c,onInit:s=()=>{},context:u,isConfiguring:i,...b})=>{const l=t.useRef(),[y,r]=t.useState(),[e,d]=t.useState(0),{registerFrame:a,sendMessage:f}=t.useContext(p),[M,P]=t.useState(!0),[w,$]=t.useState();return t.useEffect(()=>{e&&f(n,"set-context",{context:u})},[u,n,e]),t.useEffect(()=>{c!==void 0&&$(c)},[c]),t.useEffect(()=>{w===void 0||!e||f(n,"navigate",{path:w})},[w,e,n,f]),t.useEffect(()=>{e&&f(n,"set-configuring",{isConfiguring:i})},[e,i]),t.useEffect(()=>{!o||!n||!l||(async()=>{const E=await C(o);if(P(E),E){const h=new URL(o);a(n,h.origin,l),s(),r(`${h.origin}/mm-embedded-interop?id=${n}&origin=${window.location.origin}`);return}})()},[o,n,a,l]),x(n,"ready",()=>d(E=>E+1)),M?t.createElement(Z,{$isReady:e,ref:l,src:y,...b}):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."))};L.propTypes={id:m.string,src:m.string.isRequired,path:m.string,onInit:m.func};exports.MMEmbeddableZone=L;exports.MMEmbeddableZoneContext=p;exports.MMEmbeddableZoneProvider=I;exports.getAppInfo=v;exports.testIsEmbeddable=C;exports.useEmbeddedEffect=x;
|
|
@@ -1,104 +1,126 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
const
|
|
5
|
-
const [
|
|
6
|
-
a((
|
|
1
|
+
import y, { createContext as C, useState as g, useRef as I, useCallback as p, useEffect as d, useContext as x } from "react";
|
|
2
|
+
import b from "prop-types";
|
|
3
|
+
import $ from "styled-components";
|
|
4
|
+
const v = C(null), F = ({ children: t }) => {
|
|
5
|
+
const [s, a] = g({}), n = I({}), u = p((r, e, c) => {
|
|
6
|
+
a((o) => ({ ...o, [r]: { origin: e, frameRef: c } }));
|
|
7
7
|
}, []);
|
|
8
|
-
|
|
9
|
-
const
|
|
10
|
-
var
|
|
11
|
-
if (!((
|
|
8
|
+
d(() => {
|
|
9
|
+
const r = (e) => {
|
|
10
|
+
var o, f;
|
|
11
|
+
if (!((o = e == null ? void 0 : e.data) != null && o.instanceId))
|
|
12
12
|
return;
|
|
13
|
-
(((
|
|
13
|
+
(((f = n.current[e.data.instanceId]) == null ? void 0 : f[e.data.type]) || []).forEach((M) => M(e.data));
|
|
14
14
|
};
|
|
15
|
-
return window.addEventListener("message",
|
|
16
|
-
window.removeEventListener("message",
|
|
15
|
+
return window.addEventListener("message", r), () => {
|
|
16
|
+
window.removeEventListener("message", r);
|
|
17
17
|
};
|
|
18
|
-
}, [
|
|
19
|
-
const
|
|
20
|
-
(
|
|
21
|
-
const
|
|
22
|
-
if (!
|
|
23
|
-
console.warn(`Origin not set for id: ${
|
|
18
|
+
}, [s]);
|
|
19
|
+
const i = p(
|
|
20
|
+
(r, e, c) => {
|
|
21
|
+
const o = s[r];
|
|
22
|
+
if (!o) {
|
|
23
|
+
console.warn(`Origin not set for id: ${r}. Unable to send message.`);
|
|
24
24
|
return;
|
|
25
25
|
}
|
|
26
|
-
|
|
27
|
-
{ type:
|
|
28
|
-
|
|
26
|
+
o.frameRef.current.contentWindow.postMessage(
|
|
27
|
+
{ type: e, ...c, instanceId: r },
|
|
28
|
+
o.origin
|
|
29
29
|
);
|
|
30
30
|
},
|
|
31
|
-
[
|
|
32
|
-
),
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
31
|
+
[s]
|
|
32
|
+
), m = p(
|
|
33
|
+
(r, e) => {
|
|
34
|
+
i(r, "load-options", e);
|
|
35
|
+
},
|
|
36
|
+
[i]
|
|
37
|
+
), l = p(
|
|
38
|
+
(r, e) => {
|
|
39
|
+
i(r, "validate", e);
|
|
40
|
+
},
|
|
41
|
+
[i]
|
|
42
|
+
), h = {
|
|
43
|
+
registerFrame: u,
|
|
44
|
+
sendMessage: i,
|
|
45
|
+
loadOptions: m,
|
|
46
|
+
validate: l,
|
|
47
|
+
addListener: (r, e, c) => (n.current[r] || (n.current[r] = {}), n.current[r][e] || (n.current[r][e] = []), n.current[r][e].push(c), () => {
|
|
48
|
+
n.current[r][e] = n.current[r][e].filter((o) => o !== c);
|
|
38
49
|
})
|
|
39
50
|
};
|
|
40
|
-
return /* @__PURE__ */
|
|
41
|
-
},
|
|
51
|
+
return /* @__PURE__ */ y.createElement(v.Provider, { value: h }, t);
|
|
52
|
+
}, w = {}, U = async (t) => {
|
|
42
53
|
try {
|
|
43
|
-
const
|
|
44
|
-
if (
|
|
45
|
-
return
|
|
46
|
-
|
|
54
|
+
const s = new URL(t).origin;
|
|
55
|
+
if (w[s] !== void 0)
|
|
56
|
+
return w[s];
|
|
57
|
+
const n = await (await fetch(`${s}/mm-app-manifest.json`)).json();
|
|
58
|
+
if (!n.version)
|
|
47
59
|
throw new Error("Invalid manifest");
|
|
48
|
-
return
|
|
60
|
+
return w[s] = n, n;
|
|
49
61
|
} catch {
|
|
50
62
|
}
|
|
51
|
-
return
|
|
52
|
-
},
|
|
53
|
-
const
|
|
54
|
-
if (
|
|
63
|
+
return w[origin] = !1, !1;
|
|
64
|
+
}, Z = async (t) => !!await U(t), j = (t, s, a) => {
|
|
65
|
+
const n = x(v);
|
|
66
|
+
if (n === null)
|
|
55
67
|
throw new Error(
|
|
56
68
|
"useEmbeddedEffect must be used within a MMEmbeddableZoneProvider"
|
|
57
69
|
);
|
|
58
|
-
const
|
|
59
|
-
return
|
|
60
|
-
|
|
61
|
-
}, [a
|
|
62
|
-
if (!(!
|
|
63
|
-
return
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
(...
|
|
70
|
+
const u = I(a);
|
|
71
|
+
return d(() => {
|
|
72
|
+
u.current = a;
|
|
73
|
+
}, [a]), d(() => {
|
|
74
|
+
if (!(!t || !s))
|
|
75
|
+
return n.addListener(
|
|
76
|
+
t,
|
|
77
|
+
s,
|
|
78
|
+
(...i) => u.current(...i)
|
|
67
79
|
);
|
|
68
|
-
}, [
|
|
69
|
-
(
|
|
70
|
-
[
|
|
80
|
+
}, [n, t, s]), p(
|
|
81
|
+
(i, m) => n.sendMessage(t, i, m),
|
|
82
|
+
[n, t]
|
|
71
83
|
);
|
|
72
84
|
};
|
|
73
|
-
|
|
74
|
-
children:
|
|
85
|
+
F.propTypes = {
|
|
86
|
+
children: b.node.isRequired
|
|
75
87
|
};
|
|
76
|
-
const
|
|
88
|
+
const O = $.default || $, T = O.iframe`
|
|
77
89
|
width: 100%;
|
|
78
90
|
height: 100%;
|
|
79
91
|
border: none;
|
|
80
|
-
visibility: ${(
|
|
81
|
-
`, q = ({
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
92
|
+
visibility: ${(t) => t.$isReady ? "visible" : "hidden"};
|
|
93
|
+
`, q = ({
|
|
94
|
+
id: t,
|
|
95
|
+
src: s,
|
|
96
|
+
path: a,
|
|
97
|
+
onInit: n = () => {
|
|
98
|
+
},
|
|
99
|
+
context: u,
|
|
100
|
+
isConfiguring: i,
|
|
101
|
+
...m
|
|
102
|
+
}) => {
|
|
103
|
+
const l = I(), [h, r] = g(), [e, c] = g(0), { registerFrame: o, sendMessage: f } = x(v), [M, P] = g(!0), [R, A] = g();
|
|
104
|
+
return d(() => {
|
|
105
|
+
e && f(t, "set-context", { context: u });
|
|
106
|
+
}, [u, t, e]), d(() => {
|
|
107
|
+
a !== void 0 && A(a);
|
|
108
|
+
}, [a]), d(() => {
|
|
109
|
+
R === void 0 || !e || f(t, "navigate", { path: R });
|
|
110
|
+
}, [R, e, t, f]), d(() => {
|
|
111
|
+
e && f(t, "set-configuring", { isConfiguring: i });
|
|
112
|
+
}, [e, i]), d(() => {
|
|
113
|
+
!s || !t || !l || (async () => {
|
|
114
|
+
const E = await Z(s);
|
|
115
|
+
if (P(E), E) {
|
|
116
|
+
const L = new URL(s);
|
|
117
|
+
o(t, L.origin, l), n(), r(
|
|
118
|
+
`${L.origin}/mm-embedded-interop?id=${t}&origin=${window.location.origin}`
|
|
119
|
+
);
|
|
98
120
|
return;
|
|
99
121
|
}
|
|
100
122
|
})();
|
|
101
|
-
}, [
|
|
123
|
+
}, [s, t, o, l]), j(t, "ready", () => c((E) => E + 1)), M ? /* @__PURE__ */ y.createElement(T, { $isReady: e, ref: l, src: h, ...m }) : /* @__PURE__ */ y.createElement(
|
|
102
124
|
"div",
|
|
103
125
|
{
|
|
104
126
|
style: {
|
|
@@ -108,19 +130,20 @@ const A = L.default || L, T = A.iframe`
|
|
|
108
130
|
justifyContent: "center"
|
|
109
131
|
}
|
|
110
132
|
},
|
|
111
|
-
/* @__PURE__ */
|
|
133
|
+
/* @__PURE__ */ y.createElement("div", { style: { textAlign: "center" } }, "Application must adhere to the MM App Manifest specification to be embedded.")
|
|
112
134
|
);
|
|
113
135
|
};
|
|
114
136
|
q.propTypes = {
|
|
115
|
-
id:
|
|
116
|
-
src:
|
|
117
|
-
path:
|
|
118
|
-
onInit:
|
|
137
|
+
id: b.string,
|
|
138
|
+
src: b.string.isRequired,
|
|
139
|
+
path: b.string,
|
|
140
|
+
onInit: b.func
|
|
119
141
|
};
|
|
120
142
|
export {
|
|
121
143
|
q as MMEmbeddableZone,
|
|
122
|
-
|
|
123
|
-
|
|
144
|
+
v as MMEmbeddableZoneContext,
|
|
145
|
+
F as MMEmbeddableZoneProvider,
|
|
146
|
+
U as getAppInfo,
|
|
124
147
|
Z as testIsEmbeddable,
|
|
125
148
|
j as useEmbeddedEffect
|
|
126
149
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
(function(
|
|
1
|
+
(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,I){"use strict";const g=e.createContext(null),v=({children:n})=>{const[i,a]=e.useState({}),s=e.useRef({}),c=e.useCallback((r,t,f)=>{a(d=>({...d,[r]:{origin:t,frameRef:f}}))},[]);e.useEffect(()=>{const r=t=>{var d,l;if(!((d=t==null?void 0:t.data)!=null&&d.instanceId))return;(((l=s.current[t.data.instanceId])==null?void 0:l[t.data.type])||[]).forEach(M=>M(t.data))};return window.addEventListener("message",r),()=>{window.removeEventListener("message",r)}},[i]);const u=e.useCallback((r,t,f)=>{const d=i[r];if(!d){console.warn(`Origin not set for id: ${r}. Unable to send message.`);return}d.frameRef.current.contentWindow.postMessage({type:t,...f,instanceId:r},d.origin)},[i]),E=e.useCallback((r,t)=>{u(r,"load-options",t)},[u]),m=e.useCallback((r,t)=>{u(r,"validate",t)},[u]),h={registerFrame:c,sendMessage:u,loadOptions:E,validate:m,addListener:(r,t,f)=>(s.current[r]||(s.current[r]={}),s.current[r][t]||(s.current[r][t]=[]),s.current[r][t].push(f),()=>{s.current[r][t]=s.current[r][t].filter(d=>d!==f)})};return e.createElement(g.Provider,{value:h},n)},p={},C=async n=>{try{const i=new URL(n).origin;if(p[i]!==void 0)return p[i];const s=await(await fetch(`${i}/mm-app-manifest.json`)).json();if(!s.version)throw new Error("Invalid manifest");return p[i]=s,s}catch{}return p[origin]=!1,!1},L=async n=>!!await C(n),$=(n,i,a)=>{const s=e.useContext(g);if(s===null)throw new Error("useEmbeddedEffect must be used within a MMEmbeddableZoneProvider");const c=e.useRef(a);return e.useEffect(()=>{c.current=a},[a]),e.useEffect(()=>{if(!(!n||!i))return s.addListener(n,i,(...u)=>c.current(...u))},[s,n,i]),e.useCallback((u,E)=>s.sendMessage(n,u,E),[s,n])};v.propTypes={children:b.node.isRequired};const j=(I.default||I).iframe`
|
|
2
2
|
width: 100%;
|
|
3
3
|
height: 100%;
|
|
4
4
|
border: none;
|
|
5
|
-
visibility: ${
|
|
6
|
-
`,
|
|
5
|
+
visibility: ${n=>n.$isReady?"visible":"hidden"};
|
|
6
|
+
`,S=({id:n,src:i,path:a,onInit:s=()=>{},context:c,isConfiguring:u,...E})=>{const m=e.useRef(),[h,r]=e.useState(),[t,f]=e.useState(0),{registerFrame:d,sendMessage:l}=e.useContext(g),[M,q]=e.useState(!0),[w,x]=e.useState();return e.useEffect(()=>{t&&l(n,"set-context",{context:c})},[c,n,t]),e.useEffect(()=>{a!==void 0&&x(a)},[a]),e.useEffect(()=>{w===void 0||!t||l(n,"navigate",{path:w})},[w,t,n,l]),e.useEffect(()=>{t&&l(n,"set-configuring",{isConfiguring:u})},[t,u]),e.useEffect(()=>{!i||!n||!m||(async()=>{const y=await L(i);if(q(y),y){const Z=new URL(i);d(n,Z.origin,m),s(),r(`${Z.origin}/mm-embedded-interop?id=${n}&origin=${window.location.origin}`);return}})()},[i,n,d,m]),$(n,"ready",()=>f(y=>y+1)),M?e.createElement(j,{$isReady:t,ref:m,src:h,...E}):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."))};S.propTypes={id:b.string,src:b.string.isRequired,path:b.string,onInit:b.func},o.MMEmbeddableZone=S,o.MMEmbeddableZoneContext=g,o.MMEmbeddableZoneProvider=v,o.getAppInfo=C,o.testIsEmbeddable=L,o.useEmbeddedEffect=$,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})});
|