Merge pull request #548 from sunng87/feature/wasm-playground

Web playground
sunng87 · Dec 31, 2022 · 7fe236b · 7fe236b
2 parents 757c31d + f2afd08
commit 7fe236b
Show file tree

Hide file tree

Showing 12 changed files with 7,675 additions and 0 deletions.
diff --git a/.github/workflows/update-playground.yml b/.github/workflows/update-playground.yml
@@ -0,0 +1,39 @@
+name: Build Playground
+
+on:
+  push:
+    branches:
+      - master
+    paths:
+      - '**.rs'
+  workflow_dispatch:
+
+permissions:
+  contents: write
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+    - uses: actions-rs/toolchain@v1
+      with:
+        toolchain: stable
+    - name: Install wasm-pack
+      run: cargo install wasm-pack
+    - name: Build wasm
+      run: |
+        cd playground
+        wasm-pack build --target web
+    - uses: actions/setup-node@v3
+      with:
+        node-version: 16
+    - name: Build web
+      run: |
+        cd www
+        npm install
+        npm run build
+    - name: Publish dist directory
+      uses: JamesIves/github-pages-deploy-action@v4
+      with:
+        folder: playground/www/dist
diff --git a/playground/.gitignore b/playground/.gitignore
@@ -0,0 +1,6 @@
+/target
+**/*.rs.bk
+Cargo.lock
+bin/
+pkg/
+wasm-pack.log
diff --git a/playground/Cargo.toml b/playground/Cargo.toml
@@ -0,0 +1,36 @@
+[package]
+name = "playground"
+version = "0.1.0"
+authors = ["Ning Sun <sunng@protonmail.com>"]
+edition = "2018"
+
+[lib]
+crate-type = ["cdylib", "rlib"]
+
+[features]
+default = ["console_error_panic_hook"]
+
+[dependencies]
+wasm-bindgen = "0.2.63"
+
+# The `console_error_panic_hook` crate provides better debugging of panics by
+# logging them with `console.error`. This is great for development, but requires
+# all the `std::fmt` and `std::panicking` infrastructure, so isn't great for
+# code size when deploying.
+console_error_panic_hook = { version = "0.1.6", optional = true }
+
+# `wee_alloc` is a tiny allocator for wasm that is only ~1K in code size
+# compared to the default allocator's ~10K. It is slower than the default
+# allocator, however.
+wee_alloc = { version = "0.4.5", optional = true }
+
+gloo-utils = { version = "0.1.5", features = ["serde"] }
+handlebars = { path = "../" }
+serde_json = "1"
+
+[dev-dependencies]
+wasm-bindgen-test = "0.3.13"
+
+[profile.release]
+# Tell `rustc` to optimize for small code size.
+opt-level = "s"
diff --git a/playground/src/lib.rs b/playground/src/lib.rs
@@ -0,0 +1,25 @@
+mod utils;
+
+use gloo_utils::format::JsValueSerdeExt;
+use handlebars::Handlebars;
+use serde_json::Value;
+use wasm_bindgen::prelude::*;
+
+// When the `wee_alloc` feature is enabled, use `wee_alloc` as the global
+// allocator.
+#[cfg(feature = "wee_alloc")]
+#[global_allocator]
+static ALLOC: wee_alloc::WeeAlloc = wee_alloc::WeeAlloc::INIT;
+
+#[wasm_bindgen]
+extern "C" {
+    fn alert(s: &str);
+}
+
+#[wasm_bindgen]
+pub fn render(template_str: &str, data: JsValue) -> Result<String, String> {
+    let hbs = Handlebars::new();
+
+    hbs.render_template(template_str, &data.into_serde::<Value>().unwrap())
+        .map_err(|e| format!("{}", e))
+}
diff --git a/playground/src/utils.rs b/playground/src/utils.rs
@@ -0,0 +1,10 @@
+pub fn set_panic_hook() {
+    // When the `console_error_panic_hook` feature is enabled, we can call the
+    // `set_panic_hook` function at least once during initialization, and then
+    // we will get better error messages if our code ever panics.
+    //
+    // For more details see
+    // https://github.com/rustwasm/console_error_panic_hook#readme
+    #[cfg(feature = "console_error_panic_hook")]
+    console_error_panic_hook::set_once();
+}
diff --git a/playground/www/.gitignore b/playground/www/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+dist
diff --git a/playground/www/bootstrap.js b/playground/www/bootstrap.js
@@ -0,0 +1,5 @@
+// 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));
diff --git a/playground/www/index.html b/playground/www/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Handlebars rust playground</title>
+    <link rel="stylesheet" href="https://unpkg.com/sakura.css/css/sakura.css" media="screen" />
+  </head>
+  <body>
+    <h1>Handlebars-rust Playground</h1>
+    <p>Test your handlebars template with provided JSON data,
+    using <a href="https://github.com/sunng87/handlebars-rust">handlebars-rust</a>
+    library.<p>
+
+    <div>
+      <h2>Template</h2>
+      <textarea id="template" rows="8">Hello world from {{name}}</textarea>
+
+      <h2>Data</h2>
+      <textarea id="data" rows="8">{"name": "handlebars"}</textarea>
+
+      <div>
+        <h2>Output</h2>
+        <div>
+          <button id="rust-render">Render with <b>handlebars-rust</b></button>
+          <p id="rust-error"></p>
+          <textarea id="rust-output" rows="12"></textarea>
+        </div>
+        <div>
+          <button id="js-render">Render with <b>handlebarsjs</b></button>
+          <p id="js-error"></p>
+          <textarea id="js-output" rows="12"></textarea>
+        </div>
+      </div>
+    </div>
+
+    <noscript>This page contains webassembly and javascript content, please enable javascript in your browser.</noscript>
+    <script src="./bootstrap.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script>
+  </body>
+</html>
diff --git a/playground/www/index.js b/playground/www/index.js
@@ -0,0 +1,30 @@
+import * as hbs from "hbs-playground";
+
+document.getElementById("rust-render").addEventListener('click', (event) => {
+    var template = document.getElementById("template").value;
+    var data = document.getElementById("data").value;
+    var json_data = JSON.parse(data);
+
+    try {
+        var result = hbs.render(template, json_data);
+        document.getElementById("rust-output").value = result;
+        document.getElementById("rust-error").innerText = "";
+    } catch (e) {
+        document.getElementById("rust-error").innerText = e.toString();
+    }
+});
+
+document.getElementById("js-render").addEventListener('click', (event) => {
+    var template = document.getElementById("template").value;
+    var data = document.getElementById("data").value;
+    var json_data = JSON.parse(data);
+
+    try {
+        var template = Handlebars.compile(template);
+        var result = template(json_data);
+        document.getElementById("js-output").value = result;
+        document.getElementById("js-error").innerText = "";
+    } catch (e) {
+        document.getElementById("js-error").innerText = e.toString();
+    }
+});