Run `prettier`
parent
a66f20ee2e
commit
edb439d4f6
@ -1,12 +1,12 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>browser-esm-vite-react</title>
|
<title>browser-esm-vite-react</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
<script type="module" src="/src/main.tsx"></script>
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
File diff suppressed because it is too large
Load Diff
@ -1,19 +1,19 @@
|
|||||||
{
|
{
|
||||||
"name": "browser-esm-vite-react",
|
"name": "browser-esm-vite-react",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite",
|
"dev": "vite",
|
||||||
"build": "tsc && vite build",
|
"build": "tsc && vite build",
|
||||||
"serve": "vite preview"
|
"serve": "vite preview"
|
||||||
},
|
},
|
||||||
"dependencies": {},
|
"dependencies": {},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"monaco-editor": "^0.30.1",
|
"monaco-editor": "^0.30.1",
|
||||||
"react": "^17.0.2",
|
"react": "^17.0.2",
|
||||||
"react-dom": "^17.0.0",
|
"react-dom": "^17.0.0",
|
||||||
"@types/react": "^17.0.0",
|
"@types/react": "^17.0.0",
|
||||||
"@types/react-dom": "^17.0.0",
|
"@types/react-dom": "^17.0.0",
|
||||||
"@vitejs/plugin-react": "^1.0.0",
|
"@vitejs/plugin-react": "^1.0.0",
|
||||||
"typescript": "^4.4.4",
|
"typescript": "^4.4.4",
|
||||||
"vite": "^2.6.14"
|
"vite": "^2.6.14"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
.Editor {
|
.Editor {
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
}
|
}
|
||||||
|
@ -1,24 +1,23 @@
|
|||||||
import { VFC, useRef, useState, useEffect } from "react";
|
import { VFC, useRef, useState, useEffect } from 'react';
|
||||||
import * as monaco from "monaco-editor/esm/vs/editor/editor.api";
|
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
|
||||||
import styles from "./Editor.module.css";
|
import styles from './Editor.module.css';
|
||||||
|
|
||||||
export const Editor: VFC = () => {
|
export const Editor: VFC = () => {
|
||||||
const [editor, setEditor] =
|
const [editor, setEditor] = useState<monaco.editor.IStandaloneCodeEditor | null>(null);
|
||||||
useState<monaco.editor.IStandaloneCodeEditor | null>(null);
|
const monacoEl = useRef(null);
|
||||||
const monacoEl = useRef(null);
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (monacoEl && !editor) {
|
if (monacoEl && !editor) {
|
||||||
setEditor(
|
setEditor(
|
||||||
monaco.editor.create(monacoEl.current!, {
|
monaco.editor.create(monacoEl.current!, {
|
||||||
value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
|
value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
|
||||||
language: "typescript",
|
language: 'typescript'
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return () => editor?.dispose();
|
return () => editor?.dispose();
|
||||||
}, [monacoEl.current]);
|
}, [monacoEl.current]);
|
||||||
|
|
||||||
return <div className={styles.Editor} ref={monacoEl}></div>;
|
return <div className={styles.Editor} ref={monacoEl}></div>;
|
||||||
};
|
};
|
||||||
|
@ -1,11 +1,11 @@
|
|||||||
import React from 'react'
|
import React from 'react';
|
||||||
import ReactDOM from 'react-dom'
|
import ReactDOM from 'react-dom';
|
||||||
import {Editor} from './components/Editor'
|
import { Editor } from './components/Editor';
|
||||||
import "./userWorker";
|
import './userWorker';
|
||||||
|
|
||||||
ReactDOM.render(
|
ReactDOM.render(
|
||||||
<React.StrictMode>
|
<React.StrictMode>
|
||||||
<Editor />
|
<Editor />
|
||||||
</React.StrictMode>,
|
</React.StrictMode>,
|
||||||
document.getElementById('root')
|
document.getElementById('root')
|
||||||
)
|
);
|
||||||
|
@ -1,27 +1,27 @@
|
|||||||
import * as monaco from "monaco-editor";
|
import * as monaco from 'monaco-editor';
|
||||||
import editorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
|
import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
|
||||||
import jsonWorker from "monaco-editor/esm/vs/language/json/json.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 cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
|
||||||
import htmlWorker from "monaco-editor/esm/vs/language/html/html.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";
|
import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
|
||||||
|
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
self.MonacoEnvironment = {
|
self.MonacoEnvironment = {
|
||||||
getWorker(_: any, label: string) {
|
getWorker(_: any, label: string) {
|
||||||
if (label === "json") {
|
if (label === 'json') {
|
||||||
return new jsonWorker();
|
return new jsonWorker();
|
||||||
}
|
}
|
||||||
if (label === "css" || label === "scss" || label === "less") {
|
if (label === 'css' || label === 'scss' || label === 'less') {
|
||||||
return new cssWorker();
|
return new cssWorker();
|
||||||
}
|
}
|
||||||
if (label === "html" || label === "handlebars" || label === "razor") {
|
if (label === 'html' || label === 'handlebars' || label === 'razor') {
|
||||||
return new htmlWorker();
|
return new htmlWorker();
|
||||||
}
|
}
|
||||||
if (label === "typescript" || label === "javascript") {
|
if (label === 'typescript' || label === 'javascript') {
|
||||||
return new tsWorker();
|
return new tsWorker();
|
||||||
}
|
}
|
||||||
return new editorWorker();
|
return new editorWorker();
|
||||||
},
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
monaco.languages.typescript.typescriptDefaults.setEagerModelSync(true);
|
monaco.languages.typescript.typescriptDefaults.setEagerModelSync(true);
|
||||||
|
@ -1,11 +1,11 @@
|
|||||||
{
|
{
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"target": "ESNext",
|
"target": "ESNext",
|
||||||
"strict": true,
|
"strict": true,
|
||||||
"module": "ESNext",
|
"module": "ESNext",
|
||||||
"jsx": "react-jsx",
|
"jsx": "react-jsx",
|
||||||
"moduleResolution": "node",
|
"moduleResolution": "node",
|
||||||
"allowSyntheticDefaultImports": true
|
"allowSyntheticDefaultImports": true
|
||||||
},
|
},
|
||||||
"include": ["./src"]
|
"include": ["./src"]
|
||||||
}
|
}
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
import { defineConfig } from 'vite'
|
import { defineConfig } from 'vite';
|
||||||
import react from '@vitejs/plugin-react'
|
import react from '@vitejs/plugin-react';
|
||||||
|
|
||||||
// https://vitejs.dev/config/
|
// https://vitejs.dev/config/
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
plugins: [react()]
|
plugins: [react()]
|
||||||
})
|
});
|
||||||
|
Loading…
Reference in New Issue