@opensumi/ide-core-browser 2.21.13 → 2.22.0

package/src/services/label-service.ts

@@ -0,0 +1,386 @@
+import classnames from 'classnames';
+
+import { Autowired, Injectable } from '@opensumi/di';
+import {
+  URI,
+  Emitter,
+  IDisposable,
+  arrays,
+  Event,
+  WithEventBus,
+  BasicEvent,
+  Disposable,
+  LRUMap,
+} from '@opensumi/ide-core-common';
+import { ILanguageService } from '@opensumi/monaco-editor-core/esm/vs/editor/common/languages/language';
+import { IModelService } from '@opensumi/monaco-editor-core/esm/vs/editor/common/services/model';
+import * as monaco from '@opensumi/monaco-editor-core/esm/vs/editor/editor.api';
+import { StandaloneServices } from '@opensumi/monaco-editor-core/esm/vs/editor/standalone/browser/standaloneServices';
+
+import { getIcon } from '../style/icon/icon';
+
+const { addElement } = arrays;
+
+/**
+ * Data URI related helpers.
+ */
+export namespace DataUri {
+  export const META_DATA_LABEL = 'label';
+  export const META_DATA_DESCRIPTION = 'description';
+  export const META_DATA_SIZE = 'size';
+  export const META_DATA_MIME = 'mime';
+
+  export function parseMetaData(dataUri: monaco.Uri): Map<string, string> {
+    const metadata = new Map<string, string>();
+    const uriPath = dataUri.path;
+    // Given a URI of:  data:image/png;size:2313;label:SomeLabel;description:SomeDescription;base64,77+9UE5...
+    // the metadata is: size:2313;label:SomeLabel;description:SomeDescription
+    const meta = uriPath.substring(uriPath.indexOf(';') + 1, uriPath.lastIndexOf(';'));
+    meta.split(';').forEach((property) => {
+      const [key, value] = property.split(':');
+      if (key && value) {
+        metadata.set(key, value);
+      }
+    });
+
+    // Given a URI of:  data:image/png;size:2313;label:SomeLabel;description:SomeDescription;base64,77+9UE5...
+    // the mime is: image/png
+    const mime = uriPath.substring(0, uriPath.indexOf(';'));
+    if (mime) {
+      metadata.set(META_DATA_MIME, mime);
+    }
+
+    return metadata;
+  }
+}
+
+export interface ILabelProvider {
+  /**
+   * 判断该Contribution是否能处理该类型，返回权重
+   */
+  canHandle(element: URI, options?: ILabelOptions): number;
+
+  /**
+   * 根据URI返回Icon样式.
+   */
+  getIcon?(element: URI, options?: ILabelOptions): string;
+
+  /**
+   * 返回短名称.
+   */
+  getName?(element: URI): string;
+
+  /**
+   * 返回长名称.
+   */
+  getLongName?(element: URI): string;
+
+  /**
+   * 通知使用方发生了变更
+   */
+  onDidChange?: Event<URI>;
+}
+
+export interface ILabelOptions {
+  isDirectory?: boolean;
+  isOpenedDirectory?: boolean;
+  isSymbolicLink?: boolean;
+}
+
+export function serializeLabelOptions(options?: ILabelOptions): string {
+  if (!options) {
+    return 'default';
+  } else {
+    return [
+      options.isDirectory ? '0' : '1',
+      options.isOpenedDirectory ? '0' : '1',
+      options.isSymbolicLink ? '0' : '1',
+    ].join('');
+  }
+}
+
+export function deserializeLabelOptions(key: string): ILabelOptions | undefined {
+  if (key === 'default') {
+    return undefined;
+  } else {
+    return {
+      isDirectory: key[0] === '0',
+      isOpenedDirectory: key[1] === '0',
+      isSymbolicLink: key[2] === '0',
+    };
+  }
+}
+
+@Injectable()
+export class DefaultUriLabelProvider extends Disposable implements ILabelProvider {
+  private _onDidChange = this.registerDispose(new Emitter<URI>());
+
+  public onDidChange = this._onDidChange.event;
+
+  public canHandle(uri: object, options?: ILabelOptions): number {
+    if (uri instanceof URI) {
+      return 1;
+    }
+    return 0;
+  }
+
+  public getIcon(uri: URI, options?: ILabelOptions): string {
+    const { iconClass, onDidChange } = getIconClass(uri, options);
+    if (onDidChange) {
+      const disposer = onDidChange(() => {
+        this._onDidChange.fire(uri);
+        disposer.dispose();
+      });
+      this.addDispose(disposer);
+    }
+    return iconClass || getIcon('ellipsis');
+  }
+
+  public getName(uri: URI): string {
+    return uri.displayName;
+  }
+
+  public getLongName(uri: URI): string {
+    return uri.path.toString();
+  }
+}
+
+interface ICachedLabelProvider {
+  [option: string]: ILabelProvider | undefined;
+}
+
+@Injectable()
+export class LabelService extends WithEventBus {
+  @Autowired()
+  public defaultLabelProvider: DefaultUriLabelProvider;
+
+  private providers: ILabelProvider[] = [];
+
+  private cachedProviderMap: Map<string, ICachedLabelProvider> = new LRUMap<string, ICachedLabelProvider>(1000, 500);
+
+  private onDidChangeEmitter: Emitter<URI> = new Emitter();
+
+  constructor() {
+    super();
+    this.registerLabelProvider(this.defaultLabelProvider);
+  }
+
+  get onDidChange() {
+    return this.onDidChangeEmitter.event;
+  }
+
+  private getProviderForUri(uri: URI, options?: ILabelOptions): ILabelProvider | undefined {
+    const uriKey = uri.toString();
+    if (!this.cachedProviderMap.has(uriKey)) {
+      this.cachedProviderMap.set(uriKey, {});
+    }
+    const cached = this.cachedProviderMap.get(uriKey)!;
+    const optionKey = serializeLabelOptions(options);
+    if (cached[optionKey]) {
+      return cached[optionKey];
+    } else {
+      let candidate: ILabelProvider | undefined;
+      let currentWeight = -1;
+      for (const provider of this.providers) {
+        const weight = provider.canHandle(uri, options);
+        if (weight > currentWeight) {
+          candidate = provider;
+          currentWeight = weight;
+        }
+      }
+      cached[optionKey] = candidate;
+      return candidate;
+    }
+  }
+
+  public registerLabelProvider(provider: ILabelProvider): IDisposable {
+    const currentProvided = Array.from(this.cachedProviderMap.entries());
+    this.cachedProviderMap.clear();
+    const disposer = new Disposable();
+    if (provider.onDidChange) {
+      disposer.addDispose(
+        provider.onDidChange((uri) => {
+          this.onDidChangeEmitter.fire(uri);
+          this.cachedProviderMap.delete(uri.toString());
+        }),
+      );
+    }
+    disposer.addDispose(addElement(this.providers, provider, true));
+    disposer.addDispose({
+      dispose: () => {
+        this.cachedProviderMap.clear();
+      },
+    });
+    /**
+     * 对于已经提供过 icon label的，如果发生改变, 通知一遍已经改变
+     */
+    currentProvided.forEach(([uriString, prev]) => {
+      const uri = new URI(uriString);
+      for (const key of Object.keys(prev)) {
+        const options = deserializeLabelOptions(key);
+        const newProvider = this.getProviderForUri(uri, options);
+        if (newProvider !== prev[key]) {
+          this.onDidChangeEmitter.fire(uri);
+          return;
+        }
+      }
+    });
+
+    return disposer;
+  }
+
+  public getIcon(uri: URI, options?: ILabelOptions): string {
+    const provider = this.getProviderForUri(uri, options);
+    if (provider) {
+      return provider.getIcon!(uri, options);
+    } else {
+      return '';
+    }
+  }
+
+  public getName(uri: URI): string {
+    const provider = this.getProviderForUri(uri);
+    if (provider) {
+      return provider.getName!(uri);
+    } else {
+      return '';
+    }
+  }
+
+  public getLongName(uri: URI): string {
+    const provider = this.getProviderForUri(uri);
+    if (provider) {
+      return provider.getLongName!(uri);
+    } else {
+      return '';
+    }
+  }
+}
+
+let modeService: any;
+let modelService: any;
+let languageService: any;
+const getIconClass = (
+  resource: URI,
+  options?: ILabelOptions,
+): {
+  iconClass: string;
+  onDidChange?: Event<void>;
+} => {
+  const classes = options && options.isDirectory ? ['folder-icon'] : ['file-icon'];
+  let name: string | undefined;
+  // 获取资源的路径和名称，data-uri单独处理
+  if (resource.scheme === 'data') {
+    const metadata = DataUri.parseMetaData(monaco.Uri.file(resource.toString()));
+    name = metadata.get(DataUri.META_DATA_LABEL);
+  } else {
+    name = cssEscape(basenameOrAuthority(resource).toLowerCase());
+  }
+
+  let _onDidChange: Emitter<void> | undefined;
+  // 文件夹图标
+  if (options && options.isDirectory) {
+    classes.push(`${name}-name-folder-icon`);
+  } else {
+    // 文件图标
+    // Name & Extension(s)
+    if (name) {
+      classes.push(`${name}-name-file-icon`);
+      const dotSegments = name.split('.');
+      for (let i = 1; i < dotSegments.length; i++) {
+        classes.push(`${dotSegments.slice(i).join('.')}-ext-file-icon`); // add each combination of all found extensions if more than one
+      }
+      classes.push('ext-file-icon'); // extra segment to increase file-ext score
+    }
+    // Language Mode探测
+    if (!modeService) {
+      // modeService = StandaloneServices.modeService.get();
+    }
+    if (!languageService) {
+      languageService = StandaloneServices.get(ILanguageService);
+    }
+    if (!modelService) {
+      modelService = StandaloneServices.get(IModelService);
+    }
+    const detectedModeId = detectModeId(
+      modelService,
+      languageService,
+      monaco.Uri.file(resource.withoutQuery().toString()),
+    );
+    if (detectedModeId) {
+      classes.push(`${cssEscape(detectedModeId)}-lang-file-icon`);
+    } else {
+      _onDidChange = new Emitter<void>();
+      languageService.onDidEncounterLanguage(() => {
+        if (detectModeId(modelService, languageService, monaco.Uri.file(resource.withoutQuery().toString()))) {
+          _onDidChange?.fire();
+          _onDidChange?.dispose();
+        }
+      });
+    }
+  }
+  // 统一的图标类
+  classes.push('icon-label');
+  return {
+    iconClass: classnames(classes),
+    // 对于首次没找到的，添加一个检测新语言注册的 change 事件
+    onDidChange: _onDidChange?.event,
+  };
+};
+
+export function cssEscape(str: string): string {
+  return str.replace(/[\11\12\14\15\40]/g, '/'); // HTML class names can not contain certain whitespace characters, use / instead, which doesn't exist in file names.
+}
+
+export function basenameOrAuthority(resource: URI) {
+  return resource.path.base || resource.authority;
+}
+
+export function detectModeId(
+  modelService: IModelService,
+  languageService: ILanguageService,
+  resource: monaco.Uri,
+): string | null {
+  if (!resource) {
+    return null; // we need a resource at least
+  }
+
+  let modeId: string | null = null;
+
+  // Data URI: check for encoded metadata
+  if (resource.scheme === 'data') {
+    const metadata = DataUri.parseMetaData(resource);
+    const mime = metadata.get(DataUri.META_DATA_MIME);
+
+    if (mime) {
+      modeId = languageService.getLanguageIdByMimeType(mime);
+    }
+  } else {
+    const model = modelService.getModel(resource);
+    if (model) {
+      modeId = model.getLanguageId();
+    }
+  }
+
+  // only take if the mode is specific (aka no just plain text)
+  if (modeId && modeId !== 'plaintext') {
+    return modeId;
+  }
+
+  // otherwise fallback to path based detection
+  // return modeService.getModeIdByFilepathOrFirstLine(resource);
+  const guessLanguageId = languageService.guessLanguageIdByFilepathOrFirstLine(resource);
+  // 相关 issue: https://github.com/microsoft/vscode/commit/2959fcde6aa9ff2058ad13cef8a5265ddb5f58a4#diff-7dd3b615572806b4d2210a9e7b32e1ae3714bc7b5fb201e437edaa8b372ce1aaR188
+  return guessLanguageId === 'unknown' ? null : guessLanguageId;
+}
+
+export function getLanguageIdFromMonaco(uri: URI) {
+  languageService = StandaloneServices.get(ILanguageService);
+  modelService = StandaloneServices.get(IModelService);
+  return detectModeId(modelService, languageService, monaco.Uri.parse(uri.toString()));
+}
+
+/**
+ * labelService所处理的label或者icon变更的事件
+ */
+export class ResourceLabelOrIconChangedEvent extends BasicEvent<URI> {}

