Skip to content

Commit

Permalink
docs: update documents
Browse files Browse the repository at this point in the history
  • Loading branch information
HaydenOrz committed Feb 19, 2024
1 parent b5e9fa2 commit 8ab15db
Show file tree
Hide file tree
Showing 4 changed files with 7 additions and 345 deletions.
51 changes: 4 additions & 47 deletions documents/integrate-esm.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,32 +5,6 @@ English | [简体中文](./integrate-esm.zh-CN.md)
## Integration Samples
There are some integration samples in `samples/` folder, here is the [development doc](../samples/README.md) of these samples.

Integration problem solving refer to [problem-soling](./problem-solving.md).


## Prerequisites
Since `dt-sql-parser` depends on `antlr4ts` which imports some Node.js core modules internally, including:

+ `assert`
+ `util`
+ `fs`

Before starting the integration, you need to install the polyfills of these modules to make sure Monaco SQL Languages can run properly, the following polyfill packages are recommended:
```bash
npm install assert util --save-dev
```

If the treeShaking of the bundler used in the project works well (which is the case in most situations), the polyfill of `fs` module is not necessary.

More about polyfill of Node.js core modules, refer to [webpack doc#resolvefallback](https://webpack.js.org/configuration/resolve/#resolvefallback)

Besides, you also need to define the environment variable `process.env.NODE_DEBUG`, different building tools have different ways to define it, refer to the samples in the following context.

<br/>

> The prerequisites seem to be a bit cumbersome, which brings a lot of unnecessary troubles to the integration of Monaco SQL Languages. We are trying to solve this problem, such as replacing the runtime of ANTLR4 in `dt-sql-parser`.
<br/>

## Use Monaco Editor WebPack Plugin
This is the easiest way to integrate Monaco SQL Languages
Expand Down Expand Up @@ -114,10 +88,7 @@ This is the easiest way to integrate Monaco SQL Languages
module.exports = {
// ...
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_DEBUG': process.env.NODE_DEBUG,
}),
monacoEditorPlugin // Apply monacoEditorPlugin
monacoEditorPlugin // Apply monacoEditorPlugin
]
};
```
Expand All @@ -144,12 +115,7 @@ More options of Monaco Editor Webpack Plugin, refer to [here](https://github.com
'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',
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_DEBUG': process.env.NODE_DEBUG, // define process.env.NODE_DEBUG
}),
]
}
};
```

Expand Down Expand Up @@ -193,19 +159,10 @@ More options of Monaco Editor Webpack Plugin, refer to [here](https://github.com
## Use Vite
Currently, there might be a problem that worker files cannot be loaded when integrating with vite, for details please refer to [issue#87](https://github.com/DTStack/monaco-sql-languages/issues/87)
1. define `process.env` in `vite.config.ts`
```typescript
export default defineConfig({
// ...
define: {
'process.env': process.env
}
});
```
2. Define `MonacoEnvironment` and declare `getWorker`
1. Define `MonacoEnvironment` and declare `getWorker`
```typescript
import EditorWorker from '../../node_modules/monaco-editor/esm/vs/editor/editor.worker?worker';
import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
import FlinkSQLWorker from 'monaco-sql-languages/out/esm/flinksql/flinksql.worker?worker';
import SparkSQLWorker from 'monaco-sql-languages/out/esm/sparksql/sparksql.worker?worker';
Expand Down
52 changes: 3 additions & 49 deletions documents/integrate-esm.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,32 +5,6 @@
## 集成示例
`samples/` 文件夹下有一些集成示例,这里是这些示例的[开发文档](../samples/README.zh-CN.md)

集成问题修复请查看[问题修复文档](./problem-solving.zh-CN.md)

## 前置准备
由于 `dt-sql-parser` 依赖的 `antlr4ts` 内部引入了一些 Node.js 核心模块,包括:

+ `assert`
+ `util`
+ `fs`

在开始集成之前,需要安装这些模块的 polyfill 包以保证 Monaco SQL Languages 能正常运行,推荐以下 polyfill 包:
```bash
npm install assert util --save-dev
```

如果项目中使用的构建工具的 treeShaking 功能正常工作(绝大部分情况下如此),`fs` 模块的 polyfill 是不必要的。

更多关于 Node.js core modules polyfills 的信息,请查看 [webpack doc#resolvefallback](https://webpack.js.org/configuration/resolve/#resolvefallback)

除此之外,你还需要定义环境变量 `process.env.NODE_DEBUG`,不同的打包工具定义的方式不同,参考下文中的示例。

<br/>

> 前置准备看起来有点繁琐,这为 Monaco SQL Languages 的集成带来了很多不必要的麻烦。我们正在尝试解决这个问题,比如替换 `dt-sql-parser` 中 ANTLR4 的运行时。
<br/>

## 使用 Monaco Editor WebPack Plugin
这是集成 Monaco SQL Languages 最简单的方式

Expand Down Expand Up @@ -113,9 +87,6 @@ npm install assert util --save-dev
module.exports = {
// ...
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_DEBUG': process.env.NODE_DEBUG,
}),
monacoEditorPlugin // 应用 monacoEditorPlugin
]
};
Expand All @@ -142,12 +113,7 @@ npm install assert util --save-dev
'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',
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_DEBUG': process.env.NODE_DEBUG,
}),
]
}
};
```

Expand Down Expand Up @@ -189,22 +155,10 @@ npm install assert util --save-dev
<br/>
## 使用 Vite
目前使用 vite 集成可能会出现无法加载 worker 文件的问题,详情请查看 [issue#87](https://github.com/DTStack/monaco-sql-languages/issues/87)
1. 在 `vite.config.ts` 中定义 `process.env`
```typescript
export default defineConfig({
// ...
define: {
'process.env': process.env
}
});
```
2. 定义全局变量 `MonacoEnvironment`, 并声明 `getWorkerUrl`
1. 定义全局变量 `MonacoEnvironment`, 并声明 `getWorkerUrl`
```typescript
import EditorWorker from '../../node_modules/monaco-editor/esm/vs/editor/editor.worker?worker';
import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
import FlinkSQLWorker from 'monaco-sql-languages/out/esm/flinksql/flinksql.worker?worker';
import SparkSQLWorker from 'monaco-sql-languages/out/esm/sparksql/sparksql.worker?worker';
import HiveSQLWorker from 'monaco-sql-languages/out/esm/hivesql/hivesql.worker?worker';
Expand Down
124 changes: 0 additions & 124 deletions documents/problem-solving.md

This file was deleted.

Loading

0 comments on commit 8ab15db

Please sign in to comment.