1
0
mirror of https://github.com/vlang/v.git synced 2023-08-10 21:13:21 +03:00

examples, readme: fix typos (#18994)

This commit is contained in:
Turiiya 2023-07-29 14:27:03 +02:00 committed by GitHub
parent 490a014bf6
commit c4a679186f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 248 additions and 232 deletions

View File

@ -205,11 +205,11 @@ make
To bring IDE functions for the V programming languages to your editor, check out 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 [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. and language server capabilities for other editors.
The plugin for JetBrains IDEs (IntelliJ, CLion, GoLand, etc.) also offer a great development The plugin for JetBrains IDEs (IntelliJ, CLion, GoLand, etc.) also offers 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). experience with V. You can find all features in [its documentation](https://plugins.jetbrains.com/plugin/20287-vlang/docs/syntax-highlighting.html).
Other Plugins: Other Plugins:

View File

@ -1,150 +1,148 @@
# Serve # JS DOM Cube
This project has a no dependence serve in `./server.js` path. ## Compiling
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)
Drawing with mouse events using DOM API. Adopted from MDN examples.
# Compiling
``` ```
v -b js_browser examples/js_dom_cube/cube.js.v 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` in your favorite browser.
Then you can open `index.html` with your favourite browser.
# Serve examples
### JS server ## Serve Examples
After run `npm init -y` code and genared `./package.json`
You can put `start` and `build` at script in jason leaf. ### JS Server
`path './package.json'`
```json > **NOTE**\
"scripts": { > The JS server example in the following steps requires Node.js.
"start": "npm run build && node server.js", > To install Node, please refer to the [download page](https://nodejs.org/en/download/)
"build":"v -b js_browser cube.js.v" > 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 cd examples/js_dom_cube/
`path './server.js'` 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 ```javascript
const http = require("http"); const http = require('http');
const fs = require("fs"); const fs = require('fs');
var path = require('path'); var path = require('path');
const host = "localhost"; const host = 'localhost';
const port = 3000; const port = 3000;
const reqListener = function (req, res) { const reqListener = function (req, res) {
console.log('[route] - ', req.url); console.log('[route] - ', req.url);
var filePath = '.' + req.url; var filePath = '.' + req.url;
if (filePath == './') { if (filePath == './') {
filePath = './index.html'; filePath = './index.html';
} }
var extname = String(path.extname(filePath)).toLowerCase(); var extname = String(path.extname(filePath)).toLowerCase();
var mimeTypes = { var mimeTypes = {
'.html': 'text/html', '.html': 'text/html',
'.js': 'text/javascript', '.js': 'text/javascript',
'.css': 'text/css', '.css': 'text/css',
'.json': 'application/json', '.json': 'application/json',
'.png': 'image/png', '.png': 'image/png',
'.jpg': 'image/jpg', '.jpg': 'image/jpg',
'.gif': 'image/gif', '.gif': 'image/gif',
'.svg': 'image/svg+xml', '.svg': 'image/svg+xml',
'.wav': 'audio/wav', '.wav': 'audio/wav',
'.mp4': 'video/mp4', '.mp4': 'video/mp4',
'.woff': 'application/font-woff', '.woff': 'application/font-woff',
'.ttf': 'application/font-ttf', '.ttf': 'application/font-ttf',
'.eot': 'application/vnd.ms-fontobject', '.eot': 'application/vnd.ms-fontobject',
'.otf': 'application/font-otf', '.otf': 'application/font-otf',
'.wasm': 'application/wasm' '.wasm': 'application/wasm',
}; };
var contentType = mimeTypes[extname] || 'application/octet-stream'; var contentType = mimeTypes[extname] || 'application/octet-stream';
fs.readFile(filePath, function(error, content) { fs.readFile(filePath, function (error, content) {
if (error) { if (error) {
if(error.code == 'ENOENT') { if (error.code == 'ENOENT') {
fs.readFile('./404.html', function(error, content) { fs.readFile('./404.html', function (error, content) {
res.writeHead(404, { 'Content-Type': 'text/html' }); res.writeHead(404, { 'Content-Type': 'text/html' });
res.end(content, 'utf-8'); res.end(content, 'utf-8');
}); });
} } else {
else { res.writeHead(500);
res.writeHead(500); res.end('Sorry, check with the site admin for error: ' + error.code + ' ..\n');
res.end('Sorry, check with the site admin for error: '+error.code+' ..\n'); }
} } else {
} res.writeHead(200, { 'Content-Type': contentType });
else { res.end(content, 'utf-8');
res.writeHead(200, { 'Content-Type': contentType }); }
res.end(content, 'utf-8'); });
}
});
}; };
const server = http.createServer(reqListener); const server = http.createServer(reqListener);
server.listen(port, host, () => { 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. Now you can build and run the project with the added scripts.
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)
```sh
npm run build
npm run start
``` ```
$ cd examples/js_dom_draw/
$ npm run build
```
### V server ### V server
```v ignore
The example below uses `vweb` to serve the project.
```v
module main module main
import vweb import vweb
import os import os
const ( const (
http_port = 3001 http_port = 3001
) )
struct App { struct App {
vweb.Context vweb.Context
} }
fn main() { fn main() {
vweb.run(new_app(), http_port) vweb.run(new_app(), http_port)
} }
pub fn (mut app App) before_request() { pub fn (mut app App) before_request() {
// This build server json files // Build the cube.js javascript file
os.execute_or_panic('v -b js_browser cube.js.v ') os.execute_or_panic('v -b js_browser cube.js.v ')
} }
fn new_app() &App { fn new_app() &App {
mut app := &App{} mut app := &App{}
app.serve_static('/favicon.ico', 'favicon.ico') app.serve_static('/favicon.ico', 'favicon.ico')
app.serve_static('/cube.js', 'cube.js') app.serve_static('/cube.js', 'cube.js')
app.mount_static_folder_at(os.resource_abs_path('.'), '/') app.mount_static_folder_at(os.resource_abs_path('.'), '/')
return app return app
} }
['/'; get] ['/'; get]
pub fn (mut app App) controller_get_all_task() vweb.Result { pub fn (mut app App) controller_get_all_task() vweb.Result {
file :=os.read_file('./index.html') or { panic(err) } file := os.read_file('./index.html') or { panic(err) }
return app.html(file) return app.html(file)
} }
``` ```

View File

@ -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 v -b js_browser examples/js_dom_draw/draw.js.v
``` ```
Then you can open `index.html` with your favourite browser. Then you can open `index.html` in your favorite browser.
# Serve examples
### JS server ## Serve Examples
After run `npm init -y` code and genared `./package.json`
You can put `start` and `build` at script in jason leaf. ### JS Server
`path './package.json'`
```json > **NOTE**\
"scripts": { > The JS server example in the following steps requires Node.js.
"start": "npm run build && node server.js", > To install Node, please refer to the [download page](https://nodejs.org/en/download/)
"build":"v -b js_browser draw.js.v" > 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 cd examples/js_dom_draw/
`path './server.js'` 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 ```javascript
const http = require("http"); const http = require('http');
const fs = require("fs"); const fs = require('fs');
var path = require('path'); var path = require('path');
const host = "localhost"; const host = 'localhost';
const port = 3000; const port = 3000;
const reqListener = function (req, res) { const reqListener = function (req, res) {
console.log('[route] - ', req.url); console.log('[route] - ', req.url);
var filePath = '.' + req.url; var filePath = '.' + req.url;
if (filePath == './') { if (filePath == './') {
filePath = './index.html'; filePath = './index.html';
} }
var extname = String(path.extname(filePath)).toLowerCase(); var extname = String(path.extname(filePath)).toLowerCase();
var mimeTypes = { var mimeTypes = {
'.html': 'text/html', '.html': 'text/html',
'.js': 'text/javascript', '.js': 'text/javascript',
'.css': 'text/css', '.css': 'text/css',
'.json': 'application/json', '.json': 'application/json',
'.png': 'image/png', '.png': 'image/png',
'.jpg': 'image/jpg', '.jpg': 'image/jpg',
'.gif': 'image/gif', '.gif': 'image/gif',
'.svg': 'image/svg+xml', '.svg': 'image/svg+xml',
'.wav': 'audio/wav', '.wav': 'audio/wav',
'.mp4': 'video/mp4', '.mp4': 'video/mp4',
'.woff': 'application/font-woff', '.woff': 'application/font-woff',
'.ttf': 'application/font-ttf', '.ttf': 'application/font-ttf',
'.eot': 'application/vnd.ms-fontobject', '.eot': 'application/vnd.ms-fontobject',
'.otf': 'application/font-otf', '.otf': 'application/font-otf',
'.wasm': 'application/wasm' '.wasm': 'application/wasm',
}; };
var contentType = mimeTypes[extname] || 'application/octet-stream'; var contentType = mimeTypes[extname] || 'application/octet-stream';
fs.readFile(filePath, function(error, content) { fs.readFile(filePath, function (error, content) {
if (error) { if (error) {
if(error.code == 'ENOENT') { if (error.code == 'ENOENT') {
fs.readFile('./404.html', function(error, content) { fs.readFile('./404.html', function (error, content) {
res.writeHead(404, { 'Content-Type': 'text/html' }); res.writeHead(404, { 'Content-Type': 'text/html' });
res.end(content, 'utf-8'); res.end(content, 'utf-8');
}); });
} } else {
else { res.writeHead(500);
res.writeHead(500); res.end('Sorry, check with the site admin for error: ' + error.code + ' ..\n');
res.end('Sorry, check with the site admin for error: '+error.code+' ..\n'); }
} } else {
} res.writeHead(200, { 'Content-Type': contentType });
else { res.end(content, 'utf-8');
res.writeHead(200, { 'Content-Type': contentType }); }
res.end(content, 'utf-8'); });
}
});
}; };
const server = http.createServer(reqListener); const server = http.createServer(reqListener);
server.listen(port, host, () => { 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. Now you can build and run the project with the added scripts.
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)
```sh
npm run build
npm run start
``` ```
$ cd examples/js_dom_draw/
$ npm run build
```
### V server ### V server
```v ignore
The example below uses `vweb` to serve the project.
```v
module main module main
import vweb import vweb
import os import os
const ( const (
http_port = 3001 http_port = 3001
) )
struct App { struct App {
vweb.Context vweb.Context
} }
fn main() { fn main() {
vweb.run(new_app(), http_port) vweb.run(new_app(), http_port)
} }
pub fn (mut app App) before_request() { pub fn (mut app App) before_request() {
// This build server json files // Build the draw.js javascript file
os.execute_or_panic('v -b js_browser draw.js.v ') os.execute_or_panic('v -b js_browser draw.js.v ')
} }
fn new_app() &App { fn new_app() &App {
mut app := &App{} mut app := &App{}
app.serve_static('/favicon.ico', 'favicon.ico') app.serve_static('/favicon.ico', 'favicon.ico')
app.serve_static('/draw.js', 'draw.js') app.serve_static('/draw.js', 'draw.js')
app.mount_static_folder_at(os.resource_abs_path('.'), '/') app.mount_static_folder_at(os.resource_abs_path('.'), '/')
return app return app
} }
['/'; get] ['/'; get]
pub fn (mut app App) controller_get_all_task() vweb.Result { pub fn (mut app App) controller_get_all_task() vweb.Result {
file :=os.read_file('./index.html') or { panic(err) } file := os.read_file('./index.html') or { panic(err) }
return app.html(file) return app.html(file)
} }
``` ```

View File

@ -1,35 +1,57 @@
# JS DOM Benchmark Chart
![image](https://user-images.githubusercontent.com/63821277/186010833-2ea36f3a-4738-4025-9b23-ac62afe74b81.png) ![image](https://user-images.githubusercontent.com/63821277/186010833-2ea36f3a-4738-4025-9b23-ac62afe74b81.png)
# To run app ## Running the 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`
- run v project > **NOTE**\
`v run examples/js_dom_draw_bechmark_chart/v_vweb_orm ` > 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 The steps below assume that your current directory path is the examples project directory.
`cd examples/js_dom_draw_bechmark_chart/chart && v run .`
Dockerfile ```
[docker build]=> Docker image cd examples/js_dom_draw_bechmark_chart
[docker run]=> Docker container ```
`sudo docker build -t <name> .` Execute the following commands in separate terminal instances.
`sudo docker run --name <container name> --interactive --tty --publish 3001:3001 <name>` 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 <name> .
sudo docker run --name <container name> --interactive --tty --publish 3001:3001 <name>
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 ```v ignore
['/sqlite-memory/:count'] ['/sqlite-memory/:count']
@ -65,18 +87,17 @@ pub fn (mut app App) sqlite_memory(count int) vweb.Result {
}! }!
response := Response{ response := Response{
insert: insert_stopwatchs insert: insert_stopwatchs
@select:select_stopwatchs @select: select_stopwatchs
update: update_stopwatchs update: update_stopwatchs
} }
return app.json(response) return app.json(response)
} }
``` ```
In `examples/chart/services.v` path In `chart/main.v`, create a service to request the benchmark data and decode the response as
Create a service to request the benchmarks data by http `FrameworkBenchmarkResponse`.
Decode the info to `FrameworkBenchmarkResponse`
```v ignore ```v ignore
fn typescript_sqlite_memory() ?FrameworkBenchmarkResponse { fn typescript_sqlite_memory() ?FrameworkBenchmarkResponse {
url := 'http://localhost:3000/sqlite-memory/${benchmark_loop_length}' url := 'http://localhost:3000/sqlite-memory/${benchmark_loop_length}'
@ -86,26 +107,13 @@ fn typescript_sqlite_memory() ?FrameworkBenchmarkResponse {
} }
``` ```
In `examples/chart/main.v` path Then update `insert_framework_benchmark_times()`, `select_framework_benchmark_times()` and
Create a service to request the benchmarks data by http `update_framework_benchmark_times()` to include the `numbers := FrameworkPlatform{` for the newly
Decode the info to `FrameworkBenchmarkResponse` added function.
```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
## Roadmap
# ROADMAP
02/09/2022 02/09/2022
- [ ] select bench (easy) - [ ] select bench (easy)
- [ ] vsql (easy) - [ ] vsql (easy)