feat: add code document model

Author: winjo

packages/alex/src/core/editor/editor.module.ts

@@ -39,6 +39,7 @@ import { SCMService } from '@ali/ide-scm';
 import { DirtyDiffWidget } from '@ali/ide-scm/lib/browser/dirty-diff/dirty-diff-widget';
 import { IDETheme } from '../../core/extensions';
 import { select, onSelect } from './container';
+import { isCodeDocumentModel, CodeDocumentModel } from './types';
 
 // TODO: 此处 diff 的 stage 和 revertChange 应该是 git 注册的，框架中直接添加了按钮，耦合，需要修复实现 scm/change/title
 // @ts-ignore
@@ -134,7 +135,10 @@ class EditorSpecialContribution
     } = BrowserFS;
     const [editorSystem, memSystem] = await Promise.all([
       createFileSystem(Editor, {
-        readFile: select((props) => props.documentModel.readFile),
+        readFile: (filepath: string) => {
+          const slashIndex = filepath.indexOf('/');
+          return select((props) => props.documentModel.readFile)(filepath.slice(slashIndex + 1));
+        },
       }),
       createFileSystem(InMemory, {}),
     ]);
@@ -185,15 +189,25 @@ class EditorSpecialContribution
   }
 
   onDidRestoreState() {
-    const filepath = select((props) => props.documentModel.filepath);
-    if (filepath) {
-      this.openEditor(filepath);
-    }
+    const documentModel = select((props) => props.documentModel);
 
-    // 监听 props 变化
-    onSelect((props) => props.documentModel.filepath)((newFilepath) => {
-      this.openEditor(newFilepath);
-    });
+    if (isCodeDocumentModel(documentModel)) {
+      this.openCodeEditor(documentModel.ref, documentModel.filepath);
+      // 监听 props 变化
+      onSelect(
+        (props) => props.documentModel,
+        (newModel: CodeDocumentModel, oldModel: CodeDocumentModel) =>
+          newModel.filepath === oldModel.filepath && newModel.ref === oldModel.ref
+      )((newModel: CodeDocumentModel) => {
+        this.openCodeEditor(newModel.ref, newModel.filepath);
+      });
+    } else {
+      this.openEditor(documentModel.filepath);
+      // 监听 props 变化
+      onSelect((props) => props.documentModel.filepath)((newFilepath) => {
+        this.openEditor(newFilepath);
+      });
+    }
 
     onSelect((props) => props.documentModel.encoding)((encoding) => {
       if (encoding) {
@@ -208,12 +222,18 @@ class EditorSpecialContribution
   }
 
   private openEditor(relativePath: string) {
+    if (!relativePath) return;
     const uri = URI.file(path.join(this.appConfig.workspaceDir, relativePath));
     this.editorService.open(uri, {
       preview: true,
     });
   }
 
+  private openCodeEditor(ref: string, filepath: string) {
+    if (!ref || !filepath) return;
+    return this.openEditor(`${encodeURIComponent(ref)}/${filepath}`);
+  }
+
   dispose() {
     this.disposables.forEach((disposer) => disposer.dispose());
   }

packages/alex/src/core/editor/types.ts

@@ -1,9 +1,28 @@
+import { Thenable } from '../types';
+
 export interface DocumentModel {
   filepath: string;
-  readFile(path: string): Uint8Array | Thenable<Uint8Array>;
+  readFile(filepath: string): Uint8Array | Thenable<Uint8Array>;
   encoding?: 'gbk' | 'utf8';
 }
 
+export interface FSDocumentModel extends DocumentModel {
+  type?: 'fs';
+}
+
+export interface CodeDocumentModel extends DocumentModel {
+  type: 'code';
+  ref: string;
+  owner: string;
+  name: string;
+}
+
 export interface EditorProps {
-  documentModel: DocumentModel;
+  documentModel: FSDocumentModel | CodeDocumentModel;
 }
+
+export const isCodeDocumentModel = (
+  model: EditorProps['documentModel']
+): model is CodeDocumentModel => {
+  return 'type' in model && model.type === 'code';
+};

packages/alex/src/core/types.ts

@@ -11,3 +11,14 @@ export interface LandingProps {
 export interface RootProps extends LandingProps {
   Landing?: ComponentType<LandingProps>;
 }
+
+export interface Thenable<T> {
+  then<TResult>(
+    onfulfilled?: (value: T) => TResult | Thenable<TResult>,
+    onrejected?: (reason: any) => TResult | Thenable<TResult>
+  ): Thenable<TResult>;
+  then<TResult>(
+    onfulfilled?: (value: T) => TResult | Thenable<TResult>,
+    onrejected?: (reason: any) => void
+  ): Thenable<TResult>;
+}

packages/alex/src/integration/editor/index.tsx

@@ -13,25 +13,20 @@ import 'antd/lib/spin/style/index.css';
 
 (window as any).alex = Alex;
 
-const project = encodeURIComponent('ide-s/TypeScript-Node-Starter');
+const owner = 'ide-s';
+const name = 'TypeScript-Node-Starter';
+const project = encodeURIComponent(`${owner}/${name}`);
 
 const App = () => {
   const [ref, setRef] = useState('');
   const [filepath, setFilePath] = useState('');
   const [encoding, setEncoding] = useState<'utf8' | 'gbk' | undefined>('utf8');
 
-  const path = useMemo(() => (ref && filepath ? `${encodeURIComponent(ref)}/${filepath}` : ''), [
-    ref,
-    filepath,
-  ]);
-
-  const readFile = async (path: string) => {
-    const i = path.indexOf('/');
+  const readFile = async (filepath: string) => {
     const res = await fetch(
-      `/code-service/api/v3/projects/${project}/repository/blobs/${path.slice(
-        0,
-        i
-      )}?filepath=${path.slice(i + 1)}`
+      `/code-service/api/v3/projects/${project}/repository/blobs/${encodeURIComponent(
+        ref
+      )}?filepath=${filepath}`
     );
     if (res.status >= 200 && res.status < 300) {
       return res.arrayBuffer();
@@ -112,10 +107,14 @@ const App = () => {
             biz: 'editor',
             scenario: null,
             startupEditor: 'none',
-            hideEditorTab: true,
+            // hideEditorTab: true,
           }}
           documentModel={{
-            filepath: path,
+            type: 'code',
+            ref,
+            owner,
+            name,
+            filepath,
             readFile,
             encoding,
           }}