From cb224076ec320540904119a77526e7e7f0afaa05 Mon Sep 17 00:00:00 2001
From: Hitalo Souza <63821277+enghitalo@users.noreply.github.com>
Date: Sun, 14 Jan 2024 07:34:23 -0400
Subject: [PATCH] examples: add examples/wasm/change_color_by_id/ (#20519)
---
cmd/tools/modules/testing/common.v | 3 +-
examples/wasm/change_color_by_id/README.md | 20 +++++++
.../change_color_by_id.html | 55 ++++++++++++++++++
.../change_color_by_id.wasm.v | 18 ++++++
examples/wasm/change_color_by_id/favicon.ico | Bin 0 -> 991 bytes
.../wasm/change_color_by_id/serve_folder.v | 22 +++++++
6 files changed, 117 insertions(+), 1 deletion(-)
create mode 100644 examples/wasm/change_color_by_id/README.md
create mode 100644 examples/wasm/change_color_by_id/change_color_by_id.html
create mode 100644 examples/wasm/change_color_by_id/change_color_by_id.wasm.v
create mode 100644 examples/wasm/change_color_by_id/favicon.ico
create mode 100644 examples/wasm/change_color_by_id/serve_folder.v
diff --git a/cmd/tools/modules/testing/common.v b/cmd/tools/modules/testing/common.v
index 5448eba9b8..de9f5de486 100644
--- 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
new file mode 100644
index 0000000000..928faf327a
--- /dev/null
+++ 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
new file mode 100644
index 0000000000..6ec46ebaab
--- /dev/null
+++ b/examples/wasm/change_color_by_id/change_color_by_id.html
@@ -0,0 +1,55 @@
+
+
+
+
+
+
+ App
+
+
+ Some cool description
+ Some cool description
+ Some cool description
+ Some cool description
+
+
+
+
+
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
new file mode 100644
index 0000000000..5dd109e9a7
--- /dev/null
+++ 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
new file mode 100644
index 0000000000000000000000000000000000000000..d3f932a47ba2988351f32c8fc898b020949212f7
GIT binary patch
literal 991
zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE0wix1Z>k4UEa{HEjtmSN`?>!lvVtU&J%W50
z7^>757#dm_7=8hT8eT9klo~KFyh>nTu$sZZAYL$MSD+10f+@+{-G$+Qd;gjJKpuOE
zr>`sfa~^I1bM-&|v0H)i&pllnLp+Z6Ufr7?<0``X;r^cf+Ojt;akp=TiA1uow&-wQ
z7I5SZ;%b?~Bv7I$z$>(bLsVB(PeZ^pE2EIHX@7&7rhrI|#k2$44s_+H3LW|wz9(Pf
z+uL`yW7%uwhb=a@et)O<++JhhC2YzZS5Is?6yKo`maMxeD^Y#X1y&DLwcgu;b1QsO
zuBPvOvseE4U6aSm^<1Jq1iIgdFs@uM#Uo}z#26I$-MtWjC>b1Q$s>HewAf2Vyn
zT+x5quK)Y)73_IGePt57UW6!y_y(;%EN>QTv~o+{QE@)r?>dT8`4W~jW$IVlKK-oc
z@qsPrCU0(w@3Pr7WwTcOgpL{8U(8zl%*l3s#r^O5w&eM)iCVSEWb)~!T*AwIDlVs4
zaDJS!JoPxQZ}2R)Cq*;YoNZ7jJZP;~scG|mqo8@s>jUX!TW`s{>fN&bOIXA=c|oxl
z^GAtKT?DLZ1p+c8-xmKe=?K*A-8FG%o72LAqj!V1^4pZ{Npo3vVS+kGk>;|qR?aP+
z;uBA)I;jbssfc}e;YB1v(yLA1=WKtq?!bynbD5TDzUt|d1ahr{q6#nWbV)n5DWquI
zp9GVX#`LqNjdZ2$%0!Om{QNM*x$Xw@$JG+P5gXMm1V~&ixu-2R$Mev}*T+nIwM9BL
zs#5N6)ZIVd^MGykRq?=^Y#I4Iw(-Z?|3^0q-@kFyu1aa{*((-Q>>Qvs~wxb>aGH@26Mn{#GXQe#Yh{#rCe3-nq^?p?dA^rgxi6R6ZWam5(${
z596pVyuRG-<789*s^yL=98-e&U0Tg^W^aF*{{6z1Cz;Y>Ykoyf(4MPtdr1|;-pdA4
zEhky5Ok1Q8oTah)v})P<>ibLvDUbW?Cg~4eUilWzopr0JYwt
A*8l(j
literal 0
HcmV?d00001
diff --git a/examples/wasm/change_color_by_id/serve_folder.v b/examples/wasm/change_color_by_id/serve_folder.v
new file mode 100644
index 0000000000..0d8778cdb0
--- /dev/null
+++ 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 { '' })
+}