@opensumi/ide-core-browser 2.21.13 → 2.22.0

package/src/raw-context-key.ts

@@ -0,0 +1,116 @@
+import { ContextKeyValue } from '@opensumi/monaco-editor-core/esm/vs/platform/contextkey/common/contextkey';
+
+import { IContextKeyService, IContextKey } from './context-key';
+
+export abstract class IRawContextKey<T extends ContextKeyValue> {
+  raw: string;
+  not: string;
+  abstract equalsTo(value: string): string;
+  abstract notEqualTo(value: string): string;
+  abstract regexMatches(regexp: RegExp): string;
+  abstract bind(target: IContextKeyService): IContextKey<T>;
+  abstract getValue(target: IContextKeyService): T | undefined;
+}
+
+type ContextkeyCombinedClause<T extends ContextKeyValue = ContextKeyValue> = Array<RawContextKey<T> | string>;
+
+function whenNormalizer(arr: ContextkeyCombinedClause, separator: '&&' | '||'): string {
+  const result: string[] = [];
+  if (Array.isArray(arr) && arr.length) {
+    for (const item of arr) {
+      if (item instanceof RawContextKey) {
+        result.push(item.raw);
+      } else {
+        result.push(item);
+      }
+    }
+  }
+
+  return result.join(' ' + separator + ' ');
+}
+
+/**
+ * 我们目前的 when 的使用并没有直接使用 monaco.contextkey.ContextKeyExpr
+ * 实现了 bind/getValue 方法
+ * 实现了 and/or/not/equals/notEquals/regexMatches 等工具方法
+ * 实现了类似效果:
+ * when: RawContextKey.and(ExplorerRootContext, ExplorerFolderContext)
+ * 参考 https://code.visualstudio.com/docs/getstarted/keybindings#_when-clause-contexts
+ */
+export class RawContextKey<T extends ContextKeyValue> implements IRawContextKey<T> {
+  private key: string;
+  private defaultValue: T | undefined;
+
+  /**
+   * and alias '&&'
+   */
+  static and(...args: ContextkeyCombinedClause): string {
+    if (!args.length) {
+      return '';
+    }
+    return whenNormalizer(args, '&&');
+  }
+
+  /**
+   * or alias '||'
+   */
+  static or(...args: ContextkeyCombinedClause) {
+    if (!args.length) {
+      return '';
+    }
+    return whenNormalizer(args, '||');
+  }
+
+  constructor(key: string, defaultValue: T | undefined) {
+    this.key = key;
+    this.defaultValue = defaultValue;
+  }
+
+  public bind(target: IContextKeyService): IContextKey<T> {
+    return target.createKey(this.key, this.defaultValue);
+  }
+
+  public getValue(target: IContextKeyService): T | undefined {
+    return target.getContextValue<T>(this.key);
+  }
+
+  /**
+   * maybe you don't need use this directly
+   */
+  public get raw() {
+    return this.key;
+  }
+
+  /**
+   * get negated value
+   */
+  public get not() {
+    return '!' + this.raw;
+  }
+
+  /**
+   * is equal to
+   */
+  public equalsTo<T = string>(value: T): string {
+    return this.raw + ' == ' + value;
+  }
+
+  /**
+   * is not equal to
+   */
+  public notEqualTo(value: string): string {
+    return this.raw + ' != ' + value;
+  }
+
+  /**
+   * matches regex
+   */
+  public regexMatches(regexp: RegExp): string {
+    const regexpStr = regexp ? `/${regexp.source}/${regexp.ignoreCase ? 'i' : ''}` : '/invalid/';
+    return this.raw + ' =~ ' + regexpStr;
+  }
+
+  public evaluate(target: IContextKeyService): boolean {
+    return !!target.getValue(this.key);
+  }
+}

