feat: add diff viewer component

.gitignore

@@ -116,3 +116,4 @@ generated-parser
 .husky
 
 scripts/utils/_upload.js
+packages/startup/src/diff-viewer/remote.ts

jest.config.js

@@ -13,7 +13,7 @@ module.exports = {
   moduleNameMapper: {
     '^@codeblitzjs/ide-core-(?!browserfs)(.*?)$': '<rootDir>/packages/$1/src',
     '^@codeblitzjs/ide-core$': '<rootDir>/packages/core/src',
-    '\\.(css|less)$': '<rootDir>/mocks/styleMock.js',
+    '\\.(css|less)$': '<rootDir>/scripts/jest/mocks/styleMock.js',
   },
   rootDir: __dirname,
   testMatch: ['<rootDir>/packages/**/__tests__/**/*@(test|spec).[jt]s?(x)'],

package.json

@@ -8,7 +8,7 @@
   "description": "codeblitzjs",
   "main": "index.js",
   "engines": {
-    "opensumi": "3.1.4-next-1719380894.0"
+    "opensumi": "3.1.5-next-1721574303.0"
   },
   "scripts": {
     "prepare": "husky install",
@@ -19,6 +19,7 @@
     "generate": "node scripts/generate",
     "editor": "INTEGRATION=editor npm run dev",
     "fs": "INTEGRATION=filesystem npm run dev",
+    "diff-viewer": "INTEGRATION=diff-viewer npm run dev",
     "build": "node scripts/build",
     "build:all": "yarn run bundle && yarn run generate && yarn run build",
     "bundle": "node scripts/bundle",

packages/cli/package.json

@@ -10,12 +10,12 @@
     "opensumi codeblitzjs"
   ],
   "engines": {
-    "opensumi": "3.1.4-next-1719380894.0",
+    "opensumi": "3.1.5-next-1721574303.0",
     "node": ">=10.0.0"
   },
   "dependencies": {
     "@codeblitzjs/ide-common": "1.0.4",
-    "@opensumi/ide-extension": "3.1.4-next-1719380894.0",
+    "@opensumi/ide-extension": "3.1.5-next-1721574303.0",
     "async-retry": "^1.3.1",
     "await-event": "^2.1.0",
     "commander": "^7.2.0",

packages/core/package.json

@@ -33,48 +33,48 @@
     "@codeblitzjs/ide-plugin": "1.0.4",
     "@codeblitzjs/ide-registry": "1.0.4",
     "@codeblitzjs/ide-sumi-core": "1.0.4",
-    "@opensumi/ide-addons": "3.1.4-next-1719380894.0",
-    "@opensumi/ide-ai-native": "3.1.4-next-1719380894.0",
-    "@opensumi/ide-comments": "3.1.4-next-1719380894.0",
-    "@opensumi/ide-core-browser": "3.1.4-next-1719380894.0",
-    "@opensumi/ide-core-common": "3.1.4-next-1719380894.0",
-    "@opensumi/ide-debug": "3.1.4-next-1719380894.0",
-    "@opensumi/ide-decoration": "3.1.4-next-1719380894.0",
-    "@opensumi/ide-design": "3.1.4-next-1719380894.0",
-    "@opensumi/ide-editor": "3.1.4-next-1719380894.0",
-    "@opensumi/ide-explorer": "3.1.4-next-1719380894.0",
-    "@opensumi/ide-express-file-server": "3.1.4-next-1719380894.0",
-    "@opensumi/ide-extension": "3.1.4-next-1719380894.0",
-    "@opensumi/ide-extension-storage": "3.1.4-next-1719380894.0",
-    "@opensumi/ide-file-scheme": "3.1.4-next-1719380894.0",
-    "@opensumi/ide-file-service": "3.1.4-next-1719380894.0",
-    "@opensumi/ide-file-tree-next": "3.1.4-next-1719380894.0",
-    "@opensumi/ide-i18n": "3.1.4-next-1719380894.0",
-    "@opensumi/ide-keymaps": "3.1.4-next-1719380894.0",
-    "@opensumi/ide-logs": "3.1.4-next-1719380894.0",
-    "@opensumi/ide-main-layout": "3.1.4-next-1719380894.0",
-    "@opensumi/ide-markdown": "3.1.4-next-1719380894.0",
-    "@opensumi/ide-markers": "3.1.4-next-1719380894.0",
-    "@opensumi/ide-menu-bar": "3.1.4-next-1719380894.0",
-    "@opensumi/ide-monaco": "3.1.4-next-1719380894.0",
-    "@opensumi/ide-monaco-enhance": "3.1.4-next-1719380894.0",
-    "@opensumi/ide-opened-editor": "3.1.4-next-1719380894.0",
-    "@opensumi/ide-outline": "3.1.4-next-1719380894.0",
-    "@opensumi/ide-output": "3.1.4-next-1719380894.0",
-    "@opensumi/ide-overlay": "3.1.4-next-1719380894.0",
-    "@opensumi/ide-preferences": "3.1.4-next-1719380894.0",
-    "@opensumi/ide-quick-open": "3.1.4-next-1719380894.0",
-    "@opensumi/ide-scm": "3.1.4-next-1719380894.0",
-    "@opensumi/ide-search": "3.1.4-next-1719380894.0",
-    "@opensumi/ide-status-bar": "3.1.4-next-1719380894.0",
-    "@opensumi/ide-storage": "3.1.4-next-1719380894.0",
-    "@opensumi/ide-testing": "3.1.4-next-1719380894.0",
-    "@opensumi/ide-theme": "3.1.4-next-1719380894.0",
-    "@opensumi/ide-toolbar": "3.1.4-next-1719380894.0",
-    "@opensumi/ide-variable": "3.1.4-next-1719380894.0",
-    "@opensumi/ide-webview": "3.1.4-next-1719380894.0",
-    "@opensumi/ide-workspace": "3.1.4-next-1719380894.0",
-    "@opensumi/ide-workspace-edit": "3.1.4-next-1719380894.0",
+    "@opensumi/ide-addons": "3.1.5-next-1721574303.0",
+    "@opensumi/ide-ai-native": "3.1.5-next-1721574303.0",
+    "@opensumi/ide-comments": "3.1.5-next-1721574303.0",
+    "@opensumi/ide-core-browser": "3.1.5-next-1721574303.0",
+    "@opensumi/ide-core-common": "3.1.5-next-1721574303.0",
+    "@opensumi/ide-debug": "3.1.5-next-1721574303.0",
+    "@opensumi/ide-decoration": "3.1.5-next-1721574303.0",
+    "@opensumi/ide-design": "3.1.5-next-1721574303.0",
+    "@opensumi/ide-editor": "3.1.5-next-1721574303.0",
+    "@opensumi/ide-explorer": "3.1.5-next-1721574303.0",
+    "@opensumi/ide-express-file-server": "3.1.5-next-1721574303.0",
+    "@opensumi/ide-extension": "3.1.5-next-1721574303.0",
+    "@opensumi/ide-extension-storage": "3.1.5-next-1721574303.0",
+    "@opensumi/ide-file-scheme": "3.1.5-next-1721574303.0",
+    "@opensumi/ide-file-service": "3.1.5-next-1721574303.0",
+    "@opensumi/ide-file-tree-next": "3.1.5-next-1721574303.0",
+    "@opensumi/ide-i18n": "3.1.5-next-1721574303.0",
+    "@opensumi/ide-keymaps": "3.1.5-next-1721574303.0",
+    "@opensumi/ide-logs": "3.1.5-next-1721574303.0",
+    "@opensumi/ide-main-layout": "3.1.5-next-1721574303.0",
+    "@opensumi/ide-markdown": "3.1.5-next-1721574303.0",
+    "@opensumi/ide-markers": "3.1.5-next-1721574303.0",
+    "@opensumi/ide-menu-bar": "3.1.5-next-1721574303.0",
+    "@opensumi/ide-monaco": "3.1.5-next-1721574303.0",
+    "@opensumi/ide-monaco-enhance": "3.1.5-next-1721574303.0",
+    "@opensumi/ide-opened-editor": "3.1.5-next-1721574303.0",
+    "@opensumi/ide-outline": "3.1.5-next-1721574303.0",
+    "@opensumi/ide-output": "3.1.5-next-1721574303.0",
+    "@opensumi/ide-overlay": "3.1.5-next-1721574303.0",
+    "@opensumi/ide-preferences": "3.1.5-next-1721574303.0",
+    "@opensumi/ide-quick-open": "3.1.5-next-1721574303.0",
+    "@opensumi/ide-scm": "3.1.5-next-1721574303.0",
+    "@opensumi/ide-search": "3.1.5-next-1721574303.0",
+    "@opensumi/ide-status-bar": "3.1.5-next-1721574303.0",
+    "@opensumi/ide-storage": "3.1.5-next-1721574303.0",
+    "@opensumi/ide-testing": "3.1.5-next-1721574303.0",
+    "@opensumi/ide-theme": "3.1.5-next-1721574303.0",
+    "@opensumi/ide-toolbar": "3.1.5-next-1721574303.0",
+    "@opensumi/ide-variable": "3.1.5-next-1721574303.0",
+    "@opensumi/ide-webview": "3.1.5-next-1721574303.0",
+    "@opensumi/ide-workspace": "3.1.5-next-1721574303.0",
+    "@opensumi/ide-workspace-edit": "3.1.5-next-1721574303.0",
     "@opensumi/textmate-languages": "^2.7.0",
     "tslib": "^2.2.0"
   },

packages/core/src/api/renderApp.tsx

@@ -3,6 +3,7 @@ import { getDebugLogger, IReporterService, localize } from '@opensumi/ide-core-c
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 import { useConstant } from '../core/hooks';
+import { IPropsService, PropsServiceImpl } from '../core/props.service';
 import { Root } from '../core/Root';
 import styles from '../core/style.module.less';
 import { LandingProps, RootProps } from '../core/types';
@@ -61,9 +62,9 @@ export const AppRenderer: React.FC<IAppRendererProps> = ({ onLoad, Landing, ...o
   const app = useConstant(() => createApp(opts));
   const themeType = useConstant(() => app.currentThemeType);
   const appElementRef = useRef<React.FC | null>(null);
+  const propsService = useConstant(() => new PropsServiceImpl<IAppRendererProps>());
+  propsService.props = opts;
 
-  // 确保回调始终为最新
-  // TODO: 用 PropsService
   const runtimeConfig: RuntimeConfig = app.injector.get(RuntimeConfig);
   runtimeConfig.workspace = opts.runtimeConfig.workspace;
 
@@ -72,6 +73,13 @@ export const AppRenderer: React.FC<IAppRendererProps> = ({ onLoad, Landing, ...o
     error?: RootProps['error'];
   }>(() => ({ status: 'loading' }));
 
+  useMemo(() => {
+    app.injector.addProviders({
+      token: IPropsService,
+      useValue: propsService,
+    });
+  }, []);
+
   useEffect(() => {
     app
       .start((appElement) => {

packages/core/src/api/renderDiffViewer.tsx

@@ -0,0 +1,127 @@
+import { deletionLogPath } from '@codeblitzjs/ide-browserfs/lib/backend/OverlayFS';
+import {
+  FILES_DEFAULTS,
+  ModuleConstructor,
+  randomString,
+  SlotLocation,
+  SlotRenderer,
+} from '@opensumi/ide-core-browser';
+import merge from 'lodash/merge';
+import React from 'react';
+import { IDiffViewerProps } from '../core/diff-viewer';
+import { DiffViewerModule } from '../core/diff-viewer/module';
+import { BoxPanel, SplitPanel } from '../editor';
+import { Injector } from '../modules/opensumi__common-di';
+import { AppRenderer, IAppRendererProps } from './renderApp';
+
+export const defaultLayoutConfig = {
+  [SlotLocation.action]: {
+    modules: [''],
+  },
+  [SlotLocation.main]: {
+    modules: ['@opensumi/ide-editor'],
+  },
+  [SlotLocation.extra]: {
+    modules: ['breadcrumb-menu'],
+  },
+};
+
+export function DiffViewerLayoutComponent(): React.ReactElement {
+  return (
+    <BoxPanel direction='top-to-bottom'>
+      <SlotRenderer slot='top' />
+      <SplitPanel overflow='hidden' id='main-horizontal' flex={1}>
+        <SlotRenderer slot='left' defaultSize={310} minResize={204} minSize={49} />
+        <SplitPanel id='main-vertical' minResize={300} flexGrow={1} direction='top-to-bottom'>
+          <SlotRenderer flex={2} flexGrow={1} minResize={200} slot='main' />
+          <SlotRenderer flex={1} minResize={160} slot='bottom' />
+        </SplitPanel>
+      </SplitPanel>
+      <SlotRenderer slot='statusBar' />
+    </BoxPanel>
+  );
+}
+
+export const DiffViewerRenderer = (_props: IDiffViewerProps) => {
+  const props = merge({
+    appConfig: {},
+  }, _props) as IAppRendererProps;
+
+  if (!props.appConfig.injector) {
+    props.appConfig.injector = new Injector();
+  }
+
+  const injector = props.appConfig.injector;
+
+  injector.addProviders({
+    token: IDiffViewerProps,
+    useValue: props,
+  });
+
+  const appConfig = props.appConfig;
+
+  const appModules: ModuleConstructor[] = appConfig?.modules || [];
+  if (!appModules.includes(DiffViewerModule)) {
+    appModules.unshift(DiffViewerModule);
+  }
+  delete appConfig?.modules;
+
+  const workspaceDir = appConfig?.workspaceDir || 'workspace-' + randomString(8);
+  delete (appConfig as Partial<IAppRendererProps['appConfig']>)?.workspaceDir;
+
+  const layoutConfig = appConfig?.layoutConfig || defaultLayoutConfig;
+  delete appConfig?.layoutConfig;
+
+  const layoutComponent = appConfig?.layoutComponent || DiffViewerLayoutComponent;
+  delete appConfig?.layoutComponent;
+
+  const diffViewerAppConfig: IAppRendererProps = merge<IAppRendererProps, Partial<IAppRendererProps>>({
+    appConfig: {
+      modules: appModules,
+      workspaceDir,
+      layoutComponent,
+      layoutConfig,
+      disableRestoreEditorGroupState: true,
+      defaultPreferences: {
+        'general.theme': 'opensumi-design-light-theme',
+        'editor.minimap': false,
+        'ai.native.inlineDiff.preview.mode': 'inlineLive',
+        'editor.autoSave': 'afterDelay',
+        'application.confirmExit': 'never',
+        'editor.guides.bracketPairs': false,
+        'editor.quickSuggestionsDelay': 10,
+        'editor.previewMode': false,
+        'editor.autoSaveDelay': 1000, // one second
+        'editor.fixedOverflowWidgets': true, // widget editor 默认改为 fixed
+        'editor.unicodeHighlight.ambiguousCharacters': false,
+        'editor.preventScrollAfterFocused': true,
+        'files.exclude': {
+          ...FILES_DEFAULTS.filesExclude,
+          // browserfs OverlayFS 用来记录删除的文件
+          [`**${deletionLogPath}`]: true,
+        },
+      },
+    },
+    runtimeConfig: ({
+      aiNative: {
+        enable: true,
+        capabilities: {
+          supportsInlineChat: true,
+        },
+      },
+      startupEditor: 'none',
+      workspace: {
+        filesystem: {
+          fs: 'InMemory',
+          options: {},
+        },
+      },
+    }),
+  }, props);
+
+  return (
+    <AppRenderer
+      {...diffViewerAppConfig}
+    />
+  );
+};

packages/core/src/api/types.ts

@@ -1,19 +1,18 @@
 /// <reference path="../../typings/index.d.ts" />
 
-import { IAppOpts, RuntimeConfig, ClientApp } from '@codeblitzjs/ide-sumi-core';
-import { IAppRenderer } from '@opensumi/ide-core-browser';
 import { IPluginConfig } from '@codeblitzjs/ide-plugin';
-import { ThemeType } from '@opensumi/ide-theme';
+import { ClientApp, IAppOpts, RuntimeConfig } from '@codeblitzjs/ide-sumi-core';
 import { Injector } from '@opensumi/di';
+import { IAppRenderer } from '@opensumi/ide-core-browser';
+import { ThemeType } from '@opensumi/ide-theme';
 
 export type { IPluginAPI, IPluginModule } from '@codeblitzjs/ide-plugin';
 
-export type IAppConfig = Partial<IAppOpts> & {
+export interface IAppConfig extends Partial<IAppOpts> {
   /**
    * 工作空间目录，最好确保不同项目名称不同，如 group/repository 的形式，工作空间目录会挂载到 /workspace 根目录下
    */
   workspaceDir: string;
-} & {
   /**
    * 插件配置
    */
@@ -23,7 +22,7 @@ export type IAppConfig = Partial<IAppOpts> & {
    * extensionOSSPath/publisher.name-version
    */
   extensionOSSPath?: string;
-};
+}
 
 export interface IConfig {
   /**