dtstack / monaco-sql-languages Goto Github PK
View Code? Open in Web Editor NEWSQL languages for monaco-editor
Home Page: https://dtstack.github.io/monaco-sql-languages/
License: MIT License
SQL languages for monaco-editor
Home Page: https://dtstack.github.io/monaco-sql-languages/
License: MIT License
Please check out the very basic demo app that aims to showcase monaco-sql-languages
and also be a lightweight starting point for CRA-based projects with monaco editor and monaco-sql-languages
support configured
https://github.com/SlickSql/monaco-sql-languages-demo
Just in case you have any interest to collaborate!
可以参考 vscode 相关插件
It seems the setup happens in an odd way, which makes it hard to work when we need to rely on state to load the completionService (load table, catalog metadata).
We are not seeing the language be registered correctly (when we navigate within SPA and monaco is already loaded)
Is there a way to register the language/completionService from e.g. a useEffect or programmatically, that doesn't rely on global loading?
Version
"monaco-editor": "0.31.0",
"monaco-sql-languages": "0.12.0-beta.10",
The Type of SQL
SparkSQL | FlinkSQL | HiveSQL | Impala
Your Code
chainWebpack: (config) => {
config.plugin('definePlugin').use(new webpack.DefinePlugin({
'process.env.NODE_DEBUG': process.env.NODE_DEBUG,
}))
config.plugin('monaco').use(new MonacoEditorWebpckPlugin({
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'
}
}
]
}));
// create
setupLanguageFeatures({
languageId: LanguageIdEnum.FLINK,
// completionService,
});
monaco.editor.create(editorRef.current as HTMLDivElement, {
value: 'SELECT * FROM tb_test',
theme: 'sql-dark',
language: LanguageIdEnum.FLINK,
});
Problem
Uncaught ReferenceError: Cannot access 'languageDefinitions' before initialization
I'm getting this error trying to use with trinosql:
TypeError: Cannot read properties of undefined (reading 'get')
at _CodeCompletionCore.collectCandidates (http://localhost:3000/trinosql.worker.js:68773:33)
at TrinoSQL.getSuggestionAtCaretPosition (http://localhost:3000/trinosql.worker.js:50222:29)
at TrinoSQLWorker.<anonymous> (http://localhost:3000/trinosql.worker.js:63071:41)
at Generator.next (<anonymous>)
at http://localhost:3000/trinosql.worker.js:63030:67
at new Promise (<anonymous>)
at __awaiter (http://localhost:3000/trinosql.worker.js:63012:10)
at TrinoSQLWorker.doComplete (http://localhost:3000/trinosql.worker.js:63068:12)
at EditorSimpleWorker.fmr (http://localhost:3000/trinosql.worker.js:61720:58)
at SimpleWorkerServer._handleMessage (http://localhost:3000/trinosql.worker.js:58454:59)
monaco-sql-languages 支持的 language 都是各种 SQL,与之对应的就会有许多符号/icon是SQL语言特有的,比如 database 、table 等,而monaco 内置并不支持这些符号/icon,目前自动补全项左侧的 icon 问题尤为明显:
与monaco/vscode 的字体图标风格保持一致 https://code.visualstudio.com/api/references/icons-in-labels#icon-listing
类型 | icon name |
---|---|
keyword 关键字 | symbol-keyword |
Snippet 代码片段 | symbol-snippet |
catalog | symbol-catalog |
database/schema 数据库 | symbol-database |
table 表 | symbol-table |
view 视图 | symbol-view |
column 字段 | symbol-column |
function 函数 | symbol-function |
procedure 存储过程 | symbol-procedure |
自动补全项左侧会根据不同的自动补全项的 CompletionItemKind
属性显示不同的 icon,但是内置的类型并不能覆盖所有的 SQL 补全项类型,比如 table、database 等,所以需要一个类型映射
类型 | CompletionItemKind |
---|---|
keyword 关键字 | CompletionItemKind.Keyword |
Snippet 代码片段 | CompletionItemKind.Snippet |
catalog | CompletionItemKind.Folder |
database/schema 数据库 | CompletionItemKind.File |
table 表 | CompletionItemKind.Class |
view 视图 | CompletionItemKind.Interface |
column 字段 | CompletionItemKind.Field |
function 函数 | CompletionItemKind.Function |
procedure 存储过程 | CompletionItemKind.Constructor |
同时,monaco-sql-languages 需要新增公开的辅助方法,用于将 dt-sql-parser 中的 实体类型(EntityContextType
/ SyntaxContextType
)转换为 CompletionItemKind
import { SyntaxContextType } from 'dt-sql-parser';
import { languages } from 'monaco-editor/esm/vs/editor/editor.api';
export function toCompletionItemKind(type: SyntaxContextType): languages.CompletionItemKind {
switch(type) {
case SyntaxContextType.CATALOG:
return languages.CompletionItemKind.Folder;
case SyntaxContextType.DATABASE:
return languages.CompletionItemKind.File;
// ...
default:
return languages.CompletionItemKind.Text;
}
}
每一种类型对应的icon 类名格式为: .codicon-${built-in-icon-name}
内置的 icon 名称看这里: https://code.visualstudio.com/api/references/icons-in-labels#icon-listing
自动补全项的icon名称都是以 symbol-
为前缀的
.codicon-symbol-text:before {
content: '\eb01';
}
.codicon-symbol-function:before {
content: '\eb02';
}
.codicon-symbol-folder:before {
content: '\eb03';
}
.codicon-symbol-field:before {
content: '\eb04';
}
Hi there, thanks for this lib!
I have added support for formatting, lmk if you'd like a PR
it's pretty simple, something like this:
import { languages } from 'monaco-editor/esm/vs/editor/editor.api';
import { format } from 'sql-formatter';
languages.registerDocumentFormattingEditProvider('sql', {
provideDocumentFormattingEdits(model, options) {
const formatted = format(model.getValue(), {
indentStyle: 'standard',
});
return [
{
range: model.getFullModelRange(),
text: formatted,
},
];
},
});
languages.registerDocumentRangeFormattingEditProvider('sql', {
provideDocumentRangeFormattingEdits(model, range, options) {
const formatted = format(model.getValueInRange(range), {
indentStyle: 'standard',
});
return [
{
range: range,
text: formatted,
},
];
},
});
使用monaco-sql- language 0.9.4,无法实现关键词提示、错误提示功能。
我这边用的monaco-editor版本是0.25.0
使用其他自带的如:html.worker,关键词提示都是正常的
目前已支持的功能
如何在项目中使用
本地运行 demo 脚本
can not find the entry in umijs
https://github.com/DTStack/monaco-sql-languages/blob/main/src/hivesql/hivesql.contribution.ts
这个文件下的 extensions: ['.hivesql'],
意思是新建一个以 .hivesql的文件,就会以hivesql的语法规则进行高亮嘛?
e.g.
@@{componentParams}
${sysParams}
Has anyone been able to get Monaco completion documentation to show? I am returning the documentation
property in my CompletionItem
from my completionService
, but I don't see it render. The label
and detail
show correctly. I am not sure why, am trying to rule out if it is caused by this package or some other setting.
Documentation should look like the following btw (the right window)
我想要使用正则表达式进行语法高亮,类似于@23asdfsaf, @dsgw434536, @iohiyo, 请问哪里有类似的案例,具体在第几行到第几行之间
Hi! Thanks for this.
Any chance you could implement Trino SQL (formerly known as Presto SQL) syntax?
我想提示column的信息,需要获取table的名称,要如何获取啊
Originally posted by @dcycurry in #105 (comment)
Is there is a workaround to get auto complete feature?
Using Vite and standard configuration like yours https://github.com/DTStack/monaco-sql-languages/blob/main/website/vite.config.ts
languageWorker.ts
self.MonacoEnvironment = {
async getWorker(_, label) {
let worker;
switch (label) {
case 'trinosql':
worker = await import('monaco-sql-languages/out/esm/trinosql/trinosql.worker?worker');
break;
default:
worker = await import('monaco-editor/esm/vs/editor/editor.worker?worker');
}
return new worker.default();
},
};
monacoInit.ts
import { loader } from '@monaco-editor/react';
import * as monaco from 'monaco-editor';
import 'monaco-sql-languages/out/esm/trinosql/trinosql.contribution';
import {
setupLanguageFeatures,
LanguageIdEnum,
} from 'monaco-sql-languages';
import './language-worker.ts';
import { theme } from './theme';
setupLanguageFeatures({
languageId: LanguageIdEnum.TRINO,
completionItems: false
});
loader.config({ monaco });
loader.init().then((monaco) => {
monaco.editor.defineTheme('theme', theme);
});
Editor.tsx
import MonacoEditor from '@monaco-editor/react';
import { LanguageIdEnum } from 'monaco-sql-languages';
export const Editor = (editorOptions) => {
return (
<MonacoEditor
height="100%"
width="100%"
defaultLanguage={LanguageIdEnum.TRINO}
options={editorOptions}
/>
);
}
Hi, on the homepage, there is a mention of PGSQL support.
Where can I find the relative worker?
我的Wepack是在vue.config.js
里配置的:
My Webpack is configured in vue.config.js
:
module.exports = {
configureWebpack: {
entry: {
'sparksql.worker':
'monaco-sql-languages/out/esm/sparksql/sparksql.worker.js',
'sql.worker': 'monaco-sql-languages/out/esm/sql/sql.worker.js',
}
}
}
在封装的monaco-editor
组件中:
Inside my monaco-editor component:
import * as monaco from 'monaco-editor';
import 'monaco-sql-languages/out/esm/sparksql/sparksql.contribution';
import 'monaco-sql-languages/out/esm/sql/sql.contribution';
MonacoEnvironment = {
getWorkerUrl: function (moduleId, label) {
console.log(moduleId, label);
switch (label) {
case 'sparksql': {
return './sparksql.worker.js';
}
default: {
return './editor.worker.js';
}
}
},
};
可是项目跑起来后报错:
But I get the following error in the console:
GET http://localhost:3000/xxx/sparksql.worker.js 404 (Not Found)
GET http://localhost:3000/xxx/editor.worker.js 404 (Not Found)
Error: Unexpected usage
at EditorSimpleWorker.loadForeignModule (editorSimpleWorker.js:460:1)
at eval (webWorker.js:38:1)
以下是部分package.json
Here is part of my package.json
"dt-sql-parser": "^4.0.0-beta.3.2",
"monaco-editor": "0.33",
"monaco-editor-webpack-plugin": "^7.0.1",
"monaco-sql-languages": "^0.11.0",
"webpack": "5.61.0",
这个应该怎么解决呢?
How can I resolve this?
可考虑支持结合Ace editor 使用吗? https://github.com/ajaxorg/ace
oracle is important!
can you support oracle sql?
I've noticed that pgsql was supported by version 0.10.0,but it seems it is not working anymore, at least syntax validation is broken right now.
I am using 0.11.0.
Tested on the website https://dtstack.github.io/monaco-sql-languages/ ,also not working .
However, the website https://salvoravida.github.io/monaco-sql-languages/ provided by the PR author can validate PostgreSQL syntax properly.
[/@.*$/, "comment", "@popall"],
的意思是在一行中@字符后面的所有
就像这样,那么如何当“.”后面的所有字符变成蓝色?就像这样
First of all, I appreciate your efforts to fix the wrong path issue with dt-sql-parser
.
I found a problem: installing monaco-sql-languages
still encounters the dt-sql-parser
wrong path (node_modules\dt-sql-parser\src\xxx') problem. So I hope monaco-sql-languages
can also fix this error. As well as being able to update the documentation
Thanks again.
I'm trying to incorporate monaco-sql-languages into existing project. I have followed the docs. When I run my app I get this error:
export 'default' (imported as 'FlinkSQLWorker') was not found in 'monaco-sql-languages/out/esm/flinksql/flinksql.worker?worker' (module has no exports)
I need to trigger the 'incomplete' logic in the return value of Monaco Editor's provideCompletionItems. Currently, it seems that only 'suggestion' is exported. If it doesn't interfere with your normal plans, I can provide a pull request. My fork: https://github.com/Kijin-Seija/monaco-sql-languages
我需要触发Monaco Editor provideCompletionItems
返回值中的 incomplete 逻辑,我看现在只导出了suggestion。
如果不影响你们正常计划的话,我可以提供pr,我的fork: https://github.com/Kijin-Seija/monaco-sql-languages
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.