@opensumi/ide-core-browser 2.21.13 → 2.22.0

package/src/react-providers/slot.tsx

@@ -0,0 +1,242 @@
+import React from 'react';
+
+import { Button } from '@opensumi/ide-components';
+import { getDebugLogger, localize } from '@opensumi/ide-core-common';
+
+import { LayoutConfig } from '../bootstrap';
+import { IClientApp } from '../browser-module';
+import { ComponentRegistry, ComponentRegistryInfo } from '../layout/layout.interface';
+import { useInjectable } from '../react-hooks';
+
+import { ConfigContext } from './config-provider';
+import styles from './slot.module.less';
+
+const logger = getDebugLogger();
+export type SlotLocation = string;
+export const SlotLocation = {
+  top: 'top',
+  left: 'left',
+  right: 'right',
+  main: 'main',
+  statusBar: 'statusBar',
+  bottom: 'bottom',
+  extra: 'extra',
+  float: 'float',
+  action: 'action',
+  // @deprecated ->
+  bottomBar: 'bottomBar',
+  bottomPanel: 'bottomPanel',
+  leftBar: 'leftBar',
+  leftPanel: 'leftPanel',
+  rightBar: 'rightBar',
+  rightPanel: 'rightPanel',
+  // <- @deprecated
+};
+
+export function getSlotLocation(moduleName: string, layoutConfig: LayoutConfig) {
+  for (const location of Object.keys(layoutConfig)) {
+    if (layoutConfig[location].modules && layoutConfig[location].modules.indexOf(moduleName) > -1) {
+      return location;
+    }
+  }
+  getDebugLogger().warn(`没有找到${moduleName}所对应的位置！`);
+  return '';
+}
+
+export enum TabbarContextKeys {
+  activeViewlet = 'activeViewlet',
+  activePanel = 'activePanel',
+  activeExtendViewlet = 'activeExtendViewlet',
+}
+
+export function getTabbarCtxKey(location: string): TabbarContextKeys {
+  const standardTabbarCtxKeys = {
+    [SlotLocation.left]: TabbarContextKeys.activeViewlet,
+    [SlotLocation.right]: TabbarContextKeys.activeExtendViewlet,
+    [SlotLocation.bottom]: TabbarContextKeys.activePanel,
+  };
+
+  return standardTabbarCtxKeys[location] || 'activeExtendViewlet';
+}
+
+export class ErrorBoundary extends React.Component {
+  state = { error: null, errorInfo: null };
+
+  componentDidCatch(error, errorInfo) {
+    this.setState({
+      error,
+      errorInfo,
+    });
+    setTimeout(() => {
+      throw error; // 让上层错误抓取能捕获这个错误
+    });
+    logger.error(errorInfo);
+  }
+
+  update() {
+    this.setState({ error: null, errorInfo: null });
+  }
+
+  render() {
+    if (this.state.errorInfo) {
+      return (
+        <div className={styles.error_message}>
+          <h2 className={styles.title}>{localize('view.component.renderedError')}</h2>
+          <details className={styles.detial}>
+            <div className={styles.label}>{this.state.error && (this.state.error as any).toString()}</div>
+            <div className={styles.message}>{(this.state.errorInfo as any).componentStack}</div>
+          </details>
+          <Button onClick={() => this.update()}>{localize('view.component.tryAgain')}</Button>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}
+
+export const allSlot: { slot: string; dom: HTMLElement }[] = [];
+
+export const SlotDecorator: React.FC<{ slot: string; backgroundColor?: string }> = ({ slot, ...props }) => {
+  const ref = React.useRef<HTMLElement>();
+  React.useEffect(() => {
+    if (ref.current) {
+      allSlot.push({ slot, dom: ref.current });
+    }
+  }, [ref]);
+  return (
+    <div ref={(ele) => (ref.current = ele!)} className='resize-wrapper'>
+      {props.children}
+    </div>
+  );
+};
+
+export interface RendererProps {
+  components: ComponentRegistryInfo[];
+}
+export type Renderer = React.ComponentType<RendererProps>;
+
+export class SlotRendererRegistry {
+  static DefaultRenderer({ components }: RendererProps) {
+    return (
+      components && (
+        <ErrorBoundary>
+          {components.map((componentInfo, index: number) => {
+            // 默认的只渲染一个
+            const Component = componentInfo.views[0].component!;
+            return (
+              <Component
+                {...(componentInfo.options && componentInfo.options.initialProps)}
+                key={`${Component.name}-${index}`}
+              />
+            );
+          })}
+        </ErrorBoundary>
+      )
+    );
+  }
+
+  protected tabbarLocation = new Set<string>();
+
+  protected rendererRegistry: Map<string, Renderer> = new Map();
+
+  registerSlotRenderer(slot: string, renderer: Renderer) {
+    this.rendererRegistry.set(slot, renderer);
+  }
+
+  getSlotRenderer(slot: string): Renderer {
+    return this.rendererRegistry.get(slot) || SlotRendererRegistry.DefaultRenderer;
+  }
+
+  addTabbar(slot: string) {
+    if (!this.tabbarLocation.has(slot)) {
+      this.tabbarLocation.add(slot);
+    }
+  }
+
+  isTabbar(slot: string) {
+    return this.tabbarLocation.has(slot);
+  }
+}
+
+export const slotRendererRegistry = new SlotRendererRegistry();
+
+export interface SlotProps {
+  slot: string;
+  /**
+   * slot 默认的背景色
+   */
+  backgroundColor?: string;
+  isTabbar?: boolean;
+  [key: string]: any;
+}
+
+export function SlotRenderer({ slot, isTabbar, ...props }: SlotProps) {
+  const componentRegistry = useInjectable<ComponentRegistry>(ComponentRegistry);
+  const appConfig = React.useContext(ConfigContext);
+  const clientApp = useInjectable<IClientApp>(IClientApp);
+  const componentKeys = appConfig.layoutConfig[slot]?.modules ?? [];
+  if (isTabbar) {
+    slotRendererRegistry.addTabbar(slot);
+  }
+  if (!componentKeys || !componentKeys.length) {
+    getDebugLogger().warn(`No ${slot} view declared by location.`);
+  }
+  const [componentInfos, setInfos] = React.useState<ComponentRegistryInfo[]>([]);
+  const updateComponentInfos = React.useCallback(() => {
+    const infos: ComponentRegistryInfo[] = [];
+    componentKeys.forEach((token) => {
+      const info = componentRegistry.getComponentRegistryInfo(token);
+      if (!info) {
+        getDebugLogger().warn(`${token} view isn't registered, please check.`);
+      } else {
+        infos.push(info);
+      }
+    });
+    setInfos(infos);
+  }, []);
+  React.useEffect(() => {
+    // 对于嵌套在模块视图的SlotRenderer，渲染时应用已启动
+    clientApp.appInitialized.promise.then(updateComponentInfos);
+  }, []);
+
+  const Renderer = slotRendererRegistry.getSlotRenderer(slot);
+  return (
+    <ErrorBoundary>
+      <SlotDecorator slot={slot} backgroundColor={props.backgroundColor}>
+        <Renderer components={componentInfos} {...props} />
+      </SlotDecorator>
+    </ErrorBoundary>
+  );
+}
+
+export interface SlotRendererContribution {
+  registerRenderer(registry: SlotRendererRegistry): void;
+}
+export const SlotRendererContribution = Symbol('SlotRendererContribution');
+
+export interface SlotRendererProps {
+  Component: React.ComponentType<any> | React.ComponentType<any>[];
+  initialProps?: object;
+}
+// @deprecated
+export function ComponentRenderer({ Component, initialProps }: SlotRendererProps) {
+  if (Array.isArray(Component)) {
+    return (
+      Component && (
+        <ErrorBoundary>
+          {Component.map((Component, index: number) => (
+            <Component {...(initialProps || {})} key={`${Component.name}-${index}`} />
+          ))}
+        </ErrorBoundary>
+      )
+    );
+  } else {
+    return (
+      Component && (
+        <ErrorBoundary>
+          <Component {...(initialProps || {})} />
+        </ErrorBoundary>
+      )
+    );
+  }
+}

package/src/services/clipboard.service.ts

@@ -0,0 +1,92 @@
+import { Autowired, Injectable } from '@opensumi/di';
+import { IClipboardService, CLIPBOARD_FILE_TOKEN } from '@opensumi/ide-core-common';
+import { URI } from '@opensumi/ide-core-common';
+
+import { ILogger } from '../logger';
+
+import { GlobalBrowserStorageService } from './storage-service';
+
+export { CLIPBOARD_FILE_TOKEN, IClipboardService };
+
+@Injectable()
+export class BrowserClipboardService implements IClipboardService {
+  @Autowired(ILogger)
+  private readonly logger: ILogger;
+
+  @Autowired(GlobalBrowserStorageService)
+  private readonly browserStorage: GlobalBrowserStorageService;
+
+  async writeText(text: string): Promise<void> {
+    try {
+      // 优先使用 clipboard 设置
+      // clipboard 在非 https 下会报错
+      return await navigator.clipboard.writeText(text);
+    } catch (error) {
+      this.logger.error(error);
+    }
+
+    // Fallback to textarea and execCommand solution
+    const activeElement = document.activeElement;
+
+    const textArea = document.createElement('textarea');
+    textArea.setAttribute('aria-hidden', 'true');
+    document.body.appendChild(textArea);
+    textArea.style.height = '1px';
+    textArea.style.width = '1px';
+    textArea.style.position = 'absolute';
+
+    textArea.value = text;
+    textArea.focus();
+    textArea.select();
+
+    document.execCommand('copy');
+
+    if (activeElement instanceof HTMLElement) {
+      activeElement.focus();
+    }
+
+    document.body.removeChild(textArea);
+
+    return;
+  }
+  async readText(): Promise<string> {
+    try {
+      if (!navigator.clipboard) {
+        throw new Error('The current environment does not support the `clipboard` API');
+      }
+      return await navigator.clipboard.readText();
+    } catch (error) {
+      this.logger.error(error);
+      return '';
+    }
+  }
+  async writeResources(resources: URI[], field = CLIPBOARD_FILE_TOKEN): Promise<void> {
+    this.browserStorage.setData(
+      field,
+      resources.filter((uri) => Boolean(uri)).map((uri) => uri.toString()),
+    );
+  }
+
+  async readResources(field = CLIPBOARD_FILE_TOKEN): Promise<URI[]> {
+    const localStorgeUriList = this.browserStorage.getData(field);
+    if (
+      !Array.isArray(localStorgeUriList) ||
+      !localStorgeUriList.length ||
+      !localStorgeUriList.every((str) => typeof str === 'string' && URI.isUriString(str))
+    ) {
+      return [];
+    }
+    return localStorgeUriList.map((str) => URI.parse(str));
+  }
+  async hasResources(field?: string | undefined): Promise<boolean> {
+    const localStorgeUriList = this.browserStorage.getData(field ?? CLIPBOARD_FILE_TOKEN) ?? '';
+    if (
+      !Array.isArray(localStorgeUriList) ||
+      !localStorgeUriList.length ||
+      !localStorgeUriList.every((str) => typeof str === 'string' && URI.isUriString(str))
+    ) {
+      return false;
+    }
+    return true;
+  }
+}

package/src/services/credentials-service.ts

@@ -0,0 +1,91 @@
+import { Injectable, Autowired } from '@opensumi/di';
+import {
+  Emitter,
+  ICredentialsChangeEvent,
+  INativeCredentialService,
+  KeytarServicePath,
+} from '@opensumi/ide-core-common';
+import { Event } from '@opensumi/ide-core-common';
+
+export const ICredentialsService = Symbol('ICredentialsService');
+
+export interface ICredentialsProvider {
+  getPassword(service: string, account: string): Promise<string | null>;
+  setPassword(service: string, account: string, password: string): Promise<void>;
+  deletePassword(service: string, account: string): Promise<boolean>;
+  findPassword(service: string): Promise<string | null>;
+  findCredentials(service: string): Promise<Array<{ account: string; password: string }>>;
+}
+
+export interface ICredentialsService extends ICredentialsProvider {
+  readonly onDidChangePassword: Event<ICredentialsChangeEvent>;
+}
+
+export interface CredentialsChangeEvent {
+  service: string;
+  account: string;
+}
+
+@Injectable()
+export class CredentialsService implements ICredentialsService {
+  private onDidChangePasswordEmitter = new Emitter<CredentialsChangeEvent>();
+  readonly onDidChangePassword = this.onDidChangePasswordEmitter.event;
+
+  private credentialsProvider: ICredentialsProvider;
+
+  @Autowired(KeytarServicePath)
+  private readonly keytarService: INativeCredentialService;
+
+  constructor() {
+    this.credentialsProvider = new KeytarCredentialsProvider(this.keytarService);
+  }
+
+  async getPassword(service: string, account: string) {
+    return this.credentialsProvider.getPassword(service, account);
+  }
+
+  async setPassword(service: string, account: string, password: string) {
+    await this.credentialsProvider.setPassword(service, account, password);
+
+    this.onDidChangePasswordEmitter.fire({ service, account });
+  }
+
+  async deletePassword(service: string, account: string) {
+    const didDelete = await this.credentialsProvider.deletePassword(service, account);
+    this.onDidChangePasswordEmitter.fire({ service, account });
+
+    return didDelete;
+  }
+
+  async findPassword(service: string) {
+    return await this.credentialsProvider.findPassword(service);
+  }
+
+  async findCredentials(service: string) {
+    return await this.credentialsProvider.findCredentials(service);
+  }
+}
+
+class KeytarCredentialsProvider implements ICredentialsProvider {
+  constructor(private readonly keytarService: INativeCredentialService) {}
+
+  deletePassword(service: string, account: string): Promise<boolean> {
+    return this.keytarService.deletePassword(service, account);
+  }
+
+  findCredentials(service: string): Promise<Array<{ account: string; password: string }>> {
+    return this.keytarService.findCredentials(service);
+  }
+
+  async findPassword(service: string) {
+    return await this.keytarService.findPassword(service);
+  }
+
+  async getPassword(service: string, account: string) {
+    return await this.keytarService.getPassword(service, account);
+  }
+
+  async setPassword(service: string, account: string, password: string) {
+    return await this.keytarService.setPassword(service, account, password);
+  }
+}

package/src/services/crypto-service.ts

@@ -0,0 +1,23 @@
+import { Injectable, Autowired } from '@opensumi/di';
+import { INativeCryptoService, CryptoServicePath } from '@opensumi/ide-core-common';
+
+export const ICryptoService = Symbol('ICryptoService');
+
+export interface ICryptoService {
+  decrypt(hash: string): Promise<string>;
+  encrypt(password: string): Promise<string>;
+}
+
+@Injectable()
+export class CryptoService implements ICryptoService {
+  @Autowired(CryptoServicePath)
+  private readonly cryptoService: INativeCryptoService;
+
+  async encrypt(password: string) {
+    return await this.cryptoService.encrypt(password);
+  }
+
+  async decrypt(hash: string) {
+    return await this.cryptoService.decrypt(hash);
+  }
+}

package/src/services/external-uri.service.ts

@@ -0,0 +1,68 @@
+import { Injectable, Autowired } from '@opensumi/di';
+import { URI } from '@opensumi/ide-core-common';
+
+import { AppConfig } from '../react-providers/config-provider';
+
+export const IExternalUriService = Symbol('IExternalUriService');
+
+export interface IExternalUriService {
+  /**
+   * 将一个本地(localhost)地址转为远端地址(window.location)
+   * @param uri 需要转换的 URI
+   */
+  resolveExternalUri(uri: URI): URI;
+}
+
+export interface ILocation {
+  address: string;
+  port: number;
+}
+
+@Injectable()
+export class ExternalUriService implements IExternalUriService {
+  @Autowired(AppConfig)
+  private readonly appConfig: AppConfig;
+
+  resolveExternalUri(uri: URI): URI {
+    const localhost = this.extractLocalHost(uri);
+    if (localhost) {
+      return this.toRemoteUrl(uri, localhost);
+    }
+    return uri;
+  }
+
+  protected toRemoteUrl(uri: URI, localhost: ILocation): URI {
+    const authority = this.toRemoteHost(localhost);
+    return URI.from({
+      // scheme 默认和当前 scheme 一致
+      scheme: URI.parse(window.location.href).scheme,
+      authority,
+      path: uri.path.toString(),
+      fragment: uri.fragment,
+      query: uri.query,
+    });
+  }
+
+  protected toRemoteHost(localhost: ILocation): string {
+    // 默认使用 remoteHostname
+    const hostname = this.appConfig.remoteHostname || window.location.hostname;
+    return `${hostname}:${localhost.port}`;
+  }
+
+  /**
+   * 解析本地地址
+   */
+  protected extractLocalHost(uri: URI): { address: string; port: number } | undefined {
+    if (uri.scheme !== 'http' && uri.scheme !== 'https') {
+      return undefined;
+    }
+    const localhostMatch = /^(localhost|127\.0\.0\.1|0\.0\.0\.0):(\d+)$/.exec(uri.authority);
+    if (!localhostMatch) {
+      return undefined;
+    }
+    return {
+      address: localhostMatch[1],
+      port: +localhostMatch[2],
+    };
+  }
+}

package/src/services/index.ts

@@ -0,0 +1,7 @@
+export * from './label-service';
+export * from './storage-service';
+export * from './status-bar-service';
+export * from './clipboard.service';
+export * from './external-uri.service';
+export * from './credentials-service';
+export * from './crypto-service';