From 8dcb9f9fcac38a51d0e2514fbf2b63e23d2b7ef0 Mon Sep 17 00:00:00 2001 From: Alexander Medvednikov Date: Wed, 15 Apr 2026 05:34:09 +0300 Subject: [PATCH] all: convert js_dom_draw example to veb (fixes #22603) --- examples/js_dom_cube/README.md | 145 +++------------------------------ examples/js_dom_cube/main.v | 28 +++++++ examples/js_dom_draw/README.md | 143 +++----------------------------- examples/js_dom_draw/main.v | 28 +++++++ 4 files changed, 79 insertions(+), 265 deletions(-) create mode 100644 examples/js_dom_cube/main.v create mode 100644 examples/js_dom_draw/main.v diff --git a/examples/js_dom_cube/README.md b/examples/js_dom_cube/README.md index d26f7275b..95f35aed1 100644 --- a/examples/js_dom_cube/README.md +++ b/examples/js_dom_cube/README.md @@ -1,146 +1,25 @@ # JS DOM Cube -## Compiling +## Run with veb +```sh +cd examples/js_dom_cube +v run main.v ``` -v -b js_browser examples/js_dom_cube/cube.js.v -``` - -Then you can open `index.html` in your favorite browser. - -## Serve Examples - -### JS Server - -> [!NOTE] -> The JS server example in the following steps requires Node.js. -> To install Node, please refer to the [download page](https://nodejs.org/en/download/) -> or the installation via your operating systems [package manager](https://nodejs.org/en/download/package-manager). - -Initialize the example as a Node project - -``` -cd examples/js_dom_cube/ -npm init -y -``` - -Add a `start` and `build` script to the generated `./package.json` file. - -```json - "scripts": { - ... - "start": "npm run build && node server.js", - "build": "v -b js_browser cube.js.v" - }, -``` - -Below is an example of a Node.js server without external dependencies. -You can use it for `./server.js`. - -```javascript -const http = require('http'); -const fs = require('fs'); -var path = require('path'); -const host = 'localhost'; -const port = 3000; +This starts a `veb` server at `http://localhost:3001/` and compiles `cube.js.v` to +`cube.js` before serving `index.html`. -const reqListener = function (req, res) { - console.log('[route] - ', req.url); +You can also run it from the repository root: - var filePath = '.' + req.url; - if (filePath == './') { - filePath = './index.html'; - } - - var extname = String(path.extname(filePath)).toLowerCase(); - var mimeTypes = { - '.html': 'text/html', - '.js': 'text/javascript', - '.css': 'text/css', - '.json': 'application/json', - '.png': 'image/png', - '.jpg': 'image/jpg', - '.gif': 'image/gif', - '.svg': 'image/svg+xml', - '.wav': 'audio/wav', - '.mp4': 'video/mp4', - '.woff': 'application/font-woff', - '.ttf': 'application/font-ttf', - '.eot': 'application/vnd.ms-fontobject', - '.otf': 'application/font-otf', - '.wasm': 'application/wasm', - }; - - var contentType = mimeTypes[extname] || 'application/octet-stream'; - - fs.readFile(filePath, function (error, content) { - if (error) { - if (error.code == 'ENOENT') { - fs.readFile('./404.html', function (error, content) { - res.writeHead(404, { 'Content-Type': 'text/html' }); - res.end(content, 'utf-8'); - }); - } else { - res.writeHead(500); - res.end('Sorry, check with the site admin for error: ' + error.code + ' ..\n'); - } - } else { - res.writeHead(200, { 'Content-Type': contentType }); - res.end(content, 'utf-8'); - } - }); -}; - -const server = http.createServer(reqListener); -server.listen(port, host, () => { - console.log(`Server is running on http://${host}:${port}`); -}); +```sh +v run examples/js_dom_cube/main.v ``` -Now you can build and run the project with the added scripts. +## Compile manually ```sh -npm run build -npm run start +v -b js_browser examples/js_dom_cube/cube.js.v ``` -### V server - -The example below uses `vweb` to serve the project. - -```v -module main - -import vweb -import os - -const http_port = 3001 - -struct App { - vweb.Context -} - -fn main() { - vweb.run(new_app(), http_port) -} - -pub fn (mut app App) before_request() { - // Build the cube.js javascript file - os.execute_or_panic('v -b js_browser cube.js.v ') -} - -fn new_app() &App { - mut app := &App{} - app.serve_static('/favicon.ico', 'favicon.ico') - app.serve_static('/cube.js', 'cube.js') - app.mount_static_folder_at(os.resource_abs_path('.'), '/') - return app -} - -@['/'; get] -pub fn (mut app App) controller_get_all_task() vweb.Result { - file := os.read_file('./index.html') or { panic(err) } - return app.html(file) -} -``` \ No newline at end of file +Then open `index.html` in your favorite browser. diff --git a/examples/js_dom_cube/main.v b/examples/js_dom_cube/main.v new file mode 100644 index 000000000..50881bee2 --- /dev/null +++ b/examples/js_dom_cube/main.v @@ -0,0 +1,28 @@ +module main + +import os +import veb + +const http_port = 3001 +const vexe = os.quoted_path(os.getenv_opt('VEXE') or { @VEXE }) + +pub struct Context { + veb.Context +} + +pub struct App { + veb.StaticHandler +} + +fn main() { + os.chdir(os.dir(@FILE))! + mut app := &App{} + veb.run_at[App, Context](mut app, port: http_port)! +} + +// before_accept_loop builds cube.js before the server starts and registers the static assets. +pub fn (mut app App) before_accept_loop() { + os.execute_or_panic('${vexe} -b js_browser cube.js.v') + app.serve_static('/cube.js', 'cube.js') or { panic(err) } + app.serve_static('/index.html', 'index.html') or { panic(err) } +} diff --git a/examples/js_dom_draw/README.md b/examples/js_dom_draw/README.md index ba904441c..f0560d8ce 100644 --- a/examples/js_dom_draw/README.md +++ b/examples/js_dom_draw/README.md @@ -2,147 +2,26 @@ Drawing with mouse events using the DOM API. Adopted from MDN examples. -## Compiling +## Run with veb ```sh -v -b js_browser examples/js_dom_draw/draw.js.v -``` - -Then you can open `index.html` in your favorite browser. - -## Serve Examples - -### JS Server - -> [!NOTE] -> The JS server example in the following steps requires Node.js. -> To install Node, please refer to the [download page](https://nodejs.org/en/download/) -> or the installation via your operating systems [package manager](https://nodejs.org/en/download/package-manager). - -Initialize the example as a Node project - +cd examples/js_dom_draw +v run main.v ``` -cd examples/js_dom_draw/ -npm init -y -``` - -Add a `start` and `build` script to the generated `./package.json` file. - -```json - "scripts": { - ... - "start": "npm run build && node server.js", - "build": "v -b js_browser draw.js.v" - }, -``` - -Below is an example of a Node.js server without external dependencies. -You can use it for `./server.js`. - -```javascript -const http = require('http'); -const fs = require('fs'); -var path = require('path'); - -const host = 'localhost'; -const port = 3000; -const reqListener = function (req, res) { - console.log('[route] - ', req.url); +This starts a `veb` server at `http://localhost:3001/` and compiles `draw.js.v` to +`draw.js` before serving `index.html`. - var filePath = '.' + req.url; - if (filePath == './') { - filePath = './index.html'; - } +You can also run it from the repository root: - var extname = String(path.extname(filePath)).toLowerCase(); - var mimeTypes = { - '.html': 'text/html', - '.js': 'text/javascript', - '.css': 'text/css', - '.json': 'application/json', - '.png': 'image/png', - '.jpg': 'image/jpg', - '.gif': 'image/gif', - '.svg': 'image/svg+xml', - '.wav': 'audio/wav', - '.mp4': 'video/mp4', - '.woff': 'application/font-woff', - '.ttf': 'application/font-ttf', - '.eot': 'application/vnd.ms-fontobject', - '.otf': 'application/font-otf', - '.wasm': 'application/wasm', - }; - - var contentType = mimeTypes[extname] || 'application/octet-stream'; - - fs.readFile(filePath, function (error, content) { - if (error) { - if (error.code == 'ENOENT') { - fs.readFile('./404.html', function (error, content) { - res.writeHead(404, { 'Content-Type': 'text/html' }); - res.end(content, 'utf-8'); - }); - } else { - res.writeHead(500); - res.end('Sorry, check with the site admin for error: ' + error.code + ' ..\n'); - } - } else { - res.writeHead(200, { 'Content-Type': contentType }); - res.end(content, 'utf-8'); - } - }); -}; - -const server = http.createServer(reqListener); -server.listen(port, host, () => { - console.log(`Server is running on http://${host}:${port}`); -}); +```sh +v run examples/js_dom_draw/main.v ``` -Now you can build and run the project with the added scripts. +## Compile manually ```sh -npm run build -npm run start +v -b js_browser examples/js_dom_draw/draw.js.v ``` -### V server - -The example below uses `vweb` to serve the project. - -```v -module main - -import vweb -import os - -const http_port = 3001 - -struct App { - vweb.Context -} - -fn main() { - vweb.run(new_app(), http_port) -} - -pub fn (mut app App) before_request() { - // Build the draw.js javascript file - os.execute_or_panic('v -b js_browser draw.js.v ') -} - -fn new_app() &App { - mut app := &App{} - app.serve_static('/favicon.ico', 'favicon.ico') - app.serve_static('/draw.js', 'draw.js') - app.mount_static_folder_at(os.resource_abs_path('.'), '/') - return app -} - -@['/'; get] -pub fn (mut app App) controller_get_all_task() vweb.Result { - file := os.read_file('./index.html') or { panic(err) } - return app.html(file) -} -``` \ No newline at end of file +Then open `index.html` in your favorite browser. diff --git a/examples/js_dom_draw/main.v b/examples/js_dom_draw/main.v new file mode 100644 index 000000000..43d621f00 --- /dev/null +++ b/examples/js_dom_draw/main.v @@ -0,0 +1,28 @@ +module main + +import os +import veb + +const http_port = 3001 +const vexe = os.quoted_path(os.getenv_opt('VEXE') or { @VEXE }) + +pub struct Context { + veb.Context +} + +pub struct App { + veb.StaticHandler +} + +fn main() { + os.chdir(os.dir(@FILE))! + mut app := &App{} + veb.run_at[App, Context](mut app, port: http_port)! +} + +// before_accept_loop builds draw.js before the server starts and registers the static assets. +pub fn (mut app App) before_accept_loop() { + os.execute_or_panic('${vexe} -b js_browser draw.js.v') + app.serve_static('/draw.js', 'draw.js') or { panic(err) } + app.serve_static('/index.html', 'index.html') or { panic(err) } +} -- 2.39.5