SystemSh0cker/monaco-editor
1
0
Fork 0
mirror of https://github.com/microsoft/monaco-editor.git synced 2025-12-22 12:45:39 +01:00
Code Issues Projects Releases Packages Activity

Add 'browser-ems-vite-react' sample

Browse source
This commit is contained in:
j1ngzoue 2021-11-15 03:56:17 +09:00
parent d901c5b613
commit 4f48e64902
11 changed files with 2230 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

1
monaco-editor-samples/browser-esm-vite-react/.gitignore vendored Normal file
View file

@ -0,0 +1 @@
dist

12
monaco-editor-samples/browser-esm-vite-react/index.html Normal file
View file

@ -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>

2113
monaco-editor-samples/browser-esm-vite-react/package-lock.json generated Normal file
View file

File diff suppressed because it is too large Load diff

19
monaco-editor-samples/browser-esm-vite-react/package.json Normal file
View file

@ -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"
}
}

4
monaco-editor-samples/browser-esm-vite-react/src/components/Editor.module.css Normal file
View file

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

24
monaco-editor-samples/browser-esm-vite-react/src/components/Editor.tsx Normal file
View file

@ -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>;
};

11
monaco-editor-samples/browser-esm-vite-react/src/main.tsx Normal file
View file

@ -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')
)

27
monaco-editor-samples/browser-esm-vite-react/src/userWorker.ts Normal file
View file

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

1
monaco-editor-samples/browser-esm-vite-react/src/vite-env.d.ts vendored Normal file
View file

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

11
monaco-editor-samples/browser-esm-vite-react/tsconfig.json Normal file
View file

@ -0,0 +1,11 @@
{
"compilerOptions": {
"target": "ESNext",
"strict": true,
"module": "ESNext",
"jsx": "react-jsx",
"moduleResolution": "node",
"allowSyntheticDefaultImports": true
},
"include": ["./src"]
}

7
monaco-editor-samples/browser-esm-vite-react/vite.config.ts Normal file
View file

@ -0,0 +1,7 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()]
})