@netless/window-manager 0.4.0-canary.3 → 0.4.0-canary.7

package/src/App/Storage/index.ts

@@ -0,0 +1,243 @@
+import type { AkkoObjectUpdatedProperty } from "white-web-sdk";
+import { get, has, isObject } from "lodash";
+import { SideEffectManager } from "side-effect-manager";
+import type { AppContext } from "../../AppContext";
+import { safeListenPropsUpdated } from "../../Utils/Reactive";
+import { isRef, makeRef, plainObjectKeys } from "./utils";
+import type { Diff, MaybeRefValue, RefValue, StorageStateChangedEvent } from "./typings";
+import { StorageEvent } from "./StorageEvent";
+
+export * from './typings';
+
+const STORAGE_NS = "_WM-STORAGE_";
+
+export class Storage<TState = any> implements Storage<TState> {
+  readonly id: string;
+
+  private readonly _context: AppContext<{ [STORAGE_NS]: TState }>;
+  private readonly _sideEffect = new SideEffectManager();
+  private _state: TState;
+  private _destroyed = false;
+
+  private _refMap = new WeakMap<any, RefValue>();
+
+  /**
+   * `setState` alters local state immediately before sending to server. This will cache the old value for onStateChanged diffing.
+   */
+  private _lastValue = new Map<string | number | symbol, TState[Extract<keyof TState, string>]>();
+
+  constructor(context: AppContext<any>, id: string, defaultState?: TState) {
+    if (id == null) {
+      throw new Error("Cannot create Storage with empty id.");
+    }
+
+    if (defaultState && !isObject(defaultState)) {
+      throw new Error(`Default state for Storage ${id} is not an object.`);
+    }
+
+    this._context = context;
+    this.id = id;
+
+    const attrs = context.getAttributes();
+    this._state = {} as TState;
+    const rawState = get<TState>(attrs, [STORAGE_NS, id], this._state);
+
+    if (this._context.getIsWritable()) {
+      if (!isObject(rawState) || rawState === this._state) {
+        if (!attrs[STORAGE_NS]) {
+          this._context.updateAttributes([STORAGE_NS], {});
+        }
+        this._context.updateAttributes([STORAGE_NS, this.id], this._state);
+        if (defaultState) {
+          this.setState(defaultState);
+        }
+      } else {
+        // strip mobx
+        plainObjectKeys(rawState).forEach(key => {
+          try {
+            const rawValue = isObject(rawState[key]) ? JSON.parse(JSON.stringify(rawState[key])) : rawState[key];
+            if (isRef<TState[Extract<keyof TState, string>]>(rawValue)) {
+              this._state[key] = rawValue.v;
+              if (isObject(rawValue.v)) {
+                this._refMap.set(rawValue.v, rawValue);
+              }
+            } else {
+              this._state[key] = rawValue;
+            }
+          } catch (e) {
+            console.error(e);
+          }
+        });
+      }
+    }
+
+    this._sideEffect.addDisposer(
+      safeListenPropsUpdated(
+        () => get(context.getAttributes(), [STORAGE_NS, this.id]),
+        this._updateProperties.bind(this),
+        this.destroy.bind(this)
+      )
+    );
+  }
+
+  get state(): Readonly<TState> {
+    if (this._destroyed) {
+      console.warn(`Accessing state on destroyed Storage "${this.id}"`)
+    }
+    return this._state;
+  }
+
+  readonly onStateChanged = new StorageEvent<StorageStateChangedEvent<TState>>();
+
+  ensureState(state: Partial<TState>): void {
+    return this.setState(
+      plainObjectKeys(state).reduce((payload, key) => {
+        if (!has(this._state, key)) {
+          payload[key] = state[key];
+        }
+        return payload;
+      }, {} as Partial<TState>)
+    );
+  }
+
+  setState(state: Partial<TState>): void {
+    if (this._destroyed) {
+      console.error(new Error(`Cannot call setState on destroyed Storage "${this.id}".`));
+      return;
+    }
+
+    if (!this._context.getIsWritable()) {
+      console.error(new Error(`Cannot setState on Storage "${this.id}" without writable access`), state);
+      return;
+    }
+
+    const keys = plainObjectKeys(state);
+    if (keys.length > 0) {
+      keys.forEach(key => {
+        const value = state[key];
+        if (value === this._state[key]) {
+          return;
+        }
+
+        if (value === void 0) {
+          this._lastValue.set(key, this._state[key]);
+          delete this._state[key];
+          this._context.updateAttributes([STORAGE_NS, this.id, key], value);
+        } else {
+          this._lastValue.set(key, this._state[key]);
+          this._state[key] = value as TState[Extract<keyof TState, string>];
+
+          let payload: MaybeRefValue<typeof value> = value;
+          if (isObject(value)) {
+            let refValue = this._refMap.get(value);
+            if (!refValue) {
+              refValue = makeRef(value);
+              this._refMap.set(value, refValue);
+            }
+            payload = refValue;
+          }
+
+          this._context.updateAttributes([STORAGE_NS, this.id, key], payload);
+        }
+      });
+    }
+  }
+
+  emptyStore(): void {
+    if (this._destroyed) {
+      console.error(new Error(`Cannot empty destroyed Storage "${this.id}".`));
+      return;
+    }
+
+    if (!this._context.getIsWritable()) {
+      console.error(new Error(`Cannot empty Storage "${this.id}" without writable access.`));
+      return;
+    }
+
+    this._context.updateAttributes([STORAGE_NS, this.id], {});
+  }
+
+  deleteStore(): void {
+    if (!this._context.getIsWritable()) {
+      console.error(new Error(`Cannot delete Storage "${this.id}" without writable access.`));
+      return;
+    }
+
+    this.destroy();
+
+    this._context.updateAttributes([STORAGE_NS, this.id], void 0);
+  }
+
+  get destroyed(): boolean {
+    return this._destroyed;
+  }
+
+  destroy() {
+    this._destroyed = true;
+    this._sideEffect.flushAll();
+  }
+
+  private _updateProperties(actions: ReadonlyArray<AkkoObjectUpdatedProperty<TState, string>>): void {
+    if (this._destroyed) {
+      console.error(new Error(`Cannot call _updateProperties on destroyed Storage "${this.id}".`));
+      return;
+    }
+
+    if (actions.length > 0) {
+      const diffs: Diff<TState> = {};
+
+      for (let i = 0; i < actions.length; i++) {
+        try {
+          const action = actions[i]
+          const key = action.key as Extract<keyof TState, string>;
+          const value = isObject(action.value) ? JSON.parse(JSON.stringify(action.value)) : action.value;
+          let oldValue: TState[Extract<keyof TState, string>] | undefined;
+          if (this._lastValue.has(key)) {
+            oldValue = this._lastValue.get(key);
+            this._lastValue.delete(key);
+          }
+
+          switch (action.kind) {
+            case 2: {
+              // Removed
+              if (has(this._state, key)) {
+                oldValue = this._state[key];
+                delete this._state[key];
+              }
+              diffs[key] = { oldValue };
+              break;
+            }
+            default: {
+              let newValue = value;
+
+              if (isRef<TState[Extract<keyof TState, string>]>(value)) {
+                const { k, v } = value;
+                const curValue = this._state[key];
+                if (isObject(curValue) && this._refMap.get(curValue)?.k === k) {
+                  newValue = curValue;
+                } else {
+                  newValue = v;
+                  if (isObject(v)) {
+                    this._refMap.set(v, value);
+                  }
+                }
+              }
+
+              if (newValue !== this._state[key]) {
+                oldValue = this._state[key];
+                this._state[key] = newValue;
+              }
+
+              diffs[key] = { newValue, oldValue };
+              break;
+            }
+          }
+        } catch (e) {
+          console.error(e)
+        }
+      }
+
+      this.onStateChanged.dispatch(diffs);
+    }
+  }
+}