package/src/services/status-bar-service.ts

@@ -0,0 +1,108 @@
+import { IMarkdownString, IThemeColor, StatusBarHoverCommand } from '@opensumi/ide-core-common';
+import { IDisposable } from '@opensumi/ide-core-common';
+
+import { IMenu } from '../menu/next';
+
+export const IStatusBarService = Symbol('IStatusBarService');
+
+export interface IStatusBarService {
+  getBackgroundColor(): string | undefined;
+  getColor(): string | undefined;
+  setBackgroundColor(color?: string): void;
+  setColor(color?: string): void;
+  addElement(entryId: string, entry: StatusBarEntry): StatusBarEntryAccessor;
+  setElement(entryId: string, fields: object): void;
+  removeElement(entryId: string): void;
+  /**
+   * 设置状态栏元素显隐
+   * @param entryId
+   */
+  toggleElement(entryId: string): void;
+  contextMenu: IMenu;
+  leftEntries: StatusBarEntry[];
+  rightEntries: StatusBarEntry[];
+}
+
+export interface StatusBarHoverContent {
+  title: string;
+  name?: string;
+  command?: StatusBarHoverCommand;
+}
+
+export interface StatusBarEntry {
+  /**
+   * 状态栏元素唯一 ID，如果由插件进程生成则为随机
+   */
+  entryId?: string;
+  /**
+   * 状态栏可读 id
+   * 上层可指定，会设置在元素 id 上，若不存在则使用 entryId
+   * 一个插件注册的状态栏元素 id 相同
+   */
+  id?: string;
+  /**
+   * 状态栏显示文案
+   * 可以通过 text 设置图标
+   * $(iconClassName) :text
+   */
+  text?: string;
+  /**
+   * 当前菜单显示名称
+   * 标识当前状态栏组件 contextmenu 显示的名称，如果没有使用 text 代替
+   */
+  name?: string;
+  alignment: StatusBarAlignment;
+  color?: IThemeColor | string;
+  backgroundColor?: IThemeColor | string;
+  className?: string;
+  tooltip?: string | IMarkdownString;
+  command?: string;
+  arguments?: any[];
+  priority?: number;
+  iconClass?: string;
+  ariaLabel?: string;
+  role?: string;
+  /**
+   * 是否默认展示，可以通过右键菜单控制
+   */
+  hidden?: boolean;
+  /**
+   * 鼠标移上去 Content 的内容
+   */
+  hoverContents?: StatusBarHoverContent[];
+  onClick?: (e: any) => void;
+}
+
+export interface StatusBarEntryAccessor extends IDisposable {
+  /**
+   * Allows to update an existing status bar entry.
+   */
+  update(properties: StatusBarEntry): void;
+}
+
+export enum StatusBarAlignment {
+  LEFT,
+  RIGHT,
+}
+
+export namespace StatusBarCommand {
+  export const changeColor = {
+    id: 'statusbar.changeColor',
+  };
+
+  export const changeBackgroundColor = {
+    id: 'statusbar.changeBackgroundColor',
+  };
+
+  export const addElement = {
+    id: 'statusbar.addElement',
+  };
+
+  export const toggleElement = {
+    id: 'statusbar.toggleElement',
+  };
+}
+
+export interface StatusBarState {
+  hidden: boolean;
+}

