Skip to content

Commit

Permalink
Docs/integrating samples (#95)
Browse files Browse the repository at this point in the history 
* docs: add samples of integrating

* docs: add integrating docs

* docs: update README

* docs: improve doc

* docs: format md file indent
  • Loading branch information
@HaydenOrz
HaydenOrz authored Dec 20, 2023
1 parent 2120108 commit 8558d1c
Show file tree
Hide file tree
Showing 35 changed files with 21,916 additions and 360 deletions.
217 changes: 36 additions & 181 deletions README-zh_CN.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ Monaco SQL Languages 是一个基于 Monaco Editor 的 SQL 语言项目，从 [m

## 安装

```shell
```bash
npm install monaco-sql-languages
```

Expand All @@ -60,203 +60,56 @@ npm install monaco-sql-languages

## 集成

- [集成 ESM 版本](https://github.com/microsoft/monaco-editor/blob/main/docs/integrate-esm.md)
- [集成 AMD 版本](https://github.com/microsoft/monaco-editor/blob/main/docs/integrate-amd.md#integrating-the-amd-version-of-the-monaco-editor)

### 使用 Monaco Editor WebPack Plugin

- 安装 Monaco Editor Webpack Plugin

```shell
npm install monaco-editor-webpack-plugin
```

- 在 Webpack 配置中应用 Monaco Editor Webpack Plugin

```typescript
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
const path = require('path');
const monacoWebpackPlugin = new MonacoWebpackPlugin({
features: [], // 包含你所需要的 Monaco Editor 功能
languages: [], // 包含你所需要的 Monaco Editor 内置语言功能
customLanguages: [
// 包含 Monaco SQL Languages 所提供的语言功能
{
label: 'mysql',
entry: 'monaco-sql-languages/out/esm/mysql/mysql.contribution',
worker: {
id: 'monaco-sql-languages/out/esm/mysql/mySQLWorker',
entry: 'monaco-sql-languages/out/esm/mysql/mysql.worker'
}
},
{
label: 'flinksql',
entry: 'monaco-sql-languages/out/esm/flinksql/flinksql.contribution',
worker: {
id: 'monaco-sql-languages/out/esm/flinksql/flinkSQLWorker',
entry: 'monaco-sql-languages/out/esm/flinksql/flinksql.worker'
}
},
{
label: 'sparksql',
entry: 'monaco-sql-languages/out/esm/sparksql/sparksql.contribution',
worker: {
id: 'monaco-sql-languages/out/esm/sparksql/sparkSQLWorker',
entry: 'monaco-sql-languages/out/esm/sparksql/sparksql.worker'
}
},
{
label: 'hivesql',
entry: 'monaco-sql-languages/out/esm/hivesql/hivesql.contribution',
worker: {
id: 'monaco-sql-languages/out/esm/hivesql/hiveSQLWorker',
entry: 'monaco-sql-languages/out/esm/hivesql/hivesql.worker'
}
},
{
label: 'trinosql',
entry: 'monaco-sql-languages/out/esm/trinosql/trinosql.contribution',
worker: {
id: 'monaco-sql-languages/out/esm/trinosql/TrinoSQLWorker',
entry: 'monaco-sql-languages/out/esm/trinosql/trinosql.worker'
}
},
{
label: 'pgsql',
entry: 'monaco-sql-languages/out/esm/pgsql/pgsql.contribution',
worker: {
id: 'monaco-sql-languages/out/esm/pgsql/PgSQLWorker',
entry: 'monaco-sql-languages/out/esm/pgsql/pgsql.worker'
}
},
{
label: 'impalasql',
entry: 'monaco-sql-languages/out/esm/impalasql/impalasql.contribution',
worker: {
id: 'monaco-sql-languages/out/esm/impalasql/impalaSQLWorker',
entry: 'monaco-sql-languages/out/esm/impalasql/impalasql.worker'
}
}
]
});
module.exports = {
entry: './index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'app.js'
},
module: {},
plugins: [monacoEditorPlugin] // 应用 monacoEditorPlugin
};
```

更多 Monaco Editor Webpack Plugin 的选项, 看[这里](https://github.com/microsoft/monaco-editor/tree/main/webpack-plugin#options).

### 普通方式使用 Webpack

以 webpack entry 的方式输出 worker 文件

```typescript
entry: {
'mysql.worker': 'monaco-sql-languages/out/esm/mysql/mysql.worker.js',
'flinksql.worker': 'monaco-sql-languages/out/esm/flinksql/flinksql.worker.js',
'sparksql.worker': 'monaco-sql-languages/out/esm/sparksql/sparksql.worker.js',
'hivesql.worker': 'monaco-sql-languages/out/esm/hivesql/hivesql.worker.js',
'trinosql.worker': 'monaco-sql-languages/out/esm/trinosql/trinosql.worker.js',
'pgsql.worker': 'monaco-sql-languages/out/esm/pgsql/pgsql.worker.js',
'impalasql.worker': 'monaco-sql-languages/out/esm/impalasql/impalasql.worker.js',
'editor.worker': 'monaco-editor/esm/vs/editor/editor.worker.js',
},
```

定义全局变量 `MonacoEnvironment` 并指定 worker 文件的路径

```typescript
window.MonacoEnvironment = {
getWorkerUrl: function (moduleId, label) {
switch (label) {
case 'mysql': {
return './mysql.worker.js';
}
case 'sparksql': {
return './sparksql.worker.js';
}
case 'flinksql': {
return './flinksql.worker.js';
}
case 'hivesql': {
return './hivesql.worker.js';
}
case 'trinosql': {
return './trinosql.worker.js';
}
case 'pgsql': {
return './pgsql.worker.js';
}
case 'impalasql': {
return './impalasql.worker.js'
}
default: {
return './editor.worker.js';
}
}
}
};
```
### 使用 Vite
Vite 使用示例看 <https://github.com/DTStack/monaco-sql-languages/blob/main/website/src/languageWorker.ts>
- [集成 Monaco SQL Languages 的 ESM 版本](./documents/intgrate-esm.zh-CN.md)
- [Monaco SQL Languages 集成问题修复](./documents/problem-solving.zh-CN.md)

<br/>

## 使用

1. **导入语言的 contributions 文件**

> Tips: 如果通过 MonacoEditorWebpackPlugin 来集成，插件会帮助我们自动引入相应的 contribution 文件。如果使用其他方式集成，则需要手动引入相应的 contribution 文件。
> Tips: 如果通过 MonacoEditorWebpackPlugin 来集成，插件会帮助我们自动引入相应的 contribution 文件。如果使用其他方式集成，则需要手动引入相应的 contribution 文件。
```typescript
import 'monaco-sql-languages/out/esm/mysql/mysql.contribution';
import 'monaco-sql-languages/out/esm/flinksql/flinksql.contribution';
import 'monaco-sql-languages/out/esm/sparksql/sparksql.contribution';
import 'monaco-sql-languages/out/esm/hivesql/hivesql.contribution';
import 'monaco-sql-languages/out/esm/trinosql/trinosql.contribution';
import 'monaco-sql-languages/out/esm/impalasql/impalasql.contribution';
import 'monaco-sql-languages/out/esm/flinksql/flinksql.contribution';
import 'monaco-sql-languages/out/esm/sparksql/sparksql.contribution';
import 'monaco-sql-languages/out/esm/hivesql/hivesql.contribution';
import 'monaco-sql-languages/out/esm/trinosql/trinosql.contribution';
import 'monaco-sql-languages/out/esm/impalasql/impalasql.contribution';
import 'monaco-sql-languages/out/esm/pgsql/pgsql.contribution';

// 或者你可以通过下面的方式一次性导入所有的语言功能
// 或者你可以通过下面的方式一次性导入所有的语言功能
// import 'monaco-sql-languages/out/esm/monaco.contribution';
```

2. **设置语言功能**

你可以通过 `setupLanguageFeatures` 设置语言功能，比如禁用 FlinkSQL 语言的自动补全功能。
```typescript
import {
setupLanguageFeatures,
LanguageIdEnum,
} from 'monaco-sql-languages';
你可以通过 `setupLanguageFeatures` 设置语言功能，比如禁用 FlinkSQL 语言的自动补全功能。
```typescript
import {
setupLanguageFeatures,
LanguageIdEnum,
} from 'monaco-sql-languages';
setupLanguageFeatures({
languageId: LanguageIdEnum.FLINK,
completionItems: false
})
```
setupLanguageFeatures({
languageId: LanguageIdEnum.FLINK,
completionItems: false
})
```

默认情况下，自动补全功能只提供关键字自动补全, 但你可以通过设置 `completionService` 自定义自动补全项。
默认情况下，自动补全功能只提供关键字自动补全, 但你可以通过设置 `completionService` 自定义自动补全项。

```typescript
import { languages } from 'monaco-editor/esm/vs/editor/editor.api';
import {
setupLanguageFeatures,
LanguageIdEnum,
CompletionService,
ICompletionItem,
SyntaxContextType
} from 'monaco-sql-languages';
setupLanguageFeatures,
LanguageIdEnum,
CompletionService,
ICompletionItem,
SyntaxContextType
} from 'monaco-sql-languages';
const completionService: CompletionService = function (
model,
Expand Down Expand Up @@ -294,9 +147,9 @@ Vite 使用示例看 <https://github.com/DTStack/monaco-sql-languages/blob/main/
};
setupLanguageFeatures({
languageId: LanguageIdEnum.FLINK,
completionService: completionService,
})
languageId: LanguageIdEnum.FLINK,
completionService: completionService,
})
```

3. **创建 Monaco Editor 并指定语言**
Expand Down Expand Up @@ -370,13 +223,13 @@ editor.defineTheme('my-theme', myThemeData);

- 初始化设置

```shell
```bash
pnpm install
```

- 本地启动 web demo

```shell
```bash
pnpm watch-esm
cd website
pnpm install
Expand All @@ -385,7 +238,7 @@ editor.defineTheme('my-theme', myThemeData);

- 打包

```shell
```bash
pnpm compile
```

Expand All @@ -401,6 +254,8 @@ editor.defineTheme('my-theme', myThemeData);

本项目采用 [Microsoft 开源行为准则](https://opensource.microsoft.com/codeofconduct/)。有关更多信息，请参阅 [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/)，或联系 [[email protected]](mailto:[email protected]) 提出任何其他问题或意见。

<br/>

## License

[MIT](https://github.com/Microsoft/monaco-languages/blob/master/LICENSE.md)
Loading

0 comments on commit 8558d1c

Please sign in to comment.