From c4a679186f358ce79bfbd8318566c36088651227 Mon Sep 17 00:00:00 2001 From: Turiiya <34311583+ttytm@users.noreply.github.com> Date: Sat, 29 Jul 2023 14:27:03 +0200 Subject: [PATCH] examples, readme: fix typos (#18994) --- README.md | 6 +- examples/js_dom_cube/README.md | 190 +++++++++--------- examples/js_dom_draw/README.md | 186 +++++++++-------- examples/js_dom_draw_bechmark_chart/README.md | 98 ++++----- 4 files changed, 248 insertions(+), 232 deletions(-) diff --git a/README.md b/README.md index 1b56702020..7757abed02 100644 --- a/README.md +++ b/README.md @@ -205,11 +205,11 @@ make To bring IDE functions for the V programming languages to your editor, check out [v-analyzer](https://github.com/v-analyzer/v-analyzer). It provides a -[VS code extension](https://marketplace.visualstudio.com/items?itemName=VOSCA.vscode-v-analyzer) +[VS Code extension](https://marketplace.visualstudio.com/items?itemName=VOSCA.vscode-v-analyzer) and language server capabilities for other editors. -The plugin for JetBrains IDEs (IntelliJ, CLion, GoLand, etc.) also offer a great development -experience with V. You can check out all the features it [its documentation](https://plugins.jetbrains.com/plugin/20287-vlang/docs/syntax-highlighting.html). +The plugin for JetBrains IDEs (IntelliJ, CLion, GoLand, etc.) also offers a great development +experience with V. You can find all features in [its documentation](https://plugins.jetbrains.com/plugin/20287-vlang/docs/syntax-highlighting.html). Other Plugins: diff --git a/examples/js_dom_cube/README.md b/examples/js_dom_cube/README.md index bd84d2419a..f953a6d4ce 100644 --- a/examples/js_dom_cube/README.md +++ b/examples/js_dom_cube/README.md @@ -1,150 +1,148 @@ -# Serve +# JS DOM Cube -This project has a no dependence serve in `./server.js` path. -That can be run with `node` command after build. +## Compiling -or just run: `npm run start` - -To install node, you can access node [download page](https://nodejs.org/en/download/) -or [package manager](https://nodejs.org/en/download/package-manager) -Drawing with mouse events using DOM API. Adopted from MDN examples. - -# Compiling ``` v -b js_browser examples/js_dom_cube/cube.js.v ``` -Drawing with mouse events using DOM API. Adopted from MDN examples. -Then you can open `index.html` with your favourite browser. -# Serve examples +Then you can open `index.html` in your favorite browser. -### JS server -After run `npm init -y` code and genared `./package.json` -You can put `start` and `build` at script in jason leaf. -`path './package.json'` -```json - "scripts": { - "start": "npm run build && node server.js", - "build":"v -b js_browser cube.js.v" - }, +## 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 ``` -here is the pure javascript server code -`path './server.js'` +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"); +const http = require('http'); +const fs = require('fs'); var path = require('path'); -const host = "localhost"; +const host = 'localhost'; const port = 3000; const reqListener = function (req, res) { - console.log('[route] - ', req.url); + console.log('[route] - ', req.url); - var filePath = '.' + req.url; - if (filePath == './') { - filePath = './index.html'; - } + 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 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'; + 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'); - } - }); + 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}`); + console.log(`Server is running on http://${host}:${port}`); }); - ``` -This project has a no dependence serve in `./server.js` path. -That can be run with `node` command after build. - -or just run: `npm run start` - -To install node, you can access node [download page](https://nodejs.org/en/download/) -or [package manager](https://nodejs.org/en/download/package-manager) +Now you can build and run the project with the added scripts. +```sh +npm run build +npm run start ``` -$ cd examples/js_dom_draw/ -$ npm run build -``` - ### V server -```v ignore + +The example below uses `vweb` to serve the project. + +```v module main import vweb import os const ( - http_port = 3001 + http_port = 3001 ) struct App { - vweb.Context + vweb.Context } fn main() { - vweb.run(new_app(), http_port) + vweb.run(new_app(), http_port) } pub fn (mut app App) before_request() { - // This build server json files - os.execute_or_panic('v -b js_browser cube.js.v ') + // 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 + 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) + file := os.read_file('./index.html') or { panic(err) } + return app.html(file) } -``` \ No newline at end of file +``` diff --git a/examples/js_dom_draw/README.md b/examples/js_dom_draw/README.md index d217ef5f33..0dd531fb35 100644 --- a/examples/js_dom_draw/README.md +++ b/examples/js_dom_draw/README.md @@ -1,140 +1,150 @@ -Drawing with mouse events using DOM API. Adopted from MDN examples. +# JS DOM Draw -# Compiling -``` +Drawing with mouse events using the DOM API. Adopted from MDN examples. + +## Compiling + +```sh v -b js_browser examples/js_dom_draw/draw.js.v ``` -Then you can open `index.html` with your favourite browser. -# Serve examples +Then you can open `index.html` in your favorite browser. -### JS server -After run `npm init -y` code and genared `./package.json` -You can put `start` and `build` at script in jason leaf. -`path './package.json'` -```json - "scripts": { - "start": "npm run build && node server.js", - "build":"v -b js_browser draw.js.v" - }, +## 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 ``` -here is the pure javascript server code -`path './server.js'` +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"); +const http = require('http'); +const fs = require('fs'); var path = require('path'); -const host = "localhost"; +const host = 'localhost'; const port = 3000; const reqListener = function (req, res) { - console.log('[route] - ', req.url); + console.log('[route] - ', req.url); - var filePath = '.' + req.url; - if (filePath == './') { - filePath = './index.html'; - } + 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 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'; + 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'); - } - }); + 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}`); + console.log(`Server is running on http://${host}:${port}`); }); - ``` -This project has a no dependence serve in `./server.js` path. -That can be run with `node` command after build. - -or just run: `npm run start` - -To install node, you can access node [download page](https://nodejs.org/en/download/) -or [package manager](https://nodejs.org/en/download/package-manager) +Now you can build and run the project with the added scripts. +```sh +npm run build +npm run start ``` -$ cd examples/js_dom_draw/ -$ npm run build -``` - ### V server -```v ignore + +The example below uses `vweb` to serve the project. + +```v module main import vweb import os const ( - http_port = 3001 + http_port = 3001 ) struct App { - vweb.Context + vweb.Context } fn main() { - vweb.run(new_app(), http_port) + vweb.run(new_app(), http_port) } pub fn (mut app App) before_request() { - // This build server json files - os.execute_or_panic('v -b js_browser draw.js.v ') + // 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 + 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) + file := os.read_file('./index.html') or { panic(err) } + return app.html(file) } -``` \ No newline at end of file +``` diff --git a/examples/js_dom_draw_bechmark_chart/README.md b/examples/js_dom_draw_bechmark_chart/README.md index 64a55dc718..79071ed508 100644 --- a/examples/js_dom_draw_bechmark_chart/README.md +++ b/examples/js_dom_draw_bechmark_chart/README.md @@ -1,35 +1,57 @@ +# JS DOM Benchmark Chart + ![image](https://user-images.githubusercontent.com/63821277/186010833-2ea36f3a-4738-4025-9b23-ac62afe74b81.png) -# To run app -## From root -- run typescript project -`npm i --prefix examples/js_dom_draw_bechmark_chart/typescript_vanilla_typeorm` -`npm run start:dev --prefix examples/js_dom_draw_bechmark_chart/typescript_vanilla_typeorm` +## Running the App -- run v project -`v run examples/js_dom_draw_bechmark_chart/v_vweb_orm ` +> **NOTE**\ +> The following steps require 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). -- running v chart -`cd examples/js_dom_draw_bechmark_chart/chart && v run .` +The steps below assume that your current directory path is the examples project directory. -Dockerfile -[docker build]=> Docker image -[docker run]=> Docker container +``` +cd examples/js_dom_draw_bechmark_chart +``` -`sudo docker build -t .` +Execute the following commands in separate terminal instances. -`sudo docker run --name --interactive --tty --publish 3001:3001 ` +Run the Benchmarks Typescript Part -`v run .` +```sh +npm i --prefix typescript_vanilla_typeorm +npm run start:dev --prefix typescript_vanilla_typeorm +``` -A message like `[Vweb] Running app on http://localhost:3001/` should appear +Run the Benchmarks V Part -`exit` +```sh +v run v_vweb_orm +``` -# To implement new benchmarks in v +Run the Chart -In `examples/js_dom_draw_bechmark_chart/v_vweb_orm/src/main.v` path -Create a route returning a `Response` struct like: +``` +cd chart/ && v run . +``` + +## Dockerfile + +> [docker build] => Docker image\ +> [docker run] => Docker container + +```sh +sudo docker build -t . +sudo docker run --name --interactive --tty --publish 3001:3001 +v run . +# A message like `[Vweb] Running app on http://localhost:3001/` should appear +exit +``` + +## Implementing New Benchmarks in V + +In `v_vweb_orm/src/main.v`, create a route that returns a `Response` struct. ```v ignore ['/sqlite-memory/:count'] @@ -65,18 +87,17 @@ pub fn (mut app App) sqlite_memory(count int) vweb.Result { }! response := Response{ - insert: insert_stopwatchs - @select:select_stopwatchs - update: update_stopwatchs + insert: insert_stopwatchs + @select: select_stopwatchs + update: update_stopwatchs } return app.json(response) } - ``` -In `examples/chart/services.v` path -Create a service to request the benchmarks data by http -Decode the info to `FrameworkBenchmarkResponse` +In `chart/main.v`, create a service to request the benchmark data and decode the response as +`FrameworkBenchmarkResponse`. + ```v ignore fn typescript_sqlite_memory() ?FrameworkBenchmarkResponse { url := 'http://localhost:3000/sqlite-memory/${benchmark_loop_length}' @@ -86,26 +107,13 @@ fn typescript_sqlite_memory() ?FrameworkBenchmarkResponse { } ``` -In `examples/chart/main.v` path -Create a service to request the benchmarks data by http -Decode the info to `FrameworkBenchmarkResponse` -```v ignore -fn typescript_sqlite_memory() ?FrameworkBenchmarkResponse { - url := 'http://localhost:3000/sqlite-memory/${benchmark_loop_length}' - res := http.get(url) or { panic(err) } - framework_benchmark_response := json.decode(FrameworkBenchmarkResponse, res.body)! - return framework_benchmark_response -} -``` -Then, update: -`insert_framework_benchmark_times()`; -`select_framework_benchmark_times()`; -`update_framework_benchmark_times()`. -with the new function +Then update `insert_framework_benchmark_times()`, `select_framework_benchmark_times()` and +`update_framework_benchmark_times()` to include the `numbers := FrameworkPlatform{` for the newly +added function. +## Roadmap - -# ROADMAP 02/09/2022 + - [ ] select bench (easy) - [ ] vsql (easy)