@opensumi/ide-webview 2.21.13 → 2.22.0

package/src/browser/abstract-webview.ts

@@ -0,0 +1,231 @@
+import { Autowired, Injectable } from '@opensumi/di';
+import {
+  Event,
+  URI,
+  Disposable,
+  IDisposable,
+  Emitter,
+  IEventBus,
+  MaybeNull,
+  AppConfig,
+} from '@opensumi/ide-core-browser';
+import { StaticResourceService } from '@opensumi/ide-static-resource/lib/browser';
+import { ITheme, IThemeService } from '@opensumi/ide-theme';
+import { ThemeChangedEvent } from '@opensumi/ide-theme/lib/common/event';
+
+import { IWebview, IWebviewContentOptions, IWebviewContentScrollPosition, IWebviewService } from './types';
+
+@Injectable({ multiple: true })
+export abstract class AbstractWebviewPanel extends Disposable implements IWebview {
+  protected _html = '';
+
+  protected _options: IWebviewContentOptions;
+
+  initialScrollProgress: number;
+
+  state: any;
+
+  _onDidFocus: Emitter<void> = new Emitter<void>();
+  onDidFocus: Event<void> = this._onDidFocus.event;
+
+  _onDidBlur: Emitter<void> = new Emitter<void>();
+  onDidBlur: Event<void> = this._onDidFocus.event;
+
+  _onDidClickLink: Emitter<URI> = new Emitter<URI>();
+  onDidClickLink: Event<URI> = this._onDidClickLink.event;
+
+  _onDidScroll: Emitter<IWebviewContentScrollPosition> = new Emitter<IWebviewContentScrollPosition>();
+  onDidScroll: Event<IWebviewContentScrollPosition> = this._onDidScroll.event;
+
+  _onDidUpdateState: Emitter<any> = new Emitter<any>();
+  onDidUpdateState: Event<any> = this._onDidUpdateState.event;
+
+  _onRemove: Emitter<void> = new Emitter<void>();
+  onRemove: Event<void> = this._onRemove.event;
+
+  protected _isListening = true;
+
+  private _focused = false;
+
+  protected _ready: Promise<void>;
+
+  @Autowired(IWebviewService)
+  webviewService: IWebviewService;
+
+  @Autowired(IThemeService)
+  themeService: IThemeService;
+
+  @Autowired(IEventBus)
+  eventBus: IEventBus;
+
+  @Autowired(AppConfig)
+  private readonly appConfig: AppConfig;
+
+  @Autowired(StaticResourceService)
+  staticResourceService: StaticResourceService;
+
+  protected _keybindingDomTarget: HTMLElement | undefined = undefined;
+
+  public setKeybindingDomTarget(target) {
+    this._keybindingDomTarget = target;
+  }
+
+  constructor(public readonly id: string, options: IWebviewContentOptions = {}) {
+    super();
+    this._options = options;
+  }
+
+  init() {
+    this.prepareContainer();
+
+    this.initEvents();
+  }
+
+  async postMessage(message: any): Promise<void> {
+    return this._sendToWebview('message', message);
+  }
+
+  public get options() {
+    return this._options;
+  }
+
+  onMessage(listener: (message: any) => any): IDisposable {
+    return this._onWebviewMessage('onmessage', listener);
+  }
+
+  protected initEvents() {
+    this._onWebviewMessage('did-click-link', (data) => {
+      this._onDidClickLink.fire(new URI(data));
+    });
+
+    this._onWebviewMessage('did-scroll', (data) => {
+      this._onDidScroll.fire(data);
+    });
+
+    this._onWebviewMessage('do-reload', () => {
+      this.doUpdateContent();
+    });
+
+    this._onWebviewMessage('load-resource', () => {
+      // TODO: 资源相关
+    });
+
+    this._onWebviewMessage('load-localhost', () => {
+      // TODO: 好像是消息转发
+    });
+
+    this._onWebviewMessage('did-focus', () => {
+      this.handleFocusChange(true);
+    });
+
+    this._onWebviewMessage('did-blur', () => {
+      this.handleFocusChange(false);
+    });
+
+    this._onWebviewMessage('do-update-state', (state) => {
+      this.state = state;
+      this._onDidUpdateState.fire(state);
+    });
+
+    this._onWebviewMessage('did-keydown', (event) => {
+      // Create a fake KeyboardEvent from the data provided
+      const emulatedKeyboardEvent = new KeyboardEvent('keydown', event);
+      // Force override the target
+      Object.defineProperty(emulatedKeyboardEvent, 'target', {
+        get: () => this._keybindingDomTarget || this.getDomNode(),
+      });
+      // And re-dispatch
+      window.dispatchEvent(emulatedKeyboardEvent);
+    });
+
+    this.updateStyle();
+  }
+
+  protected updateStyle() {
+    this.style(this.themeService.getCurrentThemeSync());
+    this.addDispose(
+      this.eventBus.on(ThemeChangedEvent, (e) => {
+        this.style(e.payload.theme);
+      }),
+    );
+  }
+
+  getContent(): string {
+    return this._html;
+  }
+
+  async setContent(html: string): Promise<void> {
+    this._html = html;
+    await this.doUpdateContent();
+  }
+
+  protected preprocessHtml(html: string): string {
+    if (this.appConfig.isElectronRenderer) {
+      // 将vscode-resource:/User/xxx 转换为 vscode-resource:///User/xxx
+      return html.replace(
+        /(["'])vscode-resource:(\/\/|)([^\s'"]+?)(["'])/gi,
+        (_, startQuote, slash, path, endQuote) => `${startQuote}vscode-resource://${path}${endQuote}`,
+      );
+    }
+    return html.replace(
+      /(["'])vscode-resource:([^\s'"]+?)(["'])/gi,
+      (_, startQuote, path, endQuote) =>
+        `${startQuote}${this.staticResourceService.resolveStaticResource(URI.file(path))}${endQuote}`,
+    );
+  }
+
+  protected doUpdateContent() {
+    return this._sendToWebview('content', {
+      contents: this.preprocessHtml(this._html),
+      options: this._options,
+      state: this.state,
+    });
+  }
+
+  public abstract appendTo(container: HTMLElement);
+
+  protected abstract _sendToWebview(channel: string, data: any);
+
+  protected abstract _onWebviewMessage(channel: string, listener: (data: any) => any): IDisposable;
+
+  updateOptions(options: IWebviewContentOptions): void {
+    this._options = Object.assign(this._options, options);
+    this.doUpdateContent();
+  }
+
+  layout(): void {
+    throw new Error('Method not implemented.');
+  }
+
+  focus(): void {
+    throw new Error('Method not implemented.');
+  }
+
+  reload(): void {
+    throw new Error('Method not implemented.');
+  }
+
+  protected handleFocusChange(isFocused: boolean): void {
+    this._focused = isFocused;
+    if (this._focused) {
+      this._onDidFocus.fire();
+    } else {
+      this._onDidBlur.fire();
+    }
+  }
+
+  private style(theme: ITheme): void {
+    const { styles, activeTheme } = this.webviewService.getWebviewThemeData(theme);
+    this._sendToWebview('styles', { styles, activeTheme });
+  }
+
+  setListenMessages(listening: boolean): void {
+    this._isListening = listening;
+  }
+
+  abstract prepareContainer(): any;
+
+  abstract getDomNode(): MaybeNull<HTMLElement>;
+
+  abstract remove(): void;
+}

package/src/browser/contribution.ts

@@ -0,0 +1,80 @@
+/* istanbul ignore file */
+import { Autowired } from '@opensumi/di';
+import { Domain, URI, CommandContribution, CommandRegistry, AppConfig } from '@opensumi/ide-core-browser';
+import { localize } from '@opensumi/ide-core-common';
+import { ResourceService, IResource } from '@opensumi/ide-editor';
+import { BrowserEditorContribution, EditorComponentRegistry } from '@opensumi/ide-editor/lib/browser';
+
+import { EDITOR_WEBVIEW_SCHEME, IWebviewService, IEditorWebviewMetaData, isWebview } from './types';
+import { WebviewServiceImpl } from './webview.service';
+
+const WEBVIEW_DEVTOOLS_COMMAND = {
+  id: 'workbench.action.webview.openDeveloperTools',
+  label: localize('openToolsLabel', 'Open Webview Developer Tools'),
+};
+
+@Domain(BrowserEditorContribution, CommandContribution)
+export class WebviewModuleContribution implements BrowserEditorContribution, CommandContribution {
+  @Autowired(IWebviewService)
+  webviewService: WebviewServiceImpl;
+
+  @Autowired(EditorComponentRegistry)
+  editorComponentRegistry: EditorComponentRegistry;
+
+  @Autowired(AppConfig)
+  private readonly appConfig: AppConfig;
+
+  registerResource(resourceService: ResourceService) {
+    resourceService.registerResourceProvider({
+      scheme: EDITOR_WEBVIEW_SCHEME,
+      provideResource: async (uri: URI): Promise<IResource<IEditorWebviewMetaData>> => {
+        const existingComponent = this.webviewService.editorWebviewComponents.get(uri.path.toString());
+        if (existingComponent) {
+          return existingComponent.resource;
+        } else {
+          // try revive, 如果无法恢复，会抛错
+          await this.webviewService.tryRestoredWebviewComponent(uri.path.toString());
+          return this.webviewService.editorWebviewComponents.get(uri.path.toString())!.resource;
+        }
+      },
+      shouldCloseResource: (resource: IResource<IEditorWebviewMetaData>, openedResources: IResource[][]) => {
+        let count = 0;
+        for (const resources of openedResources) {
+          for (const r of resources) {
+            if (r.uri.scheme === EDITOR_WEBVIEW_SCHEME && r.uri.toString() === resource.uri.toString()) {
+              count++;
+            }
+            if (count > 1) {
+              return true;
+            }
+          }
+        }
+        const component = this.webviewService.editorWebviewComponents.get(resource.uri.path.toString());
+        if (component?.webview && isWebview(component.webview)) {
+          // 只对类 vscode webview 进行 dispose,
+          // loadUrl 的 plainWebview 必须手动 dispose
+          this.webviewService.editorWebviewComponents.get(resource.uri.path.toString())!.clear();
+        }
+
+        return true;
+      },
+    });
+  }
+
+  registerCommands(commandRegistry: CommandRegistry) {
+    commandRegistry.registerCommand(WEBVIEW_DEVTOOLS_COMMAND, {
+      execute: () => {
+        const elements = document.querySelectorAll<Electron.WebviewTag>('webview');
+        // eslint-disable-next-line @typescript-eslint/prefer-for-of
+        for (let i = 0; i < elements.length; i += 1) {
+          try {
+            elements[i].openDevTools();
+          } catch (e) {
+            // noop
+          }
+        }
+      },
+      isEnabled: () => this.appConfig.isElectronRenderer,
+    });
+  }
+}

package/src/browser/editor-webview.tsx

@@ -0,0 +1,207 @@
+import React from 'react';
+
+import { Disposable, DomListener, useInjectable } from '@opensumi/ide-core-browser';
+import { ReactEditorComponent } from '@opensumi/ide-editor/lib/browser';
+
+import { IWebview, IPlainWebview, IEditorWebviewMetaData, IWebviewService, isWebview } from './types';
+import { WebviewServiceImpl } from './webview.service';
+
+declare const ResizeObserver: any;
+declare const MutationObserver: any;
+
+export const EditorWebviewComponentView: ReactEditorComponent<IEditorWebviewMetaData> = ({ resource }) => {
+  const webviewService = useInjectable(IWebviewService) as WebviewServiceImpl;
+  const webview = webviewService.editorWebviewComponents.get(resource.metadata!.id)?.webview;
+  let container: HTMLDivElement | null = null;
+
+  React.useEffect(() => {
+    if (webview && container) {
+      const mounter = new WebviewMounter(
+        webview,
+        container,
+        document.getElementById('workbench-editor')!,
+        document.getElementById('workbench-editor')!,
+      );
+      webview.onRemove(() => {
+        mounter.dispose();
+      });
+      return () => {
+        webview.remove();
+      };
+    }
+  });
+
+  return (
+    <div
+      style={{ height: '100%', width: '100%', position: 'relative' }}
+      className='editor-webview-webview-component'
+      ref={(el) => (container = el)}
+    ></div>
+  );
+};
+
+/**
+ * 同一个ID创建的webview会保存在内存以便重复使用，不要使用这个组件进行大量不同webview的创建
+ */
+export const PlainWebview: React.ComponentType<{ id: string; renderRoot?: HTMLElement; appendToChild?: boolean }> = ({
+  id,
+  renderRoot = document.body,
+  appendToChild,
+}) => {
+  let container: HTMLDivElement | null = null;
+  const webviewService = useInjectable(IWebviewService) as IWebviewService;
+
+  React.useEffect(() => {
+    const component = webviewService.getOrCreatePlainWebviewComponent(id);
+    if (component && container) {
+      if (appendToChild) {
+        component.webview.appendTo(container);
+      } else {
+        const mounter = new WebviewMounter(
+          component.webview,
+          container,
+          document.getElementById('workbench-editor')!,
+          renderRoot,
+        );
+        component.webview.onRemove(() => {
+          mounter.dispose();
+        });
+      }
+
+      return () => {
+        component.webview.remove();
+      };
+    }
+  }, []);
+
+  return <div style={{ height: '100%', width: '100%', position: 'relative' }} ref={(el) => (container = el)}></div>;
+};
+
+// 将iframe挂载在一个固定的位置，以overlay的形式覆盖在container中，
+// 防止它在DOM树改变时被重载
+export class WebviewMounter extends Disposable {
+  private mounting: number;
+
+  private _container: HTMLElement | null;
+
+  constructor(
+    private webview: IWebview | IPlainWebview,
+    private container: HTMLElement,
+    mutationRoot: HTMLElement,
+    private renderRoot: HTMLElement = document.body,
+  ) {
+    super();
+    if (!this.webview.getDomNode()) {
+      return;
+    }
+    this.webview.appendTo(this.getWebviewRealContainer());
+    if (isWebview(this.webview)) {
+      this.webview.setKeybindingDomTarget(container);
+    }
+    const resizeObserver = new ResizeObserver(this.doMount.bind(this));
+    const mutationObserver = new MutationObserver((mutations) => {
+      const ancestors: Set<HTMLElement> = new Set();
+      let ancestor: HTMLElement | null = this.container;
+      while (ancestor && ancestor !== mutationRoot) {
+        ancestors.add(ancestor);
+        ancestor = ancestor.parentElement;
+      }
+      for (const { addedNodes, removedNodes } of mutations) {
+        for (const node of addedNodes) {
+          if (ancestors.has(node)) {
+            this.doMount();
+            return;
+          }
+        }
+        for (const node of removedNodes) {
+          if (ancestors.has(node)) {
+            this.doMount();
+            return;
+          }
+        }
+      }
+    });
+    resizeObserver.observe(container);
+    mutationObserver.observe(mutationRoot, { childList: true, subtree: true });
+
+    this.doMount();
+
+    this.addDispose({
+      dispose: () => {
+        if (this._container) {
+          this._container.remove();
+          this._container = null;
+          this.webview = null as any;
+          this.container = null as any;
+        }
+        resizeObserver.disconnect();
+        mutationObserver.disconnect();
+      },
+    });
+
+    this.addDispose(
+      new DomListener(window, 'resize', () => {
+        this.doMount();
+      }),
+    );
+
+    // 监听滚动
+    let parent = container.parentElement;
+    while (parent) {
+      this.addDispose(
+        new DomListener(parent, 'scroll', () => {
+          this.doMount();
+        }),
+      );
+      parent = parent.parentElement;
+    }
+  }
+
+  doMount() {
+    if (this.mounting) {
+      window.cancelAnimationFrame(this.mounting);
+    }
+    this.mounting = window.requestAnimationFrame(() => {
+      if (!this.webview.getDomNode()) {
+        return;
+      }
+      const rect = this.container.getBoundingClientRect();
+      if (rect.height === 0 || rect.width === 0) {
+        this.webview.getDomNode()!.style.display = 'none';
+        if (isWebview(this.webview) && !this.webview.options.longLive) {
+          this.webview.setListenMessages(false);
+        }
+      } else {
+        this.webview.getDomNode()!.style.display = '';
+        if (isWebview(this.webview)) {
+          this.webview.setListenMessages(true);
+        }
+      }
+      const renderRootRects = this.renderRoot.getBoundingClientRect();
+      this.webview.getDomNode()!.style.top = rect.top - renderRootRects.top + 'px';
+      this.webview.getDomNode()!.style.left = rect.left - renderRootRects.left + 'px';
+      this.webview.getDomNode()!.style.height = rect.height + 'px';
+      this.webview.getDomNode()!.style.width = rect.width + 'px';
+      this.mounting = 0;
+    });
+  }
+
+  getWebviewRealContainer() {
+    if (this._container) {
+      return this._container;
+    }
+    let mountContainer = this.renderRoot.querySelector(':scope > div[data-webview-container=true]');
+    if (!mountContainer) {
+      const container = document.createElement('div');
+      container.style.zIndex = '2';
+      container.style.position = 'absolute';
+      container.setAttribute('data-webview-container', 'true');
+      container.style.top = '0';
+      this.renderRoot.appendChild(container);
+      mountContainer = container;
+    }
+    this._container = document.createElement('div');
+    mountContainer!.appendChild(this._container);
+    return this._container!;
+  }
+}

package/src/browser/electron-webview-webview.ts

@@ -0,0 +1,156 @@
+import { Injectable, Autowired } from '@opensumi/di';
+import {
+  Disposable,
+  DomListener,
+  getDebugLogger,
+  IDisposable,
+  AppConfig,
+  electronEnv,
+} from '@opensumi/ide-core-browser';
+
+import { WebviewScheme } from '../common';
+
+import { AbstractWebviewPanel } from './abstract-webview';
+import { IWebview, IWebviewContentOptions } from './types';
+
+@Injectable({ multiple: true })
+export class ElectronWebviewWebviewPanel extends AbstractWebviewPanel implements IWebview {
+  private webview: Electron.WebviewTag;
+
+  private _needReload = false;
+
+  private _iframeDisposer: Disposable | null = new Disposable();
+
+  private _isReady: boolean;
+
+  @Autowired(AppConfig)
+  config: AppConfig;
+
+  constructor(public readonly id: string, options: IWebviewContentOptions = {}) {
+    super(id, options);
+
+    this.webview = document.createElement('webview');
+    this.webview.src = `${WebviewScheme}://index.html`;
+    this.webview.preload = electronEnv.webviewPreload;
+    this.webview.style.border = 'none';
+    this.webview.style.width = '100%';
+    this.webview.style.position = 'absolute';
+    this.webview.style.height = '100%';
+    this.webview.style.zIndex = '2';
+    super.init();
+  }
+
+  prepareContainer() {
+    this.clear();
+    this._iframeDisposer = new Disposable();
+    this._ready = new Promise<void>((resolve) => {
+      // tslint:disable-next-line: no-unused-variable
+      const disposer = this._onWebviewMessage('webview-ready', () => {
+        if (this._isReady) {
+          // 这种情况一般是由于iframe在dom中的位置变动导致了重载。
+          // 此时我们需要重新初始化
+          // electronWebview不需要重新监听事件
+          this.updateStyle();
+          this.doUpdateContent();
+        }
+        this._isReady = true;
+        resolve();
+      });
+    });
+    this._needReload = false;
+  }
+
+  getDomNode() {
+    return this.webview;
+  }
+
+  protected _sendToWebview(channel: string, data: any) {
+    if (!this._isListening) {
+      return;
+    }
+    this._ready
+      .then(() => {
+        if (!this.webview) {
+          return;
+        }
+        this.webview.send(channel, data);
+      })
+      .catch((err) => {
+        getDebugLogger().error(err);
+      });
+  }
+
+  protected _onWebviewMessage(channel: string, listener: (data: any) => any): IDisposable {
+    return this._iframeDisposer!.addDispose(
+      new DomListener(this.webview, 'ipc-message', (e) => {
+        if (!this.webview) {
+          return;
+        }
+        if (e.channel === channel) {
+          if (!this._isListening) {
+            return;
+          }
+          listener(e.args[0]);
+        }
+      }),
+    );
+  }
+
+  appendTo(container: HTMLElement) {
+    if (this.webview) {
+      if (container.style.position === 'static' || !container.style.position) {
+        container.style.position = 'relative';
+      }
+      container.innerHTML = '';
+      container.appendChild(this.webview);
+      if (this._needReload) {
+        this.init();
+        this.doUpdateContent();
+      }
+    }
+  }
+
+  remove() {
+    if (this.webview) {
+      this.webview.remove();
+      this._onRemove.fire();
+      // remove 只是视图被销毁，但是html，state等内容保留，因此这里之前是改坏了
+      // this.dispose();
+      this.clear();
+      this._needReload = true;
+    }
+  }
+
+  clear() {
+    if (this._iframeDisposer) {
+      this._iframeDisposer.dispose();
+      this._iframeDisposer = null;
+    }
+    this._isReady = false;
+  }
+
+  dispose() {
+    super.dispose();
+    if (this._iframeDisposer) {
+      this._iframeDisposer.dispose();
+    }
+  }
+}
+// tslint:disable-next-line: no-unused-variable
+const WebviewHTMLStr = `<!DOCTYPE html>
+<html lang="en" style="width: 100%; height: 100%;">
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="Content-Security-Policy"
+    content="default-src 'self'; script-src 'self'; frame-src 'self'; style-src 'unsafe-inline'; worker-src 'self'; img-src * data: ;  " />
+
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Webview Panel Container</title>
+</head>
+
+<body style="margin: 0; overflow: hidden; width: 100%; height: 100%">
+</body>
+
+</html>`;