Merge pull request microsoft#2767 from activeguild/add-vite-react-sample

Add 'browser-ems-vite-react' sample
qingniaotonghua · Nov 15, 2021 · a66f20e · a66f20e
2 parents d901c5b + 43b3d49
commit a66f20e
Show file tree

Hide file tree

Showing 11 changed files with 992 additions and 0 deletions.
diff --git a/monaco-editor-samples/browser-esm-vite-react/.gitignore b/monaco-editor-samples/browser-esm-vite-react/.gitignore
@@ -0,0 +1,2 @@
+dist
+src/**/*.js
diff --git a/monaco-editor-samples/browser-esm-vite-react/index.html b/monaco-editor-samples/browser-esm-vite-react/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>browser-esm-vite-react</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/monaco-editor-samples/browser-esm-vite-react/package-lock.json b/monaco-editor-samples/browser-esm-vite-react/package-lock.json
diff --git a/monaco-editor-samples/browser-esm-vite-react/package.json b/monaco-editor-samples/browser-esm-vite-react/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "browser-esm-vite-react",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "serve": "vite preview"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "monaco-editor": "^0.30.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.0",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "@vitejs/plugin-react": "^1.0.0",
+    "typescript": "^4.4.4",
+    "vite": "^2.6.14"
+  }
+}
diff --git a/monaco-editor-samples/browser-esm-vite-react/src/components/Editor.module.css b/monaco-editor-samples/browser-esm-vite-react/src/components/Editor.module.css
@@ -0,0 +1,4 @@
+.Editor {
+    width: 100vw;
+    height: 100vh;
+}
diff --git a/monaco-editor-samples/browser-esm-vite-react/src/components/Editor.tsx b/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>;
+};
diff --git a/monaco-editor-samples/browser-esm-vite-react/src/main.tsx b/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')
+)
diff --git a/monaco-editor-samples/browser-esm-vite-react/src/userWorker.ts b/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);
diff --git a/monaco-editor-samples/browser-esm-vite-react/src/vite-env.d.ts b/monaco-editor-samples/browser-esm-vite-react/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/monaco-editor-samples/browser-esm-vite-react/tsconfig.json b/monaco-editor-samples/browser-esm-vite-react/tsconfig.json
@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "strict": true,
+    "module": "ESNext",
+    "jsx": "react-jsx",
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["./src"]
+}
diff --git a/monaco-editor-samples/browser-esm-vite-react/vite.config.ts b/monaco-editor-samples/browser-esm-vite-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()]
+})