@netless/app-embedded-page - npm Package Compare versions

Comparing version 0.1.0 to 0.1.1

dist/main.cjs.js

 "use strict";var V=Object.defineProperty;var J=(i,d,s)=>d in i?V(i,d,{enumerable:!0,configurable:!0,writable:!0,value:s}):i[d]=s;var U=(i,d,s)=>(J(i,typeof d!="symbol"?d+"":d,s),s);Object.defineProperty(exports,"__esModule",{value:!0});exports[Symbol.toStringTag]="Module";var G=`.netless-app-embedded-page{width:100%;height:100%;position:relative}.netless-app-embedded-page iframe{width:100%;height:100%;border:none;display:block}.netless-app-embedded-page-wb-view{width:100%;height:100%;position:absolute;top:0;left:0;overflow:hidden}
-`;const $="!#%()*+,-./:;=?@[]^_`{|}~ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789",K=$.length,F=Array(20),P=()=>{for(let i=0;i<20;i++)F[i]=$.charAt(Math.random()*K);return F.join("")};class B{constructor(){this.disposers=new Map}add(d,s=P()){return this.flush(s),this.disposers.set(s,d()),s}addDisposer(d,s=P()){return this.flush(s),this.disposers.set(s,d),s}addEventListener(d,s,l,c,g=P()){return this.add(()=>(d.addEventListener(s,l,c),()=>d.removeEventListener(s,l,c)),g),g}setTimeout(d,s,l=P()){return this.add(()=>{const c=window.setTimeout(()=>{this.remove(l),d()},s);return()=>window.clearTimeout(c)},l)}setInterval(d,s,l=P()){return this.add(()=>{const c=window.setInterval(d,s);return()=>window.clearInterval(c)},l)}remove(d){const s=this.disposers.get(d);return this.disposers.delete(d),s}flush(d){const s=this.remove(d);if(s)try{s()}catch(l){console.error(l)}}flushAll(){this.disposers.forEach(d=>{try{d()}catch(s){console.error(s)}}),this.disposers.clear()}}function X(i){return i!=null&&typeof i=="object"&&!Array.isArray(i)}function q(i,d){let s=i.getAttributes();if(s||(i.setAttributes(d),s=i.getAttributes()),!s)throw new Error("[NetlessAppMonaco] No attributes");return X(d)&&Object.keys(d).forEach(l=>{Object.prototype.hasOwnProperty.call(s,l)||i.updateAttributes([l],d[l])}),s}var Y=typeof globalThis!="undefined"?globalThis:typeof window!="undefined"?window:typeof global!="undefined"?global:typeof self!="undefined"?self:{},_={exports:{}};(function(i,d){(function(s,l){{var c=l();i&&i.exports&&(d=i.exports=c),d.randomColor=c}})(Y,function(){var s=null,l={};W();var c=[],g=function(r){if(r=r||{},r.seed!==void 0&&r.seed!==null&&r.seed===parseInt(r.seed,10))s=r.seed;else if(typeof r.seed=="string")s=D(r.seed);else{if(r.seed!==void 0&&r.seed!==null)throw new TypeError("The seed value must be an integer or string");s=null}var n,e,t;if(r.count!==null&&r.count!==void 0){for(var a=r.count,o=[],u=0;u<r.count;u++)c.push(!1);for(r.count=null;a>o.length;){var y=g(r);s!==null&&(r.seed=s),o.push(y)}return r.count=a,o}return n=L(r),e=T(n,r),t=h(n,e,r),b([n,e,t],r)};function L(r){if(c.length>0){var n=C(r.hue),e=v(n),t=(n[1]-n[0])/c.length,a=parseInt((e-n[0])/t);c[a]===!0?a=(a+2)%c.length:c[a]=!0;var o=(n[0]+a*t)%359,u=(n[0]+(a+1)*t)%359;return n=[o,u],e=v(n),e<0&&(e=360+e),e}else{var n=M(r.hue);return e=v(n),e<0&&(e=360+e),e}}function T(r,n){if(n.hue==="monochrome")return 0;if(n.luminosity==="random")return v([0,100]);var e=S(r),t=e[0],a=e[1];switch(n.luminosity){case"bright":t=55;break;case"dark":t=a-10;break;case"light":a=55;break}return v([t,a])}function h(r,n,e){var t=p(r,n),a=100;switch(e.luminosity){case"dark":a=t+20;break;case"light":t=(a+t)/2;break;case"random":t=0,a=100;break}return v([t,a])}function b(r,n){switch(n.format){case"hsvArray":return r;case"hslArray":return N(r);case"hsl":var e=N(r);return"hsl("+e[0]+", "+e[1]+"%, "+e[2]+"%)";case"hsla":var t=N(r),a=n.alpha||Math.random();return"hsla("+t[0]+", "+t[1]+"%, "+t[2]+"%, "+a+")";case"rgbArray":return A(r);case"rgb":var o=A(r);return"rgb("+o.join(", ")+")";case"rgba":var u=A(r),a=n.alpha||Math.random();return"rgba("+u.join(", ")+", "+a+")";default:return O(r)}}function p(r,n){for(var e=m(r).lowerBounds,t=0;t<e.length-1;t++){var a=e[t][0],o=e[t][1],u=e[t+1][0],y=e[t+1][1];if(n>=a&&n<=u){var I=(y-o)/(u-a),w=o-I*a;return I*n+w}}return 0}function M(r){if(typeof parseInt(r)=="number"){var n=parseInt(r);if(n<360&&n>0)return[n,n]}if(typeof r=="string"){if(l[r]){var e=l[r];if(e.hueRange)return e.hueRange}else if(r.match(/^#?([0-9A-F]{3}|[0-9A-F]{6})$/i)){var t=j(r)[0];return[t,t]}}return[0,360]}function S(r){return m(r).saturationRange}function m(r){r>=334&&r<=360&&(r-=360);for(var n in l){var e=l[n];if(e.hueRange&&r>=e.hueRange[0]&&r<=e.hueRange[1])return l[n]}return"Color not found"}function v(r){if(s===null){var n=.618033988749895,e=Math.random();return e+=n,e%=1,Math.floor(r[0]+e*(r[1]+1-r[0]))}else{var t=r[1]||1,a=r[0]||0;s=(s*9301+49297)%233280;var o=s/233280;return Math.floor(a+o*(t-a))}}function O(r){var n=A(r);function e(a){var o=a.toString(16);return o.length==1?"0"+o:o}var t="#"+e(n[0])+e(n[1])+e(n[2]);return t}function f(r,n,e){var t=e[0][0],a=e[e.length-1][0],o=e[e.length-1][1],u=e[0][1];l[r]={hueRange:n,lowerBounds:e,saturationRange:[t,a],brightnessRange:[o,u]}}function W(){f("monochrome",null,[[0,0],[100,0]]),f("red",[-26,18],[[20,100],[30,92],[40,89],[50,85],[60,78],[70,70],[80,60],[90,55],[100,50]]),f("orange",[18,46],[[20,100],[30,93],[40,88],[50,86],[60,85],[70,70],[100,70]]),f("yellow",[46,62],[[25,100],[40,94],[50,89],[60,86],[70,84],[80,82],[90,80],[100,75]]),f("green",[62,178],[[30,100],[40,90],[50,85],[60,81],[70,74],[80,64],[90,50],[100,40]]),f("blue",[178,257],[[20,100],[30,86],[40,80],[50,74],[60,60],[70,52],[80,44],[90,39],[100,35]]),f("purple",[257,282],[[20,100],[30,87],[40,79],[50,70],[60,65],[70,59],[80,52],[90,45],[100,42]]),f("pink",[282,334],[[20,100],[30,90],[40,86],[60,84],[80,80],[90,75],[100,73]])}function A(r){var n=r[0];n===0&&(n=1),n===360&&(n=359),n=n/360;var e=r[1]/100,t=r[2]/100,a=Math.floor(n*6),o=n*6-a,u=t*(1-e),y=t*(1-o*e),I=t*(1-(1-o)*e),w=256,k=256,E=256;switch(a){case 0:w=t,k=I,E=u;break;case 1:w=y,k=t,E=u;break;case 2:w=u,k=t,E=I;break;case 3:w=u,k=y,E=t;break;case 4:w=I,k=u,E=t;break;case 5:w=t,k=u,E=y;break}var H=[Math.floor(w*255),Math.floor(k*255),Math.floor(E*255)];return H}function j(r){r=r.replace(/^#/,""),r=r.length===3?r.replace(/(.)/g,"$1$1"):r;var n=parseInt(r.substr(0,2),16)/255,e=parseInt(r.substr(2,2),16)/255,t=parseInt(r.substr(4,2),16)/255,a=Math.max(n,e,t),o=a-Math.min(n,e,t),u=a?o/a:0;switch(a){case n:return[60*((e-t)/o%6)||0,u,a];case e:return[60*((t-n)/o+2)||0,u,a];case t:return[60*((n-e)/o+4)||0,u,a]}}function N(r){var n=r[0],e=r[1]/100,t=r[2]/100,a=(2-e)*t;return[n,Math.round(e*t/(a<1?a:2-a)*1e4)/100,a/2*100]}function D(r){for(var n=0,e=0;e!==r.length&&!(n>=Number.MAX_SAFE_INTEGER);e++)n+=r.charCodeAt(e);return n}function C(r){if(isNaN(r)){if(typeof r=="string"){if(l[r]){var e=l[r];if(e.hueRange)return e.hueRange}else if(r.match(/^#?([0-9A-F]{3}|[0-9A-F]{6})$/i)){var t=j(r)[0];return m(t).hueRange}}}else{var n=parseInt(r);if(n<360&&n>0)return m(r).hueRange}return[0,360]}return g})})(_,_.exports);var z=_.exports;class Q{constructor(d="NetlessApp",s="error"){U(this,"kind");U(this,"debug");U(this,"color",z({luminosity:"dark"}));this.kind=d,this.debug=s}log(...d){if(this.debug===!0||this.debug==="log")return this._log("log",d)}warn(...d){if(this.debug&&this.debug!=="error")return this._log("warn",d)}error(...d){if(this.debug)return this._log("error",d)}_log(d,s){console[d](`%c[${this.kind}]:`,`color: ${this.color}; font-weight: bold;`,...s)}}function R(i){return typeof i=="object"&&i!==null}const Z=new Set(["clicker","selector"]),x={kind:"EmbeddedPage",setup(i){const d=i.getAppOptions()||{},s=i.getDisplayer(),l=i.getRoom(),c=i.getBox(),g=i.getView(),L=d.debug,T="state",h=q(i,{src:"https://example.org",store:{[T]:{}},page:""}),b=new B,p=new Q("EmbeddedPage",L),M=e=>{try{return R(e)?JSON.parse(JSON.stringify(e)):e}catch(t){throw p.error("Cannot parse to JSON object",e),t}},S=document.createElement("div");S.dataset.appKind="EmbeddedPage",S.classList.add("netless-app-embedded-page");const m=document.createElement("iframe");S.appendChild(m),c.mountStyles(G),c.mountContent(S);const v=e=>e.map(({memberId:t,payload:a})=>({sessionUID:t,uid:(a==null?void 0:a.uid)||"",userPayload:M(a)})),O=(e,t)=>{let a=null;const o=i.mobxUtils.reaction(e,()=>{a&&(a(),a=null);const u=e();a=()=>i.objectUtils.unlistenUpdated(u,t),i.objectUtils.listenUpdated(u,t)},{fireImmediately:!0});return()=>{a==null||a(),o()}},f=d.postMessage||(e=>{var t;p.log("Message to SDK",e),(t=m.contentWindow)==null||t.postMessage(e,"*")}),W=d.addMessageListener||((e,t)=>{const a=({data:o,source:u})=>{u!==m.contentWindow||!R(o)||!o.NEAType||(p.log("Message from SDK",o),e(o))};return window.addEventListener("message",a,t),()=>{window.removeEventListener("message",a,t)}});if(g){const e=document.createElement("div");if(e.classList.add("netless-app-embedded-page-wb-view"),S.appendChild(e),i.mountView(e),l){const t=a=>{e.style.pointerEvents=!a||Z.has(a)?"none":"auto"};t(l.state.memberState.currentApplianceName),b.add(()=>{const a=o=>{o.memberState&&t(o.memberState.currentApplianceName)};return s.callbacks.on("onRoomStateChanged",a),()=>s.callbacks.off("onRoomStateChanged",a)})}}const A=e=>{g&&R(e)&&g.moveCamera({centerX:e.x,centerY:e.y,scale:e.scale,animationMode:"immediately"})},j=e=>{R(e)&&Object.keys(e).forEach(t=>{if(t!==T){const a=e[t];i.updateAttributes(["store",t],a)}})},N=e=>{if(R(e)&&e.storeId&&R(e.state)){const{storeId:t,state:a}=e;if(!i.getIsWritable()){p.error(`Cannot setState on store ${t} without writable access`,a);return}Object.keys(a).forEach(o=>{i.updateAttributes(["store",t,o],a[o])})}};b.add(()=>{const e=new B,t=o=>{e.add(()=>O(()=>h.store[o],u=>{f({NEAType:"StateChanged",payload:{storeId:o,actions:M(u)}})}),o)};Object.keys(h.store).forEach(t);const a=O(()=>h.store,o=>{f({NEAType:"StoreChanged",payload:M(o)}),h.store&&o.forEach(({key:u,kind:y})=>{switch(y){case 2:{e.flush(u);break}default:{t(u);break}}})});return()=>{e.flushAll(),a()}}),b.add(()=>{const e=t=>{(t==null?void 0:t.roomMembers)&&f({NEAType:"RoomMembersChanged",payload:v(t.roomMembers)})};return s.callbacks.on("onRoomStateChanged",e),()=>s.callbacks.off("onRoomStateChanged",e)});const D=e=>{if(!g)p.warn("SetPage: page api is only available with 'scenePath' options enabled.");else{const t=i.getInitScenePath();if(typeof e=="string"&&i.getIsWritable()&&t&&l){const a=[t,e].join("/");l.scenePathType(a)==="none"&&l.putScenes(t,[{name:e}]),i.setScenePath(a),i.updateAttributes(["page"],e)}}};b.add(()=>{const e=(t,a)=>{f({NEAType:"PageChanged",payload:{oldValue:a,newValue:t}})};return i.mobxUtils.reaction(()=>h.page,e)}),b.add(()=>{const e=()=>{const t=i.getIsWritable();f({NEAType:"WritableChanged",payload:t}),p.log(`WritableChange changed to ${t}`)};return i.emitter.on("writableChange",e),()=>i.emitter.off("writableChange",e)});const C=`channel-${i.appId}`,r=e=>{i.getIsWritable()&&l&&l.dispatchMagixEvent(C,e)};b.add(()=>{const e=t=>{t.event===C&&t.authorId!==s.observerId&&f({NEAType:"ReceiveMagixMessage",payload:t.payload})};return s.addMagixEventListener(C,e),()=>s.removeMagixEventListener(C,e)});const n=()=>{var a;const e=s.observerId,t=(a=s.state.roomMembers.find(o=>o.memberId===e))==null?void 0:a.payload;f({NEAType:"Init",payload:{appId:i.appId,page:h.page,writable:i.getIsWritable(),roomMembers:v(s.state.roomMembers),debug:L,store:M(h.store),mainStoreId:T,meta:{sessionUID:e,uid:(l==null?void 0:l.uid)||(t==null?void 0:t.uid)||"",roomUUID:l==null?void 0:l.uuid,userPayload:M(t)}}})};b.add(()=>W(e=>{switch(e.NEAType){case"Init":{n();break}case"SetState":{N(e.payload);break}case"SetStore":{j(e.payload);break}case"SetPage":{D(e.payload);break}case"SendMagixMessage":{r(e.payload);break}case"MoveCamera":{A(e.payload);break}}})),i.emitter.on("destroy",()=>{p.log("destroy"),b.flushAll()}),m.src=h.src}};exports.default=x;
+`;const B="!#%()*+,-./:;=?@[]^_`{|}~ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789",K=B.length,$=Array(20),P=()=>{for(let i=0;i<20;i++)$[i]=B.charAt(Math.random()*K);return $.join("")};class F{constructor(){this.disposers=new Map}add(d,s=P()){return this.flush(s),this.disposers.set(s,d()),s}addDisposer(d,s=P()){return this.flush(s),this.disposers.set(s,d),s}addEventListener(d,s,l,c,g=P()){return this.add(()=>(d.addEventListener(s,l,c),()=>d.removeEventListener(s,l,c)),g),g}setTimeout(d,s,l=P()){return this.add(()=>{const c=window.setTimeout(()=>{this.remove(l),d()},s);return()=>window.clearTimeout(c)},l)}setInterval(d,s,l=P()){return this.add(()=>{const c=window.setInterval(d,s);return()=>window.clearInterval(c)},l)}remove(d){const s=this.disposers.get(d);return this.disposers.delete(d),s}flush(d){const s=this.remove(d);if(s)try{s()}catch(l){console.error(l)}}flushAll(){this.disposers.forEach(d=>{try{d()}catch(s){console.error(s)}}),this.disposers.clear()}}function X(i){return i!=null&&typeof i=="object"&&!Array.isArray(i)}function q(i,d){let s=i.getAttributes();if(s||(i.setAttributes(d),s=i.getAttributes()),!s)throw new Error("[NetlessAppMonaco] No attributes");return X(d)&&Object.keys(d).forEach(l=>{Object.prototype.hasOwnProperty.call(s,l)||i.updateAttributes([l],d[l])}),s}var Y=typeof globalThis!="undefined"?globalThis:typeof window!="undefined"?window:typeof global!="undefined"?global:typeof self!="undefined"?self:{},_={exports:{}};(function(i,d){(function(s,l){{var c=l();i&&i.exports&&(d=i.exports=c),d.randomColor=c}})(Y,function(){var s=null,l={};W();var c=[],g=function(r){if(r=r||{},r.seed!==void 0&&r.seed!==null&&r.seed===parseInt(r.seed,10))s=r.seed;else if(typeof r.seed=="string")s=D(r.seed);else{if(r.seed!==void 0&&r.seed!==null)throw new TypeError("The seed value must be an integer or string");s=null}var n,e,t;if(r.count!==null&&r.count!==void 0){for(var a=r.count,o=[],u=0;u<r.count;u++)c.push(!1);for(r.count=null;a>o.length;){var y=g(r);s!==null&&(r.seed=s),o.push(y)}return r.count=a,o}return n=L(r),e=T(n,r),t=h(n,e,r),b([n,e,t],r)};function L(r){if(c.length>0){var n=I(r.hue),e=v(n),t=(n[1]-n[0])/c.length,a=parseInt((e-n[0])/t);c[a]===!0?a=(a+2)%c.length:c[a]=!0;var o=(n[0]+a*t)%359,u=(n[0]+(a+1)*t)%359;return n=[o,u],e=v(n),e<0&&(e=360+e),e}else{var n=M(r.hue);return e=v(n),e<0&&(e=360+e),e}}function T(r,n){if(n.hue==="monochrome")return 0;if(n.luminosity==="random")return v([0,100]);var e=S(r),t=e[0],a=e[1];switch(n.luminosity){case"bright":t=55;break;case"dark":t=a-10;break;case"light":a=55;break}return v([t,a])}function h(r,n,e){var t=p(r,n),a=100;switch(e.luminosity){case"dark":a=t+20;break;case"light":t=(a+t)/2;break;case"random":t=0,a=100;break}return v([t,a])}function b(r,n){switch(n.format){case"hsvArray":return r;case"hslArray":return N(r);case"hsl":var e=N(r);return"hsl("+e[0]+", "+e[1]+"%, "+e[2]+"%)";case"hsla":var t=N(r),u=n.alpha||Math.random();return"hsla("+t[0]+", "+t[1]+"%, "+t[2]+"%, "+u+")";case"rgbArray":return C(r);case"rgb":var a=C(r);return"rgb("+a.join(", ")+")";case"rgba":var o=C(r),u=n.alpha||Math.random();return"rgba("+o.join(", ")+", "+u+")";default:return O(r)}}function p(r,n){for(var e=m(r).lowerBounds,t=0;t<e.length-1;t++){var a=e[t][0],o=e[t][1],u=e[t+1][0],y=e[t+1][1];if(n>=a&&n<=u){var R=(y-o)/(u-a),w=o-R*a;return R*n+w}}return 0}function M(r){if(typeof parseInt(r)=="number"){var n=parseInt(r);if(n<360&&n>0)return[n,n]}if(typeof r=="string"){if(l[r]){var e=l[r];if(e.hueRange)return e.hueRange}else if(r.match(/^#?([0-9A-F]{3}|[0-9A-F]{6})$/i)){var t=j(r)[0];return[t,t]}}return[0,360]}function S(r){return m(r).saturationRange}function m(r){r>=334&&r<=360&&(r-=360);for(var n in l){var e=l[n];if(e.hueRange&&r>=e.hueRange[0]&&r<=e.hueRange[1])return l[n]}return"Color not found"}function v(r){if(s===null){var n=.618033988749895,e=Math.random();return e+=n,e%=1,Math.floor(r[0]+e*(r[1]+1-r[0]))}else{var t=r[1]||1,a=r[0]||0;s=(s*9301+49297)%233280;var o=s/233280;return Math.floor(a+o*(t-a))}}function O(r){var n=C(r);function e(a){var o=a.toString(16);return o.length==1?"0"+o:o}var t="#"+e(n[0])+e(n[1])+e(n[2]);return t}function f(r,n,e){var t=e[0][0],a=e[e.length-1][0],o=e[e.length-1][1],u=e[0][1];l[r]={hueRange:n,lowerBounds:e,saturationRange:[t,a],brightnessRange:[o,u]}}function W(){f("monochrome",null,[[0,0],[100,0]]),f("red",[-26,18],[[20,100],[30,92],[40,89],[50,85],[60,78],[70,70],[80,60],[90,55],[100,50]]),f("orange",[18,46],[[20,100],[30,93],[40,88],[50,86],[60,85],[70,70],[100,70]]),f("yellow",[46,62],[[25,100],[40,94],[50,89],[60,86],[70,84],[80,82],[90,80],[100,75]]),f("green",[62,178],[[30,100],[40,90],[50,85],[60,81],[70,74],[80,64],[90,50],[100,40]]),f("blue",[178,257],[[20,100],[30,86],[40,80],[50,74],[60,60],[70,52],[80,44],[90,39],[100,35]]),f("purple",[257,282],[[20,100],[30,87],[40,79],[50,70],[60,65],[70,59],[80,52],[90,45],[100,42]]),f("pink",[282,334],[[20,100],[30,90],[40,86],[60,84],[80,80],[90,75],[100,73]])}function C(r){var n=r[0];n===0&&(n=1),n===360&&(n=359),n=n/360;var e=r[1]/100,t=r[2]/100,a=Math.floor(n*6),o=n*6-a,u=t*(1-e),y=t*(1-o*e),R=t*(1-(1-o)*e),w=256,k=256,E=256;switch(a){case 0:w=t,k=R,E=u;break;case 1:w=y,k=t,E=u;break;case 2:w=u,k=t,E=R;break;case 3:w=u,k=y,E=t;break;case 4:w=R,k=u,E=t;break;case 5:w=t,k=u,E=y;break}var H=[Math.floor(w*255),Math.floor(k*255),Math.floor(E*255)];return H}function j(r){r=r.replace(/^#/,""),r=r.length===3?r.replace(/(.)/g,"$1$1"):r;var n=parseInt(r.substr(0,2),16)/255,e=parseInt(r.substr(2,2),16)/255,t=parseInt(r.substr(4,2),16)/255,a=Math.max(n,e,t),o=a-Math.min(n,e,t),u=a?o/a:0;switch(a){case n:return[60*((e-t)/o%6)||0,u,a];case e:return[60*((t-n)/o+2)||0,u,a];case t:return[60*((n-e)/o+4)||0,u,a]}}function N(r){var n=r[0],e=r[1]/100,t=r[2]/100,a=(2-e)*t;return[n,Math.round(e*t/(a<1?a:2-a)*1e4)/100,a/2*100]}function D(r){for(var n=0,e=0;e!==r.length&&!(n>=Number.MAX_SAFE_INTEGER);e++)n+=r.charCodeAt(e);return n}function I(r){if(isNaN(r)){if(typeof r=="string"){if(l[r]){var e=l[r];if(e.hueRange)return e.hueRange}else if(r.match(/^#?([0-9A-F]{3}|[0-9A-F]{6})$/i)){var t=j(r)[0];return m(t).hueRange}}}else{var n=parseInt(r);if(n<360&&n>0)return m(r).hueRange}return[0,360]}return g})})(_,_.exports);var z=_.exports;class Q{constructor(d="NetlessApp",s="error"){U(this,"kind");U(this,"debug");U(this,"color",z({luminosity:"dark"}));this.kind=d,this.debug=s}log(...d){if(this.debug===!0||this.debug==="log")return this._log("log",d)}warn(...d){if(this.debug&&this.debug!=="error")return this._log("warn",d)}error(...d){if(this.debug)return this._log("error",d)}_log(d,s){console[d](`%c[${this.kind}]:`,`color: ${this.color}; font-weight: bold;`,...s)}}function A(i){return typeof i=="object"&&i!==null}const Z=new Set(["clicker","selector"]),x={kind:"EmbeddedPage",setup(i){const d=i.getAppOptions()||{},s=i.getDisplayer(),l=i.getRoom(),c=i.getBox(),g=i.getView(),L=d.debug,T="state",h=q(i,{src:"https://example.org",store:{[T]:{}},page:""}),b=new F,p=new Q("EmbeddedPage",L),M=e=>{try{return A(e)?JSON.parse(JSON.stringify(e)):e}catch(t){throw p.error("Cannot parse to JSON object",e),t}},S=document.createElement("div");S.dataset.appKind="EmbeddedPage",S.classList.add("netless-app-embedded-page");const m=document.createElement("iframe");S.appendChild(m),c.mountStyles(G),c.mountContent(S);const v=e=>e.map(({memberId:t,payload:a})=>({sessionUID:t,uid:(a==null?void 0:a.uid)||"",userPayload:M(a)})),O=(e,t)=>{let a=null;const o=i.mobxUtils.reaction(e,()=>{a&&(a(),a=null);const u=e();A(u)&&(a=()=>i.objectUtils.unlistenUpdated(u,t),i.objectUtils.listenUpdated(u,t))},{fireImmediately:!0});return()=>{a==null||a(),o()}},f=d.postMessage||(e=>{var t;p.log("Message to SDK",e),(t=m.contentWindow)==null||t.postMessage(e,"*")}),W=d.addMessageListener||((e,t)=>{const a=({data:o,source:u})=>{u!==m.contentWindow||!A(o)||!o.NEAType||(p.log("Message from SDK",o),e(o))};return window.addEventListener("message",a,t),()=>{window.removeEventListener("message",a,t)}});if(g){const e=document.createElement("div");if(e.classList.add("netless-app-embedded-page-wb-view"),S.appendChild(e),i.mountView(e),l){const t=a=>{e.style.pointerEvents=!a||Z.has(a)?"none":"auto"};t(l.state.memberState.currentApplianceName),b.add(()=>{const a=o=>{o.memberState&&t(o.memberState.currentApplianceName)};return s.callbacks.on("onRoomStateChanged",a),()=>s.callbacks.off("onRoomStateChanged",a)})}}const C=e=>{g&&A(e)&&g.moveCamera({centerX:e.x,centerY:e.y,scale:e.scale,animationMode:"immediately"})},j=e=>{A(e)&&Object.keys(e).forEach(t=>{if(t!==T){const a=e[t];i.updateAttributes(["store",t],a)}})},N=e=>{if(A(e)&&e.storeId&&A(e.state)){const{storeId:t,state:a}=e;if(!i.getIsWritable()){p.error(`Cannot setState on store ${t} without writable access`,a);return}Object.keys(a).forEach(o=>{i.updateAttributes(["store",t,o],a[o])})}};b.add(()=>{const e=new F,t=o=>{e.add(()=>O(()=>h.store[o],u=>{f({NEAType:"StateChanged",payload:{storeId:o,actions:M(u)}})}),o)};Object.keys(h.store).forEach(t);const a=O(()=>h.store,o=>{f({NEAType:"StoreChanged",payload:M(o)}),h.store&&o.forEach(({key:u,kind:y})=>{switch(y){case 2:{e.flush(u);break}default:{t(u);break}}})});return()=>{e.flushAll(),a()}}),b.add(()=>{const e=t=>{(t==null?void 0:t.roomMembers)&&f({NEAType:"RoomMembersChanged",payload:v(t.roomMembers)})};return s.callbacks.on("onRoomStateChanged",e),()=>s.callbacks.off("onRoomStateChanged",e)});const D=e=>{if(!g)p.warn("SetPage: page api is only available with 'scenePath' options enabled.");else{const t=i.getInitScenePath();if(typeof e=="string"&&i.getIsWritable()&&t&&l){const a=[t,e].join("/");l.scenePathType(a)==="none"&&l.putScenes(t,[{name:e}]),i.setScenePath(a),i.updateAttributes(["page"],e)}}};b.add(()=>{const e=(t,a)=>{f({NEAType:"PageChanged",payload:{oldValue:a,newValue:t}})};return i.mobxUtils.reaction(()=>h.page,e)}),b.add(()=>{const e=()=>{const t=i.getIsWritable();f({NEAType:"WritableChanged",payload:t}),p.log(`WritableChange changed to ${t}`)};return i.emitter.on("writableChange",e),()=>i.emitter.off("writableChange",e)});const I=`channel-${i.appId}`,r=e=>{i.getIsWritable()&&l&&l.dispatchMagixEvent(I,e)};b.add(()=>{const e=t=>{t.event===I&&t.authorId!==s.observerId&&f({NEAType:"ReceiveMagixMessage",payload:t.payload})};return s.addMagixEventListener(I,e),()=>s.removeMagixEventListener(I,e)});const n=()=>{var a;const e=s.observerId,t=(a=s.state.roomMembers.find(o=>o.memberId===e))==null?void 0:a.payload;f({NEAType:"Init",payload:{appId:i.appId,page:h.page,writable:i.getIsWritable(),roomMembers:v(s.state.roomMembers),debug:L,store:M(h.store),mainStoreId:T,meta:{sessionUID:e,uid:(l==null?void 0:l.uid)||(t==null?void 0:t.uid)||"",roomUUID:l==null?void 0:l.uuid,userPayload:M(t)}}})};b.add(()=>W(e=>{switch(e.NEAType){case"Init":{n();break}case"SetState":{N(e.payload);break}case"SetStore":{j(e.payload);break}case"SetPage":{D(e.payload);break}case"SendMagixMessage":{r(e.payload);break}case"MoveCamera":{C(e.payload);break}}})),i.emitter.on("destroy",()=>{p.log("destroy"),b.flushAll()}),m.src=h.src}};exports.default=x;
 //# sourceMappingURL=main.cjs.js.map

dist/main.es.js

@@ -15,3 +15,3 @@ var __defProp = Object.defineProperty;
   constructor() {
-    this.disposers = new Map();
+    this.disposers = /* @__PURE__ */ new Map();
   }
@@ -445,3 +445,3 @@ add(e2, s2 = r()) {
 }
-const ClickThroughAppliances = new Set(["clicker", "selector"]);
+const ClickThroughAppliances = /* @__PURE__ */ new Set(["clicker", "selector"]);
 const EmbeddedPage = {
@@ -492,4 +492,6 @@ kind: "EmbeddedPage",
         const props = getProps();
-        disposeListenUpdated = () => context.objectUtils.unlistenUpdated(props, callback);
-        context.objectUtils.listenUpdated(props, callback);
+        if (isObj(props)) {
+          disposeListenUpdated = () => context.objectUtils.unlistenUpdated(props, callback);
+          context.objectUtils.listenUpdated(props, callback);
+        }
       }, { fireImmediately: true });
@@ -496,0 +498,0 @@ return () => {

dist/main.iife.js

@@ -1,3 +0,3 @@
-(()=>{var x=Object.defineProperty;var ee=(g,p,k)=>p in g?x(g,p,{enumerable:!0,configurable:!0,writable:!0,value:k}):g[p]=k;var _=(g,p,k)=>(ee(g,typeof p!="symbol"?p+"":p,k),k);var re=function(g){"use strict";var p=`.netless-app-embedded-page{width:100%;height:100%;position:relative}.netless-app-embedded-page iframe{width:100%;height:100%;border:none;display:block}.netless-app-embedded-page-wb-view{width:100%;height:100%;position:absolute;top:0;left:0;overflow:hidden}
-`;const k="!#%()*+,-./:;=?@[]^_`{|}~ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789",J=k.length,H=Array(20),L=()=>{for(let i=0;i<20;i++)H[i]=k.charAt(Math.random()*J);return H.join("")};class V{constructor(){this.disposers=new Map}add(d,s=L()){return this.flush(s),this.disposers.set(s,d()),s}addDisposer(d,s=L()){return this.flush(s),this.disposers.set(s,d),s}addEventListener(d,s,l,c,b=L()){return this.add(()=>(d.addEventListener(s,l,c),()=>d.removeEventListener(s,l,c)),b),b}setTimeout(d,s,l=L()){return this.add(()=>{const c=window.setTimeout(()=>{this.remove(l),d()},s);return()=>window.clearTimeout(c)},l)}setInterval(d,s,l=L()){return this.add(()=>{const c=window.setInterval(d,s);return()=>window.clearInterval(c)},l)}remove(d){const s=this.disposers.get(d);return this.disposers.delete(d),s}flush(d){const s=this.remove(d);if(s)try{s()}catch(l){console.error(l)}}flushAll(){this.disposers.forEach(d=>{try{d()}catch(s){console.error(s)}}),this.disposers.clear()}}function G(i){return i!=null&&typeof i=="object"&&!Array.isArray(i)}function K(i,d){let s=i.getAttributes();if(s||(i.setAttributes(d),s=i.getAttributes()),!s)throw new Error("[NetlessAppMonaco] No attributes");return G(d)&&Object.keys(d).forEach(l=>{Object.prototype.hasOwnProperty.call(s,l)||i.updateAttributes([l],d[l])}),s}var X=typeof globalThis!="undefined"?globalThis:typeof window!="undefined"?window:typeof global!="undefined"?global:typeof self!="undefined"?self:{},$={exports:{}};(function(i,d){(function(s,l){{var c=l();i&&i.exports&&(d=i.exports=c),d.randomColor=c}})(X,function(){var s=null,l={};F();var c=[],b=function(r){if(r=r||{},r.seed!==void 0&&r.seed!==null&&r.seed===parseInt(r.seed,10))s=r.seed;else if(typeof r.seed=="string")s=B(r.seed);else{if(r.seed!==void 0&&r.seed!==null)throw new TypeError("The seed value must be an integer or string");s=null}var n,e,t;if(r.count!==null&&r.count!==void 0){for(var a=r.count,o=[],u=0;u<r.count;u++)c.push(!1);for(r.count=null;a>o.length;){var M=b(r);s!==null&&(r.seed=s),o.push(M)}return r.count=a,o}return n=U(r),e=O(n,r),t=h(n,e,r),m([n,e,t],r)};function U(r){if(c.length>0){var n=N(r.hue),e=w(n),t=(n[1]-n[0])/c.length,a=parseInt((e-n[0])/t);c[a]===!0?a=(a+2)%c.length:c[a]=!0;var o=(n[0]+a*t)%359,u=(n[0]+(a+1)*t)%359;return n=[o,u],e=w(n),e<0&&(e=360+e),e}else{var n=E(r.hue);return e=w(n),e<0&&(e=360+e),e}}function O(r,n){if(n.hue==="monochrome")return 0;if(n.luminosity==="random")return w([0,100]);var e=A(r),t=e[0],a=e[1];switch(n.luminosity){case"bright":t=55;break;case"dark":t=a-10;break;case"light":a=55;break}return w([t,a])}function h(r,n,e){var t=v(r,n),a=100;switch(e.luminosity){case"dark":a=t+20;break;case"light":t=(a+t)/2;break;case"random":t=0,a=100;break}return w([t,a])}function m(r,n){switch(n.format){case"hsvArray":return r;case"hslArray":return j(r);case"hsl":var e=j(r);return"hsl("+e[0]+", "+e[1]+"%, "+e[2]+"%)";case"hsla":var t=j(r),a=n.alpha||Math.random();return"hsla("+t[0]+", "+t[1]+"%, "+t[2]+"%, "+a+")";case"rgbArray":return T(r);case"rgb":var o=T(r);return"rgb("+o.join(", ")+")";case"rgba":var u=T(r),a=n.alpha||Math.random();return"rgba("+u.join(", ")+", "+a+")";default:return W(r)}}function v(r,n){for(var e=y(r).lowerBounds,t=0;t<e.length-1;t++){var a=e[t][0],o=e[t][1],u=e[t+1][0],M=e[t+1][1];if(n>=a&&n<=u){var P=(M-o)/(u-a),S=o-P*a;return P*n+S}}return 0}function E(r){if(typeof parseInt(r)=="number"){var n=parseInt(r);if(n<360&&n>0)return[n,n]}if(typeof r=="string"){if(l[r]){var e=l[r];if(e.hueRange)return e.hueRange}else if(r.match(/^#?([0-9A-F]{3}|[0-9A-F]{6})$/i)){var t=D(r)[0];return[t,t]}}return[0,360]}function A(r){return y(r).saturationRange}function y(r){r>=334&&r<=360&&(r-=360);for(var n in l){var e=l[n];if(e.hueRange&&r>=e.hueRange[0]&&r<=e.hueRange[1])return l[n]}return"Color not found"}function w(r){if(s===null){var n=.618033988749895,e=Math.random();return e+=n,e%=1,Math.floor(r[0]+e*(r[1]+1-r[0]))}else{var t=r[1]||1,a=r[0]||0;s=(s*9301+49297)%233280;var o=s/233280;return Math.floor(a+o*(t-a))}}function W(r){var n=T(r);function e(a){var o=a.toString(16);return o.length==1?"0"+o:o}var t="#"+e(n[0])+e(n[1])+e(n[2]);return t}function f(r,n,e){var t=e[0][0],a=e[e.length-1][0],o=e[e.length-1][1],u=e[0][1];l[r]={hueRange:n,lowerBounds:e,saturationRange:[t,a],brightnessRange:[o,u]}}function F(){f("monochrome",null,[[0,0],[100,0]]),f("red",[-26,18],[[20,100],[30,92],[40,89],[50,85],[60,78],[70,70],[80,60],[90,55],[100,50]]),f("orange",[18,46],[[20,100],[30,93],[40,88],[50,86],[60,85],[70,70],[100,70]]),f("yellow",[46,62],[[25,100],[40,94],[50,89],[60,86],[70,84],[80,82],[90,80],[100,75]]),f("green",[62,178],[[30,100],[40,90],[50,85],[60,81],[70,74],[80,64],[90,50],[100,40]]),f("blue",[178,257],[[20,100],[30,86],[40,80],[50,74],[60,60],[70,52],[80,44],[90,39],[100,35]]),f("purple",[257,282],[[20,100],[30,87],[40,79],[50,70],[60,65],[70,59],[80,52],[90,45],[100,42]]),f("pink",[282,334],[[20,100],[30,90],[40,86],[60,84],[80,80],[90,75],[100,73]])}function T(r){var n=r[0];n===0&&(n=1),n===360&&(n=359),n=n/360;var e=r[1]/100,t=r[2]/100,a=Math.floor(n*6),o=n*6-a,u=t*(1-e),M=t*(1-o*e),P=t*(1-(1-o)*e),S=256,C=256,I=256;switch(a){case 0:S=t,C=P,I=u;break;case 1:S=M,C=t,I=u;break;case 2:S=u,C=t,I=P;break;case 3:S=u,C=M,I=t;break;case 4:S=P,C=u,I=t;break;case 5:S=t,C=u,I=M;break}var Z=[Math.floor(S*255),Math.floor(C*255),Math.floor(I*255)];return Z}function D(r){r=r.replace(/^#/,""),r=r.length===3?r.replace(/(.)/g,"$1$1"):r;var n=parseInt(r.substr(0,2),16)/255,e=parseInt(r.substr(2,2),16)/255,t=parseInt(r.substr(4,2),16)/255,a=Math.max(n,e,t),o=a-Math.min(n,e,t),u=a?o/a:0;switch(a){case n:return[60*((e-t)/o%6)||0,u,a];case e:return[60*((t-n)/o+2)||0,u,a];case t:return[60*((n-e)/o+4)||0,u,a]}}function j(r){var n=r[0],e=r[1]/100,t=r[2]/100,a=(2-e)*t;return[n,Math.round(e*t/(a<1?a:2-a)*1e4)/100,a/2*100]}function B(r){for(var n=0,e=0;e!==r.length&&!(n>=Number.MAX_SAFE_INTEGER);e++)n+=r.charCodeAt(e);return n}function N(r){if(isNaN(r)){if(typeof r=="string"){if(l[r]){var e=l[r];if(e.hueRange)return e.hueRange}else if(r.match(/^#?([0-9A-F]{3}|[0-9A-F]{6})$/i)){var t=D(r)[0];return y(t).hueRange}}}else{var n=parseInt(r);if(n<360&&n>0)return y(r).hueRange}return[0,360]}return b})})($,$.exports);var q=$.exports;class Y{constructor(d="NetlessApp",s="error"){_(this,"kind");_(this,"debug");_(this,"color",q({luminosity:"dark"}));this.kind=d,this.debug=s}log(...d){if(this.debug===!0||this.debug==="log")return this._log("log",d)}warn(...d){if(this.debug&&this.debug!=="error")return this._log("warn",d)}error(...d){if(this.debug)return this._log("error",d)}_log(d,s){console[d](`%c[${this.kind}]:`,`color: ${this.color}; font-weight: bold;`,...s)}}function R(i){return typeof i=="object"&&i!==null}const z=new Set(["clicker","selector"]),Q={kind:"EmbeddedPage",setup(i){const d=i.getAppOptions()||{},s=i.getDisplayer(),l=i.getRoom(),c=i.getBox(),b=i.getView(),U=d.debug,O="state",h=K(i,{src:"https://example.org",store:{[O]:{}},page:""}),m=new V,v=new Y("EmbeddedPage",U),E=e=>{try{return R(e)?JSON.parse(JSON.stringify(e)):e}catch(t){throw v.error("Cannot parse to JSON object",e),t}},A=document.createElement("div");A.dataset.appKind="EmbeddedPage",A.classList.add("netless-app-embedded-page");const y=document.createElement("iframe");A.appendChild(y),c.mountStyles(p),c.mountContent(A);const w=e=>e.map(({memberId:t,payload:a})=>({sessionUID:t,uid:(a==null?void 0:a.uid)||"",userPayload:E(a)})),W=(e,t)=>{let a=null;const o=i.mobxUtils.reaction(e,()=>{a&&(a(),a=null);const u=e();a=()=>i.objectUtils.unlistenUpdated(u,t),i.objectUtils.listenUpdated(u,t)},{fireImmediately:!0});return()=>{a==null||a(),o()}},f=d.postMessage||(e=>{var t;v.log("Message to SDK",e),(t=y.contentWindow)==null||t.postMessage(e,"*")}),F=d.addMessageListener||((e,t)=>{const a=({data:o,source:u})=>{u!==y.contentWindow||!R(o)||!o.NEAType||(v.log("Message from SDK",o),e(o))};return window.addEventListener("message",a,t),()=>{window.removeEventListener("message",a,t)}});if(b){const e=document.createElement("div");if(e.classList.add("netless-app-embedded-page-wb-view"),A.appendChild(e),i.mountView(e),l){const t=a=>{e.style.pointerEvents=!a||z.has(a)?"none":"auto"};t(l.state.memberState.currentApplianceName),m.add(()=>{const a=o=>{o.memberState&&t(o.memberState.currentApplianceName)};return s.callbacks.on("onRoomStateChanged",a),()=>s.callbacks.off("onRoomStateChanged",a)})}}const T=e=>{b&&R(e)&&b.moveCamera({centerX:e.x,centerY:e.y,scale:e.scale,animationMode:"immediately"})},D=e=>{R(e)&&Object.keys(e).forEach(t=>{if(t!==O){const a=e[t];i.updateAttributes(["store",t],a)}})},j=e=>{if(R(e)&&e.storeId&&R(e.state)){const{storeId:t,state:a}=e;if(!i.getIsWritable()){v.error(`Cannot setState on store ${t} without writable access`,a);return}Object.keys(a).forEach(o=>{i.updateAttributes(["store",t,o],a[o])})}};m.add(()=>{const e=new V,t=o=>{e.add(()=>W(()=>h.store[o],u=>{f({NEAType:"StateChanged",payload:{storeId:o,actions:E(u)}})}),o)};Object.keys(h.store).forEach(t);const a=W(()=>h.store,o=>{f({NEAType:"StoreChanged",payload:E(o)}),h.store&&o.forEach(({key:u,kind:M})=>{switch(M){case 2:{e.flush(u);break}default:{t(u);break}}})});return()=>{e.flushAll(),a()}}),m.add(()=>{const e=t=>{(t==null?void 0:t.roomMembers)&&f({NEAType:"RoomMembersChanged",payload:w(t.roomMembers)})};return s.callbacks.on("onRoomStateChanged",e),()=>s.callbacks.off("onRoomStateChanged",e)});const B=e=>{if(!b)v.warn("SetPage: page api is only available with 'scenePath' options enabled.");else{const t=i.getInitScenePath();if(typeof e=="string"&&i.getIsWritable()&&t&&l){const a=[t,e].join("/");l.scenePathType(a)==="none"&&l.putScenes(t,[{name:e}]),i.setScenePath(a),i.updateAttributes(["page"],e)}}};m.add(()=>{const e=(t,a)=>{f({NEAType:"PageChanged",payload:{oldValue:a,newValue:t}})};return i.mobxUtils.reaction(()=>h.page,e)}),m.add(()=>{const e=()=>{const t=i.getIsWritable();f({NEAType:"WritableChanged",payload:t}),v.log(`WritableChange changed to ${t}`)};return i.emitter.on("writableChange",e),()=>i.emitter.off("writableChange",e)});const N=`channel-${i.appId}`,r=e=>{i.getIsWritable()&&l&&l.dispatchMagixEvent(N,e)};m.add(()=>{const e=t=>{t.event===N&&t.authorId!==s.observerId&&f({NEAType:"ReceiveMagixMessage",payload:t.payload})};return s.addMagixEventListener(N,e),()=>s.removeMagixEventListener(N,e)});const n=()=>{var a;const e=s.observerId,t=(a=s.state.roomMembers.find(o=>o.memberId===e))==null?void 0:a.payload;f({NEAType:"Init",payload:{appId:i.appId,page:h.page,writable:i.getIsWritable(),roomMembers:w(s.state.roomMembers),debug:U,store:E(h.store),mainStoreId:O,meta:{sessionUID:e,uid:(l==null?void 0:l.uid)||(t==null?void 0:t.uid)||"",roomUUID:l==null?void 0:l.uuid,userPayload:E(t)}}})};m.add(()=>F(e=>{switch(e.NEAType){case"Init":{n();break}case"SetState":{j(e.payload);break}case"SetStore":{D(e.payload);break}case"SetPage":{B(e.payload);break}case"SendMagixMessage":{r(e.payload);break}case"MoveCamera":{T(e.payload);break}}})),i.emitter.on("destroy",()=>{v.log("destroy"),m.flushAll()}),y.src=h.src}};return g.default=Q,Object.defineProperty(g,"__esModule",{value:!0}),g[Symbol.toStringTag]="Module",g}({});})();
+var x=Object.defineProperty;var ee=(g,p,k)=>p in g?x(g,p,{enumerable:!0,configurable:!0,writable:!0,value:k}):g[p]=k;var _=(g,p,k)=>(ee(g,typeof p!="symbol"?p+"":p,k),k);var NetlessAppEmbeddedPage=function(g){"use strict";var p=`.netless-app-embedded-page{width:100%;height:100%;position:relative}.netless-app-embedded-page iframe{width:100%;height:100%;border:none;display:block}.netless-app-embedded-page-wb-view{width:100%;height:100%;position:absolute;top:0;left:0;overflow:hidden}
+`;const k="!#%()*+,-./:;=?@[]^_`{|}~ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789",J=k.length,H=Array(20),L=()=>{for(let i=0;i<20;i++)H[i]=k.charAt(Math.random()*J);return H.join("")};class V{constructor(){this.disposers=new Map}add(d,s=L()){return this.flush(s),this.disposers.set(s,d()),s}addDisposer(d,s=L()){return this.flush(s),this.disposers.set(s,d),s}addEventListener(d,s,l,c,b=L()){return this.add(()=>(d.addEventListener(s,l,c),()=>d.removeEventListener(s,l,c)),b),b}setTimeout(d,s,l=L()){return this.add(()=>{const c=window.setTimeout(()=>{this.remove(l),d()},s);return()=>window.clearTimeout(c)},l)}setInterval(d,s,l=L()){return this.add(()=>{const c=window.setInterval(d,s);return()=>window.clearInterval(c)},l)}remove(d){const s=this.disposers.get(d);return this.disposers.delete(d),s}flush(d){const s=this.remove(d);if(s)try{s()}catch(l){console.error(l)}}flushAll(){this.disposers.forEach(d=>{try{d()}catch(s){console.error(s)}}),this.disposers.clear()}}function G(i){return i!=null&&typeof i=="object"&&!Array.isArray(i)}function K(i,d){let s=i.getAttributes();if(s||(i.setAttributes(d),s=i.getAttributes()),!s)throw new Error("[NetlessAppMonaco] No attributes");return G(d)&&Object.keys(d).forEach(l=>{Object.prototype.hasOwnProperty.call(s,l)||i.updateAttributes([l],d[l])}),s}var X=typeof globalThis!="undefined"?globalThis:typeof window!="undefined"?window:typeof global!="undefined"?global:typeof self!="undefined"?self:{},$={exports:{}};(function(i,d){(function(s,l){{var c=l();i&&i.exports&&(d=i.exports=c),d.randomColor=c}})(X,function(){var s=null,l={};F();var c=[],b=function(r){if(r=r||{},r.seed!==void 0&&r.seed!==null&&r.seed===parseInt(r.seed,10))s=r.seed;else if(typeof r.seed=="string")s=B(r.seed);else{if(r.seed!==void 0&&r.seed!==null)throw new TypeError("The seed value must be an integer or string");s=null}var n,e,t;if(r.count!==null&&r.count!==void 0){for(var a=r.count,o=[],u=0;u<r.count;u++)c.push(!1);for(r.count=null;a>o.length;){var M=b(r);s!==null&&(r.seed=s),o.push(M)}return r.count=a,o}return n=U(r),e=O(n,r),t=h(n,e,r),m([n,e,t],r)};function U(r){if(c.length>0){var n=N(r.hue),e=w(n),t=(n[1]-n[0])/c.length,a=parseInt((e-n[0])/t);c[a]===!0?a=(a+2)%c.length:c[a]=!0;var o=(n[0]+a*t)%359,u=(n[0]+(a+1)*t)%359;return n=[o,u],e=w(n),e<0&&(e=360+e),e}else{var n=A(r.hue);return e=w(n),e<0&&(e=360+e),e}}function O(r,n){if(n.hue==="monochrome")return 0;if(n.luminosity==="random")return w([0,100]);var e=C(r),t=e[0],a=e[1];switch(n.luminosity){case"bright":t=55;break;case"dark":t=a-10;break;case"light":a=55;break}return w([t,a])}function h(r,n,e){var t=v(r,n),a=100;switch(e.luminosity){case"dark":a=t+20;break;case"light":t=(a+t)/2;break;case"random":t=0,a=100;break}return w([t,a])}function m(r,n){switch(n.format){case"hsvArray":return r;case"hslArray":return j(r);case"hsl":var e=j(r);return"hsl("+e[0]+", "+e[1]+"%, "+e[2]+"%)";case"hsla":var t=j(r),u=n.alpha||Math.random();return"hsla("+t[0]+", "+t[1]+"%, "+t[2]+"%, "+u+")";case"rgbArray":return T(r);case"rgb":var a=T(r);return"rgb("+a.join(", ")+")";case"rgba":var o=T(r),u=n.alpha||Math.random();return"rgba("+o.join(", ")+", "+u+")";default:return W(r)}}function v(r,n){for(var e=y(r).lowerBounds,t=0;t<e.length-1;t++){var a=e[t][0],o=e[t][1],u=e[t+1][0],M=e[t+1][1];if(n>=a&&n<=u){var P=(M-o)/(u-a),S=o-P*a;return P*n+S}}return 0}function A(r){if(typeof parseInt(r)=="number"){var n=parseInt(r);if(n<360&&n>0)return[n,n]}if(typeof r=="string"){if(l[r]){var e=l[r];if(e.hueRange)return e.hueRange}else if(r.match(/^#?([0-9A-F]{3}|[0-9A-F]{6})$/i)){var t=D(r)[0];return[t,t]}}return[0,360]}function C(r){return y(r).saturationRange}function y(r){r>=334&&r<=360&&(r-=360);for(var n in l){var e=l[n];if(e.hueRange&&r>=e.hueRange[0]&&r<=e.hueRange[1])return l[n]}return"Color not found"}function w(r){if(s===null){var n=.618033988749895,e=Math.random();return e+=n,e%=1,Math.floor(r[0]+e*(r[1]+1-r[0]))}else{var t=r[1]||1,a=r[0]||0;s=(s*9301+49297)%233280;var o=s/233280;return Math.floor(a+o*(t-a))}}function W(r){var n=T(r);function e(a){var o=a.toString(16);return o.length==1?"0"+o:o}var t="#"+e(n[0])+e(n[1])+e(n[2]);return t}function f(r,n,e){var t=e[0][0],a=e[e.length-1][0],o=e[e.length-1][1],u=e[0][1];l[r]={hueRange:n,lowerBounds:e,saturationRange:[t,a],brightnessRange:[o,u]}}function F(){f("monochrome",null,[[0,0],[100,0]]),f("red",[-26,18],[[20,100],[30,92],[40,89],[50,85],[60,78],[70,70],[80,60],[90,55],[100,50]]),f("orange",[18,46],[[20,100],[30,93],[40,88],[50,86],[60,85],[70,70],[100,70]]),f("yellow",[46,62],[[25,100],[40,94],[50,89],[60,86],[70,84],[80,82],[90,80],[100,75]]),f("green",[62,178],[[30,100],[40,90],[50,85],[60,81],[70,74],[80,64],[90,50],[100,40]]),f("blue",[178,257],[[20,100],[30,86],[40,80],[50,74],[60,60],[70,52],[80,44],[90,39],[100,35]]),f("purple",[257,282],[[20,100],[30,87],[40,79],[50,70],[60,65],[70,59],[80,52],[90,45],[100,42]]),f("pink",[282,334],[[20,100],[30,90],[40,86],[60,84],[80,80],[90,75],[100,73]])}function T(r){var n=r[0];n===0&&(n=1),n===360&&(n=359),n=n/360;var e=r[1]/100,t=r[2]/100,a=Math.floor(n*6),o=n*6-a,u=t*(1-e),M=t*(1-o*e),P=t*(1-(1-o)*e),S=256,I=256,R=256;switch(a){case 0:S=t,I=P,R=u;break;case 1:S=M,I=t,R=u;break;case 2:S=u,I=t,R=P;break;case 3:S=u,I=M,R=t;break;case 4:S=P,I=u,R=t;break;case 5:S=t,I=u,R=M;break}var Z=[Math.floor(S*255),Math.floor(I*255),Math.floor(R*255)];return Z}function D(r){r=r.replace(/^#/,""),r=r.length===3?r.replace(/(.)/g,"$1$1"):r;var n=parseInt(r.substr(0,2),16)/255,e=parseInt(r.substr(2,2),16)/255,t=parseInt(r.substr(4,2),16)/255,a=Math.max(n,e,t),o=a-Math.min(n,e,t),u=a?o/a:0;switch(a){case n:return[60*((e-t)/o%6)||0,u,a];case e:return[60*((t-n)/o+2)||0,u,a];case t:return[60*((n-e)/o+4)||0,u,a]}}function j(r){var n=r[0],e=r[1]/100,t=r[2]/100,a=(2-e)*t;return[n,Math.round(e*t/(a<1?a:2-a)*1e4)/100,a/2*100]}function B(r){for(var n=0,e=0;e!==r.length&&!(n>=Number.MAX_SAFE_INTEGER);e++)n+=r.charCodeAt(e);return n}function N(r){if(isNaN(r)){if(typeof r=="string"){if(l[r]){var e=l[r];if(e.hueRange)return e.hueRange}else if(r.match(/^#?([0-9A-F]{3}|[0-9A-F]{6})$/i)){var t=D(r)[0];return y(t).hueRange}}}else{var n=parseInt(r);if(n<360&&n>0)return y(r).hueRange}return[0,360]}return b})})($,$.exports);var q=$.exports;class Y{constructor(d="NetlessApp",s="error"){_(this,"kind");_(this,"debug");_(this,"color",q({luminosity:"dark"}));this.kind=d,this.debug=s}log(...d){if(this.debug===!0||this.debug==="log")return this._log("log",d)}warn(...d){if(this.debug&&this.debug!=="error")return this._log("warn",d)}error(...d){if(this.debug)return this._log("error",d)}_log(d,s){console[d](`%c[${this.kind}]:`,`color: ${this.color}; font-weight: bold;`,...s)}}function E(i){return typeof i=="object"&&i!==null}const z=new Set(["clicker","selector"]),Q={kind:"EmbeddedPage",setup(i){const d=i.getAppOptions()||{},s=i.getDisplayer(),l=i.getRoom(),c=i.getBox(),b=i.getView(),U=d.debug,O="state",h=K(i,{src:"https://example.org",store:{[O]:{}},page:""}),m=new V,v=new Y("EmbeddedPage",U),A=e=>{try{return E(e)?JSON.parse(JSON.stringify(e)):e}catch(t){throw v.error("Cannot parse to JSON object",e),t}},C=document.createElement("div");C.dataset.appKind="EmbeddedPage",C.classList.add("netless-app-embedded-page");const y=document.createElement("iframe");C.appendChild(y),c.mountStyles(p),c.mountContent(C);const w=e=>e.map(({memberId:t,payload:a})=>({sessionUID:t,uid:(a==null?void 0:a.uid)||"",userPayload:A(a)})),W=(e,t)=>{let a=null;const o=i.mobxUtils.reaction(e,()=>{a&&(a(),a=null);const u=e();E(u)&&(a=()=>i.objectUtils.unlistenUpdated(u,t),i.objectUtils.listenUpdated(u,t))},{fireImmediately:!0});return()=>{a==null||a(),o()}},f=d.postMessage||(e=>{var t;v.log("Message to SDK",e),(t=y.contentWindow)==null||t.postMessage(e,"*")}),F=d.addMessageListener||((e,t)=>{const a=({data:o,source:u})=>{u!==y.contentWindow||!E(o)||!o.NEAType||(v.log("Message from SDK",o),e(o))};return window.addEventListener("message",a,t),()=>{window.removeEventListener("message",a,t)}});if(b){const e=document.createElement("div");if(e.classList.add("netless-app-embedded-page-wb-view"),C.appendChild(e),i.mountView(e),l){const t=a=>{e.style.pointerEvents=!a||z.has(a)?"none":"auto"};t(l.state.memberState.currentApplianceName),m.add(()=>{const a=o=>{o.memberState&&t(o.memberState.currentApplianceName)};return s.callbacks.on("onRoomStateChanged",a),()=>s.callbacks.off("onRoomStateChanged",a)})}}const T=e=>{b&&E(e)&&b.moveCamera({centerX:e.x,centerY:e.y,scale:e.scale,animationMode:"immediately"})},D=e=>{E(e)&&Object.keys(e).forEach(t=>{if(t!==O){const a=e[t];i.updateAttributes(["store",t],a)}})},j=e=>{if(E(e)&&e.storeId&&E(e.state)){const{storeId:t,state:a}=e;if(!i.getIsWritable()){v.error(`Cannot setState on store ${t} without writable access`,a);return}Object.keys(a).forEach(o=>{i.updateAttributes(["store",t,o],a[o])})}};m.add(()=>{const e=new V,t=o=>{e.add(()=>W(()=>h.store[o],u=>{f({NEAType:"StateChanged",payload:{storeId:o,actions:A(u)}})}),o)};Object.keys(h.store).forEach(t);const a=W(()=>h.store,o=>{f({NEAType:"StoreChanged",payload:A(o)}),h.store&&o.forEach(({key:u,kind:M})=>{switch(M){case 2:{e.flush(u);break}default:{t(u);break}}})});return()=>{e.flushAll(),a()}}),m.add(()=>{const e=t=>{(t==null?void 0:t.roomMembers)&&f({NEAType:"RoomMembersChanged",payload:w(t.roomMembers)})};return s.callbacks.on("onRoomStateChanged",e),()=>s.callbacks.off("onRoomStateChanged",e)});const B=e=>{if(!b)v.warn("SetPage: page api is only available with 'scenePath' options enabled.");else{const t=i.getInitScenePath();if(typeof e=="string"&&i.getIsWritable()&&t&&l){const a=[t,e].join("/");l.scenePathType(a)==="none"&&l.putScenes(t,[{name:e}]),i.setScenePath(a),i.updateAttributes(["page"],e)}}};m.add(()=>{const e=(t,a)=>{f({NEAType:"PageChanged",payload:{oldValue:a,newValue:t}})};return i.mobxUtils.reaction(()=>h.page,e)}),m.add(()=>{const e=()=>{const t=i.getIsWritable();f({NEAType:"WritableChanged",payload:t}),v.log(`WritableChange changed to ${t}`)};return i.emitter.on("writableChange",e),()=>i.emitter.off("writableChange",e)});const N=`channel-${i.appId}`,r=e=>{i.getIsWritable()&&l&&l.dispatchMagixEvent(N,e)};m.add(()=>{const e=t=>{t.event===N&&t.authorId!==s.observerId&&f({NEAType:"ReceiveMagixMessage",payload:t.payload})};return s.addMagixEventListener(N,e),()=>s.removeMagixEventListener(N,e)});const n=()=>{var a;const e=s.observerId,t=(a=s.state.roomMembers.find(o=>o.memberId===e))==null?void 0:a.payload;f({NEAType:"Init",payload:{appId:i.appId,page:h.page,writable:i.getIsWritable(),roomMembers:w(s.state.roomMembers),debug:U,store:A(h.store),mainStoreId:O,meta:{sessionUID:e,uid:(l==null?void 0:l.uid)||(t==null?void 0:t.uid)||"",roomUUID:l==null?void 0:l.uuid,userPayload:A(t)}}})};m.add(()=>F(e=>{switch(e.NEAType){case"Init":{n();break}case"SetState":{j(e.payload);break}case"SetStore":{D(e.payload);break}case"SetPage":{B(e.payload);break}case"SendMagixMessage":{r(e.payload);break}case"MoveCamera":{T(e.payload);break}}})),i.emitter.on("destroy",()=>{v.log("destroy"),m.flushAll()}),y.src=h.src}};return g.default=Q,Object.defineProperty(g,"__esModule",{value:!0}),g[Symbol.toStringTag]="Module",g}({});
 //# sourceMappingURL=main.iife.js.map

package.json

 {
   "name": "@netless/app-embedded-page",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "main": "dist/main.cjs.js",
   "module": "dist/main.es.js",
+  "unpkg": "dist/main.iife.js",
+  "jsdelivr": "dist/main.iife.js",
   "types": "src/index.ts",
+  "devDependencies": {
+    "@netless/app-shared": "0.1.2",
+    "side-effect-manager": "^0.1.5"
+  },
   "scripts": {
@@ -13,6 +19,3 @@ "types": "cross-env NODE_ENV=production tsc --declaration --emitDeclarationOnly --outDir dist",
   },
-  "devDependencies": {
-    "@netless/app-shared": "workspace:*",
-    "side-effect-manager": "^0.1.5"
-  }
-}
+  "readme": "## @netless/app-embedded-page\n\nNetless App for embedding web apps, providing the ability to sync state and event messaging.\n\n[中文](./README-zh.md)\n\n### Usage\n\n#### ✏️ Basic Usage\n\nIf you only want to insert a normal webpage into Whiteboard:\n\n1. Create a web app/page, make it accessible through the web.\n2. Call `addApp` from [WindowManager](https://github.com/netless-io/window-manager) to add it to whiteboard.\n\n```js\nmanager.addApp({\n  kind: \"EmbeddedPage\",\n  attributes: {\n    src: \"<your-url>\",\n  },\n});\n```\n\n#### ✏️ States and Events\n\nIf you need the ability to store shared replayable states and send/receive replayable events, use [`@netless/app-embedded-page-sdk`](https://github.com/netless-io/netless-app/tree/master/packages/app-embedded-page-sdk):\n\n```js\nimport { createEmbeddedApp } from \"@netless/app-embedded-page-sdk\";\n\nconst app = await createEmbeddedApp();\n\n// Initialize state. Only set value the key does not exist in `app.state`\napp.ensureState({ count: 0 });\n\n// Set partial state to `app.state` like `React.setState`\napp.setState({ count: nextCount });\n\n// Access states\nconsole.log(app.state);\n\n// Listen to state changes\napp.onStateChanged.addListener(changedStates => {\n  if (changedStates.count) {\n    console.log(changedStates.count.newValue, changedStates.count.oldValue);\n  }\n});\n\n// Broadcast messages to other clients in the room\napp.sendMessage({ type: \"UPDATE_COUNT\", uid: \"222\" });\n\n// Listen to messages from other clients\napp.onPageChanged.addListener(message => {\n  console.log(message);\n});\n```\n\nIf you need to let your user pass initial values dynamically when creating the app, they may set the `state` attribute.\n\n```js\nmanager.addApp({\n  kind: \"EmbeddedPage\",\n  attributes: {\n    src: \"<your-url>\",\n    state: { initial: \"state\" }, // must be an object, will be `{}` by default\n  },\n});\n```\n\n#### ✏️ Drawable Whiteboard\n\nIf you need whiteboard on top of your page, pass a `scenePath` option:\n\n```js\nmanager.addApp({\n  kind: \"EmbeddedPage\",\n  options: {\n    scenePath: \"/demo\", // `scenePath` should be globally unique (across apps).\n  },\n  attributes: {\n    src: \"<your-url>\",\n  },\n});\n```\n\n> **Important:** When whiteboard drawing is enabled, the embedded page will not receive mouse events from user. Whiteboard drawing is disabled if and only if `room.state.memberState.currentApplianceName` is `clicker` or `selector`.\n\n#### ✏️ Multi-page Whiteboard\n\nIf your app has multiple pages and want to have multiple whiteboards for each page independently, you can use pages APIs from [SDK](https://github.com/netless-io/netless-app/tree/master/packages/app-embedded-page-sdk).\n\n```js\nimport { createEmbeddedApp } from \"@netless/app-embedded-page-sdk\";\n\n// Fake code for your page meta data\nconst pages = [\n  { content: \"page 1\", pageNum: \"1\" },\n  { content: \"page 2\", pageNum: \"2\" },\n  { content: \"page 3\", pageNum: \"3\" },\n];\n\n// Fake code for rendering your page\nconst renderPage = pageNum => {\n  const page = pages.find(e => e.pageNum === pageNum);\n  $(\"#page-area\").textContent = page.content;\n};\n\nconst app = await createEmbeddedApp();\n\n// Access page meta\nrenderPage(app.page || pages[0].pageNum);\n\n$(\"#btn-to-page-2\").onclick = () => {\n  // Switch to another page\n  app.setPage(\"2\");\n};\n\n// Listen to page changes\napp.onPageChanged.addListener(() => {\n  renderPage(app.page || pages[0].pageNum);\n});\n```\n\n### Licence\n\nMIT @ [netless](https://github.com/netless-io)\n"
+}

playground.ts

@@ -5,7 +5,15 @@ import type { PlaygroundConfigs } from "../playground/typings";
 const demo: { title: string; src: string }[] = [
+  // {
+  //   title: "Scratch",
+  //   src: "http://192.168.31.195:8601/",
+  //   // scenePath: `/embedded-page/${title}`,
+  // },
   {
-    title: "Scratch",
-    src: "http://192.168.31.195:8601/",
-    // scenePath: `/embedded-page/${title}`,
+    title: "Google Docs",
+    src: "https://docs.google.com/document/d/1bd4SRb5BmTUjPGrFxU2V7KI2g_mQ-HQUBxKTxsEn5e4/edit?usp=sharing",
   },
+  {
+    title: "Google Sheets",
+    src: "https://docs.google.com/spreadsheets/d/1MgIHeLiVjchdh_5EtwRtnbqYlZZ8fDN-FXuGhfBumiA/edit?usp=sharing",
+  },
 ];
@@ -22,3 +30,3 @@
     attributes: {
-      src: "/embed.html",
+      src: "./embed.html",
     },
@@ -25,0 +33,0 @@ },

src/index.ts

@@ -110,4 +110,6 @@ import styles from "./style.scss?inline";
           const props = getProps();
-          disposeListenUpdated = () => context.objectUtils.unlistenUpdated(props, callback);
-          context.objectUtils.listenUpdated(props, callback);
+          if (isObj(props)) {
+            disposeListenUpdated = () => context.objectUtils.unlistenUpdated(props, callback);
+            context.objectUtils.listenUpdated(props, callback);
+          }
         },
@@ -114,0 +116,0 @@ { fireImmediately: true }

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

No License Found

License

(Experimental) License information could not be found.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

206140

increased by2.67%

Number of package files

20

increased by5.26%

Number of low license alerts

0

decreased by-100%

Lines of code

1417

increased by0.85%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes