Updated generate documentation.

Author: 5cript

docs/getting_started/installation_linux.md

@@ -15,7 +15,8 @@
   - boost
   - libcurl
 
-<details><summary>Ubuntu 22.04</summary>
+<details>
+<summary>Ubuntu 22.04</summary>
 <p>
 
 Packages:
@@ -66,7 +67,8 @@ nvm install node
 </p>
 </details>
 
-<details><summary>Arch Linux</summary>
+<details>
+<summary>Arch Linux</summary>
 <p>
 
 Packages:

docs/getting_started/installation_windows.md

@@ -22,7 +22,7 @@ Make sure that the python executeable is in PATH
 ### Install nodejs and npm
 
 Using nvm is the most practical way to install node and npm https://github.com/coreybutler/nvm-windows/releases.
-:::caution
+:::warning
 
 If you already have node installed, uninstall it first before using nvm.
 
@@ -35,7 +35,7 @@ If you already have node installed, uninstall it first before using nvm.
 Make sure that you have installed the following components for Visual Studio 2022 using the official Visual Studio Installer:
 - vcpkg package manager
 - C++ CMake tools for Windows
-- C++ Clang tools for Windows (<- not automatically included in the Desktop development with C++ Workload setting)
+- C++ Clang tools for Windows (\<\- not automatically included in the Desktop development with C++ Workload setting)
 - git for Windows, or install it via official downloads: https://gitforwindows.org/
 
 Nui only supports clang and requires clang for WASM compilation.
@@ -152,7 +152,7 @@ You can also use the `-G"MSYS Makefiles"` generator, but this is strongly discou
 
 :::info
 
-Make sure you have installed `mingw-w64-clang-x86_64-ninja` not simply `ninja` and are operating from a 
+Make sure you have installed `mingw-w64-clang-x86_64-ninja` not simply `ninja` and are operating from a
 msys2 clang64 environment terminal.
 
 :::
@@ -357,15 +357,15 @@ Within CLion:
 
 ### Error: could not find git for clone of nui in FetchContent
 
-CMake cannot find git in your PATH environment. 
+CMake cannot find git in your PATH environment.
 For Visual Studio install git either using the Visual Studio Installer, or manually via the offical website.
 In the msys2 case, install git via the commandline.
 
 ### Could not find boost / curl / etc
 
 If you are using Visual Studio, you did not setup vcpkg correctly. Retrace the steps outlined above ([Install vcpkg](#install-visual-studio-packages)), alternatively install vcpkg manually: https://vcpkg.io/en/getting-started.html
 
-If you are using msys2, [install the correct packages](#install-msys2-if-you-dont-have-it-installed) for the clang64 subsystem. 
+If you are using msys2, [install the correct packages](#install-msys2-if-you-dont-have-it-installed) for the clang64 subsystem.
 
 ### Other
 

docs/reference/make_resizeable.md

@@ -25,7 +25,7 @@ Nui::ElementRenderer func()
 }
 ```
 
-:::caution
+:::warning
 
 Requires 'nui/make_resizeable' to be imported somewhere in your javascript/typescript files.
 

docs/reference/text.md

@@ -21,4 +21,4 @@ label{}(
     // highlight-end
 )
 ```
-Text content can also be dynamic using Nui::Observed<std::string>.
+Text content can also be dynamic using `Nui::Observed<std::string>`.

docs/reference/window.md

@@ -147,7 +147,7 @@ int main()
 }
 ```
 
-### Window::bind(std::string const& name, std::function<void(nlohmann::json const&)> const& callback)
+### `Window::bind(std::string const& name, std::function<void(nlohmann::json const&)> const& callback)`
 Bind a function into the web context. These will be available under globalThis.nui_rpc.backend.NAME
 Prefer to use the RpcHub instead.
 
@@ -164,7 +164,7 @@ int main()
 }
 ```
 
-### Window::unbind(std::string const& name)
+### `Window::unbind(std::string const& name)`
 Unbinds a function from the web context.
 
 ```cpp
@@ -179,7 +179,7 @@ int main()
 }
 ```
 
-### Window::getExecutor()
+### `Window::getExecutor()`
 Returns the executor of the window.
 
 ```cpp
@@ -198,7 +198,7 @@ int main()
 }
 ```
 
-### Window::run()
+### `Window::run()`
 Runs / Shows the window.
 
 ```cpp
@@ -212,7 +212,7 @@ int main()
 }
 ```
 
-### Window::setHtml(std::string_view html, bool fromFilesystem = false)
+### `Window::setHtml(std::string_view html, bool fromFilesystem = false)`
 Sets the html of the window.
 When "fromFilesystem" is true, the file is dumped to a temporary file and loaded from there.
 
@@ -227,7 +227,7 @@ int main()
 }
 ```
 
-### Window::eval(std::string const& code)
+### `Window::eval(std::string const& code)`
 Evaluates the given code in the web context.
 
 ```cpp
@@ -243,7 +243,7 @@ int main()
 }
 ```
 
-### Window::eval(std::filesystem::path const& file)
+### `Window::eval(std::filesystem::path const& file)`
 Evaluates the given file in the web context.
 
 ```cpp
@@ -259,23 +259,23 @@ int main()
 }
 ```
 
-### Window::init(std::string const& code)
+### `Window::init(std::string const& code)`
 Places javascript in the window.
 
-### Window::init(std::filesystem::path const& file)
+### `Window::init(std::filesystem::path const& file)`
 Places javascript in the window from a file.
 
-### void* Window::getNativeWindow()
+### `void* Window::getNativeWindow()`
 Returns a pointer to the native window.
 `HWND` on windows.
 `GtkWindow*` on linux.
 `id` on macos.
 
-### void* Window::getNativeWebView()
+### `void* Window::getNativeWebView()`
 Returns a pointer to the native webview.
 cast to `ICoreWebView2*` on windows.
 cast using `WEBKIT_WEB_VIEW(getNativeWebView())` on linux.
 And its an `id` on macos.
 
-### Window::setConsoleOutput(bool enabled)
+### `Window::setConsoleOutput(bool enabled)`
 Enables or disables console output from the webview on linux systems.

docs/tutorials/attributes.md

@@ -85,10 +85,62 @@ const auto ui = button{
     }
 }
 ```
