('-- Please enter your SQL here --');
+
+ return (
+ <>
+ @monaco-editor/react Demo
+
+
+
+
+ setValue(newValue || '')}
+ options={{
+ minimap: { enabled: false },
+ fontSize: 14
+ }}
+ />
+
+
+ );
+};
+
+export default App;
diff --git a/samples/esm-vite-monaco-editor-react/src/languageSetup.ts b/samples/esm-vite-monaco-editor-react/src/languageSetup.ts
new file mode 100644
index 00000000..bb599c0b
--- /dev/null
+++ b/samples/esm-vite-monaco-editor-react/src/languageSetup.ts
@@ -0,0 +1,49 @@
+import { LanguageIdEnum } from 'monaco-sql-languages';
+/** import contribution file */
+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';
+
+// import 'monaco-sql-languages/esm/all.contributions';
+
+/** import worker files */
+import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
+import FlinkSQLWorker from 'monaco-sql-languages/esm/languages/flink/flink.worker?worker';
+import SparkSQLWorker from 'monaco-sql-languages/esm/languages/spark/spark.worker?worker';
+import HiveSQLWorker from 'monaco-sql-languages/esm/languages/hive/hive.worker?worker';
+import PGSQLWorker from 'monaco-sql-languages/esm/languages/pgsql/pgsql.worker?worker';
+import MySQLWorker from 'monaco-sql-languages/esm/languages/mysql/mysql.worker?worker';
+import TrinoSQLWorker from 'monaco-sql-languages/esm/languages/trino/trino.worker?worker';
+import ImpalaSQLWorker from 'monaco-sql-languages/esm/languages/impala/impala.worker?worker';
+
+/** define MonacoEnvironment.getWorker */
+(globalThis as any).MonacoEnvironment = {
+ getWorker(_: any, label: string) {
+ if (label === LanguageIdEnum.FLINK) {
+ return new FlinkSQLWorker();
+ }
+ if (label === LanguageIdEnum.HIVE) {
+ return new HiveSQLWorker();
+ }
+ if (label === LanguageIdEnum.SPARK) {
+ return new SparkSQLWorker();
+ }
+ if (label === LanguageIdEnum.PG) {
+ return new PGSQLWorker();
+ }
+ if (label === LanguageIdEnum.MYSQL) {
+ return new MySQLWorker();
+ }
+ if (label === LanguageIdEnum.TRINO) {
+ return new TrinoSQLWorker();
+ }
+ if (label === LanguageIdEnum.IMPALA) {
+ return new ImpalaSQLWorker();
+ }
+ return new EditorWorker();
+ }
+};
diff --git a/samples/esm-vite-monaco-editor-react/src/main.tsx b/samples/esm-vite-monaco-editor-react/src/main.tsx
new file mode 100644
index 00000000..482551b4
--- /dev/null
+++ b/samples/esm-vite-monaco-editor-react/src/main.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './languageSetup';
+import App from './App.tsx';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+
+
+
+);
diff --git a/samples/esm-vite-monaco-editor-react/src/vite-env.d.ts b/samples/esm-vite-monaco-editor-react/src/vite-env.d.ts
new file mode 100644
index 00000000..11f02fe2
--- /dev/null
+++ b/samples/esm-vite-monaco-editor-react/src/vite-env.d.ts
@@ -0,0 +1 @@
+///
diff --git a/samples/esm-vite-monaco-editor-react/tsconfig.json b/samples/esm-vite-monaco-editor-react/tsconfig.json
new file mode 100644
index 00000000..aca48955
--- /dev/null
+++ b/samples/esm-vite-monaco-editor-react/tsconfig.json
@@ -0,0 +1,25 @@
+{
+ "compilerOptions": {
+ "target": "ES2020",
+ "useDefineForClassFields": true,
+ "lib": ["ES2020", "DOM", "DOM.Iterable"],
+ "module": "ESNext",
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+ "jsx": "react-jsx",
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "include": ["src"],
+ "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/samples/esm-vite-monaco-editor-react/tsconfig.node.json b/samples/esm-vite-monaco-editor-react/tsconfig.node.json
new file mode 100644
index 00000000..eca66688
--- /dev/null
+++ b/samples/esm-vite-monaco-editor-react/tsconfig.node.json
@@ -0,0 +1,10 @@
+{
+ "compilerOptions": {
+ "composite": true,
+ "skipLibCheck": true,
+ "module": "ESNext",
+ "moduleResolution": "bundler",
+ "allowSyntheticDefaultImports": true
+ },
+ "include": ["vite.config.ts"]
+}
diff --git a/samples/esm-vite-monaco-editor-react/vite.config.ts b/samples/esm-vite-monaco-editor-react/vite.config.ts
new file mode 100644
index 00000000..94b332fd
--- /dev/null
+++ b/samples/esm-vite-monaco-editor-react/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ plugins: [react()]
+});