@machinemetrics/mm-react-embeddable 0.4.9 → 0.9.0

package/README.md

@@ -0,0 +1,3 @@
+# mm-react-embeddable
+
+Components and hooks for embedding mm-apps into an interface. Primarily used for sandbox testing the creation of custom dashboard widgets.

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

@@ -2,29 +2,29 @@ import b, { createContext as P, useState as g, useRef as M, useCallback as y, us
 import f from "prop-types";
 import C from "styled-components";
 const w = P(null), W = ({ children: n }) => {
-  const [a, i] = g({}), r = M({}), u = y((t, e, o) => {
-    i((s) => ({ ...s, [t]: { origin: e, frameRef: o } }));
+  const [a, i] = g({}), e = M({}), u = y((t, r, o) => {
+    i((s) => ({ ...s, [t]: { origin: r, frameRef: o } }));
   }, []);
   m(() => {
-    const t = (e) => {
+    const t = (r) => {
       var s, l;
-      if (!((s = e == null ? void 0 : e.data) != null && s.instanceId))
+      if (!((s = r == null ? void 0 : r.data) != null && s.instanceId))
         return;
-      (((l = r.current[e.data.instanceId]) == null ? void 0 : l[e.data.type]) || []).forEach((E) => E(e.data));
+      (((l = e.current[r.data.instanceId]) == null ? void 0 : l[r.data.type]) || []).forEach((E) => E(r.data));
     };
     return window.addEventListener("message", t), () => {
       window.removeEventListener("message", t);
     };
   }, [a]);
   const d = y(
-    (t, e, o) => {
+    (t, r, o) => {
       const s = a[t];
       if (!s) {
         console.warn(`Origin not set for id: ${t}. Unable to send message.`);
         return;
       }
       s.frameRef.current.contentWindow.postMessage(
-        { type: e, ...o, instanceId: t },
+        { type: r, ...o, instanceId: t },
         s.origin
       );
     },
@@ -32,14 +32,14 @@ const w = P(null), W = ({ children: n }) => {
   ), c = {
     registerFrame: u,
     sendMessage: d,
-    addListener: (t, e, o) => (r.current[t] || (r.current[t] = {}), r.current[t][e] || (r.current[t][e] = []), r.current[t][e].push(o), () => {
-      r.current[t][e] = r.current[t][e].filter((s) => s !== o);
+    addListener: (t, r, o) => (e.current[t] || (e.current[t] = {}), e.current[t][r] || (e.current[t][r] = []), e.current[t][r].push(o), () => {
+      e.current[t][r] = e.current[t][r].filter((s) => s !== o);
     })
   };
   return /* @__PURE__ */ b.createElement(w.Provider, { value: c }, n);
 }, $ = (n, a, i) => {
-  const r = R(w);
-  if (r === null)
+  const e = R(w);
+  if (e === null)
     throw new Error(
       "useEmbeddedEffect must be used within a MMEmbeddedWrapperProvider"
     );
@@ -48,13 +48,13 @@ const w = P(null), W = ({ children: n }) => {
     u.current = i;
   }, [i]), m(() => {
     if (!(!n || !a))
-      return r.addListener(
+      return e.addListener(
         n,
         a,
         (...d) => u.current(...d)
       );
-  }, [r, n, a]), y((d, c) => r.sendMessage(n, d, c), [
-    r,
+  }, [e, n, a]), y((d, c) => e.sendMessage(n, d, c), [
+    e,
     n
   ]);
 };
@@ -70,15 +70,15 @@ const j = C.iframe`
   id: n,
   genericFrameFallback: a,
   src: i,
-  path: r,
+  path: e,
   onInit: u = () => {
   },
   ...d
 }) => {
-  const c = M(), [t, e] = g(), [o, s] = g(0), { registerFrame: l, sendMessage: E } = R(w), [h, I] = g(), [x, L] = g(!1);
+  const c = M(), [t, r] = g(), [o, s] = g(0), { registerFrame: l, sendMessage: E } = R(w), [h, I] = g(), [x, L] = g(!1);
   return m(() => {
-    r !== void 0 && I(r);
-  }, [r]), m(() => {
+    e !== void 0 && (console.log(e), I(e));
+  }, [e]), m(() => {
     h === void 0 || !o || E(n, "navigate", { path: h });
   }, [h, o, n, E]), m(() => {
     !i || !n || !c || (async () => {
@@ -86,11 +86,11 @@ const j = C.iframe`
       l(n, p.origin, c), u();
       try {
         if ((await (await fetch(`${p.origin}/mm-app-manifest.json`)).json()).manifestVersion)
-          e(`${p.origin}/mm-embedded-interop?id=${n}`);
+          r(`${p.origin}/mm-embedded-interop?id=${n}`);
         else
           throw Error();
       } catch {
-        a ? (e(i), s(1)) : L(!0);
+        a ? (r(i), s(1)) : L(!0);
       }
     })();
   }, [i, n, l, c]), $(n, "ready", () => s((p) => p + 1)), x ? /* @__PURE__ */ b.createElement(

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

@@ -0,0 +1,6 @@
+(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,m,C){"use strict";const g=e.createContext(null),y=({children:s})=>{const[f,u]=e.useState({}),r=e.useRef({}),l=e.useCallback((n,t,d)=>{u(i=>({...i,[n]:{origin:t,frameRef:d}}))},[]);e.useEffect(()=>{const n=t=>{var i,p;if(!((i=t==null?void 0:t.data)!=null&&i.instanceId))return;(((p=r.current[t.data.instanceId])==null?void 0:p[t.data.type])||[]).forEach(b=>b(t.data))};return window.addEventListener("message",n),()=>{window.removeEventListener("message",n)}},[f]);const c=e.useCallback((n,t,d)=>{const i=f[n];if(!i){console.warn(`Origin not set for id: ${n}. Unable to send message.`);return}i.frameRef.current.contentWindow.postMessage({type:t,...d,instanceId:n},i.origin)},[f]),a={registerFrame:l,sendMessage:c,addListener:(n,t,d)=>(r.current[n]||(r.current[n]={}),r.current[n][t]||(r.current[n][t]=[]),r.current[n][t].push(d),()=>{r.current[n][t]=r.current[n][t].filter(i=>i!==d)})};return e.createElement(g.Provider,{value:a},s)},M=(s,f,u)=>{const r=e.useContext(g);if(r===null)throw new Error("useEmbeddedEffect must be used within a MMEmbeddedWrapperProvider");const l=e.useRef(u);return e.useEffect(()=>{l.current=u},[u]),e.useEffect(()=>{if(!(!s||!f))return r.addListener(s,f,(...c)=>l.current(...c))},[r,s,f]),e.useCallback((c,a)=>r.sendMessage(s,c,a),[r,s])};y.propTypes={children:m.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:r,onInit:l=()=>{},...c})=>{const a=e.useRef(),[n,t]=e.useState(),[d,i]=e.useState(0),{registerFrame:p,sendMessage:b}=e.useContext(g),[h,x]=e.useState(),[L,S]=e.useState(!1);return e.useEffect(()=>{r!==void 0&&(console.log(r),x(r))},[r]),e.useEffect(()=>{h===void 0||!d||b(s,"navigate",{path:h})},[h,d,s,b]),e.useEffect(()=>{!u||!s||!a||(async()=>{const E=new URL(u);p(s,E.origin,a),l();try{if((await(await fetch(`${E.origin}/mm-app-manifest.json`)).json()).manifestVersion)t(`${E.origin}/mm-embedded-interop?id=${s}`);else throw Error()}catch{f?(t(u),i(1)):S(!0)}})()},[u,s,p,a]),M(s,"ready",()=>i(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:n,...c})};w.propTypes={id:m.string,genericFrameFallback:m.bool,src:m.string.isRequired,path:m.string,onInit:m.func},o.MMEmbeddedWrapper=w,o.MMEmbeddedWrapperProvider=y,o.useEmbeddedEffect=M,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,20 +1,13 @@
 {
   "name": "@machinemetrics/mm-react-embeddable",
-  "version": "0.4.9",
+  "version": "0.9.0",
   "license": "MIT",
   "module": "dist/mm-react-embeddable.es.js",
-  "main": "dist/mm-react-embeddable.cjs.js",
   "source": "src/index.js",
   "type": "module",
   "engines": {
     "node": ">=18"
   },
-  "exports": {
-    ".": {
-      "import": "./dist/mm-react-embeddable.es.js",
-      "require": "./dist/mm-react-embeddable.cjs.js"
-    }
-  },
   "scripts": {
     "build": "vite build",
     "start": "vite build --watch"

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

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