package/src/react-hooks/event.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+
+import { Event, Disposable, ConstructorOf, BasicEvent, IEventBus } from '@opensumi/ide-core-common';
+
+import { useInjectable } from './injectable-hooks';
+
+/**
+ * 在事件来临时更新当前元素
+ * 会自动 dispose 监听器
+ * @param event 要监听的事件
+ * @param dependencies React.useEffect的依赖
+ * @param condition 返回 true 时
+ */
+export function useUpdateOnEvent<T = any>(
+  event: Event<T>,
+  dependencies: any[] = [],
+  condition?: (payload: T) => boolean,
+) {
+  const [, updateState] = React.useState<any>();
+  const forceUpdate = React.useCallback(() => updateState({}), []);
+
+  React.useEffect(() => {
+    const disposer = new Disposable();
+    disposer.addDispose(
+      event((payload: T) => {
+        if (disposer.disposed) {
+          return;
+        }
+        if (!condition) {
+          forceUpdate();
+        } else {
+          if (condition(payload)) {
+            forceUpdate();
+          }
+        }
+      }),
+    );
+    return () => {
+      disposer.dispose();
+    };
+  }, dependencies);
+}
+
+export function useUpdateOnEventBusEvent<T = any>(
+  eventType: ConstructorOf<BasicEvent<T>>,
+  dependencies: any[] = [],
+  condition?: (payload: T) => boolean,
+) {
+  const [, updateState] = React.useState<any>();
+  const forceUpdate = React.useCallback(() => updateState({}), []);
+  const eventBus: IEventBus = useInjectable(IEventBus);
+
+  React.useEffect(() => {
+    const disposer = new Disposable();
+    disposer.addDispose(
+      eventBus.on(eventType, (event: BasicEvent<T>) => {
+        if (disposer.disposed) {
+          return;
+        }
+        if (!condition) {
+          forceUpdate();
+        } else {
+          if (condition(event.payload)) {
+            forceUpdate();
+          }
+        }
+      }),
+    );
+    return () => {
+      disposer.dispose();
+    };
+  }, dependencies);
+}
+
+export function useEventEffect<T = any>(event: Event<T>, listener: (args: T) => void, dependencies: any[] = []) {
+  React.useEffect(() => {
+    const disposable = event(listener);
+    return disposable.dispose.bind(disposable);
+  }, dependencies);
+}

package/src/react-hooks/hot-key.tsx

@@ -0,0 +1,58 @@
+import keycode from 'keycode';
+import { useState, useCallback } from 'react';
+
+// todo: hotkeys 增加类型提示
+// 键位值请查看 https://github.com/timoxley/keycode
+export const useHotKey = (
+  hotkeys: string[],
+  handler: () => void,
+): {
+  onKeyDown: (keyCode: number) => void;
+  onKeyUp: () => void;
+} => {
+  // 初始化函数
+  const initializer = useCallback(
+    () =>
+      hotkeys.reduce((prev, key) => {
+        const keycodeNum = keycode(key);
+        if (typeof keycodeNum === 'number') {
+          prev[keycodeNum] = false;
+        }
+        return prev;
+      }, {}),
+    [hotkeys],
+  );
+
+  const [keyPressRecords, setKeyPressRecords] = useState<{
+    [key: string]: boolean;
+  }>(initializer);
+
+  function onKeyDown(keyCode: number) {
+    setKeyPressRecords((r) => {
+      if (keyCode in r) {
+        return { ...r, [keyCode]: true };
+      }
+      return r;
+    });
+  }
+
+  function onKeyUp() {
+    // 快捷键匹配触发
+    if (Object.values(keyPressRecords).every((n) => n === true)) {
+      handler();
+    }
+
+    // reset value
+    setKeyPressRecords((r) =>
+      Object.keys(keyPressRecords).reduce((prev, keyNum) => {
+        prev[keyNum] = false;
+        return prev;
+      }, {}),
+    );
+  }
+
+  return {
+    onKeyDown,
+    onKeyUp,
+  };
+};

package/src/react-hooks/index.ts

@@ -0,0 +1,3 @@
+export * from './injectable-hooks';
+export * from './portal-hooks';
+export * from './event';

package/src/react-hooks/injectable-hooks.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import { Token, Injector } from '@opensumi/di';
+import { Disposable } from '@opensumi/ide-core-common';
+
+import { ConfigContext } from '../react-providers/config-provider';
+
+function isDisposable(target: any): target is Disposable {
+  return target && (target as any).dispose;
+}
+
+export function useInjectable<T = any>(Constructor: Token, args?: any): T {
+  const { injector } = React.useContext(ConfigContext);
+
+  const instance = React.useMemo(() => injector.get(Constructor, args), [injector, Constructor]);
+
+  React.useEffect(
+    () => () => {
+      // 如果这是多例模式，DI 中不会留有这个实例对象
+      // 由于实例可能存在在父 injector 中，需要做一下递归判断
+      let curr: Injector | undefined = injector;
+      while (curr && !curr.hasInstance(instance)) {
+        curr = (curr as any).parent;
+      }
+      if (!curr) {
+        if (isDisposable(instance)) {
+          instance.dispose();
+        }
+      }
+    },
+    [instance],
+  );
+
+  return instance;
+}

