chore: add provider example (#178)

Author: winjo

packages/startup/src/provider/index.tsx

@@ -1,67 +1,75 @@
 import { AppProvider, CodeEditor, DiffEditor } from '@codeblitzjs/ide-core';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 import '@codeblitzjs/ide-core/languages';
-import { SampleModule } from './module'
+import { SampleModule, diffsDeferred } from './module'
 import '../index.css';
 import './index.css'
 
-const App = () => (
-  <AppProvider
-    appConfig={{
-      workspaceDir: 'my-workspace',
-      layoutConfig: {},
-      modules: [SampleModule],
-    }}
-    runtimeConfig={{
-      biz: 'startup',
-      workspace: {
-        filesystem: {
-          fs: 'FileIndexSystem',
-          options: {
-            // 初始全量文件索引
-            requestFileIndex() {
-              return Promise.resolve({
-                'main.html': '<div id="root"></div>',
-                'main.css': 'body {}',
-                'main.js': 'console.log("main")',
-                'package.json': '{\n  "name": "startup"\n}',
-              });
-            },
-          },
-        }
-      },
-    }}
-  >
-    <CodeEditor
-      uri="main.js"
-      style={{ width: 1000, height: 300, marginBottom: 16 }}
-      editorOptions={{
-        scrollbar: {
-          alwaysConsumeMouseWheel: false
-        }
+const App = () => {
+  const [diffs, setDiffs] = useState<{filePath: string, oldFileContent: string | null, newFileContent: string | null }[]>([])
+
+  useEffect(() => {
+    setTimeout(() => {
+      const diffs = [{
+        filePath: 'a.js',
+        oldFileContent: null,
+        newFileContent: 'console.log(123)'
+      }, {
+        filePath: 'a1.js',
+        oldFileContent: 'const add = (x, y) => {\n  return x + y\n}',
+        newFileContent: 'const add = (x, y) => {\n  return x + y + 1\n}'
+      }]
+      setDiffs(diffs)
+      diffsDeferred.resolve(diffs)
+    }, 1000)
+  }, [])
+
+  if (!diffs) return null
+
+  return (
+    <AppProvider
+      appConfig={{
+        workspaceDir: 'my-workspace',
+        layoutConfig: {},
+        modules: [SampleModule],
       }}
-    />
-    <CodeEditor
-      uri="main.css"
-      style={{ width: 1000, height: 300 }}
-      editorOptions={{
-        scrollbar: {
-          alwaysConsumeMouseWheel: false
-        }
+      runtimeConfig={{
+        biz: 'startup',
       }}
-    />
-    <DiffEditor
-      originalUri="sample:/a1.js"
-      modifiedUri="sample:/a2.js"
-      editorOptions={{
-        scrollbar: {
-          alwaysConsumeMouseWheel: false
+    >
+      {diffs.map(({ filePath, oldFileContent, newFileContent }) => {
+        if (!oldFileContent) {
+          return (
+            <CodeEditor
+              key={filePath}
+              uri={`sample://new/${filePath}`}
+              style={{ width: 1000, height: 300, marginBottom: 16 }}
+              editorOptions={{
+                scrollbar: {
+                  alwaysConsumeMouseWheel: false
+                }
+              }}
+            />
+          )
+        } else {
+          return (
+            <DiffEditor
+              key={filePath}
+              originalUri={`sample://old/${filePath}`}
+              modifiedUri={`sample://new/${filePath}`}
+              editorOptions={{
+                scrollbar: {
+                  alwaysConsumeMouseWheel: false
+                }
+              }}
+              style={{ width: 1000, height: 300 }}
+            />
+          )
         }
-      }}
-      style={{ width: 1000, height: 300 }}
-    />
-  </AppProvider>
-);
+      })}
+    </AppProvider>
+  )
+};
 
 createRoot(document.getElementById('main') as HTMLElement).render(<App />);

packages/startup/src/provider/module.ts

@@ -1,18 +1,9 @@
 import { Autowired, Injectable, Provider } from '@opensumi/di';
 import { BrowserModule } from '@opensumi/ide-core-browser';
 import { IEditorDocumentModelContentProvider, BrowserEditorContribution, IEditorDocumentModelContentRegistry } from '@opensumi/ide-editor/lib/browser'
-import { URI, Emitter, Event, Domain } from '@opensumi/ide-core-common'
+import { URI, Emitter, Event, Domain, Deferred } from '@opensumi/ide-core-common'
 
-const contentMap = {
-  'a1.js': `const add = (x, y) => {
-  return x + y
-}
-`,
-  'a2.js': `const add = (x, y) => {
-  return x + y + 1
-}
-`,
-}
+export const diffsDeferred = new Deferred<{filePath: string, oldFileContent: string | null, newFileContent: string }[]>()
 
 @Injectable()
 export class SampleSchemeDocumentProvider implements IEditorDocumentModelContentProvider {
@@ -21,11 +12,15 @@ export class SampleSchemeDocumentProvider implements IEditorDocumentModelContent
   }
 
   async provideEditorDocumentModelContent(uri: URI): Promise<string> {
-    return contentMap[uri.codeUri.path.slice(1)]
+    const diffs = await diffsDeferred.promise
+    const diff = diffs.find(item => item.filePath === uri.codeUri.path.slice(1))
+    if (!diff) return ''
+    if (uri.authority === 'new') return diff.newFileContent
+    return diff.oldFileContent || ''
   }
 
   isReadonly() {
-    return true;
+    return false;
   }
 
   private _onDidChangeContent: Emitter<URI> = new Emitter();