github-forks
/
monaco-editor
mirror of https://github.com/microsoft/monaco-editor.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Run prettier

Browse Source
pull/2748/head
Alex Dima 5 years ago
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
Show Stats Download Patch File Download Diff File

16862
browser-esm-webpack-typescript-react/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

56
browser-esm-webpack-typescript-react/package.json
Unescape Escape View File

@ -1,30 +1,30 @@
{
"name": "monaco-esm-webpack-typescript",
"scripts": {
"start": "webpack-dev-server",
"build": "webpack --progress"
},
"dependencies": {},
"devDependencies": {
"@babel/core": "^7.11.4",
"@babel/preset-env": "^7.11.0",
"@babel/preset-react": "^7.10.4",
"@babel/preset-typescript": "^7.10.4",
"@pmmmwh/react-refresh-webpack-plugin": "^0.4.1",
"@types/react": "^16.9.48",
"@types/react-dom": "^16.9.8",
"babel-loader": "^8.1.0",
"css-loader": "^4.2.2",
"file-loader": "^6.0.0",
"html-webpack-plugin": "^4.4.1",
"monaco-editor": "^0.20.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-refresh": "^0.8.3",
"style-loader": "^1.2.1",
"typescript": "^4.0.2",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
}
"name": "monaco-esm-webpack-typescript",
"scripts": {
"start": "webpack-dev-server",
"build": "webpack --progress"
},
"dependencies": {},
"devDependencies": {
"@babel/core": "^7.11.4",
"@babel/preset-env": "^7.11.0",
"@babel/preset-react": "^7.10.4",
"@babel/preset-typescript": "^7.10.4",
"@pmmmwh/react-refresh-webpack-plugin": "^0.4.1",
"@types/react": "^16.9.48",
"@types/react-dom": "^16.9.8",
"babel-loader": "^8.1.0",
"css-loader": "^4.2.2",
"file-loader": "^6.0.0",
"html-webpack-plugin": "^4.4.1",
"monaco-editor": "^0.20.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-refresh": "^0.8.3",
"style-loader": "^1.2.1",
"typescript": "^4.0.2",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
}
}

59
browser-esm-webpack-typescript-react/src/components/Editor.tsx
Unescape Escape 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 === "css") {
return "./css.worker.bundle.js";
}
if (label === "html") {
return "./html.worker.bundle.js";
}
if (label === "typescript" || label === "javascript") {
return "./ts.worker.bundle.js";
}
return "./editor.worker.bundle.js";
getWorkerUrl: function (_moduleId: any, label: string) {
if (label === 'json') {
return './json.worker.bundle.js';
}
if (label === 'css') {
return './css.worker.bundle.js';
}
if (label === 'html') {
return './html.worker.bundle.js';
}
if (label === 'typescript' || label === 'javascript') {
return './ts.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>;
};

6
browser-esm-webpack-typescript-react/src/index.css
Unescape Escape View File

@ -1,5 +1,5 @@
.Editor {
width: 800px;
height: 600px;
border: 1px solid #ccc;
width: 800px;
height: 600px;
border: 1px solid #ccc;
}

16
browser-esm-webpack-typescript-react/src/index.html
Unescape Escape View File

@ -1,10 +1,10 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Monaco Editor Sample</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
<head>
<meta charset="utf-8" />
<title>Monaco Editor Sample</title>
</head>
<body>
<div id="root"></div>
</body>
</html>

22
browser-esm-webpack-typescript-react/src/index.tsx
Unescape Escape 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')
)
<React.StrictMode>
<Editor />
</React.StrictMode>,
document.getElementById('root')
);

32
browser-esm-webpack-typescript-react/tsconfig.json
Unescape Escape View File

@ -1,18 +1,18 @@
{
"compilerOptions": {
"sourceMap": true,
"module": "commonjs",
"moduleResolution": "node",
"strict": true,
"target": "ES6",
"outDir": "./dist",
"lib": ["dom", "es5", "es2015.collection", "es2015.promise"],
"types": [],
"baseUrl": "./node_modules",
"jsx": "preserve",
"esModuleInterop": true,
"typeRoots": ["node_modules/@types"]
},
"include": ["./src/**/*"],
"exclude": ["node_modules"]
"compilerOptions": {
"sourceMap": true,
"module": "commonjs",
"moduleResolution": "node",
"strict": true,
"target": "ES6",
"outDir": "./dist",
"lib": ["dom", "es5", "es2015.collection", "es2015.promise"],
"types": [],
"baseUrl": "./node_modules",
"jsx": "preserve",
"esModuleInterop": true,
"typeRoots": ["node_modules/@types"]
},
"include": ["./src/**/*"],
"exclude": ["node_modules"]
}

117
browser-esm-webpack-typescript-react/webpack.config.js
Unescape Escape View File

@ -1,64 +1,65 @@
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",
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"
},
devServer: {
hot: true
},
resolve: {
extensions: ['*', '.js', '.jsx', '.tsx', '.ts']
},
output: {
globalObject: "self",
filename: "[name].bundle.js",
path: path.resolve(__dirname, "dist")
},
module: {
rules: [
{
test: /\.(js|jsx|tsx|ts)$/,
exclude: /node_modules/,
use: [
{
loader: require.resolve('babel-loader'),
options: {
presets: [
"@babel/preset-env",
"@babel/preset-typescript",
"@babel/preset-react"
],
plugins: [isDevelopment && require.resolve('react-refresh/babel')].filter(Boolean),
}
}
]
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
},
{
test: /\.ttf$/,
use: ['file-loader']
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: 'src/index.html'
}),
isDevelopment && new ReactRefreshWebpackPlugin(),
].filter(Boolean)
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'
},
devServer: {
hot: true
},
resolve: {
extensions: ['*', '.js', '.jsx', '.tsx', '.ts']
},
output: {
globalObject: 'self',
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.(js|jsx|tsx|ts)$/,
exclude: /node_modules/,
use: [
{
loader: require.resolve('babel-loader'),
options: {
presets: [
'@babel/preset-env',
'@babel/preset-typescript',
'@babel/preset-react'
],
plugins: [
isDevelopment && require.resolve('react-refresh/babel')
].filter(Boolean)
}
}
]
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.ttf$/,
use: ['file-loader']
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: 'src/index.html'
}),
isDevelopment && new ReactRefreshWebpackPlugin()
].filter(Boolean)
};

Write Preview
Loading…
Cancel
Save