node: added url support to loadFile (#6507)

api/node/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

api/node/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",
     });
 }

biome.json

@@ -18,9 +18,7 @@
     "organizeImports": { "enabled": false },
     "linter": {
         "enabled": true,
-        "ignore": [
+        "ignore": ["api/node/docs/assets/**"],
-            "api/node/docs/assets/**"
-        ],
         "rules": {
             "recommended": false,
             "complexity": {

docs/reference/src/quickstart/creating_the_tiles.md

@@ -31,7 +31,7 @@ in a [`slint::VectorModel`](https://slint.dev/docs/cpp/api/classslint_1_1vectorm
 Change `main.js` to the following:
 
 :::{literalinclude} main_tiles_from_js.js
-:lines: 6-21
+:lines: 6-23
 :::
 
 The code takes the list of tiles, duplicates it, and shuffles it, accessing the `memory_tiles` property through the JavaScript code.

docs/reference/src/quickstart/game_logic.md

@@ -83,7 +83,7 @@ a player can't click anything during this time.
 Insert this code before the `mainWindow.run()` call:
 
 :::{literalinclude} main_game_logic.js
-:lines: 23-63
+:lines: 24-57
 :::
 
 ::::

docs/reference/src/quickstart/main_game_logic.js

@@ -1,48 +1,43 @@
 // Copyright © SixtyFPS GmbH <info@slint.dev>
 // SPDX-License-Identifier: MIT
 
-
 // main.js
 import * as slint from "slint-ui";
 
-let ui = slint.loadFile("./memory.slint");
+const ui = slint.loadFile(new URL("./memory.slint", import.meta.url));
-let mainWindow = new ui.MainWindow();
+const mainWindow = new ui.MainWindow();
 
-let initial_tiles = mainWindow.memory_tiles;
+const initial_tiles = mainWindow.memory_tiles;
-let tiles = initial_tiles.concat(initial_tiles.map((tile) => Object.assign({}, tile)));
+const tiles = initial_tiles.concat(
+    initial_tiles.map((tile) => Object.assign({}, tile)),
+);
 
 for (let i = tiles.length - 1; i > 0; i--) {
     const j = Math.floor(Math.random() * i);
     [tiles[i], tiles[j]] = [tiles[j], tiles[i]];
 }
 
-let model = new slint.ArrayModel(tiles);
+const model = new slint.ArrayModel(tiles);
 mainWindow.memory_tiles = model;
 
 // ANCHOR: game_logic
 mainWindow.check_if_pair_solved = function () {
-    let flipped_tiles = [];
+    const flipped_tiles = [];
     tiles.forEach((tile, index) => {
         if (tile.image_visible && !tile.solved) {
             flipped_tiles.push({
                 index,
-                tile
+                tile,
             });
         }
     });
 
-    if (flipped_tiles.length == 2) {
+    if (flipped_tiles.length === 2) {
-        let {
+        const { tile: tile1, index: tile1_index } = flipped_tiles[0];
-            tile: tile1,
-            index: tile1_index
-        } = flipped_tiles[0];
 
-        let {
+        const { tile: tile2, index: tile2_index } = flipped_tiles[1];
-            tile: tile2,
-            index: tile2_index
-        } = flipped_tiles[1];
 
-        let is_pair_solved = tile1.image.path === tile2.image.path;
+        const is_pair_solved = tile1.image.path === tile2.image.path;
         if (is_pair_solved) {
             tile1.solved = true;
             model.setRowData(tile1_index, tile1);
@@ -56,8 +51,7 @@ mainWindow.check_if_pair_solved = function () {
                 model.setRowData(tile1_index, tile1);
                 tile2.image_visible = false;
                 model.setRowData(tile2_index, tile2);
-            }, 1000)
+            }, 1000);
-
         }
     }
 };

docs/reference/src/quickstart/main_initial.js

@@ -5,8 +5,8 @@
 // main.js
 import * as slint from "slint-ui";
 
-let ui = slint.loadFile("./ui/app-window.slint");
+const ui = slint.loadFile(new URL("./ui/app-window.slint", import.meta.url));
-let mainWindow = new ui.MainWindow();
+const mainWindow = new ui.MainWindow();
 await mainWindow.run();
 
 // ANCHOR_END: main

docs/reference/src/quickstart/main_tiles_from_js.js

@@ -4,18 +4,20 @@
 // ANCHOR: main
 // main.js
 import * as slint from "slint-ui";
-let ui = slint.loadFile("./ui/app-window.slint");
+const ui = slint.loadFile(new URL("./ui/app-window.slint", import.meta.url));
-let mainWindow = new ui.MainWindow();
+const mainWindow = new ui.MainWindow();
 
-let initial_tiles = mainWindow.memory_tiles;
+const initial_tiles = mainWindow.memory_tiles;
-let tiles = initial_tiles.concat(initial_tiles.map((tile) => Object.assign({}, tile)));
+const tiles = initial_tiles.concat(
+    initial_tiles.map((tile) => Object.assign({}, tile)),
+);
 
 for (let i = tiles.length - 1; i > 0; i--) {
     const j = Math.floor(Math.random() * i);
     [tiles[i], tiles[j]] = [tiles[j], tiles[i]];
 }
 
-let model = new slint.ArrayModel(tiles);
+const model = new slint.ArrayModel(tiles);
 mainWindow.memory_tiles = model;
 
 await mainWindow.run();

examples/imagefilter/node/main.ts

@@ -11,7 +11,7 @@ class Filter {
 
     constructor(
         name: string,
-        applyFunction: (image: slint.ImageData) => slint.ImageData
+        applyFunction: (image: slint.ImageData) => slint.ImageData,
     ) {
         this.name = name;
         this.applyFunction = applyFunction;
@@ -44,10 +44,14 @@ class Filters extends slint.Model<string> {
     }
 }
 
-const demo = slint.loadFile("../ui/main.slint") as any;
+const demo = slint.loadFile(
+    new URL("../ui/main.slint", import.meta.url),
+) as any;
 const mainWindow = new demo.MainWindow();
 
-const sourceImage = await Jimp.read("../assets/cat.jpg");
+const sourceImage = await Jimp.read(
+    new URL("../assets/cat.jpg", import.meta.url).pathname,
+);
 
 mainWindow.original_image = sourceImage.bitmap;
 

examples/memory/main.js

@@ -4,43 +4,39 @@
 
 import * as slint from "slint-ui";
 
-let ui = slint.loadFile("memory.slint");
+const ui = slint.loadFile(new URL("memory.slint", import.meta.url));
-let window = new ui.MainWindow();
+const window = new ui.MainWindow();
 
-let initial_tiles = [...window.memory_tiles];
+const initial_tiles = [...window.memory_tiles];
-let tiles = initial_tiles.concat(initial_tiles.map((tile) => Object.assign({}, tile)));
+const tiles = initial_tiles.concat(
+    initial_tiles.map((tile) => Object.assign({}, tile)),
+);
 
 for (let i = tiles.length - 1; i > 0; i--) {
     const j = Math.floor(Math.random() * i);
     [tiles[i], tiles[j]] = [tiles[j], tiles[i]];
 }
 
-let model = new slint.ArrayModel(tiles);
+const model = new slint.ArrayModel(tiles);
 window.memory_tiles = model;
 
 window.check_if_pair_solved = function () {
-    let flipped_tiles = [];
+    const flipped_tiles = [];
     tiles.forEach((tile, index) => {
         if (tile.image_visible && !tile.solved) {
             flipped_tiles.push({
                 index,
-                tile
+                tile,
             });
         }
     });
 
-    if (flipped_tiles.length == 2) {
+    if (flipped_tiles.length === 2) {
-        let {
+        const { tile: tile1, index: tile1_index } = flipped_tiles[0];
-            tile: tile1,
-            index: tile1_index
-        } = flipped_tiles[0];
 
-        let {
+        const { tile: tile2, index: tile2_index } = flipped_tiles[1];
-            tile: tile2,
-            index: tile2_index
-        } = flipped_tiles[1];
 
-        let is_pair_solved = tile1.image.path === tile2.image.path;
+        const is_pair_solved = tile1.image.path === tile2.image.path;
         if (is_pair_solved) {
             tile1.solved = true;
             model.setRowData(tile1_index, tile1);
@@ -55,7 +51,6 @@ window.check_if_pair_solved = function () {
                 tile2.image_visible = false;
                 model.setRowData(tile2_index, tile2);
             }, 1000);
-
         }
     }
 };

examples/printerdemo/node/main.js

@@ -4,13 +4,16 @@
 
 import * as slint from "slint-ui";
 
-let demo = slint.loadFile("../ui/printerdemo.slint");
+const demo = slint.loadFile(
-let window = new demo.MainWindow();
+    new URL("../ui/printerdemo.slint", import.meta.url),
+);
+const window = new demo.MainWindow();
 
 window.ink_levels = [
-    { color: "#00ffff", level: 0.30 },
+    { color: "#00ffff", level: 0.3 },
-    { color: "#ff00ff", level: 0.80 },
+    { color: "#ff00ff", level: 0.8 },
-    { color: "#ffff00", level: 0.60 },
+    { color: "#ffff00", level: 0.6 },
-    { color: "#000000", level: 0.90 }];
+    { color: "#000000", level: 0.9 },
+];
 
 window.run();

examples/printerdemo_old/node/main.js

@@ -3,17 +3,23 @@
 // SPDX-License-Identifier: MIT
 
 import * as slint from "slint-ui";
-let demo = slint.loadFile("../ui/printerdemo.slint");
+const demo = slint.loadFile(
-let window = new demo.MainWindow();
+    new URL("../ui/printerdemo.slint", import.meta.url),
+);
+const window = new demo.MainWindow();
 
 window.ink_levels = [
-    { color: "#00ffff", level: 0.30 },
+    { color: "#00ffff", level: 0.3 },
-    { color: "#ff00ff", level: 0.80 },
+    { color: "#ff00ff", level: 0.8 },
-    { color: "#ffff00", level: 0.60 },
+    { color: "#ffff00", level: 0.6 },
-    { color: "#000000", level: 0.90 }];
+    { color: "#000000", level: 0.9 },
+];
 
 window.fax_number_erase = function () {
-    window.fax_number = window.fax_number.substring(0, window.fax_number.length - 1);
+    window.fax_number = window.fax_number.substring(
+        0,
+        window.fax_number.length - 1,
+    );
 };
 window.fax_send = function () {
     console.log("Send fax to " + window.fax_number);

examples/todo/node/main.js

@@ -4,47 +4,47 @@
 
 import * as slint from "slint-ui";
 
-let demo = slint.loadFile("../ui/todo.slint");
+const demo = slint.loadFile(new URL("../ui/todo.slint", import.meta.url));
-let app = new demo.MainWindow();
+const app = new demo.MainWindow();
 
-let model = new slint.ArrayModel([
+const model = new slint.ArrayModel([
     {
         title: "Implement the .slint file",
-        checked: true
+        checked: true,
     },
     {
         title: "Do the Rust part",
-        checked: false
+        checked: false,
     },
     {
         title: "Make the C++ code",
-        checked: false
+        checked: false,
     },
     {
         title: "Write some JavaScript code",
-        checked: true
+        checked: true,
     },
     {
         title: "Test the application",
-        checked: false
+        checked: false,
     },
     {
         title: "Ship to customer",
-        checked: false
+        checked: false,
     },
     {
         title: "???",
-        checked: false
+        checked: false,
     },
     {
         title: "Profit",
-        checked: false
+        checked: false,
     },
 ]);
 app.todo_model = model;
 
 app.todo_added = function (text) {
-    model.push({ title: text, checked: false })
+    model.push({ title: text, checked: false });
 };
 
 app.remove_done = function () {