slint-ui 1.7.0-nightly.2024070208 → 1.7.0-nightly.2024070318

package/index.ts

@@ -389,165 +389,165 @@ export class ArrayModel<T> extends Model<T> {
 }
 
 export namespace private_api {
-/**
- * Provides rows that are generated by a map function based on the rows of another Model.
- *
- * @template T item type of source model that is mapped to U.
- * @template U the type of the mapped items
- *
- * ## Example
- *
- *  Here we have a {@link ArrayModel} holding rows of a custom interface `Name` and a {@link MapModel} that maps the name rows
- *  to single string rows.
- *
- * ```ts
- * import { Model, ArrayModel, MapModel } from "./index";
-*
-* interface Name {
-*     first: string;
-*     last: string;
-* }
-*
-* const model = new ArrayModel<Name>([
-*     {
-*         first: "Hans",
-*         last: "Emil",
-*     },
-*     {
-*         first: "Max",
-*         last: "Mustermann",
-*     },
-*     {
-*         first: "Roman",
-*         last: "Tisch",
-*     },
-* ]);
-*
-* const mappedModel = new MapModel(
-*     model,
-*     (data) => {
-*         return data.last + ", " + data.first;
-*     }
-* );
-*
-* // prints "Emil, Hans"
-* console.log(mappedModel.rowData(0));
-*
-* // prints "Mustermann, Max"
-* console.log(mappedModel.rowData(1));
-*
-* // prints "Tisch, Roman"
-* console.log(mappedModel.rowData(2));
-*
-* // Alternatively you can use the shortcut {@link MapModel.map}.
-*
-* const model = new ArrayModel<Name>([
-*     {
-*         first: "Hans",
-*         last: "Emil",
-*     },
-*     {
-*         first: "Max",
-*         last: "Mustermann",
-*     },
-*     {
-*         first: "Roman",
-*         last: "Tisch",
-*     },
-* ]);
-*
-* const mappedModel = model.map(
-*     (data) => {
-*         return data.last + ", " + data.first;
-*     }
-* );
-*
-*
-* // prints "Emil, Hans"
-* console.log(mappedModel.rowData(0));
-*
-* // prints "Mustermann, Max"
-* console.log(mappedModel.rowData(1));
-*
-* // prints "Tisch, Roman"
-* console.log(mappedModel.rowData(2));
-*
-* // You can modifying the underlying {@link ArrayModel}:
-*
-* const model = new ArrayModel<Name>([
-*     {
-*         first: "Hans",
-*         last: "Emil",
-*     },
-*     {
-*         first: "Max",
-*         last: "Mustermann",
-*     },
-*     {
-*         first: "Roman",
-*         last: "Tisch",
-*     },
-* ]);
-*
-* const mappedModel = model.map(
-*     (data) => {
-*         return data.last + ", " + data.first;
-*     }
-* );
-*
-* model.setRowData(1, { first: "Minnie", last: "Musterfrau" } );
-*
-* // prints "Emil, Hans"
-* console.log(mappedModel.rowData(0));
-*
-* // prints "Musterfrau, Minnie"
-* console.log(mappedModel.rowData(1));
-*
-* // prints "Tisch, Roman"
-* console.log(mappedModel.rowData(2));
-* ```
-*/
-export class MapModel<T, U> extends Model<U> {
-    readonly sourceModel: Model<T>;
-    #mapFunction: (data: T) => U
-
     /**
-     * Constructs the MapModel with a source model and map functions.
+     * Provides rows that are generated by a map function based on the rows of another Model.
+     *
      * @template T item type of source model that is mapped to U.
-     * @template U the type of the mapped items.
-     * @param sourceModel the wrapped model.
-     * @param mapFunction maps the data from T to U.
-     */
-    constructor(
-        sourceModel: Model<T>,
-        mapFunction: (data: T) => U
-    ) {
-        super();
-        this.sourceModel = sourceModel;
-        this.#mapFunction = mapFunction;
-    }
+     * @template U the type of the mapped items
+     *
+     * ## Example
+     *
+     *  Here we have a {@link ArrayModel} holding rows of a custom interface `Name` and a {@link MapModel} that maps the name rows
+     *  to single string rows.
+     *
+     * ```ts
+     * import { Model, ArrayModel, MapModel } from "./index";
+    *
+    * interface Name {
+    *     first: string;
+    *     last: string;
+    * }
+    *
+    * const model = new ArrayModel<Name>([
+    *     {
+    *         first: "Hans",
+    *         last: "Emil",
+    *     },
+    *     {
+    *         first: "Max",
+    *         last: "Mustermann",
+    *     },
+    *     {
+    *         first: "Roman",
+    *         last: "Tisch",
+    *     },
+    * ]);
+    *
+    * const mappedModel = new MapModel(
+    *     model,
+    *     (data) => {
+    *         return data.last + ", " + data.first;
+    *     }
+    * );
+    *
+    * // prints "Emil, Hans"
+    * console.log(mappedModel.rowData(0));
+    *
+    * // prints "Mustermann, Max"
+    * console.log(mappedModel.rowData(1));
+    *
+    * // prints "Tisch, Roman"
+    * console.log(mappedModel.rowData(2));
+    *
+    * // Alternatively you can use the shortcut {@link MapModel.map}.
+    *
+    * const model = new ArrayModel<Name>([
+    *     {
+    *         first: "Hans",
+    *         last: "Emil",
+    *     },
+    *     {
+    *         first: "Max",
+    *         last: "Mustermann",
+    *     },
+    *     {
+    *         first: "Roman",
+    *         last: "Tisch",
+    *     },
+    * ]);
+    *
+    * const mappedModel = model.map(
+    *     (data) => {
+    *         return data.last + ", " + data.first;
+    *     }
+    * );
+    *
+    *
+    * // prints "Emil, Hans"
+    * console.log(mappedModel.rowData(0));
+    *
+    * // prints "Mustermann, Max"
+    * console.log(mappedModel.rowData(1));
+    *
+    * // prints "Tisch, Roman"
+    * console.log(mappedModel.rowData(2));
+    *
+    * // You can modifying the underlying {@link ArrayModel}:
+    *
+    * const model = new ArrayModel<Name>([
+    *     {
+    *         first: "Hans",
+    *         last: "Emil",
+    *     },
+    *     {
+    *         first: "Max",
+    *         last: "Mustermann",
+    *     },
+    *     {
+    *         first: "Roman",
+    *         last: "Tisch",
+    *     },
+    * ]);
+    *
+    * const mappedModel = model.map(
+    *     (data) => {
+    *         return data.last + ", " + data.first;
+    *     }
+    * );
+    *
+    * model.setRowData(1, { first: "Minnie", last: "Musterfrau" } );
+    *
+    * // prints "Emil, Hans"
+    * console.log(mappedModel.rowData(0));
+    *
+    * // prints "Musterfrau, Minnie"
+    * console.log(mappedModel.rowData(1));
+    *
+    * // prints "Tisch, Roman"
+    * console.log(mappedModel.rowData(2));
+    * ```
+    */
+    export class MapModel<T, U> extends Model<U> {
+        readonly sourceModel: Model<T>;
+        #mapFunction: (data: T) => U
+
+        /**
+         * Constructs the MapModel with a source model and map functions.
+         * @template T item type of source model that is mapped to U.
+         * @template U the type of the mapped items.
+         * @param sourceModel the wrapped model.
+         * @param mapFunction maps the data from T to U.
+         */
+        constructor(
+            sourceModel: Model<T>,
+            mapFunction: (data: T) => U
+        ) {
+            super();
+            this.sourceModel = sourceModel;
+            this.#mapFunction = mapFunction;
+        }
 
-    /**
-     * Returns the number of entries in the model.
-     */
-    rowCount(): number {
-        return this.sourceModel.rowCount();
-    }
+        /**
+         * Returns the number of entries in the model.
+         */
+        rowCount(): number {
+            return this.sourceModel.rowCount();
+        }
 
-    /**
-     * Returns the data at the specified row.
-     * @param row index in range 0..(rowCount() - 1).
-     * @returns undefined if row is out of range otherwise the data.
-     */
-    rowData(row: number): U | undefined {
-        let data = this.sourceModel.rowData(row);
-        if (data === undefined) {
-            return undefined;
+        /**
+         * Returns the data at the specified row.
+         * @param row index in range 0..(rowCount() - 1).
+         * @returns undefined if row is out of range otherwise the data.
+         */
+        rowData(row: number): U | undefined {
+            let data = this.sourceModel.rowData(row);
+            if (data === undefined) {
+                return undefined;
+            }
+            return this.#mapFunction(data);
         }
-        return this.#mapFunction(data);
     }
 }
-}
 /**
  * This interface describes the public API of a Slint component that is common to all instances. Use this to
  * show() the window on the screen, access the window and subsequent window properties, or start the
@@ -681,7 +681,7 @@ type LoadData = {
 }
 
 function loadSlint(loadData: LoadData): Object {
-    const {filePath ,options} = loadData.fileData
+    const { filePath, options } = loadData.fileData
 
     let compiler = new napi.ComponentCompiler();
 
@@ -697,8 +697,7 @@ function loadSlint(loadData: LoadData): Object {
         }
     }
 
-    let definition = loadData.from === 'file' ? compiler.buildFromPath(filePath) : compiler.buildFromSource(loadData.fileData.source, filePath);
-
+    let definitions = loadData.from === 'file' ? compiler.buildFromPath(filePath) : compiler.buildFromSource(loadData.fileData.source, filePath);
     let diagnostics = compiler.diagnostics;
 
     if (diagnostics.length > 0) {
@@ -721,168 +720,171 @@ function loadSlint(loadData: LoadData): Object {
 
     let slint_module = Object.create({});
 
-    Object.defineProperty(slint_module, definition!.name.replace(/-/g, "_"), {
-        value: function (properties: any) {
-            let instance = definition!.create();
+    Object.keys(definitions).forEach((key) => {
+        let definition = definitions[key];
 
-            if (instance == null) {
-                throw Error(
-                    "Could not create a component handle for" + filePath
-                );
-            }
-
-            for (var key in properties) {
-                let value = properties[key];
+        Object.defineProperty(slint_module, definition.name.replace(/-/g, "_"), {
+            value: function (properties: any) {
+                let instance = definition.create();
 
-                if (value instanceof Function) {
-                    instance.setCallback(key, value);
-                } else {
-                    instance.setProperty(key, properties[key]);
+                if (instance == null) {
+                    throw Error(
+                        "Could not create a component handle for" + filePath
+                    );
                 }
-            }
 
-            let componentHandle = new Component(instance!);
-            instance!.definition().properties.forEach((prop) => {
-                let propName = prop.name.replace(/-/g, "_");
-
-                if (componentHandle[propName] !== undefined) {
-                    console.warn("Duplicated property name " + propName);
-                } else {
-                    Object.defineProperty(componentHandle, propName, {
-                        get() {
-                            return instance!.getProperty(prop.name);
-                        },
-                        set(value) {
-                            instance!.setProperty(prop.name, value);
-                        },
-                        enumerable: true,
-                    });
-                }
-            });
+                for (var key in properties) {
+                    let value = properties[key];
 
-            instance!.definition().callbacks.forEach((cb) => {
-                let callbackName = cb.replace(/-/g, "_");
-
-                if (componentHandle[callbackName] !== undefined) {
-                    console.warn("Duplicated callback name " + callbackName);
-                } else {
-                    Object.defineProperty(componentHandle, cb.replace(/-/g, "_"), {
-                        get() {
-                            return function () {
-                                return instance!.invoke(cb, Array.from(arguments));
-                            };
-                        },
-                        set(callback) {
-                            instance!.setCallback(cb, callback);
-                        },
-                        enumerable: true,
-                    });
+                    if (value instanceof Function) {
+                        instance.setCallback(key, value);
+                    } else {
+                        instance.setProperty(key, properties[key]);
+                    }
                 }
-            });
-
-            instance!.definition().functions.forEach((cb) => {
-                let functionName = cb.replace(/-/g, "_");
-
-                if (componentHandle[functionName] !== undefined) {
-                    console.warn("Duplicated function name " + functionName);
-                } else {
-                    Object.defineProperty(componentHandle, cb.replace(/-/g, "_"), {
-                        get() {
-                            return function () {
-                                return instance!.invoke(cb, Array.from(arguments));
-                            };
-                        },
-                        enumerable: true,
-                    });
-                }
-            });
-
-            // globals
-            instance!.definition().globals.forEach((globalName) => {
-                if (componentHandle[globalName] !== undefined) {
-                    console.warn("Duplicated property name " + globalName);
-                } else {
-                    let globalObject = Object.create({});
-
-                    instance!.definition().globalProperties(globalName).forEach((prop) => {
-                        let propName = prop.name.replace(/-/g, "_");
-
-                        if (globalObject[propName] !== undefined) {
-                            console.warn("Duplicated property name " + propName + " on global " + global);
-                        } else {
-                            Object.defineProperty(globalObject, propName, {
-                                get() {
-                                    return instance!.getGlobalProperty(globalName, prop.name);
-                                },
-                                set(value) {
-                                    instance!.setGlobalProperty(globalName, prop.name, value);
-                                },
-                                enumerable: true,
-                            });
-                        }
-                    });
-
-                    instance!.definition().globalCallbacks(globalName).forEach((cb) => {
-                        let callbackName = cb.replace(/-/g, "_");
-
-                        if (globalObject[callbackName] !== undefined) {
-                            console.warn("Duplicated property name " + cb + " on global " + global);
-                        } else {
-                            Object.defineProperty(globalObject, cb.replace(/-/g, "_"), {
-                                get() {
-                                    return function () {
-                                        return instance!.invokeGlobal(globalName, cb, Array.from(arguments));
-                                    };
-                                },
-                                set(callback) {
-                                    instance!.setGlobalCallback(globalName, cb, callback);
-                                },
-                                enumerable: true,
-                            });
-                        }
-                    });
-
-                    instance!.definition().globalFunctions(globalName).forEach((cb) => {
-                        let functionName = cb.replace(/-/g, "_");
-
-                        if (globalObject[functionName] !== undefined) {
-                            console.warn("Duplicated function name " + cb + " on global " + global);
-                        } else {
-                            Object.defineProperty(globalObject, cb.replace(/-/g, "_"), {
-                                get() {
-                                    return function () {
-                                        return instance!.invokeGlobal(globalName, cb, Array.from(arguments));
-                                    };
-                                },
-                                enumerable: true,
-                            });
-                        }
-                    });
-
-                    Object.defineProperty(componentHandle, globalName, {
-                        get() {
-                            return globalObject;
-                        },
-                        enumerable: true,
-                    });
-                }
-            });
 
-            return Object.seal(componentHandle);
-        },
+                let componentHandle = new Component(instance!);
+                instance!.definition().properties.forEach((prop) => {
+                    let propName = prop.name.replace(/-/g, "_");
+
+                    if (componentHandle[propName] !== undefined) {
+                        console.warn("Duplicated property name " + propName);
+                    } else {
+                        Object.defineProperty(componentHandle, propName, {
+                            get() {
+                                return instance!.getProperty(prop.name);
+                            },
+                            set(value) {
+                                instance!.setProperty(prop.name, value);
+                            },
+                            enumerable: true,
+                        });
+                    }
+                });
+
+                instance!.definition().callbacks.forEach((cb) => {
+                    let callbackName = cb.replace(/-/g, "_");
+
+                    if (componentHandle[callbackName] !== undefined) {
+                        console.warn("Duplicated callback name " + callbackName);
+                    } else {
+                        Object.defineProperty(componentHandle, cb.replace(/-/g, "_"), {
+                            get() {
+                                return function () {
+                                    return instance!.invoke(cb, Array.from(arguments));
+                                };
+                            },
+                            set(callback) {
+                                instance!.setCallback(cb, callback);
+                            },
+                            enumerable: true,
+                        });
+                    }
+                });
+
+                instance!.definition().functions.forEach((cb) => {
+                    let functionName = cb.replace(/-/g, "_");
+
+                    if (componentHandle[functionName] !== undefined) {
+                        console.warn("Duplicated function name " + functionName);
+                    } else {
+                        Object.defineProperty(componentHandle, cb.replace(/-/g, "_"), {
+                            get() {
+                                return function () {
+                                    return instance!.invoke(cb, Array.from(arguments));
+                                };
+                            },
+                            enumerable: true,
+                        });
+                    }
+                });
+
+                // globals
+                instance!.definition().globals.forEach((globalName) => {
+                    if (componentHandle[globalName] !== undefined) {
+                        console.warn("Duplicated property name " + globalName);
+                    } else {
+                        let globalObject = Object.create({});
+
+                        instance!.definition().globalProperties(globalName).forEach((prop) => {
+                            let propName = prop.name.replace(/-/g, "_");
+
+                            if (globalObject[propName] !== undefined) {
+                                console.warn("Duplicated property name " + propName + " on global " + global);
+                            } else {
+                                Object.defineProperty(globalObject, propName, {
+                                    get() {
+                                        return instance!.getGlobalProperty(globalName, prop.name);
+                                    },
+                                    set(value) {
+                                        instance!.setGlobalProperty(globalName, prop.name, value);
+                                    },
+                                    enumerable: true,
+                                });
+                            }
+                        });
+
+                        instance!.definition().globalCallbacks(globalName).forEach((cb) => {
+                            let callbackName = cb.replace(/-/g, "_");
+
+                            if (globalObject[callbackName] !== undefined) {
+                                console.warn("Duplicated property name " + cb + " on global " + global);
+                            } else {
+                                Object.defineProperty(globalObject, cb.replace(/-/g, "_"), {
+                                    get() {
+                                        return function () {
+                                            return instance!.invokeGlobal(globalName, cb, Array.from(arguments));
+                                        };
+                                    },
+                                    set(callback) {
+                                        instance!.setGlobalCallback(globalName, cb, callback);
+                                    },
+                                    enumerable: true,
+                                });
+                            }
+                        });
+
+                        instance!.definition().globalFunctions(globalName).forEach((cb) => {
+                            let functionName = cb.replace(/-/g, "_");
+
+                            if (globalObject[functionName] !== undefined) {
+                                console.warn("Duplicated function name " + cb + " on global " + global);
+                            } else {
+                                Object.defineProperty(globalObject, cb.replace(/-/g, "_"), {
+                                    get() {
+                                        return function () {
+                                            return instance!.invokeGlobal(globalName, cb, Array.from(arguments));
+                                        };
+                                    },
+                                    enumerable: true,
+                                });
+                            }
+                        });
+
+                        Object.defineProperty(componentHandle, globalName, {
+                            get() {
+                                return globalObject;
+                            },
+                            enumerable: true,
+                        });
+                    }
+                });
+
+                return Object.seal(componentHandle);
+            },
+        });
     });
-
     return Object.seal(slint_module);
 }
 
 /**
- * Loads the given Slint file and returns an objects that contains a functions to construct the exported
- * component of the slint file.
+ * Loads the specified Slint file and returns an object containing functions to construct the exported
+ * components defined within the Slint file.
  *
  * The following example loads a "Hello World" style Slint file and changes the Text label to a new greeting:
- * `main.slint`:
+ * **`main.slint`**:
  * ```
- * export component Main {
+ * export component Main inherits Window {
  *     in-out property <string> greeting <=> label.text;
  *     label := Text {
  *         text: "Hello World";
@@ -890,34 +892,33 @@ function loadSlint(loadData: LoadData): Object {
  * }
  * ```
  *
- * ```js
+ * **`index.js`**:
+ * ```javascript
  * import * as slint from "slint-ui";
  * let ui = slint.loadFile("main.slint");
  * let main = new ui.Main();
  * main.greeting = "Hello friends";
  * ```
  *
- * @param filePath A path to the file to load. If the path is a relative path, then it is resolved
- *                 against the process' working directory.
- * @param options Use {@link LoadFileOptions} to configure additional Slint compilation aspects,
+ * @param filePath The path to the file to load. Relative paths are resolved against the process' current working directory.
+ * @param options An optional {@link LoadFileOptions} to configure additional Slint compilation settings,
  *                such as include search paths, library imports, or the widget style.
- * @returns The returned object is sealed and provides a property by the name of the component exported
- *          in the `.slint` file. In the above example the name of the property is `Main`. The property
- *          is a constructor function. Use it with the new operator to instantiate the component.
- *          The instantiated object exposes properties and callbacks, and implements the {@link ComponentHandle} interface.
- *          For more details about the exposed properties, see [Instantiating A Component](../index.html#md:instantiating-a-component).
+ * @returns Returns an object that is immutable and provides a constructor function for each exported Window component found in the `.slint` file.
+ *          For instance, in the example above, a `Main` property is available, which can be used to create instances of the `Main` component using the `new` keyword.
+ *          These instances offer properties and event handlers, adhering to the {@link ComponentHandle} interface.
+ *          For further information on the available properties, refer to [Instantiating A Component](../index.html#md:instantiating-a-component).
  * @throws {@link CompileError} if errors occur during compilation.
  */
 export function loadFile(filePath: string, options?: LoadFileOptions): Object {
     return loadSlint({
-        fileData:{ filePath, options },
-        from:'file',
+        fileData: { filePath, options },
+        from: 'file',
     })
 }
 
 /**
- * Loads the given Slint source code and returns an object that contains a function to construct the exported
- * component of the Slint source code.
+ * Loads the given Slint source code and returns an object that contains a functions to construct the exported
+ * components of the Slint source code.
  *
  * The following example loads a "Hello World" style Slint source code and changes the Text label to a new greeting:
  * ```js
@@ -933,21 +934,20 @@ export function loadFile(filePath: string, options?: LoadFileOptions): Object {
  * main.greeting = "Hello friends";
  * ```
  * @param source The Slint source code to load.
- * @param filePath A path to the file to show log. If the path is a relative path, then it is resolved
- *                 against the process' working directory.
- * @param options Use {@link LoadFileOptions} to configure additional Slint compilation aspects,
+ * @param filePath A path to the file to show log and resolve relative import and images.
+ *                 Relative paths are resolved against the process' current working directory.
+ * @param options An optional {@link LoadFileOptions} to configure additional Slint compilation settings,
  *                such as include search paths, library imports, or the widget style.
- * @returns The returned object is sealed and provides a property by the name of the component exported
- *          in the `.slint` file. In the above example the name of the property is `Main`. The property
- *          is a constructor function. Use it with the new operator to instantiate the component.
- *          The instantiated object exposes properties and callbacks, and implements the {@link ComponentHandle} interface.
- *          For more details about the exposed properties, see [Instantiating A Component](../index.html#md:instantiating-a-component).
+ * @returns Returns an object that is immutable and provides a constructor function for each exported Window component found in the `.slint` file.
+ *          For instance, in the example above, a `Main` property is available, which can be used to create instances of the `Main` component using the `new` keyword.
+ *          These instances offer properties and event handlers, adhering to the {@link ComponentHandle} interface.
+ *          For further information on the available properties, refer to [Instantiating A Component](../index.html#md:instantiating-a-component).
  * @throws {@link CompileError} if errors occur during compilation.
  */
 export function loadSource(source: string, filePath: string, options?: LoadFileOptions): Object {
     return loadSlint({
-        fileData:{ filePath, options, source },
-        from:'source',
+        fileData: { filePath, options, source },
+        from: 'source',
     })
 }
 
@@ -1021,7 +1021,7 @@ var globalEventLoop: EventLoop = new EventLoop;
  * application is idle, it continues to consume a low amount of CPU cycles, checking if either
  * event loop has any pending events.
  */
-export function runEventLoop(args?: Function | { runningCallback?: Function; quitOnLastWindowClosed? : boolean }): Promise<unknown>{
+export function runEventLoop(args?: Function | { runningCallback?: Function; quitOnLastWindowClosed?: boolean }): Promise<unknown> {
     if (args === undefined) {
         return globalEventLoop.start(undefined);
     }