Migrate to NPM and cleanup Playground (#1951)

This Pull Request closes #1912 by migrating to a NPM based build, hopefully making it easier to contribute to the Playground.

Also, reduces the number of features of the editor, since most of them were support for other languages or features that don't make sense in a playground environment. This considerably reduces the number of fetched files per page load and the total size of the playground.

.github/workflows/release.yml

@@ -23,10 +23,11 @@ jobs:
       - uses: actions/checkout@v3
       - name: Install wasm-pack
         run: curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh
-      - uses: Borales/actions-yarn@v2.3.0
+      - uses: actions/setup-node@v3
         with:
-          cmd: install
+          node-version: "16"
-      - name: Cache yarn build
+      - run: npm ci
+      - name: Cache npm build
         uses: actions/cache@v2.1.7
         with:
           path: |
@@ -35,10 +36,8 @@ jobs:
             boa_wasm/pkg
             ~/.cargo/git
             ~/.cargo/registry
-          key: ${{ runner.os }}-yarn-build-target-${{ hashFiles('**/yarn.lock') }}
+          key: ${{ runner.os }}-npm-build-target-${{ hashFiles('**/package-lock.json') }}
-      - uses: Borales/actions-yarn@v2.3.0
+      - run: npm run build:prod
-        with:
-          cmd: build:prod
       - name: Deploy
         uses: peaceiris/actions-gh-pages@v3
         with:

.github/workflows/webassembly.yml

@@ -32,7 +32,7 @@ jobs:
           profile: minimal
       - name: Install wasm-pack
         run: curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh
-      - name: Cache yarn build
+      - name: Cache npm build
         uses: actions/cache@v2.1.7
         with:
           path: |
@@ -41,10 +41,9 @@ jobs:
             ~/.cargo/git
             ~/.cargo/registry
             boa_wasm/pkg
-          key: ${{ runner.os }}-yarn-build-target-${{ hashFiles('**/yarn.lock') }}
+          key: ${{ runner.os }}-npm-build-target-${{ hashFiles('**/package-lock.json') }}
-      - uses: Borales/actions-yarn@v2.3.0
+      - uses: actions/setup-node@v3
         with:
-          cmd: install
+          node-version: "16"
-      - uses: Borales/actions-yarn@v2.3.0
+      - run: npm ci
-        with:
+      - run: npm run build
-          cmd: build

CONTRIBUTING.md

@@ -107,7 +107,7 @@ cargo run --release --bin boa_tester -- run -vv -d -s test/language/types/number
 ## Communication
 
 We have a Discord server, feel free to ask questions here:
-https://discord.gg/tUFFk9Y
+<https://discord.gg/tUFFk9Y>
 
 [issues]: https://github.com/boa-dev/boa/issues
 [rustup]: https://rustup.rs/

README.md

@@ -13,8 +13,8 @@ Currently, it has support for some of the language.
 
 [![Build Status][build_badge]][build_link]
 [![codecov](https://codecov.io/gh/boa-dev/boa/branch/main/graph/badge.svg)](https://codecov.io/gh/boa-dev/boa)
-[![](https://img.shields.io/crates/v/Boa.svg)](https://crates.io/crates/Boa)
+[![Crates.io](https://img.shields.io/crates/v/Boa.svg)](https://crates.io/crates/Boa)
-[![](https://docs.rs/Boa/badge.svg)](https://docs.rs/Boa/)
+[![Docs.rs](https://docs.rs/Boa/badge.svg)](https://docs.rs/Boa/)
 [![Discord](https://img.shields.io/discord/595323158140158003?logo=discord)](https://discord.gg/tUFFk9Y)
 
 [build_badge]: https://github.com/boa-dev/boa/actions/workflows/rust.yml/badge.svg?event=push&branch=main
@@ -50,12 +50,17 @@ This interpreter can be exposed to JavaScript!
 You can build the example locally with:
 
 ```shell
-$ yarn install
+npm run build
-$ yarn serve
 ```
 
 In the console you can use `window.evaluate` to pass JavaScript in.
-To develop on the web assembly side you can run `yarn serve` then go to `http://localhost:8080`.
+To develop on the web assembly side you can run:
+
+```shell
+npm run serve
+```
+
+then go to `http://localhost:8080`.
 
 ## Usage
 

boa_wasm/Cargo.toml

@@ -12,6 +12,7 @@ license = "Unlicense/MIT"
 
 [dependencies]
 boa_engine = { path = "../boa_engine", features = ["console"], version = "0.14.0" }
+# BUG: Pump when 0.2.80 releases. See https://github.com/rustwasm/wasm-bindgen/issues/2774
 wasm-bindgen = "=0.2.78"
 getrandom = { version = "0.2.5", features = ["js"] }
 

index.html

@@ -11,6 +11,7 @@
       display: flex;
       align-items: center;
     }
+
     .demo__img {
       width: 170px;
       display: block;

index.js

@@ -1,26 +1,6 @@
-// Note that a dynamic `import` statement here is required due to
+import { evaluate } from "./boa_wasm/pkg";
-// 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";
 
-window.MonacoEnvironment = {
+import * as monaco from "monaco-editor/esm/vs/editor/editor.api";
-  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";
-  },
-};
 
 const initialCode = `\
 function greet(targetName) {
@@ -47,12 +27,10 @@ window.addEventListener("resize", () => {
   editor.layout();
 });
 
-rust.then((m) => {
+window.evaluate = evaluate;
-  window.evaluate = m.evaluate;
 
-  editor.getModel().onDidChangeContent(inputHandler);
+editor.getModel().onDidChangeContent(inputHandler);
-  inputHandler(); // Evaluate initial code
+inputHandler(); // Evaluate initial code
-});
 
 function inputHandler(evt) {
   const text = editor.getValue();

package.json

@@ -12,8 +12,10 @@
     "css-loader": "^6.7.1",
     "file-loader": "^6.2.0",
     "html-webpack-plugin": "^5.5.0",
+    "monaco-editor-webpack-plugin": "^7.0.1",
     "prettier": "^2.6.0",
     "style-loader": "^3.3.1",
+    "terser-webpack-plugin": "^5.3.1",
     "webpack": "^5.70.0",
     "webpack-cli": "^4.9.2",
     "webpack-dev-server": "^4.7.4"

webpack.config.js

@@ -1,9 +1,18 @@
 const path = require("path");
+const fs = require("fs");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 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 TerserPlugin = require("terser-webpack-plugin");
+const MonacoWebpackPlugin = require("monaco-editor-webpack-plugin");
+
+const outdir = path.resolve(__dirname, "./dist");
+
+if (fs.existsSync(outdir)) {
+  fs.rmSync(outdir, { recursive: true });
+}
 
 module.exports = {
   experiments: {
@@ -11,17 +20,29 @@ module.exports = {
   },
   entry: {
     app: "./index.js",
-    "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",
   },
   output: {
-    path: path.resolve(__dirname, "dist"),
+    path: outdir,
     filename: "[name].js",
   },
   plugins: [
+    new MonacoWebpackPlugin({
+      languages: ["javascript", "typescript"],
+      features: [
+        "browser",
+        "find",
+        "inlayHints",
+        "documentSymbols",
+        "inlineCompletions",
+        "parameterHints",
+        "snippet",
+        "suggest",
+        "wordHighlighter",
+        "codelens",
+        "hover",
+        "bracketMatching",
+      ],
+    }),
     new CleanWebpackPlugin(),
     new HtmlWebpackPlugin({ template: "index.html" }),
     new WasmPackPlugin({
@@ -54,5 +75,9 @@ module.exports = {
       },
     ],
   },
+  optimization: {
+    minimize: true,
+    minimizer: [new TerserPlugin()],
+  },
   mode: "development",
 };