plusui-native-core 0.1.3 → 0.1.5

package/Core/Features/WebView/webview.ts

@@ -0,0 +1,510 @@
+/**
+ * WebView API - Web content rendering and JavaScript execution
+ *
+ * Provides comprehensive webview operations including:
+ * - HTML/URL loading
+ * - JavaScript execution and bidirectional communication
+ * - Navigation controls
+ * - Dev tools integration
+ * - CSS injection and customization
+ * - Event handling for page lifecycle
+ */
+
+export interface WebViewConfig {
+  userAgent?: string;
+  devtools?: boolean;
+  contextMenu?: boolean;
+  javascript?: boolean;
+  webSecurity?: boolean;
+  allowFileAccess?: boolean;
+  allowRemoteContent?: boolean;
+  dataPath?: string;
+  cacheSize?: number; // MB
+}
+
+export type WindowId = number;
+
+export interface WebViewAPI {
+  // Initialization
+  initialize(windowId: WindowId, config?: WebViewConfig): Promise<void>;
+
+  // Content loading
+  loadURL(url: string): Promise<void>;
+  loadHTML(html: string, baseURL?: string): Promise<void>;
+  loadFile(filePath: string): Promise<void>;
+
+  // Navigation
+  reload(): Promise<void>;
+  reloadIgnoringCache(): Promise<void>;
+  stop(): Promise<void>;
+  goBack(): Promise<void>;
+  goForward(): Promise<void>;
+  goToOffset(offset: number): Promise<void>;
+  canGoBack(): Promise<boolean>;
+  canGoForward(): Promise<boolean>;
+  clearHistory(): Promise<void>;
+
+  // JavaScript execution
+  executeScript(script: string): Promise<void>;
+  executeScriptWithResult<T = any>(script: string): Promise<T>;
+  executeScriptAsync(script: string): Promise<void>;
+
+  // JavaScript bindings
+  bind(name: string, callback: (...args: any[]) => any): Promise<void>;
+  unbind(name: string): Promise<void>;
+  unbindAll(): Promise<void>;
+
+  // IPC - Message passing
+  postMessage(message: string): Promise<void>;
+  onMessage(callback: (message: string) => void): () => void;
+
+  // Dev tools
+  openDevTools(): Promise<void>;
+  closeDevTools(): Promise<void>;
+  toggleDevTools(): Promise<void>;
+  isDevToolsOpen(): Promise<boolean>;
+
+  // Settings
+  setUserAgent(userAgent: string): Promise<void>;
+  getUserAgent(): Promise<string>;
+  setZoom(factor: number): Promise<void>;
+  getZoom(): Promise<number>;
+  setBackgroundColor(r: number, g: number, b: number, a?: number): Promise<void>;
+  setScrollbarsVisible(visible: boolean): Promise<void>;
+
+  // CSS injection
+  injectCSS(css: string): Promise<void>;
+  removeCSS(identifier: string): Promise<void>;
+
+  // JavaScript injection
+  injectScript(script: string): Promise<void>;
+  injectScriptAtStart(script: string): Promise<void>;
+
+  // Cache and data
+  clearCache(): Promise<void>;
+  clearCookies(): Promise<void>;
+  clearStorage(): Promise<void>;
+  setCookie(name: string, value: string, domain?: string): Promise<void>;
+  getCookie(name: string): Promise<string>;
+
+  // Content control
+  setHTML(html: string): Promise<void>;
+  getHTML(): Promise<string>;
+  setTitle(title: string): Promise<void>;
+  getTitle(): Promise<string>;
+
+  // Print
+  print(): Promise<void>;
+  printToPDF(path: string): Promise<void>;
+
+  // Find in page
+  find(text: string, forward?: boolean, caseSensitive?: boolean): Promise<void>;
+  stopFind(clearSelection?: boolean): Promise<void>;
+
+  // Security
+  setAllowFileAccess(allow: boolean): Promise<void>;
+  setAllowRemoteContent(allow: boolean): Promise<void>;
+  setWebSecurity(enabled: boolean): Promise<void>;
+
+  // Download handling
+  setDownloadPath(path: string): Promise<void>;
+  getDownloadPath(): Promise<string>;
+
+  // Lifecycle events
+  onNavigationStart(callback: (url: string) => boolean): () => void;  // Return false to cancel
+  onNavigationComplete(callback: () => void): () => void;
+  onLoadStart(callback: () => void): () => void;
+  onLoadEnd(callback: () => void): () => void;
+  onLoadError(callback: (error: string, code: number) => void): () => void;
+  onTitleChange(callback: (title: string) => void): () => void;
+  onURLChange(callback: (url: string) => void): () => void;
+  onFullscreenChange(callback: (isFullscreen: boolean) => void): () => void;
+
+  // JavaScript events
+  onConsoleMessage(callback: (message: string, level: number, source: string) => void): () => void;
+  onScriptError(callback: (error: string, code: number) => void): () => void;
+
+  // Download events
+  onDownloadStart(callback: (url: string, filename: string) => void): () => void;
+  onDownloadProgress(callback: (url: string, current: number, total: number) => void): () => void;
+  onDownloadComplete(callback: (path: string) => void): () => void;
+
+  // Permission events
+  onPermissionRequest(callback: (origin: string, permission: string) => boolean): () => void;
+
+  // State queries
+  isLoading(): Promise<boolean>;
+  getURL(): Promise<string>;
+  getLoadProgress(): Promise<number>;  // 0-100
+  canExecuteScripts(): Promise<boolean>;
+}
+
+export class WebView implements WebViewAPI {
+  private invokeFn: (name: string, args?: unknown[]) => Promise<unknown>;
+  private onFn: (event: string, callback: (data: unknown) => void) => () => void;
+  private windowId?: WindowId;
+
+  constructor(
+    invokeFn: (name: string, args?: unknown[]) => Promise<unknown>,
+    onFn: (event: string, callback: (data: unknown) => void) => () => void,
+    windowId?: WindowId
+  ) {
+    this.invokeFn = invokeFn;
+    this.onFn = onFn;
+    this.windowId = windowId;
+  }
+
+  // Initialization
+  async initialize(windowId: WindowId, config?: WebViewConfig): Promise<void> {
+    this.windowId = windowId;
+    await this.invokeFn('webview.initialize', [windowId, config]);
+  }
+
+  // Content loading
+  async loadURL(url: string): Promise<void> {
+    await this.invokeFn('webview.loadURL', [url]);
+  }
+
+  async loadHTML(html: string, baseURL?: string): Promise<void> {
+    if (baseURL) {
+      await this.invokeFn('webview.loadHTML', [html, baseURL]);
+    } else {
+      await this.invokeFn('webview.loadHTML', [html]);
+    }
+  }
+
+  async loadFile(filePath: string): Promise<void> {
+    await this.invokeFn('webview.loadFile', [filePath]);
+  }
+
+  // Navigation
+  async reload(): Promise<void> {
+    await this.invokeFn('webview.reload');
+  }
+
+  async reloadIgnoringCache(): Promise<void> {
+    await this.invokeFn('webview.reloadIgnoringCache');
+  }
+
+  async stop(): Promise<void> {
+    await this.invokeFn('webview.stop');
+  }
+
+  async goBack(): Promise<void> {
+    await this.invokeFn('webview.goBack');
+  }
+
+  async goForward(): Promise<void> {
+    await this.invokeFn('webview.goForward');
+  }
+
+  async goToOffset(offset: number): Promise<void> {
+    await this.invokeFn('webview.goToOffset', [offset]);
+  }
+
+  async canGoBack(): Promise<boolean> {
+    return (await this.invokeFn('webview.canGoBack')) as boolean;
+  }
+
+  async canGoForward(): Promise<boolean> {
+    return (await this.invokeFn('webview.canGoForward')) as boolean;
+  }
+
+  async clearHistory(): Promise<void> {
+    await this.invokeFn('webview.clearHistory');
+  }
+
+  // JavaScript execution
+  async executeScript(script: string): Promise<void> {
+    await this.invokeFn('webview.executeScript', [script]);
+  }
+
+  async executeScriptWithResult<T = any>(script: string): Promise<T> {
+    return (await this.invokeFn('webview.executeScriptWithResult', [script])) as T;
+  }
+
+  async executeScriptAsync(script: string): Promise<void> {
+    await this.invokeFn('webview.executeScriptAsync', [script]);
+  }
+
+  // JavaScript bindings
+  async bind(name: string, callback: (...args: any[]) => any): Promise<void> {
+    // Store the callback locally and expose it via IPC
+    await this.invokeFn('webview.bind', [name]);
+
+    // Handle calls from webview
+    this.onFn(`webview:call:${name}`, (args: any) => {
+      const result = callback(...(Array.isArray(args) ? args : [args]));
+      this.invokeFn('webview.bindResponse', [name, result]);
+    });
+  }
+
+  async unbind(name: string): Promise<void> {
+    await this.invokeFn('webview.unbind', [name]);
+  }
+
+  async unbindAll(): Promise<void> {
+    await this.invokeFn('webview.unbindAll');
+  }
+
+  // IPC
+  async postMessage(message: string): Promise<void> {
+    await this.invokeFn('webview.postMessage', [message]);
+  }
+
+  onMessage(callback: (message: string) => void): () => void {
+    return this.onFn('webview:message', (data) => {
+      callback(data as string);
+    });
+  }
+
+  // Dev tools
+  async openDevTools(): Promise<void> {
+    await this.invokeFn('webview.openDevTools');
+  }
+
+  async closeDevTools(): Promise<void> {
+    await this.invokeFn('webview.closeDevTools');
+  }
+
+  async toggleDevTools(): Promise<void> {
+    await this.invokeFn('webview.toggleDevTools');
+  }
+
+  async isDevToolsOpen(): Promise<boolean> {
+    return (await this.invokeFn('webview.isDevToolsOpen')) as boolean;
+  }
+
+  // Settings
+  async setUserAgent(userAgent: string): Promise<void> {
+    await this.invokeFn('webview.setUserAgent', [userAgent]);
+  }
+
+  async getUserAgent(): Promise<string> {
+    return (await this.invokeFn('webview.getUserAgent')) as string;
+  }
+
+  async setZoom(factor: number): Promise<void> {
+    await this.invokeFn('webview.setZoom', [factor]);
+  }
+
+  async getZoom(): Promise<number> {
+    return (await this.invokeFn('webview.getZoom')) as number;
+  }
+
+  async setBackgroundColor(r: number, g: number, b: number, a: number = 255): Promise<void> {
+    await this.invokeFn('webview.setBackgroundColor', [r, g, b, a]);
+  }
+
+  async setScrollbarsVisible(visible: boolean): Promise<void> {
+    await this.invokeFn('webview.setScrollbarsVisible', [visible]);
+  }
+
+  // CSS injection
+  async injectCSS(css: string): Promise<void> {
+    await this.invokeFn('webview.injectCSS', [css]);
+  }
+
+  async removeCSS(identifier: string): Promise<void> {
+    await this.invokeFn('webview.removeCSS', [identifier]);
+  }
+
+  // JavaScript injection
+  async injectScript(script: string): Promise<void> {
+    await this.invokeFn('webview.injectScript', [script]);
+  }
+
+  async injectScriptAtStart(script: string): Promise<void> {
+    await this.invokeFn('webview.injectScriptAtStart', [script]);
+  }
+
+  // Cache and data
+  async clearCache(): Promise<void> {
+    await this.invokeFn('webview.clearCache');
+  }
+
+  async clearCookies(): Promise<void> {
+    await this.invokeFn('webview.clearCookies');
+  }
+
+  async clearStorage(): Promise<void> {
+    await this.invokeFn('webview.clearStorage');
+  }
+
+  async setCookie(name: string, value: string, domain: string = ''): Promise<void> {
+    await this.invokeFn('webview.setCookie', [name, value, domain]);
+  }
+
+  async getCookie(name: string): Promise<string> {
+    return (await this.invokeFn('webview.getCookie', [name])) as string;
+  }
+
+  // Content control
+  async setHTML(html: string): Promise<void> {
+    await this.invokeFn('webview.setHTML', [html]);
+  }
+
+  async getHTML(): Promise<string> {
+    return (await this.invokeFn('webview.getHTML')) as string;
+  }
+
+  async setTitle(title: string): Promise<void> {
+    await this.invokeFn('webview.setTitle', [title]);
+  }
+
+  async getTitle(): Promise<string> {
+    return (await this.invokeFn('webview.getTitle')) as string;
+  }
+
+  // Print
+  async print(): Promise<void> {
+    await this.invokeFn('webview.print');
+  }
+
+  async printToPDF(path: string): Promise<void> {
+    await this.invokeFn('webview.printToPDF', [path]);
+  }
+
+  // Find in page
+  async find(text: string, forward: boolean = true, caseSensitive: boolean = false): Promise<void> {
+    await this.invokeFn('webview.find', [text, forward, caseSensitive]);
+  }
+
+  async stopFind(clearSelection: boolean = true): Promise<void> {
+    await this.invokeFn('webview.stopFind', [clearSelection]);
+  }
+
+  // Security
+  async setAllowFileAccess(allow: boolean): Promise<void> {
+    await this.invokeFn('webview.setAllowFileAccess', [allow]);
+  }
+
+  async setAllowRemoteContent(allow: boolean): Promise<void> {
+    await this.invokeFn('webview.setAllowRemoteContent', [allow]);
+  }
+
+  async setWebSecurity(enabled: boolean): Promise<void> {
+    await this.invokeFn('webview.setWebSecurity', [enabled]);
+  }
+
+  // Download handling
+  async setDownloadPath(path: string): Promise<void> {
+    await this.invokeFn('webview.setDownloadPath', [path]);
+  }
+
+  async getDownloadPath(): Promise<string> {
+    return (await this.invokeFn('webview.getDownloadPath')) as string;
+  }
+
+  // Lifecycle events
+  onNavigationStart(callback: (url: string) => boolean): () => void {
+    return this.onFn('webview:navigationStart', (data: any) => {
+      const shouldContinue = callback(data.url);
+      this.invokeFn('webview.navigationResponse', [shouldContinue]);
+    });
+  }
+
+  onNavigationComplete(callback: () => void): () => void {
+    return this.onFn('webview:navigationComplete', callback);
+  }
+
+  onLoadStart(callback: () => void): () => void {
+    return this.onFn('webview:loadStart', callback);
+  }
+
+  onLoadEnd(callback: () => void): () => void {
+    return this.onFn('webview:loadEnd', callback);
+  }
+
+  onLoadError(callback: (error: string, code: number) => void): () => void {
+    return this.onFn('webview:loadError', (data: any) => {
+      callback(data.error, data.code);
+    });
+  }
+
+  onTitleChange(callback: (title: string) => void): () => void {
+    return this.onFn('webview:titleChange', (data) => {
+      callback(data as string);
+    });
+  }
+
+  onURLChange(callback: (url: string) => void): () => void {
+    return this.onFn('webview:urlChange', (data) => {
+      callback(data as string);
+    });
+  }
+
+  onFullscreenChange(callback: (isFullscreen: boolean) => void): () => void {
+    return this.onFn('webview:fullscreenChange', (data) => {
+      callback(data as boolean);
+    });
+  }
+
+  // JavaScript events
+  onConsoleMessage(callback: (message: string, level: number, source: string) => void): () => void {
+    return this.onFn('webview:console', (data: any) => {
+      callback(data.message, data.level, data.source);
+    });
+  }
+
+  onScriptError(callback: (error: string, code: number) => void): () => void {
+    return this.onFn('webview:scriptError', (data: any) => {
+      callback(data.error, data.code);
+    });
+  }
+
+  // Download events
+  onDownloadStart(callback: (url: string, filename: string) => void): () => void {
+    return this.onFn('webview:downloadStart', (data: any) => {
+      callback(data.url, data.filename);
+    });
+  }
+
+  onDownloadProgress(callback: (url: string, current: number, total: number) => void): () => void {
+    return this.onFn('webview:downloadProgress', (data: any) => {
+      callback(data.url, data.current, data.total);
+    });
+  }
+
+  onDownloadComplete(callback: (path: string) => void): () => void {
+    return this.onFn('webview:downloadComplete', (data) => {
+      callback(data as string);
+    });
+  }
+
+  // Permission events
+  onPermissionRequest(callback: (origin: string, permission: string) => boolean): () => void {
+    return this.onFn('webview:permissionRequest', (data: any) => {
+      const allowed = callback(data.origin, data.permission);
+      this.invokeFn('webview.permissionResponse', [allowed]);
+    });
+  }
+
+  // State queries
+  async isLoading(): Promise<boolean> {
+    return (await this.invokeFn('webview.isLoading')) as boolean;
+  }
+
+  async getURL(): Promise<string> {
+    return (await this.invokeFn('webview.getURL')) as string;
+  }
+
+  async getLoadProgress(): Promise<number> {
+    return (await this.invokeFn('webview.getLoadProgress')) as number;
+  }
+
+  async canExecuteScripts(): Promise<boolean> {
+    return (await this.invokeFn('webview.canExecuteScripts')) as boolean;
+  }
+}
+
+/**
+ * Factory function to create WebView instance
+ */
+export function createWebView(
+  invokeFn: (name: string, args?: unknown[]) => Promise<unknown>,
+  onFn: (event: string, callback: (data: unknown) => void) => () => void,
+  windowId?: WindowId
+): WebView {
+  return new WebView(invokeFn, onFn, windowId);
+}