Add 'browser-ems-vite-react' sample

monaco-editor-samples/browser-esm-vite-react/src/components/Editor.module.css

@@ -0,0 +1,4 @@
+.Editor {
+    width: 100vw;
+    height: 100vh;
+}

monaco-editor-samples/browser-esm-vite-react/src/components/Editor.tsx

@@ -0,0 +1,24 @@
+import { VFC, useRef, useState, useEffect } from "react";
+import * as monaco from "monaco-editor/esm/vs/editor/editor.api";
+import styles from "./Editor.module.css";
+
+export const Editor: VFC = () => {
+  const [editor, setEditor] =
+    useState<monaco.editor.IStandaloneCodeEditor | null>(null);
+  const monacoEl = useRef(null);
+
+  useEffect(() => {
+    if (monacoEl && !editor) {
+      setEditor(
+        monaco.editor.create(monacoEl.current!, {
+          value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
+          language: "typescript",
+        })
+      );
+    }
+
+    return () => editor?.dispose();
+  }, [monacoEl.current]);
+
+  return <div className={styles.Editor} ref={monacoEl}></div>;
+};

monaco-editor-samples/browser-esm-vite-react/src/main.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import {Editor} from './components/Editor'
+import "./userWorker";
+
+ReactDOM.render(
+  <React.StrictMode>
+    <Editor />
+  </React.StrictMode>,
+  document.getElementById('root')
+)

monaco-editor-samples/browser-esm-vite-react/src/userWorker.ts

@@ -0,0 +1,27 @@
+import * as monaco from "monaco-editor";
+import editorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
+import jsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker";
+import cssWorker from "monaco-editor/esm/vs/language/css/css.worker?worker";
+import htmlWorker from "monaco-editor/esm/vs/language/html/html.worker?worker";
+import tsWorker from "monaco-editor/esm/vs/language/typescript/ts.worker?worker";
+
+// @ts-ignore
+self.MonacoEnvironment = {
+  getWorker(_: any, label: string) {
+    if (label === "json") {
+      return new jsonWorker();
+    }
+    if (label === "css" || label === "scss" || label === "less") {
+      return new cssWorker();
+    }
+    if (label === "html" || label === "handlebars" || label === "razor") {
+      return new htmlWorker();
+    }
+    if (label === "typescript" || label === "javascript") {
+      return new tsWorker();
+    }
+    return new editorWorker();
+  },
+};
+
+monaco.languages.typescript.typescriptDefaults.setEagerModelSync(true);

monaco-editor-samples/browser-esm-vite-react/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />