code review feedback

slint-ui · FloVanGH · Mar 28, 2023 · Mar 13, 2023 · Mar 27, 2023 · Mar 28, 2023
commit edec75e6a96694bff5d01316453d9a409694231b
diff --git a/README.md b/README.md
@@ -98,7 +98,7 @@ Refer to the README of each language directory in the `api` folder:
 
 - [C++](api/cpp) ([Documentation](https://slint-ui.com/docs/cpp) | [Tutorial](https://slint-ui.com/docs/tutorial/cpp) | [Tutorial Video](https://youtu.be/_-Hxr6ZrHyo) | [Getting Started Template](https://github.com/slint-ui/slint-cpp-template))
 - [Rust](api/rs/slint) [![Crates.io](https://img.shields.io/crates/v/slint)](https://crates.io/crates/slint) ([Documentation](https://slint-ui.com/docs/rust/slint/) | [Tutorial](https://slint-ui.com/docs/tutorial/rust) | [Tutorial Video](https://youtu.be/_-Hxr6ZrHyo) | [Getting Started Template](https://github.com/slint-ui/slint-rust-template))
-- [JavaScript/NodeJS (Beta)](api/node) [![npm](https://img.shields.io/npm/v/slint-ui)](https://www.npmjs.com/package/sixtyfps) ([Documentation](https://slint-ui.com/docs/node) | [Tutorial](https://slint-ui.com/docs/tutorial/node))
+- [JavaScript/NodeJS (Beta)](api/node) [![npm](https://img.shields.io/npm/v/slint-ui)](https://www.npmjs.com/package/sixtyfps) ([Documentation](https://slint-ui.com/docs/node) | [Tutorial](https://slint-ui.com/docs/tutorial/node) | [Getting Started Template](https://github.com/slint-ui/slint-nodejs-template))
 
 ## Demos
 

diff --git a/docs/tutorial/node/src/game_logic_in_js.md b/docs/tutorial/node/src/game_logic_in_js.md
@@ -28,14 +28,14 @@ two tiles are opened. If they match, the `solved` property is set to true in the
 match, start a timer that will close them after one second. While the timer is running, we disable every tile so
 one can't click anything during this time.
 
-Insert this code before the `main_window.run()` call:
+Insert this code before the `mainWindow.run()` call:
 
 ```js
 {{#include main_game_logic.js:game_logic}}
 ```
 
-Notice that we take a weak pointer of our `main_window`. This is very
-important because capturing a copy of the `main_window` itself within the callback handler would result in a circular ownership.
+Notice that we take a weak pointer of our `mainWindow`. This is very
+important because capturing a copy of the `mainWindow` itself within the callback handler would result in a circular ownership.
 The `MainWindow` owns the callback handler, which itself owns a reference to the `MainWindow`, which must be weak
 instead of strong to avoid a memory leak.
 

diff --git a/docs/tutorial/node/src/getting_started.md b/docs/tutorial/node/src/getting_started.md
@@ -5,6 +5,8 @@ In this tutorial, we use JavaScript as the host programming language. We also su
 
 You'll need a development environment with [Node.js 16](https://nodejs.org/download/release/v16.19.1/) and [npm](https://www.npmjs.com/) installed. More recent
 versions of NodeJS are currently not supported, for details check [Issue #2220](https://github.com/slint-ui/slint/issues/2220).
+Since Slint is implemented in the Rust programming language, you also need to install a Rust compiler (1.66 or newer). You can easily install a Rust compiler
+following the instruction from [the Rust website](https://www.rust-lang.org/learn/get-started).
 
 We're going to use `slint-ui` as `npm` dependency.
 

diff --git a/docs/tutorial/node/src/main_game_logic.js b/docs/tutorial/node/src/main_game_logic.js
@@ -5,9 +5,9 @@
 // main.js
 let slint = require("slint-ui");
 let ui = require("./memory.slint");
-let window = new ui.MainWindow();
+let mainWindow = new ui.MainWindow();
 
-let initial_tiles = window.memory_tiles;
+let initial_tiles = mainWindow.memory_tiles;
 let tiles = initial_tiles.concat(initial_tiles.map((tile) => Object.assign({}, tile)));
 
 for (let i = tiles.length - 1; i > 0; i--) {
@@ -17,9 +17,9 @@ for (let i = tiles.length - 1; i > 0; i--) {
 
 // ANCHOR: game_logic
 let model = new slint.ArrayModel(tiles);
-window.memory_tiles = model
+mainWindow.memory_tiles = model;
 
-window.check_if_pair_solved.setHandler(function () {
+mainWindow.check_if_pair_solved.setHandler(function () {
     let flipped_tiles = [];
     tiles.forEach((tile, index) => {
         if (tile.image_visible && !tile.solved) {
@@ -48,9 +48,9 @@ window.check_if_pair_solved.setHandler(function () {
             tile2.solved = true;
             model.setRowData(tile2_index, tile2);
         } else {
-            window.disable_tiles = true;
+            mainWindow.disable_tiles = true;
             slint.Timer.singleShot(1000, () => {
-                window.disable_tiles = false;
+                mainWindow.disable_tiles = false;
                 tile1.image_visible = false;
                 model.setRowData(tile1_index, tile1);
                 tile2.image_visible = false;
@@ -59,8 +59,8 @@ window.check_if_pair_solved.setHandler(function () {
 
         }
     }
-})
+});
 
-window.run();
+mainWindow.run();
 
 // ANCHOR_END: game_logic
diff --git a/docs/tutorial/node/src/main_initial.js b/docs/tutorial/node/src/main_initial.js
@@ -5,7 +5,7 @@
 // main.js
 require("slint-ui");
 let ui = require("./memory.slint");
-let window = new ui.MainWindow();
-window.run();
+let mainWindow = new ui.MainWindow();
+mainWindow.run();
 
 // ANCHOR_END: main
diff --git a/docs/tutorial/node/src/main_tiles_from_js.js b/docs/tutorial/node/src/main_tiles_from_js.js
@@ -5,9 +5,9 @@
 // main.js
 let slint = require("slint-ui");
 let ui = require("./memory.slint");
-let window = new ui.MainWindow();
+let mainWindow = new ui.MainWindow();
 
-let initial_tiles = window.memory_tiles;
+let initial_tiles = mainWindow.memory_tiles;
 let tiles = initial_tiles.concat(initial_tiles.map((tile) => Object.assign({}, tile)));
 
 for (let i = tiles.length - 1; i > 0; i--) {
@@ -16,8 +16,8 @@ for (let i = tiles.length - 1; i > 0; i--) {
 }
 
 let model = new slint.ArrayModel(tiles);
-window.memory_tiles = model
+mainWindow.memory_tiles = model;
 
-window.run();
+mainWindow.run();
 
 // ANCHOR_END: main
diff --git a/docs/tutorial/node/src/memory_tile.md b/docs/tutorial/node/src/memory_tile.md
@@ -37,7 +37,6 @@ powershell Expand-Archive -Path icons.zip -DestinationPath .
 
 This should unpack an `icons` directory containing a bunch of icons.
 
-We compile the program with `cmake --build .` and running with the `./memory_game` gives us a
-window on the screen that shows the icon of a bus on a blue background.
+We running the program with `npm start` and it gives us a window on the screen that shows the icon of a bus on a blue background.
 
 ![Screenshot of the first tile](https://slint-ui.com/blog/memory-game-tutorial/memory-tile.png "Memory Tile Screenshot")