mirror of
				https://github.com/slint-ui/slint.git
				synced 2025-11-03 21:24:17 +00:00 
			
		
		
		
	Rename npm package to slint-ui and fix up docs
This commit is contained in:
		
							parent
							
								
									d2d6a5cc6a
								
							
						
					
					
						commit
						bd13fd2f27
					
				
					 10 changed files with 26 additions and 26 deletions
				
			
		| 
						 | 
					@ -1,29 +1,29 @@
 | 
				
			||||||
# SixtyFPS-node
 | 
					# Slint-node
 | 
				
			||||||
 | 
					
 | 
				
			||||||
[](https://www.npmjs.com/package/sixtyfps)
 | 
					[](https://www.npmjs.com/package/slint-ui)
 | 
				
			||||||
 | 
					
 | 
				
			||||||
[SixtyFPS](https://sixtyfps.io/) is a UI toolkit that supports different programming languages.
 | 
					[Slint](https://sixtyfps.io/) is a UI toolkit that supports different programming languages.
 | 
				
			||||||
SixtyFPS-node is the integration with node.
 | 
					Slint-node is the integration with node.
 | 
				
			||||||
 | 
					
 | 
				
			||||||
The complete C++ documentation can be viewed online at https://sixtyfps.io/docs/node/.
 | 
					The complete Node documentation can be viewed online at https://sixtyfps.io/docs/node/.
 | 
				
			||||||
 | 
					
 | 
				
			||||||
**Warning: Pre-Alpha**
 | 
					**Warning: Pre-Alpha**
 | 
				
			||||||
SixtyFPS is still in the early stages of development: APIs will change and important features are still being developed.
 | 
					Slint is still in the early stages of development: APIs will change and important features are still being developed.
 | 
				
			||||||
 | 
					
 | 
				
			||||||
## Installing SixtyFPS
 | 
					## Installing Slint
 | 
				
			||||||
 | 
					
 | 
				
			||||||
SixtyFPS is available via NPM, so you can install by running the following command:
 | 
					Slint is available via NPM, so you can install by running the following command:
 | 
				
			||||||
 | 
					
 | 
				
			||||||
```sh
 | 
					```sh
 | 
				
			||||||
npm install sixtyfps
 | 
					npm install slint-ui
 | 
				
			||||||
```
 | 
					```
 | 
				
			||||||
 | 
					
 | 
				
			||||||
## Using SixtyFPS
 | 
					## Using Slint
 | 
				
			||||||
 | 
					
 | 
				
			||||||
To initialize the API, you first need to import the `slint` module in our code:
 | 
					To initialize the API, you first need to import the `slint-ui` module in our code:
 | 
				
			||||||
 | 
					
 | 
				
			||||||
```js
 | 
					```js
 | 
				
			||||||
let slint = require("slint");
 | 
					let slint = require("slint-ui");
 | 
				
			||||||
```
 | 
					```
 | 
				
			||||||
 | 
					
 | 
				
			||||||
This step also installs a hook in NodeJS that allows you to import `.slint` files directly:
 | 
					This step also installs a hook in NodeJS that allows you to import `.slint` files directly:
 | 
				
			||||||
| 
						 | 
					@ -32,10 +32,10 @@ This step also installs a hook in NodeJS that allows you to import `.slint` file
 | 
				
			||||||
let ui = require("../ui/main.slint");
 | 
					let ui = require("../ui/main.slint");
 | 
				
			||||||
```
 | 
					```
 | 
				
			||||||
 | 
					
 | 
				
			||||||
Combining these two steps leads us to the obligator "Hello World" example:
 | 
					Combining these two steps leads us to the obligatory "Hello World" example:
 | 
				
			||||||
 | 
					
 | 
				
			||||||
```js
 | 
					```js
 | 
				
			||||||
require("slint");
 | 
					require("slint-ui");
 | 
				
			||||||
let ui = require("../ui/main.slint");
 | 
					let ui = require("../ui/main.slint");
 | 
				
			||||||
let main = new ui.Main();
 | 
					let main = new ui.Main();
 | 
				
			||||||
main.run();
 | 
					main.run();
 | 
				
			||||||
| 
						 | 
					@ -51,7 +51,7 @@ The exported component is exposed as a type constructor. The type constructor ta
 | 
				
			||||||
an object which allow to initialize the value of public properties or callbacks.
 | 
					an object which allow to initialize the value of public properties or callbacks.
 | 
				
			||||||
 | 
					
 | 
				
			||||||
```js
 | 
					```js
 | 
				
			||||||
require("slint");
 | 
					require("slint-ui");
 | 
				
			||||||
// In this example, the main.slint file exports a module which
 | 
					// In this example, the main.slint file exports a module which
 | 
				
			||||||
// has a counter property and a clicked callback
 | 
					// has a counter property and a clicked callback
 | 
				
			||||||
let ui = require("ui/main.slint");
 | 
					let ui = require("ui/main.slint");
 | 
				
			||||||
| 
						 | 
					@ -105,7 +105,7 @@ If the array was set within the .slint file, the array can be obtained
 | 
				
			||||||
```js
 | 
					```js
 | 
				
			||||||
component.model = [1, 2, 3];
 | 
					component.model = [1, 2, 3];
 | 
				
			||||||
// component.model.push(4); // does not work, because it operate on a copy
 | 
					// component.model.push(4); // does not work, because it operate on a copy
 | 
				
			||||||
// but re-assigning work
 | 
					// but re-assigning works
 | 
				
			||||||
component.model = component.model.concat(4);
 | 
					component.model = component.model.concat(4);
 | 
				
			||||||
```
 | 
					```
 | 
				
			||||||
 | 
					
 | 
				
			||||||
| 
						 | 
					@ -121,7 +121,7 @@ When such an object is set to a model property, it gets a new `notify` object wi
 | 
				
			||||||
* `rowAdded(index, count)`: notify the view that rows were added.
 | 
					* `rowAdded(index, count)`: notify the view that rows were added.
 | 
				
			||||||
* `rowRemoved(index, count)`: notify the view that a row were removed.
 | 
					* `rowRemoved(index, count)`: notify the view that a row were removed.
 | 
				
			||||||
 | 
					
 | 
				
			||||||
As an example, here is the implementation of the `ArrayModel` (which is available on `sixtyfps.ArrayModel`)
 | 
					As an example, here is the implementation of the `ArrayModel` (which is available as `slint.ArrayModel`)
 | 
				
			||||||
 | 
					
 | 
				
			||||||
```js
 | 
					```js
 | 
				
			||||||
let array = [1, 2, 3];
 | 
					let array = [1, 2, 3];
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -1,5 +1,5 @@
 | 
				
			||||||
{
 | 
					{
 | 
				
			||||||
    "name": "slint",
 | 
					    "name": "slint-ui",
 | 
				
			||||||
    "version": "0.2.0",
 | 
					    "version": "0.2.0",
 | 
				
			||||||
    "homepage": "https://github.com/sixtyfpsui/sixtyfps",
 | 
					    "homepage": "https://github.com/sixtyfpsui/sixtyfps",
 | 
				
			||||||
    "license": "SEE LICENSE IN LICENSE.md",
 | 
					    "license": "SEE LICENSE IN LICENSE.md",
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -2,7 +2,7 @@
 | 
				
			||||||
// Copyright © SixtyFPS GmbH <info@sixtyfps.io>
 | 
					// Copyright © SixtyFPS GmbH <info@sixtyfps.io>
 | 
				
			||||||
// SPDX-License-Identifier: (GPL-3.0-only OR LicenseRef-SixtyFPS-commercial)
 | 
					// SPDX-License-Identifier: (GPL-3.0-only OR LicenseRef-SixtyFPS-commercial)
 | 
				
			||||||
 | 
					
 | 
				
			||||||
let slint = require("slint");
 | 
					let slint = require("slint-ui");
 | 
				
			||||||
let ui = require("./memory.slint");
 | 
					let ui = require("./memory.slint");
 | 
				
			||||||
let window = new ui.MainWindow();
 | 
					let window = new ui.MainWindow();
 | 
				
			||||||
 | 
					
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -3,7 +3,7 @@
 | 
				
			||||||
    "version": "0.2.0",
 | 
					    "version": "0.2.0",
 | 
				
			||||||
    "main": "main.js",
 | 
					    "main": "main.js",
 | 
				
			||||||
    "dependencies": {
 | 
					    "dependencies": {
 | 
				
			||||||
        "slint": "../../api/node"
 | 
					        "slint-ui": "../../api/node"
 | 
				
			||||||
    },
 | 
					    },
 | 
				
			||||||
    "scripts": {
 | 
					    "scripts": {
 | 
				
			||||||
        "start": "node ."
 | 
					        "start": "node ."
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -3,7 +3,7 @@
 | 
				
			||||||
// SPDX-License-Identifier: (GPL-3.0-only OR LicenseRef-SixtyFPS-commercial)
 | 
					// SPDX-License-Identifier: (GPL-3.0-only OR LicenseRef-SixtyFPS-commercial)
 | 
				
			||||||
 | 
					
 | 
				
			||||||
const path = require("path");
 | 
					const path = require("path");
 | 
				
			||||||
let slint = require("slint");
 | 
					let slint = require("slint-ui");
 | 
				
			||||||
 | 
					
 | 
				
			||||||
let demo = require("../ui/printerdemo.slint");
 | 
					let demo = require("../ui/printerdemo.slint");
 | 
				
			||||||
let window = new demo.MainWindow();
 | 
					let window = new demo.MainWindow();
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -3,7 +3,7 @@
 | 
				
			||||||
    "version": "0.2.0",
 | 
					    "version": "0.2.0",
 | 
				
			||||||
    "main": "main.js",
 | 
					    "main": "main.js",
 | 
				
			||||||
    "dependencies": {
 | 
					    "dependencies": {
 | 
				
			||||||
        "slint": "../../../api/node"
 | 
					        "slint-ui": "../../../api/node"
 | 
				
			||||||
    },
 | 
					    },
 | 
				
			||||||
    "scripts": {
 | 
					    "scripts": {
 | 
				
			||||||
        "start": "node ."
 | 
					        "start": "node ."
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -3,7 +3,7 @@
 | 
				
			||||||
// SPDX-License-Identifier: (GPL-3.0-only OR LicenseRef-SixtyFPS-commercial)
 | 
					// SPDX-License-Identifier: (GPL-3.0-only OR LicenseRef-SixtyFPS-commercial)
 | 
				
			||||||
 | 
					
 | 
				
			||||||
// import "slint";
 | 
					// import "slint";
 | 
				
			||||||
require("slint");
 | 
					require("slint-ui");
 | 
				
			||||||
// import * as demo from "../ui/printerdemo.slint";
 | 
					// import * as demo from "../ui/printerdemo.slint";
 | 
				
			||||||
let demo = require("../ui/printerdemo.slint");
 | 
					let demo = require("../ui/printerdemo.slint");
 | 
				
			||||||
let window = new demo.MainWindow();
 | 
					let window = new demo.MainWindow();
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -3,7 +3,7 @@
 | 
				
			||||||
    "version": "0.2.0",
 | 
					    "version": "0.2.0",
 | 
				
			||||||
    "main": "main.js",
 | 
					    "main": "main.js",
 | 
				
			||||||
    "dependencies": {
 | 
					    "dependencies": {
 | 
				
			||||||
        "slint": "../../../api/node"
 | 
					        "slint-ui": "../../../api/node"
 | 
				
			||||||
    },
 | 
					    },
 | 
				
			||||||
    "scripts": {
 | 
					    "scripts": {
 | 
				
			||||||
        "start": "node ."
 | 
					        "start": "node ."
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -3,7 +3,7 @@
 | 
				
			||||||
// SPDX-License-Identifier: (GPL-3.0-only OR LicenseRef-SixtyFPS-commercial)
 | 
					// SPDX-License-Identifier: (GPL-3.0-only OR LicenseRef-SixtyFPS-commercial)
 | 
				
			||||||
 | 
					
 | 
				
			||||||
// import "slint";
 | 
					// import "slint";
 | 
				
			||||||
let slint = require("slint");
 | 
					let slint = require("slint-ui");
 | 
				
			||||||
// import * as demo from "../ui/todo.slint";
 | 
					// import * as demo from "../ui/todo.slint";
 | 
				
			||||||
let demo = require("../ui/todo.slint");
 | 
					let demo = require("../ui/todo.slint");
 | 
				
			||||||
let app = new demo.MainWindow();
 | 
					let app = new demo.MainWindow();
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -3,7 +3,7 @@
 | 
				
			||||||
    "version": "0.2.0",
 | 
					    "version": "0.2.0",
 | 
				
			||||||
    "main": "main.js",
 | 
					    "main": "main.js",
 | 
				
			||||||
    "dependencies": {
 | 
					    "dependencies": {
 | 
				
			||||||
        "slint": "../../../api/node"
 | 
					        "slint-ui": "../../../api/node"
 | 
				
			||||||
    },
 | 
					    },
 | 
				
			||||||
    "scripts": {
 | 
					    "scripts": {
 | 
				
			||||||
        "start": "node ."
 | 
					        "start": "node ."
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue