slint-ui 1.9.0-nightly.2024101004 → 1.9.0-nightly.2024101112

package/Cargo.toml

@@ -41,10 +41,10 @@ accessibility = ["slint-interpreter/accessibility"]
 [dependencies]
 napi = { version = "2.14.0", default-features = false, features = ["napi8"] }
 napi-derive = "2.14.0"
-i-slint-compiler = { features = ["default"] , git = "https://github.com/slint-ui/slint", rev = "499a522f993e107a1c1195b1119aa04d2fb17a6c", version = "=1.9.0", default-features = false }
-i-slint-core = { features = ["default"] , git = "https://github.com/slint-ui/slint", rev = "499a522f993e107a1c1195b1119aa04d2fb17a6c", version = "=1.9.0", default-features = false }
-i-slint-backend-selector = { git = "https://github.com/slint-ui/slint", rev = "499a522f993e107a1c1195b1119aa04d2fb17a6c", version = "=1.9.0", default-features = false }
-slint-interpreter = { default-features = false , features = ["display-diagnostics", "internal", "compat-1-2"] , git = "https://github.com/slint-ui/slint", rev = "499a522f993e107a1c1195b1119aa04d2fb17a6c", version = "=1.9.0"}
+i-slint-compiler = { features = ["default"] , git = "https://github.com/slint-ui/slint", rev = "f8f1d468a0aba1b11e7f9fb71739e46a178d4415", version = "=1.9.0", default-features = false }
+i-slint-core = { features = ["default", "gettext-rs"] , git = "https://github.com/slint-ui/slint", rev = "f8f1d468a0aba1b11e7f9fb71739e46a178d4415", version = "=1.9.0", default-features = false }
+i-slint-backend-selector = { git = "https://github.com/slint-ui/slint", rev = "f8f1d468a0aba1b11e7f9fb71739e46a178d4415", version = "=1.9.0", default-features = false }
+slint-interpreter = { default-features = false , features = ["display-diagnostics", "internal", "compat-1-2"] , git = "https://github.com/slint-ui/slint", rev = "f8f1d468a0aba1b11e7f9fb71739e46a178d4415", version = "=1.9.0"}
 spin_on = { version = "0.1" }
 css-color-parser2 = { version = "1.0.1" }
 itertools = { version = "0.13" }

package/README.md

@@ -57,7 +57,7 @@ Combining these two steps leads us to the obligatory "Hello World" example:
 
 ```js
 import * as slint from "slint-ui";
-let ui = slint.loadFile(".ui/main.slint");
+let ui = slint.loadFile(new URL(".ui/main.slint", import.meta.url));
 let main = new ui.Main();
 main.run();
 ```
@@ -94,7 +94,7 @@ an object which allow to initialize the value of public properties or callbacks.
 import * as slint from "slint-ui";
 // In this example, the main.slint file exports a module which
 // has a counter property and a clicked callback
