feat: add code component example

package.json

@@ -19,6 +19,7 @@
     "generate": "node scripts/generate",
     "editor": "INTEGRATION=editor npm run dev",
     "fs": "INTEGRATION=filesystem npm run dev",
+    "code": "INTEGRATION=code 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",

packages/common/src/request/index.ts

@@ -86,7 +86,13 @@ const requestImpl: any = async (url: string, options?: RequestOptions) => {
     opts.headers = headers;
   }
 
-  const response = await fetch(urlInstance.toString(), opts);
+  let inputUrl = urlInstance.toString();
+  if (url.startsWith('/')) {
+    // 如果是相对路径，则移除掉 origin, 不破坏用户的期望输出
+    inputUrl = urlInstance.pathname + urlInstance.search + urlInstance.hash;
+  }
+
+  const response = await fetch(inputUrl, opts);
 
   const validateStatus = options.validateStatus || defaultValidateStatus;
 
@@ -99,7 +105,7 @@ const requestImpl: any = async (url: string, options?: RequestOptions) => {
     throw new ResponseError(
       resMsg?.message || response.statusText || 'Request Error',
       'ResponseError',
-      { url: urlInstance.toString(), ...opts },
+      { url: inputUrl, ...opts },
       response,
     );
   }

packages/core/src/api/createApp.tsx