package/src/react-hooks/portal-hooks.tsx

@@ -0,0 +1,38 @@
+import { useRef, useEffect } from 'react';
+
+function createRootElement(id: string) {
+  const rootContainer = document.createElement('div');
+  rootContainer.setAttribute('id', id);
+  return rootContainer;
+}
+
+export function usePortal(id: string) {
+  const rootElemRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    const existingParent = document.querySelector(`#${id}`);
+    const parentElem = existingParent || createRootElement(id);
+
+    if (!existingParent) {
+      document.body.appendChild(parentElem);
+    }
+
+    if (rootElemRef.current) {
+      parentElem.appendChild(rootElemRef.current);
+    }
+
+    return () => {
+      if (rootElemRef.current) {
+        rootElemRef.current.remove();
+      }
+      if (parentElem.childNodes.length === -1) {
+        parentElem.remove();
+      }
+    };
+  }, []);
+
+  if (!rootElemRef.current) {
+    rootElemRef.current = document.createElement('div');
+  }
+  return rootElemRef.current;
+}

package/src/react-hooks/useThrottleFn/index.ts

@@ -0,0 +1,34 @@
+import throttle from 'lodash/throttle';
+import { useEffect, useMemo, useRef } from 'react';
+
+export interface ThrottleOptions {
+  leading?: boolean;
+  trailing?: boolean;
+}
+
+type noop = (...args: any[]) => any;
+
+function useThrottleFn<T extends noop>(fn: T, wait: number, options?: ThrottleOptions) {
+  const fnRef = useRef(fn);
+  fnRef.current = fn;
+
+  const throttled = useMemo(
+    () => throttle((...args: Parameters<T>): ReturnType<T> => fnRef.current(...args), wait, options),
+    [],
+  );
+
+  useEffect(
+    () => () => {
+      throttled.cancel();
+    },
+    [],
+  );
+
+  return {
+    run: throttled,
+    cancel: throttled.cancel,
+    flush: throttled.flush,
+  };
+}
+
+export default useThrottleFn;

package/src/react-providers/config-provider.tsx

