Merge pull request #71 from capaj/master
add an example usage with webpack, react and fast refreshpull/2748/head
Alexandru Dima
5 years ago
committed by
GitHub
commit
ab8921d09b
@ -0,0 +1,5 @@
|
|||||||
|
dist
|
||||||
|
lib
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +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"
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,43 @@
|
|||||||
|
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";
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
export const Editor: React.FC = () => {
|
||||||
|
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"
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return () => {
|
||||||
|
editor.dispose()
|
||||||
|
}
|
||||||
|
}, [])
|
||||||
|
return (
|
||||||
|
<div className="Editor" ref={divEl}>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
.Editor {
|
||||||
|
width: 800px;
|
||||||
|
height: 600px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
}
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<title>Monaco Editor Sample</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
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')
|
||||||
|
)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -0,0 +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"]
|
||||||
|
}
|
||||||
@ -0,0 +1,64 @@
|
|||||||
|
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)
|
||||||
|
|
||||||
|
};
|
||||||
Loading…
Reference in New Issue