Skip to content

Commit 8a13207

Browse files
HaydenOrzHaydenOrz
authored
docs: update samples (#116)
* docs: update esm-vite sample * docs: update esm-plain-webpack sample * docs: update esm-monaco-webpack-plugin sample
1 parent 93a8c8a commit 8a13207

File tree

19 files changed

+397
-156
lines changed

19 files changed

+397
-156
lines changed

‎samples/esm-monaco-webpack-plugin/index.html‎

Lines changed: 25 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,29 @@
11
<!DOCTYPE html>
22
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>esm-monaco-webpack-plugin-sample</title>
7+
</head>
38

4-
<head>
5-
<meta charset="utf-8" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>esm-monaco-webpack-plugin-sample</title>
8-
</head>
9-
10-
<body>
11-
<h2>FlinkSQL Demo</h2>
12-
<div style="width: 700px;height: 400px;border: 1px solid #ddd;">
13-
<div id="container" style="height: 100%; width: 100%;"></div>
14-
</div>
15-
</body>
16-
9+
<body>
10+
<h2>ESM Monaco Webpack Plugin Demo</h2>
11+
<select
12+
name="language"
13+
style="width: 120px; height: 32px; margin-bottom: 8px; font-size: 16px"
14+
id="lang-select"
15+
>
16+
<option value="mysql">MYSQL</option>
17+
<option value="flinksql" selected>FLINK</option>
18+
<option value="hivesql">HIVE</option>
19+
<option value="sparksql">SPARK</option>
20+
<option value="impalasql">IMPALA</option>
21+
<option value="trinosql">TRINO</option>
22+
<option value="pgsql">PGSQL</option>
23+
</select>
24+
<div style="width: 700px; height: 400px; border: 1px solid #ddd">
25+
<div id="container" style="height: 100%; width: 100%"></div>
26+
</div>
27+
</body>
1728
</html>
18-
<!doctype html>
29+
<!DOCTYPE html>

‎samples/esm-monaco-webpack-plugin/package-lock.json‎

Lines changed: 33 additions & 33 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎samples/esm-monaco-webpack-plugin/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,6 @@
2525
"dependencies": {
2626
"monaco-editor": "0.31.0",
2727
"monaco-editor-webpack-plugin": "7.0.1",
28-
"monaco-sql-languages": "0.12.0-beta.ng.1"
28+
"monaco-sql-languages": "0.12.0-beta.11"
2929
}
3030
}

‎samples/esm-monaco-webpack-plugin/src/index.ts‎

Lines changed: 29 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,40 @@
11
import * as monaco from 'monaco-editor';
22
import { LanguageIdEnum } from 'monaco-sql-languages';
3+
import './languageSetup';
4+
5+
let editorIns: monaco.editor.IStandaloneCodeEditor | null = null;
36

