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

Run prettier

Browse source
This commit is contained in:
Alex Dima 2020-09-02 17:36:59 +02:00
parent 256e10bb54
commit cff50c2a31
No known key found for this signature in database
GPG key ID: 6E58D7B045760DA0
8 changed files with 8582 additions and 8588 deletions
Download patch file Download diff file Expand all files Collapse all files

47
browser-esm-webpack-typescript-react/src/components/Editor.tsx
View file

@ -1,43 +1,40 @@
import React, { useRef, useEffect } from 'react'
import * as monaco from "monaco-editor";
import React, { useRef, useEffect } from 'react';
import * as monaco from 'monaco-editor';
// @ts-ignore
self.MonacoEnvironment = {
getWorkerUrl: function (_moduleId: any, label: string) {
if (label === "json") {
return "./json.worker.bundle.js";
if (label === 'json') {
return './json.worker.bundle.js';
}
if (label === "css") {
return "./css.worker.bundle.js";
if (label === 'css') {
return './css.worker.bundle.js';
}
if (label === "html") {
return "./html.worker.bundle.js";
if (label === 'html') {
return './html.worker.bundle.js';
}
if (label === "typescript" || label === "javascript") {
return "./ts.worker.bundle.js";
if (label === 'typescript' || label === 'javascript') {
return './ts.worker.bundle.js';
}
return "./editor.worker.bundle.js";
return './editor.worker.bundle.js';
}
};
export const Editor: React.FC = () => {
const divEl = useRef<HTMLDivElement>(null)
let editor: monaco.editor.IStandaloneCodeEditor
const divEl = useRef<HTMLDivElement>(null);
let editor: monaco.editor.IStandaloneCodeEditor;
useEffect(() => {
if (divEl.current) {
editor = monaco.editor.create(divEl.current, {
value: ["function x() {", '\tconsole.log("Hello world!");', "}"].join("\n"),
language: "typescript"
value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join(
'\n'
),
language: 'typescript'
});
}
return () => {
editor.dispose()
}
}, [])
return (
<div className="Editor" ref={divEl}>
</div>
)
}
editor.dispose();
};
}, []);
return <div className="Editor" ref={divEl}></div>;
};

14
browser-esm-webpack-typescript-react/src/index.tsx
View file

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

39
browser-esm-webpack-typescript-react/webpack.config.js
View file

@ -1,18 +1,18 @@
const path = require("path");
const HtmlWebPackPlugin = require("html-webpack-plugin");
const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
const isDevelopment = process.env.NODE_ENV !== 'production';
module.exports = {
mode: "development",
mode: 'development',
entry: {
app: "./src/index.tsx",
"editor.worker": "monaco-editor/esm/vs/editor/editor.worker.js",
"json.worker": "monaco-editor/esm/vs/language/json/json.worker",
"css.worker": "monaco-editor/esm/vs/language/css/css.worker",
"html.worker": "monaco-editor/esm/vs/language/html/html.worker",
"ts.worker": "monaco-editor/esm/vs/language/typescript/ts.worker"
app: './src/index.tsx',
'editor.worker': 'monaco-editor/esm/vs/editor/editor.worker.js',
'json.worker': 'monaco-editor/esm/vs/language/json/json.worker',
'css.worker': 'monaco-editor/esm/vs/language/css/css.worker',
'html.worker': 'monaco-editor/esm/vs/language/html/html.worker',
'ts.worker': 'monaco-editor/esm/vs/language/typescript/ts.worker'
},
devServer: {
hot: true
@ -21,9 +21,9 @@ module.exports = {
extensions: ['*', '.js', '.jsx', '.tsx', '.ts']
},
output: {
globalObject: "self",
filename: "[name].bundle.js",
path: path.resolve(__dirname, "dist")
globalObject: 'self',
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
@ -35,18 +35,20 @@ module.exports = {
loader: require.resolve('babel-loader'),
options: {
presets: [
"@babel/preset-env",
"@babel/preset-typescript",
"@babel/preset-react"
'@babel/preset-env',
'@babel/preset-typescript',
'@babel/preset-react'
],
plugins: [isDevelopment && require.resolve('react-refresh/babel')].filter(Boolean),
plugins: [
isDevelopment && require.resolve('react-refresh/babel')
].filter(Boolean)
}
}
]
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
use: ['style-loader', 'css-loader']
},
{
test: /\.ttf$/,
@ -58,7 +60,6 @@ module.exports = {
new HtmlWebPackPlugin({
template: 'src/index.html'
}),
isDevelopment && new ReactRefreshWebpackPlugin(),
isDevelopment && new ReactRefreshWebpackPlugin()
].filter(Boolean)
};