@netless/window-manager 1.0.0-canary.48 → 1.0.0-canary.50

package/dist/index.cjs.js

@@ -171,18 +171,27 @@ const emitter = new Emittery__default["default"]();
 const DatabaseName = "__WindowManagerAppCache";
 let db;
 let store$1;
-const initDb = async () => {
+const initDb = async (appRegister2) => {
   db = await createDb();
+  const items = await queryAll(db);
+  items.forEach((item) => {
+    appRegister2.downloaded.set(item.kind, item.url);
+  });
 };
-const setItem = (key, val) => {
+const setItem = (kind, url, val) => {
   if (!db)
     return;
-  return addRecord(db, { kind: key, sourceCode: val });
+  return addRecord(db, { kind, url, sourceCode: val });
 };
-const getItem = async (key) => {
+const getItem = async (kind) => {
   if (!db)
     return null;
-  return await query(db, key);
+  return await query(db, kind);
+};
+const removeItem = (key) => {
+  if (!db)
+    return;
+  return deleteRecord(db, key);
 };
 function createDb() {
   return new Promise((resolve, reject) => {
@@ -217,6 +226,14 @@ function query(db2, val) {
     };
   });
 }
+function queryAll(db2) {
+  return new Promise((resolve, reject) => {
+    const index2 = db2.transaction(["apps"]).objectStore("apps").index("kind");
+    const request = index2.getAll();
+    request.onerror = (e) => reject(e);
+    request.onsuccess = () => resolve(request.result);
+  });
+}
 function addRecord(db2, payload) {
   return new Promise((resolve, reject) => {
     const request = db2.transaction(["apps"], "readwrite").objectStore("apps").add(payload);
@@ -224,16 +241,23 @@ function addRecord(db2, payload) {
     request.onerror = () => reject();
   });
 }
+function deleteRecord(db2, key) {
+  return new Promise((resolve, reject) => {
+    const request = db2.transaction(["apps"], "readwrite").objectStore("apps").delete(key);
+    request.onsuccess = () => resolve();
+    request.onerror = () => reject();
+  });
+}
 const Prefix = "NetlessApp";
 const TIMEOUT = 1e4;
-const getScript = async (url) => {
-  const item = await getItem(url);
+const getScript = async (kind, url) => {
+  const item = await getItem(kind);
   if (item) {
     return item.sourceCode;
   } else {
     const result = await fetchWithTimeout(url, { timeout: TIMEOUT });
     const text2 = await result.text();
-    await setItem(url, text2);
+    await setItem(kind, url, text2);
     return text2;
   }
 };
@@ -245,18 +269,25 @@ const executeScript = (text2, appName) => {
   }
   return result;
 };
+const emitSuccess = (kind, url) => {
+  callbacks.emit("loadApp", { kind, status: "success" });
+  appRegister.downloaded.set(kind, url);
+};
+const emitFailed = (kind, reason) => {
+  callbacks.emit("loadApp", { kind, status: "failed", reason });
+};
 const loadApp = async (url, key, name) => {
   const appName = name || Prefix + key;
   callbacks.emit("loadApp", { kind: key, status: "start" });
   try {
-    const text2 = await getScript(url);
+    const text2 = await getScript(key, url);
     if (!text2 || text2.length === 0) {
-      callbacks.emit("loadApp", { kind: key, status: "failed", reason: "script is empty." });
+      emitFailed(key, "script is empty");
       return;
     }
     try {
       const result = executeScript(text2, appName);
-      callbacks.emit("loadApp", { kind: key, status: "success" });
+      emitSuccess(key, url);
       return result;
     } catch (error) {
       if (error.message.includes("Can only have one anonymous define call per script file")) {
@@ -265,13 +296,13 @@ const loadApp = async (url, key, name) => {
           delete define.amd;
         }
         const result = executeScript(text2, appName);
-        callbacks.emit("loadApp", { kind: key, status: "success" });
+        emitSuccess(key, url);
         return result;
       }
-      callbacks.emit("loadApp", { kind: key, status: "failed", reason: error.message });
+      emitFailed(key, error.message);
     }
   } catch (error) {
-    callbacks.emit("loadApp", { kind: key, status: "failed", reason: error.message });
+    emitFailed(key, error.message);
   }
 };
 async function fetchWithTimeout(resource, options) {
@@ -293,6 +324,7 @@ class AppRegister {
     this.registered = /* @__PURE__ */ new Map();
     this.appClassesCache = /* @__PURE__ */ new Map();
     this.appClasses = /* @__PURE__ */ new Map();
+    this.downloaded = /* @__PURE__ */ new Map();
     this.syncRegisterApp = null;
     this.onSyncRegisterAppChange = (payload) => {
       this.register({ kind: payload.kind, src: payload.src });
@@ -304,27 +336,35 @@ class AppRegister {
   async register(params) {
     this.appClassesCache.delete(params.kind);
     this.registered.set(params.kind, params);
-    const srcOrAppOrFunction = params.src;
+    const paramSrc = params.src;
     let downloadApp;
-    if (typeof srcOrAppOrFunction === "string") {
+    if (typeof paramSrc === "string") {
       downloadApp = async () => {
-        let appClass = await loadApp(srcOrAppOrFunction, params.kind, params.name);
+        const result = await loadApp(paramSrc, params.kind, params.name);
+        if (result.__esModule) {
+          return result.default;
+        }
+        return result;
+      };
+      if (this.syncRegisterApp) {
+        this.syncRegisterApp({ kind: params.kind, src: paramSrc, name: params.name });
+      }
+    }
+    if (typeof paramSrc === "function") {
+      downloadApp = async () => {
+        let appClass = await paramSrc();
         if (appClass) {
-          if (appClass.__esModule) {
+          if (appClass.__esModule || appClass.default) {
             appClass = appClass.default;
           }
           return appClass;
         } else {
-          throw new Error(`[WindowManager]: load remote script failed, ${srcOrAppOrFunction}`);
+          throw new Error(`[WindowManager]: load remote script failed, ${paramSrc}`);
         }
       };
-      if (this.syncRegisterApp) {
-        this.syncRegisterApp({ kind: params.kind, src: srcOrAppOrFunction, name: params.name });
-      }
-    } else if (typeof srcOrAppOrFunction === "function") {
-      downloadApp = srcOrAppOrFunction;
-    } else {
-      downloadApp = async () => srcOrAppOrFunction;
+    }
+    if (typeof paramSrc === "object") {
+      downloadApp = async () => paramSrc;
     }
     this.appClasses.set(params.kind, async () => {
       let app = this.appClassesCache.get(params.kind);
@@ -341,10 +381,21 @@ class AppRegister {
       }
     }
   }
+  downloadApp(kind) {
+    const src = this.registered.get(kind);
+    if (src && typeof src.src === "string") {
+      return loadApp(src.src, src.kind, src.name);
+    }
+  }
+  async removeDownloaded(kind) {
+    await removeItem(kind);
+    this.downloaded.delete(kind);
+  }
   unregister(kind) {
     this.appClasses.delete(kind);
     this.appClassesCache.delete(kind);
     this.registered.delete(kind);
+    this.removeDownloaded(kind);
     const kindEmitter = this.kindEmitters.get(kind);
     if (kindEmitter) {
       kindEmitter.clearListeners();
@@ -5164,10 +5215,12 @@ class MaxTitleBar extends DefaultTitleBar {
     this.$titles = document.createElement("div");
     this.$titles.className = this.wrapClassName("titles");
     this.sideEffect.addEventListener(this.$titles, "wheel", (ev) => {
-      ev.currentTarget.scrollBy({
-        left: ev.deltaY > 0 ? 250 : -250,
-        behavior: "smooth"
-      });
+      if (!ev.deltaX) {
+        ev.currentTarget.scrollBy({
+          left: ev.deltaY > 0 ? 250 : -250,
+          behavior: "smooth"
+        });
+      }
     }, { passive: false }, "max-render-wheel-titles");
     const $content = document.createElement("div");
     $content.className = this.wrapClassName("titles-content");
@@ -11635,8 +11688,8 @@ const reconnectRefresher = new ReconnectRefresher({ emitter });
 const _WindowManager = class extends whiteWebSdk.InvisiblePlugin {
   constructor(context) {
     super(context);
-    this.version = "1.0.0-canary.48";
-    this.dependencies = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/telebox-insider": "1.0.0-alpha.36", "emittery": "^0.11.0", "lodash": "^4.17.21", "p-retry": "^4.6.2", "side-effect-manager": "^1.1.1", "uuid": "^7.0.3", "value-enhancer": "^1.3.2" }, "peerDependencies": { "white-web-sdk": "^2.16.0" }, "devDependencies": { "@netless/app-docs-viewer": "^0.3.3", "@netless/app-plyr": "0.2.2", "@playwright/test": "^1.23.2", "@rollup/plugin-commonjs": "^20.0.0", "@rollup/plugin-node-resolve": "^13.0.4", "@rollup/plugin-url": "^6.1.0", "@sveltejs/vite-plugin-svelte": "^1.0.0-next.49", "@tsconfig/svelte": "^2.0.1", "@types/debug": "^4.1.7", "@types/lodash": "^4.14.182", "@types/lodash-es": "^4.17.6", "@types/node": "^18.0.3", "@types/uuid": "^8.3.4", "@typescript-eslint/eslint-plugin": "^4.30.0", "@typescript-eslint/parser": "^4.30.0", "@vitest/ui": "^0.14.2", "cypress": "^8.7.0", "dotenv": "^10.0.0", "eslint": "^7.32.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-svelte3": "^3.2.0", "jsdom": "^19.0.0", "less": "^4.1.3", "prettier": "^2.3.2", "prettier-plugin-svelte": "^2.4.0", "rollup-plugin-analyzer": "^4.0.0", "rollup-plugin-styles": "^3.14.1", "svelte": "^3.42.4", "typescript": "^4.5.5", "vite": "^2.5.3", "vite-plugin-dts": "^1.2.1", "vitest": "^0.18.0", "white-web-sdk": "2.16.26" } };
+    this.version = "1.0.0-canary.50";
+    this.dependencies = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/telebox-insider": "1.0.0-alpha.37", "emittery": "^0.11.0", "lodash": "^4.17.21", "p-retry": "^4.6.2", "side-effect-manager": "^1.1.1", "uuid": "^7.0.3", "value-enhancer": "^1.3.2" }, "peerDependencies": { "white-web-sdk": "^2.16.0" }, "devDependencies": { "@netless/app-docs-viewer": "^0.3.3", "@netless/app-plyr": "0.2.2", "@playwright/test": "^1.23.2", "@rollup/plugin-commonjs": "^20.0.0", "@rollup/plugin-node-resolve": "^13.0.4", "@rollup/plugin-url": "^6.1.0", "@sveltejs/vite-plugin-svelte": "^1.0.0-next.49", "@tsconfig/svelte": "^2.0.1", "@types/debug": "^4.1.7", "@types/lodash": "^4.14.182", "@types/lodash-es": "^4.17.6", "@types/node": "^18.0.3", "@types/uuid": "^8.3.4", "@typescript-eslint/eslint-plugin": "^4.30.0", "@typescript-eslint/parser": "^4.30.0", "@vitest/ui": "^0.14.2", "cypress": "^8.7.0", "dotenv": "^10.0.0", "eslint": "^7.32.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-svelte3": "^3.2.0", "jsdom": "^19.0.0", "less": "^4.1.3", "prettier": "^2.3.2", "prettier-plugin-svelte": "^2.4.0", "rollup-plugin-analyzer": "^4.0.0", "rollup-plugin-styles": "^3.14.1", "svelte": "^3.42.4", "typescript": "^4.5.5", "vite": "^2.5.3", "vite-plugin-dts": "^1.2.1", "vitest": "^0.18.0", "white-web-sdk": "2.16.26" } };
     this.emitter = callbacks;
     this.viewMode = whiteWebSdk.ViewMode.Broadcaster;
     this.viewMode$ = new valueEnhancer.Val(whiteWebSdk.ViewMode.Broadcaster);
@@ -11676,7 +11729,7 @@ const _WindowManager = class extends whiteWebSdk.InvisiblePlugin {
         this.cameraUpdating = 0;
         this.mainView.callbacks.on("onCameraUpdated", this.onCameraUpdated);
         if (nextScale) {
-          this.nextCamera = __spreadProps(__spreadValues({}, nextCamera), { scale: nextScale });
+          this.nextCamera = nextCamera;
         }
       }
     };
@@ -11698,7 +11751,7 @@ const _WindowManager = class extends whiteWebSdk.InvisiblePlugin {
       }, 50);
     };
     _WindowManager.displayer = context.displayer;
-    window.NETLESS_DEPS = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/telebox-insider": "1.0.0-alpha.36", "emittery": "^0.11.0", "lodash": "^4.17.21", "p-retry": "^4.6.2", "side-effect-manager": "^1.1.1", "uuid": "^7.0.3", "value-enhancer": "^1.3.2" }, "peerDependencies": { "white-web-sdk": "^2.16.0" }, "devDependencies": { "@netless/app-docs-viewer": "^0.3.3", "@netless/app-plyr": "0.2.2", "@playwright/test": "^1.23.2", "@rollup/plugin-commonjs": "^20.0.0", "@rollup/plugin-node-resolve": "^13.0.4", "@rollup/plugin-url": "^6.1.0", "@sveltejs/vite-plugin-svelte": "^1.0.0-next.49", "@tsconfig/svelte": "^2.0.1", "@types/debug": "^4.1.7", "@types/lodash": "^4.14.182", "@types/lodash-es": "^4.17.6", "@types/node": "^18.0.3", "@types/uuid": "^8.3.4", "@typescript-eslint/eslint-plugin": "^4.30.0", "@typescript-eslint/parser": "^4.30.0", "@vitest/ui": "^0.14.2", "cypress": "^8.7.0", "dotenv": "^10.0.0", "eslint": "^7.32.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-svelte3": "^3.2.0", "jsdom": "^19.0.0", "less": "^4.1.3", "prettier": "^2.3.2", "prettier-plugin-svelte": "^2.4.0", "rollup-plugin-analyzer": "^4.0.0", "rollup-plugin-styles": "^3.14.1", "svelte": "^3.42.4", "typescript": "^4.5.5", "vite": "^2.5.3", "vite-plugin-dts": "^1.2.1", "vitest": "^0.18.0", "white-web-sdk": "2.16.26" } };
+    window.NETLESS_DEPS = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/telebox-insider": "1.0.0-alpha.37", "emittery": "^0.11.0", "lodash": "^4.17.21", "p-retry": "^4.6.2", "side-effect-manager": "^1.1.1", "uuid": "^7.0.3", "value-enhancer": "^1.3.2" }, "peerDependencies": { "white-web-sdk": "^2.16.0" }, "devDependencies": { "@netless/app-docs-viewer": "^0.3.3", "@netless/app-plyr": "0.2.2", "@playwright/test": "^1.23.2", "@rollup/plugin-commonjs": "^20.0.0", "@rollup/plugin-node-resolve": "^13.0.4", "@rollup/plugin-url": "^6.1.0", "@sveltejs/vite-plugin-svelte": "^1.0.0-next.49", "@tsconfig/svelte": "^2.0.1", "@types/debug": "^4.1.7", "@types/lodash": "^4.14.182", "@types/lodash-es": "^4.17.6", "@types/node": "^18.0.3", "@types/uuid": "^8.3.4", "@typescript-eslint/eslint-plugin": "^4.30.0", "@typescript-eslint/parser": "^4.30.0", "@vitest/ui": "^0.14.2", "cypress": "^8.7.0", "dotenv": "^10.0.0", "eslint": "^7.32.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-svelte3": "^3.2.0", "jsdom": "^19.0.0", "less": "^4.1.3", "prettier": "^2.3.2", "prettier-plugin-svelte": "^2.4.0", "rollup-plugin-analyzer": "^4.0.0", "rollup-plugin-styles": "^3.14.1", "svelte": "^3.42.4", "typescript": "^4.5.5", "vite": "^2.5.3", "vite-plugin-dts": "^1.2.1", "vitest": "^0.18.0", "white-web-sdk": "2.16.26" } };
   }
   static async mount(params) {
     var _a;
@@ -11708,8 +11761,8 @@ const _WindowManager = class extends whiteWebSdk.InvisiblePlugin {
     const cursor = params.cursor;
     _WindowManager.params = params;
     _WindowManager.displayer = params.room;
-    checkVersion();
     let manager = void 0;
+    checkVersion();
     if (whiteWebSdk.isRoom(room)) {
       if (room.phase !== whiteWebSdk.RoomPhase.Connected) {
         throw new Error("[WindowManager]: Room only Connected can be mount");
@@ -11766,7 +11819,7 @@ const _WindowManager = class extends whiteWebSdk.InvisiblePlugin {
     emitter.emit("onCreated");
     _WindowManager.isCreated = true;
     try {
-      await initDb();
+      await initDb(appRegister);
     } catch (error) {
       console.warn("[WindowManager]: indexedDB open failed");
       console.log(error);
@@ -12418,6 +12471,7 @@ WindowManager.kind = "WindowManager";
 WindowManager.debug = false;
 WindowManager.containerSizeRatio = DEFAULT_CONTAINER_RATIO;
 WindowManager.isCreated = false;
+WindowManager.registry = appRegister;
 setupBuiltin();
 exports.AppCreateError = AppCreateError;
 exports.AppManagerNotInitError = AppManagerNotInitError;

package/dist/index.es.js

@@ -164,18 +164,27 @@ const emitter = new Emittery();
 const DatabaseName = "__WindowManagerAppCache";
 let db;
 let store$1;
-const initDb = async () => {
+const initDb = async (appRegister2) => {
   db = await createDb();
+  const items = await queryAll(db);
+  items.forEach((item) => {
+    appRegister2.downloaded.set(item.kind, item.url);
+  });
 };
-const setItem = (key, val) => {
+const setItem = (kind, url, val) => {
   if (!db)
     return;
-  return addRecord(db, { kind: key, sourceCode: val });
+  return addRecord(db, { kind, url, sourceCode: val });
 };
-const getItem = async (key) => {
+const getItem = async (kind) => {
   if (!db)
     return null;
-  return await query(db, key);
+  return await query(db, kind);
+};
+const removeItem = (key) => {
+  if (!db)
+    return;
+  return deleteRecord(db, key);
 };
 function createDb() {
   return new Promise((resolve, reject) => {
@@ -210,6 +219,14 @@ function query(db2, val) {
     };
   });
 }
+function queryAll(db2) {
+  return new Promise((resolve, reject) => {
+    const index2 = db2.transaction(["apps"]).objectStore("apps").index("kind");
+    const request = index2.getAll();
+    request.onerror = (e) => reject(e);
+    request.onsuccess = () => resolve(request.result);
+  });
+}
 function addRecord(db2, payload) {
   return new Promise((resolve, reject) => {
     const request = db2.transaction(["apps"], "readwrite").objectStore("apps").add(payload);
@@ -217,16 +234,23 @@ function addRecord(db2, payload) {
     request.onerror = () => reject();
   });
 }
+function deleteRecord(db2, key) {
+  return new Promise((resolve, reject) => {
+    const request = db2.transaction(["apps"], "readwrite").objectStore("apps").delete(key);
+    request.onsuccess = () => resolve();
+    request.onerror = () => reject();
+  });
+}
 const Prefix = "NetlessApp";
 const TIMEOUT = 1e4;
-const getScript = async (url) => {
-  const item = await getItem(url);
+const getScript = async (kind, url) => {
+  const item = await getItem(kind);
   if (item) {
     return item.sourceCode;
   } else {
     const result = await fetchWithTimeout(url, { timeout: TIMEOUT });
     const text2 = await result.text();
-    await setItem(url, text2);
+    await setItem(kind, url, text2);
     return text2;
   }
 };
@@ -238,18 +262,25 @@ const executeScript = (text2, appName) => {
   }
   return result;
 };
+const emitSuccess = (kind, url) => {
+  callbacks.emit("loadApp", { kind, status: "success" });
+  appRegister.downloaded.set(kind, url);
+};
+const emitFailed = (kind, reason) => {
+  callbacks.emit("loadApp", { kind, status: "failed", reason });
+};
 const loadApp = async (url, key, name) => {
   const appName = name || Prefix + key;
   callbacks.emit("loadApp", { kind: key, status: "start" });
   try {
-    const text2 = await getScript(url);
+    const text2 = await getScript(key, url);
     if (!text2 || text2.length === 0) {
-      callbacks.emit("loadApp", { kind: key, status: "failed", reason: "script is empty." });
+      emitFailed(key, "script is empty");
       return;
     }
     try {
       const result = executeScript(text2, appName);
-      callbacks.emit("loadApp", { kind: key, status: "success" });
+      emitSuccess(key, url);
       return result;
     } catch (error) {
       if (error.message.includes("Can only have one anonymous define call per script file")) {
@@ -258,13 +289,13 @@ const loadApp = async (url, key, name) => {
           delete define.amd;
         }
         const result = executeScript(text2, appName);
-        callbacks.emit("loadApp", { kind: key, status: "success" });
+        emitSuccess(key, url);
         return result;
       }
-      callbacks.emit("loadApp", { kind: key, status: "failed", reason: error.message });
+      emitFailed(key, error.message);
     }
   } catch (error) {
-    callbacks.emit("loadApp", { kind: key, status: "failed", reason: error.message });
+    emitFailed(key, error.message);
   }
 };
 async function fetchWithTimeout(resource, options) {
@@ -286,6 +317,7 @@ class AppRegister {
     this.registered = /* @__PURE__ */ new Map();
     this.appClassesCache = /* @__PURE__ */ new Map();
     this.appClasses = /* @__PURE__ */ new Map();
+    this.downloaded = /* @__PURE__ */ new Map();
     this.syncRegisterApp = null;
     this.onSyncRegisterAppChange = (payload) => {
       this.register({ kind: payload.kind, src: payload.src });
@@ -297,27 +329,35 @@ class AppRegister {
   async register(params) {
     this.appClassesCache.delete(params.kind);
     this.registered.set(params.kind, params);
-    const srcOrAppOrFunction = params.src;
+    const paramSrc = params.src;
     let downloadApp;
-    if (typeof srcOrAppOrFunction === "string") {
+    if (typeof paramSrc === "string") {
       downloadApp = async () => {
-        let appClass = await loadApp(srcOrAppOrFunction, params.kind, params.name);
+        const result = await loadApp(paramSrc, params.kind, params.name);
+        if (result.__esModule) {
+          return result.default;
+        }
+        return result;
+      };
+      if (this.syncRegisterApp) {
+        this.syncRegisterApp({ kind: params.kind, src: paramSrc, name: params.name });
+      }
+    }
+    if (typeof paramSrc === "function") {
+      downloadApp = async () => {
+        let appClass = await paramSrc();
         if (appClass) {
-          if (appClass.__esModule) {
+          if (appClass.__esModule || appClass.default) {
             appClass = appClass.default;
           }
           return appClass;
         } else {
-          throw new Error(`[WindowManager]: load remote script failed, ${srcOrAppOrFunction}`);
+          throw new Error(`[WindowManager]: load remote script failed, ${paramSrc}`);
         }
       };
-      if (this.syncRegisterApp) {
-        this.syncRegisterApp({ kind: params.kind, src: srcOrAppOrFunction, name: params.name });
-      }
-    } else if (typeof srcOrAppOrFunction === "function") {
-      downloadApp = srcOrAppOrFunction;
-    } else {
-      downloadApp = async () => srcOrAppOrFunction;
+    }
+    if (typeof paramSrc === "object") {
+      downloadApp = async () => paramSrc;
     }
     this.appClasses.set(params.kind, async () => {
       let app = this.appClassesCache.get(params.kind);
@@ -334,10 +374,21 @@ class AppRegister {
       }
     }
   }
+  downloadApp(kind) {
+    const src = this.registered.get(kind);
+    if (src && typeof src.src === "string") {
+      return loadApp(src.src, src.kind, src.name);
+    }
+  }
+  async removeDownloaded(kind) {
+    await removeItem(kind);
+    this.downloaded.delete(kind);
+  }
   unregister(kind) {
     this.appClasses.delete(kind);
     this.appClassesCache.delete(kind);
     this.registered.delete(kind);
+    this.removeDownloaded(kind);
     const kindEmitter = this.kindEmitters.get(kind);
     if (kindEmitter) {
       kindEmitter.clearListeners();
@@ -5157,10 +5208,12 @@ class MaxTitleBar extends DefaultTitleBar {
     this.$titles = document.createElement("div");
     this.$titles.className = this.wrapClassName("titles");
     this.sideEffect.addEventListener(this.$titles, "wheel", (ev) => {
-      ev.currentTarget.scrollBy({
-        left: ev.deltaY > 0 ? 250 : -250,
-        behavior: "smooth"
-      });
+      if (!ev.deltaX) {
+        ev.currentTarget.scrollBy({
+          left: ev.deltaY > 0 ? 250 : -250,
+          behavior: "smooth"
+        });
+      }
     }, { passive: false }, "max-render-wheel-titles");
     const $content = document.createElement("div");
     $content.className = this.wrapClassName("titles-content");
@@ -11628,8 +11681,8 @@ const reconnectRefresher = new ReconnectRefresher({ emitter });
 const _WindowManager = class extends InvisiblePlugin {
   constructor(context) {
     super(context);
-    this.version = "1.0.0-canary.48";
-    this.dependencies = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/telebox-insider": "1.0.0-alpha.36", "emittery": "^0.11.0", "lodash": "^4.17.21", "p-retry": "^4.6.2", "side-effect-manager": "^1.1.1", "uuid": "^7.0.3", "value-enhancer": "^1.3.2" }, "peerDependencies": { "white-web-sdk": "^2.16.0" }, "devDependencies": { "@netless/app-docs-viewer": "^0.3.3", "@netless/app-plyr": "0.2.2", "@playwright/test": "^1.23.2", "@rollup/plugin-commonjs": "^20.0.0", "@rollup/plugin-node-resolve": "^13.0.4", "@rollup/plugin-url": "^6.1.0", "@sveltejs/vite-plugin-svelte": "^1.0.0-next.49", "@tsconfig/svelte": "^2.0.1", "@types/debug": "^4.1.7", "@types/lodash": "^4.14.182", "@types/lodash-es": "^4.17.6", "@types/node": "^18.0.3", "@types/uuid": "^8.3.4", "@typescript-eslint/eslint-plugin": "^4.30.0", "@typescript-eslint/parser": "^4.30.0", "@vitest/ui": "^0.14.2", "cypress": "^8.7.0", "dotenv": "^10.0.0", "eslint": "^7.32.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-svelte3": "^3.2.0", "jsdom": "^19.0.0", "less": "^4.1.3", "prettier": "^2.3.2", "prettier-plugin-svelte": "^2.4.0", "rollup-plugin-analyzer": "^4.0.0", "rollup-plugin-styles": "^3.14.1", "svelte": "^3.42.4", "typescript": "^4.5.5", "vite": "^2.5.3", "vite-plugin-dts": "^1.2.1", "vitest": "^0.18.0", "white-web-sdk": "2.16.26" } };
+    this.version = "1.0.0-canary.50";
+    this.dependencies = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/telebox-insider": "1.0.0-alpha.37", "emittery": "^0.11.0", "lodash": "^4.17.21", "p-retry": "^4.6.2", "side-effect-manager": "^1.1.1", "uuid": "^7.0.3", "value-enhancer": "^1.3.2" }, "peerDependencies": { "white-web-sdk": "^2.16.0" }, "devDependencies": { "@netless/app-docs-viewer": "^0.3.3", "@netless/app-plyr": "0.2.2", "@playwright/test": "^1.23.2", "@rollup/plugin-commonjs": "^20.0.0", "@rollup/plugin-node-resolve": "^13.0.4", "@rollup/plugin-url": "^6.1.0", "@sveltejs/vite-plugin-svelte": "^1.0.0-next.49", "@tsconfig/svelte": "^2.0.1", "@types/debug": "^4.1.7", "@types/lodash": "^4.14.182", "@types/lodash-es": "^4.17.6", "@types/node": "^18.0.3", "@types/uuid": "^8.3.4", "@typescript-eslint/eslint-plugin": "^4.30.0", "@typescript-eslint/parser": "^4.30.0", "@vitest/ui": "^0.14.2", "cypress": "^8.7.0", "dotenv": "^10.0.0", "eslint": "^7.32.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-svelte3": "^3.2.0", "jsdom": "^19.0.0", "less": "^4.1.3", "prettier": "^2.3.2", "prettier-plugin-svelte": "^2.4.0", "rollup-plugin-analyzer": "^4.0.0", "rollup-plugin-styles": "^3.14.1", "svelte": "^3.42.4", "typescript": "^4.5.5", "vite": "^2.5.3", "vite-plugin-dts": "^1.2.1", "vitest": "^0.18.0", "white-web-sdk": "2.16.26" } };
     this.emitter = callbacks;
     this.viewMode = ViewMode.Broadcaster;
     this.viewMode$ = new Val(ViewMode.Broadcaster);
@@ -11669,7 +11722,7 @@ const _WindowManager = class extends InvisiblePlugin {
         this.cameraUpdating = 0;
         this.mainView.callbacks.on("onCameraUpdated", this.onCameraUpdated);
         if (nextScale) {
-          this.nextCamera = __spreadProps(__spreadValues({}, nextCamera), { scale: nextScale });
+          this.nextCamera = nextCamera;
         }
       }
     };
@@ -11691,7 +11744,7 @@ const _WindowManager = class extends InvisiblePlugin {
       }, 50);
     };
     _WindowManager.displayer = context.displayer;
-    window.NETLESS_DEPS = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/telebox-insider": "1.0.0-alpha.36", "emittery": "^0.11.0", "lodash": "^4.17.21", "p-retry": "^4.6.2", "side-effect-manager": "^1.1.1", "uuid": "^7.0.3", "value-enhancer": "^1.3.2" }, "peerDependencies": { "white-web-sdk": "^2.16.0" }, "devDependencies": { "@netless/app-docs-viewer": "^0.3.3", "@netless/app-plyr": "0.2.2", "@playwright/test": "^1.23.2", "@rollup/plugin-commonjs": "^20.0.0", "@rollup/plugin-node-resolve": "^13.0.4", "@rollup/plugin-url": "^6.1.0", "@sveltejs/vite-plugin-svelte": "^1.0.0-next.49", "@tsconfig/svelte": "^2.0.1", "@types/debug": "^4.1.7", "@types/lodash": "^4.14.182", "@types/lodash-es": "^4.17.6", "@types/node": "^18.0.3", "@types/uuid": "^8.3.4", "@typescript-eslint/eslint-plugin": "^4.30.0", "@typescript-eslint/parser": "^4.30.0", "@vitest/ui": "^0.14.2", "cypress": "^8.7.0", "dotenv": "^10.0.0", "eslint": "^7.32.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-svelte3": "^3.2.0", "jsdom": "^19.0.0", "less": "^4.1.3", "prettier": "^2.3.2", "prettier-plugin-svelte": "^2.4.0", "rollup-plugin-analyzer": "^4.0.0", "rollup-plugin-styles": "^3.14.1", "svelte": "^3.42.4", "typescript": "^4.5.5", "vite": "^2.5.3", "vite-plugin-dts": "^1.2.1", "vitest": "^0.18.0", "white-web-sdk": "2.16.26" } };
+    window.NETLESS_DEPS = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/telebox-insider": "1.0.0-alpha.37", "emittery": "^0.11.0", "lodash": "^4.17.21", "p-retry": "^4.6.2", "side-effect-manager": "^1.1.1", "uuid": "^7.0.3", "value-enhancer": "^1.3.2" }, "peerDependencies": { "white-web-sdk": "^2.16.0" }, "devDependencies": { "@netless/app-docs-viewer": "^0.3.3", "@netless/app-plyr": "0.2.2", "@playwright/test": "^1.23.2", "@rollup/plugin-commonjs": "^20.0.0", "@rollup/plugin-node-resolve": "^13.0.4", "@rollup/plugin-url": "^6.1.0", "@sveltejs/vite-plugin-svelte": "^1.0.0-next.49", "@tsconfig/svelte": "^2.0.1", "@types/debug": "^4.1.7", "@types/lodash": "^4.14.182", "@types/lodash-es": "^4.17.6", "@types/node": "^18.0.3", "@types/uuid": "^8.3.4", "@typescript-eslint/eslint-plugin": "^4.30.0", "@typescript-eslint/parser": "^4.30.0", "@vitest/ui": "^0.14.2", "cypress": "^8.7.0", "dotenv": "^10.0.0", "eslint": "^7.32.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-svelte3": "^3.2.0", "jsdom": "^19.0.0", "less": "^4.1.3", "prettier": "^2.3.2", "prettier-plugin-svelte": "^2.4.0", "rollup-plugin-analyzer": "^4.0.0", "rollup-plugin-styles": "^3.14.1", "svelte": "^3.42.4", "typescript": "^4.5.5", "vite": "^2.5.3", "vite-plugin-dts": "^1.2.1", "vitest": "^0.18.0", "white-web-sdk": "2.16.26" } };
   }
   static async mount(params) {
     var _a;
@@ -11701,8 +11754,8 @@ const _WindowManager = class extends InvisiblePlugin {
     const cursor = params.cursor;
     _WindowManager.params = params;
     _WindowManager.displayer = params.room;
-    checkVersion();
     let manager = void 0;
+    checkVersion();
     if (isRoom(room)) {
       if (room.phase !== RoomPhase.Connected) {
         throw new Error("[WindowManager]: Room only Connected can be mount");
@@ -11759,7 +11812,7 @@ const _WindowManager = class extends InvisiblePlugin {
     emitter.emit("onCreated");
     _WindowManager.isCreated = true;
     try {
-      await initDb();
+      await initDb(appRegister);
     } catch (error) {
       console.warn("[WindowManager]: indexedDB open failed");
       console.log(error);
@@ -12411,5 +12464,6 @@ WindowManager.kind = "WindowManager";
 WindowManager.debug = false;
 WindowManager.containerSizeRatio = DEFAULT_CONTAINER_RATIO;
 WindowManager.isCreated = false;
+WindowManager.registry = appRegister;
 setupBuiltin();
 export { AppCreateError, AppManagerNotInitError, AppNotRegisterError, BindContainerRoomPhaseInvalidError, BoxManagerNotInitializeError, BoxNotCreatedError, BuiltinApps, BuiltinAppsMap, InvalidScenePath, ParamsInvalidError, WhiteWebSDKInvalidError, WindowManager, calculateNextIndex, reconnectRefresher };

package/dist/index.umd.js

@@ -165,18 +165,27 @@ var __objRest = (source, exclude) => {
   const DatabaseName = "__WindowManagerAppCache";
   let db;
   let store$1;
-  const initDb = async () => {
+  const initDb = async (appRegister2) => {
     db = await createDb();
+    const items = await queryAll(db);
+    items.forEach((item) => {
+      appRegister2.downloaded.set(item.kind, item.url);
+    });
   };
-  const setItem = (key, val) => {
+  const setItem = (kind, url, val) => {
     if (!db)
       return;
-    return addRecord(db, { kind: key, sourceCode: val });
+    return addRecord(db, { kind, url, sourceCode: val });
   };
-  const getItem = async (key) => {
+  const getItem = async (kind) => {
     if (!db)
       return null;
-    return await query(db, key);
+    return await query(db, kind);
+  };
+  const removeItem = (key) => {
+    if (!db)
+      return;
+    return deleteRecord(db, key);
   };
   function createDb() {
     return new Promise((resolve, reject) => {
@@ -211,6 +220,14 @@ var __objRest = (source, exclude) => {
       };
     });
   }
+  function queryAll(db2) {
+    return new Promise((resolve, reject) => {
+      const index2 = db2.transaction(["apps"]).objectStore("apps").index("kind");
+      const request = index2.getAll();
+      request.onerror = (e) => reject(e);
+      request.onsuccess = () => resolve(request.result);
+    });
+  }
   function addRecord(db2, payload) {
     return new Promise((resolve, reject) => {
       const request = db2.transaction(["apps"], "readwrite").objectStore("apps").add(payload);
@@ -218,16 +235,23 @@ var __objRest = (source, exclude) => {
       request.onerror = () => reject();
     });
   }
+  function deleteRecord(db2, key) {
+    return new Promise((resolve, reject) => {
+      const request = db2.transaction(["apps"], "readwrite").objectStore("apps").delete(key);
+      request.onsuccess = () => resolve();
+      request.onerror = () => reject();
+    });
+  }
   const Prefix = "NetlessApp";
   const TIMEOUT = 1e4;
-  const getScript = async (url) => {
-    const item = await getItem(url);
+  const getScript = async (kind, url) => {
+    const item = await getItem(kind);
     if (item) {
       return item.sourceCode;
     } else {
       const result = await fetchWithTimeout(url, { timeout: TIMEOUT });
       const text2 = await result.text();
-      await setItem(url, text2);
+      await setItem(kind, url, text2);
       return text2;
     }
   };
@@ -239,18 +263,25 @@ var __objRest = (source, exclude) => {
     }
     return result;
   };
+  const emitSuccess = (kind, url) => {
+    callbacks.emit("loadApp", { kind, status: "success" });
+    appRegister.downloaded.set(kind, url);
+  };
+  const emitFailed = (kind, reason) => {
+    callbacks.emit("loadApp", { kind, status: "failed", reason });
+  };
   const loadApp = async (url, key, name) => {
     const appName = name || Prefix + key;
     callbacks.emit("loadApp", { kind: key, status: "start" });
     try {
-      const text2 = await getScript(url);
+      const text2 = await getScript(key, url);
       if (!text2 || text2.length === 0) {
-        callbacks.emit("loadApp", { kind: key, status: "failed", reason: "script is empty." });
+        emitFailed(key, "script is empty");
         return;
       }
       try {
         const result = executeScript(text2, appName);
-        callbacks.emit("loadApp", { kind: key, status: "success" });
+        emitSuccess(key, url);
         return result;
       } catch (error) {
         if (error.message.includes("Can only have one anonymous define call per script file")) {
@@ -259,13 +290,13 @@ var __objRest = (source, exclude) => {
             delete define2.amd;
           }
           const result = executeScript(text2, appName);
-          callbacks.emit("loadApp", { kind: key, status: "success" });
+          emitSuccess(key, url);
           return result;
         }
-        callbacks.emit("loadApp", { kind: key, status: "failed", reason: error.message });
+        emitFailed(key, error.message);
       }
     } catch (error) {
-      callbacks.emit("loadApp", { kind: key, status: "failed", reason: error.message });
+      emitFailed(key, error.message);
     }
   };
   async function fetchWithTimeout(resource, options) {
@@ -287,6 +318,7 @@ var __objRest = (source, exclude) => {
       this.registered = /* @__PURE__ */ new Map();
       this.appClassesCache = /* @__PURE__ */ new Map();
       this.appClasses = /* @__PURE__ */ new Map();
+      this.downloaded = /* @__PURE__ */ new Map();
       this.syncRegisterApp = null;
       this.onSyncRegisterAppChange = (payload) => {
         this.register({ kind: payload.kind, src: payload.src });
@@ -298,27 +330,35 @@ var __objRest = (source, exclude) => {
     async register(params) {
       this.appClassesCache.delete(params.kind);
       this.registered.set(params.kind, params);
-      const srcOrAppOrFunction = params.src;
+      const paramSrc = params.src;
       let downloadApp;
-      if (typeof srcOrAppOrFunction === "string") {
+      if (typeof paramSrc === "string") {
         downloadApp = async () => {
-          let appClass = await loadApp(srcOrAppOrFunction, params.kind, params.name);
+          const result = await loadApp(paramSrc, params.kind, params.name);
+          if (result.__esModule) {
+            return result.default;
+          }
+          return result;
+        };
+        if (this.syncRegisterApp) {
+          this.syncRegisterApp({ kind: params.kind, src: paramSrc, name: params.name });
+        }
+      }
+      if (typeof paramSrc === "function") {
+        downloadApp = async () => {
+          let appClass = await paramSrc();
           if (appClass) {
-            if (appClass.__esModule) {
+            if (appClass.__esModule || appClass.default) {
               appClass = appClass.default;
             }
             return appClass;
           } else {
-            throw new Error(`[WindowManager]: load remote script failed, ${srcOrAppOrFunction}`);
+            throw new Error(`[WindowManager]: load remote script failed, ${paramSrc}`);
           }
         };
-        if (this.syncRegisterApp) {
-          this.syncRegisterApp({ kind: params.kind, src: srcOrAppOrFunction, name: params.name });
-        }
-      } else if (typeof srcOrAppOrFunction === "function") {
-        downloadApp = srcOrAppOrFunction;
-      } else {
-        downloadApp = async () => srcOrAppOrFunction;
+      }
+      if (typeof paramSrc === "object") {
+        downloadApp = async () => paramSrc;
       }
       this.appClasses.set(params.kind, async () => {
         let app = this.appClassesCache.get(params.kind);
@@ -335,10 +375,21 @@ var __objRest = (source, exclude) => {
         }
       }
     }
+    downloadApp(kind) {
+      const src = this.registered.get(kind);
+      if (src && typeof src.src === "string") {
+        return loadApp(src.src, src.kind, src.name);
+      }
+    }
+    async removeDownloaded(kind) {
+      await removeItem(kind);
+      this.downloaded.delete(kind);
+    }
     unregister(kind) {
       this.appClasses.delete(kind);
       this.appClassesCache.delete(kind);
       this.registered.delete(kind);
+      this.removeDownloaded(kind);
       const kindEmitter = this.kindEmitters.get(kind);
       if (kindEmitter) {
         kindEmitter.clearListeners();
@@ -5158,10 +5209,12 @@ var __objRest = (source, exclude) => {
       this.$titles = document.createElement("div");
       this.$titles.className = this.wrapClassName("titles");
       this.sideEffect.addEventListener(this.$titles, "wheel", (ev) => {
-        ev.currentTarget.scrollBy({
-          left: ev.deltaY > 0 ? 250 : -250,
-          behavior: "smooth"
-        });
+        if (!ev.deltaX) {
+          ev.currentTarget.scrollBy({
+            left: ev.deltaY > 0 ? 250 : -250,
+            behavior: "smooth"
+          });
+        }
       }, { passive: false }, "max-render-wheel-titles");
       const $content = document.createElement("div");
       $content.className = this.wrapClassName("titles-content");
@@ -11629,8 +11682,8 @@ var __objRest = (source, exclude) => {
   const _WindowManager = class extends whiteWebSdk.InvisiblePlugin {
     constructor(context) {
       super(context);
-      this.version = "1.0.0-canary.48";
-      this.dependencies = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/telebox-insider": "1.0.0-alpha.36", "emittery": "^0.11.0", "lodash": "^4.17.21", "p-retry": "^4.6.2", "side-effect-manager": "^1.1.1", "uuid": "^7.0.3", "value-enhancer": "^1.3.2" }, "peerDependencies": { "white-web-sdk": "^2.16.0" }, "devDependencies": { "@netless/app-docs-viewer": "^0.3.3", "@netless/app-plyr": "0.2.2", "@playwright/test": "^1.23.2", "@rollup/plugin-commonjs": "^20.0.0", "@rollup/plugin-node-resolve": "^13.0.4", "@rollup/plugin-url": "^6.1.0", "@sveltejs/vite-plugin-svelte": "^1.0.0-next.49", "@tsconfig/svelte": "^2.0.1", "@types/debug": "^4.1.7", "@types/lodash": "^4.14.182", "@types/lodash-es": "^4.17.6", "@types/node": "^18.0.3", "@types/uuid": "^8.3.4", "@typescript-eslint/eslint-plugin": "^4.30.0", "@typescript-eslint/parser": "^4.30.0", "@vitest/ui": "^0.14.2", "cypress": "^8.7.0", "dotenv": "^10.0.0", "eslint": "^7.32.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-svelte3": "^3.2.0", "jsdom": "^19.0.0", "less": "^4.1.3", "prettier": "^2.3.2", "prettier-plugin-svelte": "^2.4.0", "rollup-plugin-analyzer": "^4.0.0", "rollup-plugin-styles": "^3.14.1", "svelte": "^3.42.4", "typescript": "^4.5.5", "vite": "^2.5.3", "vite-plugin-dts": "^1.2.1", "vitest": "^0.18.0", "white-web-sdk": "2.16.26" } };
+      this.version = "1.0.0-canary.50";
+      this.dependencies = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/telebox-insider": "1.0.0-alpha.37", "emittery": "^0.11.0", "lodash": "^4.17.21", "p-retry": "^4.6.2", "side-effect-manager": "^1.1.1", "uuid": "^7.0.3", "value-enhancer": "^1.3.2" }, "peerDependencies": { "white-web-sdk": "^2.16.0" }, "devDependencies": { "@netless/app-docs-viewer": "^0.3.3", "@netless/app-plyr": "0.2.2", "@playwright/test": "^1.23.2", "@rollup/plugin-commonjs": "^20.0.0", "@rollup/plugin-node-resolve": "^13.0.4", "@rollup/plugin-url": "^6.1.0", "@sveltejs/vite-plugin-svelte": "^1.0.0-next.49", "@tsconfig/svelte": "^2.0.1", "@types/debug": "^4.1.7", "@types/lodash": "^4.14.182", "@types/lodash-es": "^4.17.6", "@types/node": "^18.0.3", "@types/uuid": "^8.3.4", "@typescript-eslint/eslint-plugin": "^4.30.0", "@typescript-eslint/parser": "^4.30.0", "@vitest/ui": "^0.14.2", "cypress": "^8.7.0", "dotenv": "^10.0.0", "eslint": "^7.32.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-svelte3": "^3.2.0", "jsdom": "^19.0.0", "less": "^4.1.3", "prettier": "^2.3.2", "prettier-plugin-svelte": "^2.4.0", "rollup-plugin-analyzer": "^4.0.0", "rollup-plugin-styles": "^3.14.1", "svelte": "^3.42.4", "typescript": "^4.5.5", "vite": "^2.5.3", "vite-plugin-dts": "^1.2.1", "vitest": "^0.18.0", "white-web-sdk": "2.16.26" } };
       this.emitter = callbacks;
       this.viewMode = whiteWebSdk.ViewMode.Broadcaster;
       this.viewMode$ = new valueEnhancer.Val(whiteWebSdk.ViewMode.Broadcaster);
@@ -11670,7 +11723,7 @@ var __objRest = (source, exclude) => {
           this.cameraUpdating = 0;
           this.mainView.callbacks.on("onCameraUpdated", this.onCameraUpdated);
           if (nextScale) {
-            this.nextCamera = __spreadProps(__spreadValues({}, nextCamera), { scale: nextScale });
+            this.nextCamera = nextCamera;
           }
         }
       };
@@ -11692,7 +11745,7 @@ var __objRest = (source, exclude) => {
         }, 50);
       };
       _WindowManager.displayer = context.displayer;
-      window.NETLESS_DEPS = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/telebox-insider": "1.0.0-alpha.36", "emittery": "^0.11.0", "lodash": "^4.17.21", "p-retry": "^4.6.2", "side-effect-manager": "^1.1.1", "uuid": "^7.0.3", "value-enhancer": "^1.3.2" }, "peerDependencies": { "white-web-sdk": "^2.16.0" }, "devDependencies": { "@netless/app-docs-viewer": "^0.3.3", "@netless/app-plyr": "0.2.2", "@playwright/test": "^1.23.2", "@rollup/plugin-commonjs": "^20.0.0", "@rollup/plugin-node-resolve": "^13.0.4", "@rollup/plugin-url": "^6.1.0", "@sveltejs/vite-plugin-svelte": "^1.0.0-next.49", "@tsconfig/svelte": "^2.0.1", "@types/debug": "^4.1.7", "@types/lodash": "^4.14.182", "@types/lodash-es": "^4.17.6", "@types/node": "^18.0.3", "@types/uuid": "^8.3.4", "@typescript-eslint/eslint-plugin": "^4.30.0", "@typescript-eslint/parser": "^4.30.0", "@vitest/ui": "^0.14.2", "cypress": "^8.7.0", "dotenv": "^10.0.0", "eslint": "^7.32.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-svelte3": "^3.2.0", "jsdom": "^19.0.0", "less": "^4.1.3", "prettier": "^2.3.2", "prettier-plugin-svelte": "^2.4.0", "rollup-plugin-analyzer": "^4.0.0", "rollup-plugin-styles": "^3.14.1", "svelte": "^3.42.4", "typescript": "^4.5.5", "vite": "^2.5.3", "vite-plugin-dts": "^1.2.1", "vitest": "^0.18.0", "white-web-sdk": "2.16.26" } };
+      window.NETLESS_DEPS = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/telebox-insider": "1.0.0-alpha.37", "emittery": "^0.11.0", "lodash": "^4.17.21", "p-retry": "^4.6.2", "side-effect-manager": "^1.1.1", "uuid": "^7.0.3", "value-enhancer": "^1.3.2" }, "peerDependencies": { "white-web-sdk": "^2.16.0" }, "devDependencies": { "@netless/app-docs-viewer": "^0.3.3", "@netless/app-plyr": "0.2.2", "@playwright/test": "^1.23.2", "@rollup/plugin-commonjs": "^20.0.0", "@rollup/plugin-node-resolve": "^13.0.4", "@rollup/plugin-url": "^6.1.0", "@sveltejs/vite-plugin-svelte": "^1.0.0-next.49", "@tsconfig/svelte": "^2.0.1", "@types/debug": "^4.1.7", "@types/lodash": "^4.14.182", "@types/lodash-es": "^4.17.6", "@types/node": "^18.0.3", "@types/uuid": "^8.3.4", "@typescript-eslint/eslint-plugin": "^4.30.0", "@typescript-eslint/parser": "^4.30.0", "@vitest/ui": "^0.14.2", "cypress": "^8.7.0", "dotenv": "^10.0.0", "eslint": "^7.32.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-svelte3": "^3.2.0", "jsdom": "^19.0.0", "less": "^4.1.3", "prettier": "^2.3.2", "prettier-plugin-svelte": "^2.4.0", "rollup-plugin-analyzer": "^4.0.0", "rollup-plugin-styles": "^3.14.1", "svelte": "^3.42.4", "typescript": "^4.5.5", "vite": "^2.5.3", "vite-plugin-dts": "^1.2.1", "vitest": "^0.18.0", "white-web-sdk": "2.16.26" } };
     }
     static async mount(params) {
       var _a;
@@ -11702,8 +11755,8 @@ var __objRest = (source, exclude) => {
       const cursor = params.cursor;
       _WindowManager.params = params;
       _WindowManager.displayer = params.room;
-      checkVersion();
       let manager = void 0;
+      checkVersion();
       if (whiteWebSdk.isRoom(room)) {
         if (room.phase !== whiteWebSdk.RoomPhase.Connected) {
           throw new Error("[WindowManager]: Room only Connected can be mount");
@@ -11760,7 +11813,7 @@ var __objRest = (source, exclude) => {
       emitter.emit("onCreated");
       _WindowManager.isCreated = true;
       try {
-        await initDb();
+        await initDb(appRegister);
       } catch (error) {
         console.warn("[WindowManager]: indexedDB open failed");
         console.log(error);
@@ -12412,6 +12465,7 @@ var __objRest = (source, exclude) => {
   WindowManager.debug = false;
   WindowManager.containerSizeRatio = DEFAULT_CONTAINER_RATIO;
   WindowManager.isCreated = false;
+  WindowManager.registry = appRegister;
   setupBuiltin();
   exports2.AppCreateError = AppCreateError;
   exports2.AppManagerNotInitError = AppManagerNotInitError;

package/dist/src/Register/index.d.ts

@@ -11,18 +11,20 @@ export declare type SyncRegisterAppPayload = {
     name: string | undefined;
 };
 export declare type SyncRegisterApp = (payload: SyncRegisterAppPayload) => void;
-declare class AppRegister {
+export declare class AppRegister {
     kindEmitters: Map<string, Emittery<RegisterEvents>>;
     registered: Map<string, RegisterParams>;
     appClassesCache: Map<string, Promise<NetlessApp>>;
     appClasses: Map<string, () => Promise<NetlessApp>>;
+    downloaded: Map<string, string>;
     private syncRegisterApp;
     setSyncRegisterApp(fn: SyncRegisterApp): void;
     onSyncRegisterAppChange: (payload: SyncRegisterAppPayload) => void;
     register(params: RegisterParams): Promise<void>;
+    downloadApp(kind: string): Promise<NetlessApp<any, any, any, any> | undefined> | undefined;
+    removeDownloaded(kind: string): Promise<void>;
     unregister(kind: string): void;
     notifyApp<T extends keyof RegisterEvents>(kind: string, event: T, payload: RegisterEvents[T]): Promise<void>;
     private createKindEmitter;
 }
 export declare const appRegister: AppRegister;
-export {};

package/dist/src/Register/loader.d.ts

@@ -1,4 +1,4 @@
 import type { NetlessApp } from "../typings";
-export declare const getScript: (url: string) => Promise<string>;
+export declare const getScript: (kind: string, url: string) => Promise<string>;
 export declare const executeScript: (text: string, appName: string) => NetlessApp;
 export declare const loadApp: (url: string, key: string, name?: string | undefined) => Promise<NetlessApp | undefined>;

package/dist/src/Register/storage.d.ts

@@ -1,8 +1,11 @@
+import type { AppRegister } from "./index";
 export declare type Item = {
     kind: string;
+    url: string;
     sourceCode: string;
 };
-export declare const initDb: () => Promise<void>;
-export declare const setItem: (key: string, val: any) => Promise<void> | undefined;
-export declare const getItem: (key: string) => Promise<Item | null>;
+export declare const initDb: (appRegister: AppRegister) => Promise<void>;
+export declare const setItem: (kind: string, url: string, val: any) => Promise<void> | undefined;
+export declare const getItem: (kind: string) => Promise<Item | null>;
 export declare const removeItem: (key: string) => Promise<void> | undefined;
+export declare const getAll: () => Promise<Item[]> | undefined;

package/dist/src/index.d.ts

@@ -113,6 +113,7 @@ export declare class WindowManager extends InvisiblePlugin<WindowMangerAttribute
     static debug: boolean;
     static containerSizeRatio: number;
     private static isCreated;
+    static registry: import("./Register").AppRegister;
     version: string;
     dependencies: Record<string, string>;
     appListeners?: AppListeners;

package/dist/src/typings.d.ts

@@ -66,7 +66,9 @@ export declare type RegisterEvents<SetupResult = any> = {
 };
 export declare type RegisterParams<AppOptions = any, SetupResult = any, Attributes = any> = {
     kind: string;
-    src: NetlessApp<Attributes, SetupResult> | string | (() => Promise<NetlessApp<Attributes, SetupResult>>);
+    src: NetlessApp<Attributes, SetupResult> | string | (() => Promise<NetlessApp<Attributes, SetupResult>>) | (() => Promise<{
+        default: NetlessApp<Attributes, SetupResult>;
+    }>);
     appOptions?: AppOptions | (() => AppOptions);
     addHooks?: (emitter: Emittery<RegisterEvents<SetupResult>>) => void;
     /** dynamic load app package name */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/window-manager",
-  "version": "1.0.0-canary.48",
+  "version": "1.0.0-canary.50",
   "description": "",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
@@ -25,7 +25,7 @@
   },
   "dependencies": {
     "@juggle/resize-observer": "^3.3.1",
-    "@netless/telebox-insider": "1.0.0-alpha.36",
+    "@netless/telebox-insider": "1.0.0-alpha.37",
     "emittery": "^0.11.0",
     "lodash": "^4.17.21",
     "p-retry": "^4.6.2",

package/pnpm-lock.yaml

@@ -4,7 +4,7 @@ specifiers:
   '@juggle/resize-observer': ^3.3.1
   '@netless/app-docs-viewer': ^0.3.3
   '@netless/app-plyr': 0.2.2
-  '@netless/telebox-insider': 1.0.0-alpha.36
+  '@netless/telebox-insider': 1.0.0-alpha.37
   '@playwright/test': ^1.23.2
   '@rollup/plugin-commonjs': ^20.0.0
   '@rollup/plugin-node-resolve': ^13.0.4
@@ -45,7 +45,7 @@ specifiers:
 
 dependencies:
   '@juggle/resize-observer': 3.3.1
-  '@netless/telebox-insider': 1.0.0-alpha.36
+  '@netless/telebox-insider': 1.0.0-alpha.37
   emittery: 0.11.0
   lodash: 4.17.21
   p-retry: 4.6.2
@@ -247,8 +247,8 @@ packages:
     resolution: {integrity: sha512-7NzsJrba0R/mq/l10SkIZQwbrNVJyPxZYrjK6xL3Ts732iWAVuS2UB0u3s6iGeUVcqV39A679yva8APWRl4M0A==}
     dev: true
 
-  /@netless/telebox-insider/1.0.0-alpha.36:
-    resolution: {integrity: sha512-wW0/pmagLt1pzV7PfCWJAAsOm4+RED6GEh2mOSTGS/q6lIOV8Qjoe0MizaR3ild7d6rg/kIFj2II3IYF0d+OiA==}
+  /@netless/telebox-insider/1.0.0-alpha.37:
+    resolution: {integrity: sha512-Fazjl/sLaqXPASEvc3ZC+uQSzaCmlmOIpcTwokP//Hn9u4f6C1HvU1veIF1An+s6s44gSYkS9IegYZrGt5cOsg==}
     dependencies:
       '@juggle/resize-observer': 3.3.1
       '@types/shallowequal': 1.1.1

package/src/Register/index.ts

@@ -1,6 +1,7 @@
 import Emittery from "emittery";
 import { loadApp } from "./loader";
 import type { NetlessApp, RegisterEvents, RegisterParams } from "../typings";
+import { removeItem } from "./storage";
 
 export type LoadAppEvent = {
     kind: string;
@@ -11,11 +12,12 @@ export type LoadAppEvent = {
 export type SyncRegisterAppPayload =  { kind: string, src: string, name: string | undefined };
 export type SyncRegisterApp = (payload: SyncRegisterAppPayload) => void;
 
-class AppRegister {
+export class AppRegister {
     public kindEmitters: Map<string, Emittery<RegisterEvents>> = new Map();
     public registered: Map<string, RegisterParams> = new Map();
     public appClassesCache: Map<string, Promise<NetlessApp>> = new Map();
     public appClasses: Map<string, () => Promise<NetlessApp>> = new Map();
+    public downloaded: Map<string, string> = new Map();
 
     private syncRegisterApp: SyncRegisterApp | null = null;
 
@@ -31,32 +33,39 @@ class AppRegister {
         this.appClassesCache.delete(params.kind);
         this.registered.set(params.kind, params);
 
-        const srcOrAppOrFunction = params.src;
+        const paramSrc = params.src;
         let downloadApp: () => Promise<NetlessApp>;
 
-        if (typeof srcOrAppOrFunction === "string") {
+        if (typeof paramSrc === "string") {
             downloadApp = async () => {
-                let appClass = (await loadApp(srcOrAppOrFunction, params.kind, params.name)) as any;
+                const result = await loadApp(paramSrc, params.kind, params.name) as any;
+                if (result.__esModule) {
+                    return result.default;
+                }
+                return result;
+            };
+            if (this.syncRegisterApp) {
+                this.syncRegisterApp({ kind: params.kind, src: paramSrc, name: params.name });
+            }
+        }
+        if (typeof paramSrc === "function") {
+            downloadApp = async () => {
+                let appClass = await paramSrc() as any;
                 if (appClass) {
-                    if (appClass.__esModule) {
+                    if (appClass.__esModule || appClass.default) {
                         appClass = appClass.default;
                     }
                     return appClass;
                 } else {
                     throw new Error(
-                        `[WindowManager]: load remote script failed, ${srcOrAppOrFunction}`
+                        `[WindowManager]: load remote script failed, ${paramSrc}`
                     );
                 }
             };
-            if (this.syncRegisterApp) {
-                this.syncRegisterApp({ kind: params.kind, src: srcOrAppOrFunction, name: params.name });
-            }
-        } else if (typeof srcOrAppOrFunction === "function") {
-            downloadApp = srcOrAppOrFunction;
-        } else {
-            downloadApp = async () => srcOrAppOrFunction;
         }
-
+        if (typeof paramSrc === "object") {
+            downloadApp = async () => paramSrc;
+        }
         this.appClasses.set(params.kind, async () => {
             let app = this.appClassesCache.get(params.kind);
             if (!app) {
@@ -74,10 +83,23 @@ class AppRegister {
         }
     }
 
+    public downloadApp(kind: string) {
+        const src = this.registered.get(kind);
+        if (src && typeof src.src === "string") {
+            return loadApp(src.src, src.kind, src.name)
+        }
+    }
+
+    public async removeDownloaded(kind: string) {
+        await removeItem(kind);
+        this.downloaded.delete(kind);
+    }
+
     public unregister(kind: string) {
         this.appClasses.delete(kind);
         this.appClassesCache.delete(kind);
         this.registered.delete(kind);
+        this.removeDownloaded(kind);
         const kindEmitter = this.kindEmitters.get(kind);
         if (kindEmitter) {
             kindEmitter.clearListeners();

package/src/Register/loader.ts

@@ -1,19 +1,20 @@
 import { callbacks } from "../callback";
 import { getItem, setItem } from "./storage";
 import type { NetlessApp } from "../typings";
+import { appRegister } from ".";
 
 const Prefix = "NetlessApp";
 
 const TIMEOUT = 10000; // 下载 script 10 秒超时
 
-export const getScript = async (url: string): Promise<string> => {
-    const item = await getItem(url);
+export const getScript = async (kind: string, url: string): Promise<string> => {
+    const item = await getItem(kind);
     if (item) {
         return item.sourceCode;
     } else {
         const result = await fetchWithTimeout(url, { timeout: TIMEOUT });
         const text = await result.text();
-        await setItem(url, text);
+        await setItem(kind, url, text);
         return text;
     }
 };
@@ -28,6 +29,15 @@ export const executeScript = (text: string, appName: string): NetlessApp => {
     return result;
 };
 
+const emitSuccess = (kind: string, url: string) => {
+    callbacks.emit("loadApp", { kind, status: "success" });
+    appRegister.downloaded.set(kind, url);
+};
+
+const emitFailed = (kind: string, reason: string) => {
+    callbacks.emit("loadApp", { kind, status: "failed", reason, });
+};
+
 export const loadApp = async (
     url: string,
     key: string,
@@ -36,14 +46,14 @@ export const loadApp = async (
     const appName = name || Prefix + key;
     callbacks.emit("loadApp", { kind: key, status: "start" });
     try {
-        const text = await getScript(url);
+        const text = await getScript(key, url);
         if (!text || text.length === 0) {
-            callbacks.emit("loadApp", { kind: key, status: "failed", reason: "script is empty." });
+            emitFailed(key, "script is empty");
             return;
         }
         try {
             const result = executeScript(text, appName);
-            callbacks.emit("loadApp", { kind: key, status: "success" });
+            emitSuccess(key, url);
             return result;
         } catch (error: any) {
             if (error.message.includes("Can only have one anonymous define call per script file")) {
@@ -54,16 +64,17 @@ export const loadApp = async (
                     delete define.amd;
                 }
                 const result = executeScript(text, appName);
-                callbacks.emit("loadApp", { kind: key, status: "success" });
+                emitSuccess(key, url);
                 return result;
             }
-            callbacks.emit("loadApp", { kind: key, status: "failed", reason: error.message });
+            emitFailed(key, error.message);
         }
     } catch (error: any) {
-        callbacks.emit("loadApp", { kind: key, status: "failed", reason: error.message });
+        emitFailed(key, error.message);
     }
 };
 
+
 async function fetchWithTimeout(resource: string, options: RequestInit & { timeout: number }) {
     const { timeout = 10000 } = options;
 

package/src/Register/storage.ts

@@ -1,3 +1,5 @@
+import type { AppRegister } from "./index";
+
 const DatabaseName = "__WindowManagerAppCache";
 
 let db: IDBDatabase;
@@ -5,21 +7,26 @@ let store: IDBObjectStore;
 
 export type Item = {
     kind: string;
+    url: string;
     sourceCode: string;
 }
 
-export const initDb = async () => {
+export const initDb = async (appRegister: AppRegister) => {
     db = await createDb();
+    const items = await queryAll(db);
+    items.forEach(item => {
+        appRegister.downloaded.set(item.kind, item.url);
+    });
 }
 
-export const setItem = (key: string, val: any) => {
+export const setItem = (kind: string, url: string, val: any) => {
     if (!db) return;
-    return addRecord(db, { kind: key, sourceCode: val })
+    return addRecord(db, { kind, url, sourceCode: val })
 };
 
-export const getItem = async (key: string): Promise<Item | null> => {
+export const getItem = async (kind: string): Promise<Item | null> => {
     if (!db) return null;
-    return await query(db, key);
+    return await query(db, kind);
 };
 
 export const removeItem = (key: string) => {
@@ -27,6 +34,11 @@ export const removeItem = (key: string) => {
     return deleteRecord(db, key);
 };
 
+export const getAll = () => {
+    if (!db) return;
+    return queryAll(db);
+}
+
 function createDb(): Promise<IDBDatabase> {
     return new Promise((resolve, reject) => {
         const request = indexedDB.open(DatabaseName, 2);
@@ -64,6 +76,15 @@ function query<T>(db: IDBDatabase, val: string): Promise<T | null> {
     })
 }
 
+function queryAll(db: IDBDatabase): Promise<Item[]> {
+    return new Promise((resolve, reject) => {
+        const index = db.transaction(["apps"]).objectStore("apps").index("kind");
+        const request = index.getAll();
+        request.onerror = e => reject(e);
+        request.onsuccess = () => resolve(request.result);
+    });
+}
+
 function addRecord(db: IDBDatabase, payload: any): Promise<void> {
     return new Promise((resolve, reject) => {
         const request = db.transaction(["apps"], "readwrite").objectStore("apps").add(payload);

package/src/index.ts

@@ -166,6 +166,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
     public static debug = false;
     public static containerSizeRatio = DEFAULT_CONTAINER_RATIO;
     private static isCreated = false;
+    public static registry = appRegister;
 
     public version = __APP_VERSION__;
     public dependencies = __APP_DEPENDENCIES__;
@@ -198,14 +199,13 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
     public static async mount(params: MountParams): Promise<WindowManager> {
         const room = params.room;
         WindowManager.container = params.container;
-
         const debug = params.debug;
-
         const cursor = params.cursor;
         WindowManager.params = params;
         WindowManager.displayer = params.room;
-        checkVersion();
         let manager: WindowManager | undefined = undefined;
+
+        checkVersion();
         if (isRoom(room)) {
             if (room.phase !== RoomPhase.Connected) {
                 throw new Error("[WindowManager]: Room only Connected can be mount");
@@ -273,7 +273,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
         emitter.emit("onCreated");
         WindowManager.isCreated = true;
         try {
-            await initDb();
+            await initDb(appRegister);
         } catch (error) {
             console.warn("[WindowManager]: indexedDB open failed");
             console.log(error);
@@ -841,7 +841,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
             this.cameraUpdating = 0;
             this.mainView.callbacks.on("onCameraUpdated", this.onCameraUpdated);
             if (nextScale) {
-                this.nextCamera = { ...nextCamera, scale: nextScale };
+                this.nextCamera = nextCamera;
             }
         }
     };

package/src/typings.ts

@@ -72,7 +72,11 @@ export type RegisterEvents<SetupResult = any> = {
 
 export type RegisterParams<AppOptions = any, SetupResult = any, Attributes = any> = {
     kind: string;
-    src: NetlessApp<Attributes, SetupResult> | string | (() => Promise<NetlessApp<Attributes, SetupResult>>);
+    src:
+        | NetlessApp<Attributes, SetupResult>
+        | string
+        | (() => Promise<NetlessApp<Attributes, SetupResult>>)
+        | (() => Promise<{ default: NetlessApp<Attributes, SetupResult> }>);
     appOptions?: AppOptions | (() => AppOptions);
     addHooks?: (emitter: Emittery<RegisterEvents<SetupResult>>) => void;
     /** dynamic load app package name */