Browse Source

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.
pull/1960/head
jedel1043 3 years ago
parent
commit
f25ce46a1e
  1. 13
      .github/workflows/release.yml
  2. 13
      .github/workflows/webassembly.yml
  3. 2
      CONTRIBUTING.md
  4. 15
      README.md
  5. 1
      boa_wasm/Cargo.toml
  6. 1
      index.html
  7. 32
      index.js
  8. 8494
      package-lock.json
  9. 2
      package.json
  10. 37
      webpack.config.js
  11. 2860
      yarn.lock

13
.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
- name: Cache yarn build
node-version: "16"
- 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') }}
- uses: Borales/actions-yarn@v2.3.0
with:
cmd: build:prod
key: ${{ runner.os }}-npm-build-target-${{ hashFiles('**/package-lock.json') }}
- run: npm run build:prod
- name: Deploy
uses: peaceiris/actions-gh-pages@v3
with:

13
.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') }}
- uses: Borales/actions-yarn@v2.3.0
key: ${{ runner.os }}-npm-build-target-${{ hashFiles('**/package-lock.json') }}
- uses: actions/setup-node@v3
with:
cmd: install
- uses: Borales/actions-yarn@v2.3.0
with:
cmd: build
node-version: "16"
- run: npm ci
- run: npm run build

2
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/

15
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)
[![](https://docs.rs/Boa/badge.svg)](https://docs.rs/Boa/)
[![Crates.io](https://img.shields.io/crates/v/Boa.svg)](https://crates.io/crates/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
$ yarn serve
npm run build
```
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

1
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"] }

1
index.html

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

32
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();

8494
package-lock.json generated

File diff suppressed because it is too large Load Diff

2
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"

37
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",
};

2860
yarn.lock

File diff suppressed because it is too large Load Diff
Loading…
Cancel
Save