Rename to /samples/

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

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

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

@@ -0,0 +1,23 @@
+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>;
+};

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')
+);

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);

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

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