> Powered By molecule.

Supported SQL Languages

- MySQL
- Flink
- Spark
- Hive
- Trino (Presto)
- PostgreSQL
- Impala

Installing

``bash
npm install monaco-sql-languages
`

> Tips: Monaco SQL Languages is only guaranteed to work stably on monaco-editor@0.31.0 for now.

Integrating

- Integrating the ESM version of Monaco SQL Languages

Usage

1. Import language contributions
> 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/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/esm/all.contributions';
`

2. Setup language features

You can setup language features via setupLanguageFeatures. For example, setup code completion feature of flinkSQL language.

`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.

`typescript
import { languages } from 'monaco-editor/esm/vs/editor/editor.api';
import {
setupLanguageFeatures,
LanguageIdEnum,
CompletionService,
ICompletionItem,
SyntaxContextType
} from 'monaco-sql-languages';

const completionService: CompletionService = function (
model,
position,
completionContext,
suggestions, // syntax context info at caretPosition
entities // tables, columns in the syntax context of the editor text
) {
return new Promise((resolve, reject) => {
if (!suggestions) {
return Promise.resolve([]);
}
const { keywords, syntax } = suggestions;
const keywordsCompletionItems: ICompletionItem[] = keywords.map((kw) => ({
label: kw,
kind: languages.CompletionItemKind.Keyword,
detail: 'keyword',
sortText: '2' + kw
}));

let syntaxCompletionItems: ICompletionItem[] = [];

syntax.forEach((item) => {
if (item.syntaxContextType === SyntaxContextType.DATABASE) {
const databaseCompletions: ICompletionItem[] = []; // some completions about databaseName
syntaxCompletionItems = [...syntaxCompletionItems, ...databaseCompletions];
}
if (item.syntaxContextType === SyntaxContextType.TABLE) {
const tableCompletions: ICompletionItem[] = []; // some completions about tableName
syntaxCompletionItems = [...syntaxCompletionItems, ...tableCompletions];
}
});

resolve([...syntaxCompletionItems, ...keywordsCompletionItems]);
});
};

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: LanguageIdEnum.FLINK // languageId
});
`

Monaco Theme

> Monaco SQL Languages plan to support more themes in the future.

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;

Use Monaco SQL Languages built-in vsPlusTheme

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

// import themeData and defineTheme, you can customize the theme name, e.g. sql-dark
editor.defineTheme('sql-dark', vsPlusTheme.darkThemeData);
editor.defineTheme('sql-light', vsPlusTheme.lightThemeData);
editor.defineTheme('sql-hc', vsPlusTheme.hcBlackThemeData);

// specify the theme you have defined
editor.create(null as any, {
theme: 'sql-dark',
language: 'flinksql'
});
`

Customize your own Monaco theme

`typescript
import { TokenClassConsts, postfixTokenClass } from 'monaco-sql-languages';

// Customize the various tokens style
const myThemeData: editor.IStandaloneThemeData = {
base: 'vs-dark',
inherit: true,
rules: [
{ token: postfixTokenClass(TokenClassConsts.COMMENT), foreground: '6a9955' },
{ token: postfixTokenClass(TokenClassConsts.IDENTIFIER), foreground: '9cdcfe' },
{ token: postfixTokenClass(TokenClassConsts.KEYWORD), foreground: '569cd6' },
{ token: postfixTokenClass(TokenClassConsts.NUMBER), foreground: 'b5cea8' },
{ token: postfixTokenClass(TokenClassConsts.STRING), foreground: 'ce9178' },
{ token: postfixTokenClass(TokenClassConsts.TYPE), foreground: '4ec9b0' }
],
colors: {}
};

// Define the monaco theme
editor.defineTheme('my-theme', myThemeData);
`

> postfixTokenClass is not required in most cases, but since Monaco SQL Languages has tokenPostfix: 'sql' internally set for all SQL languages, in some cases your custom style may not work if you don't use postfixTokenClassClass to handle TokenClassConsts.*.

Dev: cheat sheet

- initial setup

`bash
pnpm install
`

- open the dev web

`bash
pnpm watch-esm
cd website
pnpm install
pnpm dev
`

- build

`bash
pnpm build
`

- run test
`
pnpm test
``

Code of Conduct

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments.

License

MIT