docs: Modernize the tutorials for 1.0

docs/tutorial/cpp/src/from_one_to_multiple_tiles.md

@@ -18,7 +18,7 @@ First, we copy the tile data structure definition and paste it at top inside the
 {{#include ../../rust/src/main_multiple_tiles.rs:tile_data}}
 ```
 
-Next, we replace the *<span class="hljs-title">MainWindow</span> := { ... }* section at the bottom of the `memory.slint` file with the following snippet:
+Next, we replace the _export component <span class="hljs-title">MainWindow</span> inherits Window { ... }_ section at the bottom of the `memory.slint` file with the following snippet:
 
 ```slint
 {{#include ../../rust/src/main_multiple_tiles.rs:main_window}}

docs/tutorial/cpp/src/game_logic_in_cpp.md

@@ -26,7 +26,7 @@ We add the following handler in <span class="hljs-title">MainWindow</span>:
 On the C++ side, we can now add an handler to the `check_if_pair_solved` callback, that will check if
 two tiles are opened. If they match, the `solved` property is set to true in the model. If they don't
 match, start a timer that will close them after one second. While the timer is running, we disable every tile so
-one cannot click anything during this time.
+one can't click anything during this time.
 
 Insert this code before the `main_window->run()` call:
 

docs/tutorial/cpp/src/getting_started.md

@@ -4,11 +4,11 @@ In this tutorial, we use C++ as the host programming language. We also support o
 [Rust](https://slint-ui.com/docs/rust/slint/) or [JavaScript](https://slint-ui.com/docs/node/).
 
 You will need a development environment that can compile C++20 with CMake 3.21.
-We do not provide binaries of Slint yet, so we will use the CMake integration that will automatically build
-the tools and library from source. Since it is implemented in the Rust programming language, this means that
+We don't provide binaries of Slint yet, so we will use the CMake integration that will automatically build
+the tools and library from source. Since it's implemented in the Rust programming language, this means that
 you also need to install a Rust compiler (1.64). You can easily install a Rust compiler
 following the instruction from [the Rust website](https://www.rust-lang.org/learn/get-started).
-We are going to use `cmake`'s builtin FetchContent module to fetch the source code of Slint.
+We're going to use `cmake`'s builtin FetchContent module to fetch the source code of Slint.
 
 In a new directory, we create a new `CMakeLists.txt` file.
 

docs/tutorial/cpp/src/introduction.md

@@ -1,19 +1,14 @@
 # Introduction
 
-This tutorial will introduce you to the Slint UI framework in a playful way by implementing a little memory game. We are going to combine the `.slint` language for the graphics with the game rules implemented in C++.
+This tutorial will introduce you to the Slint UI framework in a playful way by implementing a little memory game. We're going to combine the `.slint` language for the graphics with the game rules implemented in C++.
 
-The game consists of a grid of 16 rectangular tiles. When clicking on a tile, an icon underneath is uncovered.
+The game consists of a grid of 16 rectangular tiles. Clicking on a tile uncovers an icon underneath.
 We know that there are 8 different icons in total, so each tile has a sibling somewhere in the grid with the
-same icon. The objective is to locate all icon pairs. Only two tiles can be uncovered at the same time. If they
-are not the same, then the icons will be obscured again. We need to remember under which tiles the matching
-graphics are hiding. If two tiles with the same icon are uncovered, then they remain visible - they are solved.
+same icon. The objective is to locate all icon pairs. You can uncover two tiles at the same time. If they
+aren't the same, the icons will be obscured again.
+If you uncover two tiles with the same icon, then they remain visible - they're solved.
 
 This is how the game looks like in action:
 
 <video autoplay loop muted playsinline src="https://slint-ui.com/blog/memory-game-tutorial/memory_clip.mp4"
         class="img-fluid img-thumbnail rounded"></video>
-
-A video-recording of this tutorial is also available on YouTube. After introducing the `.slint` language the video
-continues with a Rust implementation, but around minute 42 the C++ begins:
-
-<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/_-Hxr6ZrHyo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

docs/tutorial/cpp/src/memory.slint

@@ -3,7 +3,7 @@
 
 // ANCHOR: main_window
 // memory.slint
-MainWindow := Window {
+export component MainWindow inherits Window {
     Text {
         text: "hello world";
         color: green;

docs/tutorial/cpp/src/memory_game_logic.slint

@@ -1,17 +1,17 @@
 // Copyright © SixtyFPS GmbH <info@slint-ui.com>
 // SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-commercial
 
-struct TileData := {
+struct TileData {
     image: image,
     image_visible: bool,
     solved: bool,
 }
 
-MemoryTile := Rectangle {
+component MemoryTile inherits Rectangle {
     callback clicked;
-    property <bool> open_curtain;
-    property <bool> solved;
-    property <image> icon;
+    in property <bool> open_curtain;
+    in property <bool> solved;
+    in property <image> icon;
 
     height: 64px;
     width: 64px;
@@ -49,15 +49,16 @@ MemoryTile := Rectangle {
         }
     }
 }
+
 // ANCHOR: mainwindow_interface
-MainWindow := Window {
+export component MainWindow inherits Window {
     width: 326px;
     height: 326px;
 
     callback check_if_pair_solved(); // Added
-    property <bool> disable_tiles; // Added
+    in property <bool> disable_tiles; // Added
 
-    property <[TileData]> memory_tiles: [
+    in-out property <[TileData]> memory_tiles: [
        { image: @image-url("icons/at.png") },
 // ANCHOR_END: mainwindow_interface
        { image: @image-url("icons/balance-scale.png") },
@@ -68,6 +69,7 @@ MainWindow := Window {
        { image: @image-url("icons/motorcycle.png") },
        { image: @image-url("icons/video.png") },
     ];
+
     // ANCHOR: tile_click_logic
     for tile[i] in memory_tiles : MemoryTile {
         x: mod(i, 4) * 74px;

docs/tutorial/cpp/src/memory_tile.md

@@ -13,6 +13,9 @@ We copy the following code into the `memory.slint` file:
 {{#include memory_tile.slint:main_window}}
 ```
 
+Note that we export the <span class="hljs-title">MainWindow</span> component. This is necessary so that we can later access it
+from our business logic.
+
 Inside the <span class="hljs-built_in">Rectangle</span> we place an <span class="hljs-built_in">Image</span> element that
 loads an icon with the <span class="hljs-built_in">@image-url()</span> macro. The path is relative to the folder in which
 the `memory.slint` is located. This icon and others we're going to use later need to be installed first. You can download a

docs/tutorial/cpp/src/memory_tile.slint

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-commercial
 
 // ANCHOR: main_window
-MemoryTile := Rectangle {
+component MemoryTile inherits Rectangle {
     width: 64px;
     height: 64px;
     background: #3960D5;
@@ -14,7 +14,7 @@ MemoryTile := Rectangle {
     }
 }
 
-MainWindow := Window {
+export component MainWindow inherits Window {
     MemoryTile {}
 }
 // ANCHOR_END: main_window

docs/tutorial/cpp/src/memory_tiles_from_cpp.slint

@@ -1,17 +1,17 @@
 // Copyright © SixtyFPS GmbH <info@slint-ui.com>
 // SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-commercial
 
-struct TileData := {
+struct TileData {
     image: image,
     image_visible: bool,
     solved: bool,
 }
 
-MemoryTile := Rectangle {
+component MemoryTile inherits Rectangle {
     callback clicked;
-    property <bool> open_curtain;
-    property <bool> solved;
-    property <image> icon;
+    in property <bool> open_curtain;
+    in property <bool> solved;
+    in property <image> icon;
 
     height: 64px;
     width: 64px;
@@ -49,11 +49,12 @@ MemoryTile := Rectangle {
         }
     }
 }
-MainWindow := Window {
+
+export component MainWindow inherits Window {
     width: 326px;
     height: 326px;
 
-    property <[TileData]> memory_tiles: [
+    in-out property <[TileData]> memory_tiles: [
        { image: @image-url("icons/at.png") },
        { image: @image-url("icons/balance-scale.png") },
        { image: @image-url("icons/bicycle.png") },