Migrate to NPM and cleanup Playground

boa-dev · Mar 17, 2022 · b67133c · b67133c
1 parent aaa07cf
commit b67133c
Show file tree

Hide file tree

Showing 8 changed files with 8,608 additions and 2,966 deletions.
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/boa_wasm/Cargo.toml b/boa_wasm/Cargo.toml
@@ -30,7 +30,7 @@ exclude = [
 
 [dependencies]
 boa_engine = { path = "../boa_engine", features = ["console"], version = "0.14.0" }
-wasm-bindgen = "=0.2.78"
+wasm-bindgen = "=0.2.79"
 getrandom = { version = "0.2.5", features = ["js"] }
 
 [lib]

diff --git a/index.html b/index.html
@@ -1,76 +1,79 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="utf-8" />
-    <title>Boa Playground</title>
-    <link href="assets/bootstrap.min.css" rel="stylesheet" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  </head>
-  <style>
-    header {
-      display: flex;
-      align-items: center;
-    }
-    .demo__img {
-      width: 170px;
-      display: block;
-      margin-bottom: 16px;
-      margin-right: 3rem;
-    }
 
-    .textbox {
-      height: 250px;
-      border: 1px solid #8db5e4;
-      margin-bottom: 16px;
-      flex: 2;
-      margin-right: 16px;
-    }
+<head>
+  <meta charset="utf-8" />
+  <title>Boa Playground</title>
+  <link href="assets/bootstrap.min.css" rel="stylesheet" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+</head>
+<style>
+  header {
+    display: flex;
+    align-items: center;
+  }
+
+  .demo__img {
+    width: 170px;
+    display: block;
+    margin-bottom: 16px;
+    margin-right: 3rem;
+  }
+
+  .textbox {
+    height: 250px;
+    border: 1px solid #8db5e4;
+    margin-bottom: 16px;
+    flex: 2;
+    margin-right: 16px;
+  }
+
+  .container {
+    margin: 0 auto;
+  }
+
+  .demo__repl {
+    display: flex;
+    font-family: monospace;
+  }
 
-    .container {
-      margin: 0 auto;
+  .output {
+    flex: 1;
+    border: 1px solid black;
+    padding: 8px;
+    font-size: 2rem;
+  }
+
+  @media (min-width: 320px) and (max-width: 1024px) {
+    .demo__img {
+      max-width: 100%;
     }
 
     .demo__repl {
-      display: flex;
-      font-family: monospace;
+      flex-direction: column;
     }
 
-    .output {
-      flex: 1;
-      border: 1px solid black;
-      padding: 8px;
-      font-size: 2rem;
+    .textbox {
+      min-height: 279px;
     }
 
-    @media (min-width: 320px) and (max-width: 1024px) {
-      .demo__img {
-        max-width: 100%;
-      }
-
-      .demo__repl {
-        flex-direction: column;
-      }
-
-      .textbox {
-        min-height: 279px;
-      }
-
-      .output {
-        min-height: 100px;
-      }
+    .output {
+      min-height: 100px;
     }
-  </style>
+  }
+</style>
 
-  <body>
-    <div class="container">
-      <header>
-        <img class="demo__img" src="./assets/logo.svg" />
-        <h1>Boa Playground</h1>
-      </header>
-      <div class="demo__repl">
-        <div class="textbox"></div>
-        <p class="output"></p>
-      </div>
+<body>
+  <div class="container">
+    <header>
+      <img class="demo__img" src="./assets/logo.svg" />
+      <h1>Boa Playground</h1>
+    </header>
+    <div class="demo__repl">
+      <div class="textbox"></div>
+      <p class="output"></p>
     </div>
-  </body>
+  </div>
+</body>
+
 </html>
diff --git a/index.js b/index.js
@@ -1,26 +1,6 @@
-// Note that a dynamic `import` statement here is required due to
-// webpack/webpack#6615, but in theory `import { greet } from './pkg/hello_world';`
-// will work here one day as well!
-const rust = import("./boa_wasm/pkg");
-import * as monaco from "monaco-editor";
+import { evaluate } from "./boa_wasm/pkg";
 
-window.MonacoEnvironment = {
-  getWorkerUrl: function (moduleId, label) {
-    if (label === "json") {
-      return "./json.worker.js";
-    }
-    if (label === "css") {
-      return "./css.worker.js";
-    }
-    if (label === "html") {
-      return "./html.worker.js";
-    }
-    if (label === "typescript" || label === "javascript") {
-      return "./ts.worker.js";
-    }
-    return "./editor.worker.js";
-  },
-};
+import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
 
 const initialCode = `\
 function greet(targetName) {
@@ -47,12 +27,10 @@ window.addEventListener("resize", () => {
   editor.layout();
 });
 
-rust.then((m) => {
-  window.evaluate = m.evaluate;
+window.evaluate = evaluate;
 
-  editor.getModel().onDidChangeContent(inputHandler);
-  inputHandler(); // Evaluate initial code
-});
+editor.getModel().onDidChangeContent(inputHandler);
+inputHandler(); // Evaluate initial code
 
 function inputHandler(evt) {
   const text = editor.getValue();