package/src/App/Storage/typings.ts

@@ -0,0 +1,21 @@
+import type { StorageEventListener } from "./StorageEvent";
+
+export type RefValue<TValue = any> = { k: string; v: TValue; __isRef: true };
+
+export type ExtractRawValue<TValue> = TValue extends RefValue<infer TRefValue> ? TRefValue : TValue;
+
+export type AutoRefValue<TValue> = RefValue<ExtractRawValue<TValue>>;
+
+export type MaybeRefValue<TValue> = TValue | AutoRefValue<TValue>;
+
+export type DiffOne<T> = { oldValue?: T; newValue?: T };
+
+export type Diff<T> = { [K in keyof T]?: DiffOne<T[K]> };
+
+export type StorageOnSetStatePayload<TState = unknown> = {
+  [K in keyof TState]?: MaybeRefValue<TState[K]>;
+};
+
+export type StorageStateChangedEvent<TState = any> = Diff<TState>
+
+export type StorageStateChangedListener<TState = any> = StorageEventListener<StorageStateChangedEvent<TState>>

package/src/App/Storage/utils.ts

@@ -0,0 +1,17 @@
+import { has } from "lodash";
+import { genUID } from "side-effect-manager";
+import type { AutoRefValue, ExtractRawValue, RefValue } from "./typings";
+
+export const plainObjectKeys = Object.keys as <T>(o: T) => Array<Extract<keyof T, string>>;
+
+export function isRef<TValue = unknown>(e: unknown): e is RefValue<TValue> {
+  return Boolean(has(e, '__isRef'));
+}
+
+export function makeRef<TValue>(v: TValue): RefValue<TValue> {
+  return { k: genUID(), v, __isRef: true };
+}
+
+export function makeAutoRef<TValue>(v: TValue): AutoRefValue<TValue> {
+  return isRef<ExtractRawValue<TValue>>(v) ? v : makeRef(v as ExtractRawValue<TValue>);
+}

