diff --git a/wasm/demo/package.json b/wasm/demo/package.json index 97583dd6dae..321bef0902d 100644 --- a/wasm/demo/package.json +++ b/wasm/demo/package.json @@ -8,13 +8,14 @@ }, "devDependencies": { "@wasm-tool/wasm-pack-plugin": "0.2.0", - "webpack": "^4.16.3", - "webpack-cli": "^3.1.0", - "webpack-dev-server": "^3.1.5", "copy-webpack-plugin": "^4.5.2", - "mini-css-extract-plugin": "^0.5.0", + "css-loader": "^2.0.1", "html-webpack-plugin": "^3.2.0", - "css-loader": "^2.0.1" + "mini-css-extract-plugin": "^0.5.0", + "raw-loader": "^1.0.0", + "webpack": "^4.16.3", + "webpack-cli": "^3.1.0", + "webpack-dev-server": "^3.1.5" }, "scripts": { "dev": "webpack-dev-server -d", diff --git a/wasm/demo/snippets/fibonacci.py b/wasm/demo/snippets/fibonacci.py new file mode 100644 index 00000000000..877f92c4474 --- /dev/null +++ b/wasm/demo/snippets/fibonacci.py @@ -0,0 +1,11 @@ +n1 = 0 +n2 = 1 +count = 0 +until = 10 + +print(f"These are the first {until} numbers in the Fibonacci sequence:") + +while count < until: + print(n1) + n1, n2 = n2, n1 + n2 + count += 1 diff --git a/wasm/demo/snippets/fizzbuzz.py b/wasm/demo/snippets/fizzbuzz.py new file mode 100644 index 00000000000..90a71ac5a6a --- /dev/null +++ b/wasm/demo/snippets/fizzbuzz.py @@ -0,0 +1,7 @@ +for i in range(1, 100): + print(f"{i} ", end="") + if not i % 3: + print("fizz", end="") + if not i % 5: + print("buzz", end="") + print() diff --git a/wasm/demo/snippets/mandelbrot.py b/wasm/demo/snippets/mandelbrot.py new file mode 100644 index 00000000000..8d99aed4f95 --- /dev/null +++ b/wasm/demo/snippets/mandelbrot.py @@ -0,0 +1,31 @@ +# NOTE: will take a while, up to around a minute, to run. +# Expect this page to freeze. + +w = 50.0 +h = 50.0 + +y = 0.0 +while y < h: + x = 0.0 + while x < w: + Zr, Zi, Tr, Ti = 0.0, 0.0, 0.0, 0.0 + Cr = 2 * x / w - 1.5 + Ci = 2 * y / h - 1.0 + + i = 0 + while i < 50 and Tr + Ti <= 4: + Zi = 2 * Zr * Zi + Ci + Zr = Tr - Ti + Cr + Tr = Zr * Zr + Ti = Zi * Zi + i = i + 1 + + if Tr + Ti <= 4: + print('*', end='') + else: + print('ยท', end='') + + x = x + 1 + + print() + y = y + 1 diff --git a/wasm/demo/src/index.html b/wasm/demo/src/index.ejs similarity index 81% rename from wasm/demo/src/index.html rename to wasm/demo/src/index.ejs index 639bf1f7d80..2d06c3200a2 100644 --- a/wasm/demo/src/index.html +++ b/wasm/demo/src/index.ejs @@ -9,23 +9,22 @@

RustPython Demo

RustPython is a Python interpreter written in Rust. This demo is compiled from Rust to WebAssembly so it runs in the browser.
- Please input your Python code below and click Run, or you - can open up your browser's devtools and play with - rp.pyEval('print("a")') + Please input your Python code below and click Run + (or Ctrl+Enter), or you can open up your + browser's devtools and play with rp.pyEval('print("a")')

- + +

Standard Output

diff --git a/wasm/demo/src/main.js b/wasm/demo/src/main.js index d8934b5c100..598be13f98d 100644 --- a/wasm/demo/src/main.js +++ b/wasm/demo/src/main.js @@ -46,4 +46,19 @@ document .getElementById('run-btn') .addEventListener('click', runCodeFromTextarea); +const snippets = document.getElementById('snippets'); + +snippets.addEventListener('change', () => { + const selected = snippets.value; + + // the require here creates a webpack context; it's fine to use it + // dynamically. + // https://webpack.js.org/guides/dependency-management/ + const snippet = require(`raw-loader!../snippets/${selected}.py`); + + editor.setValue(snippet); + + runCodeFromTextarea(); +}); + runCodeFromTextarea(); // Run once for demo diff --git a/wasm/demo/src/style.css b/wasm/demo/src/style.css index 9fadc7c2db0..a8a5de5004b 100644 --- a/wasm/demo/src/style.css +++ b/wasm/demo/src/style.css @@ -25,3 +25,14 @@ textarea { margin-top: 10px; font-family: monospace; } + +#code-wrapper { + position: relative; +} + +#snippets { + position: absolute; + right: 20px; + top: 5px; + z-index: 25; +} diff --git a/wasm/demo/webpack.config.js b/wasm/demo/webpack.config.js index 6d114d43639..1f13b99fa9a 100644 --- a/wasm/demo/webpack.config.js +++ b/wasm/demo/webpack.config.js @@ -2,6 +2,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const WasmPackPlugin = require('@wasm-tool/wasm-pack-plugin'); const path = require('path'); +const fs = require('fs'); module.exports = { entry: './src/index.js', @@ -12,13 +13,27 @@ module.exports = { mode: 'development', module: { rules: [ - { test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'] } + { + test: /\.css$/, + use: [MiniCssExtractPlugin.loader, 'css-loader'] + } ] }, plugins: [ new HtmlWebpackPlugin({ filename: 'index.html', - template: 'src/index.html' + template: 'src/index.ejs', + templateParameters: { + snippets: fs + .readdirSync(path.join(__dirname, 'snippets')) + .map(filename => + path.basename(filename, path.extname(filename)) + ), + defaultSnippetName: 'fibonacci', + defaultSnippet: fs.readFileSync( + path.join(__dirname, 'snippets/fibonacci.py') + ) + } }), new MiniCssExtractPlugin({ filename: 'styles.css'