Run prettier

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

@@ -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
 self.MonacoEnvironment = {
 	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 = () => {
-	const divEl = useRef<HTMLDivElement>(null)
+	const divEl = useRef<HTMLDivElement>(null);
-	let editor: monaco.editor.IStandaloneCodeEditor
+	let editor: monaco.editor.IStandaloneCodeEditor;
 	useEffect(() => {
 		if (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 () => {
-			editor.dispose()
+			editor.dispose();
-		}
+		};
-	}, [])
+	}, []);
-	return (
+	return <div className="Editor" ref={divEl}></div>;
-		<div className="Editor" ref={divEl}>
+};
-		</div>
-	)
-}

browser-esm-webpack-typescript-react/src/index.tsx

@@ -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(
 	<React.StrictMode>
 		<Editor />
 	</React.StrictMode>,
 	document.getElementById('root')
-)
+);
-
-
-

browser-esm-webpack-typescript-react/webpack.config.js

@@ -1,18 +1,18 @@
-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 isDevelopment = process.env.NODE_ENV !== 'production';
 
 module.exports = {
-  mode: "development",
+	mode: 'development',
 	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: {
 		hot: true
@@ -21,9 +21,9 @@ module.exports = {
 		extensions: ['*', '.js', '.jsx', '.tsx', '.ts']
 	},
 	output: {
-    globalObject: "self",
+		globalObject: 'self',
-    filename: "[name].bundle.js",
+		filename: '[name].bundle.js',
-    path: path.resolve(__dirname, "dist")
+		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-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"]
+				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)
-
 };