-let ui = slint.loadFile("ui/main.slint");
+let ui = slint.loadFile(new URL("ui/main.slint", import.meta.url));
 let component = new ui.MainWindow({
     counter: 42,
     clicked: function() { console.log("hello"); }
@@ -135,7 +135,7 @@ The callbacks in Slint are exposed as properties in JavaScript and that can be c
 ```js
 import * as slint from "slint-ui";
 
-let ui = slint.loadFile("ui/my-component.slint");
+let ui = slint.loadFile(new URL("ui/my-component.slint", import.meta.url));
 let component = new ui.MyComponent();
 
 // connect to a callback
@@ -168,7 +168,7 @@ If the function is marked `public`, it can also be called from JavaScript.
 ```js
 import * as slint from "slint-ui";
 
-let ui = slint.loadFile("ui/my-component.slint");
+let ui = slint.loadFile(new URL("ui/my-component.slint", import.meta.url));
 let component = new ui.MyComponent();
 
 // call a public function
@@ -297,7 +297,7 @@ export component MyComponent inherits Window {
 
 import * as slint from "slint-ui";
 
-let ui = slint.loadFile("my-component.slint");
+let ui = slint.loadFile(new URL("my-component.slint", import.meta.url));
 let component = new ui.MyComponent();
 
 // object literal
@@ -333,7 +333,7 @@ export component MyComponent inherits Window {
 
 import * as slint from "slint-ui";
 
-let ui = slint.loadFile("my-component.slint");
+let ui = slint.loadFile(new URL("my-component.slint", import.meta.url));
 let component = new ui.MyComponent();
 
 // set enum value as string

package/cover.md

@@ -66,9 +66,9 @@ This file declares the user interface.
 
 4. Create a new file called `index.mjs` with the following contents:
 
-```
+```js
 import * as slint from "slint-ui";
-let ui = slint.loadFile("main.slint");
+let ui = slint.loadFile(new URL("main.slint", import.meta.url));
 let demo = new ui.Demo();
 
 await demo.run();
@@ -124,9 +124,9 @@ This file declares the user interface.
 
 3. Create a new file called `index.ts` with the following contents:
 
-```
+```ts
 import * as slint from "slint-ui";
-let ui = slint.loadFile("main.slint");
+let ui = slint.loadFile(new URL("main.slint", import.meta.url));
 let demo = new ui.Demo();
 
 await demo.run();
@@ -142,6 +142,54 @@ This is your main JavaScript entry point:
 
 1. Run the example with `deno run --allow-read --allow-ffi --allow-sys index.ts`
 
+
+## Getting Started (bun)
+
+1. In a new directory, create a new `bun` project by calling [`bun init`](https://bun.sh/docs/cli/init).
+2. Install Slint for your project using [`bun install slint-ui`](https://bun.sh/docs/cli/install).
+3. Create a new file called `main.slint` with the following contents:
+
+```
+import { AboutSlint, Button, VerticalBox } from "std-widgets.slint";
+export component Demo inherits Window {
+    in-out property <string> greeting <=> label.text;
+    VerticalBox {
+        alignment: start;
+        label := Text {
+            text: "Hello World!";
+            font-size: 24px;
+            horizontal-alignment: center;
+        }
+        AboutSlint {
+            preferred-height: 150px;
+        }
+        HorizontalLayout { alignment: center; Button { text: "OK!"; } }
+    }
+}
+```
+
+This file declares the user interface.
+
+4. Clear the conent of`index.ts` and add the following code:
+
+```ts
+import * as slint from "slint-ui";
+let ui = slint.loadFile(new URL("main.slint", import.meta.url)) as any;
+let demo = new ui.Demo();
+
+await demo.run();
+```
+
+This is your main TypeScript entry point:
+
+* Import the Slint API as an [ECMAScript module](https://nodejs.org/api/esm.html#modules-ecmascript-modules) module. 
+* Invoke `loadFile()` to compile and load the `.slint` file.
+* Instantiate the `Demo` component declared in `main.slint`.
+* Run it by showing it on the screen and reacting to user input.
+
+5. Run the example with `bun run index.ts`
+
+
 ## API Overview
 
 ### Instantiating a Component
@@ -176,7 +224,7 @@ an object which allow to initialize the value of public properties or callbacks.
 import * as slint from "slint-ui";
 // In this example, the main.slint file exports a module which
 // has a counter property and a clicked callback
-let ui = slint.loadFile("ui/main.slint");
+let ui = slint.loadFile(new URL("ui/main.slint", import.meta.url));
 let component = new ui.MainWindow({
     counter: 42,
     clicked: function() { console.log("hello"); }
@@ -194,7 +242,7 @@ export component MainWindow {
 }
 
 ```js
-let ui = slint.loadFile("main.slint");
+let ui = slint.loadFile(new URL("main.slint", import.meta.url));
 let instance = new ui.MainWindow();
 console.log(instance.age); // Prints 42
 instance.name = "Joe";
@@ -223,7 +271,7 @@ export component MyComponent inherits Window {
 ```js
 import * as slint from "slint-ui";
 
-let ui = slint.loadFile("ui/my-component.slint");
+let ui = slint.loadFile(new URL("ui/my-component.slint", import.meta.url));
 let component = new ui.MyComponent();
 
 // connect to a callback
@@ -271,6 +319,75 @@ component.model = component.model.concat(4);
 
 Another option is to set an object that implements the {@link Model} interface.
 
+### structs
+
+An exported struct can be created either by defing of an object literal or by using the new keyword.
+
+**`my-component.slint`**
+
+```
+export struct Person {
+    name: string,
+    age: int
+}
+
+export component MyComponent inherits Window {
+    in-out property <Person> person;
+}
+```
+
+**`main.js`**
+
+```js
+
+import * as slint from "slint-ui";
+
+let ui = slint.loadFile(new URL("my-component.slint", import.meta.url));
+let component = new ui.MyComponent();
+
+// object literal
+component.person = { name: "Peter", age: 22 };
+
+// new keyword (sets property values to default e.g. '' for string)
+component.person = new ui.Person();
+
+// new keyword with parameters
+component.person = new ui.Person({ name: "Tim", age: 30 });
+```
+
+### enums
+
+A value of an exported enum can be set as string or by usign the value from the exported enum.
+
+**`my-component.slint`**
+
+```
+export enum Position {
+    top,
+    bottom
+}
+
+export component MyComponent inherits Window {
+    in-out property <Position> position;
+}
+```
+
+**`main.js`**
+
+```js
+
+import * as slint from "slint-ui";
+
+let ui = slint.loadFile(new URL("my-component.slint", import.meta.url));
+let component = new ui.MyComponent();
+
+// set enum value as string
+component.position = "top";
+
+// use the value of the enum
+component.position = ui.Position.bottom;
+```
+
 ### Globals
 
 You can declare [globally available singletons](../slint/src/language/syntax/globals) in your
@@ -292,7 +409,7 @@ previous section, you can access `Logic` like this:
 ```js
 import * as slint from "slint-ui";
 
-let ui = slint.loadFile("ui/my-component.slint");
+let ui = slint.loadFile(new URL("ui/my-component.slint", import.meta.url));
 let component = new ui.MyComponent();
 
 component.Logic.to_upper_case = (str) => {
@@ -302,3 +419,4 @@ component.Logic.to_upper_case = (str) => {
 
 **Note**: Global singletons are instantiated once per component. When declaring multiple components for `export` to JavaScript,
 each instance will have their own instance of associated globals singletons.
+

package/dist/index.d.ts

@@ -194,7 +194,7 @@ export interface LoadFileOptions {
  * main.greeting = "Hello friends";
  * ```
  *
- * @param filePath The path to the file to load. Relative paths are resolved against the process' current working directory.
+ * @param filePath The path to the file to load as `string` or `URL`. 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 Returns an object that is immutable and provides a constructor function for each exported Window component found in the `.slint` file.
@@ -203,7 +203,7 @@ export interface LoadFileOptions {
  *          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 declare function loadFile(filePath: string, options?: LoadFileOptions): Object;
+export declare function loadFile(filePath: string | URL, options?: LoadFileOptions): Object;
 /**
  * Loads the given Slint source code and returns an object that contains a functions to construct the exported
  * components of the Slint source code.
@@ -404,6 +404,24 @@ export declare namespace private_api {
         rowData(row: number): U | undefined;
     }
 }
+/**
+ * Initialize translations.
+ *
+ * Call this with the path where translations are located. This function internally calls the [bindtextdomain](https://man7.org/linux/man-pages/man3/bindtextdomain.3.html) function from gettext.
+ *
+ * Translations are expected to be found at <path>/<locale>/LC_MESSAGES/<domain>.mo, where path is the directory passed as an argument to this function, locale is a locale name (e.g., en, en_GB, fr), and domain is the package name.
+ *
+ * @param domain defines the domain name e.g. name of the package.
+ * @param path specifies the directory as `string` or as `URL` in which gettext should search for translations.
+ *
+ * For example, assuming this is in a package called example and the default locale is configured to be French, it will load translations at runtime from ``/path/to/example/translations/fr/LC_MESSAGES/example.mo`.
+ *
+ * ```js
+ * import * as slint from "slint-ui";
+ * slint.initTranslations("example", new URL("translations/", import.meta.url));
+ * ````
+ */
+export declare function initTranslations(domain: string, path: string | URL): void;
 /**
  * @hidden
  */

package/dist/index.js

@@ -2,7 +2,7 @@
 // Copyright © SixtyFPS GmbH <info@slint.dev>
 // SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-2.0 OR LicenseRef-Slint-Software-3.0
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.private_api = exports.quitEventLoop = exports.runEventLoop = exports.loadSource = exports.loadFile = exports.CompileError = exports.ArrayModel = exports.Model = exports.Brush = exports.RgbaColor = exports.DiagnosticLevel = exports.Diagnostic = void 0;
+exports.initTranslations = exports.private_api = exports.quitEventLoop = exports.runEventLoop = exports.loadSource = exports.loadFile = exports.CompileError = exports.ArrayModel = exports.Model = exports.Brush = exports.RgbaColor = exports.DiagnosticLevel = exports.Diagnostic = void 0;
 const napi = require("../rust-module.cjs");
 var rust_module_cjs_1 = require("../rust-module.cjs");
 Object.defineProperty(exports, "Diagnostic", { enumerable: true, get: function () { return rust_module_cjs_1.Diagnostic; } });
@@ -319,7 +319,7 @@ function loadSlint(loadData) {
  * main.greeting = "Hello friends";
  * ```
  *
- * @param filePath The path to the file to load. Relative paths are resolved against the process' current working directory.
+ * @param filePath The path to the file to load as `string` or `URL`. 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 Returns an object that is immutable and provides a constructor function for each exported Window component found in the `.slint` file.
@@ -329,8 +329,9 @@ function loadSlint(loadData) {
  * @throws {@link CompileError} if errors occur during compilation.
  */
 function loadFile(filePath, options) {
+    const pathname = filePath instanceof URL ? filePath.pathname : filePath;
     return loadSlint({
-        fileData: { filePath, options },
+        fileData: { filePath: pathname, options },
         from: "file",
     });
 }
@@ -603,6 +604,28 @@ var private_api;
     }
     private_api.MapModel = MapModel;
 })(private_api || (exports.private_api = private_api = {}));
+/**
+ * Initialize translations.
+ *
+ * Call this with the path where translations are located. This function internally calls the [bindtextdomain](https://man7.org/linux/man-pages/man3/bindtextdomain.3.html) function from gettext.
+ *
+ * Translations are expected to be found at <path>/<locale>/LC_MESSAGES/<domain>.mo, where path is the directory passed as an argument to this function, locale is a locale name (e.g., en, en_GB, fr), and domain is the package name.
+ *
+ * @param domain defines the domain name e.g. name of the package.
+ * @param path specifies the directory as `string` or as `URL` in which gettext should search for translations.
+ *
+ * For example, assuming this is in a package called example and the default locale is configured to be French, it will load translations at runtime from ``/path/to/example/translations/fr/LC_MESSAGES/example.mo`.
+ *
+ * ```js
+ * import * as slint from "slint-ui";
+ * slint.initTranslations("example", new URL("translations/", import.meta.url));
+ * ````
+ */
+function initTranslations(domain, path) {
+    const pathname = path instanceof URL ? path.pathname : path;
+    napi.initTranslations(domain, pathname);
+}
+exports.initTranslations = initTranslations;
 /**
  * @hidden
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slint-ui",
-  "version": "1.9.0-nightly.2024101004",
+  "version": "1.9.0-nightly.2024101112",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "homepage": "https://github.com/slint-ui/slint",
@@ -67,10 +67,10 @@
     "@napi-rs/cli": "2.16.5"
   },
   "optionalDependencies": {
-    "@slint-ui/slint-ui-binary-linux-x64-gnu": "1.9.0-nightly.2024101004",
-    "@slint-ui/slint-ui-binary-darwin-x64": "1.9.0-nightly.2024101004",
-    "@slint-ui/slint-ui-binary-darwin-arm64": "1.9.0-nightly.2024101004",
-    "@slint-ui/slint-ui-binary-win32-x64-msvc": "1.9.0-nightly.2024101004",
-    "@slint-ui/slint-ui-binary-win32-ia32-msvc": "1.9.0-nightly.2024101004"
+    "@slint-ui/slint-ui-binary-linux-x64-gnu": "1.9.0-nightly.2024101112",
+    "@slint-ui/slint-ui-binary-darwin-x64": "1.9.0-nightly.2024101112",
+    "@slint-ui/slint-ui-binary-darwin-arm64": "1.9.0-nightly.2024101112",
+    "@slint-ui/slint-ui-binary-win32-x64-msvc": "1.9.0-nightly.2024101112",
+    "@slint-ui/slint-ui-binary-win32-ia32-msvc": "1.9.0-nightly.2024101112"
   }
 }

package/rust/lib.rs

@@ -2,6 +2,8 @@
 // SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-2.0 OR LicenseRef-Slint-Software-3.0
 
 mod interpreter;
+use std::path::PathBuf;
+
 pub use interpreter::*;
 
 mod types;
@@ -86,6 +88,12 @@ pub fn init_testing() {
     i_slint_backend_testing::init_integration_test_with_mock_time();
 }
 
+#[napi]
+pub fn init_translations(domain: String, dir_name: String) -> napi::Result<()> {
+    i_slint_core::translations::gettext_bindtextdomain(domain.as_str(), PathBuf::from(dir_name))
+        .map_err(|e| napi::Error::from_reason(e.to_string()))
+}
+
 pub fn print_to_console(env: Env, function: &str, arguments: core::fmt::Arguments) {
     let Ok(global) = env.get_global() else {
         eprintln!("Unable to obtain global object");

package/rust-module.cjs

@@ -252,7 +252,7 @@ if (!nativeBinding) {
   throw new Error(`Failed to load native binding`)
 }
 
-const { DiagnosticLevel, ComponentCompiler, ComponentDefinition, ComponentInstance, ValueType, Property, Window, SlintRgbaColor, SlintBrush, SlintImageData, SharedModelNotify, jsModelNotifyNew, jsModelNotifyRowDataChanged, jsModelNotifyRowAdded, jsModelNotifyRowRemoved, jsModelNotifyReset, ReadOnlyRustModel, ModelIterator, SlintPoint, SlintSize, mockElapsedTime, getMockedTime, ProcessEventsResult, processEvents, invokeFromEventLoop, setQuitOnLastWindowClosed, initTesting } = nativeBinding
+const { DiagnosticLevel, ComponentCompiler, ComponentDefinition, ComponentInstance, ValueType, Property, Window, SlintRgbaColor, SlintBrush, SlintImageData, SharedModelNotify, jsModelNotifyNew, jsModelNotifyRowDataChanged, jsModelNotifyRowAdded, jsModelNotifyRowRemoved, jsModelNotifyReset, ReadOnlyRustModel, ModelIterator, SlintPoint, SlintSize, mockElapsedTime, getMockedTime, ProcessEventsResult, processEvents, invokeFromEventLoop, setQuitOnLastWindowClosed, initTesting, initTranslations } = nativeBinding
 
 module.exports.DiagnosticLevel = DiagnosticLevel
 module.exports.ComponentCompiler = ComponentCompiler
@@ -281,3 +281,4 @@ module.exports.processEvents = processEvents
 module.exports.invokeFromEventLoop = invokeFromEventLoop
 module.exports.setQuitOnLastWindowClosed = setQuitOnLastWindowClosed
 module.exports.initTesting = initTesting
+module.exports.initTranslations = initTranslations

package/rust-module.d.ts

@@ -83,6 +83,7 @@ export declare function processEvents(): ProcessEventsResult
 export declare function invokeFromEventLoop(callback: (...args: any[]) => any): void
 export declare function setQuitOnLastWindowClosed(quitOnLastWindowClosed: boolean): void
 export declare function initTesting(): void
+export declare function initTranslations(domain: string, dirName: string): void
 export type JsComponentCompiler = ComponentCompiler
 /**
  * ComponentCompiler is the entry point to the Slint interpreter that can be used

package/typescript/index.ts

@@ -605,7 +605,7 @@ function loadSlint(loadData: LoadData): Object {
  * main.greeting = "Hello friends";
  * ```
  *
- * @param filePath The path to the file to load. Relative paths are resolved against the process' current working directory.
+ * @param filePath The path to the file to load as `string` or `URL`. 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 Returns an object that is immutable and provides a constructor function for each exported Window component found in the `.slint` file.
@@ -614,9 +614,13 @@ function loadSlint(loadData: LoadData): Object {
  *          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 {
+export function loadFile(
+    filePath: string | URL,
+    options?: LoadFileOptions,
+): Object {
+    const pathname = filePath instanceof URL ? filePath.pathname : filePath;
     return loadSlint({
-        fileData: { filePath, options },
+        fileData: { filePath: pathname, options },
         from: "file",
     });
 }
@@ -918,6 +922,28 @@ export namespace private_api {
     }
 }
 
+/**
+ * Initialize translations.
+ *
+ * Call this with the path where translations are located. This function internally calls the [bindtextdomain](https://man7.org/linux/man-pages/man3/bindtextdomain.3.html) function from gettext.
+ *
+ * Translations are expected to be found at <path>/<locale>/LC_MESSAGES/<domain>.mo, where path is the directory passed as an argument to this function, locale is a locale name (e.g., en, en_GB, fr), and domain is the package name.
+ *
+ * @param domain defines the domain name e.g. name of the package.
+ * @param path specifies the directory as `string` or as `URL` in which gettext should search for translations.
+ *
+ * For example, assuming this is in a package called example and the default locale is configured to be French, it will load translations at runtime from ``/path/to/example/translations/fr/LC_MESSAGES/example.mo`.
+ *
+ * ```js
+ * import * as slint from "slint-ui";
+ * slint.initTranslations("example", new URL("translations/", import.meta.url));
+ * ````
+ */
+export function initTranslations(domain: string, path: string | URL) {
+    const pathname = path instanceof URL ? path.pathname : path;
+    napi.initTranslations(domain, pathname);
+}
+
 /**
  * @hidden
  */