Skip to content

Commit bc62227

Browse files
author
guqiankun.gqk
committed
chore: 更新示例
1 parent 4fea145 commit bc62227

8 files changed

Lines changed: 162 additions & 70 deletions

File tree

‎packages/alex/src/api/renderApp.tsx‎

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,9 @@ import { REPORT_NAME, RuntimeConfig } from '@alipay/alex-core';
55
import { createApp } from './createApp';
66
import { Root } from '../core/Root';
77
import { RootProps, LandingProps } from '../core/types';
8-
import { setSingleInjector, singleInjector, useConstant } from '../core/hooks';
8+
import { setSingleInjector, singleInjector, useConstant, isRendered, setRendered } from '../core/hooks';
99
import { IConfig, IAppInstance } from './types';
1010
import styles from '../core/style.module.less';
11-
import { setInjector } from '@opensumi/di/dist/helper';
12-
import { Injector } from '@opensumi/di';
1311

1412
export interface IAppRendererProps extends IConfig {
1513
onLoad?(app: IAppInstance): void;
@@ -124,17 +122,17 @@ export const AppRenderer: React.FC<IAppRendererProps> = ({ onLoad, Landing, ...o
124122

125123
// 缓存apprender 每次渲染都不卸载组件
126124
export const AppRenderer2: React.FC<IAppRendererProps> = ({ onLoad, Landing, ...opts }) => {
127-
128-
const app = useConstant(() => createApp({
129-
...opts,
130-
// @ts-ignore
131-
injector: singleInjector
132-
}));
125+
const app = useConstant(() =>
126+
createApp({
127+
...opts,
128+
// @ts-ignore
129+
// injector: singleInjector,
130+
})
131+
);
133132
const themeType = useConstant(() => app.currentThemeType);
134133
const appElementRef = useRef<React.ReactElement | null>(null);
135-
setSingleInjector(app.injector)
134+
// setSingleInjector(app.injector);
136135

137-
console.log('app', app);
138136
// 确保回调始终为最新
139137
// TODO: 用 PropsService
140138
const runtimeConfig: RuntimeConfig = app.injector.get(RuntimeConfig);
@@ -153,6 +151,7 @@ export const AppRenderer2: React.FC<IAppRendererProps> = ({ onLoad, Landing, ...
153151
return Promise.resolve();
154152
})
155153
.then(() => {
154+
setRendered();
156155
onLoad?.(app);
157156
})
158157
.catch((err: Error) => {

‎packages/alex/src/core/hooks.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,3 +22,10 @@ export let singleApp: IAppInstance| null = null
2222
export function setSingleApp(app: IAppInstance){
2323
singleApp = app;
2424
}
25+
26+
export let isRendered = false;
27+
28+
export const setRendered = () => {
29+
isRendered = true;
30+
}
31+

‎packages/core/src/client/override/monacoContextKeyService.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { StandaloneKeybindingServiceProxy } from './monacoOverride/standaloneKey
99
import { ICommandServiceToken } from '@opensumi/ide-monaco/lib/browser/contrib/command';
1010
import { MonacoCodeService } from './monacoOverride/codeEditorService';
1111
import { MonacoCommandService } from '@opensumi/ide-editor/lib/browser/monaco-contrib/command/command.service';
12+
import { isRendered } from '@alipay/alex/lib/core/hooks';
1213
// import { MonacoCodeService, monacoCodeServiceProxy } from './codeEditorService';
1314

1415
export const IMonacoOverrideService = Symbol('IMonacoOverrideService');
@@ -22,6 +23,11 @@ export class MonacoOverrideService implements MonacoContribution {
2223
monacoCodeService: MonacoCodeService;
2324

2425
registerOverrideService(registry: MonacoOverrideServiceRegistry) {
26+
// TODO hack 逻辑
27+
if(isRendered){
28+
return
29+
}
30+
2531
// TODO opensumi ServiceNames
2632
registry.registerOverrideService(
2733
// @ts-ignore

‎packages/core/src/server/core/fs-launch.contribution.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,10 @@ export class FileSystemConfigContribution extends Disposable implements FileSyst
4040
const fsConfig = this.runtimeConfig.workspace?.filesystem;
4141
if (!fsConfig) return;
4242
const { workspaceDir } = this.appConfig;
43+
// @ts-ignore
44+
if (rootFS && rootFS.mountList.includes(workspaceDir)) {
45+
return;
46+
}
4347
try {
4448
const workspaceFS = await BrowserFS.getFileSystem(fsConfig);
4549
rootFS.mount(workspaceDir, workspaceFS);

‎packages/integrations/src/sql/index.tsx‎

Lines changed: 60 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useRef, useState } from 'react';
1+
import React, { useMemo, useRef, useState } from 'react';
22
import ReactDOM from 'react-dom';
33
import { IAppInstance, AppRenderer, SlotLocation, AppRenderer2 } from '@alipay/alex';
44
import '@alipay/alex/languages/sql';
@@ -9,12 +9,12 @@ import {
99
setMonacoEnvironment,
1010
} from '@alipay/alex-sql-service';
1111
import { Button } from '@opensumi/ide-components';
12-
import * as SQLPlugin from './sql.plugin';
12+
import SqlPlugin from './sql.plugin';
1313
import { IEditor } from '@opensumi/ide-editor';
1414
import { Popover, Radio } from 'antd';
1515
import 'antd/dist/antd.css';
1616
import odcTheme from '@alipay/alex/extensions/alex.odc-theme';
17-
import {SQLRender} from './sqlRender'
17+
import { SQLRender } from './sqlRender';
1818

1919
setMonacoEnvironment();
2020

@@ -24,34 +24,15 @@ const layoutConfig = {
2424
},
2525
};
2626

27-
function format() {
28-
SQLPlugin.api.commands?.executeCommand('editor.action.formatDocument');
29-
}
30-
31-
function updatePrefeence(perferenceName, value) {
32-
// 设置首选项
33-
SQLPlugin.api.commands?.executeCommand('alex.setDefaultPreference', perferenceName, value);
34-
}
3527

36-
async function addLine() {
37-
const editor = (await SQLPlugin.api.commands?.executeCommand('alex.sql.editor')) as IEditor;
38-
editor?.monacoEditor.trigger('editor', 'type', { text: '\n' });
39-
}
40-
41-
function openFile() {
42-
/** COMMAND alex.sql.open
43-
* @param {string} uri - 文件uri
44-
* @param {string} content - 文件内容 无内容时创建并注入默认内容
45-
*/
46-
SQLPlugin.api.commands?.executeCommand('alex.sql.open', 'test1.sql', '默认内容');
47-
}
48-
49-
async function editor() {
50-
const editor = (await SQLPlugin.api.commands?.executeCommand('alex.sql.editor')) as IEditor;
51-
console.log(editor?.monacoEditor.getValue());
52-
}
5328

5429
const App = () => {
30+
const PluginID = 1
31+
32+
const SQLPlugin = useMemo(() => {
33+
return new SqlPlugin(PluginID);
34+
}, []);
35+
5536
const [fontValue, setFontValue] = useState(16);
5637
const [encoding, setEncoding] = useState('utf8');
5738
const [editorNumber, setEditorNumber] = useState(1);
@@ -80,6 +61,10 @@ const App = () => {
8061
},
8162
]);
8263
}
64+
65+
66+
67+
8368
const onChangeFont = (e) => {
8469
setFontValue(e.target.value);
8570
updatePrefeence('editor.fontSize', e.target.value);
@@ -91,7 +76,35 @@ const App = () => {
9176

9277
function editorNumberUpdate() {
9378
console.log('editorNumberUpdate', editorNumber);
94-
setEditorNumber(editorNumber+1)
79+
setEditorNumber(editorNumber + 1);
80+
}
81+
82+
83+
function format() {
84+
SQLPlugin.commands?.executeCommand('editor.action.formatDocument');
85+
}
86+
87+
function updatePrefeence(perferenceName, value) {
88+
// 设置首选项
89+
SQLPlugin.commands?.executeCommand('alex.setDefaultPreference', perferenceName, value);
90+
}
91+
92+
async function addLine() {
93+
const editor = (await SQLPlugin.commands?.executeCommand('alex.sql.editor')) as IEditor;
94+
editor?.monacoEditor.trigger('editor', 'type', { text: '\n' });
95+
}
96+
97+
function openFile() {
98+
/** COMMAND alex.sql.open
99+
* @param {string} uri - 文件uri
100+
* @param {string} content - 文件内容 无内容时创建并注入默认内容
101+
*/
102+
SQLPlugin.commands?.executeCommand('alex.sql.open', 'test1.sql', '默认内容');
103+
}
104+
105+
async function editor() {
106+
const editor = (await SQLPlugin.commands?.executeCommand('alex.sql.editor')) as IEditor;
107+
console.log(editor?.monacoEditor.getValue());
95108
}
96109

97110
const content = () => (
@@ -112,7 +125,7 @@ const App = () => {
112125

113126
return (
114127
<div style={{ height: '100%', overflow: 'scroll' }}>
115-
<div style={{ height: '500px' }}>
128+
<div style={{ height: '300px' }}>
116129
<div style={{ margin: '20px' }}>
117130
<Button onClick={() => format()}>格式化</Button>
118131
<Button onClick={() => addLine()}>添加行</Button>
@@ -273,7 +286,7 @@ const App = () => {
273286
'editor.autoSaveDelay': 1000,
274287
'editor.fixedOverflowWidgets': true, // widget editor 默认改为 fixed
275288
'files.encoding': 'utf8', // 默认编码
276-
'editor.fontSize': 12
289+
'editor.fontSize': 12,
277290
},
278291
}}
279292
runtimeConfig={{
@@ -303,12 +316,23 @@ const App = () => {
303316
},
304317
},
305318
}}
306-
/>
319+
/>
307320
</div>
308-
309-
{editorNumber > 1 ? <div><SQLRender/></div> : null }
310-
{editorNumber > 2 ? <div><SQLRender/></div> : null }
311-
321+
{editorNumber > 1 ? (
322+
<div>
323+
<SQLRender />
324+
</div>
325+
) : null}
326+
{editorNumber > 2 ? (
327+
<div>
328+
<SQLRender />
329+
</div>
330+
) : null}
331+
{editorNumber > 3 ? (
332+
<div>
333+
<SQLRender />
334+
</div>
335+
) : null}
312336
</div>
313337
);
314338
};

‎packages/integrations/src/sql/sql.plugin.ts‎

Lines changed: 32 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,35 @@
1-
import type { IPluginAPI } from '@alipay/alex/lib/editor';
1+
import { commands } from 'vscode';
2+
import type { IPluginAPI, IPluginModule } from '@alipay/alex/lib/editor';
23

3-
export const PLUGIN_ID = 'sql-plugin';
4-
let _commands: IPluginAPI['commands'] | null = null;
54

6-
export const api = {
7-
get commands() {
8-
return _commands;
9-
},
10-
};
5+
export default class SQLPlugin implements IPluginModule {
6+
/**
7+
* 插件 ID，用于唯一标识插件
8+
*/
9+
PLUGIN_ID = 'sql-plugin';
10+
private _id: number;
11+
commands: IPluginAPI['commands'];
12+
static api: any;
1113

12-
export const activate = ({ commands }: IPluginAPI) => {
13-
_commands = commands;
14-
commands.registerCommand('alex.update.perference', async (key) => {
15-
return commands.executeCommand('')
16-
});
17-
};
14+
constructor(
15+
id: number
16+
) {
17+
this._id = id;
18+
}
19+
20+
/**
21+
* 激活插件
22+
*/
23+
activate = ({ commands }: IPluginAPI) => {
24+
this.commands = commands;
25+
commands.registerCommand('alex.update.perference', async (key) => {
26+
return commands.executeCommand('')
27+
});
28+
console.log(commands)
29+
};
30+
31+
/**
32+
* 注销插件，可在此时机清理副作用
33+
*/
34+
deactivate() {}
35+
}

‎packages/integrations/src/sql/sqlRender.tsx‎

Lines changed: 37 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { AppRenderer2, SlotLocation } from '@alipay/alex';
2-
import React, { useRef, useState } from 'react';
2+
import React, { useMemo, useRef, useState } from 'react';
33
import ReactDOM from 'react-dom';
44
import '@alipay/alex/languages/sql';
55
import {
@@ -8,16 +8,23 @@ import {
88
supportLanguage,
99
setMonacoEnvironment,
1010
} from '@alipay/alex-sql-service';
11-
import * as SQLPlugin from './sql.plugin';
11+
import SqlPlugin from './sql.plugin';
1212
import { Popover, Radio } from 'antd';
1313
import 'antd/dist/antd.css';
1414
import odcTheme from '@alipay/alex/extensions/alex.odc-theme';
1515
import { Button } from '@opensumi/ide-components';
16+
import { IEditor } from '@opensumi/ide-editor';
1617

1718

1819
let id = 1
1920

2021
export const SQLRender: React.FC = (props) => {
22+
23+
const PluginID = id
24+
const SQLPlugin = useMemo(() => {
25+
return new SqlPlugin(PluginID);
26+
}, []);
27+
2128
let tableID = 123;
2229

2330
const suggestTables = [
@@ -38,17 +45,41 @@ export const SQLRender: React.FC = (props) => {
3845
const [editor, setEditor] = useState(true);
3946

4047
id++
41-
4248
console.log('render sql ==>',id)
4349

50+
51+
async function addLine() {
52+
const editor = (await SQLPlugin.commands?.executeCommand('alex.sql.editor')) as IEditor;
53+
editor?.monacoEditor.trigger('editor', 'type', { text: '\n' });
54+
}
55+
function format() {
56+
SQLPlugin.commands?.executeCommand('editor.action.formatDocument');
57+
}
58+
function openFile() {
59+
/** COMMAND alex.sql.open
60+
* @param {string} uri - 文件uri
61+
* @param {string} content - 文件内容 无内容时创建并注入默认内容
62+
*/
63+
SQLPlugin.commands?.executeCommand('alex.sql.open', 'test1.sql', '默认内容');
64+
}
65+
async function getEditor() {
66+
const editor = (await SQLPlugin.commands?.executeCommand('alex.sql.editor')) as IEditor;
67+
console.log(editor?.monacoEditor.getValue());
68+
}
69+
4470
return (
45-
<div style={{ height: '300px', display: 'flex' }}>
71+
<div style={{ height: '200px', display: 'flex' }}>
4672
<Button style={{ zIndex: '100' }} onClick={() => setEditor(false)}>销毁editor</Button>
73+
<Button style={{ zIndex: '100' }} onClick={() => format()}>格式化</Button>
74+
<Button style={{ zIndex: '100' }} onClick={() => addLine()}>添加行</Button>
75+
<Button style={{ zIndex: '100' }} onClick={() => openFile()}>打开文件</Button>
76+
<Button style={{ zIndex: '100' }} onClick={() => getEditor()}>获取当前内容</Button>
77+
4778
{editor && (
4879
<div style={{ border: '2px solid red', zIndex: '10', width: '100%'}}>
4980
<AppRenderer2
5081
appConfig={{
51-
// plugins: [SQLPlugin],
82+
plugins: [SQLPlugin],
5283
modules: [
5384
SqlServiceModule.Config({
5485
onValidation: (ast: any, markers: any) => {
@@ -197,7 +228,7 @@ export const SQLRender: React.FC = (props) => {
197228
biz: 'sql-service',
198229
// hideEditorTab: true,
199230
scenario: 'ALEX_TEST',
200-
// defaultOpenFile: 'test.sql',
231+
defaultOpenFile: 'test.sql',
201232
hideBreadcrumb: true,
202233
hideLeftTabBar: true,
203234
registerKeybindings: [

0 commit comments

Comments
 (0)