Allow for multiple demo snippets to be selected

RustPython · windelbouwman · Feb 23, 2019 · Feb 23, 2019 · Feb 23, 2019 · Feb 23, 2019
commit d02e8352ea6b18614ef2081b0da806f0041a2d2d
diff --git 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/src/index.html → wasm/demo/src/index.ejs b/wasm/demo/src/index.html → wasm/demo/src/index.ejs
@@ -9,23 +9,22 @@ <h1>RustPython Demo</h1>
         <p>
             RustPython is a Python interpreter written in Rust. This demo is
             compiled from Rust to WebAssembly so it runs in the browser.<br>
-            Please input your Python code below and click <kbd>Run</kbd>, or you
-            can open up your browser's devtools and play with
-            <code>rp.pyEval('print("a")')</code>
+            Please input your Python code below and click <kbd>Run</kbd>
+            (or <kbd>Ctrl+Enter</kbd>), or you can open up your
+            browser's devtools and play with <code>rp.pyEval('print("a")')</code>
         </p>
-        <textarea id="code">
-n1 = 0
-n2 = 1
-count = 0
-until = 10
-
-print("These are the first {} numbers in the Fibonacci sequence:".format(until))
-
-while count < until:
-    print(n1)
-    n1, n2 = n2, n1 + n2
-    count += 1
+        <div id="code-wrapper">
+            <textarea id="code">
+<%= defaultSnippet %>
 </textarea>
+            <select id="snippets">
+                <% for (const name of snippets) { %>
+                    <option
+                        <% if (name == defaultSnippetName) %> selected
+                    ><%= name %></option>
+                <% } %>
+            </select>
+        </div>
         <button id="run-btn">Run &#9655;</button>
         <div id="error"></div>
         <h3>Standard Output</h3>

diff --git 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/snippets/fibonacci.py b/wasm/demo/src/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/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
@@ -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, 'src/snippets'))
+                    .map(filename =>
+                        path.basename(filename, path.extname(filename))
+                    ),
+                defaultSnippetName: 'fibonacci',
+                defaultSnippet: fs.readFileSync(
+                    path.join(__dirname, 'src/snippets/fibonacci.py')
+                )
+            }
         }),
         new MiniCssExtractPlugin({
             filename: 'styles.css'