diff --git a/index.html b/index.html
index 11201b1ca6..d9c0194131 100644
--- a/index.html
+++ b/index.html
@@ -14,7 +14,7 @@
margin-bottom: 16px;
}
- textarea.textbox {
+ .textbox {
height: 250px;
border: 1px solid #8db5e4;
margin-bottom: 16px;
@@ -47,7 +47,7 @@
flex-direction: column;
}
- textarea.textbox {
+ .textbox {
min-height: 279px;
}
@@ -62,7 +62,7 @@
diff --git a/index.js b/index.js
index c6226f7aa6..0a1fe3e103 100644
--- a/index.js
+++ b/index.js
@@ -2,20 +2,37 @@
// webpack/webpack#6615, but in theory `import { greet } from './pkg/hello_world';`
// will work here one day as well!
const rust = import("./pkg");
+import * as monaco from "monaco-editor";
// const image = import("./assets/01_rust_loves_js.png");
+const editor = monaco.editor.create(
+ document.getElementsByClassName("textbox")[0],
+ {
+ value: "",
+ language: "javascript",
+ theme: "vs-dark"
+ }
+);
+
+
+// Fix size of Monaco Editor when window resize
+window.addEventListener('resize', () => {
+ editor.layout();
+});
+
+
rust.then(m => {
window.evaluate = m.evaluate;
- let textarea = document.querySelector("textarea");
- textarea.addEventListener("input", inputHandler);
+
+ editor.getModel().onDidChangeContent(inputHandler);
});
function inputHandler(evt) {
- let text = evt.target.value;
+ const text = editor.getValue();
let p = document.querySelector("p.output");
let t0 = performance.now();
let result = window.evaluate(text);
let t1 = performance.now();
p.textContent = `> ${result}`;
console.log(result);
-}
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index e0b4378174..d3f4133ff8 100644
--- a/package.json
+++ b/package.json
@@ -8,10 +8,16 @@
"bootstrap": "^4.3.1",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^5.0.3",
+ "css-loader": "^3.2.0",
"html-webpack-plugin": "^3.2.0",
+ "monaco-editor-webpack-plugin": "^1.7.0",
+ "style-loader": "^1.0.0",
"text-encoding": "^0.7.0",
"webpack": "^4.40.2",
"webpack-cli": "^3.3.9",
"webpack-dev-server": "^3.8.1"
+ },
+ "dependencies": {
+ "monaco-editor": "^0.18.1"
}
}
diff --git a/webpack.config.js b/webpack.config.js
index 1f1432553a..a2849da37d 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -4,6 +4,7 @@ const {CleanWebpackPlugin} = require("clean-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const webpack = require("webpack");
const WasmPackPlugin = require("@wasm-tool/wasm-pack-plugin");
+const MonacoWebpackPlugin = require("monaco-editor-webpack-plugin");
module.exports = {
entry: "./index.js",
@@ -31,7 +32,14 @@ module.exports = {
new webpack.ProvidePlugin({
TextDecoder: ["text-encoding", "TextDecoder"],
TextEncoder: ["text-encoding", "TextEncoder"]
- })
+ }),
+ new MonacoWebpackPlugin()
],
+ module: {
+ rules: [{
+ test: /\.css$/,
+ use: ["style-loader", "css-loader"]
+ }]
+ },
mode: "development"
};
diff --git a/yarn.lock b/yarn.lock
index 6d43c80c10..cf209a6e40 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -48,6 +48,18 @@
"@types/source-list-map" "*"
source-map "^0.6.1"
+"@types/webpack@^4.4.19":
+ version "4.39.2"
+ resolved "https://registry.yarnpkg.com/@types/webpack/-/webpack-4.39.2.tgz#fcaa85607a9bdd0e8f86a350f239ff08aede8584"
+ integrity sha512-3c7+vcmyyIi3RBoOdXs8k3E9rQVIy6yOBqK0DFk6lnJ76JUfbDBWbEf1JflzyPQf56W4ToE+2YPnbxbucniW5w==
+ dependencies:
+ "@types/anymatch" "*"
+ "@types/node" "*"
+ "@types/tapable" "*"
+ "@types/uglify-js" "*"
+ "@types/webpack-sources" "*"
+ source-map "^0.6.0"
+
"@types/webpack@^4.4.31":
version "4.39.1"
resolved "https://registry.yarnpkg.com/@types/webpack/-/webpack-4.39.1.tgz#d76cd551cc851198f67f75ff3e26551d204530e9"
@@ -597,11 +609,11 @@ camel-case@3.0.x:
no-case "^2.2.0"
upper-case "^1.1.1"
-camelcase@^5.0.0:
+camelcase@^5.0.0, camelcase@^5.3.1:
version "5.3.1"
resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
-chalk@2.4.2, chalk@^2.4.1:
+chalk@2.4.2, chalk@^2.4.1, chalk@^2.4.2:
version "2.4.2"
resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
dependencies:
@@ -884,6 +896,24 @@ crypto-browserify@^3.11.0:
randombytes "^2.0.0"
randomfill "^1.0.3"
+css-loader@^3.2.0:
+ version "3.2.0"
+ resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-3.2.0.tgz#bb570d89c194f763627fcf1f80059c6832d009b2"
+ integrity sha512-QTF3Ud5H7DaZotgdcJjGMvyDj5F3Pn1j/sC6VBEOVp94cbwqyIBdcs/quzj4MC1BKQSrTpQznegH/5giYbhnCQ==
+ dependencies:
+ camelcase "^5.3.1"
+ cssesc "^3.0.0"
+ icss-utils "^4.1.1"
+ loader-utils "^1.2.3"
+ normalize-path "^3.0.0"
+ postcss "^7.0.17"
+ postcss-modules-extract-imports "^2.0.0"
+ postcss-modules-local-by-default "^3.0.2"
+ postcss-modules-scope "^2.1.0"
+ postcss-modules-values "^3.0.0"
+ postcss-value-parser "^4.0.0"
+ schema-utils "^2.0.0"
+
css-select@^1.1.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/css-select/-/css-select-1.2.0.tgz#2b3a110539c5355f1cd8d314623e870b121ec858"
@@ -897,6 +927,11 @@ css-what@2.1:
version "2.1.3"
resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.3.tgz#a6d7604573365fe74686c3f311c56513d88285f2"
+cssesc@^3.0.0:
+ version "3.0.0"
+ resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
+ integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
+
cyclist@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9"
@@ -1761,6 +1796,13 @@ iconv-lite@0.4.24, iconv-lite@^0.4.4:
dependencies:
safer-buffer ">= 2.1.2 < 3"
+icss-utils@^4.0.0, icss-utils@^4.1.1:
+ version "4.1.1"
+ resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-4.1.1.tgz#21170b53789ee27447c2f47dd683081403f9a467"
+ integrity sha512-4aFq7wvWyMHKgxsH8QQtGpvbASCf+eM3wPRLI6R+MgAnTCZ6STYsRvttLvRWK0Nfif5piF394St3HeJDaljGPA==
+ dependencies:
+ postcss "^7.0.14"
+
ieee754@^1.1.4:
version "1.1.13"
resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.13.tgz#ec168558e95aa181fd87d37f55c32bbcb6708b84"
@@ -1790,6 +1832,11 @@ imurmurhash@^0.1.4:
version "0.1.4"
resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
+indexes-of@^1.0.1:
+ version "1.0.1"
+ resolved "https://registry.yarnpkg.com/indexes-of/-/indexes-of-1.0.1.tgz#f30f716c8e2bd346c7b67d3df3915566a7c05607"
+ integrity sha1-8w9xbI4r00bHtn0985FVZqfAVgc=
+
infer-owner@^1.0.3:
version "1.0.4"
resolved "https://registry.yarnpkg.com/infer-owner/-/infer-owner-1.0.4.tgz#c4cefcaa8e51051c2a40ba2ce8a3d27295af9467"
@@ -2294,6 +2341,18 @@ mkdirp@0.5.x, mkdirp@^0.5.0, mkdirp@^0.5.1:
dependencies:
minimist "0.0.8"
+monaco-editor-webpack-plugin@^1.7.0:
+ version "1.7.0"
+ resolved "https://registry.yarnpkg.com/monaco-editor-webpack-plugin/-/monaco-editor-webpack-plugin-1.7.0.tgz#920cbeecca25f15d70d568a7e11b0ba4daf1ae83"
+ integrity sha512-oItymcnlL14Sjd7EF7q+CMhucfwR/2BxsqrXIBrWL6LQplFfAfV+grLEQRmVHeGSBZ/Gk9ptzfueXnWcoEcFuA==
+ dependencies:
+ "@types/webpack" "^4.4.19"
+
+monaco-editor@^0.18.1:
+ version "0.18.1"
+ resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.18.1.tgz#ced7c305a23109875feeaf395a504b91f6358cfc"
+ integrity sha512-fmL+RFZ2Hrezy+X/5ZczQW51LUmvzfcqOurnkCIRFTyjdVjzR7JvENzI6+VKBJzJdPh6EYL4RoWl92b2Hrk9fw==
+
move-concurrently@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
@@ -2739,6 +2798,62 @@ posix-character-classes@^0.1.0:
version "0.1.1"
resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
+postcss-modules-extract-imports@^2.0.0:
+ version "2.0.0"
+ resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-2.0.0.tgz#818719a1ae1da325f9832446b01136eeb493cd7e"
+ integrity sha512-LaYLDNS4SG8Q5WAWqIJgdHPJrDDr/Lv775rMBFUbgjTz6j34lUznACHcdRWroPvXANP2Vj7yNK57vp9eFqzLWQ==
+ dependencies:
+ postcss "^7.0.5"
+
+postcss-modules-local-by-default@^3.0.2:
+ version "3.0.2"
+ resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-3.0.2.tgz#e8a6561be914aaf3c052876377524ca90dbb7915"
+ integrity sha512-jM/V8eqM4oJ/22j0gx4jrp63GSvDH6v86OqyTHHUvk4/k1vceipZsaymiZ5PvocqZOl5SFHiFJqjs3la0wnfIQ==
+ dependencies:
+ icss-utils "^4.1.1"
+ postcss "^7.0.16"
+ postcss-selector-parser "^6.0.2"
+ postcss-value-parser "^4.0.0"
+
+postcss-modules-scope@^2.1.0:
+ version "2.1.0"
+ resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-2.1.0.tgz#ad3f5bf7856114f6fcab901b0502e2a2bc39d4eb"
+ integrity sha512-91Rjps0JnmtUB0cujlc8KIKCsJXWjzuxGeT/+Q2i2HXKZ7nBUeF9YQTZZTNvHVoNYj1AthsjnGLtqDUE0Op79A==
+ dependencies:
+ postcss "^7.0.6"
+ postcss-selector-parser "^6.0.0"
+
+postcss-modules-values@^3.0.0:
+ version "3.0.0"
+ resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-3.0.0.tgz#5b5000d6ebae29b4255301b4a3a54574423e7f10"
+ integrity sha512-1//E5jCBrZ9DmRX+zCtmQtRSV6PV42Ix7Bzj9GbwJceduuf7IqP8MgeTXuRDHOWj2m0VzZD5+roFWDuU8RQjcg==
+ dependencies:
+ icss-utils "^4.0.0"
+ postcss "^7.0.6"
+
+postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2:
+ version "6.0.2"
+ resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.2.tgz#934cf799d016c83411859e09dcecade01286ec5c"
+ integrity sha512-36P2QR59jDTOAiIkqEprfJDsoNrvwFei3eCqKd1Y0tUsBimsq39BLp7RD+JWny3WgB1zGhJX8XVePwm9k4wdBg==
+ dependencies:
+ cssesc "^3.0.0"
+ indexes-of "^1.0.1"
+ uniq "^1.0.1"
+
+postcss-value-parser@^4.0.0:
+ version "4.0.2"
+ resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.0.2.tgz#482282c09a42706d1fc9a069b73f44ec08391dc9"
+ integrity sha512-LmeoohTpp/K4UiyQCwuGWlONxXamGzCMtFxLq4W1nZVGIQLYvMCJx3yAF9qyyuFpflABI9yVdtJAqbihOsCsJQ==
+
+postcss@^7.0.14, postcss@^7.0.16, postcss@^7.0.17, postcss@^7.0.5, postcss@^7.0.6:
+ version "7.0.18"
+ resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.18.tgz#4b9cda95ae6c069c67a4d933029eddd4838ac233"
+ integrity sha512-/7g1QXXgegpF+9GJj4iN7ChGF40sYuGYJ8WZu8DZWnmhQ/G36hfdk3q9LBJmoK+lZ+yzZ5KYpOoxq7LF1BxE8g==
+ dependencies:
+ chalk "^2.4.2"
+ source-map "^0.6.1"
+ supports-color "^6.1.0"
+
pretty-error@^2.0.2:
version "2.1.1"
resolved "https://registry.yarnpkg.com/pretty-error/-/pretty-error-2.1.1.tgz#5f4f87c8f91e5ae3f3ba87ab4cf5e03b1a17f1a3"
@@ -3026,6 +3141,14 @@ schema-utils@^1.0.0:
ajv-errors "^1.0.0"
ajv-keywords "^3.1.0"
+schema-utils@^2.0.0, schema-utils@^2.0.1:
+ version "2.4.1"
+ resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.4.1.tgz#e89ade5d056dc8bcaca377574bb4a9c4e1b8be56"
+ integrity sha512-RqYLpkPZX5Oc3fw/kHHHyP56fg5Y+XBpIpV8nCg0znIALfq3OH+Ea9Hfeac9BAMwG5IICltiZ0vxFvJQONfA5w==
+ dependencies:
+ ajv "^6.10.2"
+ ajv-keywords "^3.4.1"
+
select-hose@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
@@ -3362,6 +3485,14 @@ strip-json-comments@~2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
+style-loader@^1.0.0:
+ version "1.0.0"
+ resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-1.0.0.tgz#1d5296f9165e8e2c85d24eee0b7caf9ec8ca1f82"
+ integrity sha512-B0dOCFwv7/eY31a5PCieNwMgMhVGFe9w+rh7s/Bx8kfFkrth9zfTZquoYvdw8URgiqxObQKcpW51Ugz1HjfdZw==
+ dependencies:
+ loader-utils "^1.2.3"
+ schema-utils "^2.0.1"
+
supports-color@6.1.0, supports-color@^6.1.0:
version "6.1.0"
resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-6.1.0.tgz#0764abc69c63d5ac842dd4867e8d025e880df8f3"
@@ -3502,6 +3633,11 @@ union-value@^1.0.0:
is-extendable "^0.1.1"
set-value "^2.0.1"
+uniq@^1.0.1:
+ version "1.0.1"
+ resolved "https://registry.yarnpkg.com/uniq/-/uniq-1.0.1.tgz#b31c5ae8254844a3a8281541ce2b04b865a734ff"
+ integrity sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8=
+
unique-filename@^1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/unique-filename/-/unique-filename-1.1.1.tgz#1d69769369ada0583103a1e6ae87681b56573230"