package/src/AppContext.ts

@@ -15,6 +15,7 @@ import type { BoxManager } from "./BoxManager";
 import type { AppEmitterEvent } from "./index";
 import type { AppManager } from "./AppManager";
 import type { AppProxy } from "./AppProxy";
+import { Storage } from './App/Storage';
 
 export class AppContext<TAttrs extends Record<string, any>, AppOptions = any> {
     public readonly emitter: Emittery<AppEmitterEvent<TAttrs>>;
@@ -103,7 +104,6 @@ export class AppContext<TAttrs extends Record<string, any>, AppOptions = any> {
     public async setScenePath(scenePath: string): Promise<void> {
         if (!this.appProxy.box) return;
         this.appProxy.setFullPath(scenePath);
-        this.appProxy.context.switchAppToWriter(this.appId);
     }
 
     public mountView(dom: HTMLDivElement): void {
@@ -120,4 +120,12 @@ export class AppContext<TAttrs extends Record<string, any>, AppOptions = any> {
     public getAppOptions(): AppOptions | undefined {
         return typeof this.appOptions === 'function' ? (this.appOptions as () => AppOptions)() : this.appOptions
     }
+
+    public createStorage<TState>(storeId: string, defaultState?: TState): Storage<TState> {
+        const storage = new Storage(this, storeId, defaultState);
+        this.emitter.on("destroy", () => {
+            storage.destroy();
+        });
+        return storage;
+    }
 }

package/src/AppListener.ts

@@ -34,10 +34,6 @@ export class AppListeners {
                     this.appResizeHandler(data.payload);
                     break;
                 }
-                case Events.SwitchViewsToFreedom: {
-                    this.switchViewsToFreedomHandler();
-                    break;
-                }
                 case Events.AppBoxStateChange: {
                     this.boxStateChangeHandler(data.payload);
                     break;
@@ -65,10 +61,6 @@ export class AppListeners {
         this.manager.room?.refreshViewSize();
     };
 
-    private switchViewsToFreedomHandler = () => {
-        this.manager.viewManager.freedomAllViews();
-    };
-
     private boxStateChangeHandler = (state: TeleBoxState) => {
         callbacks.emit("boxStateChange", state);
     }

package/src/AppManager.ts

@@ -2,17 +2,15 @@ import pRetry from "p-retry";
 import { AppAttributes, AppStatus, Events, MagixEventName } from "./constants";
 import { AppListeners } from "./AppListener";
 import { AppProxy } from "./AppProxy";
-import { autorun, isPlayer, isRoom, ScenePathType, ViewVisionMode } from "white-web-sdk";
-import { callbacks, emitter, WindowManager } from "./index";
-import { CameraStore } from "./Utils/CameraStore";
-import { genAppId, makeValidScenePath, setScenePath } from "./Utils/Common";
+import { autorun, isPlayer, isRoom, ScenePathType } from "white-web-sdk";
+import { callbacks, emitter, WindowManager, reconnectRefresher } from "./index";
+import { genAppId, makeValidScenePath, setScenePath, setViewFocusScenePath } from "./Utils/Common";
 import { log } from "./Utils/log";
-import { MainViewProxy } from "./MainView";
+import { MainViewProxy } from "./View/MainView";
 import { onObjectRemoved, safeListenPropsUpdated } from "./Utils/Reactive";
-import { reconnectRefresher } from "./ReconnectRefresher";
 import { sortBy } from "lodash";
 import { store } from "./AttributesDelegate";
-import { ViewManager } from "./ViewManager";
+import { ViewManager } from "./View/ViewManager";
 import type { ReconnectRefresher } from "./ReconnectRefresher";
 import type { BoxManager } from "./BoxManager";
 import type { Displayer, DisplayerState, Room } from "white-web-sdk";
@@ -20,7 +18,6 @@ import type { AddAppParams, BaseInsertParams, TeleBoxRect, EmitterEvent } from "
 
 export class AppManager {
     public displayer: Displayer;
-    public cameraStore: CameraStore;
     public viewManager: ViewManager;
     public appProxies: Map<string, AppProxy> = new Map();
     public appStatus: Map<string, AppStatus> = new Map();
@@ -39,9 +36,8 @@ export class AppManager {
             safeSetAttributes: attributes => this.safeSetAttributes(attributes),
             safeUpdateAttributes: (keys, val) => this.safeUpdateAttributes(keys, val),
         });
-        this.cameraStore = new CameraStore();
         this.mainViewProxy = new MainViewProxy(this);
-        this.viewManager = new ViewManager(this);
+        this.viewManager = new ViewManager(this.displayer);
         this.appListeners = new AppListeners(this);
         this.displayer.callbacks.on(this.eventName, this.displayerStateListener);
         this.appListeners.addListeners();
@@ -189,15 +185,18 @@ export class AppManager {
         mainView.disableCameraTransform = disableCameraTransform;
         mainView.divElement = divElement;
         if (!mainView.focusScenePath) {
-            this.store.setMainViewFocusPath(mainView);
+            this.setMainViewFocusPath();
         }
-        if (this.store.focus === undefined && mainView.mode !== ViewVisionMode.Writable) {
-            this.viewManager.switchMainViewToWriter();
-        }
-        this.mainViewProxy.addMainViewListener();
         emitter.emit("mainViewMounted");
     }
 
+    public setMainViewFocusPath() {
+        const scenePath = this.store.getMainViewScenePath();
+        if (scenePath) {
+            setViewFocusScenePath(this.mainView, scenePath);
+        }
+    }
+
     public async addApp(params: AddAppParams, isDynamicPPT: boolean): Promise<string | undefined> {
         log("addApp", params);
         const { appId, needFocus } = await this.beforeAddApp(params, isDynamicPPT);
@@ -283,7 +282,7 @@ export class AppManager {
         emitter.emit("observerIdChange", this.displayer.observerId);
     };
 
-    private displayerWritableListener = (isReadonly: boolean) => {
+    public displayerWritableListener = (isReadonly: boolean) => {
         const isWritable = !isReadonly;
         const isManualWritable =
             this.windowManger.readonly === undefined || this.windowManger.readonly === false;
@@ -296,9 +295,6 @@ export class AppManager {
             appProxy.emitAppIsWritableChange();
         });
         if (isWritable === true) {
-            if (!this.store.focus) {
-                this.mainViewProxy.switchViewModeToWriter();
-            }
             this.mainView.disableCameraTransform = false;
         } else {
             this.mainView.disableCameraTransform = true;
@@ -348,15 +344,16 @@ export class AppManager {
                 await this._setMainViewScenePath(scenePath);
             } else if (scenePathType === ScenePathType.Dir) {
                 const validScenePath = makeValidScenePath(this.displayer, scenePath);
-                await this._setMainViewScenePath(validScenePath);
+                if (validScenePath) {
+                    await this._setMainViewScenePath(validScenePath);
+                }
             }
         }
     }
 
     private async _setMainViewScenePath(scenePath: string) {
         this.safeSetAttributes({ _mainScenePath: scenePath });
-        await this.viewManager.switchMainViewToWriter();
-        setScenePath(this.room, scenePath);
+        this.setMainViewFocusPath();
         this.store.setMainViewFocusPath(this.mainView);
         this.dispatchInternalEvent(Events.SetMainViewScenePath, { nextScenePath: scenePath });
     }
@@ -364,12 +361,20 @@ export class AppManager {
     public async setMainViewSceneIndex(index: number) {
         if (this.room) {
             this.safeSetAttributes({ _mainSceneIndex: index });
-            await this.viewManager.switchMainViewToWriter();
-            this.room.setSceneIndex(index);
-            const nextScenePath = this.room.state.sceneState.scenePath;
-            this.store.setMainViewScenePath(nextScenePath);
-            this.store.setMainViewFocusPath(this.mainView);
-            this.dispatchInternalEvent(Events.SetMainViewScenePath, { nextScenePath });
+            const mainViewScenePath = this.store.getMainViewScenePath() as string;
+            if (mainViewScenePath) {
+                const sceneList = mainViewScenePath.split("/");
+                sceneList.pop();
+                let sceneDir = sceneList.join("/");
+                if (sceneDir === "") {
+                    sceneDir = "/";
+                }
+                const scenePath = makeValidScenePath(this.displayer, sceneDir, index);
+                if (scenePath) {
+                    this.store.setMainViewScenePath(scenePath);
+                    this.setMainViewFocusPath();
+                }
+            }   
         }
     }
 

package/src/AppProxy.ts

@@ -2,16 +2,15 @@ import Emittery from "emittery";
 import { AppAttributes, AppEvents, Events } from "./constants";
 import { AppContext } from "./AppContext";
 import { appRegister } from "./Register";
-import { autorun, ViewVisionMode } from "white-web-sdk";
-import { callbacks, emitter } from "./index";
+import { autorun } from "white-web-sdk";
+import { emitter } from "./index";
 import { Fields } from "./AttributesDelegate";
 import { get } from "lodash";
 import { log } from "./Utils/log";
 import {
-    notifyMainViewModeChange,
     setScenePath,
     setViewFocusScenePath,
-    setViewMode,
+    getScenePath
 } from "./Utils/Common";
 import type {
     AppEmitterEvent,
@@ -37,7 +36,6 @@ export class AppProxy extends Base {
     private boxManager = this.manager.boxManager;
     private appProxies = this.manager.appProxies;
     private viewManager = this.manager.viewManager;
-    private cameraStore = this.manager.cameraStore;
     private kind: string;
     public isAddApp: boolean;
     private status: "normal" | "destroyed" = "normal";
@@ -98,17 +96,25 @@ export class AppProxy extends Base {
 
     public getFullScenePath(): string | undefined {
         if (this.scenePath) {
-            return get(this.appAttributes, [Fields.FullPath], this.scenePath);
+            return get(this.appAttributes, [Fields.FullPath], this.getFullScenePathFromScenes());
         }
     }
 
+    private getFullScenePathFromScenes() {
+        const sceneIndex = get(this.appAttributes, ["state", "SceneIndex"], 0);
+        const fullPath = getScenePath(this.manager.room, this.scenePath, sceneIndex);
+        if (fullPath) {
+            this.setFullPath(fullPath);
+        }
+        return fullPath;
+    }
+
     public setFullPath(path: string) {
         this.manager.safeUpdateAttributes(["apps", this.id, Fields.FullPath], path);
     }
 
     public async baseInsertApp(
         skipUpdate = false,
-        focus?: boolean
     ): Promise<{ appId: string; app: NetlessApp }> {
         const params = this.params;
         if (!params.kind) {
@@ -122,9 +128,6 @@ export class AppProxy extends Base {
             throw new Error(`[WindowManager]: app load failed ${params.kind} ${params.src}`);
         }
         this.context.updateManagerRect();
-        if (focus) {
-            this.focusApp();
-        }
         return {
             appId: this.id,
             app: appImpl,
@@ -133,7 +136,6 @@ export class AppProxy extends Base {
 
     private focusApp() {
         this.focusBox();
-        this.context.switchAppToWriter(this.id);
         this.store.setMainViewFocusPath(this.manager.mainView);
     }
 
@@ -205,9 +207,6 @@ export class AppProxy extends Base {
 
     private afterSetupApp(boxInitState: AppInitState | undefined): void {
         if (boxInitState) {
-            if (boxInitState.focus && this.scenePath) {
-                this.context.switchAppToWriter(this.id);
-            }
             if (!boxInitState?.x || !boxInitState.y) {
                 this.boxManager?.setBoxInitState(this.id);
             }
@@ -226,29 +225,10 @@ export class AppProxy extends Base {
         await this.destroy(true, false, true);
         const params = this.params;
         const appProxy = new AppProxy(params, this.manager, this.id, this.isAddApp);
-        await appProxy.baseInsertApp(true, this.store.focus === this.id);
+        await appProxy.baseInsertApp(true);
         this.boxManager?.updateBoxState(currentAppState);
     }
 
-    public switchToWritable() {
-        appRegister.notifyApp(this.kind, "focus", { appId: this.id });
-        this.cameraStore.switchView(this.id, this.view, () => {
-            if (this.view) {
-                if (this.view.mode === ViewVisionMode.Writable) return;
-                try {
-                    if (this.manager.mainView.mode === ViewVisionMode.Writable) {
-                        this.store.setMainViewFocusPath(this.manager.mainView);
-                        notifyMainViewModeChange(callbacks, ViewVisionMode.Freedom);
-                        setViewMode(this.manager.mainView, ViewVisionMode.Freedom);
-                    }
-                    setViewMode(this.view, ViewVisionMode.Writable);
-                } catch (error) {
-                    log("switch view failed", error);
-                }
-            }
-        });
-    }
-
     public getAppInitState = (id: string) => {
         const attrs = this.store.getAppState(id);
         if (!attrs) return;
@@ -364,7 +344,6 @@ export class AppProxy extends Base {
 
     private async createView(): Promise<View> {
         const view = await this.viewManager.createView(this.id);
-        this.cameraStore.register(this.id, view);
         this.setViewFocusScenePath();
         return view;
     }
@@ -388,7 +367,6 @@ export class AppProxy extends Base {
             this.store.cleanAppAttributes(this.id);
         }
         this.appProxies.delete(this.id);
-        this.cameraStore.unregister(this.id, this.view);
 
         this.viewManager.destroyView(this.id);
         this.manager.appStatus.delete(this.id);

package/src/Base/Context.ts

@@ -33,10 +33,6 @@ export class Context {
     public blurFocusBox() {
         this.manager.boxManager?.blurAllBox();
     }
-
-    public switchAppToWriter(id: string) {
-        this.manager.viewManager.switchAppToWriter(id);
-    }
 }
 
 let context: Context;

package/src/BoxManager.ts

@@ -1,4 +1,4 @@
-import { AppAttributes, DEFAULT_COLLECTOR_STYLE, Events, MIN_HEIGHT, MIN_WIDTH } from "./constants";
+import { AppAttributes, Events, MIN_HEIGHT, MIN_WIDTH } from "./constants";
 import { debounce, maxBy } from "lodash";
 import {
     TELE_BOX_MANAGER_EVENT,
@@ -6,7 +6,7 @@ import {
     TeleBoxCollector,
     TeleBoxManager,
 } from "@netless/telebox-insider";
-import { WindowManager } from "./index";
+import { emitter, WindowManager } from "./index";
 import type { AddAppOptions, AppInitState, EmitterType, CallbacksType } from "./index";
 import type {
     TeleBoxManagerUpdateConfig,
@@ -145,6 +145,11 @@ export class BoxManager {
         this.teleBoxManager.events.on("z_index", box => {
             this.context.updateAppState(box.id, AppAttributes.ZIndex, box.zIndex);
         });
+        emitter.on("playgroundSizeChange", this.playgroundSizeChangeListener);
+    }
+
+    private playgroundSizeChangeListener = () => {
+        this.updateManagerRect();
     }
 
     private get mainView() {
@@ -251,12 +256,8 @@ export class BoxManager {
     }
 
     public setCollectorContainer(container: HTMLElement) {
-        const styles = {
-            ...DEFAULT_COLLECTOR_STYLE,
-            ...this.createTeleBoxManagerConfig?.collectorStyles,
-        };
         const collector = new TeleBoxCollector({
-            styles
+            styles: this.createTeleBoxManagerConfig?.collectorStyles,
         }).mount(container);
         this.teleBoxManager.setCollector(collector);
     }
@@ -391,6 +392,7 @@ export class BoxManager {
     }
 
     public destroy() {
+        emitter.off("playgroundSizeChange", this.playgroundSizeChangeListener);
         this.teleBoxManager.destroy();
     }
 }

package/src/BuiltinApps.ts

@@ -0,0 +1,24 @@
+import AppDocsViewer from "@netless/app-docs-viewer";
+import AppMediaPlayer, { setOptions } from "@netless/app-media-player";
+import { WindowManager } from "./index";
+import "@netless/app-docs-viewer/dist/style.css";
+
+export const setupBuiltin = () => {
+    if (WindowManager.debug) {
+        setOptions({ verbose: true });
+    }
+
+    WindowManager.register({
+        kind: AppDocsViewer.kind,
+        src: AppDocsViewer,
+    });
+    WindowManager.register({
+        kind: AppMediaPlayer.kind,
+        src: AppMediaPlayer,
+    });
+};
+
+export const BuiltinApps = {
+    DocsViewer: AppDocsViewer.kind as string,
+    MediaPlayer: AppMediaPlayer.kind as string,
+};