package/src/services/storage-service.ts

@@ -0,0 +1,201 @@
+import { Autowired, Injectable, Optional } from '@opensumi/di';
+import { isObject, isUndefinedOrNull, runWhenIdle } from '@opensumi/ide-core-common';
+
+import { Logger } from '../logger';
+import { AppConfig } from '../react-providers/index';
+
+export const GLOBAL_BROWSER_STORAGE_PREFIX = 'global';
+export const SCOPED_BROWSER_STORAGE_PREFIX = 'scoped';
+
+export const StorageService = Symbol('IStorageService');
+/**
+ * StorageService用于提供给插件或模块进行session级别的数据存储能力
+ */
+export interface StorageService {
+  /**
+   * 值设置
+   */
+  setData<T>(key: string, data: T): void;
+  setData<T>(key: string, data: T): Promise<void> | void;
+
+  /**
+   * 获取值
+   */
+  getData<T>(key: string, defaultValue: T): Promise<T>;
+  getData<T>(key: string, defaultValue: T): T;
+  getData<T>(key: string): Promise<T | undefined>;
+  getData<T>(key: string): T | undefined;
+
+  /**
+   * 删除值
+   */
+  removeData(key: string): Promise<void> | void;
+  removeData(key: string): void;
+}
+
+@Injectable()
+abstract class BaseBrowserStorageService implements StorageService {
+  // 默认对于 14 天内无使用的 LocalStorage 数据进行清理
+  private static EXPIRES_DAY = 14;
+  private static EXPIRES_LIMITE_NUMBER = 20;
+
+  @Autowired()
+  private logger: Logger;
+
+  private _enableExpired = false;
+
+  /**
+   * global/scoped 浏览器层存储定义
+   * @param key {string} 存储的唯一 key
+   */
+  abstract prefix(key: string): string;
+
+  constructor() {
+    this.init();
+  }
+
+  public setExpires(value: boolean) {
+    this._enableExpired = value;
+  }
+
+  private get storage(): Storage {
+    return window.localStorage;
+  }
+
+  private init() {
+    if (typeof window !== 'undefined' && window.localStorage) {
+      runWhenIdle(() => {
+        this.clearLocalStorage();
+        this.testLocalStorage();
+      });
+    } else {
+      this.logger.warn("The browser doesn't support localStorage. state will not be persisted across sessions.");
+    }
+  }
+
+  public setData<T>(key: string, data?: T): void {
+    if (data !== undefined) {
+      try {
+        if (isObject(data) && this._enableExpired) {
+          // 追加数据过期时间
+          data['expires'] = Date.now() + BaseBrowserStorageService.EXPIRES_DAY * 24 * 60 * 60 * 1000;
+        }
+        this.storage.setItem(this.prefix(key), JSON.stringify(data));
+      } catch (e) {
+        this.removeExpiringStorage();
+      }
+    } else {
+      this.removeData(key);
+    }
+  }
+
+  public getData<T>(key: string, defaultValue?: T): T | undefined {
+    const result = this.storage.getItem(this.prefix(key));
+    if (isUndefinedOrNull(result)) {
+      return defaultValue;
+    }
+    try {
+      return JSON.parse(result);
+    } catch (e) {
+      this.logger.error(`storage getDate error: ${e}, use defaultValue as result.`);
+    }
+    return defaultValue;
+  }
+
+  public removeData<T>(key: string): void {
+    this.storage.removeItem(this.prefix(key));
+  }
+
+  /**
+   * 验证是否还有空间生育用来存储另一个工作区配置
+   * 如果超出限制大小，提示用户进行清理
+   *
+   * @private
+   * @memberof LocalStorageService
+   */
+  private testLocalStorage() {
+    const keyTest = this.prefix('Test');
+    try {
+      this.storage.setItem(keyTest, JSON.stringify(new Array(60000)));
+    } catch (error) {
+      this.removeExpiringStorage();
+    } finally {
+      this.storage.removeItem(keyTest);
+    }
+  }
+
+  /**
+   * 清理过期的本地存储数据
+   */
+  private clearLocalStorage() {
+    const allKeys = Object.keys(this.storage);
+    for (const key of allKeys) {
+      try {
+        const data = JSON.parse(this.storage[key]);
+        if (isObject(data) && data.expires) {
+          if (data.expires < Date.now()) {
+            this.storage.removeItem(key);
+          }
+        }
+      } catch (e) {
+        continue;
+      }
+    }
+  }
+
+  /**
+   * 移除即将过期的数据，为后续数据腾出存储空间
+   */
+  private async removeExpiringStorage(): Promise<void> {
+    const allKeys = Object.keys(this.storage);
+    const sortedKeys = allKeys
+      .filter((key) => this.storage[key]?.indexOf('expires') > 0)
+      .sort((a, b) => {
+        try {
+          const expiresA = JSON.parse(this.storage[a])?.expires;
+          const expiresB = JSON.parse(this.storage[b])?.expires;
+          return expiresA - expiresB;
+        } catch (e) {
+          return 0;
+        }
+      });
+    // 移除即将过期的 EXPIRES_LIMITE_NUMBER 个数据
+    for (const key of sortedKeys.slice(0, BaseBrowserStorageService.EXPIRES_LIMITE_NUMBER)) {
+      this.storage.removeItem(key);
+    }
+  }
+}
+
+/**
+ * @internal
+ * 全局的浏览器层存储
+ */
+@Injectable()
+export class GlobalBrowserStorageService extends BaseBrowserStorageService {
+  prefix(key: string): string {
+    return `${GLOBAL_BROWSER_STORAGE_PREFIX}:${key}`;
+  }
+}
+
+/**
+ * @internal
+ * scoped 浏览器层存储
+ */
+@Injectable()
+export class ScopedBrowserStorageService extends BaseBrowserStorageService {
+  @Autowired(AppConfig)
+  private appConfig: AppConfig;
+
+  private pathname = 'unknown';
+
+  constructor(@Optional() key: string) {
+    super();
+    this.pathname = key || this.appConfig.workspaceDir;
+    // 仅对局部 LocalStorage 设置过期时间
+    this.setExpires(true);
+  }
+
+  prefix(key: string): string {
+    return `${SCOPED_BROWSER_STORAGE_PREFIX}:${this.pathname}:${key}`;
+  }
+}