mirror of
https://github.com/slint-ui/slint.git
synced 2025-08-04 18:58:36 +00:00
node: added url support to loadFile (#6507)
This commit is contained in:
parent
be2af11a08
commit
f01ac8fc39
13 changed files with 95 additions and 89 deletions
|
@ -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
|
||||
|
|
|
@ -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",
|
||||
});
|
||||
}
|
||||
|
|
|
@ -18,9 +18,7 @@
|
|||
"organizeImports": { "enabled": false },
|
||||
"linter": {
|
||||
"enabled": true,
|
||||
"ignore": [
|
||||
"api/node/docs/assets/**"
|
||||
],
|
||||
"ignore": ["api/node/docs/assets/**"],
|
||||
"rules": {
|
||||
"recommended": false,
|
||||
"complexity": {
|
||||
|
@ -34,7 +32,7 @@
|
|||
"useImportType": "error",
|
||||
"useNodejsImportProtocol": "error"
|
||||
},
|
||||
"suspicious": {
|
||||
"suspicious": {
|
||||
"noDoubleEquals": "error",
|
||||
"noRedundantUseStrict": "warn",
|
||||
"noImplicitAnyLet": "error"
|
||||
|
|
|
@ -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.
|
||||
|
|
|
@ -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
|
||||
:::
|
||||
|
||||
::::
|
||||
|
|
|
@ -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");
|
||||
let mainWindow = new ui.MainWindow();
|
||||
const ui = slint.loadFile(new URL("./memory.slint", import.meta.url));
|
||||
const mainWindow = new ui.MainWindow();
|
||||
|
||||
let initial_tiles = mainWindow.memory_tiles;
|
||||
let tiles = initial_tiles.concat(initial_tiles.map((tile) => Object.assign({}, tile)));
|
||||
const initial_tiles = mainWindow.memory_tiles;
|
||||
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) {
|
||||
let {
|
||||
tile: tile1,
|
||||
index: tile1_index
|
||||
} = flipped_tiles[0];
|
||||
if (flipped_tiles.length === 2) {
|
||||
const { tile: tile1, index: tile1_index } = flipped_tiles[0];
|
||||
|
||||
let {
|
||||
tile: tile2,
|
||||
index: tile2_index
|
||||
} = flipped_tiles[1];
|
||||
const { 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,10 +51,9 @@ mainWindow.check_if_pair_solved = function () {
|
|||
model.setRowData(tile1_index, tile1);
|
||||
tile2.image_visible = false;
|
||||
model.setRowData(tile2_index, tile2);
|
||||
}, 1000)
|
||||
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
};
|
||||
// ANCHOR_END: game_logic
|
||||
await mainWindow.run();
|
||||
await mainWindow.run();
|
||||
|
|
|
@ -5,8 +5,8 @@
|
|||
// main.js
|
||||
import * as slint from "slint-ui";
|
||||
|
||||
let ui = slint.loadFile("./ui/app-window.slint");
|
||||
let mainWindow = new ui.MainWindow();
|
||||
const ui = slint.loadFile(new URL("./ui/app-window.slint", import.meta.url));
|
||||
const mainWindow = new ui.MainWindow();
|
||||
await mainWindow.run();
|
||||
|
||||
// ANCHOR_END: main
|
||||
|
|
|
@ -4,18 +4,20 @@
|
|||
// ANCHOR: main
|
||||
// main.js
|
||||
import * as slint from "slint-ui";
|
||||
let ui = slint.loadFile("./ui/app-window.slint");
|
||||
let mainWindow = new ui.MainWindow();
|
||||
const ui = slint.loadFile(new URL("./ui/app-window.slint", import.meta.url));
|
||||
const mainWindow = new ui.MainWindow();
|
||||
|
||||
let initial_tiles = mainWindow.memory_tiles;
|
||||
let tiles = initial_tiles.concat(initial_tiles.map((tile) => Object.assign({}, tile)));
|
||||
const initial_tiles = mainWindow.memory_tiles;
|
||||
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();
|
||||
|
|
|
@ -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;
|
||||
|
||||
|
|
|
@ -4,43 +4,39 @@
|
|||
|
||||
import * as slint from "slint-ui";
|
||||
|
||||
let ui = slint.loadFile("memory.slint");
|
||||
let window = new ui.MainWindow();
|
||||
const ui = slint.loadFile(new URL("memory.slint", import.meta.url));
|
||||
const window = new ui.MainWindow();
|
||||
|
||||
let initial_tiles = [...window.memory_tiles];
|
||||
let tiles = initial_tiles.concat(initial_tiles.map((tile) => Object.assign({}, tile)));
|
||||
const initial_tiles = [...window.memory_tiles];
|
||||
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) {
|
||||
let {
|
||||
tile: tile1,
|
||||
index: tile1_index
|
||||
} = flipped_tiles[0];
|
||||
if (flipped_tiles.length === 2) {
|
||||
const { tile: tile1, index: tile1_index } = flipped_tiles[0];
|
||||
|
||||
let {
|
||||
tile: tile2,
|
||||
index: tile2_index
|
||||
} = flipped_tiles[1];
|
||||
const { 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);
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
@ -4,13 +4,16 @@
|
|||
|
||||
import * as slint from "slint-ui";
|
||||
|
||||
let demo = slint.loadFile("../ui/printerdemo.slint");
|
||||
let window = new demo.MainWindow();
|
||||
const demo = slint.loadFile(
|
||||
new URL("../ui/printerdemo.slint", import.meta.url),
|
||||
);
|
||||
const window = new demo.MainWindow();
|
||||
|
||||
window.ink_levels = [
|
||||
{ color: "#00ffff", level: 0.30 },
|
||||
{ color: "#ff00ff", level: 0.80 },
|
||||
{ color: "#ffff00", level: 0.60 },
|
||||
{ color: "#000000", level: 0.90 }];
|
||||
{ color: "#00ffff", level: 0.3 },
|
||||
{ color: "#ff00ff", level: 0.8 },
|
||||
{ color: "#ffff00", level: 0.6 },
|
||||
{ color: "#000000", level: 0.9 },
|
||||
];
|
||||
|
||||
window.run();
|
||||
|
|
|
@ -3,17 +3,23 @@
|
|||
// SPDX-License-Identifier: MIT
|
||||
|
||||
import * as slint from "slint-ui";
|
||||
let demo = slint.loadFile("../ui/printerdemo.slint");
|
||||
let window = new demo.MainWindow();
|
||||
const demo = slint.loadFile(
|
||||
new URL("../ui/printerdemo.slint", import.meta.url),
|
||||
);
|
||||
const window = new demo.MainWindow();
|
||||
|
||||
window.ink_levels = [
|
||||
{ color: "#00ffff", level: 0.30 },
|
||||
{ color: "#ff00ff", level: 0.80 },
|
||||
{ color: "#ffff00", level: 0.60 },
|
||||
{ color: "#000000", level: 0.90 }];
|
||||
{ color: "#00ffff", level: 0.3 },
|
||||
{ color: "#ff00ff", level: 0.8 },
|
||||
{ color: "#ffff00", level: 0.6 },
|
||||
{ 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);
|
||||
|
|
|
@ -4,47 +4,47 @@
|
|||
|
||||
import * as slint from "slint-ui";
|
||||
|
||||
let demo = slint.loadFile("../ui/todo.slint");
|
||||
let app = new demo.MainWindow();
|
||||
const demo = slint.loadFile(new URL("../ui/todo.slint", import.meta.url));
|
||||
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 () {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue