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

Comparing version 0.0.6 to 0.1.0

dist/EmbeddedApp.d.ts

@@ -11,2 +11,3 @@ import type { CameraState, DefaultState, Diff, DiffOne, FromSDKMessage, FromSDKMessageKey, InitData, MetaData, RoomMember, ToSDKMessage, ToSDKMessageKey } from "@netless/app-embedded-page";
 export declare class EmbeddedApp<TState = DefaultState, TMessage = unknown> {
+    readonly appId: string;
     readonly debug: boolean;
@@ -13,0 +14,0 @@ private _logger;

dist/main.cjs.js

@@ -1,2 +0,2 @@
-"use strict";var X=Object.defineProperty;var J=(l,e,r)=>e in l?X(l,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):l[e]=r;var I=(l,e,r)=>(J(l,typeof e!="symbol"?e+"":e,r),r);Object.defineProperty(exports,"__esModule",{value:!0});exports[Symbol.toStringTag]="Module";const W="!#%()*+,-./:;=?@[]^_`{|}~ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789",Q=W.length,O=Array(20),C=()=>{for(let l=0;l<20;l++)O[l]=W.charAt(Math.random()*Q);return O.join("")};class U{constructor(){this.disposers=new Map}add(e,r=C()){return this.flush(r),this.disposers.set(r,e()),r}addDisposer(e,r=C()){return this.flush(r),this.disposers.set(r,e),r}addEventListener(e,r,n,o,d=C()){return this.add(()=>(e.addEventListener(r,n,o),()=>e.removeEventListener(r,n,o)),d),d}setTimeout(e,r,n=C()){return this.add(()=>{const o=window.setTimeout(()=>{this.remove(n),e()},r);return()=>window.clearTimeout(o)},n)}setInterval(e,r,n=C()){return this.add(()=>{const o=window.setInterval(e,r);return()=>window.clearInterval(o)},n)}remove(e){const r=this.disposers.get(e);return this.disposers.delete(e),r}flush(e){const r=this.remove(e);if(r)try{r()}catch(n){console.error(n)}}flushAll(){this.disposers.forEach(e=>{try{e()}catch(r){console.error(r)}}),this.disposers.clear()}}var Y=typeof globalThis!="undefined"?globalThis:typeof window!="undefined"?window:typeof global!="undefined"?global:typeof self!="undefined"?self:{},L={exports:{}};(function(l,e){(function(r,n){{var o=n();l&&l.exports&&(e=l.exports=o),e.randomColor=o}})(Y,function(){var r=null,n={};N();var o=[],d=function(t){if(t=t||{},t.seed!==void 0&&t.seed!==null&&t.seed===parseInt(t.seed,10))r=t.seed;else if(typeof t.seed=="string")r=G(t.seed);else{if(t.seed!==void 0&&t.seed!==null)throw new TypeError("The seed value must be an integer or string");r=null}var a,s,i;if(t.count!==null&&t.count!==void 0){for(var h=t.count,g=[],f=0;f<t.count;f++)o.push(!1);for(t.count=null;h>g.length;){var w=d(t);r!==null&&(t.seed=r),g.push(w)}return t.count=h,g}return a=u(t),s=c(a,t),i=_(a,s,t),b([a,s,i],t)};function u(t){if(o.length>0){var a=q(t.hue),s=y(a),i=(a[1]-a[0])/o.length,h=parseInt((s-a[0])/i);o[h]===!0?h=(h+2)%o.length:o[h]=!0;var g=(a[0]+h*i)%359,f=(a[0]+(h+1)*i)%359;return a=[g,f],s=y(a),s<0&&(s=360+s),s}else{var a=F(t.hue);return s=y(a),s<0&&(s=360+s),s}}function c(t,a){if(a.hue==="monochrome")return 0;if(a.luminosity==="random")return y([0,100]);var s=H(t),i=s[0],h=s[1];switch(a.luminosity){case"bright":i=55;break;case"dark":i=h-10;break;case"light":h=55;break}return y([i,h])}function _(t,a,s){var i=v(t,a),h=100;switch(s.luminosity){case"dark":h=i+20;break;case"light":i=(h+i)/2;break;case"random":i=0,h=100;break}return y([i,h])}function b(t,a){switch(a.format){case"hsvArray":return t;case"hslArray":return T(t);case"hsl":var s=T(t);return"hsl("+s[0]+", "+s[1]+"%, "+s[2]+"%)";case"hsla":var i=T(t),h=a.alpha||Math.random();return"hsla("+i[0]+", "+i[1]+"%, "+i[2]+"%, "+h+")";case"rgbArray":return k(t);case"rgb":var g=k(t);return"rgb("+g.join(", ")+")";case"rgba":var f=k(t),h=a.alpha||Math.random();return"rgba("+f.join(", ")+", "+h+")";default:return K(t)}}function v(t,a){for(var s=P(t).lowerBounds,i=0;i<s.length-1;i++){var h=s[i][0],g=s[i][1],f=s[i+1][0],w=s[i+1][1];if(a>=h&&a<=f){var A=(w-g)/(f-h),p=g-A*h;return A*a+p}}return 0}function F(t){if(typeof parseInt(t)=="number"){var a=parseInt(t);if(a<360&&a>0)return[a,a]}if(typeof t=="string"){if(n[t]){var s=n[t];if(s.hueRange)return s.hueRange}else if(t.match(/^#?([0-9A-F]{3}|[0-9A-F]{6})$/i)){var i=x(t)[0];return[i,i]}}return[0,360]}function H(t){return P(t).saturationRange}function P(t){t>=334&&t<=360&&(t-=360);for(var a in n){var s=n[a];if(s.hueRange&&t>=s.hueRange[0]&&t<=s.hueRange[1])return n[a]}return"Color not found"}function y(t){if(r===null){var a=.618033988749895,s=Math.random();return s+=a,s%=1,Math.floor(t[0]+s*(t[1]+1-t[0]))}else{var i=t[1]||1,h=t[0]||0;r=(r*9301+49297)%233280;var g=r/233280;return Math.floor(h+g*(i-h))}}function K(t){var a=k(t);function s(h){var g=h.toString(16);return g.length==1?"0"+g:g}var i="#"+s(a[0])+s(a[1])+s(a[2]);return i}function M(t,a,s){var i=s[0][0],h=s[s.length-1][0],g=s[s.length-1][1],f=s[0][1];n[t]={hueRange:a,lowerBounds:s,saturationRange:[i,h],brightnessRange:[g,f]}}function N(){M("monochrome",null,[[0,0],[100,0]]),M("red",[-26,18],[[20,100],[30,92],[40,89],[50,85],[60,78],[70,70],[80,60],[90,55],[100,50]]),M("orange",[18,46],[[20,100],[30,93],[40,88],[50,86],[60,85],[70,70],[100,70]]),M("yellow",[46,62],[[25,100],[40,94],[50,89],[60,86],[70,84],[80,82],[90,80],[100,75]]),M("green",[62,178],[[30,100],[40,90],[50,85],[60,81],[70,74],[80,64],[90,50],[100,40]]),M("blue",[178,257],[[20,100],[30,86],[40,80],[50,74],[60,60],[70,52],[80,44],[90,39],[100,35]]),M("purple",[257,282],[[20,100],[30,87],[40,79],[50,70],[60,65],[70,59],[80,52],[90,45],[100,42]]),M("pink",[282,334],[[20,100],[30,90],[40,86],[60,84],[80,80],[90,75],[100,73]])}function k(t){var a=t[0];a===0&&(a=1),a===360&&(a=359),a=a/360;var s=t[1]/100,i=t[2]/100,h=Math.floor(a*6),g=a*6-h,f=i*(1-s),w=i*(1-g*s),A=i*(1-(1-g)*s),p=256,S=256,R=256;switch(h){case 0:p=i,S=A,R=f;break;case 1:p=w,S=i,R=f;break;case 2:p=f,S=i,R=A;break;case 3:p=f,S=w,R=i;break;case 4:p=A,S=f,R=i;break;case 5:p=i,S=f,R=w;break}var z=[Math.floor(p*255),Math.floor(S*255),Math.floor(R*255)];return z}function x(t){t=t.replace(/^#/,""),t=t.length===3?t.replace(/(.)/g,"$1$1"):t;var a=parseInt(t.substr(0,2),16)/255,s=parseInt(t.substr(2,2),16)/255,i=parseInt(t.substr(4,2),16)/255,h=Math.max(a,s,i),g=h-Math.min(a,s,i),f=h?g/h:0;switch(h){case a:return[60*((s-i)/g%6)||0,f,h];case s:return[60*((i-a)/g+2)||0,f,h];case i:return[60*((a-s)/g+4)||0,f,h]}}function T(t){var a=t[0],s=t[1]/100,i=t[2]/100,h=(2-s)*i;return[a,Math.round(s*i/(h<1?h:2-h)*1e4)/100,h/2*100]}function G(t){for(var a=0,s=0;s!==t.length&&!(a>=Number.MAX_SAFE_INTEGER);s++)a+=t.charCodeAt(s);return a}function q(t){if(isNaN(t)){if(typeof t=="string"){if(n[t]){var s=n[t];if(s.hueRange)return s.hueRange}else if(t.match(/^#?([0-9A-F]{3}|[0-9A-F]{6})$/i)){var i=x(t)[0];return P(i).hueRange}}}else{var a=parseInt(t);if(a<360&&a>0)return P(t).hueRange}return[0,360]}return d})})(L,L.exports);var Z=L.exports;class ee{constructor(e="NetlessApp",r="error"){I(this,"kind");I(this,"debug");I(this,"color",Z({luminosity:"dark"}));this.kind=e,this.debug=r}log(...e){if(this.debug===!0||this.debug==="log")return this._log("log",e)}warn(...e){if(this.debug&&this.debug!=="error")return this._log("warn",e)}error(...e){if(this.debug)return this._log("error",e)}_log(e,r){console[e](`%c[${this.kind}]:`,`color: ${this.color}; font-weight: bold;`,...r)}}class E{constructor(){this.listeners=new Set}get length(){return this.listeners.size}dispatch(e){this.listeners.forEach(r=>r(e))}addListener(e){this.listeners.add(e)}removeListener(e){this.listeners.delete(e)}}const D=(l,e)=>Object.prototype.hasOwnProperty.call(l,e),$=Object.keys;function m(l){return typeof l=="object"&&l!==null}const te=m;function j(l){return Boolean(m(l)&&l.__isRef)}function re(l){return{k:se(),v:l,__isRef:!0}}function se(){return Date.now().toString().slice(6)+Math.random().toString().slice(2,8)}class ae{constructor({id:e,state:r,onSetState:n,getIsWritable:o,logger:d=console}){this.onStateChanged=new E,this._destroyed=!1,this.onDestroyed=new E,this._kMap=new WeakMap,this._lastValue=new Map,this.id=e,this._onSetState=n,this.getIsWritable=o,this._logger=d,this._state={},r&&$(r).forEach(u=>{const c=r[u];if(j(c)){const{k:_,v:b}=c;this._state[u]=b,m(b)&&this._kMap.set(b,_)}else this._state[u]=c})}get state(){return this._state}ensureState(e){return this.setState($(e).reduce((r,n)=>(D(this._state,n)||(r[n]=e[n]),r),{}))}setState(e){if(this._destroyed){this._logger.error(`Cannot call setState on Store ${this.id} which is destroyed.`);return}if(!this.getIsWritable()){this._logger.error(`Cannot setState on store ${this.id} without writable access`,e);return}const r=$(e);if(r.length>0){const n={};r.forEach(o=>{const d=e[o];if(d===void 0)this._lastValue.set(o,this._state[o]),delete this._state[o],n[o]=d;else if(d!==this._state[o])if(this._lastValue.set(o,this._state[o]),this._state[o]=d,m(d)){const u=re(d);this._kMap.set(u.v,u.k),n[o]=u}else n[o]=d}),Object.keys(n).length>0&&this._onSetState(n)}}get destroyed(){return this._destroyed}_destroy(){this._destroyed=!0,this.onDestroyed.dispatch()}_updateProperties(e){if(this._destroyed){this._logger.error(`Cannot call _updateProperties on Store ${this.id} which is destroyed.`);return}if(e.length>0){const r={};e.forEach(({key:n,value:o,kind:d})=>{let u;switch(this._lastValue.has(n)&&(u=this._lastValue.get(n),this._lastValue.delete(n)),d){case 2:{D(this._state,n)&&(u=this._state[n],delete this._state[n]),r[n]={oldValue:u};break}default:{let c=o;if(j(o)){const{k:_,v:b}=o,v=this._state[n];m(v)&&this._kMap.get(v)===_?c=v:(c=b,m(b)&&this._kMap.set(b,_))}c!==this._state[n]&&(u=this._state[n],this._state[n]=c),r[n]={newValue:c,oldValue:u};break}}}),this.onStateChanged.dispatch(r)}}}class B{constructor(e,r,n,o,d,u){this.onRoomMembersChanged=new E,this.onMessage=new E,this.onWritableChanged=new E,this.onPageChanged=new E,this._stores=new Map,this._sideEffect=new U,this.debug=n,this._postMessage=o,this._mainStoreId=e.mainStoreId,this._storeRawData=e.store||{[this._mainStoreId]:{}},this._writable=e.writable,this._page=e.page,this._meta=e.meta,this._roomMembers=e.roomMembers,this._logger=u,this._sideEffect.add(()=>d(c=>{const{type:_,payload:b}=c;if(_){const v=`_handleMsg${_}`;this[v]&&this[v](b)}})),this._mainStore=this.connectStore(e.mainStoreId,r),this.onStateChanged=this._mainStore.onStateChanged}get meta(){return this._meta}get roomMembers(){return this._roomMembers}_handleMsgRoomMembersChanged(e){if(e==null||Array.isArray(e)){const r=this._roomMembers;this._roomMembers=e,this.onRoomMembersChanged.dispatch({newValue:this._roomMembers,oldValue:r})}}moveCamera(e){this._postMessage({type:"MoveCamera",payload:e})}sendMessage(e){this._postMessage({type:"SendMagixMessage",payload:e})}_handleMsgReceiveMagixMessage(e){this.onMessage.dispatch(e)}get isWritable(){return this._writable}_handleMsgWritableChanged(e){const r=Boolean(e),n=this._writable;r!==n&&(this._writable=r,this.onWritableChanged.dispatch({oldValue:n,newValue:r}))}get page(){return this._page}setPage(e){this._page=e,this._postMessage({type:"SetPage",payload:e})}_handleMsgPageChanged(e){te(e)&&(this._page=e.newValue,this.onPageChanged.dispatch(e))}connectStore(e,r){let n=this._stores.get(e);if(!n){if(!D(this._storeRawData,e)){const o={};this._postMessage({type:"SetStore",payload:{[e]:o}}),this._storeRawData[e]=o}n=new ae({id:e,state:this._storeRawData[e],logger:this._logger,getIsWritable:()=>this._writable,onSetState:o=>this._postMessage({type:"SetState",payload:{storeId:e,state:o}})}),this._stores.set(e,n)}return r&&n.ensureState(r),n}isStoreConnected(e){return this._stores.has(e)}removeStore(e){if(e===this._mainStoreId){this._logger.error(`Store "${e}" is not removable.`);return}const r=this._stores.get(e);r&&(this._stores.delete(e),r._destroy()),this._storeRawData[e]&&this._postMessage({type:"SetStore",payload:{[e]:void 0}})}_handleMsgStoreChanged(e){Array.isArray(e)&&e.length>0&&e.forEach(({key:n,value:o,kind:d})=>{switch(d){case 2:{delete this._storeRawData[n];const u=this._stores.get(n);u&&(this._stores.delete(n),u._destroy());break}default:{this._storeRawData[n]=o;break}}})}get state(){return this._mainStore.state}ensureState(e){return this._mainStore.ensureState(e)}setState(e){return this._mainStore.setState(e)}_handleMsgStateChanged(e){if(m(e)&&e.storeId&&Array.isArray(e.actions)&&e.actions.length>0){const{storeId:r,actions:n}=e;n.forEach(({key:d,value:u,kind:c})=>{switch(c){case 2:{const _=this._storeRawData[r];m(_)&&delete _[d];break}default:{const _=this._storeRawData[r];m(_)&&(_[d]=u);break}}});const o=this._stores.get(r);o&&o._updateProperties(n)}}destroy(){this._sideEffect.flushAll()}}let V;function ne(l={}){if(!parent)throw new Error("[EmbeddedPageSDK]: SDK is not running in a iframe.");if(V)return Promise.resolve(V);const e=new ee("EmbeddedPageSDK",l.debug),r=l.postMessage||(o=>{e.log("Message to parent",o),parent.postMessage(o,"*")}),n=l.addMessageListener||((o,d)=>{const u=({data:c,source:_})=>{if(!(!parent||_!==parent)){if(!m(c)){console.warn("window message data should be object, instead got",c);return}e.log("Message from parent",c),o(c)}};return window.addEventListener("message",u,d),()=>{window.removeEventListener("message",u,d)}});return r({type:"Init"}),new Promise(o=>{const d=n(u=>{if(V){d(),o(V);return}if(u.type==="Init"){d();const c=new B(u.payload,l.ensureState||{},Boolean(D(l,"debug")?l.debug:u.payload||!1),r,n,e);V=c,o(c)}})})}exports.EmbeddedApp=B;exports.EmbeddedPageEvent=E;exports.createEmbeddedApp=ne;
+"use strict";var X=Object.defineProperty;var J=(l,e,r)=>e in l?X(l,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):l[e]=r;var P=(l,e,r)=>(J(l,typeof e!="symbol"?e+"":e,r),r);Object.defineProperty(exports,"__esModule",{value:!0});exports[Symbol.toStringTag]="Module";const x="!#%()*+,-./:;=?@[]^_`{|}~ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789",Q=x.length,W=Array(20),C=()=>{for(let l=0;l<20;l++)W[l]=x.charAt(Math.random()*Q);return W.join("")};class U{constructor(){this.disposers=new Map}add(e,r=C()){return this.flush(r),this.disposers.set(r,e()),r}addDisposer(e,r=C()){return this.flush(r),this.disposers.set(r,e),r}addEventListener(e,r,n,o,d=C()){return this.add(()=>(e.addEventListener(r,n,o),()=>e.removeEventListener(r,n,o)),d),d}setTimeout(e,r,n=C()){return this.add(()=>{const o=window.setTimeout(()=>{this.remove(n),e()},r);return()=>window.clearTimeout(o)},n)}setInterval(e,r,n=C()){return this.add(()=>{const o=window.setInterval(e,r);return()=>window.clearInterval(o)},n)}remove(e){const r=this.disposers.get(e);return this.disposers.delete(e),r}flush(e){const r=this.remove(e);if(r)try{r()}catch(n){console.error(n)}}flushAll(){this.disposers.forEach(e=>{try{e()}catch(r){console.error(r)}}),this.disposers.clear()}}var Y=typeof globalThis!="undefined"?globalThis:typeof window!="undefined"?window:typeof global!="undefined"?global:typeof self!="undefined"?self:{},D={exports:{}};(function(l,e){(function(r,n){{var o=n();l&&l.exports&&(e=l.exports=o),e.randomColor=o}})(Y,function(){var r=null,n={};K();var o=[],d=function(t){if(t=t||{},t.seed!==void 0&&t.seed!==null&&t.seed===parseInt(t.seed,10))r=t.seed;else if(typeof t.seed=="string")r=G(t.seed);else{if(t.seed!==void 0&&t.seed!==null)throw new TypeError("The seed value must be an integer or string");r=null}var a,s,i;if(t.count!==null&&t.count!==void 0){for(var h=t.count,g=[],f=0;f<t.count;f++)o.push(!1);for(t.count=null;h>g.length;){var w=d(t);r!==null&&(t.seed=r),g.push(w)}return t.count=h,g}return a=u(t),s=c(a,t),i=_(a,s,t),b([a,s,i],t)};function u(t){if(o.length>0){var a=q(t.hue),s=R(a),i=(a[1]-a[0])/o.length,h=parseInt((s-a[0])/i);o[h]===!0?h=(h+2)%o.length:o[h]=!0;var g=(a[0]+h*i)%359,f=(a[0]+(h+1)*i)%359;return a=[g,f],s=R(a),s<0&&(s=360+s),s}else{var a=B(t.hue);return s=R(a),s<0&&(s=360+s),s}}function c(t,a){if(a.hue==="monochrome")return 0;if(a.luminosity==="random")return R([0,100]);var s=F(t),i=s[0],h=s[1];switch(a.luminosity){case"bright":i=55;break;case"dark":i=h-10;break;case"light":h=55;break}return R([i,h])}function _(t,a,s){var i=v(t,a),h=100;switch(s.luminosity){case"dark":h=i+20;break;case"light":i=(h+i)/2;break;case"random":i=0,h=100;break}return R([i,h])}function b(t,a){switch(a.format){case"hsvArray":return t;case"hslArray":return N(t);case"hsl":var s=N(t);return"hsl("+s[0]+", "+s[1]+"%, "+s[2]+"%)";case"hsla":var i=N(t),h=a.alpha||Math.random();return"hsla("+i[0]+", "+i[1]+"%, "+i[2]+"%, "+h+")";case"rgbArray":return I(t);case"rgb":var g=I(t);return"rgb("+g.join(", ")+")";case"rgba":var f=I(t),h=a.alpha||Math.random();return"rgba("+f.join(", ")+", "+h+")";default:return H(t)}}function v(t,a){for(var s=V(t).lowerBounds,i=0;i<s.length-1;i++){var h=s[i][0],g=s[i][1],f=s[i+1][0],w=s[i+1][1];if(a>=h&&a<=f){var y=(w-g)/(f-h),p=g-y*h;return y*a+p}}return 0}function B(t){if(typeof parseInt(t)=="number"){var a=parseInt(t);if(a<360&&a>0)return[a,a]}if(typeof t=="string"){if(n[t]){var s=n[t];if(s.hueRange)return s.hueRange}else if(t.match(/^#?([0-9A-F]{3}|[0-9A-F]{6})$/i)){var i=$(t)[0];return[i,i]}}return[0,360]}function F(t){return V(t).saturationRange}function V(t){t>=334&&t<=360&&(t-=360);for(var a in n){var s=n[a];if(s.hueRange&&t>=s.hueRange[0]&&t<=s.hueRange[1])return n[a]}return"Color not found"}function R(t){if(r===null){var a=.618033988749895,s=Math.random();return s+=a,s%=1,Math.floor(t[0]+s*(t[1]+1-t[0]))}else{var i=t[1]||1,h=t[0]||0;r=(r*9301+49297)%233280;var g=r/233280;return Math.floor(h+g*(i-h))}}function H(t){var a=I(t);function s(h){var g=h.toString(16);return g.length==1?"0"+g:g}var i="#"+s(a[0])+s(a[1])+s(a[2]);return i}function M(t,a,s){var i=s[0][0],h=s[s.length-1][0],g=s[s.length-1][1],f=s[0][1];n[t]={hueRange:a,lowerBounds:s,saturationRange:[i,h],brightnessRange:[g,f]}}function K(){M("monochrome",null,[[0,0],[100,0]]),M("red",[-26,18],[[20,100],[30,92],[40,89],[50,85],[60,78],[70,70],[80,60],[90,55],[100,50]]),M("orange",[18,46],[[20,100],[30,93],[40,88],[50,86],[60,85],[70,70],[100,70]]),M("yellow",[46,62],[[25,100],[40,94],[50,89],[60,86],[70,84],[80,82],[90,80],[100,75]]),M("green",[62,178],[[30,100],[40,90],[50,85],[60,81],[70,74],[80,64],[90,50],[100,40]]),M("blue",[178,257],[[20,100],[30,86],[40,80],[50,74],[60,60],[70,52],[80,44],[90,39],[100,35]]),M("purple",[257,282],[[20,100],[30,87],[40,79],[50,70],[60,65],[70,59],[80,52],[90,45],[100,42]]),M("pink",[282,334],[[20,100],[30,90],[40,86],[60,84],[80,80],[90,75],[100,73]])}function I(t){var a=t[0];a===0&&(a=1),a===360&&(a=359),a=a/360;var s=t[1]/100,i=t[2]/100,h=Math.floor(a*6),g=a*6-h,f=i*(1-s),w=i*(1-g*s),y=i*(1-(1-g)*s),p=256,S=256,E=256;switch(h){case 0:p=i,S=y,E=f;break;case 1:p=w,S=i,E=f;break;case 2:p=f,S=i,E=y;break;case 3:p=f,S=w,E=i;break;case 4:p=y,S=f,E=i;break;case 5:p=i,S=f,E=w;break}var z=[Math.floor(p*255),Math.floor(S*255),Math.floor(E*255)];return z}function $(t){t=t.replace(/^#/,""),t=t.length===3?t.replace(/(.)/g,"$1$1"):t;var a=parseInt(t.substr(0,2),16)/255,s=parseInt(t.substr(2,2),16)/255,i=parseInt(t.substr(4,2),16)/255,h=Math.max(a,s,i),g=h-Math.min(a,s,i),f=h?g/h:0;switch(h){case a:return[60*((s-i)/g%6)||0,f,h];case s:return[60*((i-a)/g+2)||0,f,h];case i:return[60*((a-s)/g+4)||0,f,h]}}function N(t){var a=t[0],s=t[1]/100,i=t[2]/100,h=(2-s)*i;return[a,Math.round(s*i/(h<1?h:2-h)*1e4)/100,h/2*100]}function G(t){for(var a=0,s=0;s!==t.length&&!(a>=Number.MAX_SAFE_INTEGER);s++)a+=t.charCodeAt(s);return a}function q(t){if(isNaN(t)){if(typeof t=="string"){if(n[t]){var s=n[t];if(s.hueRange)return s.hueRange}else if(t.match(/^#?([0-9A-F]{3}|[0-9A-F]{6})$/i)){var i=$(t)[0];return V(i).hueRange}}}else{var a=parseInt(t);if(a<360&&a>0)return V(t).hueRange}return[0,360]}return d})})(D,D.exports);var Z=D.exports;class ee{constructor(e="NetlessApp",r="error"){P(this,"kind");P(this,"debug");P(this,"color",Z({luminosity:"dark"}));this.kind=e,this.debug=r}log(...e){if(this.debug===!0||this.debug==="log")return this._log("log",e)}warn(...e){if(this.debug&&this.debug!=="error")return this._log("warn",e)}error(...e){if(this.debug)return this._log("error",e)}_log(e,r){console[e](`%c[${this.kind}]:`,`color: ${this.color}; font-weight: bold;`,...r)}}class A{constructor(){this.listeners=new Set}get length(){return this.listeners.size}dispatch(e){this.listeners.forEach(r=>r(e))}addListener(e){this.listeners.add(e)}removeListener(e){this.listeners.delete(e)}}const k=(l,e)=>Object.prototype.hasOwnProperty.call(l,e),L=Object.keys;function m(l){return typeof l=="object"&&l!==null}const te=m;function O(l){return Boolean(m(l)&&l.__isRef)}function re(l){return{k:se(),v:l,__isRef:!0}}function se(){return Date.now().toString().slice(6)+Math.random().toString().slice(2,8)}class ae{constructor({id:e,state:r,onSetState:n,getIsWritable:o,logger:d=console}){this.onStateChanged=new A,this._destroyed=!1,this.onDestroyed=new A,this._kMap=new WeakMap,this._lastValue=new Map,this.id=e,this._onSetState=n,this.getIsWritable=o,this._logger=d,this._state={},r&&L(r).forEach(u=>{const c=r[u];if(O(c)){const{k:_,v:b}=c;this._state[u]=b,m(b)&&this._kMap.set(b,_)}else this._state[u]=c})}get state(){return this._state}ensureState(e){return this.setState(L(e).reduce((r,n)=>(k(this._state,n)||(r[n]=e[n]),r),{}))}setState(e){if(this._destroyed){this._logger.error(`Cannot call setState on Store ${this.id} which is destroyed.`);return}if(!this.getIsWritable()){this._logger.error(`Cannot setState on store ${this.id} without writable access`,e);return}const r=L(e);if(r.length>0){const n={};r.forEach(o=>{const d=e[o];if(d===void 0)this._lastValue.set(o,this._state[o]),delete this._state[o],n[o]=d;else if(d!==this._state[o])if(this._lastValue.set(o,this._state[o]),this._state[o]=d,m(d)){const u=re(d);this._kMap.set(u.v,u.k),n[o]=u}else n[o]=d}),Object.keys(n).length>0&&this._onSetState(n)}}get destroyed(){return this._destroyed}_destroy(){this._destroyed=!0,this.onDestroyed.dispatch()}_updateProperties(e){if(this._destroyed){this._logger.error(`Cannot call _updateProperties on Store ${this.id} which is destroyed.`);return}if(e.length>0){const r={};e.forEach(({key:n,value:o,kind:d})=>{let u;switch(this._lastValue.has(n)&&(u=this._lastValue.get(n),this._lastValue.delete(n)),d){case 2:{k(this._state,n)&&(u=this._state[n],delete this._state[n]),r[n]={oldValue:u};break}default:{let c=o;if(O(o)){const{k:_,v:b}=o,v=this._state[n];m(v)&&this._kMap.get(v)===_?c=v:(c=b,m(b)&&this._kMap.set(b,_))}c!==this._state[n]&&(u=this._state[n],this._state[n]=c),r[n]={newValue:c,oldValue:u};break}}}),this.onStateChanged.dispatch(r)}}}class j{constructor(e,r,n,o,d,u){this.onRoomMembersChanged=new A,this.onMessage=new A,this.onWritableChanged=new A,this.onPageChanged=new A,this._stores=new Map,this._sideEffect=new U,this.appId=e.appId,this.debug=n,this._postMessage=o,this._mainStoreId=e.mainStoreId,this._storeRawData=e.store||{[this._mainStoreId]:{}},this._writable=e.writable,this._page=e.page,this._meta=e.meta,this._roomMembers=e.roomMembers,this._logger=u,this._sideEffect.add(()=>d(c=>{const{NEAType:_,payload:b}=c;if(_){const v=`_handleMsg${_}`;this[v]&&this[v](b)}})),this._mainStore=this.connectStore(e.mainStoreId,r),this.onStateChanged=this._mainStore.onStateChanged}get meta(){return this._meta}get roomMembers(){return this._roomMembers}_handleMsgRoomMembersChanged(e){if(e==null||Array.isArray(e)){const r=this._roomMembers;this._roomMembers=e,this.onRoomMembersChanged.dispatch({newValue:this._roomMembers,oldValue:r})}}moveCamera(e){this._postMessage({NEAType:"MoveCamera",payload:e})}sendMessage(e){this._postMessage({NEAType:"SendMagixMessage",payload:e})}_handleMsgReceiveMagixMessage(e){this.onMessage.dispatch(e)}get isWritable(){return this._writable}_handleMsgWritableChanged(e){const r=Boolean(e),n=this._writable;r!==n&&(this._writable=r,this.onWritableChanged.dispatch({oldValue:n,newValue:r}))}get page(){return this._page}setPage(e){this._page=e,this._postMessage({NEAType:"SetPage",payload:e})}_handleMsgPageChanged(e){te(e)&&(this._page=e.newValue,this.onPageChanged.dispatch(e))}connectStore(e,r){let n=this._stores.get(e);if(!n){if(!k(this._storeRawData,e)){const o={};this._postMessage({NEAType:"SetStore",payload:{[e]:o}}),this._storeRawData[e]=o}n=new ae({id:e,state:this._storeRawData[e],logger:this._logger,getIsWritable:()=>this._writable,onSetState:o=>this._postMessage({NEAType:"SetState",payload:{storeId:e,state:o}})}),this._stores.set(e,n)}return r&&n.ensureState(r),n}isStoreConnected(e){return this._stores.has(e)}removeStore(e){if(e===this._mainStoreId){this._logger.error(`Store "${e}" is not removable.`);return}const r=this._stores.get(e);r&&(this._stores.delete(e),r._destroy()),this._storeRawData[e]&&this._postMessage({NEAType:"SetStore",payload:{[e]:void 0}})}_handleMsgStoreChanged(e){Array.isArray(e)&&e.length>0&&e.forEach(({key:n,value:o,kind:d})=>{switch(d){case 2:{delete this._storeRawData[n];const u=this._stores.get(n);u&&(this._stores.delete(n),u._destroy());break}default:{this._storeRawData[n]=o;break}}})}get state(){return this._mainStore.state}ensureState(e){return this._mainStore.ensureState(e)}setState(e){return this._mainStore.setState(e)}_handleMsgStateChanged(e){if(m(e)&&e.storeId&&Array.isArray(e.actions)&&e.actions.length>0){const{storeId:r,actions:n}=e;n.forEach(({key:d,value:u,kind:c})=>{switch(c){case 2:{const _=this._storeRawData[r];m(_)&&delete _[d];break}default:{const _=this._storeRawData[r];m(_)&&(_[d]=u);break}}});const o=this._stores.get(r);o&&o._updateProperties(n)}}destroy(){this._sideEffect.flushAll()}}let T;function ne(l={}){if(!parent)throw new Error("[EmbeddedPageSDK]: SDK is not running in a iframe.");if(T)return Promise.resolve(T);const e=new ee("EmbeddedPageSDK",l.debug),r=l.postMessage||(o=>{e.log("Message to parent",o),parent.postMessage(o,"*")}),n=l.addMessageListener||((o,d)=>{const u=({data:c,source:_})=>{!parent||_!==parent||!m(c)||!c.NEAType||(e.log("Message from parent",c),o(c))};return window.addEventListener("message",u,d),()=>{window.removeEventListener("message",u,d)}});return r({NEAType:"Init"}),new Promise(o=>{const d=n(u=>{if(T){d(),o(T);return}if(u.NEAType==="Init"){d();const c=new j(u.payload,l.ensureState||{},Boolean(k(l,"debug")?l.debug:u.payload||!1),r,n,e);T=c,o(c)}})})}exports.EmbeddedApp=j;exports.EmbeddedPageEvent=A;exports.createEmbeddedApp=ne;
 //# sourceMappingURL=main.cjs.js.map

dist/main.es.js

@@ -588,2 +588,3 @@ var __defProp = Object.defineProperty;
     this._sideEffect = new o();
+    this.appId = initData.appId;
     this.debug = debug;
@@ -599,5 +600,5 @@ this._postMessage = postMessage;
     this._sideEffect.add(() => addMessageListener((message) => {
-      const { type, payload } = message;
-      if (type) {
-        const method = `_handleMsg${type}`;
+      const { NEAType, payload } = message;
+      if (NEAType) {
+        const method = `_handleMsg${NEAType}`;
         if (this[method]) {
@@ -628,6 +629,6 @@ this[method](payload);
   moveCamera(camera) {
-    this._postMessage({ type: "MoveCamera", payload: camera });
+    this._postMessage({ NEAType: "MoveCamera", payload: camera });
   }
   sendMessage(payload) {
-    this._postMessage({ type: "SendMagixMessage", payload });
+    this._postMessage({ NEAType: "SendMagixMessage", payload });
   }
@@ -653,3 +654,3 @@ _handleMsgReceiveMagixMessage(payload) {
     this._page = page;
-    this._postMessage({ type: "SetPage", payload: page });
+    this._postMessage({ NEAType: "SetPage", payload: page });
   }
@@ -667,3 +668,3 @@ _handleMsgPageChanged(payload) {
         const storeState = {};
-        this._postMessage({ type: "SetStore", payload: { [storeId]: storeState } });
+        this._postMessage({ NEAType: "SetStore", payload: { [storeId]: storeState } });
         this._storeRawData[storeId] = storeState;
@@ -676,3 +677,3 @@ }
         getIsWritable: () => this._writable,
-        onSetState: (state) => this._postMessage({ type: "SetState", payload: { storeId, state } })
+        onSetState: (state) => this._postMessage({ NEAType: "SetState", payload: { storeId, state } })
       });
@@ -700,3 +701,3 @@ this._stores.set(storeId, store);
     if (this._storeRawData[id]) {
-      this._postMessage({ type: "SetStore", payload: { [id]: void 0 } });
+      this._postMessage({ NEAType: "SetStore", payload: { [id]: void 0 } });
     }
@@ -784,7 +785,4 @@ }
     }) => {
-      if (!parent || source !== parent)
+      if (!parent || source !== parent || !isObj(data) || !data.NEAType) {
         return;
-      if (!isObj(data)) {
-        console.warn("window message data should be object, instead got", data);
-        return;
       }
@@ -799,3 +797,3 @@ logger.log("Message from parent", data);
   });
-  postMessage({ type: "Init" });
+  postMessage({ NEAType: "Init" });
   return new Promise((resolve) => {
@@ -808,3 +806,3 @@ const disposer = addMessageListener((message) => {
       }
-      if (message.type === "Init") {
+      if (message.NEAType === "Init") {
         disposer();
@@ -811,0 +809,0 @@ const app = new EmbeddedApp(message.payload, config.ensureState || {}, Boolean(has(config, "debug") ? config.debug : message.payload || false), postMessage, addMessageListener, logger);

dist/main.iife.js

@@ -1,2 +0,2 @@
-(()=>{var ne=Object.defineProperty;var ie=(b,v,R)=>v in b?ne(b,v,{enumerable:!0,configurable:!0,writable:!0,value:R}):b[v]=R;var $=(b,v,R)=>(ie(b,typeof v!="symbol"?v+"":v,R),R);var he=function(b){"use strict";const v="!#%()*+,-./:;=?@[]^_`{|}~ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789",R=v.length,B=Array(20),k=()=>{for(let l=0;l<20;l++)B[l]=v.charAt(Math.random()*R);return B.join("")};class x{constructor(){this.disposers=new Map}add(e,r=k()){return this.flush(r),this.disposers.set(r,e()),r}addDisposer(e,r=k()){return this.flush(r),this.disposers.set(r,e),r}addEventListener(e,r,n,o,d=k()){return this.add(()=>(e.addEventListener(r,n,o),()=>e.removeEventListener(r,n,o)),d),d}setTimeout(e,r,n=k()){return this.add(()=>{const o=window.setTimeout(()=>{this.remove(n),e()},r);return()=>window.clearTimeout(o)},n)}setInterval(e,r,n=k()){return this.add(()=>{const o=window.setInterval(e,r);return()=>window.clearInterval(o)},n)}remove(e){const r=this.disposers.get(e);return this.disposers.delete(e),r}flush(e){const r=this.remove(e);if(r)try{r()}catch(n){console.error(n)}}flushAll(){this.disposers.forEach(e=>{try{e()}catch(r){console.error(r)}}),this.disposers.clear()}}var K=typeof globalThis!="undefined"?globalThis:typeof window!="undefined"?window:typeof global!="undefined"?global:typeof self!="undefined"?self:{},W={exports:{}};(function(l,e){(function(r,n){{var o=n();l&&l.exports&&(e=l.exports=o),e.randomColor=o}})(K,function(){var r=null,n={};te();var o=[],d=function(t){if(t=t||{},t.seed!==void 0&&t.seed!==null&&t.seed===parseInt(t.seed,10))r=t.seed;else if(typeof t.seed=="string")r=re(t.seed);else{if(t.seed!==void 0&&t.seed!==null)throw new TypeError("The seed value must be an integer or string");r=null}var a,s,i;if(t.count!==null&&t.count!==void 0){for(var h=t.count,g=[],f=0;f<t.count;f++)o.push(!1);for(t.count=null;h>g.length;){var y=d(t);r!==null&&(t.seed=r),g.push(y)}return t.count=h,g}return a=u(t),s=c(a,t),i=_(a,s,t),m([a,s,i],t)};function u(t){if(o.length>0){var a=se(t.hue),s=V(a),i=(a[1]-a[0])/o.length,h=parseInt((s-a[0])/i);o[h]===!0?h=(h+2)%o.length:o[h]=!0;var g=(a[0]+h*i)%359,f=(a[0]+(h+1)*i)%359;return a=[g,f],s=V(a),s<0&&(s=360+s),s}else{var a=Y(t.hue);return s=V(a),s<0&&(s=360+s),s}}function c(t,a){if(a.hue==="monochrome")return 0;if(a.luminosity==="random")return V([0,100]);var s=Z(t),i=s[0],h=s[1];switch(a.luminosity){case"bright":i=55;break;case"dark":i=h-10;break;case"light":h=55;break}return V([i,h])}function _(t,a,s){var i=w(t,a),h=100;switch(s.luminosity){case"dark":h=i+20;break;case"light":i=(h+i)/2;break;case"random":i=0,h=100;break}return V([i,h])}function m(t,a){switch(a.format){case"hsvArray":return t;case"hslArray":return j(t);case"hsl":var s=j(t);return"hsl("+s[0]+", "+s[1]+"%, "+s[2]+"%)";case"hsla":var i=j(t),h=a.alpha||Math.random();return"hsla("+i[0]+", "+i[1]+"%, "+i[2]+"%, "+h+")";case"rgbArray":return L(t);case"rgb":var g=L(t);return"rgb("+g.join(", ")+")";case"rgba":var f=L(t),h=a.alpha||Math.random();return"rgba("+f.join(", ")+", "+h+")";default:return ee(t)}}function w(t,a){for(var s=T(t).lowerBounds,i=0;i<s.length-1;i++){var h=s[i][0],g=s[i][1],f=s[i+1][0],y=s[i+1][1];if(a>=h&&a<=f){var P=(y-g)/(f-h),M=g-P*h;return P*a+M}}return 0}function Y(t){if(typeof parseInt(t)=="number"){var a=parseInt(t);if(a<360&&a>0)return[a,a]}if(typeof t=="string"){if(n[t]){var s=n[t];if(s.hueRange)return s.hueRange}else if(t.match(/^#?([0-9A-F]{3}|[0-9A-F]{6})$/i)){var i=N(t)[0];return[i,i]}}return[0,360]}function Z(t){return T(t).saturationRange}function T(t){t>=334&&t<=360&&(t-=360);for(var a in n){var s=n[a];if(s.hueRange&&t>=s.hueRange[0]&&t<=s.hueRange[1])return n[a]}return"Color not found"}function V(t){if(r===null){var a=.618033988749895,s=Math.random();return s+=a,s%=1,Math.floor(t[0]+s*(t[1]+1-t[0]))}else{var i=t[1]||1,h=t[0]||0;r=(r*9301+49297)%233280;var g=r/233280;return Math.floor(h+g*(i-h))}}function ee(t){var a=L(t);function s(h){var g=h.toString(16);return g.length==1?"0"+g:g}var i="#"+s(a[0])+s(a[1])+s(a[2]);return i}function S(t,a,s){var i=s[0][0],h=s[s.length-1][0],g=s[s.length-1][1],f=s[0][1];n[t]={hueRange:a,lowerBounds:s,saturationRange:[i,h],brightnessRange:[g,f]}}function te(){S("monochrome",null,[[0,0],[100,0]]),S("red",[-26,18],[[20,100],[30,92],[40,89],[50,85],[60,78],[70,70],[80,60],[90,55],[100,50]]),S("orange",[18,46],[[20,100],[30,93],[40,88],[50,86],[60,85],[70,70],[100,70]]),S("yellow",[46,62],[[25,100],[40,94],[50,89],[60,86],[70,84],[80,82],[90,80],[100,75]]),S("green",[62,178],[[30,100],[40,90],[50,85],[60,81],[70,74],[80,64],[90,50],[100,40]]),S("blue",[178,257],[[20,100],[30,86],[40,80],[50,74],[60,60],[70,52],[80,44],[90,39],[100,35]]),S("purple",[257,282],[[20,100],[30,87],[40,79],[50,70],[60,65],[70,59],[80,52],[90,45],[100,42]]),S("pink",[282,334],[[20,100],[30,90],[40,86],[60,84],[80,80],[90,75],[100,73]])}function L(t){var a=t[0];a===0&&(a=1),a===360&&(a=359),a=a/360;var s=t[1]/100,i=t[2]/100,h=Math.floor(a*6),g=a*6-h,f=i*(1-s),y=i*(1-g*s),P=i*(1-(1-g)*s),M=256,A=256,C=256;switch(h){case 0:M=i,A=P,C=f;break;case 1:M=y,A=i,C=f;break;case 2:M=f,A=i,C=P;break;case 3:M=f,A=y,C=i;break;case 4:M=P,A=f,C=i;break;case 5:M=i,A=f,C=y;break}var ae=[Math.floor(M*255),Math.floor(A*255),Math.floor(C*255)];return ae}function N(t){t=t.replace(/^#/,""),t=t.length===3?t.replace(/(.)/g,"$1$1"):t;var a=parseInt(t.substr(0,2),16)/255,s=parseInt(t.substr(2,2),16)/255,i=parseInt(t.substr(4,2),16)/255,h=Math.max(a,s,i),g=h-Math.min(a,s,i),f=h?g/h:0;switch(h){case a:return[60*((s-i)/g%6)||0,f,h];case s:return[60*((i-a)/g+2)||0,f,h];case i:return[60*((a-s)/g+4)||0,f,h]}}function j(t){var a=t[0],s=t[1]/100,i=t[2]/100,h=(2-s)*i;return[a,Math.round(s*i/(h<1?h:2-h)*1e4)/100,h/2*100]}function re(t){for(var a=0,s=0;s!==t.length&&!(a>=Number.MAX_SAFE_INTEGER);s++)a+=t.charCodeAt(s);return a}function se(t){if(isNaN(t)){if(typeof t=="string"){if(n[t]){var s=n[t];if(s.hueRange)return s.hueRange}else if(t.match(/^#?([0-9A-F]{3}|[0-9A-F]{6})$/i)){var i=N(t)[0];return T(i).hueRange}}}else{var a=parseInt(t);if(a<360&&a>0)return T(t).hueRange}return[0,360]}return d})})(W,W.exports);var G=W.exports;class q{constructor(e="NetlessApp",r="error"){$(this,"kind");$(this,"debug");$(this,"color",G({luminosity:"dark"}));this.kind=e,this.debug=r}log(...e){if(this.debug===!0||this.debug==="log")return this._log("log",e)}warn(...e){if(this.debug&&this.debug!=="error")return this._log("warn",e)}error(...e){if(this.debug)return this._log("error",e)}_log(e,r){console[e](`%c[${this.kind}]:`,`color: ${this.color}; font-weight: bold;`,...r)}}class E{constructor(){this.listeners=new Set}get length(){return this.listeners.size}dispatch(e){this.listeners.forEach(r=>r(e))}addListener(e){this.listeners.add(e)}removeListener(e){this.listeners.delete(e)}}const D=(l,e)=>Object.prototype.hasOwnProperty.call(l,e),O=Object.keys;function p(l){return typeof l=="object"&&l!==null}const z=p;function F(l){return Boolean(p(l)&&l.__isRef)}function X(l){return{k:J(),v:l,__isRef:!0}}function J(){return Date.now().toString().slice(6)+Math.random().toString().slice(2,8)}class Q{constructor({id:e,state:r,onSetState:n,getIsWritable:o,logger:d=console}){this.onStateChanged=new E,this._destroyed=!1,this.onDestroyed=new E,this._kMap=new WeakMap,this._lastValue=new Map,this.id=e,this._onSetState=n,this.getIsWritable=o,this._logger=d,this._state={},r&&O(r).forEach(u=>{const c=r[u];if(F(c)){const{k:_,v:m}=c;this._state[u]=m,p(m)&&this._kMap.set(m,_)}else this._state[u]=c})}get state(){return this._state}ensureState(e){return this.setState(O(e).reduce((r,n)=>(D(this._state,n)||(r[n]=e[n]),r),{}))}setState(e){if(this._destroyed){this._logger.error(`Cannot call setState on Store ${this.id} which is destroyed.`);return}if(!this.getIsWritable()){this._logger.error(`Cannot setState on store ${this.id} without writable access`,e);return}const r=O(e);if(r.length>0){const n={};r.forEach(o=>{const d=e[o];if(d===void 0)this._lastValue.set(o,this._state[o]),delete this._state[o],n[o]=d;else if(d!==this._state[o])if(this._lastValue.set(o,this._state[o]),this._state[o]=d,p(d)){const u=X(d);this._kMap.set(u.v,u.k),n[o]=u}else n[o]=d}),Object.keys(n).length>0&&this._onSetState(n)}}get destroyed(){return this._destroyed}_destroy(){this._destroyed=!0,this.onDestroyed.dispatch()}_updateProperties(e){if(this._destroyed){this._logger.error(`Cannot call _updateProperties on Store ${this.id} which is destroyed.`);return}if(e.length>0){const r={};e.forEach(({key:n,value:o,kind:d})=>{let u;switch(this._lastValue.has(n)&&(u=this._lastValue.get(n),this._lastValue.delete(n)),d){case 2:{D(this._state,n)&&(u=this._state[n],delete this._state[n]),r[n]={oldValue:u};break}default:{let c=o;if(F(o)){const{k:_,v:m}=o,w=this._state[n];p(w)&&this._kMap.get(w)===_?c=w:(c=m,p(m)&&this._kMap.set(m,_))}c!==this._state[n]&&(u=this._state[n],this._state[n]=c),r[n]={newValue:c,oldValue:u};break}}}),this.onStateChanged.dispatch(r)}}}class H{constructor(e,r,n,o,d,u){this.onRoomMembersChanged=new E,this.onMessage=new E,this.onWritableChanged=new E,this.onPageChanged=new E,this._stores=new Map,this._sideEffect=new x,this.debug=n,this._postMessage=o,this._mainStoreId=e.mainStoreId,this._storeRawData=e.store||{[this._mainStoreId]:{}},this._writable=e.writable,this._page=e.page,this._meta=e.meta,this._roomMembers=e.roomMembers,this._logger=u,this._sideEffect.add(()=>d(c=>{const{type:_,payload:m}=c;if(_){const w=`_handleMsg${_}`;this[w]&&this[w](m)}})),this._mainStore=this.connectStore(e.mainStoreId,r),this.onStateChanged=this._mainStore.onStateChanged}get meta(){return this._meta}get roomMembers(){return this._roomMembers}_handleMsgRoomMembersChanged(e){if(e==null||Array.isArray(e)){const r=this._roomMembers;this._roomMembers=e,this.onRoomMembersChanged.dispatch({newValue:this._roomMembers,oldValue:r})}}moveCamera(e){this._postMessage({type:"MoveCamera",payload:e})}sendMessage(e){this._postMessage({type:"SendMagixMessage",payload:e})}_handleMsgReceiveMagixMessage(e){this.onMessage.dispatch(e)}get isWritable(){return this._writable}_handleMsgWritableChanged(e){const r=Boolean(e),n=this._writable;r!==n&&(this._writable=r,this.onWritableChanged.dispatch({oldValue:n,newValue:r}))}get page(){return this._page}setPage(e){this._page=e,this._postMessage({type:"SetPage",payload:e})}_handleMsgPageChanged(e){z(e)&&(this._page=e.newValue,this.onPageChanged.dispatch(e))}connectStore(e,r){let n=this._stores.get(e);if(!n){if(!D(this._storeRawData,e)){const o={};this._postMessage({type:"SetStore",payload:{[e]:o}}),this._storeRawData[e]=o}n=new Q({id:e,state:this._storeRawData[e],logger:this._logger,getIsWritable:()=>this._writable,onSetState:o=>this._postMessage({type:"SetState",payload:{storeId:e,state:o}})}),this._stores.set(e,n)}return r&&n.ensureState(r),n}isStoreConnected(e){return this._stores.has(e)}removeStore(e){if(e===this._mainStoreId){this._logger.error(`Store "${e}" is not removable.`);return}const r=this._stores.get(e);r&&(this._stores.delete(e),r._destroy()),this._storeRawData[e]&&this._postMessage({type:"SetStore",payload:{[e]:void 0}})}_handleMsgStoreChanged(e){Array.isArray(e)&&e.length>0&&e.forEach(({key:n,value:o,kind:d})=>{switch(d){case 2:{delete this._storeRawData[n];const u=this._stores.get(n);u&&(this._stores.delete(n),u._destroy());break}default:{this._storeRawData[n]=o;break}}})}get state(){return this._mainStore.state}ensureState(e){return this._mainStore.ensureState(e)}setState(e){return this._mainStore.setState(e)}_handleMsgStateChanged(e){if(p(e)&&e.storeId&&Array.isArray(e.actions)&&e.actions.length>0){const{storeId:r,actions:n}=e;n.forEach(({key:d,value:u,kind:c})=>{switch(c){case 2:{const _=this._storeRawData[r];p(_)&&delete _[d];break}default:{const _=this._storeRawData[r];p(_)&&(_[d]=u);break}}});const o=this._stores.get(r);o&&o._updateProperties(n)}}destroy(){this._sideEffect.flushAll()}}let I;function U(l={}){if(!parent)throw new Error("[EmbeddedPageSDK]: SDK is not running in a iframe.");if(I)return Promise.resolve(I);const e=new q("EmbeddedPageSDK",l.debug),r=l.postMessage||(o=>{e.log("Message to parent",o),parent.postMessage(o,"*")}),n=l.addMessageListener||((o,d)=>{const u=({data:c,source:_})=>{if(!(!parent||_!==parent)){if(!p(c)){console.warn("window message data should be object, instead got",c);return}e.log("Message from parent",c),o(c)}};return window.addEventListener("message",u,d),()=>{window.removeEventListener("message",u,d)}});return r({type:"Init"}),new Promise(o=>{const d=n(u=>{if(I){d(),o(I);return}if(u.type==="Init"){d();const c=new H(u.payload,l.ensureState||{},Boolean(D(l,"debug")?l.debug:u.payload||!1),r,n,e);I=c,o(c)}})})}return b.EmbeddedApp=H,b.EmbeddedPageEvent=E,b.createEmbeddedApp=U,Object.defineProperty(b,"__esModule",{value:!0}),b[Symbol.toStringTag]="Module",b}({});})();
+(()=>{var ne=Object.defineProperty;var ie=(b,p,E)=>p in b?ne(b,p,{enumerable:!0,configurable:!0,writable:!0,value:E}):b[p]=E;var L=(b,p,E)=>(ie(b,typeof p!="symbol"?p+"":p,E),E);var he=function(b){"use strict";const p="!#%()*+,-./:;=?@[]^_`{|}~ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789",E=p.length,j=Array(20),I=()=>{for(let l=0;l<20;l++)j[l]=p.charAt(Math.random()*E);return j.join("")};class x{constructor(){this.disposers=new Map}add(e,r=I()){return this.flush(r),this.disposers.set(r,e()),r}addDisposer(e,r=I()){return this.flush(r),this.disposers.set(r,e),r}addEventListener(e,r,n,o,d=I()){return this.add(()=>(e.addEventListener(r,n,o),()=>e.removeEventListener(r,n,o)),d),d}setTimeout(e,r,n=I()){return this.add(()=>{const o=window.setTimeout(()=>{this.remove(n),e()},r);return()=>window.clearTimeout(o)},n)}setInterval(e,r,n=I()){return this.add(()=>{const o=window.setInterval(e,r);return()=>window.clearInterval(o)},n)}remove(e){const r=this.disposers.get(e);return this.disposers.delete(e),r}flush(e){const r=this.remove(e);if(r)try{r()}catch(n){console.error(n)}}flushAll(){this.disposers.forEach(e=>{try{e()}catch(r){console.error(r)}}),this.disposers.clear()}}var K=typeof globalThis!="undefined"?globalThis:typeof window!="undefined"?window:typeof global!="undefined"?global:typeof self!="undefined"?self:{},$={exports:{}};(function(l,e){(function(r,n){{var o=n();l&&l.exports&&(e=l.exports=o),e.randomColor=o}})(K,function(){var r=null,n={};te();var o=[],d=function(t){if(t=t||{},t.seed!==void 0&&t.seed!==null&&t.seed===parseInt(t.seed,10))r=t.seed;else if(typeof t.seed=="string")r=re(t.seed);else{if(t.seed!==void 0&&t.seed!==null)throw new TypeError("The seed value must be an integer or string");r=null}var a,s,i;if(t.count!==null&&t.count!==void 0){for(var h=t.count,g=[],f=0;f<t.count;f++)o.push(!1);for(t.count=null;h>g.length;){var R=d(t);r!==null&&(t.seed=r),g.push(R)}return t.count=h,g}return a=u(t),s=c(a,t),i=_(a,s,t),m([a,s,i],t)};function u(t){if(o.length>0){var a=se(t.hue),s=T(a),i=(a[1]-a[0])/o.length,h=parseInt((s-a[0])/i);o[h]===!0?h=(h+2)%o.length:o[h]=!0;var g=(a[0]+h*i)%359,f=(a[0]+(h+1)*i)%359;return a=[g,f],s=T(a),s<0&&(s=360+s),s}else{var a=Y(t.hue);return s=T(a),s<0&&(s=360+s),s}}function c(t,a){if(a.hue==="monochrome")return 0;if(a.luminosity==="random")return T([0,100]);var s=Z(t),i=s[0],h=s[1];switch(a.luminosity){case"bright":i=55;break;case"dark":i=h-10;break;case"light":h=55;break}return T([i,h])}function _(t,a,s){var i=w(t,a),h=100;switch(s.luminosity){case"dark":h=i+20;break;case"light":i=(h+i)/2;break;case"random":i=0,h=100;break}return T([i,h])}function m(t,a){switch(a.format){case"hsvArray":return t;case"hslArray":return O(t);case"hsl":var s=O(t);return"hsl("+s[0]+", "+s[1]+"%, "+s[2]+"%)";case"hsla":var i=O(t),h=a.alpha||Math.random();return"hsla("+i[0]+", "+i[1]+"%, "+i[2]+"%, "+h+")";case"rgbArray":return D(t);case"rgb":var g=D(t);return"rgb("+g.join(", ")+")";case"rgba":var f=D(t),h=a.alpha||Math.random();return"rgba("+f.join(", ")+", "+h+")";default:return ee(t)}}function w(t,a){for(var s=N(t).lowerBounds,i=0;i<s.length-1;i++){var h=s[i][0],g=s[i][1],f=s[i+1][0],R=s[i+1][1];if(a>=h&&a<=f){var V=(R-g)/(f-h),M=g-V*h;return V*a+M}}return 0}function Y(t){if(typeof parseInt(t)=="number"){var a=parseInt(t);if(a<360&&a>0)return[a,a]}if(typeof t=="string"){if(n[t]){var s=n[t];if(s.hueRange)return s.hueRange}else if(t.match(/^#?([0-9A-F]{3}|[0-9A-F]{6})$/i)){var i=H(t)[0];return[i,i]}}return[0,360]}function Z(t){return N(t).saturationRange}function N(t){t>=334&&t<=360&&(t-=360);for(var a in n){var s=n[a];if(s.hueRange&&t>=s.hueRange[0]&&t<=s.hueRange[1])return n[a]}return"Color not found"}function T(t){if(r===null){var a=.618033988749895,s=Math.random();return s+=a,s%=1,Math.floor(t[0]+s*(t[1]+1-t[0]))}else{var i=t[1]||1,h=t[0]||0;r=(r*9301+49297)%233280;var g=r/233280;return Math.floor(h+g*(i-h))}}function ee(t){var a=D(t);function s(h){var g=h.toString(16);return g.length==1?"0"+g:g}var i="#"+s(a[0])+s(a[1])+s(a[2]);return i}function S(t,a,s){var i=s[0][0],h=s[s.length-1][0],g=s[s.length-1][1],f=s[0][1];n[t]={hueRange:a,lowerBounds:s,saturationRange:[i,h],brightnessRange:[g,f]}}function te(){S("monochrome",null,[[0,0],[100,0]]),S("red",[-26,18],[[20,100],[30,92],[40,89],[50,85],[60,78],[70,70],[80,60],[90,55],[100,50]]),S("orange",[18,46],[[20,100],[30,93],[40,88],[50,86],[60,85],[70,70],[100,70]]),S("yellow",[46,62],[[25,100],[40,94],[50,89],[60,86],[70,84],[80,82],[90,80],[100,75]]),S("green",[62,178],[[30,100],[40,90],[50,85],[60,81],[70,74],[80,64],[90,50],[100,40]]),S("blue",[178,257],[[20,100],[30,86],[40,80],[50,74],[60,60],[70,52],[80,44],[90,39],[100,35]]),S("purple",[257,282],[[20,100],[30,87],[40,79],[50,70],[60,65],[70,59],[80,52],[90,45],[100,42]]),S("pink",[282,334],[[20,100],[30,90],[40,86],[60,84],[80,80],[90,75],[100,73]])}function D(t){var a=t[0];a===0&&(a=1),a===360&&(a=359),a=a/360;var s=t[1]/100,i=t[2]/100,h=Math.floor(a*6),g=a*6-h,f=i*(1-s),R=i*(1-g*s),V=i*(1-(1-g)*s),M=256,y=256,C=256;switch(h){case 0:M=i,y=V,C=f;break;case 1:M=R,y=i,C=f;break;case 2:M=f,y=i,C=V;break;case 3:M=f,y=R,C=i;break;case 4:M=V,y=f,C=i;break;case 5:M=i,y=f,C=R;break}var ae=[Math.floor(M*255),Math.floor(y*255),Math.floor(C*255)];return ae}function H(t){t=t.replace(/^#/,""),t=t.length===3?t.replace(/(.)/g,"$1$1"):t;var a=parseInt(t.substr(0,2),16)/255,s=parseInt(t.substr(2,2),16)/255,i=parseInt(t.substr(4,2),16)/255,h=Math.max(a,s,i),g=h-Math.min(a,s,i),f=h?g/h:0;switch(h){case a:return[60*((s-i)/g%6)||0,f,h];case s:return[60*((i-a)/g+2)||0,f,h];case i:return[60*((a-s)/g+4)||0,f,h]}}function O(t){var a=t[0],s=t[1]/100,i=t[2]/100,h=(2-s)*i;return[a,Math.round(s*i/(h<1?h:2-h)*1e4)/100,h/2*100]}function re(t){for(var a=0,s=0;s!==t.length&&!(a>=Number.MAX_SAFE_INTEGER);s++)a+=t.charCodeAt(s);return a}function se(t){if(isNaN(t)){if(typeof t=="string"){if(n[t]){var s=n[t];if(s.hueRange)return s.hueRange}else if(t.match(/^#?([0-9A-F]{3}|[0-9A-F]{6})$/i)){var i=H(t)[0];return N(i).hueRange}}}else{var a=parseInt(t);if(a<360&&a>0)return N(t).hueRange}return[0,360]}return d})})($,$.exports);var G=$.exports;class q{constructor(e="NetlessApp",r="error"){L(this,"kind");L(this,"debug");L(this,"color",G({luminosity:"dark"}));this.kind=e,this.debug=r}log(...e){if(this.debug===!0||this.debug==="log")return this._log("log",e)}warn(...e){if(this.debug&&this.debug!=="error")return this._log("warn",e)}error(...e){if(this.debug)return this._log("error",e)}_log(e,r){console[e](`%c[${this.kind}]:`,`color: ${this.color}; font-weight: bold;`,...r)}}class A{constructor(){this.listeners=new Set}get length(){return this.listeners.size}dispatch(e){this.listeners.forEach(r=>r(e))}addListener(e){this.listeners.add(e)}removeListener(e){this.listeners.delete(e)}}const k=(l,e)=>Object.prototype.hasOwnProperty.call(l,e),W=Object.keys;function v(l){return typeof l=="object"&&l!==null}const z=v;function B(l){return Boolean(v(l)&&l.__isRef)}function X(l){return{k:J(),v:l,__isRef:!0}}function J(){return Date.now().toString().slice(6)+Math.random().toString().slice(2,8)}class Q{constructor({id:e,state:r,onSetState:n,getIsWritable:o,logger:d=console}){this.onStateChanged=new A,this._destroyed=!1,this.onDestroyed=new A,this._kMap=new WeakMap,this._lastValue=new Map,this.id=e,this._onSetState=n,this.getIsWritable=o,this._logger=d,this._state={},r&&W(r).forEach(u=>{const c=r[u];if(B(c)){const{k:_,v:m}=c;this._state[u]=m,v(m)&&this._kMap.set(m,_)}else this._state[u]=c})}get state(){return this._state}ensureState(e){return this.setState(W(e).reduce((r,n)=>(k(this._state,n)||(r[n]=e[n]),r),{}))}setState(e){if(this._destroyed){this._logger.error(`Cannot call setState on Store ${this.id} which is destroyed.`);return}if(!this.getIsWritable()){this._logger.error(`Cannot setState on store ${this.id} without writable access`,e);return}const r=W(e);if(r.length>0){const n={};r.forEach(o=>{const d=e[o];if(d===void 0)this._lastValue.set(o,this._state[o]),delete this._state[o],n[o]=d;else if(d!==this._state[o])if(this._lastValue.set(o,this._state[o]),this._state[o]=d,v(d)){const u=X(d);this._kMap.set(u.v,u.k),n[o]=u}else n[o]=d}),Object.keys(n).length>0&&this._onSetState(n)}}get destroyed(){return this._destroyed}_destroy(){this._destroyed=!0,this.onDestroyed.dispatch()}_updateProperties(e){if(this._destroyed){this._logger.error(`Cannot call _updateProperties on Store ${this.id} which is destroyed.`);return}if(e.length>0){const r={};e.forEach(({key:n,value:o,kind:d})=>{let u;switch(this._lastValue.has(n)&&(u=this._lastValue.get(n),this._lastValue.delete(n)),d){case 2:{k(this._state,n)&&(u=this._state[n],delete this._state[n]),r[n]={oldValue:u};break}default:{let c=o;if(B(o)){const{k:_,v:m}=o,w=this._state[n];v(w)&&this._kMap.get(w)===_?c=w:(c=m,v(m)&&this._kMap.set(m,_))}c!==this._state[n]&&(u=this._state[n],this._state[n]=c),r[n]={newValue:c,oldValue:u};break}}}),this.onStateChanged.dispatch(r)}}}class F{constructor(e,r,n,o,d,u){this.onRoomMembersChanged=new A,this.onMessage=new A,this.onWritableChanged=new A,this.onPageChanged=new A,this._stores=new Map,this._sideEffect=new x,this.appId=e.appId,this.debug=n,this._postMessage=o,this._mainStoreId=e.mainStoreId,this._storeRawData=e.store||{[this._mainStoreId]:{}},this._writable=e.writable,this._page=e.page,this._meta=e.meta,this._roomMembers=e.roomMembers,this._logger=u,this._sideEffect.add(()=>d(c=>{const{NEAType:_,payload:m}=c;if(_){const w=`_handleMsg${_}`;this[w]&&this[w](m)}})),this._mainStore=this.connectStore(e.mainStoreId,r),this.onStateChanged=this._mainStore.onStateChanged}get meta(){return this._meta}get roomMembers(){return this._roomMembers}_handleMsgRoomMembersChanged(e){if(e==null||Array.isArray(e)){const r=this._roomMembers;this._roomMembers=e,this.onRoomMembersChanged.dispatch({newValue:this._roomMembers,oldValue:r})}}moveCamera(e){this._postMessage({NEAType:"MoveCamera",payload:e})}sendMessage(e){this._postMessage({NEAType:"SendMagixMessage",payload:e})}_handleMsgReceiveMagixMessage(e){this.onMessage.dispatch(e)}get isWritable(){return this._writable}_handleMsgWritableChanged(e){const r=Boolean(e),n=this._writable;r!==n&&(this._writable=r,this.onWritableChanged.dispatch({oldValue:n,newValue:r}))}get page(){return this._page}setPage(e){this._page=e,this._postMessage({NEAType:"SetPage",payload:e})}_handleMsgPageChanged(e){z(e)&&(this._page=e.newValue,this.onPageChanged.dispatch(e))}connectStore(e,r){let n=this._stores.get(e);if(!n){if(!k(this._storeRawData,e)){const o={};this._postMessage({NEAType:"SetStore",payload:{[e]:o}}),this._storeRawData[e]=o}n=new Q({id:e,state:this._storeRawData[e],logger:this._logger,getIsWritable:()=>this._writable,onSetState:o=>this._postMessage({NEAType:"SetState",payload:{storeId:e,state:o}})}),this._stores.set(e,n)}return r&&n.ensureState(r),n}isStoreConnected(e){return this._stores.has(e)}removeStore(e){if(e===this._mainStoreId){this._logger.error(`Store "${e}" is not removable.`);return}const r=this._stores.get(e);r&&(this._stores.delete(e),r._destroy()),this._storeRawData[e]&&this._postMessage({NEAType:"SetStore",payload:{[e]:void 0}})}_handleMsgStoreChanged(e){Array.isArray(e)&&e.length>0&&e.forEach(({key:n,value:o,kind:d})=>{switch(d){case 2:{delete this._storeRawData[n];const u=this._stores.get(n);u&&(this._stores.delete(n),u._destroy());break}default:{this._storeRawData[n]=o;break}}})}get state(){return this._mainStore.state}ensureState(e){return this._mainStore.ensureState(e)}setState(e){return this._mainStore.setState(e)}_handleMsgStateChanged(e){if(v(e)&&e.storeId&&Array.isArray(e.actions)&&e.actions.length>0){const{storeId:r,actions:n}=e;n.forEach(({key:d,value:u,kind:c})=>{switch(c){case 2:{const _=this._storeRawData[r];v(_)&&delete _[d];break}default:{const _=this._storeRawData[r];v(_)&&(_[d]=u);break}}});const o=this._stores.get(r);o&&o._updateProperties(n)}}destroy(){this._sideEffect.flushAll()}}let P;function U(l={}){if(!parent)throw new Error("[EmbeddedPageSDK]: SDK is not running in a iframe.");if(P)return Promise.resolve(P);const e=new q("EmbeddedPageSDK",l.debug),r=l.postMessage||(o=>{e.log("Message to parent",o),parent.postMessage(o,"*")}),n=l.addMessageListener||((o,d)=>{const u=({data:c,source:_})=>{!parent||_!==parent||!v(c)||!c.NEAType||(e.log("Message from parent",c),o(c))};return window.addEventListener("message",u,d),()=>{window.removeEventListener("message",u,d)}});return r({NEAType:"Init"}),new Promise(o=>{const d=n(u=>{if(P){d(),o(P);return}if(u.NEAType==="Init"){d();const c=new F(u.payload,l.ensureState||{},Boolean(k(l,"debug")?l.debug:u.payload||!1),r,n,e);P=c,o(c)}})})}return b.EmbeddedApp=F,b.EmbeddedPageEvent=A,b.createEmbeddedApp=U,Object.defineProperty(b,"__esModule",{value:!0}),b[Symbol.toStringTag]="Module",b}({});})();
 //# sourceMappingURL=main.iife.js.map

package.json

 {
   "name": "@netless/app-embedded-page-sdk",
-  "version": "0.0.6",
+  "version": "0.1.0",
   "main": "dist/main.cjs.js",
@@ -5,0 +5,0 @@ "module": "dist/main.es.js",

README-zh.md

@@ -11,4 +11,48 @@ ## @netless/app-embedded-page-sdk
 
+### 示例代码
+
+[查看更多示例](https://github.com/netless-io/netless-app/blob/master/packages/app-embedded-page/README-zh.md)。
+
+```ts
+import { createEmbeddedApp } from "@netless/app-embedded-page-sdk";
+
+interface State {
+  count: number;
+}
+
+type Message = {
+  type: "click";
+  payload: { id: string };
+};
+
+const app = await createEmbeddedApp<State, Message>();
+
+app.ensureState({ count: 0 });
+
+app.state; // => { count: 0 }
+app.setState({ count: 2 });
+app.onStateChanged.addListener(diff => {
+  if (diff.count) {
+    // count: 0 -> 2
+    console.log("count:", diff.count.oldValue, "->", diff.count.newValue);
+    console.log(diff.count.newValue === app.state.count);
+  }
+});
+
+app.sendMessage({ type: "click", payload: { id: "item1" } });
+app.onMessage.addListener(({ type, payload }) => {
+  if (type === "click") {
+    click(payload.id);
+  }
+});
+```
+
 ### API
 
+- **app.appId**
+
+  类型: `string`
+
+  App ID. 每个 App 在创建的时候会分配一个独立的 ID 并保持不变直到 App 被销毁。
+
 - **createEmbeddedApp()**
@@ -31,5 +75,5 @@
 
-- **app.page?**
+- **app.page**
 
-  类型: `string`
+  类型: `string | undefined`
 
@@ -74,4 +118,2 @@ 当前白板的场景，只有在 `addApp` 时传入了 `scenePath` 才能使用。调用 `app.setPage()` 来切换白板页。
 
-  和 `app.setState()` 不一样，它不会同步这些初始值给所有客户端。
-
   **partialState**
@@ -218,40 +260,4 @@
 
-### 示例代码
-
-```ts
-import { createEmbeddedApp } from "@netless/app-embedded-page-sdk";
-
-interface State {
-  count: number;
-}
-
-type Message = {
-  type: "click";
-  payload: { id: string };
-};
-
-const app = await createEmbeddedApp<State, Message>();
-
-app.ensureState({ count: 0 });
-
-app.state; // => { count: 0 }
-app.setState({ count: 2 });
-app.onStateChanged.addListener(diff => {
-  if (diff.count) {
-    // count: 0 -> 2
-    console.log("count:", diff.count.oldValue, "->", diff.count.newValue);
-    console.log(diff.count.newValue === app.state.count);
-  }
-});
-
-app.sendMessage({ type: "click", payload: { id: "item1" } });
-app.onMessage.addListener(({ type, payload }) => {
-  if (type === "click") {
-    click(payload.id);
-  }
-});
-```
-
 ### License
 
 MIT @ [netless](https://github.com/netless-io)

README.md

@@ -13,2 +13,40 @@ ## @netless/app-embedded-page-sdk
 
+### Example
+
+[More examples here](https://github.com/netless-io/netless-app/blob/master/packages/app-embedded-page).
+
+```ts
+import { createEmbeddedApp } from "@netless/app-embedded-page-sdk";
+
+interface State {
+  count: number;
+}
+
+type Message = {
+  type: "click";
+  payload: { id: string };
+};
+
+const app = await createEmbeddedApp<State, Message>();
+
+app.ensureState({ count: 0 });
+
+app.state; // => { count: 0 }
+app.setState({ count: 2 });
+app.onStateChanged.addListener(diff => {
+  if (diff.count) {
+    // count: 0 -> 2
+    console.log("count:", diff.count.oldValue, "->", diff.count.newValue);
+    console.log(diff.count.newValue === app.state.count);
+  }
+});
+
+app.sendMessage({ type: "click", payload: { id: "item1" } });
+app.onMessage.addListener(({ type, payload }) => {
+  if (type === "click") {
+    click(payload.id);
+  }
+});
+```
+
 ### API
@@ -26,2 +64,8 @@
 
+- **app.appId**
+
+  Type: `string`
+
+  App ID. Each app is assigned with a unique ID on creation and will keep the same ID until destroyed.
+
 - **app.state**
@@ -34,5 +78,5 @@
 
-- **app.page?**
+- **app.page**
 
-  Type: `string`
+  Type: `string | undefined`
 
@@ -78,4 +122,2 @@ Current whiteboard scene. It works only if `scenePath` has been set when calling `addApp`.
 
-  This method modifies state locally.
-
   **partialState**
@@ -222,40 +264,4 @@
 
-### Example
-
-```ts
-import { createEmbeddedApp } from "@netless/app-embedded-page-sdk";
-
-interface State {
-  count: number;
-}
-
-type Message = {
-  type: "click";
-  payload: { id: string };
-};
-
-const app = await createEmbeddedApp<State, Message>();
-
-app.ensureState({ count: 0 });
-
-app.state; // => { count: 0 }
-app.setState({ count: 2 });
-app.onStateChanged.addListener(diff => {
-  if (diff.count) {
-    // count: 0 -> 2
-    console.log("count:", diff.count.oldValue, "->", diff.count.newValue);
-    console.log(diff.count.newValue === app.state.count);
-  }
-});
-
-app.sendMessage({ type: "click", payload: { id: "item1" } });
-app.onMessage.addListener(({ type, payload }) => {
-  if (type === "click") {
-    click(payload.id);
-  }
-});
-```
-
 ### Licence
 
 MIT @ [netless](https://github.com/netless-io)

src/EmbeddedApp.ts

@@ -37,2 +37,3 @@ import type {
 export class EmbeddedApp<TState = DefaultState, TMessage = unknown> {
+  public readonly appId: string;
   public readonly debug: boolean;
@@ -50,2 +51,3 @@ private _logger: Logger;
   ) {
+    this.appId = initData.appId;
     this.debug = debug;
@@ -67,3 +69,3 @@
       addMessageListener(message => {
-        const { type, payload } = message as ToSDKMessage<
+        const { NEAType, payload } = message as ToSDKMessage<
           Exclude<ToSDKMessageKey, "Init">,
@@ -73,4 +75,4 @@ TState,
         >;
-        if (type) {
-          const method = `_handleMsg${type}` as const;
+        if (NEAType) {
+          const method = `_handleMsg${NEAType}` as const;
           if (this[method]) {
@@ -122,3 +124,3 @@ this[method](payload);
   moveCamera(camera: Partial<CameraState>) {
-    this._postMessage({ type: "MoveCamera", payload: camera });
+    this._postMessage({ NEAType: "MoveCamera", payload: camera });
   }
@@ -131,3 +133,3 @@
   sendMessage(payload: TMessage) {
-    this._postMessage({ type: "SendMagixMessage", payload });
+    this._postMessage({ NEAType: "SendMagixMessage", payload });
   }
@@ -171,3 +173,3 @@
     this._page = page;
-    this._postMessage({ type: "SetPage", payload: page });
+    this._postMessage({ NEAType: "SetPage", payload: page });
   }
@@ -198,3 +200,3 @@
         const storeState = {};
-        this._postMessage({ type: "SetStore", payload: { [storeId]: storeState } });
+        this._postMessage({ NEAType: "SetStore", payload: { [storeId]: storeState } });
         this._storeRawData[storeId] = storeState;
@@ -209,3 +211,3 @@ }
         onSetState: state =>
-          this._postMessage<"SetState", S>({ type: "SetState", payload: { storeId, state } }),
+          this._postMessage<"SetState", S>({ NEAType: "SetState", payload: { storeId, state } }),
       }) as Store<S>;
@@ -238,3 +240,3 @@
     if (this._storeRawData[id]) {
-      this._postMessage({ type: "SetStore", payload: { [id]: void 0 } });
+      this._postMessage({ NEAType: "SetStore", payload: { [id]: void 0 } });
     }
@@ -241,0 +243,0 @@ }

src/index.ts

@@ -73,5 +73,3 @@ /* eslint-disable @typescript-eslint/no-explicit-any */
       }: MessageEvent<ToSDKMessage<ToSDKMessageKey, TState, TMessage>>) => {
-        if (!parent || source !== parent) return;
-        if (!isObj(data)) {
-          console.warn("window message data should be object, instead got", data);
+        if (!parent || source !== parent || !isObj(data) || !data.NEAType) {
           return;
@@ -90,3 +88,3 @@ }
 
-  postMessage({ type: "Init" });
+  postMessage({ NEAType: "Init" });
 
@@ -101,3 +99,3 @@ return new Promise(resolve => {
 
-      if (message.type === "Init") {
+      if (message.NEAType === "Init") {
         disposer();
@@ -104,0 +102,0 @@ const app = new EmbeddedApp<TState, TMessage>(

No alert changes

Improved metrics

Total package byte prevSize

237966

increased by0.19%

Number of lines in readme file

263

increased by2.33%

Worsened metrics

Lines of code

1658

decreased by-0.06%

No dependency changes