docs: update samples (#116)

* docs: update esm-vite sample * docs: update esm-plain-webpack sample * docs: update esm-monaco-webpack-plugin sample
DTStack · Apr 1, 2024 · 8a13207 · 8a13207
1 parent 93a8c8a
commit 8a13207
Show file tree

Hide file tree

Showing 19 changed files with 397 additions and 156 deletions.
diff --git a/samples/esm-monaco-webpack-plugin/index.html b/samples/esm-monaco-webpack-plugin/index.html
@@ -1,18 +1,29 @@
 <!DOCTYPE html>
 <html>
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>esm-monaco-webpack-plugin-sample</title>
+	</head>
 
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>esm-monaco-webpack-plugin-sample</title>
-</head>
-
-<body>
-  <h2>FlinkSQL Demo</h2>
-  <div style="width: 700px;height: 400px;border: 1px solid #ddd;">
-    <div id="container" style="height: 100%; width: 100%;"></div>
-  </div>
-</body>
-
+	<body>
+		<h2>ESM Monaco Webpack Plugin Demo</h2>
+		<select
+			name="language"
+			style="width: 120px; height: 32px; margin-bottom: 8px; font-size: 16px"
+			id="lang-select"
+		>
+			<option value="mysql">MYSQL</option>
+			<option value="flinksql" selected>FLINK</option>
+			<option value="hivesql">HIVE</option>
+			<option value="sparksql">SPARK</option>
+			<option value="impalasql">IMPALA</option>
+			<option value="trinosql">TRINO</option>
+			<option value="pgsql">PGSQL</option>
+		</select>
+		<div style="width: 700px; height: 400px; border: 1px solid #ddd">
+			<div id="container" style="height: 100%; width: 100%"></div>
+		</div>
+	</body>
 </html>
-<!doctype html>
+<!DOCTYPE html>
diff --git a/samples/esm-monaco-webpack-plugin/package-lock.json b/samples/esm-monaco-webpack-plugin/package-lock.json
diff --git a/samples/esm-monaco-webpack-plugin/package.json b/samples/esm-monaco-webpack-plugin/package.json
@@ -25,6 +25,6 @@
 	"dependencies": {
 		"monaco-editor": "0.31.0",
 		"monaco-editor-webpack-plugin": "7.0.1",
-		"monaco-sql-languages": "0.12.0-beta.ng.1"
+		"monaco-sql-languages": "0.12.0-beta.11"
 	}
 }
diff --git a/samples/esm-monaco-webpack-plugin/src/index.ts b/samples/esm-monaco-webpack-plugin/src/index.ts
@@ -1,13 +1,40 @@
 import * as monaco from 'monaco-editor';
 import { LanguageIdEnum } from 'monaco-sql-languages';
