@opensumi/ide-webview 2.21.6 → 2.21.7-next-1670485458.0

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@opensumi/ide-webview",
-  "version": "2.21.6",
+  "version": "2.21.7-next-1670485458.0",
   "files": [
-    "lib"
+    "lib",
+    "src"
   ],
   "license": "MIT",
   "main": "lib/index.js",
@@ -16,19 +17,19 @@
     "url": "git@github.com:opensumi/core.git"
   },
   "dependencies": {
-    "@opensumi/ide-core-common": "2.21.6",
-    "@opensumi/ide-core-node": "2.21.6"
+    "@opensumi/ide-core-common": "2.21.7-next-1670485458.0",
+    "@opensumi/ide-core-node": "2.21.7-next-1670485458.0"
   },
   "devDependencies": {
-    "@opensumi/ide-core-browser": "2.21.6",
-    "@opensumi/ide-core-electron-main": "2.21.6",
+    "@opensumi/ide-core-browser": "2.21.7-next-1670485458.0",
+    "@opensumi/ide-core-electron-main": "2.21.7-next-1670485458.0",
     "@opensumi/ide-dev-tool": "^1.3.1",
-    "@opensumi/ide-editor": "2.21.6",
-    "@opensumi/ide-static-resource": "2.21.6",
-    "@opensumi/ide-theme": "2.21.6"
+    "@opensumi/ide-editor": "2.21.7-next-1670485458.0",
+    "@opensumi/ide-static-resource": "2.21.7-next-1670485458.0",
+    "@opensumi/ide-theme": "2.21.7-next-1670485458.0"
   },
   "peerDependencies": {
     "electron": "*"
   },
-  "gitHead": "a34917dfa6d851e067a431ad700812e58e8cc8a8"
+  "gitHead": "8fb92e1814163b5e8c8c2f99ed1bc2fd68de7bd8"
 }

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!;
+  }
+}