examples: serve the wasm mandelbrot project using a v web server (#19937

)
vlang · Dec 11, 2023 · 1b3c4f5 · 1b3c4f5
1 parent 131052c
commit 1b3c4f5
Show file tree

Hide file tree

Showing 5 changed files with 92 additions and 48 deletions.
diff --git a/cmd/tools/modules/testing/common.v b/cmd/tools/modules/testing/common.v
@@ -277,8 +277,8 @@ 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.v requires special compilation flags: `-b wasm -os browser`, skip it for now:
-		skip_files << 'examples/wasm/mandelbrot/mandelbrot.v'
+		// examples/wasm/mandelbrot/mandelbrot.wasm.v requires special compilation flags: `-b wasm -os browser`, skip it for now:
+		skip_files << 'examples/wasm/mandelbrot/mandelbrot.wasm.v'
 	}
 	vargs := _vargs.replace('-progress', '')
 	vexe := pref.vexe_path()

diff --git a/examples/wasm/mandelbrot/README.md b/examples/wasm/mandelbrot/README.md
@@ -1,12 +1,20 @@
-# V Mandelbrot Example
+# Run V Mandelbrot Example
+
+## Using only V
+
+```
+v run main.v
+```
+
+## Using Python or Emscripten
 
 1. First, create `mandelbrot.wasm`. Compile with `-os browser`.
 
 ```
-v -b wasm -os browser mandelbrot.v
+v -b wasm -os browser mandelbrot.wasm.v
 ```
 
 2. Then, open the `mandelbrot.html` file in the browser.
-	- CORS errors do not allow `mandelbrot.wasm` to be loaded.
-	- Use `python -m http.server 8080`
-	- Use `emrun mandelbrot.html`
+   - CORS errors do not allow `mandelbrot.wasm` to be loaded.
+   - Use `python -m http.server 8080`
+   - Use `emrun mandelbrot.html`
diff --git a/examples/wasm/mandelbrot/main.v b/examples/wasm/mandelbrot/main.v
@@ -0,0 +1,29 @@
+module main
+
+import vweb
+import os
+
+const http_port = 3001
+
+struct App {
+	vweb.Context
+}
+
+fn main() {
+	vweb.run(new_app(), http_port)
+}
+
+fn new_app() &App {
+	mut app := &App{}
+
+	os.execute_or_panic('v -b wasm -os browser mandelbrot.wasm.v')
+
+	app.mount_static_folder_at(os.resource_abs_path('./'), '/')
+	return app
+}
+
+@['/'; get]
+pub fn (mut app App) controller_mandelbrot() !vweb.Result {
+	file := os.read_file('mandelbrot.html') or { panic(err) }
+	return app.html(file)
+}
diff --git a/examples/wasm/mandelbrot/mandelbrot.html b/examples/wasm/mandelbrot/mandelbrot.html
@@ -1,47 +1,54 @@
 <!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>V Mandelbrot WebAssembly Example</title>
-</head>
-<body>
-	<canvas id="canvas" width="200" height="200" style="width:100%;height:100%;image-rendering: crisp-edges;"></canvas>
-	<script>
-		var canvas = document.getElementById("canvas");
-		var ctx = canvas.getContext("2d");
-		var memory;
+	<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>V Mandelbrot WebAssembly Example</title>
+	</head>
+	<body>
+		<canvas
+			id="canvas"
+			width="200"
+			height="200"
+			style="width: 100%; height: 100%; image-rendering: crisp-edges"
+		></canvas>
+		<script>
+			var canvas = document.getElementById("canvas");
+			var ctx = canvas.getContext("2d");
+			var memory;
 
-		function get_string(ptr, len) {
-			const buf = new Uint8Array(memory.buffer, ptr, len);
-			const str = new TextDecoder("utf8").decode(buf);
+			function get_string(ptr, len) {
+				const buf = new Uint8Array(memory.buffer, ptr, len);
+				const str = new TextDecoder("utf8").decode(buf);
 
-			return str
-		}
-
-		const env = {
-			canvas_x: () => canvas.width,
-			canvas_y: () => canvas.height,
-			setpixel: (x, y, c) => {
-				ctx.fillStyle = "rgba(1,1,1,"+(c/255)+")";
-				ctx.fillRect(x, y, 1, 1);
-			},
-			__writeln: (ptr, len) => {
-				console.log(get_string(ptr, len))
-			},
-			__panic_abort: (ptr, len) => {
-				throw get_string(ptr, len);
+				return str;
 			}
-		}
 
-		WebAssembly.instantiateStreaming(fetch("mandelbrot.wasm"), {env: env}).then((res) => {
-			memory = res.instance.exports['memory'];
-
-			console.time('main.main')
-			res.instance.exports['main.main']()
-			console.timeEnd('main.main')
-		});
-	</script>
-</body>
-</html>
+			const env = {
+				canvas_x: () => canvas.width,
+				canvas_y: () => canvas.height,
+				setpixel: (x, y, c) => {
+					ctx.fillStyle = "rgba(1,1,1," + c / 255 + ")";
+					ctx.fillRect(x, y, 1, 1);
+				},
+				__writeln: (ptr, len) => {
+					console.log(get_string(ptr, len));
+				},
+				__panic_abort: (ptr, len) => {
+					throw get_string(ptr, len);
+				},
+			};
+
+			WebAssembly.instantiateStreaming(fetch("mandelbrot.wasm"), {
+				env: env,
+			}).then((res) => {
+				memory = res.instance.exports["memory"];
+
+				console.time("main.main");
+				res.instance.exports["main.main"]();
+				console.timeEnd("main.main");
+			});
+		</script>
+	</body>
+</html>
diff --git a/examples/wasm/mandelbrot/mandelbrot.v → examples/wasm/mandelbrot/mandelbrot.wasm.v b/examples/wasm/mandelbrot/mandelbrot.v → examples/wasm/mandelbrot/mandelbrot.wasm.v