From 9f440c26996aeb7ea9ad2cc36147d9e1011abbb8 Mon Sep 17 00:00:00 2001
From: Simon Hausmann <simon.hausmann@slint.dev>
Date: Tue, 23 Jan 2024 16:24:48 +0100
Subject: [PATCH] Node.js: Document global singletons

---
 api/cpp/docs/generated_code.md                |  2 +-
 api/node/cover.md                             | 29 +++++++++++++++++++
 docs/reference/src/language/syntax/globals.md | 16 ++++++++++
 docs/reference/src/recipes/recipes.md         | 15 ++++++++++
 4 files changed, 61 insertions(+), 1 deletion(-)

diff --git a/api/cpp/docs/generated_code.md b/api/cpp/docs/generated_code.md
index 8dc98ccd8a..47b6e4a1d4 100644
--- a/api/cpp/docs/generated_code.md
+++ b/api/cpp/docs/generated_code.md
@@ -111,7 +111,7 @@ private:
 You can declare <a href="../slint/src/reference/globals.html">globally available singletons</a> in your
 `.slint` files. If exported, these singletons are available via the
 `global()` getter function on the generated C++ class. Each global singleton
-maps to a class iwith getter/setter functions for properties and callbacks,
+maps to a class with getter/setter functions for properties and callbacks,
 similar to API that's created for your `.slint` component.
 
 For example the following `.slint` markup defines a global `Logic` singleton that's also exported:
diff --git a/api/node/cover.md b/api/node/cover.md
index 6bec41c4f9..b9d159e87c 100644
--- a/api/node/cover.md
+++ b/api/node/cover.md
@@ -205,3 +205,32 @@ component.model = component.model.concat(4);
 ```
 
 Another option is to set an object that implements the {@link Model} interface. Rreading a Slint array property from JavaScript that was previously initialised from a {@link Model} object, will return a reference to the model.
+
+### Globals
+
+You can declare [globally available singletons](../slint/src/language/syntax/globals) in your
+`.slint` files. If exported, these singletons are accessible as properties on your main
+componen instance. Each global singleton is represented by an object with properties and callbacks,
+similar to API that's created for your `.slint` component.
+
+For example the following `.slint` markup defines a global `Logic` singleton that's also exported:
+
+```
+export global Logic {
+    callback to_uppercase(string) -> string;
+}
+```
+
+Assuming this global is used together with the `MyComponent` from the
+previous section, you can access `Logic` like this:
+
+```js
+import * as slint from "slint-ui";
+
+let ui = slint.loadFile("ui/my-component.slint");
+let component = new ui.MyComponent();
+
+component.Logic.to_upper_case = (str) => {
+    return str.toUpperCase();
+};
+```
diff --git a/docs/reference/src/language/syntax/globals.md b/docs/reference/src/language/syntax/globals.md
index c5351c26a3..547d869b37 100644
--- a/docs/reference/src/language/syntax/globals.md
+++ b/docs/reference/src/language/syntax/globals.md
@@ -77,6 +77,22 @@ fn main() {
 
 </details>
 
+<details data-snippet-language="javascript">
+<summary>Usage from JavaScript</summary>
+
+```js
+let slint = require("slint-ui");
+let file = slint.loadFile("app.slint");
+let app = new file.App();
+app.Logic.magic_operation = (value) => {
+    return value * 2;
+};
+app.Logic.the_value = 42;
+// ...
+```
+
+</details>
+
 It's possible to re-expose a callback or properties from a global using the two way binding syntax.
 
 ```slint,no-preview
diff --git a/docs/reference/src/recipes/recipes.md b/docs/reference/src/recipes/recipes.md
index c4448e7f00..6c702adc02 100644
--- a/docs/reference/src/recipes/recipes.md
+++ b/docs/reference/src/recipes/recipes.md
@@ -493,6 +493,21 @@ int main(int argc, char **argv)
 ```
 </details>
 
+<details  data-snippet-language="javascript">
+<summary>JavaScript code</summary>
+In C++ you can set the callback like this:
+
+```js
+let slint = require("slint-ui");
+let file = slint.loadFile("recipe.slint");
+let recipe = new file.Recipe();
+recipe.Logic.to_upper_case = (str) => {
+    return str.toUpperCase();
+};
+// ...
+```
+</details>
+
 # Custom Widgets
 
 ## Custom Button