@opensumi/ide-webview 2.21.7-rc-1670229502.0 → 2.21.7

package/src/browser/contribution.ts

@@ -1,80 +0,0 @@
-/* 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

@@ -1,207 +0,0 @@
-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

@@ -1,156 +0,0 @@
-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>`;

package/src/browser/iframe-webview.ts

@@ -1,140 +0,0 @@
-import { Injectable, Autowired } from '@opensumi/di';
-import { Disposable, DomListener, getDebugLogger, IDisposable, AppConfig } from '@opensumi/ide-core-browser';
-
-import { AbstractWebviewPanel } from './abstract-webview';
-import { IWebview, IWebviewContentOptions } from './types';
-
-
-@Injectable({ multiple: true })
-export class IFrameWebviewPanel extends AbstractWebviewPanel implements IWebview {
-  private iframe: HTMLIFrameElement;
-
-  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.iframe = document.createElement('iframe');
-    this.iframe.setAttribute('allow', 'autoplay');
-
-    const sandboxRules = new Set(['allow-same-origin', 'allow-scripts']);
-
-    if (options.allowForms) {
-      sandboxRules.add('allow-forms');
-    }
-    this.iframe.setAttribute('sandbox', Array.from(sandboxRules).join(' '));
-    this.iframe.setAttribute('src', `${this.config.webviewEndpoint}/index.html?id=${this.id}`);
-    this.iframe.style.border = 'none';
-    this.iframe.style.width = '100%';
-    this.iframe.style.position = 'absolute';
-    this.iframe.style.height = '100%';
-    this.iframe.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中的位置变动导致了重载。
-          // 此时我们需要重新初始化
-          this.initEvents();
-          this.doUpdateContent();
-        }
-        this._isReady = true;
-        resolve();
-      });
-    });
-    this._needReload = false;
-  }
-
-  getDomNode() {
-    return this.iframe;
-  }
-
-  protected _sendToWebview(channel: string, data: any) {
-    if (!this._isListening) {
-      return;
-    }
-    this._ready
-      .then(() => {
-        if (!this.iframe) {
-          return;
-        }
-        this.iframe.contentWindow!.postMessage(
-          {
-            channel,
-            data,
-          },
-          '*',
-        );
-      })
-      .catch((err) => {
-        getDebugLogger().error(err);
-      });
-  }
-
-  protected _onWebviewMessage(channel: string, listener: (data: any) => any): IDisposable {
-    return this._iframeDisposer!.addDispose(
-      new DomListener(window, 'message', (e) => {
-        if (e.data && e.data.target === this.id && e.data.channel === channel) {
-          if (!this._isListening) {
-            return;
-          }
-          listener(e.data.data);
-        }
-      }),
-    );
-  }
-
-  appendTo(container: HTMLElement) {
-    if (this.iframe) {
-      if (container.style.position === 'static' || !container.style.position) {
-        container.style.position = 'relative';
-      }
-      container.innerHTML = '';
-      container.appendChild(this.iframe);
-      if (this._needReload) {
-        this.init();
-        this.doUpdateContent();
-      }
-    }
-  }
-
-  remove() {
-    if (this.iframe) {
-      this.iframe.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();
-    }
-  }
-}

package/src/browser/index.ts

@@ -1,19 +0,0 @@
-import { Provider, Injectable } from '@opensumi/di';
-import { BrowserModule } from '@opensumi/ide-core-browser';
-
-import { WebviewModuleContribution } from './contribution';
-import { IWebviewService } from './types';
-import { WebviewServiceImpl } from './webview.service';
-export * from './types';
-export { PlainWebview } from './editor-webview';
-
-@Injectable()
-export class WebviewModule extends BrowserModule {
-  providers: Provider[] = [
-    {
-      token: IWebviewService,
-      useClass: WebviewServiceImpl,
-    },
-    WebviewModuleContribution,
-  ];
-}