+Using "event" for custom events of some ui libraries:
+```cpp
+const auto ui = button{
+    "change"_event = [](Nui::val event) {
+        // The event parameter has the same content as the javascript equivalent would.
+    }
+}
+```
+
 The event paramter is a [Val](/docs/reference/val) of type [Mouse Event](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent).
 
 Events always process view updates when the function scope is left. So if you change an `Observed<T>` the view will be automatically updated.
 
+### Nui::val wrappers for events
+
+Some events already have wrapper classes that give easier access to the underlying val.
+
+```cpp
+#include <nui/frontend/api/mouse_event.hpp>
+
+const auto ui = button{
+    onClick = [](Nui::WebApi::MouseEvent event){
+        std::cout << "click event clientX: " << event.clientX();
+    }
+}
+```
+
+You can create your own wrapper if it takes a val for construction:
+```cpp
+#include <nui/frontend/val_wrapper.hpp>
+
+// using ValWrapper is entirely optional:
+class MyWrapper : public Nui::ValWrapper
+{
+    public:
+        MyWrapper(Nui::val val)
+            : Nui::ValWrapper{std::move(val)}
+        {}
+
+        std::string myProperty() const
+        {
+            return val_["myProperty"].as<std::string>();
+            // or:
+            // return val()["myProperty"].as<std::string>();
+        }
+};
+
+// Use it later now:
+
+const auto ui = button{
+    onClick = [](MyWrapper event){
+        std::cout << "myProperty: " << event.myProperty();
+    }
+}
+```
+
 ## Observed Value Generator
 
 Sometimes you want to process observed values before rendering.
@@ -100,34 +152,42 @@ Nui::Observed<int> spanSubclass = 0;
 
 const auto ui = span{
     // Observe changes on the passed Nui::Observed<T> and generate a class from that
-    class_ = observe(spanClasses, spanSubclass).generate([&spanClasses, &spanSubclass](){
+    class_ = observe(spanClasses, spanSubclass).generate([](std::vector<std::string> const& spanClasses, int spanSubclass){
         // use .value to access the underlying wrapped value of a Nui::Observed:
         auto classes = std::accumulate(
-            std::begin(spanClasses.value()),
-            std::end(spanClasses.value()),
+            std::begin(spanClasses),
+            std::end(spanClasses),
             std::string{},
             [](auto accum, auto const& elem){
                 accum = std::move(accum) + " " + elem;
             }
         );
         if (!accum.empty())
             accum.erase(accum.begin());
-        accum += " spanSubclass" + std::to_string(spanSubclass.value());
+        accum += " spanSubclass" + std::to_string(spanSubclass);
         return accum;
     })
 }();
 ```
+The passed function to "generate" may also take no arguments.
+
+Sometimes you dont want to set attributes on an element, but object properties.
+This is used by some ui frameworks for their parameters, like ui5 webcomponents:
 For properties this looks as follows:
 ```cpp
 Nui::Observed<int> num{3};
+// for prop:
+using namespace Nui::Attributes::Literals;
 
 input{
-    checked = observe(num).generateProperty([&num](){
-        return num.value() % 2;
+    "checked"_prop = observe(num).generate([](int num){
+        return num % 2;
     })
 
     // Or:
-    // "checked"_prop = observe(num).generate(/*...*/)
+    // checked = observe(num).generateProperty([](int num){
+    //     return num % 2;
+    // })
 }()
 ```
 

docs/tutorials/observed_rendering.md

@@ -10,6 +10,21 @@ This is possible through this syntax:
 Nui::Observed<std::string> str{"test"};
 Nui::Observed<int> number{0};
 
+const auto ui = div{}(
+    observe(str, number),
+    // This function is recalled and regenerates its respective elements,
+    // when 'str' or 'number' changes.
+    [](std::string const& str, int number) -> Nui::ElementRenderer {
+        const auto result = str + std::to_string(number);
+        return span{}(result);
+    }
+)
+```
+Alternatively (generate function takes no arguments):
+```cpp
+Nui::Observed<std::string> str{"test"};
+Nui::Observed<int> number{0};
+
 const auto ui = div{}(
     observe(str, number),
     // This function is recalled and regenerates its respective elements,

docs/tutorials/range_rendering.md

@@ -135,7 +135,7 @@ auto foo() {
 ```
 
 ## Notes about the Optimization
-The ranges optimization that is applied to Observed<std::vector> and Observed<std::deque> makes it so that only the changed/inserted elements are rerendered and only erased elements are removed and nothing else is rerendered.
+The ranges optimization that is applied to `Nui::Observed<std::vector>` and `Nui::Observed<std::deque>` makes it so that only the changed/inserted elements are rerendered and only erased elements are removed and nothing else is rerendered.
 This is done by tracking the changes using some algorithms on an interval tree.
 
 Insertions, modifications and erasures are only ever tracked alone, so if you switch from inserting elements to modifying elements a rerender is forced.

docs/tutorials/rpc.md

@@ -1,4 +1,4 @@
-# Frontend <-> Backend Communication
+# Frontend \<\-\> Backend Communication
 
 Nui provides a way to communicate between frontend and the main process running the WebView.
 This intentionally does not use async in the frontend, because using Asyncify comes with a considerable