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

Comparing version 0.0.5 to 0.0.6

dist/EmbeddedApp.d.ts

@@ -6,3 +6,3 @@ import type { CameraState, DefaultState, Diff, DiffOne, FromSDKMessage, FromSDKMessageKey, InitData, MetaData, RoomMember, ToSDKMessage, ToSDKMessageKey } from "@netless/app-embedded-page";
 import type { MaybeRefValue } from "./utils";
-export declare type PostFromSDKMessage<TState = unknown, TMessage = unknown> = <S = TState, TType extends FromSDKMessageKey = FromSDKMessageKey>(message: FromSDKMessage<TType, {
+export declare type PostFromSDKMessage<TState = unknown, TMessage = unknown> = <TType extends FromSDKMessageKey = FromSDKMessageKey, S = TState>(message: FromSDKMessage<TType, {
     [K in keyof S]: MaybeRefValue<S[K]>;
@@ -12,5 +12,6 @@ }, TMessage>) => void;
 export declare class EmbeddedApp<TState = DefaultState, TMessage = unknown> {
-    private logger;
-    private postMessage;
-    constructor(initData: InitData<TState>, ensureState: TState, postMessage: PostFromSDKMessage<TState, TMessage>, addMessageListener: AddToSDKMessageListener<TState, TMessage>, logger: Logger);
+    readonly debug: boolean;
+    private _logger;
+    private _postMessage;
+    constructor(initData: InitData<TState>, ensureState: TState, debug: boolean, postMessage: PostFromSDKMessage<TState, TMessage>, addMessageListener: AddToSDKMessageListener<TState, TMessage>, logger: Logger);
     /**
@@ -56,3 +57,3 @@ * App meta data
     private _handleMsgStoreChanged;
-    private mainStoreId;
+    private _mainStoreId;
     get state(): TState;
@@ -65,3 +66,3 @@ private _mainStore;
     destroy(): void;
-    private sideEffect;
+    private _sideEffect;
 }

dist/EmbeddedPageEvent.d.ts

@@ -1,8 +0,8 @@
-export declare type Listener<T> = (event: T) => void;
+export declare type EmbeddedPageEventListener<T> = (event: T) => void;
 export declare class EmbeddedPageEvent<TMessage> {
-    listeners: Set<Listener<TMessage>>;
+    listeners: Set<EmbeddedPageEventListener<TMessage>>;
     get length(): number;
     dispatch(message: TMessage): void;
-    addListener(listener: Listener<TMessage>): void;
-    removeListener(listener: Listener<TMessage>): void;
+    addListener(listener: EmbeddedPageEventListener<TMessage>): void;
+    removeListener(listener: EmbeddedPageEventListener<TMessage>): void;
 }

dist/index.d.ts

 import type { DefaultState } from "@netless/app-embedded-page";
 import type { LoggerDebugLevel } from "@netless/app-shared";
+import type { PostFromSDKMessage, AddToSDKMessageListener } from "./EmbeddedApp";
 import { EmbeddedApp } from "./EmbeddedApp";
-export interface EmbeddedAppConfig<TState> {
+export * from "./EmbeddedApp";
+export * from "./EmbeddedPageEvent";
+export declare type EmbeddedAppConfigBase<TState = unknown, TMessage = unknown> = {
+    debug?: LoggerDebugLevel;
+    postMessage?: PostFromSDKMessage<TState, TMessage>;
+    addMessageListener?: AddToSDKMessageListener<TState, TMessage>;
+};
+export declare type EmbeddedAppConfigWithState<TState = unknown, TMessage = unknown> = {
     ensureState: TState;
-    debug?: LoggerDebugLevel;
-}
+} & EmbeddedAppConfigBase<TState, TMessage>;
+export declare type EmbeddedAppConfig<TState = unknown, TMessage = unknown> = {
+    ensureState?: TState;
+} & EmbeddedAppConfigBase<TState, TMessage>;
 /**
@@ -17,3 +27,3 @@ * @example
 export declare function createEmbeddedApp<TState = DefaultState, TMessage = unknown>(): Promise<EmbeddedApp<TState | Record<string, unknown>, TMessage>>;
-export declare function createEmbeddedApp<TState = DefaultState, TMessage = unknown>(config: EmbeddedAppConfig<TState>): Promise<EmbeddedApp<TState, TMessage>>;
-export declare function createEmbeddedApp<TState = DefaultState, TMessage = unknown>(config: Partial<EmbeddedAppConfig<TState>>): Promise<EmbeddedApp<TState | Record<string, unknown>, TMessage>>;
+export declare function createEmbeddedApp<TState = DefaultState, TMessage = unknown>(config: EmbeddedAppConfigWithState<TState, TMessage>): Promise<EmbeddedApp<TState, TMessage>>;
+export declare function createEmbeddedApp<TState = DefaultState, TMessage = unknown>(config: EmbeddedAppConfigBase<TState, TMessage>): Promise<EmbeddedApp<TState | Record<string, unknown>, TMessage>>;

dist/main.cjs.js

@@ -1,2 +0,2 @@
-"use strict";var H=Object.defineProperty;var K=(u,e,r)=>e in u?H(u,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):u[e]=r;var I=(u,e,r)=>(K(u,typeof e!="symbol"?e+"":e,r),r);Object.defineProperty(exports,"__esModule",{value:!0});exports[Symbol.toStringTag]="Module";class X{constructor(){this.disposers=new Map,this.disposerIDGenCount=-1}add(e,r=this.genDisposerID()){return this.flush(r),this.disposers.set(r,e()),r}addEventListener(e,r,n,o,l=this.genDisposerID()){return this.add(()=>(e.addEventListener(r,n,o),()=>e.removeEventListener(r,n,o)),l),l}setTimeout(e,r,n=this.genDisposerID()){return this.add(()=>{const o=window.setTimeout(()=>{this.remove(n),e()},r);return()=>window.clearTimeout(o)},n)}setInterval(e,r,n=this.genDisposerID()){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()}genDisposerID(){const{MAX_SAFE_INTEGER:e=9007199254740991}=Number;return this.disposerIDGenCount=(this.disposerIDGenCount+1)%e,`disposer-${this.disposerIDGenCount}`}}var q=typeof globalThis!="undefined"?globalThis:typeof window!="undefined"?window:typeof global!="undefined"?global:typeof self!="undefined"?self:{},P={exports:{}};(function(u,e){(function(r,n){{var o=n();u&&u.exports&&(e=u.exports=o),e.randomColor=o}})(q,function(){var r=null,n={};F();var o=[],l=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=j(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=[],c=0;c<t.count;c++)o.push(!1);for(t.count=null;h>g.length;){var w=l(t);r!==null&&(t.seed=r),g.push(w)}return t.count=h,g}return a=d(t),s=f(a,t),i=_(a,s,t),b([a,s,i],t)};function d(t){if(o.length>0){var a=N(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,c=(a[0]+(h+1)*i)%359;return a=[g,c],s=R(a),s<0&&(s=360+s),s}else{var a=W(t.hue);return s=R(a),s<0&&(s=360+s),s}}function f(t,a){if(a.hue==="monochrome")return 0;if(a.luminosity==="random")return R([0,100]);var s=G(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=x(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 V(t);case"hsl":var s=V(t);return"hsl("+s[0]+", "+s[1]+"%, "+s[2]+"%)";case"hsla":var i=V(t),h=a.alpha||Math.random();return"hsla("+i[0]+", "+i[1]+"%, "+i[2]+"%, "+h+")";case"rgbArray":return A(t);case"rgb":var g=A(t);return"rgb("+g.join(", ")+")";case"rgba":var c=A(t),h=a.alpha||Math.random();return"rgba("+c.join(", ")+", "+h+")";default:return O(t)}}function x(t,a){for(var s=y(t).lowerBounds,i=0;i<s.length-1;i++){var h=s[i][0],g=s[i][1],c=s[i+1][0],w=s[i+1][1];if(a>=h&&a<=c){var C=(w-g)/(c-h),p=g-C*h;return C*a+p}}return 0}function W(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 G(t){return y(t).saturationRange}function y(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 O(t){var a=A(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 v(t,a,s){var i=s[0][0],h=s[s.length-1][0],g=s[s.length-1][1],c=s[0][1];n[t]={hueRange:a,lowerBounds:s,saturationRange:[i,h],brightnessRange:[g,c]}}function F(){v("monochrome",null,[[0,0],[100,0]]),v("red",[-26,18],[[20,100],[30,92],[40,89],[50,85],[60,78],[70,70],[80,60],[90,55],[100,50]]),v("orange",[18,46],[[20,100],[30,93],[40,88],[50,86],[60,85],[70,70],[100,70]]),v("yellow",[46,62],[[25,100],[40,94],[50,89],[60,86],[70,84],[80,82],[90,80],[100,75]]),v("green",[62,178],[[30,100],[40,90],[50,85],[60,81],[70,74],[80,64],[90,50],[100,40]]),v("blue",[178,257],[[20,100],[30,86],[40,80],[50,74],[60,60],[70,52],[80,44],[90,39],[100,35]]),v("purple",[257,282],[[20,100],[30,87],[40,79],[50,70],[60,65],[70,59],[80,52],[90,45],[100,42]]),v("pink",[282,334],[[20,100],[30,90],[40,86],[60,84],[80,80],[90,75],[100,73]])}function A(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,c=i*(1-s),w=i*(1-g*s),C=i*(1-(1-g)*s),p=256,M=256,S=256;switch(h){case 0:p=i,M=C,S=c;break;case 1:p=w,M=i,S=c;break;case 2:p=c,M=i,S=C;break;case 3:p=c,M=w,S=i;break;case 4:p=C,M=c,S=i;break;case 5:p=i,M=c,S=w;break}var B=[Math.floor(p*255),Math.floor(M*255),Math.floor(S*255)];return B}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),c=h?g/h:0;switch(h){case a:return[60*((s-i)/g%6)||0,c,h];case s:return[60*((i-a)/g+2)||0,c,h];case i:return[60*((a-s)/g+4)||0,c,h]}}function V(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 j(t){for(var a=0,s=0;s!==t.length&&!(a>=Number.MAX_SAFE_INTEGER);s++)a+=t.charCodeAt(s);return a}function N(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 y(i).hueRange}}}else{var a=parseInt(t);if(a<360&&a>0)return y(t).hueRange}return[0,360]}return l})})(P,P.exports);var z=P.exports;class J{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 k=(u,e)=>Object.prototype.hasOwnProperty.call(u,e),T=Object.keys;function m(u){return typeof u=="object"&&u!==null}const Q=m;function L(u){return Boolean(m(u)&&u.__isRef)}function U(u){return{k:Y(),v:u,__isRef:!0}}function Y(){return Date.now().toString().slice(6)+Math.random().toString().slice(2,8)}class Z{constructor({id:e,state:r,onSetState:n,getIsWritable:o,logger:l=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=l,this._state={},r&&T(r).forEach(d=>{const f=r[d];if(L(f)){const{k:_,v:b}=f;this._state[d]=b,m(b)&&this._kMap.set(b,_)}else this._state[d]=f})}get state(){return this._state}ensureState(e){return this.setState(T(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=T(e);if(r.length>0){const n={};r.forEach(o=>{const l=e[o];if(l===void 0)this._lastValue.set(o,this._state[o]),delete this._state[o],n[o]=l;else if(l!==this._state[o])if(this._lastValue.set(o,this._state[o]),this._state[o]=l,m(l)){const d=U(l);this._kMap.set(d.v,d.k),n[o]=d}else n[o]=l}),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:l})=>{switch(l){case 2:{k(this._state,n)&&(this._lastValue.set(n,this._state[n]),delete this._state[n]),r[n]={oldValue:this._lastValue.get(n)};break}default:{let d=o;if(L(o)){const{k:f,v:_}=o,b=this._state[n];m(b)&&this._kMap.get(b)===f?d=b:(d=_,m(_)&&this._kMap.set(_,f))}d!==this._state[n]&&(this._lastValue.set(n,this._state[n]),this._state[n]=d),r[n]={newValue:d,oldValue:this._lastValue.get(n)};break}}}),this.onStateChanged.dispatch(r)}}}class ee{constructor(e,r,n,o,l){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.postMessage=n,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=l,this.sideEffect.add(()=>o(d=>{const{type:f,payload:_}=d;if(f){const b=`_handleMsg${f}`;this[b]&&this[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){Q(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({type:"SetStore",payload:{[e]:o}}),this._storeRawData[e]=o}n=new Z({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:l})=>{switch(l){case 2:{delete this._storeRawData[n];const d=this._stores.get(n);d&&(this._stores.delete(n),d._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:l,value:d,kind:f})=>{switch(f){case 2:{const _=this._storeRawData[r];m(_)&&delete _[l];break}default:{const _=this._storeRawData[r];m(_)&&(_[l]=d);break}}});const o=this._stores.get(r);o&&o._updateProperties(n)}}destroy(){this.sideEffect.flushAll()}}let D;function te(u={}){if(!parent)throw new Error("[EmbeddedPageSDK]: SDK is not running in a iframe.");if(D)return Promise.resolve(D);const e=new J("EmbeddedPageSDK",u.debug),r=o=>{e.log("Message to parent",o),parent.postMessage(o,"*")},n=(o,l)=>{const d=({data:f,source:_})=>{if(!(!parent||_!==parent)){if(!m(f)){console.warn("window message data should be object, instead got",f);return}e.log("Message from parent",f),o(f)}};return window.addEventListener("message",d,l),()=>{window.removeEventListener("message",d,l)}};return r({type:"Init"}),new Promise(o=>{const l=n(d=>{if(D){l(),o(D);return}if(d.type==="Init"){l();const f=new ee(d.payload,u.ensureState||{},r,n,e);D=f,o(f)}})})}exports.createEmbeddedApp=te;
+"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;
 //# sourceMappingURL=main.cjs.js.map

dist/main.es.js

@@ -7,52 +7,56 @@ var __defProp = Object.defineProperty;
 };
-class s {
+const e = "!#%()*+,-./:;=?@[]^_`{|}~ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789", s = e.length, t = Array(20), r = () => {
+  for (let r2 = 0; r2 < 20; r2++)
+    t[r2] = e.charAt(Math.random() * s);
+  return t.join("");
+};
+class o {
   constructor() {
-    this.disposers = new Map(), this.disposerIDGenCount = -1;
+    this.disposers = new Map();
   }
-  add(s2, e = this.genDisposerID()) {
-    return this.flush(e), this.disposers.set(e, s2()), e;
+  add(e2, s2 = r()) {
+    return this.flush(s2), this.disposers.set(s2, e2()), s2;
   }
-  addEventListener(s2, e, t, r, i = this.genDisposerID()) {
-    return this.add(() => (s2.addEventListener(e, t, r), () => s2.removeEventListener(e, t, r)), i), i;
+  addDisposer(e2, s2 = r()) {
+    return this.flush(s2), this.disposers.set(s2, e2), s2;
   }
-  setTimeout(s2, e, t = this.genDisposerID()) {
+  addEventListener(e2, s2, t2, o2, i = r()) {
+    return this.add(() => (e2.addEventListener(s2, t2, o2), () => e2.removeEventListener(s2, t2, o2)), i), i;
+  }
+  setTimeout(e2, s2, t2 = r()) {
     return this.add(() => {
-      const r = window.setTimeout(() => {
-        this.remove(t), s2();
-      }, e);
-      return () => window.clearTimeout(r);
-    }, t);
+      const r2 = window.setTimeout(() => {
+        this.remove(t2), e2();
+      }, s2);
+      return () => window.clearTimeout(r2);
+    }, t2);
   }
-  setInterval(s2, e, t = this.genDisposerID()) {
+  setInterval(e2, s2, t2 = r()) {
     return this.add(() => {
-      const t2 = window.setInterval(s2, e);
-      return () => window.clearInterval(t2);
-    }, t);
+      const t3 = window.setInterval(e2, s2);
+      return () => window.clearInterval(t3);
+    }, t2);
   }
-  remove(s2) {
-    const e = this.disposers.get(s2);
-    return this.disposers.delete(s2), e;
+  remove(e2) {
+    const s2 = this.disposers.get(e2);
+    return this.disposers.delete(e2), s2;
   }
-  flush(s2) {
-    const e = this.remove(s2);
-    if (e)
+  flush(e2) {
+    const s2 = this.remove(e2);
+    if (s2)
       try {
-        e();
-      } catch (t) {
-        console.error(t);
+        s2();
+      } catch (t2) {
+        console.error(t2);
       }
   }
   flushAll() {
-    this.disposers.forEach((s2) => {
+    this.disposers.forEach((e2) => {
       try {
-        s2();
-      } catch (e) {
-        console.error(e);
+        e2();
+      } catch (s2) {
+        console.error(s2);
       }
     }), this.disposers.clear();
   }
-  genDisposerID() {
-    const { MAX_SAFE_INTEGER: s2 = 9007199254740991 } = Number;
-    return this.disposerIDGenCount = (this.disposerIDGenCount + 1) % s2, `disposer-${this.disposerIDGenCount}`;
-  }
 }
@@ -249,6 +253,6 @@ var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
         var golden_ratio = 0.618033988749895;
-        var r = Math.random();
-        r += golden_ratio;
-        r %= 1;
-        return Math.floor(range[0] + r * (range[1] + 1 - range[0]));
+        var r2 = Math.random();
+        r2 += golden_ratio;
+        r2 %= 1;
+        return Math.floor(range[0] + r2 * (range[1] + 1 - range[0]));
       } else {
@@ -300,11 +304,11 @@ var max = range[1] || 1;
       var s2 = hsv[1] / 100, v = hsv[2] / 100;
-      var h_i = Math.floor(h * 6), f = h * 6 - h_i, p = v * (1 - s2), q = v * (1 - f * s2), t = v * (1 - (1 - f) * s2), r = 256, g = 256, b = 256;
+      var h_i = Math.floor(h * 6), f = h * 6 - h_i, p = v * (1 - s2), q = v * (1 - f * s2), t2 = v * (1 - (1 - f) * s2), r2 = 256, g = 256, b = 256;
       switch (h_i) {
         case 0:
-          r = v;
-          g = t;
+          r2 = v;
+          g = t2;
           b = p;
           break;
         case 1:
-          r = q;
+          r2 = q;
           g = v;
@@ -314,8 +318,8 @@ b = p;
         case 2:
-          r = p;
+          r2 = p;
           g = v;
-          b = t;
+          b = t2;
           break;
         case 3:
-          r = p;
+          r2 = p;
           g = q;
@@ -325,3 +329,3 @@ b = v;
         case 4:
-          r = t;
+          r2 = t2;
           g = p;
@@ -331,3 +335,3 @@ b = v;
         case 5:
-          r = v;
+          r2 = v;
           g = p;
@@ -337,3 +341,3 @@ b = q;
       }
-      var result = [Math.floor(r * 255), Math.floor(g * 255), Math.floor(b * 255)];
+      var result = [Math.floor(r2 * 255), Math.floor(g * 255), Math.floor(b * 255)];
       return result;
@@ -439,10 +443,10 @@ }
 }
-const has = (o, k) => Object.prototype.hasOwnProperty.call(o, k);
+const has = (o2, k) => Object.prototype.hasOwnProperty.call(o2, k);
 const plainObjectKeys = Object.keys;
-function isObj(e) {
-  return typeof e === "object" && e !== null;
+function isObj(e2) {
+  return typeof e2 === "object" && e2 !== null;
 }
 const isDiffOne = isObj;
-function isRef(e) {
-  return Boolean(isObj(e) && e.__isRef);
+function isRef(e2) {
+  return Boolean(isObj(e2) && e2.__isRef);
 }
@@ -543,13 +547,18 @@ function makeRef(v) {
       actions.forEach(({ key, value, kind }) => {
+        let oldValue;
+        if (this._lastValue.has(key)) {
+          oldValue = this._lastValue.get(key);
+          this._lastValue.delete(key);
+        }
         switch (kind) {
           case 2: {
             if (has(this._state, key)) {
-              this._lastValue.set(key, this._state[key]);
+              oldValue = this._state[key];
               delete this._state[key];
             }
-            diffs[key] = { oldValue: this._lastValue.get(key) };
+            diffs[key] = { oldValue };
             break;
           }
           default: {
-            let realValue = value;
+            let newValue = value;
             if (isRef(value)) {
@@ -559,5 +568,5 @@ const { k, v } = value;
               if (isObj(curValue) && this._kMap.get(curValue) === k) {
-                realValue = curValue;
+                newValue = curValue;
               } else {
-                realValue = v;
+                newValue = v;
                 if (isObj(v)) {
@@ -568,7 +577,7 @@ this._kMap.set(v, k);
             }
-            if (realValue !== this._state[key]) {
-              this._lastValue.set(key, this._state[key]);
-              this._state[key] = realValue;
+            if (newValue !== this._state[key]) {
+              oldValue = this._state[key];
+              this._state[key] = newValue;
             }
-            diffs[key] = { newValue: realValue, oldValue: this._lastValue.get(key) };
+            diffs[key] = { newValue, oldValue };
             break;
@@ -583,3 +592,3 @@ }
 class EmbeddedApp {
-  constructor(initData, ensureState, postMessage, addMessageListener, logger) {
+  constructor(initData, ensureState, debug, postMessage, addMessageListener, logger) {
     this.onRoomMembersChanged = new EmbeddedPageEvent();
@@ -590,6 +599,7 @@ this.onMessage = new EmbeddedPageEvent();
     this._stores = new Map();
-    this.sideEffect = new s();
-    this.postMessage = postMessage;
-    this.mainStoreId = initData.mainStoreId;
-    this._storeRawData = initData.store || { [this.mainStoreId]: {} };
+    this._sideEffect = new o();
+    this.debug = debug;
+    this._postMessage = postMessage;
+    this._mainStoreId = initData.mainStoreId;
+    this._storeRawData = initData.store || { [this._mainStoreId]: {} };
     this._writable = initData.writable;
@@ -599,4 +609,4 @@ this._page = initData.page;
     this._roomMembers = initData.roomMembers;
-    this.logger = logger;
-    this.sideEffect.add(() => addMessageListener((message) => {
+    this._logger = logger;
+    this._sideEffect.add(() => addMessageListener((message) => {
       const { type, payload } = message;
@@ -630,6 +640,6 @@ if (type) {
   moveCamera(camera) {
-    this.postMessage({ type: "MoveCamera", payload: camera });
+    this._postMessage({ type: "MoveCamera", payload: camera });
   }
   sendMessage(payload) {
-    this.postMessage({ type: "SendMagixMessage", payload });
+    this._postMessage({ type: "SendMagixMessage", payload });
   }
@@ -655,3 +665,3 @@ _handleMsgReceiveMagixMessage(payload) {
     this._page = page;
-    this.postMessage({ type: "SetPage", payload: page });
+    this._postMessage({ type: "SetPage", payload: page });
   }
@@ -669,3 +679,3 @@ _handleMsgPageChanged(payload) {
         const storeState = {};
-        this.postMessage({ type: "SetStore", payload: { [storeId]: storeState } });
+        this._postMessage({ type: "SetStore", payload: { [storeId]: storeState } });
         this._storeRawData[storeId] = storeState;
@@ -676,5 +686,5 @@ }
         state: this._storeRawData[storeId],
-        logger: this.logger,
+        logger: this._logger,
         getIsWritable: () => this._writable,
-        onSetState: (state) => this.postMessage({ type: "SetState", payload: { storeId, state } })
+        onSetState: (state) => this._postMessage({ type: "SetState", payload: { storeId, state } })
       });
@@ -692,4 +702,4 @@ this._stores.set(storeId, store);
   removeStore(id) {
-    if (id === this.mainStoreId) {
-      this.logger.error(`Store "${id}" is not removable.`);
+    if (id === this._mainStoreId) {
+      this._logger.error(`Store "${id}" is not removable.`);
       return;
@@ -703,3 +713,3 @@ }
     if (this._storeRawData[id]) {
-      this.postMessage({ type: "SetStore", payload: { [id]: void 0 } });
+      this._postMessage({ type: "SetStore", payload: { [id]: void 0 } });
     }
@@ -766,3 +776,3 @@ }
   destroy() {
-    this.sideEffect.flushAll();
+    this._sideEffect.flushAll();
   }
@@ -779,7 +789,7 @@ }
   const logger = new Logger("EmbeddedPageSDK", config.debug);
-  const postMessage = (message) => {
+  const postMessage = config.postMessage || ((message) => {
     logger.log("Message to parent", message);
     parent.postMessage(message, "*");
-  };
-  const addMessageListener = (listener, options) => {
+  });
+  const addMessageListener = config.addMessageListener || ((listener, options) => {
     const handler = ({
@@ -802,3 +812,3 @@ data,
     };
-  };
+  });
   postMessage({ type: "Init" });
@@ -814,3 +824,3 @@ return new Promise((resolve) => {
         disposer();
-        const app = new EmbeddedApp(message.payload, config.ensureState || {}, postMessage, addMessageListener, logger);
+        const app = new EmbeddedApp(message.payload, config.ensureState || {}, Boolean(has(config, "debug") ? config.debug : message.payload || false), postMessage, addMessageListener, logger);
         singleApp = app;
@@ -822,3 +832,3 @@ resolve(app);
 }
-export { createEmbeddedApp };
+export { EmbeddedApp, EmbeddedPageEvent, createEmbeddedApp };
 //# sourceMappingURL=main.es.js.map

dist/main.iife.js

@@ -1,2 +0,2 @@
-(()=>{var te=Object.defineProperty;var re=(m,v,S)=>v in m?te(m,v,{enumerable:!0,configurable:!0,writable:!0,value:S}):m[v]=S;var k=(m,v,S)=>(re(m,typeof v!="symbol"?v+"":v,S),S);var ae=function(m){"use strict";class v{constructor(){this.disposers=new Map,this.disposerIDGenCount=-1}add(e,s=this.genDisposerID()){return this.flush(s),this.disposers.set(s,e()),s}addEventListener(e,s,n,o,l=this.genDisposerID()){return this.add(()=>(e.addEventListener(s,n,o),()=>e.removeEventListener(s,n,o)),l),l}setTimeout(e,s,n=this.genDisposerID()){return this.add(()=>{const o=window.setTimeout(()=>{this.remove(n),e()},s);return()=>window.clearTimeout(o)},n)}setInterval(e,s,n=this.genDisposerID()){return this.add(()=>{const o=window.setInterval(e,s);return()=>window.clearInterval(o)},n)}remove(e){const s=this.disposers.get(e);return this.disposers.delete(e),s}flush(e){const s=this.remove(e);if(s)try{s()}catch(n){console.error(n)}}flushAll(){this.disposers.forEach(e=>{try{e()}catch(s){console.error(s)}}),this.disposers.clear()}genDisposerID(){const{MAX_SAFE_INTEGER:e=9007199254740991}=Number;return this.disposerIDGenCount=(this.disposerIDGenCount+1)%e,`disposer-${this.disposerIDGenCount}`}}var S=typeof globalThis!="undefined"?globalThis:typeof window!="undefined"?window:typeof global!="undefined"?global:typeof self!="undefined"?self:{},T={exports:{}};(function(c,e){(function(s,n){{var o=n();c&&c.exports&&(e=c.exports=o),e.randomColor=o}})(S,function(){var s=null,n={};U();var o=[],l=function(t){if(t=t||{},t.seed!==void 0&&t.seed!==null&&t.seed===parseInt(t.seed,10))s=t.seed;else if(typeof t.seed=="string")s=Y(t.seed);else{if(t.seed!==void 0&&t.seed!==null)throw new TypeError("The seed value must be an integer or string");s=null}var a,r,i;if(t.count!==null&&t.count!==void 0){for(var h=t.count,u=[],g=0;g<t.count;g++)o.push(!1);for(t.count=null;h>u.length;){var R=l(t);s!==null&&(t.seed=s),u.push(R)}return t.count=h,u}return a=d(t),r=f(a,t),i=_(a,r,t),b([a,r,i],t)};function d(t){if(o.length>0){var a=Z(t.hue),r=A(a),i=(a[1]-a[0])/o.length,h=parseInt((r-a[0])/i);o[h]===!0?h=(h+2)%o.length:o[h]=!0;var u=(a[0]+h*i)%359,g=(a[0]+(h+1)*i)%359;return a=[u,g],r=A(a),r<0&&(r=360+r),r}else{var a=z(t.hue);return r=A(a),r<0&&(r=360+r),r}}function f(t,a){if(a.hue==="monochrome")return 0;if(a.luminosity==="random")return A([0,100]);var r=J(t),i=r[0],h=r[1];switch(a.luminosity){case"bright":i=55;break;case"dark":i=h-10;break;case"light":h=55;break}return A([i,h])}function _(t,a,r){var i=q(t,a),h=100;switch(r.luminosity){case"dark":h=i+20;break;case"light":i=(h+i)/2;break;case"random":i=0,h=100;break}return A([i,h])}function b(t,a){switch(a.format){case"hsvArray":return t;case"hslArray":return W(t);case"hsl":var r=W(t);return"hsl("+r[0]+", "+r[1]+"%, "+r[2]+"%)";case"hsla":var i=W(t),h=a.alpha||Math.random();return"hsla("+i[0]+", "+i[1]+"%, "+i[2]+"%, "+h+")";case"rgbArray":return P(t);case"rgb":var u=P(t);return"rgb("+u.join(", ")+")";case"rgba":var g=P(t),h=a.alpha||Math.random();return"rgba("+g.join(", ")+", "+h+")";default:return Q(t)}}function q(t,a){for(var r=V(t).lowerBounds,i=0;i<r.length-1;i++){var h=r[i][0],u=r[i][1],g=r[i+1][0],R=r[i+1][1];if(a>=h&&a<=g){var y=(R-u)/(g-h),w=u-y*h;return y*a+w}}return 0}function z(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 r=n[t];if(r.hueRange)return r.hueRange}else if(t.match(/^#?([0-9A-F]{3}|[0-9A-F]{6})$/i)){var i=O(t)[0];return[i,i]}}return[0,360]}function J(t){return V(t).saturationRange}function V(t){t>=334&&t<=360&&(t-=360);for(var a in n){var r=n[a];if(r.hueRange&&t>=r.hueRange[0]&&t<=r.hueRange[1])return n[a]}return"Color not found"}function A(t){if(s===null){var a=.618033988749895,r=Math.random();return r+=a,r%=1,Math.floor(t[0]+r*(t[1]+1-t[0]))}else{var i=t[1]||1,h=t[0]||0;s=(s*9301+49297)%233280;var u=s/233280;return Math.floor(h+u*(i-h))}}function Q(t){var a=P(t);function r(h){var u=h.toString(16);return u.length==1?"0"+u:u}var i="#"+r(a[0])+r(a[1])+r(a[2]);return i}function M(t,a,r){var i=r[0][0],h=r[r.length-1][0],u=r[r.length-1][1],g=r[0][1];n[t]={hueRange:a,lowerBounds:r,saturationRange:[i,h],brightnessRange:[u,g]}}function U(){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 P(t){var a=t[0];a===0&&(a=1),a===360&&(a=359),a=a/360;var r=t[1]/100,i=t[2]/100,h=Math.floor(a*6),u=a*6-h,g=i*(1-r),R=i*(1-u*r),y=i*(1-(1-u)*r),w=256,E=256,C=256;switch(h){case 0:w=i,E=y,C=g;break;case 1:w=R,E=i,C=g;break;case 2:w=g,E=i,C=y;break;case 3:w=g,E=R,C=i;break;case 4:w=y,E=g,C=i;break;case 5:w=i,E=g,C=R;break}var ee=[Math.floor(w*255),Math.floor(E*255),Math.floor(C*255)];return ee}function O(t){t=t.replace(/^#/,""),t=t.length===3?t.replace(/(.)/g,"$1$1"):t;var a=parseInt(t.substr(0,2),16)/255,r=parseInt(t.substr(2,2),16)/255,i=parseInt(t.substr(4,2),16)/255,h=Math.max(a,r,i),u=h-Math.min(a,r,i),g=h?u/h:0;switch(h){case a:return[60*((r-i)/u%6)||0,g,h];case r:return[60*((i-a)/u+2)||0,g,h];case i:return[60*((a-r)/u+4)||0,g,h]}}function W(t){var a=t[0],r=t[1]/100,i=t[2]/100,h=(2-r)*i;return[a,Math.round(r*i/(h<1?h:2-h)*1e4)/100,h/2*100]}function Y(t){for(var a=0,r=0;r!==t.length&&!(a>=Number.MAX_SAFE_INTEGER);r++)a+=t.charCodeAt(r);return a}function Z(t){if(isNaN(t)){if(typeof t=="string"){if(n[t]){var r=n[t];if(r.hueRange)return r.hueRange}else if(t.match(/^#?([0-9A-F]{3}|[0-9A-F]{6})$/i)){var i=O(t)[0];return V(i).hueRange}}}else{var a=parseInt(t);if(a<360&&a>0)return V(t).hueRange}return[0,360]}return l})})(T,T.exports);var F=T.exports;class N{constructor(e="NetlessApp",s="error"){k(this,"kind");k(this,"debug");k(this,"color",F({luminosity:"dark"}));this.kind=e,this.debug=s}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,s){console[e](`%c[${this.kind}]:`,`color: ${this.color}; font-weight: bold;`,...s)}}class D{constructor(){this.listeners=new Set}get length(){return this.listeners.size}dispatch(e){this.listeners.forEach(s=>s(e))}addListener(e){this.listeners.add(e)}removeListener(e){this.listeners.delete(e)}}const $=(c,e)=>Object.prototype.hasOwnProperty.call(c,e),L=Object.keys;function p(c){return typeof c=="object"&&c!==null}const j=p;function G(c){return Boolean(p(c)&&c.__isRef)}function x(c){return{k:B(),v:c,__isRef:!0}}function B(){return Date.now().toString().slice(6)+Math.random().toString().slice(2,8)}class H{constructor({id:e,state:s,onSetState:n,getIsWritable:o,logger:l=console}){this.onStateChanged=new D,this._destroyed=!1,this.onDestroyed=new D,this._kMap=new WeakMap,this._lastValue=new Map,this.id=e,this._onSetState=n,this.getIsWritable=o,this._logger=l,this._state={},s&&L(s).forEach(d=>{const f=s[d];if(G(f)){const{k:_,v:b}=f;this._state[d]=b,p(b)&&this._kMap.set(b,_)}else this._state[d]=f})}get state(){return this._state}ensureState(e){return this.setState(L(e).reduce((s,n)=>($(this._state,n)||(s[n]=e[n]),s),{}))}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 s=L(e);if(s.length>0){const n={};s.forEach(o=>{const l=e[o];if(l===void 0)this._lastValue.set(o,this._state[o]),delete this._state[o],n[o]=l;else if(l!==this._state[o])if(this._lastValue.set(o,this._state[o]),this._state[o]=l,p(l)){const d=x(l);this._kMap.set(d.v,d.k),n[o]=d}else n[o]=l}),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 s={};e.forEach(({key:n,value:o,kind:l})=>{switch(l){case 2:{$(this._state,n)&&(this._lastValue.set(n,this._state[n]),delete this._state[n]),s[n]={oldValue:this._lastValue.get(n)};break}default:{let d=o;if(G(o)){const{k:f,v:_}=o,b=this._state[n];p(b)&&this._kMap.get(b)===f?d=b:(d=_,p(_)&&this._kMap.set(_,f))}d!==this._state[n]&&(this._lastValue.set(n,this._state[n]),this._state[n]=d),s[n]={newValue:d,oldValue:this._lastValue.get(n)};break}}}),this.onStateChanged.dispatch(s)}}}class K{constructor(e,s,n,o,l){this.onRoomMembersChanged=new D,this.onMessage=new D,this.onWritableChanged=new D,this.onPageChanged=new D,this._stores=new Map,this.sideEffect=new v,this.postMessage=n,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=l,this.sideEffect.add(()=>o(d=>{const{type:f,payload:_}=d;if(f){const b=`_handleMsg${f}`;this[b]&&this[b](_)}})),this._mainStore=this.connectStore(e.mainStoreId,s),this.onStateChanged=this._mainStore.onStateChanged}get meta(){return this._meta}get roomMembers(){return this._roomMembers}_handleMsgRoomMembersChanged(e){if(e==null||Array.isArray(e)){const s=this._roomMembers;this._roomMembers=e,this.onRoomMembersChanged.dispatch({newValue:this._roomMembers,oldValue:s})}}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 s=Boolean(e),n=this._writable;s!==n&&(this._writable=s,this.onWritableChanged.dispatch({oldValue:n,newValue:s}))}get page(){return this._page}setPage(e){this._page=e,this.postMessage({type:"SetPage",payload:e})}_handleMsgPageChanged(e){j(e)&&(this._page=e.newValue,this.onPageChanged.dispatch(e))}connectStore(e,s){let n=this._stores.get(e);if(!n){if(!$(this._storeRawData,e)){const o={};this.postMessage({type:"SetStore",payload:{[e]:o}}),this._storeRawData[e]=o}n=new H({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 s&&n.ensureState(s),n}isStoreConnected(e){return this._stores.has(e)}removeStore(e){if(e===this.mainStoreId){this.logger.error(`Store "${e}" is not removable.`);return}const s=this._stores.get(e);s&&(this._stores.delete(e),s._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:l})=>{switch(l){case 2:{delete this._storeRawData[n];const d=this._stores.get(n);d&&(this._stores.delete(n),d._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:s,actions:n}=e;n.forEach(({key:l,value:d,kind:f})=>{switch(f){case 2:{const _=this._storeRawData[s];p(_)&&delete _[l];break}default:{const _=this._storeRawData[s];p(_)&&(_[l]=d);break}}});const o=this._stores.get(s);o&&o._updateProperties(n)}}destroy(){this.sideEffect.flushAll()}}let I;function X(c={}){if(!parent)throw new Error("[EmbeddedPageSDK]: SDK is not running in a iframe.");if(I)return Promise.resolve(I);const e=new N("EmbeddedPageSDK",c.debug),s=o=>{e.log("Message to parent",o),parent.postMessage(o,"*")},n=(o,l)=>{const d=({data:f,source:_})=>{if(!(!parent||_!==parent)){if(!p(f)){console.warn("window message data should be object, instead got",f);return}e.log("Message from parent",f),o(f)}};return window.addEventListener("message",d,l),()=>{window.removeEventListener("message",d,l)}};return s({type:"Init"}),new Promise(o=>{const l=n(d=>{if(I){l(),o(I);return}if(d.type==="Init"){l();const f=new K(d.payload,c.ensureState||{},s,n,e);I=f,o(f)}})})}return m.createEmbeddedApp=X,Object.defineProperty(m,"__esModule",{value:!0}),m[Symbol.toStringTag]="Module",m}({});})();
+(()=>{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}({});})();
 //# sourceMappingURL=main.iife.js.map

package.json

 {
   "name": "@netless/app-embedded-page-sdk",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "main": "dist/main.cjs.js",
@@ -16,4 +16,4 @@ "module": "dist/main.es.js",
     "@netless/app-shared": "workspace:*",
-    "side-effect-manager": "^0.1.3"
+    "side-effect-manager": "^0.1.5"
   }
 }

README-zh.md

@@ -44,9 +44,21 @@ ## @netless/app-embedded-page-sdk
 
-  类型: `{ roomUUID?: string; userPayload?: unknown }`
+  类型: `{ sessionUID: number; uid: string; roomUUID?: string; userPayload: unknown }`
 
   一些房间元信息，包括
 
+  - `sessionUID`: 当前会话唯一标识，刷新后就会改变
+  - `uid`: 当前用户的唯一标识，由用户 `joinRoom()` 时传入
   - `roomUUID`: 当前房间的 UUID
   - `userPayload`: `joinRoom()` 时传入的同名对象
 
+- **app.roomMembers**
+
+  类型: `ReadonlyArray<{ sessionUID: number; uid: string; userPayload: unknown }>`
+
+  房间内所有用户的信息，包括自己。
+
+  - `sessionUID`: 当前会话唯一标识，刷新后就会改变
+  - `uid`: 当前用户的唯一标识，由用户 `joinRoom()` 时传入
+  - `userPayload`: `joinRoom()` 时传入的同名对象
+
 - **app.ensureState(partialState)**
@@ -170,2 +182,22 @@
 
+- **app.onRoomMembersChanged**
+
+  当房间成员变化时调用。
+
+  类型: `Emitter<{ oldValue?: RoomMember[], newValue?: RoomMember[] }>`
+
+  ```ts
+  interface RoomMember {
+    sessionUID: number;
+    uid: string;
+    userPayload: unknown;
+  }
+  ```
+
+  ```js
+  app.onRoomMembersChanged.addListener(diff => {
+    console.log("房间成员变化", app.roomMembers);
+  });
+  ```
+
 - **app.onMessage**
@@ -221,4 +253,4 @@
 
-### Licence
+### License
 
 MIT @ [netless](https://github.com/netless-io)

README.md

@@ -47,9 +47,21 @@ ## @netless/app-embedded-page-sdk
 
-  Type: `{ roomUUID?: string; userPayload?: unknown }`
+  Type: `{ sessionUID: number; uid: string; roomUUID?: string; userPayload: unknown }`
 
   Room information, including
 
+  - `sessionUID`: a unique number of current session. will change after refreshing.
+  - `uid`: a unique id of current user passed in when calling `joinRoom()`.
   - `roomUUID`: current room's UUID.
   - `userPayload`: the object passed in when calling `joinRoom()`.
 
+- **app.roomMembers**
+
+  Type: `ReadonlyArray<{ sessionUID: number; uid: string; userPayload: unknown }>`
+
+  All members in the room.
+
+  - `sessionUID`: a unique number of current session. will change after refreshing.
+  - `uid`: a unique id of current user passed in when calling `joinRoom()`.
+  - `userPayload`: the object passed in when calling `joinRoom()`.
+
 - **app.ensureState(partialState)**
@@ -173,2 +185,22 @@
 
+- **app.onRoomMembersChanged**
+
+  It fires when room members changes.
+
+  Type: `Emitter<{ oldValue?: RoomMember[], newValue?: RoomMember[] }>`
+
+  ```ts
+  interface RoomMember {
+    sessionUID: number;
+    uid: string;
+    userPayload: unknown;
+  }
+  ```
+
+  ```js
+  app.onRoomMembersChanged.addListener(diff => {
+    console.log("room members changed", app.roomMembers);
+  });
+  ```
+
 - **app.onMessage**
@@ -175,0 +207,0 @@

src/EmbeddedApp.ts

@@ -25,4 +25,4 @@ import type {
 export type PostFromSDKMessage<TState = unknown, TMessage = unknown> = <
-  S = TState,
-  TType extends FromSDKMessageKey = FromSDKMessageKey
+  TType extends FromSDKMessageKey = FromSDKMessageKey,
+  S = TState
 >(
@@ -38,4 +38,5 @@ message: FromSDKMessage<TType, { [K in keyof S]: MaybeRefValue<S[K]> }, TMessage>
 export class EmbeddedApp<TState = DefaultState, TMessage = unknown> {
-  private logger: Logger;
-  private postMessage: PostFromSDKMessage<TState, TMessage>;
+  public readonly debug: boolean;
+  private _logger: Logger;
+  private _postMessage: PostFromSDKMessage<TState, TMessage>;
 
@@ -45,2 +46,3 @@ constructor(
     ensureState: TState,
+    debug: boolean,
     postMessage: PostFromSDKMessage<TState, TMessage>,
@@ -50,7 +52,9 @@ addMessageListener: AddToSDKMessageListener<TState, TMessage>,
   ) {
-    this.postMessage = postMessage;
+    this.debug = debug;
 
-    this.mainStoreId = initData.mainStoreId;
-    this._storeRawData = initData.store || { [this.mainStoreId]: {} };
+    this._postMessage = postMessage;
 
+    this._mainStoreId = initData.mainStoreId;
+    this._storeRawData = initData.store || { [this._mainStoreId]: {} };
+
     this._writable = initData.writable;
@@ -61,5 +65,5 @@ this._page = initData.page;
 
-    this.logger = logger;
+    this._logger = logger;
 
-    this.sideEffect.add(() =>
+    this._sideEffect.add(() =>
       addMessageListener(message => {
@@ -119,3 +123,3 @@ const { type, payload } = message as ToSDKMessage<
   moveCamera(camera: Partial<CameraState>) {
-    this.postMessage({ type: "MoveCamera", payload: camera });
+    this._postMessage({ type: "MoveCamera", payload: camera });
   }
@@ -128,3 +132,3 @@
   sendMessage(payload: TMessage) {
-    this.postMessage({ type: "SendMagixMessage", payload });
+    this._postMessage({ type: "SendMagixMessage", payload });
   }
@@ -168,3 +172,3 @@
     this._page = page;
-    this.postMessage({ type: "SetPage", payload: page });
+    this._postMessage({ type: "SetPage", payload: page });
   }
@@ -195,3 +199,3 @@
         const storeState = {};
-        this.postMessage({ type: "SetStore", payload: { [storeId]: storeState } });
+        this._postMessage({ type: "SetStore", payload: { [storeId]: storeState } });
         this._storeRawData[storeId] = storeState;
@@ -203,5 +207,6 @@ }
         state: this._storeRawData[storeId] as S,
-        logger: this.logger,
+        logger: this._logger,
         getIsWritable: () => this._writable,
-        onSetState: state => this.postMessage<S>({ type: "SetState", payload: { storeId, state } }),
+        onSetState: state =>
+          this._postMessage<"SetState", S>({ type: "SetState", payload: { storeId, state } }),
       }) as Store<S>;
@@ -224,4 +229,4 @@
   removeStore(id: string): void {
-    if (id === this.mainStoreId) {
-      this.logger.error(`Store "${id}" is not removable.`);
+    if (id === this._mainStoreId) {
+      this._logger.error(`Store "${id}" is not removable.`);
       return;
@@ -235,3 +240,3 @@ }
     if (this._storeRawData[id]) {
-      this.postMessage({ type: "SetStore", payload: { [id]: void 0 } });
+      this._postMessage({ type: "SetStore", payload: { [id]: void 0 } });
     }
@@ -265,3 +270,3 @@ }
 
-  private mainStoreId: string;
+  private _mainStoreId: string;
 
@@ -324,6 +329,6 @@ get state() {
   destroy() {
-    this.sideEffect.flushAll();
+    this._sideEffect.flushAll();
   }
 
-  private sideEffect = new SideEffectManager();
+  private _sideEffect = new SideEffectManager();
 }

src/EmbeddedPageEvent.ts

@@ -1,5 +0,5 @@
-export type Listener<T> = (event: T) => void;
+export type EmbeddedPageEventListener<T> = (event: T) => void;
 
 export class EmbeddedPageEvent<TMessage> {
-  listeners = new Set<Listener<TMessage>>();
+  listeners = new Set<EmbeddedPageEventListener<TMessage>>();
 
@@ -14,9 +14,9 @@ get length(): number {
 
-  addListener(listener: Listener<TMessage>): void {
+  addListener(listener: EmbeddedPageEventListener<TMessage>): void {
     this.listeners.add(listener);
   }
 
-  removeListener(listener: Listener<TMessage>): void {
+  removeListener(listener: EmbeddedPageEventListener<TMessage>): void {
     this.listeners.delete(listener);
   }
 }

src/index.ts

 /* eslint-disable @typescript-eslint/no-explicit-any */
-import type {
-  FromSDKMessage,
-  ToSDKMessage,
-  ToSDKMessageKey,
-  DefaultState,
-  FromSDKMessageKey,
-} from "@netless/app-embedded-page";
+import type { ToSDKMessage, ToSDKMessageKey, DefaultState } from "@netless/app-embedded-page";
 import type { LoggerDebugLevel } from "@netless/app-shared";
 import { Logger } from "@netless/app-shared";
 
+import type { PostFromSDKMessage, AddToSDKMessageListener } from "./EmbeddedApp";
 import { EmbeddedApp } from "./EmbeddedApp";
-import type { MaybeRefValue } from "./utils";
-import { isObj } from "./utils";
+import { has, isObj } from "./utils";
 
-export interface EmbeddedAppConfig<TState> {
-  ensureState: TState;
+export * from "./EmbeddedApp";
+export * from "./EmbeddedPageEvent";
+
+export type EmbeddedAppConfigBase<TState = unknown, TMessage = unknown> = {
   debug?: LoggerDebugLevel;
-}
+  postMessage?: PostFromSDKMessage<TState, TMessage>;
+  addMessageListener?: AddToSDKMessageListener<TState, TMessage>;
+};
 
+export type EmbeddedAppConfigWithState<TState = unknown, TMessage = unknown> = {
+  ensureState: TState;
+} & EmbeddedAppConfigBase<TState, TMessage>;
+
+export type EmbeddedAppConfig<TState = unknown, TMessage = unknown> = {
+  ensureState?: TState;
+} & EmbeddedAppConfigBase<TState, TMessage>;
+
 let singleApp: EmbeddedApp<any, any> | undefined;
@@ -35,10 +41,10 @@
 export function createEmbeddedApp<TState = DefaultState, TMessage = unknown>(
-  config: EmbeddedAppConfig<TState>
+  config: EmbeddedAppConfigWithState<TState, TMessage>
 ): Promise<EmbeddedApp<TState, TMessage>>;
 export function createEmbeddedApp<TState = DefaultState, TMessage = unknown>(
-  config: Partial<EmbeddedAppConfig<TState>>
+  config: EmbeddedAppConfigBase<TState, TMessage>
 ): Promise<EmbeddedApp<TState | Record<string, unknown>, TMessage>>;
 export function createEmbeddedApp<TState = DefaultState, TMessage = unknown>(
-  config: Partial<EmbeddedAppConfig<TState>> = {}
-): Promise<EmbeddedApp<TState | Record<string, unknown>, TMessage>> {
+  config: EmbeddedAppConfig<TState, TMessage> = {}
+): Promise<EmbeddedApp<TState, TMessage>> {
   if (!parent) {
@@ -54,32 +60,31 @@ throw new Error("[EmbeddedPageSDK]: SDK is not running in a iframe.");
 
-  const postMessage = <S = TState, TType extends FromSDKMessageKey = FromSDKMessageKey>(
-    message: FromSDKMessage<TType, { [K in keyof S]: MaybeRefValue<S[K]> }, TMessage>
-  ): void => {
-    logger.log("Message to parent", message);
-    parent.postMessage(message, "*");
-  };
+  const postMessage: PostFromSDKMessage<TState, TMessage> =
+    config.postMessage ||
+    (message => {
+      logger.log("Message to parent", message);
+      parent.postMessage(message, "*");
+    });
 
-  const addMessageListener = (
-    listener: (message: ToSDKMessage<ToSDKMessageKey, TState, TMessage>) => any,
-    options?: boolean | AddEventListenerOptions
-  ): (() => void) => {
-    const handler = ({
-      data,
-      source,
-    }: MessageEvent<ToSDKMessage<ToSDKMessageKey, TState, TMessage>>) => {
-      if (!parent || source !== parent) return;
-      if (!isObj(data)) {
-        console.warn("window message data should be object, instead got", data);
-        return;
-      }
-      logger.log("Message from parent", data);
-      listener(data);
-    };
+  const addMessageListener: AddToSDKMessageListener<TState, TMessage> =
+    config.addMessageListener ||
+    ((listener, options) => {
+      const handler = ({
+        data,
+        source,
+      }: MessageEvent<ToSDKMessage<ToSDKMessageKey, TState, TMessage>>) => {
+        if (!parent || source !== parent) return;
+        if (!isObj(data)) {
+          console.warn("window message data should be object, instead got", data);
+          return;
+        }
+        logger.log("Message from parent", data);
+        listener(data);
+      };
 
-    window.addEventListener("message", handler, options);
+      window.addEventListener("message", handler, options);
 
-    return () => {
-      window.removeEventListener("message", handler, options);
-    };
-  };
+      return () => {
+        window.removeEventListener("message", handler, options);
+      };
+    });
 
@@ -98,5 +103,6 @@ postMessage({ type: "Init" });
         disposer();
-        const app = new EmbeddedApp<TState | Record<string, unknown>, TMessage>(
+        const app = new EmbeddedApp<TState, TMessage>(
           message.payload,
-          config.ensureState || {},
+          config.ensureState || ({} as TState),
+          Boolean(has(config, "debug") ? config.debug : message.payload || import.meta.env.DEV),
           postMessage,
@@ -103,0 +109,0 @@ addMessageListener,

src/Store/Store.ts

@@ -146,2 +146,8 @@ import type { Diff } from "@netless/app-embedded-page";
       actions.forEach(({ key, value, kind }) => {
+        let oldValue: TState[Extract<keyof TState, string>] | undefined;
+        if (this._lastValue.has(key)) {
+          oldValue = this._lastValue.get(key);
+          this._lastValue.delete(key);
+        }
+
         switch (kind) {
@@ -151,10 +157,10 @@ case 2: {
             if (has(this._state, key)) {
-              this._lastValue.set(key, this._state[key]);
+              oldValue = this._state[key];
               delete this._state[key];
             }
-            diffs[key] = { oldValue: this._lastValue.get(key) };
+            diffs[key] = { oldValue };
             break;
           }
           default: {
-            let realValue = value;
+            let newValue = value;
 
@@ -165,5 +171,5 @@ if (isRef<TState[Extract<keyof TState, string>]>(value)) {
               if (isObj(curValue) && this._kMap.get(curValue) === k) {
-                realValue = curValue;
+                newValue = curValue;
               } else {
-                realValue = v;
+                newValue = v;
                 if (isObj(v)) {
@@ -175,8 +181,8 @@ this._kMap.set(v, k);
 
-            if (realValue !== this._state[key]) {
-              this._lastValue.set(key, this._state[key]);
-              this._state[key] = realValue;
+            if (newValue !== this._state[key]) {
+              oldValue = this._state[key];
+              this._state[key] = newValue;
             }
 
-            diffs[key] = { newValue: realValue, oldValue: this._lastValue.get(key) };
+            diffs[key] = { newValue, oldValue };
             break;
@@ -183,0 +189,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

237523

increased by3.02%

Lines of code

1659

increased by2.03%

Number of lines in readme file

257

increased by14.22%

No dependency changes