examples: add examples/wasm/change_color_by_id/ (#20519)

vlang · Jan 14, 2024 · cb22407 · cb22407
1 parent 175ede5
commit cb22407
Show file tree

Hide file tree

Showing 6 changed files with 117 additions and 1 deletion.
diff --git a/cmd/tools/modules/testing/common.v b/cmd/tools/modules/testing/common.v
@@ -277,8 +277,9 @@ pub fn new_test_session(_vargs string, will_compile bool) TestSession {
 			skip_files << 'examples/sokol/sounds/wav_player.v'
 			skip_files << 'examples/sokol/sounds/simple_sin_tones.v'
 		}
-		// examples/wasm/mandelbrot/mandelbrot.wasm.v requires special compilation flags: `-b wasm -os browser`, skip it for now:
+		// requires special compilation flags: `-b wasm -os browser`, skip it for now:
 		skip_files << 'examples/wasm/mandelbrot/mandelbrot.wasm.v'
+		skip_files << 'examples/wasm/change_color_by_id/change_color_by_id.wasm.v'
 	}
 	vargs := _vargs.replace('-progress', '')
 	vexe := pref.vexe_path()

diff --git a/examples/wasm/change_color_by_id/README.md b/examples/wasm/change_color_by_id/README.md
@@ -0,0 +1,20 @@
+# Run V Mandelbrot Example
+
+## Using only V
+
+```
+v run .
+```
+
+## Using Python or Emscripten
+
+1. First, create `change_color_by_id.wasm`. Compile with `-os browser`.
+
+```
+v -b wasm -os browser change_color_by_id.wasm.v
+```
+
+2. Then, open the `change_color_by_id.html` file in the browser.
+   - CORS errors do not allow `change_color_by_id.wasm` to be loaded.
+   - Use `python -m http.server 8080`
+   - Use `emrun change_color_by_id.html`
diff --git a/examples/wasm/change_color_by_id/change_color_by_id.html b/examples/wasm/change_color_by_id/change_color_by_id.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>App</title>
+  </head>
+  <body>
+    <p id="description">Some cool description</p>
+    <p id="description1">Some cool description</p>
+    <p id="description2">Some cool description</p>
+    <p id="description3">Some cool description</p>
+    <button id="myButton" onclick="click_callback()">Click here</button>
+
+    <script type="text/javascript">
+      var memory;
+      var click_callback;
+
+      function get_string(ptr, len) {
+        const buf = new Uint8Array(memory.buffer, ptr, len);
+        const str = new TextDecoder("utf8").decode(buf);
+        return str;
+      }
+
+      const env = {
+        change_color_by_id: (ptr, len, color_ptr, color_len) => {
+          const elementId = get_string(ptr, len);
+          const color = get_string(color_ptr, color_len);
+
+          var element = document.getElementById(elementId);
+          element.style.color = color;
+        },
+        __writeln: (ptr, len) => {
+          console.log(get_string(ptr, len));
+        },
+        __panic_abort: (ptr, len) => {
+          throw get_string(ptr, len);
+        },
+      };
+
+      WebAssembly.instantiateStreaming(fetch("change_color_by_id.wasm"), {
+        env: env,
+      }).then((res) => {
+        memory = res.instance.exports["memory"];
+
+        console.time("main.main");
+        res.instance.exports["main.main"]();
+        console.timeEnd("main.main");
+
+        click_callback = res.instance.exports["main.click_callback"];
+      });
+    </script>
+  </body>
+</html>
diff --git a/examples/wasm/change_color_by_id/change_color_by_id.wasm.v b/examples/wasm/change_color_by_id/change_color_by_id.wasm.v
@@ -0,0 +1,18 @@
+fn JS.change_color_by_id(ptr u8, len int, color_ptr u8, color_len int)
+
+// `main` must be public!
+pub fn main() {
+	println('starting main.main...')
+	change_color_by_id('description', 'red')
+	change_color_by_id('description1', 'green')
+	change_color_by_id('description2', 'blue')
+	change_color_by_id('description3', 'black')
+}
+
+pub fn click_callback() {
+	println('Hello from V')
+}
+
+fn change_color_by_id(id string, color string) {
+	JS.change_color_by_id(id.str, id.len, color.str, color.len)
+}
diff --git a/examples/wasm/change_color_by_id/favicon.ico b/examples/wasm/change_color_by_id/favicon.ico
diff --git a/examples/wasm/change_color_by_id/serve_folder.v b/examples/wasm/change_color_by_id/serve_folder.v
@@ -0,0 +1,22 @@
+module main
+
+import vweb
+import os
+
+struct App {
+	vweb.Context
+}
+
+fn main() {
+	os.chdir(os.dir(@FILE))!
+	cmd := '${os.quoted_path(@VEXE)} -b wasm -os browser change_color_by_id.wasm.v'
+	println('>> compiling change_color_by_id.wasm.v, using: ${cmd}')
+	os.execute_or_panic(cmd)
+	mut app := App{}
+	app.mount_static_folder_at(os.resource_abs_path('.'), '/')
+	vweb.run(app, 3001)
+}
+
+pub fn (mut app App) index() vweb.Result {
+	return app.html(os.read_file('change_color_by_id.html') or { '' })
+}