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", "name": "monaco-esm-webpack-typescript",
"scripts": { "scripts": {
"start": "webpack-dev-server", "start": "webpack-dev-server",
"build": "webpack --progress" "build": "webpack --progress"
}, },
"dependencies": {}, "dependencies": {},
"devDependencies": { "devDependencies": {
"@babel/core": "^7.11.4", "@babel/core": "^7.11.4",
"@babel/preset-env": "^7.11.0", "@babel/preset-env": "^7.11.0",
"@babel/preset-react": "^7.10.4", "@babel/preset-react": "^7.10.4",
"@babel/preset-typescript": "^7.10.4", "@babel/preset-typescript": "^7.10.4",
"@pmmmwh/react-refresh-webpack-plugin": "^0.4.1", "@pmmmwh/react-refresh-webpack-plugin": "^0.4.1",
"@types/react": "^16.9.48", "@types/react": "^16.9.48",
"@types/react-dom": "^16.9.8", "@types/react-dom": "^16.9.8",
"babel-loader": "^8.1.0", "babel-loader": "^8.1.0",
"css-loader": "^4.2.2", "css-loader": "^4.2.2",
"file-loader": "^6.0.0", "file-loader": "^6.0.0",
"html-webpack-plugin": "^4.4.1", "html-webpack-plugin": "^4.4.1",
"monaco-editor": "^0.20.0", "monaco-editor": "^0.20.0",
"react": "^16.13.1", "react": "^16.13.1",
"react-dom": "^16.13.1", "react-dom": "^16.13.1",
"react-refresh": "^0.8.3", "react-refresh": "^0.8.3",
"style-loader": "^1.2.1", "style-loader": "^1.2.1",
"typescript": "^4.0.2", "typescript": "^4.0.2",
"webpack": "^4.44.1", "webpack": "^4.44.1",
"webpack-cli": "^3.3.12", "webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0" "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 React, { useRef, useEffect } from 'react';
import * as monaco from "monaco-editor"; import * as monaco from 'monaco-editor';
// @ts-ignore // @ts-ignore
self.MonacoEnvironment = { self.MonacoEnvironment = {
getWorkerUrl: function(_moduleId: any, label: string) { getWorkerUrl: function (_moduleId: any, label: string) {
if (label === "json") { if (label === 'json') {
return "./json.worker.bundle.js"; return './json.worker.bundle.js';
} }
if (label === "css") { if (label === 'css') {
return "./css.worker.bundle.js"; return './css.worker.bundle.js';
} }
if (label === "html") { if (label === 'html') {
return "./html.worker.bundle.js"; return './html.worker.bundle.js';
} }
if (label === "typescript" || label === "javascript") { if (label === 'typescript' || label === 'javascript') {
return "./ts.worker.bundle.js"; return './ts.worker.bundle.js';
} }
return "./editor.worker.bundle.js"; return './editor.worker.bundle.js';
} }
}; };
export const Editor: React.FC = () => { export const Editor: React.FC = () => {
const divEl = useRef<HTMLDivElement>(null) const divEl = useRef<HTMLDivElement>(null);
let editor: monaco.editor.IStandaloneCodeEditor let editor: monaco.editor.IStandaloneCodeEditor;
useEffect(() => { useEffect(() => {
if (divEl.current) { if (divEl.current) {
editor = monaco.editor.create(divEl.current, { editor = monaco.editor.create(divEl.current, {
value: ["function x() {", '\tconsole.log("Hello world!");', "}"].join("\n"), value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join(
language: "typescript" '\n'
),
language: 'typescript'
}); });
} }
return () => { return () => {
editor.dispose() editor.dispose();
} };
}, []) }, []);
return ( return <div className="Editor" ref={divEl}></div>;
<div className="Editor" ref={divEl}> };
</div>
)
}

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

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

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

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

22
browser-esm-webpack-typescript-react/src/index.tsx
Unescape Escape View File

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

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

@ -1,18 +1,18 @@
{ {
"compilerOptions": { "compilerOptions": {
"sourceMap": true, "sourceMap": true,
"module": "commonjs", "module": "commonjs",
"moduleResolution": "node", "moduleResolution": "node",
"strict": true, "strict": true,
"target": "ES6", "target": "ES6",
"outDir": "./dist", "outDir": "./dist",
"lib": ["dom", "es5", "es2015.collection", "es2015.promise"], "lib": ["dom", "es5", "es2015.collection", "es2015.promise"],
"types": [], "types": [],
"baseUrl": "./node_modules", "baseUrl": "./node_modules",
"jsx": "preserve", "jsx": "preserve",
"esModuleInterop": true, "esModuleInterop": true,
"typeRoots": ["node_modules/@types"] "typeRoots": ["node_modules/@types"]
}, },
"include": ["./src/**/*"], "include": ["./src/**/*"],
"exclude": ["node_modules"] "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 path = require('path');
const HtmlWebPackPlugin = require("html-webpack-plugin"); const HtmlWebPackPlugin = require('html-webpack-plugin');
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin'); const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
const isDevelopment = process.env.NODE_ENV !== 'production'; const isDevelopment = process.env.NODE_ENV !== 'production';
module.exports = { module.exports = {
mode: "development", mode: 'development',
entry: { entry: {
app: "./src/index.tsx", app: './src/index.tsx',
"editor.worker": "monaco-editor/esm/vs/editor/editor.worker.js", 'editor.worker': 'monaco-editor/esm/vs/editor/editor.worker.js',
"json.worker": "monaco-editor/esm/vs/language/json/json.worker", 'json.worker': 'monaco-editor/esm/vs/language/json/json.worker',
"css.worker": "monaco-editor/esm/vs/language/css/css.worker", 'css.worker': 'monaco-editor/esm/vs/language/css/css.worker',
"html.worker": "monaco-editor/esm/vs/language/html/html.worker", 'html.worker': 'monaco-editor/esm/vs/language/html/html.worker',
"ts.worker": "monaco-editor/esm/vs/language/typescript/ts.worker" 'ts.worker': 'monaco-editor/esm/vs/language/typescript/ts.worker'
}, },
devServer: { devServer: {
hot: true hot: true
}, },
resolve: { resolve: {
extensions: ['*', '.js', '.jsx', '.tsx', '.ts'] extensions: ['*', '.js', '.jsx', '.tsx', '.ts']
}, },
output: { output: {
globalObject: "self", globalObject: 'self',
filename: "[name].bundle.js", filename: '[name].bundle.js',
path: path.resolve(__dirname, "dist") path: path.resolve(__dirname, 'dist')
}, },
module: { module: {
rules: [ rules: [
{ {
test: /\.(js|jsx|tsx|ts)$/, test: /\.(js|jsx|tsx|ts)$/,
exclude: /node_modules/, exclude: /node_modules/,
use: [ use: [
{ {
loader: require.resolve('babel-loader'), loader: require.resolve('babel-loader'),
options: { options: {
presets: [ presets: [
"@babel/preset-env", '@babel/preset-env',
"@babel/preset-typescript", '@babel/preset-typescript',
"@babel/preset-react" '@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"] {
}, test: /\.css$/,
{ use: ['style-loader', 'css-loader']
test: /\.ttf$/, },
use: ['file-loader'] {
} test: /\.ttf$/,
] use: ['file-loader']
}, }
plugins: [ ]
new HtmlWebPackPlugin({ },
template: 'src/index.html' plugins: [
}), new HtmlWebPackPlugin({
isDevelopment && new ReactRefreshWebpackPlugin(), template: 'src/index.html'
].filter(Boolean) }),
isDevelopment && new ReactRefreshWebpackPlugin()
].filter(Boolean)
}; };

Write Preview
Loading…
Cancel
Save