bunite-core 0.8.1 → 0.10.0

package/package.json

@@ -1,19 +1,20 @@
 {
   "name": "bunite-core",
   "description": "Uniting UI and Bun",
-  "version": "0.8.1",
+  "version": "0.10.0",
   "type": "module",
   "scripts": {
     "setup:cef": "bun ../tools/bunite-dev/scripts/setup-cef.ts",
     "build:native:win": "cmake -S . -B build/win -DBUNITE_TARGET_ARCH=x64 && cmake --build build/win --config Release",
     "build:native:linux": "cmake -S . -B build/linux -DCMAKE_BUILD_TYPE=Release && cmake --build build/linux",
-    "build:preload": "bun build src/preload/runtime.ts --outfile src/preload/runtime.built.js --target browser --minify"
+    "build:preload": "bun build src/preload/runtime.ts --outfile src/preload/runtime.built.js --target browser --minify",
+    "prepublishOnly": "bun run build:preload && rm -f src/preload/tsconfig.tsbuildinfo"
   },
   "exports": {
-    ".": "./src/bun/index.ts",
-    "./bun": "./src/bun/index.ts",
-    "./view": "./src/view/index.ts",
-    "./shared/rpc": "./src/shared/rpc.ts",
+    ".": "./src/host/index.ts",
+    "./rpc": "./src/rpc/index.ts",
+    "./rpc/renderer": "./src/rpc/renderer.ts",
+    "./polyfill": "./src/webview/polyfill.ts",
     "./package.json": "./package.json"
   },
   "files": [

package/src/{bun → host}/core/App.ts

@@ -1,7 +1,6 @@
 import { isAbsolute, join, resolve } from "node:path";
 import { existsSync } from "node:fs";
-import { getBaseDir } from "../../shared/paths";
-import { BuniteEvent } from "../events/event";
+import { getBaseDir } from "../paths";
 import { buniteEventEmitter } from "../events/eventEmitter";
 import {
   getNativeEngineName,
@@ -13,14 +12,15 @@ import {
   setNativeLogLevel,
   toCString,
   type NativeBootstrapOptions
-} from "../proc/native";
-import { attachGlobalIPCResolver, ensureRpcServer } from "./Socket";
+} from "../native";
+import { ensureRpcServer } from "./Socket";
 import { BrowserWindow } from "./BrowserWindow";
-import { getSurfaceIPCHandlers } from "./SurfaceManager";
-import { getWebviewIPCHandlers } from "./SurfaceBrowserIPC";
-import { log, logLevelToInt } from "../../shared/log";
+import { createSurfaceCapImpl } from "./SurfaceManager";
+import "./SurfaceBrowserIPC";
+import { log, logLevelToInt } from "../log";
+import { RuntimeCap, SurfaceCap, IpcError, type ImplOf } from "../../rpc/index";
 
-import type { LogLevel } from "../../shared/log";
+import type { LogLevel } from "../log";
 
 type AppOptions = NativeBootstrapOptions & {
   userDataDir?: string;
@@ -28,15 +28,17 @@ type AppOptions = NativeBootstrapOptions & {
   logLevel?: LogLevel;
 };
 
-export type GlobalIPCHandler = (params: unknown, ctx: { viewId: number }) => unknown | Promise<unknown>;
+let _instance: AppRuntime | null = null;
+export function getAppRuntimeOrThrow(): AppRuntime {
+  if (!_instance) throw new Error("AppRuntime not yet instantiated");
+  return _instance;
+}
 
 function normalizeAppResPath(path: string): string {
   return path.replace(/^\/+/, "").replace(/\/+$/, "");
 }
 
 export class AppRuntime {
-  private stubKeepAliveTimer: ReturnType<typeof setInterval> | null = null;
-  private readonly globalIPCHandlers = new Map<string, GlobalIPCHandler>();
   private exitOnLastWindowClosed = true;
   private quitting = false;
   private pumpActive = false;
@@ -44,7 +46,11 @@ export class AppRuntime {
   readonly ready: Promise<void>;
 
   constructor(options: AppOptions = {}) {
+    if (_instance) throw new Error("AppRuntime already instantiated");
+    _instance = this;
+    ensureRpcServer();
     this.ready = this.bootstrap(options);
+    this.ready.catch(() => { if (_instance === this) _instance = null; });
   }
 
   private async bootstrap(options: AppOptions) {
@@ -82,55 +88,31 @@ export class AppRuntime {
       process.env.BUNITE_USER_DATA_DIR = join(appDataDir, name);
     }
 
-    const runtime = await initNativeRuntime({
-      allowStub: options.allowStub,
+    await initNativeRuntime({
       hideConsole: options.hideConsole,
       popupBlocking: options.popupBlocking,
       engineFlags: options.engineFlags
     });
 
-    if (options.logLevel && runtime.nativeLoaded) {
+    if (options.logLevel) {
       setNativeLogLevel(logLevelToInt(options.logLevel));
     }
 
-    attachGlobalIPCResolver((channel) => this.getGlobalIPCHandler(channel));
-
-    for (const [channel, handler] of getSurfaceIPCHandlers()) {
-      this.globalIPCHandlers.set(channel, handler);
-    }
-    for (const [channel, handler] of getWebviewIPCHandlers()) {
-      this.globalIPCHandlers.set(channel, handler);
-    }
-
     setRouteRequestHandler((requestId, path) => this.handleRouteRequest(requestId, path));
 
     for (const path of this.appresHandlers.keys()) {
       getNativeLibrary()?.symbols.bunite_register_appres_route(toCString(path));
     }
 
-    if (this.exitOnLastWindowClosed && runtime.nativeLoaded) {
+    if (this.exitOnLastWindowClosed) {
       buniteEventEmitter.on("all-windows-closed", () => {
-        if (this.quitting) {
-          return;
-        }
+        if (this.quitting) return;
         queueMicrotask(() => {
-          if (this.quitting) {
-            return;
-          }
-          if (BrowserWindow.getAll().length === 0) {
-            this.quit();
-          }
+          if (this.quitting) return;
+          if (BrowserWindow.getAll().length === 0) this.quit();
         });
       });
     }
-
-    ensureRpcServer();
-    buniteEventEmitter.emitEvent(
-      new BuniteEvent("ready", {
-        usingStub: runtime.usingStub,
-        artifacts: runtime.artifacts
-      })
-    );
   }
 
   on(name: string, handler: (payload: unknown) => void) {
@@ -144,20 +126,11 @@ export class AppRuntime {
   }
 
   run() {
-    const runtime = getNativeRuntimeState();
-    if (!runtime?.nativeLoaded) {
-      if (!this.stubKeepAliveTimer) {
-        log.warn("Running without a native event loop. Keeping the process alive in stub mode.");
-        this.stubKeepAliveTimer = setInterval(() => {}, 60_000);
-      }
-      return;
-    }
-
     const lib = getNativeLibrary();
     lib?.symbols.bunite_run_loop();
 
     if (process.platform === "darwin" || process.platform === "linux") {
-      // AppKit / WebKitGTK share Bun's main thread — step-drive via setImmediate (no blocking loop).
+      // mac/linux: cooperative pump on Bun's main thread (NSApp/GTK first-thread constraint).
       this.pumpActive = true;
       const pump = () => {
         if (!this.pumpActive) return;
@@ -165,16 +138,13 @@ export class AppRuntime {
         setImmediate(pump);
       };
       pump();
-    } else if (!this.stubKeepAliveTimer) {
-      // Engines with a dedicated UI thread (Windows CEF) only need Bun's loop kept alive.
-      this.stubKeepAliveTimer = setInterval(() => {}, 60_000);
     }
+    // Windows: native UI thread is separate. Bun's loop stays alive via the RPC
+    // listening socket started by ensureRpcServer() in the constructor.
   }
 
   quit(code = 0) {
-    if (this.quitting) {
-      return;
-    }
+    if (this.quitting) return;
     this.quitting = true;
 
     const event = buniteEventEmitter.events.app.beforeQuit({});
@@ -184,33 +154,29 @@ export class AppRuntime {
       return;
     }
     this.pumpActive = false;
-    if (this.stubKeepAliveTimer) {
-      clearInterval(this.stubKeepAliveTimer);
-      this.stubKeepAliveTimer = null;
-    }
     getNativeLibrary()?.symbols.bunite_quit();
+    if (_instance === this) _instance = null;
     process.exitCode = code;
     process.exit(code);
   }
 
-  handle(channel: string, handler: GlobalIPCHandler) {
-    if (channel.startsWith("__bunite:")) {
-      throw new Error(`Channel prefix "__bunite:" is reserved: ${channel}`);
-    }
-    if (this.globalIPCHandlers.has(channel)) {
-      throw new Error(`Global IPC handler already registered for: ${channel}`);
-    }
-    this.globalIPCHandlers.set(channel, handler);
-    return () => this.globalIPCHandlers.delete(channel);
-  }
-
-  removeHandler(channel: string) {
-    this.globalIPCHandlers.delete(channel);
-  }
-
-  /** @internal */
-  getGlobalIPCHandler(channel: string): GlobalIPCHandler | undefined {
-    return this.globalIPCHandlers.get(channel);
+  createViewRuntime(viewId: number): ImplOf<typeof RuntimeCap> {
+    const notImpl = (name: string) => {
+      throw new IpcError({ code: "not_found", message: `Runtime.${name}` });
+    };
+    const impl = {
+      window: () => notImpl("window"),
+      dialogs: () => notImpl("dialogs"),
+      clipboard: () => notImpl("clipboard"),
+      shell: () => notImpl("shell"),
+      appName: () => "bunite-app",
+      appVersion: () => this.version,
+      theme: (): "light" | "dark" => "light",
+      themeWatch: () => notImpl("themeWatch"),
+      surface: (_: void, ctx: Parameters<ImplOf<typeof RuntimeCap>["surface"]>[1]) =>
+        ctx.exportCap(SurfaceCap, createSurfaceCapImpl(viewId)),
+    } satisfies ImplOf<typeof RuntimeCap>;
+    return impl;
   }
 
   private readonly appresHandlers = new Map<string, () => string>();
@@ -262,14 +228,12 @@ export class AppRuntime {
   private cachedEngineName: string | null | undefined;
   private cachedEngineVersion: string | null | undefined;
 
-  /** Active engine identifier reported by the native adapter (e.g. `"cef"`, `"wkwebview"`, `"webkitgtk"`). */
   get engineName(): string | null {
     if (this.cachedEngineName !== undefined) return this.cachedEngineName;
     this.cachedEngineName = getNativeEngineName();
     return this.cachedEngineName;
   }
 
-  /** Engine version string reported by the native adapter. Format depends on engine. */
   get engineVersion(): string | null {
     if (this.cachedEngineVersion !== undefined) return this.cachedEngineVersion;
     this.cachedEngineVersion = getNativeEngineVersion();

package/src/{bun → host}/core/BrowserView.ts

@@ -1,28 +1,25 @@
 import { ptr } from "bun:ffi";
-import { buildViewPreloadScript } from "../preload/inline";
-import { log } from "../../shared/log";
+import { buildViewPreloadScript } from "../preloadBundle";
+import { log } from "../log";
 import { buniteEventEmitter } from "../events/eventEmitter";
-import { type RpcPacket, type RpcTransport, type RpcWithTransport } from "../../shared/rpc";
-import { ensureNativeRuntime, getNativeLibrary, toCString, waitForViewReady, cancelWaitForViewReady } from "../proc/native";
-import { attachBrowserViewRegistry, getRpcPort, sendMessageToView } from "./Socket";
+import {
+  createConnection,
+  createFrameTransport,
+  type Connection,
+  type BytesPipe,
+} from "../../rpc/index";
+import { createEncryptedPipe } from "../encryptedPipe";
+import { ensureNativeRuntime, getNativeLibrary, toCString, waitForViewReady, cancelWaitForViewReady } from "../native";
+import { attachBrowserViewRegistry, getRpcPort } from "./Socket";
+import { getAppRuntimeOrThrow } from "./App";
 import { randomBytes } from "node:crypto";
-import { resolveDefaultAppResRoot } from "../../shared/paths";
+import { resolveDefaultAppResRoot } from "../paths";
 import { removeSurfacesForHostView } from "./SurfaceRegistry";
 
-const BrowserViewMap: Record<number, BrowserView<any>> = {};
+const BrowserViewMap: Record<number, BrowserView> = {};
 let nextWebviewId = 1;
 
-function createNativeViewPipe(viewId: number) {
-  let handler: ((packet: RpcPacket) => void) | undefined;
-  const transport: RpcTransport = {
-    send: (packet) => { sendMessageToView(viewId, packet); },
-    registerHandler: (h) => { handler = h; },
-    unregisterHandler: () => { handler = undefined; }
-  };
-  return { transport, receive: (packet: RpcPacket) => handler?.(packet) };
-}
-
-export type BrowserViewOptions<T = undefined> = {
+export type BrowserViewOptions = {
   url: string | null;
   html: string | null;
   preload: string | null;
@@ -35,7 +32,8 @@ export type BrowserViewOptions<T = undefined> = {
     width: number;
     height: number;
   };
-  rpc?: T;
+  /** Setup callback fired when a renderer connection attaches. Use `conn.serve(cap, impl)` or `conn.serveAll(schema, impls)`. */
+  serve?: (conn: Connection) => void;
   windowId: number;
   autoResize: boolean;
   navigationRules: string[] | null;
@@ -49,19 +47,14 @@ const defaultOptions: BrowserViewOptions = {
   appresRoot: null,
   preloadOrigins: undefined,
   partition: null,
-  frame: {
-    x: 0,
-    y: 0,
-    width: 800,
-    height: 600
-  },
+  frame: { x: 0, y: 0, width: 800, height: 600 },
   windowId: 0,
   autoResize: true,
   navigationRules: null,
   sandbox: false
 };
 
-export class BrowserView<T extends RpcWithTransport = RpcWithTransport> {
+export class BrowserView {
   id = nextWebviewId++;
   private nativeAttached = false;
   private _readyPromise: Promise<void>;
@@ -73,20 +66,17 @@ export class BrowserView<T extends RpcWithTransport = RpcWithTransport> {
   preloadOrigins?: string[];
   partition: string | null;
   frame: BrowserViewOptions["frame"];
-  rpc?: T;
-  readonly transport: RpcTransport;
-  private pipe: ReturnType<typeof createNativeViewPipe>;
+  readonly serveSetup?: (conn: Connection) => void;
+  private connection: Connection | null = null;
+  private connectionGeneration = 0;
   autoResize: boolean;
   navigationRules: string[] | null;
   sandbox: boolean;
   secretKey: Uint8Array;
 
-  constructor(options: Partial<BrowserViewOptions<T>>) {
+  constructor(options: Partial<BrowserViewOptions>) {
     ensureNativeRuntime();
 
-    this.pipe = createNativeViewPipe(this.id);
-    this.transport = this.pipe.transport;
-
     this.windowId = options.windowId ?? defaultOptions.windowId;
     this.url = options.url ?? defaultOptions.url;
     this.html = options.html ?? defaultOptions.html;
@@ -95,17 +85,17 @@ export class BrowserView<T extends RpcWithTransport = RpcWithTransport> {
     this.preloadOrigins = options.preloadOrigins ?? defaultOptions.preloadOrigins;
     this.partition = options.partition ?? defaultOptions.partition;
     this.frame = options.frame ?? defaultOptions.frame;
-    this.rpc = options.rpc;
+    this.serveSetup = options.serve;
     this.autoResize = options.autoResize ?? defaultOptions.autoResize;
     this.navigationRules = options.navigationRules ?? defaultOptions.navigationRules;
     this.sandbox = options.sandbox ?? defaultOptions.sandbox;
     this.secretKey = new Uint8Array(randomBytes(32));
 
     if (this.sandbox) {
-      throw new Error("sandboxed BrowserView is not implemented in Bunite Windows Phase 1 yet.");
+      throw new Error("sandboxed BrowserView is not implemented yet.");
     }
     if (this.partition) {
-      log.warn("BrowserView.partition is not implemented in Bunite Windows Phase 1 yet.");
+      log.warn("BrowserView.partition is not implemented yet.");
     }
 
     const preloadScript = buildViewPreloadScript({
@@ -117,8 +107,6 @@ export class BrowserView<T extends RpcWithTransport = RpcWithTransport> {
     });
 
     BrowserViewMap[this.id] = this;
-    this.rpc?.setTransport(this.transport);
-    // Register before native create — view-ready can fire on the UI thread before bunite_view_create returns.
     this._readyPromise = waitForViewReady(this.id);
     this.nativeAttached =
       getNativeLibrary()?.symbols.bunite_view_create(
@@ -139,8 +127,6 @@ export class BrowserView<T extends RpcWithTransport = RpcWithTransport> {
       ) ?? false;
 
     if (this.nativeAttached) {
-      // did-navigate (not will-): nav destroys JS context without disconnectedCallback;
-      // will-navigate fires even when rules deny → would leak surfaces.
       this.on("did-navigate", (event: any) => {
         this.url = event.data?.detail ?? this.url;
         removeSurfacesForHostView(this.id);
@@ -148,7 +134,7 @@ export class BrowserView<T extends RpcWithTransport = RpcWithTransport> {
     } else {
       cancelWaitForViewReady(this.id);
       this._readyPromise = Promise.reject(new Error("Native view creation failed"));
-      this._readyPromise.catch(() => {}); // prevent unhandled rejection
+      this._readyPromise.catch(() => {});
     }
   }
 
@@ -169,19 +155,51 @@ export class BrowserView<T extends RpcWithTransport = RpcWithTransport> {
     return Object.values(BrowserViewMap);
   }
 
-  handleIncomingRpc(packet: RpcPacket) {
-    this.pipe.receive(packet);
+  async attachNewConnection(pipe: BytesPipe): Promise<void> {
+    this.connectionGeneration += 1;
+    const myGen = this.connectionGeneration;
+    if (this.connection) {
+      try { (this.connection as { transport?: { close?(): void } }).transport?.close?.(); } catch { /* swallow */ }
+      this.connection = null;
+    }
+    const encPipe = await createEncryptedPipe(pipe, this.secretKey);
+    if (myGen !== this.connectionGeneration) {
+      try { encPipe.close(); } catch { /* swallow */ }
+      return;
+    }
+    const runtime = getAppRuntimeOrThrow().createViewRuntime(this.id);
+    this.connection = createConnection({
+      transport: createFrameTransport(encPipe),
+      mode: "native",
+      origin: "appres://app.internal",
+      runtime,
+      attestation: {
+        origin: "appres://app.internal",
+        topOrigin: "appres://app.internal",
+        partition: this.partition ?? "default",
+        isAppRes: true,
+        isMainFrame: true,
+        userGesture: false,
+        level: "app-internal",
+      },
+    });
+    this.serveSetup?.(this.connection);
   }
 
-  get rpcPort() {
-    return getRpcPort();
+  detachNewConnection(): void {
+    this.connectionGeneration += 1;
+    if (this.connection) {
+      try { (this.connection as { transport?: { close?(): void } }).transport?.close?.(); } catch { /* swallow */ }
+      this.connection = null;
+    }
   }
 
-  setAnchor(mode: "none" | "fill" | "top" | "below-top", inset = 0) {
-    const modeInt = { none: 0, fill: 1, top: 2, "below-top": 3 }[mode];
-    if (this.nativeAttached) {
-      getNativeLibrary()?.symbols.bunite_view_set_anchor(this.id, modeInt, inset);
-    }
+  get rpcConnection(): Connection | null {
+    return this.connection;
+  }
+
+  get rpcPort() {
+    return getRpcPort();
   }
 
   executeJavaScript(script: string) {
@@ -245,7 +263,6 @@ export class BrowserView<T extends RpcWithTransport = RpcWithTransport> {
     }
   }
 
-  /** Fire-and-forget setBounds — does not block on the UI thread. */
   setBoundsAsync(x: number, y: number, width: number, height: number) {
     this.frame = { x, y, width, height };
     if (this.nativeAttached) {
@@ -297,11 +314,7 @@ export class BrowserView<T extends RpcWithTransport = RpcWithTransport> {
     cancelWaitForViewReady(this.id);
     this.nativeAttached = false;
     for (const eventName of [
-      "will-navigate",
-      "did-navigate",
-      "dom-ready",
-      "new-window-open",
-      "permission-requested"
+      "will-navigate", "did-navigate", "dom-ready", "new-window-open", "permission-requested"
     ]) {
       buniteEventEmitter.removeAllListeners(`${eventName}-${this.id}`);
     }
@@ -309,12 +322,7 @@ export class BrowserView<T extends RpcWithTransport = RpcWithTransport> {
   }
 
   on(
-    name:
-      | "will-navigate"
-      | "did-navigate"
-      | "dom-ready"
-      | "new-window-open"
-      | "permission-requested",
+    name: "will-navigate" | "did-navigate" | "dom-ready" | "new-window-open" | "permission-requested",
     handler: (event: unknown) => void
   ) {
     const specificName = `${name}-${this.id}`;
@@ -324,7 +332,5 @@ export class BrowserView<T extends RpcWithTransport = RpcWithTransport> {
 }
 
 attachBrowserViewRegistry({
-  getById(id) {
-    return BrowserView.getById(id);
-  }
+  getById(id) { return BrowserView.getById(id); }
 });

package/src/{bun → host}/core/BrowserWindow.ts

@@ -1,13 +1,13 @@
 import { dirname, isAbsolute, relative, resolve, sep } from "node:path";
 import { BuniteEvent } from "../events/event";
 import { buniteEventEmitter } from "../events/eventEmitter";
-import { ensureNativeRuntime, getNativeLibrary, toCString } from "../proc/native";
-import { BrowserView, type BrowserViewOptions } from "./BrowserView";
-import type { RpcWithTransport } from "../../shared/rpc";
+import { ensureNativeRuntime, getNativeLibrary, toCString } from "../native";
+import { BrowserView } from "./BrowserView";
+import type { Connection } from "../../rpc/index";
 import { getNextWindowId } from "./windowIds";
-import { getBaseDir, resolveDefaultAppResRoot } from "../../shared/paths";
+import { getBaseDir, resolveDefaultAppResRoot } from "../paths";
 
-export type WindowOptionsType<T = undefined> = {
+export type WindowOptionsType = {
   title: string;
   frame: {
     x: number;
@@ -22,7 +22,8 @@ export type WindowOptionsType<T = undefined> = {
   preload: string | null;
   appresRoot: string | null;
   preloadOrigins?: string[];
-  rpc?: T;
+  /** Setup callback fired when the window's renderer connection attaches. */
+  serve?: (conn: Connection) => void;
   titleBarStyle: "hidden" | "hiddenInset" | "default";
   transparent: boolean;
   hidden?: boolean;
@@ -50,7 +51,7 @@ const defaultOptions: WindowOptionsType = {
   sandbox: false
 };
 
-const BrowserWindowMap: Record<number, BrowserWindow<any>> = {};
+const BrowserWindowMap: Record<number, BrowserWindow> = {};
 
 let lastFocusedWindowId: number | null = null;
 
@@ -58,7 +59,7 @@ export function getLastFocusedWindowId(): number | null {
   return lastFocusedWindowId;
 }
 
-export class BrowserWindow<T extends RpcWithTransport = RpcWithTransport> {
+export class BrowserWindow {
   id = getNextWindowId();
   private nativeAttached = false;
   title: string;
@@ -127,7 +128,7 @@ export class BrowserWindow<T extends RpcWithTransport = RpcWithTransport> {
     buniteEventEmitter.removeAllListeners(`close-requested-${this.id}`);
   };
 
-  constructor(options: Partial<WindowOptionsType<T>> = {}) {
+  constructor(options: Partial<WindowOptionsType> = {}) {
     ensureNativeRuntime();
 
     this.title = options.title ?? defaultOptions.title;
@@ -193,7 +194,7 @@ export class BrowserWindow<T extends RpcWithTransport = RpcWithTransport> {
         width: this.frame.width,
         height: this.frame.height
       },
-      rpc: options.rpc as BrowserViewOptions<T>["rpc"],
+      serve: options.serve,
       windowId: this.id,
       navigationRules: this.navigationRules,
       sandbox: this.sandbox
@@ -202,10 +203,10 @@ export class BrowserWindow<T extends RpcWithTransport = RpcWithTransport> {
     this.webviewId = webview.id;
   }
 
-  get view(): BrowserView<T> {
+  get view(): BrowserView {
     const view = BrowserView.getById(this.webviewId);
     if (!view) throw new Error(`BrowserWindow ${this.id} has no attached view`);
-    return view as BrowserView<T>;
+    return view as BrowserView;
   }
 
   static getById(id: number) {
@@ -216,8 +217,8 @@ export class BrowserWindow<T extends RpcWithTransport = RpcWithTransport> {
     return Object.values(BrowserWindowMap);
   }
 
-  get webview() {
-    return BrowserView.getById(this.webviewId) as BrowserView<T>;
+  get webview(): BrowserView | undefined {
+    return BrowserView.getById(this.webviewId) as BrowserView | undefined;
   }
 
   show() {