@@ -0,0 +1,269 @@
+import React from 'react';
+
+import type { Injector } from '@opensumi/di';
+import type {
+  ExtensionBrowserStyleSheet,
+  ExtensionCandidate,
+  ExtensionConnectOption,
+  UrlProvider,
+} from '@opensumi/ide-core-common';
+
+import type { IPreferences, LayoutConfig } from '../bootstrap';
+
+export const AppConfig = Symbol('AppConfig');
+export interface AppConfig {
+  /**
+   * APP的名称
+   * 默认值为 `ClientApp.DEFAULT_APPLICATION_NAME` 即 `OPENSUMI`
+   */
+  appName?: string;
+  /**
+   * 应用程序的托管位置
+   * 默认桌面端下为 `desktop`, Web 下为 `web`
+   * 可以传入自定义的名称
+   */
+  appHost?: string;
+  /**
+   * 应用绝对安装路径
+   *
+   * 部分插件，如 `typescript-vue-language-features` 可能会基于该路径获取相关依赖地址
+   * refs: https://github.com/search?q=getVscodeTypescriptPath&type=code
+   *
+   * 注意: 在没有应用绝对安装路径的环境中运行时，该值是空字符
+   */
+  appRoot?: string;
+  /**
+   * 默认内部的 uriScheme，用于桌面版 app 的唤起
+   * 同时也默认为 vscode.env.uriScheme 的值
+   * 默认值为 `ClientApp.DEFAULT_URI_SCHEME` 即 `sumi`
+   */
+  uriScheme?: string;
+  /**
+   * 打开的工作区路径
+   */
+  workspaceDir: string;
+  /**
+   * 插件目录路径
+   */
+  extensionDir?: string;
+  /**
+   * 设置全局存储的文件夹名称
+   * 默认值为 .sumi
+   */
+  storageDirName?: string;
+  /**
+   * 设置工作区配置文件的文件夹名称
+   * 默认值为 .sumi
+   */
+  preferenceDirName?: string;
+  /**
+   * 更精细的项目工作区配置存储位置
+   * 即当 preferenceDirName = '.sumi' ， workspacePreferenceDirName = '.o2'时，
+   * 对应全局配置为 ~/.sumi/settings.json , 工作区配置为 {workspaceDir}/.o2/settings.json
+   */
+  workspacePreferenceDirName?: string;
+  /**
+   * 更精细的项目用户配置存储位置
+   * 即当 preferenceDirName = '.sumi' ， userPreferenceDirName = '.o2'时，
+   * 对应全局配置为 ~/.sumi/settings.json , 工作区配置为 {userDir}/.o2/settings.json
+   */
+  userPreferenceDirName?: string;
+  /**
+   * 全局插件数据存储目录名称，默认 .sumi
+   */
+  extensionStorageDirName?: string;
+  /**
+   * 默认配置
+   */
+  defaultPreferences?: IPreferences;
+  /**
+   * 初始化的 DI 实例，一般可在外部进行 DI 初始化之后传入，便于提前进行一些依赖的初始化
+   */
+  injector: Injector;
+  /**
+   * 定义 WebScoket 通信路径
+   */
+  wsPath: UrlProvider;
+  /**
+   * 定义 IDE 各个布局区块默认加载的模块，可针对性对模块进行增删改
+   * 默认值可参考：https://github.com/opensumi/core/tree/58b998d9e1f721928f576579f16ded46b7505e84/packages/main-layout/src/browser/default-config.ts
+   */
+  layoutConfig: LayoutConfig;
+  /**
+   * 定义 IDE 的整体布局，可以通过传入自定义布局的方式定义各个区块的默认大小及缩放选项等
+   * 默认值可参考：https://github.com/opensumi/core/blob/58b998d9e1f721928f576579f16ded46b7505e84/packages/core-browser/src/components/layout/default-layout.tsx
+   */
+  layoutComponent?: React.FC;
+  /**
+   * 可基于 `layoutComponent` 配置的基础上
+   * 定义面板大小，宽度/高度
+   */
+  panelSizes?: { [slotLocation: string]: number };
+  /**
+   * 定义各个区块的默认面板
+   * 如：{ [SlotLocation.bottom]: '@opensumi/ide-terminal-next' }
+   * 定义了底部区块默认使用 `@opensumi/ide-terminal-next` 模块进行初始化
+   */
+  defaultPanels?: { [slotLocation: string]: string };
+  /**
+   * 用于挂载webview的iframe地址
+   * 默认值：`http://${deviceIp}:${port}/webview`,
+   */
+  webviewEndpoint?: string;
+  /**
+   * Worker 插件的默认启动路径
+   * 默认值为: https://dev.g.alicdn.com/tao-ide/ide-lite/${version}/worker-host.js
+   */
+  extWorkerHost?: string;
+  /**
+   * 额外指定的插件路径，一般用于内置插件
+   */
+  extensionCandidate?: ExtensionCandidate[];
+  /**
+   * 定义静态资源的加载路径
+   * 默认值为：`http://${HOST}:8000/assets/${path}`
+   */
+  staticServicePath?: string;
+  /**
+   * 定义是否以插件开发模式启动
+   */
+  extensionDevelopmentHost?: boolean;
+  /**
+   * 定义编辑器默认背景图片
+   */
+  editorBackgroundImage?: string;
+  /**
+   * 用于插件 UI 部分开启实验性 ShadowDOM
+   */
+  useExperimentalShadowDom?: boolean;
+  /**
+   * 加载 workerHost 时使用 iframe 包装
+   * 对于跨域的场景，加载 workerHost 时会使用 base64 编码后通过 importScripts 引入(importScripts 不受跨域限制)
+   * 但这会导致 workerHost 的 origin 为 null，使某些请求失败
+   */
+  useIframeWrapWorkerHost?: boolean;
+
+  /**
+   * 忽略 Worker Host 可能出现的跨域问题
+   */
+  ignoreWorkerHostCors?: boolean;
+  /**
+   * 自定义客户端 id，是 websocket 服务的唯一标识
+   * 也是传给声明了 backServices 的后端 Service 的唯一标识
+   * 注意保持这个 id 的唯一性
+   */
+  clientId?: string;
+  /**
+   * 是否禁用插件进程
+   */
+  noExtHost?: boolean;
+  /**
+   * @ClientOption
+   * 额外的 ConfigProvider
+   * 可以让 IDE-framework 内部的 ReactDOM.render 调用时
+   * 都被其包裹一层，以达到额外的 context 传递效果
+   */
+  extraContextProvider?: React.ComponentType<React.PropsWithChildren<any>>;
+  /**
+   * @ClientOption
+   * @default true
+   * 允许按照工作区路径去动态设置 document#title, 默认为 true
+   */
+  allowSetDocumentTitleFollowWorkspaceDir?: boolean;
+  /**
+   * @ClientOption
+   * 远程访问地址，可以通过该地址访问当容器服务
+   * 默认为 window.location.hostname
+   */
+  remoteHostname?: string;
+  /**
+   * 开启插件进程的调试能力，默认为 false
+   */
+  enableDebugExtensionHost?: boolean;
+  /**
+   * 加载插件前端资源时的 fetch credentials 选项
+   * 可选项为 "include" | "omit" | "same-origin"
+   */
+  extensionFetchCredentials?: RequestCredentials;
+  /**
+   * 插件进程连接时候一些配置选项
+   */
+  extensionConnectOption?: ExtensionConnectOption;
+  /**
+   * 当 DOM 首次渲染完成后调用
+   * 此时表示 IDE 界面已经完成渲染并可以操作
+   */
+  didRendered?: () => void;
+  /**
+   * @deprecated
+   * vscode-oniguruma-wasm 资源地址，在 Windows 版本中很容易传送错误的地址，请使用 onigWasmUri 参数
+   */
+  onigWasmPath?: string;
+  /**
+   * vscode-oniguruma-wasm 资源 Uri 地址
+   */
+  onigWasmUri?: string;
+  /**
+   * 工作区文件后缀，默认后缀为 `sumi-workspace`
+   */
+  workspaceSuffixName?: string;
+  /**
+   * 视图组件内默认的组件样式资源 CDN 来源
+   * 默认值为 'alipay'
+   */
+  componentCDNType?: 'unpkg' | 'jsdelivr' | 'alipay';
+  /**
+   * 指定前端是否为 Electron 环境 (Electron Renderer)
+   * 为兼容老的逻辑，若不兼容则 fallback 到 isElectronRenderer 的判断
+   * 新版本中建议优先使用 isElectronRenderer
+   */
+  isElectronRenderer: boolean;
+  /**
+   * 指定当前是否通过 remote 模式连接到远程的 Server 端
+   * 这将影响 Terminal 与 Extension 模块与子进程的连接方式
+   */
+  isRemote?: boolean;
+  /**
+   * 是否开启对 OpenSumi DevTools 的支持
+   * 默认值为 false
+   */
+  devtools?: boolean;
+  /**
+   * 配置插件 browser 层的 component 样式文件和 iconfont 样式文件
+   */
+  extensionBrowserStyleSheet?: ExtensionBrowserStyleSheet;
+  /**
+   * 是否采用工作区内的 `.vscode` 配置作为项目启动的配置默认值
+   * 该配置默认值仅在首次启动时进行同步，后续的更改将不会带来任何效果，即框架本身将不监听 `.vscode` 内的文件变化
+   */
+  useVSCodeWorkspaceConfiguration?: boolean;
+  /*
+   * 定义协同模块的通信路径
+   * 需要带端口号, 默认是 12345，可使用 COLLABORATION_PORT 字段来指定
+   */
+  collaborationWsPath?: string;
+}
+
+export const ConfigContext = React.createContext<AppConfig>({
+  workspaceDir: '',
+  injector: null as any,
+  wsPath: '',
+  layoutConfig: {},
+  extWorkerHost: '',
+  isElectronRenderer: false,
+});
+
+export function ConfigProvider(props: React.PropsWithChildren<{ value: AppConfig }>) {
+  const { extraContextProvider, ...restPropsValue } = props.value;
+  const app = (
+    <ConfigContext.Provider value={restPropsValue}>
+      <ConfigContext.Consumer>{(value) => (restPropsValue === value ? props.children : null)}</ConfigContext.Consumer>
+    </ConfigContext.Provider>
+  );
+
+  if (!extraContextProvider) {
+    return app;
+  }
+
+  return React.createElement(extraContextProvider, { children: app });
+}

package/src/react-providers/index.tsx

@@ -0,0 +1,2 @@
+export * from './config-provider';
+export * from './slot';

package/src/react-providers/slot.module.less

@@ -0,0 +1,19 @@
+.error_message {
+  padding: 15px;
+  .title {
+    color: var(--foreground);
+    font-size: 18px;
+  }
+  .detial {
+    white-space: pre-wrap;
+    margin-bottom: 10px;
+    cursor: pointer;
+    .label,
+    .message {
+      color: var(--kt-inputValidation-errorTextForeground);
+    }
+    .label {
+      font-weight: bold;
+    }
+  }
+}