47
function render() {
58
const container = document.getElementById('container');
69
if (container) {
7-
monaco.editor.create(container, {
8-
language: LanguageIdEnum.FLINK
10+
editorIns = monaco.editor.create(container, {
11+
language: LanguageIdEnum.TRINO
12+
});
13+
}
14+
}
15+
16+
function listenLangChange() {
17+
const langSelect = document.getElementById('lang-select') as HTMLSelectElement;
18+
if (langSelect && editorIns) {
19+
langSelect.addEventListener('change', () => {
20+
if (!editorIns) return;
21+
22+
const lang = langSelect.options[langSelect.selectedIndex].value;
23+
const model = editorIns.getModel();
24+
25+
if (model && model.getLanguageId() !== lang) {
26+
monaco.editor.setModelLanguage(model, lang);
27+
setTimeout(() => {
28+
console.log(
29+
'language changed, current is: ',
30+
editorIns?.getModel()?.getLanguageId()
31+
);
32+
}, 200);
33+
}
934
});
1035
}
1136
}
1237

1338
render();
39+
40+
listenLangChange();

‎samples/esm-monaco-webpack-plugin/src/languageSetup.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
/** import contribution files */
2+
import 'monaco-sql-languages/esm/languages/mysql/mysql.contribution';
3+
import 'monaco-sql-languages/esm/languages/flink/flink.contribution';
4+
import 'monaco-sql-languages/esm/languages/spark/spark.contribution';
5+
import 'monaco-sql-languages/esm/languages/hive/hive.contribution';
6+
import 'monaco-sql-languages/esm/languages/trino/trino.contribution';
7+
import 'monaco-sql-languages/esm/languages/pgsql/pgsql.contribution';
8+
import 'monaco-sql-languages/esm/languages/impala/impala.contribution';

‎samples/esm-monaco-webpack-plugin/webpack.config.js‎

Lines changed: 52 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,12 +34,61 @@ module.exports = {
3434
features: [],
3535
languages: [],
3636
customLanguages: [
37+
// 包含 Monaco SQL Languages 所提供的语言功能
38+
{
39+
label: 'mysql',
40+
entry: 'monaco-sql-languages/esm/languages/mysql/mysql.contribution',
41+
worker: {
42+
id: '/esm/languages/mysql/',
43+
entry: 'monaco-sql-languages/esm/languages/mysql/mysql.worker'
44+
}
45+
},
3746
{
3847
label: 'flinksql',
39-
entry: 'monaco-sql-languages/out/esm/flinksql/flinksql.contribution',
48+
entry: 'monaco-sql-languages/esm/languages/flink/flink.contribution',
49+
worker: {
50+
id: '/esm/languages/flink/',
51+
entry: 'monaco-sql-languages/esm/languages/flink/flink.worker'
52+
}
53+
},
54+
{
55+
label: 'sparksql',
56+
entry: 'monaco-sql-languages/esm/languages/spark/spark.contribution',
57+
worker: {
58+
id: '/esm/languages/spark/',
59+
entry: 'monaco-sql-languages/esm/languages/spark/spark.worker'
60+
}
61+
},
62+
{
63+
label: 'hivesql',
64+
entry: 'monaco-sql-languages/esm/languages/hive/hive.contribution',
65+
worker: {
66+
id: '/esm/languages/hive/',
67+
entry: 'monaco-sql-languages/esm/languages/hive/hive.worker'
68+
}
69+
},
70+
{
71+
label: 'trinosql',
72+
entry: 'monaco-sql-languages/esm/languages/trino/trino.contribution',
73+
worker: {
74+
id: '/esm/languages/trino/',
75+
entry: 'monaco-sql-languages/esm/languages/trino/trino.worker'
76+
}
77+
},
78+
{
79+
label: 'pgsql',
80+
entry: 'monaco-sql-languages/esm/languages/pgsql/pgsql.contribution',
81+
worker: {
82+
id: '/esm/languages/pgsql/',
83+
entry: 'monaco-sql-languages/esm/languages/pgsql/pgsql.worker'
84+
}
85+
},
86+
{
87+
label: 'impalasql',
88+
entry: 'monaco-sql-languages/esm/languages/impala/impala.contribution',
4089
worker: {
41-
id: 'monaco-sql-languages/out/esm/flinksql/flinkSQLWorker',
42-
entry: 'monaco-sql-languages/out/esm/flinksql/flinksql.worker'
90+
id: '/esm/languages/impala/',
91+
entry: 'monaco-sql-languages/esm/languages/impala/impala.worker'
4392
}
4493
}
4594
]

‎samples/esm-monaco-webpack-plugin/webpack.prod.config.js‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,5 @@ delete devConfig.devServer;
44
delete devConfig.devtool;
55

66
devConfig.mode = 'production';
7-
devConfig.optimization = {
8-
minimize: false
9-
};
107

118
module.exports = devConfig;

‎samples/esm-plain-webpack/index.html‎

Lines changed: 25 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,29 @@
11
<!DOCTYPE html>
22
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>esm-plain-webpack-sample</title>
7+
</head>
38

4-
<head>
5-
<meta charset="utf-8" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>esm-plain-webpack-sample</title>
8-
</head>
9-
10-
<body>
11-
<h2>FlinkSQL Demo</h2>
12-
<div style="width: 700px;height: 400px;border: 1px solid #ddd;">
13-
<div id="container" style="height: 100%; width: 100%;"></div>
14-
</div>
15-
</body>
16-
9+
<body>
10+
<h2>ESM Plain Webpack Demo</h2>
11+
<select
12+
name="language"
13+
style="width: 120px; height: 32px; margin-bottom: 8px; font-size: 16px"
14+
id="lang-select"
15+
>
16+
<option value="mysql">MYSQL</option>
17+
<option value="flinksql" selected>FLINK</option>
18+
<option value="hivesql">HIVE</option>
19+
<option value="sparksql">SPARK</option>
20+
<option value="impalasql">IMPALA</option>
21+
<option value="trinosql">TRINO</option>
22+
<option value="pgsql">PGSQL</option>
23+
</select>
24+
<div style="width: 700px; height: 400px; border: 1px solid #ddd">
25+
<div id="container" style="height: 100%; width: 100%"></div>
26+
</div>
27+
</body>
1728
</html>
18-
<!doctype html>
29+
<!DOCTYPE html>

0 commit comments

Comments
 (0)