+import './languageSetup';
+
+let editorIns: monaco.editor.IStandaloneCodeEditor | null = null;
 
 function render() {
 	const container = document.getElementById('container');
 	if (container) {
-		monaco.editor.create(container, {
-			language: LanguageIdEnum.FLINK
+		editorIns = monaco.editor.create(container, {
+			language: LanguageIdEnum.TRINO
+		});
+	}
+}
+
+function listenLangChange() {
+	const langSelect = document.getElementById('lang-select') as HTMLSelectElement;
+	if (langSelect && editorIns) {
+		langSelect.addEventListener('change', () => {
+			if (!editorIns) return;
+
+			const lang = langSelect.options[langSelect.selectedIndex].value;
+			const model = editorIns.getModel();
+
+			if (model && model.getLanguageId() !== lang) {
+				monaco.editor.setModelLanguage(model, lang);
+				setTimeout(() => {
+					console.log(
+						'language changed, current is: ',
+						editorIns?.getModel()?.getLanguageId()
+					);
+				}, 200);
+			}
 		});
 	}
 }
 
 render();
+
+listenLangChange();
diff --git a/samples/esm-monaco-webpack-plugin/src/languageSetup.ts b/samples/esm-monaco-webpack-plugin/src/languageSetup.ts
@@ -0,0 +1,8 @@
+/** import contribution files */
+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';
diff --git a/samples/esm-monaco-webpack-plugin/webpack.config.js b/samples/esm-monaco-webpack-plugin/webpack.config.js
@@ -34,12 +34,61 @@ module.exports = {
 			features: [],
 			languages: [],
 			customLanguages: [
+				// 包含 Monaco SQL Languages 所提供的语言功能
+				{
+					label: 'mysql',
+					entry: 'monaco-sql-languages/esm/languages/mysql/mysql.contribution',
+					worker: {
+						id: '/esm/languages/mysql/',
+						entry: 'monaco-sql-languages/esm/languages/mysql/mysql.worker'
+					}
+				},
 				{
 					label: 'flinksql',
-					entry: 'monaco-sql-languages/out/esm/flinksql/flinksql.contribution',
+					entry: 'monaco-sql-languages/esm/languages/flink/flink.contribution',
+					worker: {
+						id: '/esm/languages/flink/',
+						entry: 'monaco-sql-languages/esm/languages/flink/flink.worker'
+					}
+				},
+				{
+					label: 'sparksql',
+					entry: 'monaco-sql-languages/esm/languages/spark/spark.contribution',
+					worker: {
+						id: '/esm/languages/spark/',
+						entry: 'monaco-sql-languages/esm/languages/spark/spark.worker'
+					}
+				},
+				{
+					label: 'hivesql',
+					entry: 'monaco-sql-languages/esm/languages/hive/hive.contribution',
+					worker: {
+						id: '/esm/languages/hive/',
+						entry: 'monaco-sql-languages/esm/languages/hive/hive.worker'
+					}
+				},
+				{
+					label: 'trinosql',
+					entry: 'monaco-sql-languages/esm/languages/trino/trino.contribution',
+					worker: {
+						id: '/esm/languages/trino/',
+						entry: 'monaco-sql-languages/esm/languages/trino/trino.worker'
+					}
+				},
+				{
+					label: 'pgsql',
+					entry: 'monaco-sql-languages/esm/languages/pgsql/pgsql.contribution',
+					worker: {
+						id: '/esm/languages/pgsql/',
+						entry: 'monaco-sql-languages/esm/languages/pgsql/pgsql.worker'
+					}
+				},
+				{
+					label: 'impalasql',
+					entry: 'monaco-sql-languages/esm/languages/impala/impala.contribution',
 					worker: {
-						id: 'monaco-sql-languages/out/esm/flinksql/flinkSQLWorker',
-						entry: 'monaco-sql-languages/out/esm/flinksql/flinksql.worker'
+						id: '/esm/languages/impala/',
+						entry: 'monaco-sql-languages/esm/languages/impala/impala.worker'
 					}
 				}
 			]

diff --git a/samples/esm-monaco-webpack-plugin/webpack.prod.config.js b/samples/esm-monaco-webpack-plugin/webpack.prod.config.js
@@ -4,8 +4,5 @@ delete devConfig.devServer;
 delete devConfig.devtool;
 
 devConfig.mode = 'production';
-devConfig.optimization = {
-	minimize: false
-};
 
 module.exports = devConfig;
diff --git a/samples/esm-plain-webpack/index.html b/samples/esm-plain-webpack/index.html
@@ -1,18 +1,29 @@
 <!DOCTYPE html>
 <html>
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>esm-plain-webpack-sample</title>
+	</head>
 
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>esm-plain-webpack-sample</title>
-</head>
-
-<body>
-  <h2>FlinkSQL Demo</h2>
-  <div style="width: 700px;height: 400px;border: 1px solid #ddd;">
-    <div id="container" style="height: 100%; width: 100%;"></div>
-  </div>
-</body>
-
+	<body>
+		<h2>ESM Plain Webpack Demo</h2>
+		<select
+			name="language"
+			style="width: 120px; height: 32px; margin-bottom: 8px; font-size: 16px"
+			id="lang-select"
+		>
+			<option value="mysql">MYSQL</option>
+			<option value="flinksql" selected>FLINK</option>
+			<option value="hivesql">HIVE</option>
+			<option value="sparksql">SPARK</option>
+			<option value="impalasql">IMPALA</option>
+			<option value="trinosql">TRINO</option>
+			<option value="pgsql">PGSQL</option>
+		</select>
+		<div style="width: 700px; height: 400px; border: 1px solid #ddd">
+			<div id="container" style="height: 100%; width: 100%"></div>
+		</div>
+	</body>
 </html>
-<!doctype html>
+<!DOCTYPE html>