@@ -42,7 +42,7 @@ import { IAppInstance, IConfig } from './types';
 export { BoxPanel, SlotLocation, SlotRenderer, SplitPanel };
 
 export const getDefaultAppConfig = (): IAppOpts => ({
-  modules,
+  modules: modules.slice(),
   useCdnIcon: true,
   noExtHost: true,
   extWorkerHost: EXT_WORKER_HOST,

packages/core/src/api/opts.ts

@@ -1,6 +1,16 @@
 import { AINativeServerModule, IAppOpts, RuntimeConfig } from '@codeblitzjs/ide-sumi-core';
 import { AINativeModule } from '@opensumi/ide-ai-native/lib/browser';
+import { ModuleConstructor } from '@opensumi/ide-core-browser';
 import { DesignModule } from '@opensumi/ide-design/lib/browser';
+import { OpenedEditorModule } from '@opensumi/ide-opened-editor/lib/browser';
+import { OutlineModule } from '@opensumi/ide-outline/lib/browser';
+
+function removeModule(modules: ModuleConstructor[], module: ModuleConstructor) {
+  const index = modules.indexOf(module);
+  if (index > -1) {
+    modules.splice(index, 1);
+  }
+}
 
 export function interceptAppOpts(opts: IAppOpts, runtimeConfig: RuntimeConfig) {
   const { modules } = opts;
@@ -16,10 +26,14 @@ export function interceptAppOpts(opts: IAppOpts, runtimeConfig: RuntimeConfig) {
 
   if (opts.useLegacyDesign) {
     // remove design module
-    const index = newModules.indexOf(DesignModule);
-    if (index > -1) {
-      newModules.splice(index, 1);
-    }
+    removeModule(newModules, DesignModule);
+  }
+
+  if (opts.useSimplifyExplorerPanel) {
+    // remove outline module
+    removeModule(newModules, OutlineModule);
+    // remove opened editor module
+    removeModule(newModules, OpenedEditorModule);
   }
 
   opts.modules = newModules;

packages/core/src/api/renderApp.tsx

@@ -1,6 +1,7 @@
 import { REPORT_NAME, RuntimeConfig } from '@codeblitzjs/ide-sumi-core';
 import { getDebugLogger, IReporterService, localize } from '@opensumi/ide-core-common';
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import cls from 'classnames';
+import React, { CSSProperties, useEffect, useMemo, useRef, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 import { useConstant } from '../core/hooks';
 import { IPropsService, PropsServiceImpl } from '../core/props.service';
@@ -13,6 +14,9 @@ import { IAppInstance, IConfig } from './types';
 export interface IAppRendererProps extends IConfig {
   onLoad?(app: IAppInstance): void;
   Landing?: React.ComponentType<LandingProps>;
+
+  style?: CSSProperties;
+  className?: string;
 }
 
 export const renderApp = (domElement: HTMLElement, props: IAppRendererProps) => {
@@ -117,7 +121,13 @@ export const AppRenderer: React.FC<IAppRendererProps> = ({ onLoad, Landing, ...o
   );
 
   return (
-    <Root {...state} theme={themeType} Landing={Landing} className={rootClassName}>
+    <Root
+      {...state}
+      theme={themeType}
+      Landing={Landing}
+      className={cls(rootClassName, opts.className)}
+      style={opts.style}
+    >
       {appElementRef.current ? <appElementRef.current /> : null}
     </Root>
   );

packages/core/src/api/renderDiffViewer.tsx

@@ -1,4 +1,5 @@
 import { deletionLogPath } from '@codeblitzjs/ide-browserfs/lib/backend/OverlayFS';
+import { Injector } from '@opensumi/di';
 import {
   FILES_DEFAULTS,
   ModuleConstructor,
@@ -11,19 +12,13 @@ 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 '@opensumi/di';
 import { AppRenderer, IAppRendererProps } from './renderApp';
 import '../core/diff-viewer/languages-patch';
+import { RuntimeConfig } from '@codeblitzjs/ide-sumi-core';
 import { extensionMetadata } from '../core/diff-viewer/extension-patch';
 
-export {
-  IDiffViewerProps,
-} from '../core/diff-viewer/common';
-export type {
-  IDiffViewerHandle,
-  IDiffViewerTab,
-  IExtendPartialEditEvent,
-} from '../core/diff-viewer/common';
+export { IDiffViewerProps } from '../core/diff-viewer/common';
+export type { IDiffViewerHandle, IDiffViewerTab, IExtendPartialEditEvent } from '../core/diff-viewer/common';
 
 export const defaultLayoutConfig = {
   [SlotLocation.action]: {
@@ -56,6 +51,10 @@ export function DiffViewerLayoutComponent(): React.ReactElement {
 export const DiffViewerRenderer = (_props: IDiffViewerProps) => {
   const props = merge({
     appConfig: {},
+    runtimeConfig: {
+      onWillApplyTheme: _props.onWillApplyTheme,
+      tabBarRightExtraContent: _props.tabBarRightExtraContent,
+    } as RuntimeConfig,
   }, _props) as IAppRendererProps;
 
   if (!props.appConfig.injector) {
@@ -71,10 +70,14 @@ export const DiffViewerRenderer = (_props: IDiffViewerProps) => {
 
   const appConfig = props.appConfig;
 
-  const appModules: ModuleConstructor[] = appConfig?.modules || [];
+  let appModules: ModuleConstructor[] = appConfig?.modules || [];
   if (!appModules.includes(DiffViewerModule)) {
-    appModules.unshift(DiffViewerModule);
+    appModules = [
+      DiffViewerModule,
+      ...appModules,
+    ];
   }
+
   delete appConfig?.modules;
 
   const workspaceDir = appConfig?.workspaceDir || 'workspace-' + randomString(8);
@@ -98,7 +101,7 @@ export const DiffViewerRenderer = (_props: IDiffViewerProps) => {
         'general.theme': 'opensumi-light',
         'editor.minimap': false,
         'ai.native.inlineDiff.preview.mode': 'inlineLive',
-        "editor.showActionWhenGroupEmpty": true,
+        'editor.showActionWhenGroupEmpty': true,
         'editor.autoSave': 'afterDelay',
         'application.confirmExit': 'never',
         'editor.guides.bracketPairs': false,

packages/core/src/core/Root.tsx

@@ -16,7 +16,7 @@ export const Root: FC<RootProps> = (props) => {
   return (
     <codeblitz-root
       class={`codeblitz-root ${themeType ? `codeblitz-${themeType}` : ''} ${props.className ?? ''}`}
-      style={{ width: '100%', height: '100%' }}
+      style={{ width: '100%', height: '100%', ...props.style }}
       data-meta-version={VERSION}
     >
       {(props.status === 'loading' || props.status === 'error') && <LandingComponent {...props} />}

packages/core/src/core/diff-viewer/common.ts

@@ -1,5 +1,5 @@
 import { IPluginConfig } from '@codeblitzjs/ide-plugin';
-import { IAppOpts, RuntimeConfig } from '@codeblitzjs/ide-sumi-core';
+import { IAppOpts, IExtraContent, RuntimeConfig } from '@codeblitzjs/ide-sumi-core';
 import { IPartialEditEvent } from '@opensumi/ide-ai-native/lib/browser/widget/inline-stream-diff/live-preview.component';
 import { Event, URI } from '@opensumi/ide-core-common';
 import { IResourceOpenOptions } from '@opensumi/ide-editor';
@@ -33,6 +33,8 @@ export interface ITabChangedEvent {
    * -1 为没有标签页
    */
   currentIndex: number;
+
+  diffNum: number;
 }
 
 export interface IDiffViewerHandle {
@@ -112,11 +114,6 @@ export interface IOverrideAppRendererProps extends IOverrideAppRendererConfig {
   Landing?: React.ComponentType<LandingProps>;
 }
 
-export interface IExtraContent {
-  component?: React.ComponentType<any>;
-  initialProps?: any;
-}
-
 export const IDiffViewerProps = Symbol('IDiffViewerProps');
 export interface IDiffViewerProps extends Partial<IOverrideAppRendererProps> {
   onRef: (handle: IDiffViewerHandle) => void;

packages/core/src/core/diff-viewer/internal/base.ts

@@ -20,6 +20,7 @@ import { Autowired } from '@opensumi/di';
 import { InlineChatController } from '@opensumi/ide-ai-native/lib/browser/widget/inline-chat/inline-chat-controller';
 import { LiveInlineDiffPreviewer } from '@opensumi/ide-ai-native/lib/browser/widget/inline-diff/inline-diff-previewer';
 import { InlineDiffHandler } from '@opensumi/ide-ai-native/lib/browser/widget/inline-diff/inline-diff.handler';
+import { InlineStreamDiffHandler } from '@opensumi/ide-ai-native/lib/browser/widget/inline-stream-diff/inline-stream-diff.handler';
 import { EResultKind } from '@opensumi/ide-ai-native/lib/common';
 import { IMenuRegistry, MenuContribution } from '@opensumi/ide-core-browser/lib/menu/next';
 import { IEditor, IEditorDocumentModelService } from '@opensumi/ide-editor/lib/browser';
@@ -232,10 +233,25 @@ export class DiffViewerContribution implements CommandContribution, ClientAppCon
         newPath = this.stripDirectory(newPath);
       }
 
-      this._onDidTabChange.fire({
+      const event = {
         newPath,
         currentIndex,
-      });
+        diffNum: 0,
+      };
+
+      if (e?.uri) {
+        const resourceDiff = (this.inlineDiffHandler as any)._previewerNodeStore.get(e?.uri.toString()) as
+          | InlineStreamDiffHandler
+          | null;
+
+        if (resourceDiff) {
+          const snapshot = resourceDiff.createSnapshot();
+          const unresolved = snapshot.decorationSnapshotData.partialEditWidgetList.filter(v => v.status === 'pending');
+          event.diffNum = unresolved.length;
+        }
+      }
+
+      this._onDidTabChange.fire(event);
     }));
 
     const sequencer = new Sequencer();

packages/core/src/core/diff-viewer/module.ts

@@ -2,14 +2,12 @@ import { BrowserModule } from '@opensumi/ide-core-browser';
 
 import { Injectable } from '@opensumi/di';
 import { DiffViewerContribution } from './internal/base';
-import { DiffViewerComponentContribution } from './internal/component.provider';
 import { DiffViewerThemeProvider } from './internal/theme.provider';
 
 @Injectable()
 export class DiffViewerModule extends BrowserModule {
   providers = [
     DiffViewerContribution,
     DiffViewerThemeProvider,
-    DiffViewerComponentContribution,
   ];
 }

packages/core/src/core/internal/codeblitz.module.ts

@@ -1,11 +1,14 @@
 import { RuntimeConfig } from '@codeblitzjs/ide-sumi-core';
 import { Autowired, Injectable, Provider } from '@opensumi/di';
 import { BrowserModule, Domain, KeybindingContribution, KeybindingRegistry } from '@opensumi/ide-core-browser';
+import { ComponentContribution, ComponentRegistry } from '@opensumi/ide-core-browser';
+import { TabbarRightExtraContentId } from '@opensumi/ide-editor';
+import { ITheme, ThemeContributionProvider } from '@opensumi/ide-theme';
 import { CodeBlitzCommandContribution } from '../commands';
 import { ExtensionActivateContribution } from '../extension/extension.contribution';
 
-@Domain(KeybindingContribution)
-class CodeBlitzContribution implements KeybindingContribution {
+@Domain(KeybindingContribution, ThemeContributionProvider, ComponentContribution)
+class CodeBlitzContribution implements KeybindingContribution, ThemeContributionProvider, ComponentContribution {
   @Autowired(RuntimeConfig)
   private readonly runtimeConfig: RuntimeConfig;
 
@@ -21,6 +24,20 @@ class CodeBlitzContribution implements KeybindingContribution {
       keybindings.registerKeybindings(this.runtimeConfig.registerKeybindings);
     }
   }
+
+  registerComponent(registry: ComponentRegistry) {
+    if (this.runtimeConfig.tabBarRightExtraContent) {
+      registry.register(TabbarRightExtraContentId, {
+        id: TabbarRightExtraContentId,
+        component: this.runtimeConfig.tabBarRightExtraContent.component,
+        initialProps: this.runtimeConfig.tabBarRightExtraContent.initialProps,
+      });
+    }
+  }
+
+  onWillApplyTheme(theme: ITheme): Record<string, string | undefined> {
+    return this.runtimeConfig?.onWillApplyTheme?.(theme) || {};
+  }
 }
 
 @Injectable()

packages/core/src/core/modules.ts

@@ -75,11 +75,9 @@ export const modules: ModuleConstructor[] = [
   DebugModule,
   VariableModule,
   KeymapsModule,
-  // TerminalNextModule,
 
   // Extension Modules
   ExtensionModule,
-  // FeatureExtensionModule,
   ExtensionClientManagerModule,
   MonacoEnhanceModule,
 
@@ -88,7 +86,6 @@ export const modules: ModuleConstructor[] = [
   // addons
   ClientAddonModule,
   CommentsModule,
-  // TaskModule,
 
   // CodeBlitz
   ClientModule,

packages/core/src/core/types.ts

@@ -11,4 +11,5 @@ export interface LandingProps {
 export interface RootProps extends LandingProps {
   Landing?: ComponentType<LandingProps>;
   children?: React.ReactNode;
+  style?: React.CSSProperties;
 }

packages/startup/package.json

@@ -11,15 +11,15 @@
     "opensumi codeblitzjs"
   ],
   "dependencies": {
-    "@ant-design/icons": "^4.0.0",
+    "@ant-design/icons": "^5.4.0",
     "@codeblitzjs/ide-cli": "workspace:*",
     "@codeblitzjs/ide-code-api": "workspace:*",
     "@codeblitzjs/ide-code-service": "workspace:*",
     "@codeblitzjs/ide-common": "workspace:*",
     "@codeblitzjs/ide-core": "workspace:*",
     "@codeblitzjs/ide-i18n": "workspace:*",
     "@codeblitzjs/ide-sumi-core": "workspace:*",
-    "antd": "^4.0.0",
+    "antd": "^5.20.2",
     "lodash": "^4.17.21",
     "tslib": "^2.2.0"
   },