Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update/docs #115

Merged
merged 6 commits into from
Apr 1, 2024
Merged
Show file tree
Hide file tree
Changes from 5 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
102 changes: 49 additions & 53 deletions README-zh_CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,42 +9,35 @@

[English](./README.md) | 简体中文

Monaco SQL Languages 是一个基于 Monaco Editor 的 SQL 语言项目,从 [monaco-languages](https://github.com/microsoft/monaco-languages) fork 而来。
Monaco SQL Languages 是一个基于 Monaco Editor 的 SQL 语言项目,从 [monaco-languages](https://github.com/microsoft/monaco-languages) fork 而来。不同的是,Monaco SQL Languages 支持了各种大数据领域的 SQL 语言以及相应的高级语言功能。

不同的是,Monaco SQL Languages 集成了各种大数据领域的 SQL 语言功能,比如 FLinkSQL, SparkSQL, HiveSQL 等等。另外,Monaco SQL Languages 还通过集成 [dt-sql-parser](https://github.com/DTStack/dt-sql-parser) 提供了**SQL 语法校验** 和 **自动补全功能**。
<br/>

## 功能亮点
- 代码高亮
- 语法校验
- 自动补全

> 由 [dt-sql-parser](https://github.com/DTStack/dt-sql-parser) 提供语法解析功能。

<br/>

## 在线预览
由 [molecule](https://github.com/DTStack/molecule) 提供 IDE UI 支持。
<https://dtstack.github.io/monaco-sql-languages/>

<https://dtstack.github.io/monaco-sql-languages/>
> 由 [molecule](https://github.com/DTStack/molecule) 提供 IDE UI 支持。

<br/>

## 已支持的 SQL 语言类型

- MySQL
- FlinkSQL
- SparkSQL
- HiveSQL
- TrinoSQL (PrestoSQL)
- Flink
- Spark
- Hive
- Trino (Presto)
- PostgreSQL
- Impala SQL

**自动补全功能支持**

| SQL 类型 | 语言 ID | 自动补全功能 |
| ---------- | ----------- | --------------- |
| MySQL | mysql | ✅ |
| Flink SQL | flinksql | ✅ |
| Spark SQL | sparksql | ✅ |
| Hive SQL | hivesql | ✅ |
| Trino SQL | trinosql | ✅ |
| PostgreSQL | pgsql | ✅ |
| Impala SQL | impalasql | ✅ |

> Monaco SQL Languages 计划在未来支持更多类型的的 SQL Languages。 如果你需要某些目前未支持的 SQL Languages,可以在 [github](https://github.com/DTStack/monaco-sql-languages) 上联系我们。
- Impala

<br/>

Expand All @@ -61,42 +54,41 @@ npm install monaco-sql-languages
## 集成

- [集成 Monaco SQL Languages 的 ESM 版本](./documents/integrate-esm.zh-CN.md)
- [Monaco SQL Languages 集成问题修复](./documents/problem-solving.zh-CN.md)

<br/>

## 使用

1. **导入语言的 contributions 文件**
1. **导入语言的 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/pgsql/pgsql.contribution';
import 'monaco-sql-languages/esm/languages/mysql/mysql.contribution';
import 'monaco-sql-languages/esm/languages/flink/flink.contribution';
import 'monaco-sql-languages/esm/languages/spark/spark.contribution';
import 'monaco-sql-languages/esm/languages/hive/hive.contribution';
import 'monaco-sql-languages/esm/languages/trino/trino.contribution';
import 'monaco-sql-languages/esm/languages/pgsql/pgsql.contribution';
import 'monaco-sql-languages/esm/languages/impala/impala.contribution';

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

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

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

setupLanguageFeatures({
languageId: LanguageIdEnum.FLINK,
completionItems: false
})
import { LanguageIdEnum, setupLanguageFeatures } from 'monaco-sql-languages';

setupLanguageFeatures(LanguageIdEnum.FLINK, {
completionItems: {
enable: true,
triggerCharacters: [' ', '.'],
completionService: //... ,
}
});
```

默认情况下,自动补全功能只提供关键字自动补全, 但你可以通过设置 `completionService` 自定义自动补全项。
Expand All @@ -115,7 +107,8 @@ npm install monaco-sql-languages
model,
position,
completionContext,
suggestions
suggestions, // 语法推荐信息
entities // 当前编辑器文本的语法上下文中出现的表名、字段名等
) {
return new Promise((resolve, reject) => {
if (!suggestions) {
Expand Down Expand Up @@ -146,18 +139,22 @@ npm install monaco-sql-languages
});
};

setupLanguageFeatures({
languageId: LanguageIdEnum.FLINK,
completionService: completionService,
})
setupLanguageFeatures(LanguageIdEnum.FLINK, {
completionItems: {
enable: true,
completionService,
}
});
```

3. **创建 Monaco Editor 并指定语言**

```typescript
import { LanguageIdEnum } from 'monaco-sql-languages';

monaco.editor.create(document.getElementById('container'), {
value: 'select * from tb_test',
language: 'flinksql' // languageId
language: LanguageIdEnum.FLINK // languageId
});
```

Expand Down Expand Up @@ -215,7 +212,7 @@ const myThemeData: editor.IStandaloneThemeData = {
editor.defineTheme('my-theme', myThemeData);
```

> `postfixTokenClass` 在大多数情况下不是必须的,但是由于 Monaco SQL Languages 内部为所有的语言都设置了 `tokenPostfix: 'sql'`所以在某些情况下,如果不使用 `postfixTokenClass` 处理 `TokenClassConsts.*`,你自定义的样式可能不生效
> `postfixTokenClass` 在大多数情况下不是必须的,但是由于 Monaco SQL Languages 内部为所有的语言都设置了 `tokenPostfix: 'sql'`所以在某些情况下,如果不使用 `postfixTokenClass` 处理 `TokenClassConsts.*`,自定义的样式可能不生效

<br/>

Expand All @@ -236,15 +233,14 @@ editor.defineTheme('my-theme', myThemeData);
pnpm dev
```

- 打包
- 构建

```bash
pnpm compile
pnpm build
```

- 单元测试
```
pnpm compile
pnpm test
```

Expand Down
105 changes: 50 additions & 55 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,44 +9,35 @@

English | [简体中文](./README-zh_CN.md)

This project is based on the SQL language project of Monaco Editor, which was forked from the [monaco-languages](https://github.com/microsoft/monaco-languages).
This project is based on the SQL language project of Monaco Editor, which was forked from the [monaco-languages](https://github.com/microsoft/monaco-languages).The difference is that Monaco SQL Languages supports various SQL languages and the corresponding advanced features for the **Big Data field**.

The difference is that Monaco SQL Languages has integrated with various SQL languages for the **Big Data field**, such as FlinkSQL, SparkSQL, HiveSQL, and others.
<br/>

## Feature highlights
- Code Highlighting
- Syntax Validation
- Code Completion

In addition, Monaco SQL Languages provides **SQL syntax validation** and **CodeCompletion** feature for these languages via [dt-sql-parser](https://github.com/DTStack/dt-sql-parser).
> Powered By [dt-sql-parser](https://github.com/DTStack/dt-sql-parser)

<br/>

## Online Preview
Powered By [molecule](https://github.com/DTStack/molecule).

<https://dtstack.github.io/monaco-sql-languages/>

> Powered By [molecule](https://github.com/DTStack/molecule).

<br/>

## Supported SQL Languages

- MySQL
- FlinkSQL
- SparkSQL
- HiveSQL
- TrinoSQL (PrestoSQL)
- Flink
- Spark
- Hive
- Trino (Presto)
- PostgreSQL
- Impala SQL

**Supported CodeCompletion SQL Languages**

| SQL Type | Language Id | Code-Completion |
| ---------- | ----------- | --------------- |
| MySQL | mysql | ✅ |
| Flink SQL | flinksql | ✅ |
| Spark SQL | sparksql | ✅ |
| Hive SQL | hivesql | ✅ |
| Trino SQL | trinosql | ✅ |
| PostgreSQL | pgsql | ✅ |
| Impala SQL | impalasql | ✅ |

> Monaco SQL Languages plan to support more types of SQL Languages in the future. If you need some SQL Languages that are not currently supported, you can contact us at [github](https://github.com/DTStack/monaco-sql-languages).
- Impala

<br/>

Expand All @@ -63,7 +54,6 @@ npm install monaco-sql-languages
## Integrating

- [Integrating the ESM version of Monaco SQL Languages](./documents/integrate-esm.md)
- [Solving the problem of integrating](./documents/problem-solving.md)

<br/>

Expand All @@ -73,31 +63,32 @@ npm install monaco-sql-languages
> Tips: If integrated via MonacoEditorWebpackPlugin, it will help us to import contribution files automatically. Otherwise, you need to import the contribution files manually.

```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/pgsql/pgsql.contribution';
import 'monaco-sql-languages/esm/languages/mysql/mysql.contribution';
import 'monaco-sql-languages/esm/languages/flink/flink.contribution';
import 'monaco-sql-languages/esm/languages/spark/spark.contribution';
import 'monaco-sql-languages/esm/languages/hive/hive.contribution';
import 'monaco-sql-languages/esm/languages/trino/trino.contribution';
import 'monaco-sql-languages/esm/languages/pgsql/pgsql.contribution';
import 'monaco-sql-languages/esm/languages/impala/impala.contribution';

// Or you can import all language contributions at once.
// import 'monaco-sql-languages/out/esm/monaco.contribution';
// import 'monaco-sql-languages/esm/all.contributions';
```

2. **Setup language features**

You can setup language features via `setupLanguageFeatures`. For example, disable code completion feature of flinkSQL language.
```typescript
import {
setupLanguageFeatures,
LanguageIdEnum,
} from 'monaco-sql-languages';
You can setup language features via `setupLanguageFeatures`. For example, setup code completion feature of flinkSQL language.

setupLanguageFeatures({
languageId: LanguageIdEnum.FLINK,
completionItems: false
})
```typescript
import { LanguageIdEnum, setupLanguageFeatures } from 'monaco-sql-languages';

setupLanguageFeatures(LanguageIdEnum.FLINK, {
completionItems: {
enable: true,
triggerCharacters: [' ', '.'],
completionService: //... ,
}
});
```

By default, Monaco SQL Languages only provides keyword autocompletion, and you can customize your completionItem list via `completionService`.
Expand All @@ -116,7 +107,8 @@ npm install monaco-sql-languages
model,
position,
completionContext,
suggestions
suggestions, // syntax context info at caretPosition
entities // tables, columns in the syntax context of the editor text
) {
return new Promise((resolve, reject) => {
if (!suggestions) {
Expand Down Expand Up @@ -147,18 +139,22 @@ npm install monaco-sql-languages
});
};

setupLanguageFeatures({
languageId: LanguageIdEnum.FLINK,
completionService: completionService,
})
setupLanguageFeatures(LanguageIdEnum.FLINK, {
completionItems: {
enable: true,
completionService: //... ,
}
});
```

3. **Create the Monaco Editor instance and specify the language you need**

```typescript
import { LanguageIdEnum } from 'monaco-sql-languages';

monaco.editor.create(document.getElementById('container'), {
value: 'select * from tb_test',
language: 'flinksql' // you need
language: LanguageIdEnum.FLINK // languageId
});
```

Expand All @@ -170,9 +166,9 @@ npm install monaco-sql-languages

Monaco SQL Languages provides built-in Monaco Theme that is named `vsPlusTheme`. `vsPlusTheme` inspired by vscode default plus colorTheme and it contains three styles of themes inside:

- `darkTheme`: inherited from Monaco built-in Theme `vs-dark`;
- `lightTheme`: inherited from Monaco built-in Theme `vs`;
- `hcBlackTheme`: inherited from Monaco built-in Theme `hc-black`;
- `darkTheme`: Inherited from monaco built-in theme `vs-dark`;
- `lightTheme`: Inherited from monaco built-in theme `vs`;
- `hcBlackTheme`: Inherited from monaco built-in theme `hc-black`;

**Use Monaco SQL Languages built-in vsPlusTheme**

Expand Down Expand Up @@ -237,15 +233,14 @@ editor.defineTheme('my-theme', myThemeData);
pnpm dev
```

- compile
- build

```bash
pnpm compile
pnpm build
```

- run test
```
pnpm compile
pnpm test
```

Expand Down
Loading
Loading