Rearrange website directory and change webpack config

RustPython · windelbouwman · Dec 29, 2018 · Dec 19, 2018 · Dec 18, 2018 · Dec 22, 2018
commit 03c619f79eeff17f84a0a1492beb7b98c0ceede1
diff --git a/wasm/app/bootstrap.js b/wasm/app/bootstrap.js
diff --git a/wasm/app/index.html b/wasm/app/index.html
diff --git a/wasm/app/index.js b/wasm/app/index.js
diff --git a/wasm/app/package.json b/wasm/app/package.json
@@ -1,27 +1,31 @@
 {
-  "name": "app",
-  "version": "1.0.0",
-  "description": "",
-  "main": "index.js",
-  "dependencies": {
-    "hello-wasm-pack": "^0.1.0",
-    "webpack": "^4.16.3",
-    "webpack-cli": "^3.1.0",
-    "webpack-dev-server": "^3.1.5",
-    "copy-webpack-plugin": "^4.5.2"
-  },
-  "devDependencies": {},
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/RustPython/RustPython.git"
-  },
-  "author": "Ryan Liddle",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/RustPython/RustPython/issues"
-  },
-  "homepage": "https://github.com/RustPython/RustPython#readme"
+    "name": "app",
+    "version": "1.0.0",
+    "description": "",
+    "main": "index.js",
+    "dependencies": {
+        "codemirror": "^5.42.0"
+    },
+    "devDependencies": {
+        "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",
+        "html-webpack-plugin": "^3.2.0",
+        "css-loader": "^2.0.1"
+    },
+    "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/RustPython/RustPython.git"
+    },
+    "author": "Ryan Liddle",
+    "license": "MIT",
+    "bugs": {
+        "url": "https://github.com/RustPython/RustPython/issues"
+    },
+    "homepage": "https://github.com/RustPython/RustPython#readme"
 }
diff --git a/wasm/app/src/bootstrap.js b/wasm/app/src/bootstrap.js
@@ -0,0 +1,10 @@
+import './style.css';
+import 'codemirror/lib/codemirror.css';
+
+// A dependency graph that contains any wasm must all be imported
+// asynchronously. This `bootstrap.js` file does the single async import, so
+// that no one else needs to worry about it again.
+import('./index.js').catch(e => {
+    console.error('Error importing `index.js`:', e);
+    document.getElementById('error').textContent = e;
+});
diff --git a/wasm/app/src/index.html b/wasm/app/src/index.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <title>RustPython Demo</title>
+    </head>
+    <body>
+        <h1>RustPython Demo</h1>
+        <p>
+            RustPython is a Python interpreter writter in Rust. This demo is
+            compiled from Rust to WebAssembly so it runs in the browser
+        </p>
+        <p>Please input your python code below and click <kbd>Run</kbd>:</p>
+        <p>
+            Alternatively, open up your browser's devtools and play with
+            <code>rp.eval_py('print("a")')</code>
+        </p>
+        <textarea id="code">
+n1 = 0
+n2 = 1
+count = 0
+until = 10
+
+print("These are the first " + str(until) + " number in a Fibonacci sequence:")
+
+while count < until:
+    print(n1)
+    n1, n2 = n2, n1 + n2
+    count += 1
+
+        </textarea>
+        <button id="run-btn">Run &#9655;</button>
+        <div id="error"></div>
+        <h3>Standard Output</h3>
+        <textarea id="console">Loading...</textarea>
+
+        <a href="https://github.com/RustPython/RustPython">
+            <img
+                style="position: absolute; top: 0; right: 0; border: 0;"
+                src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png"
+                alt="Fork me on GitHub"
+            />
+        </a>
+    </body>
+</html>
diff --git a/wasm/app/src/index.js b/wasm/app/src/index.js
@@ -0,0 +1,43 @@
+import * as rp from '../../pkg';
+import CodeMirror from 'codemirror';
+import 'codemirror/mode/python/python';
+import 'codemirror/addon/comment/comment';
+
+// so people can play around with it
+window.rp = rp;
+
+const editor = CodeMirror.fromTextArea(document.getElementById('code'), {
+    extraKeys: {
+        'Ctrl-Enter': runCodeFromTextarea,
+        'Cmd-Enter': runCodeFromTextarea,
+        'Shift-Tab': 'indentLess',
+        'Ctrl-/': 'toggleComment',
+        'Cmd-/': 'toggleComment'
+    },
+    mode: 'text/x-python',
+    indentUnit: 4,
+    autofocus: true
+});
+
+function runCodeFromTextarea() {
+    const consoleElement = document.getElementById('console');
+    const errorElement = document.getElementById('error');
+
+    // Clean the console and errors
+    consoleElement.value = '';
+    errorElement.textContent = '';
+
+    const code = editor.getValue();
+    try {
+        rp.run_from_textbox(code);
+    } catch (e) {
+        errorElement.textContent = e;
+        console.error(e);
+    }
+}
+
+document
+    .getElementById('run-btn')
+    .addEventListener('click', runCodeFromTextarea);
+
+runCodeFromTextarea(); // Run once for demo
diff --git a/wasm/app/src/style.css b/wasm/app/src/style.css
@@ -0,0 +1,31 @@
+textarea {
+    font-family: monospace;
+    resize: none;
+}
+
+#code {
+    height: 35vh;
+    width: calc(100% - 3px);
+}
+
+.CodeMirror {
+    border: 1px solid #ddd;
+    height: 35vh !important;
+}
+
+#console {
+    height: 35vh;
+    width: calc(100% - 3px);
+}
+
+#run-btn {
+    width: 6em;
+    height: 2em;
+    font-size: 24px;
+}
+
+#error {
+    color: tomato;
+    margin-top: 10px;
+    font-family: monospace;
+}
diff --git a/wasm/app/webpack.config.js b/wasm/app/webpack.config.js
@@ -1,14 +1,26 @@
-const CopyWebpackPlugin = require("copy-webpack-plugin");
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const path = require('path');
 
 module.exports = {
-  entry: "./bootstrap.js",
-  output: {
-    path: path.resolve(__dirname, "dist"),
-    filename: "bootstrap.js",
-  },
-  mode: "development",
-  plugins: [
-    new CopyWebpackPlugin(['index.html'])
-  ],
+    entry: './src/bootstrap.js',
+    output: {
+        path: path.resolve(__dirname, 'dist'),
+        filename: 'bootstrap.js'
+    },
+    mode: 'development',
+    module: {
+        rules: [
+            { test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'] }
+        ]
+    },
+    plugins: [
+        new HtmlWebpackPlugin({
+            filename: 'index.html',
+            template: 'src/index.html'
+        }),
+        new MiniCssExtractPlugin({
+            filename: 'styles.css'
+        })
+    ]
 };