From f04c54d0f36d3df743cd41bb5df4162b102022c6 Mon Sep 17 00:00:00 2001
From: Satish Babariya <satish.babariya@gmail.com>
Date: Sun, 19 May 2019 12:49:01 +0530
Subject: [PATCH] Add typescript webpack sample

---
 browser-esm-webpack-typescript/.gitignore     |  9 +++++
 browser-esm-webpack-typescript/package.json   | 18 +++++++++
 browser-esm-webpack-typescript/src/index.css  |  5 +++
 browser-esm-webpack-typescript/src/index.ts   | 26 ++++++++++++
 browser-esm-webpack-typescript/tsconfig.json  | 16 ++++++++
 .../webpack.config.js                         | 40 +++++++++++++++++++
 6 files changed, 114 insertions(+)
 create mode 100644 browser-esm-webpack-typescript/.gitignore
 create mode 100644 browser-esm-webpack-typescript/package.json
 create mode 100644 browser-esm-webpack-typescript/src/index.css
 create mode 100644 browser-esm-webpack-typescript/src/index.ts
 create mode 100644 browser-esm-webpack-typescript/tsconfig.json
 create mode 100644 browser-esm-webpack-typescript/webpack.config.js

diff --git a/browser-esm-webpack-typescript/.gitignore b/browser-esm-webpack-typescript/.gitignore
new file mode 100644
index 00000000..a6475a57
--- /dev/null
+++ b/browser-esm-webpack-typescript/.gitignore
@@ -0,0 +1,9 @@
+dist
+lib
+logs
+*.log
+npm-debug.log*
+
+
+
+
diff --git a/browser-esm-webpack-typescript/package.json b/browser-esm-webpack-typescript/package.json
new file mode 100644
index 00000000..4860f793
--- /dev/null
+++ b/browser-esm-webpack-typescript/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "monaco-esm-webpack-typescript",
+  "scripts": {
+    "start": "webpack-dev-server",
+    "build": "webpack"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "css-loader": "^2.1.1",
+    "html-webpack-plugin": "^3.2.0",
+    "monaco-editor": "^0.17.0",
+    "ts-loader": "^6.0.1",
+    "typescript": "^3.4.5",
+    "webpack": "^4.31.0",
+    "webpack-cli": "^3.3.2",
+    "webpack-dev-server": "^3.4.1"
+  }
+}
diff --git a/browser-esm-webpack-typescript/src/index.css b/browser-esm-webpack-typescript/src/index.css
new file mode 100644
index 00000000..01fe7018
--- /dev/null
+++ b/browser-esm-webpack-typescript/src/index.css
@@ -0,0 +1,5 @@
+body {
+  width: 800px;
+  height: 600px;
+  border: 1px solid #ccc;
+}
diff --git a/browser-esm-webpack-typescript/src/index.ts b/browser-esm-webpack-typescript/src/index.ts
new file mode 100644
index 00000000..e653cc4e
--- /dev/null
+++ b/browser-esm-webpack-typescript/src/index.ts
@@ -0,0 +1,26 @@
+import * as monaco from "monaco-editor";
+import "./index.css";
+
+// @ts-ignore
+self.MonacoEnvironment = {
+  getWorkerUrl: function(moduleId, label) {
+    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";
+  }
+};
+
+monaco.editor.create(document.body, {
+  value: ["function x() {", '\tconsole.log("Hello world!");', "}"].join("\n"),
+  language: "typescript"
+});
diff --git a/browser-esm-webpack-typescript/tsconfig.json b/browser-esm-webpack-typescript/tsconfig.json
new file mode 100644
index 00000000..4fcb9514
--- /dev/null
+++ b/browser-esm-webpack-typescript/tsconfig.json
@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "sourceMap": true,
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "target": "es5",
+    "outDir": "./dist",
+    "lib": ["dom", "es5", "es2015.collection", "es2015.promise"],
+    "types": [],
+    "baseUrl": "./node_modules",
+    "jsx": "preserve",
+    "typeRoots": ["node_modules/@types"]
+  },
+  "include": ["./src/**/*"],
+  "exclude": ["node_modules"]
+}
diff --git a/browser-esm-webpack-typescript/webpack.config.js b/browser-esm-webpack-typescript/webpack.config.js
new file mode 100644
index 00000000..8d8804e3
--- /dev/null
+++ b/browser-esm-webpack-typescript/webpack.config.js
@@ -0,0 +1,40 @@
+const path = require("path");
+const HtmlWebPackPlugin = require("html-webpack-plugin");
+
+module.exports = {
+  mode: "development",
+  entry: {
+    app: "./src/index.ts",
+    "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"
+  },
+  resolve: {
+    extensions: [".ts", ".js"]
+  },
+  output: {
+    globalObject: "self",
+    filename: "[name].bundle.js",
+    path: path.resolve(__dirname, "dist")
+  },
+  module: {
+    rules: [
+      {
+        test: /\.ts?$/,
+        use: "ts-loader",
+        exclude: /node_modules/
+      },
+      {
+        test: /\.css$/,
+        use: ["style-loader", "css-loader"]
+      }
+    ]
+  },
+  plugins: [
+    new HtmlWebPackPlugin({
+      title: "Monaco Editor Sample"
+    })
+  ]
+};