Compare commits

..

15 Commits

Author SHA1 Message Date
Lea Anthony 2aae05f5bb Update plugins and docs 2024-04-14 21:35:47 +10:00
Lea Anthony a4971ab58e Update kvstore docs 2024-04-14 15:43:11 +10:00
Lea Anthony fe618b71b3 Update kvstore plugin + example 2024-04-14 15:39:29 +10:00
Lea Anthony c5c3f2ab5e refactor tabs in example 2024-04-13 21:01:40 +10:00
Lea Anthony fc2c5207fc Fix double click 2024-04-13 21:01:21 +10:00
Lea Anthony 2db9537c8c Add hashes example 2024-04-13 20:41:03 +10:00
Lea Anthony 38475a5da4 Fix drag/resize 2024-04-13 17:07:51 +10:00
Lea Anthony bf87f026f7 Better sqlite demo 2024-04-11 21:59:30 +10:00
Lea Anthony 724e0c7b86 Major plugin updates 2024-04-11 20:43:13 +10:00
Lea Anthony cf130a6e25 [windows] Fix directory select in Open Dialog 2024-04-06 14:38:43 +11:00
Lea Anthony e91c30fad0 Small doctor improvements 2024-04-03 20:48:55 +11:00
Lea Anthony 3e3f7b9273 Update discord link 2024-04-03 08:27:32 +11:00
Lea Anthony 88ff84f5a5 [windows] Improve Set window icon when in debug mode 2024-04-01 05:02:39 +11:00
Lea Anthony eee373f15a [windows] Set window icon when in debug mode 2024-04-01 04:55:34 +11:00
Lea Anthony c839c053cb [windows] Fix min/max buttons 2024-03-29 21:44:59 +11:00
62 changed files with 1084 additions and 1253 deletions
-5
View File
@@ -1,5 +0,0 @@
FROM squidfunk/mkdocs-material
RUN pip install mkdocs-macros-plugin
RUN pip install mkdocs-glightbox
RUN pip install mkdocs-table-reader-plugin
RUN pip install mkdocs-static-i18n
+26 -23
View File
@@ -5,36 +5,39 @@ This is the documentation for Wails v3. It is currently a work in progress.
If you do not wish to build it locally, it is available online at
[https://wailsapp.github.io/wails/](https://wailsapp.github.io/wails/).
## Setup Steps
## Recommended Setup Steps
1. Install the wails3 CLI if you haven't already:
Install the wails3 CLI if you haven't already:
```shell
git clone https://github.com/wailsapp/wails.git
cd wails
git checkout v3-alpha
cd v3/cmd/wails3
go install
```
2. Install [docker](https://www.docker.com)
3. Run the following command to build the docker container:
```shell
go install github.com/wailsapp/wails/v3/cmd/wails3@latest
```
```shell
wails3 task docs:setup
```
4. Serve the documentation locally:
The documentation uses mkdocs, so you will need to install
[Python](https://www.python.org/). Once installed, you can setup the
documentation by running the following command:
```shell
wails3 task docs:serve
```
```bash
wails3 task docs:setup
```
5. Open your browser to [http://127.0.0.1:8000](http://127.0.0.1:8000)
This will install the required dependencies for you.
6. For a complete build, run:
If you have installed the wails3 CLI, you can run the following command to build
the documentation and serve it locally:
```shell
wails3 task docs:build
```
```bash
wails3 task docs:serve
```
### Manual Setup
To install manually, you will need to do the following:
- Install [Python](https://www.python.org/)
- Run `pip install -r requirements.txt` to install the required dependencies
- Run `mkdocs serve` to serve the documentation locally
- Run `mkdocs build` to build the documentation
## Contributing
+9 -45
View File
@@ -7,10 +7,10 @@ tasks:
setup:
summary: Setup the project
preconditions:
- sh: docker version
msg: "Looks like docker isn't installed. Visit https://www.docker.com to download and install."
- sh: python{{exeExt}} --version
msg: "Looks like Python isn't installed. Python is required to build the documentation: https://www.python.org/downloads/"
cmds:
- docker build -t squidfunk/mkdocs-material .
- python -m pip install -r requirements.txt --user
setup:insiders:
summary: Setup the project (insiders)
@@ -31,54 +31,18 @@ tasks:
build:
summary: Builds the documentation
preconditions:
- sh: docker version
msg: "Looks like docker isn't installed. Visit https://www.docker.com to download and install."
- sh: mkdocs --version
msg: "Looks like mkdocs isn't installed. Run `wails3 task setup` or `task setup` in the documentation directory to install it."
cmds:
- build:windows
- build:unix
build:windows:
summary: Builds the documentation (Windows)
internal: true
platforms:
- windows
cmds:
- docker run --rm -v "%cd%":/docs squidfunk/mkdocs-material build
build:unix:
summary: Builds the documentation (Unix)
internal: true
platforms:
- darwin
- linux
cmds:
- docker run --rm -v "$(pwd)":/docs squidfunk/mkdocs-material build
- mkdocs build
serve:
summary: Builds the documentation and serves it locally
preconditions:
- sh: docker version
msg: "Looks like docker isn't installed. Visit https://www.docker.com to download and install."
- sh: mkdocs --version
msg: "Looks like mkdocs isn't installed. Run `wails3 task setup` or `task setup` in the documentation directory to install it."
cmds:
- task: serve:windows
- task: serve:unix
serve:windows:
summary: Builds the documentation and serves it locally (Windows)
internal: true
platforms:
- windows
cmds:
- docker run --rm -it -p 8000:8000 -v "%cd%":/docs squidfunk/mkdocs-material
serve:unix:
summary: Builds the documentation and serves it locally (Unix)
internal: true
platforms:
- darwin
- linux
cmds:
- docker run --rm -it -p 8000:8000 -v "$(pwd)":/docs squidfunk/mkdocs-material
- mkdocs serve
serve:insiders:
summary: Builds the documentation and serves it locally
@@ -5,7 +5,7 @@ posts before creating new ones. Here are the different ways to provide feedback:
=== "Bugs"
If you find a bug, please let us know by posting into the [v3 Alpha Feedback](https://discord.gg/3mgVyGua) channel on Discord.
If you find a bug, please let us know by posting into the [v3 Alpha Feedback](https://discord.gg/Vgff2p8gsy) channel on Discord.
- The post should clearly state what the bug is and have a simple reproducible example. If the docs are unclear what *should* happen, please include that in the post.
- The post should be given the `Bug` tag.
@@ -24,17 +24,17 @@ posts before creating new ones. Here are the different ways to provide feedback:
If you have a fix for a bug or an update for documentation, please do the following:
- Open a pull request on the [Wails repository](https://github.com/wailsapp/wails). The title of the PR should start with `[v3 alpha]`.
- Create a post in the [v3 Alpha Feedback](https://discord.gg/3mgVyGua) channel.
- Create a post in the [v3 Alpha Feedback](https://discord.gg/Vgff2p8gsy) channel.
- The post should be given the `PR` tag.
- Please include a link to the PR in your post.
=== "Suggestions"
If you have a suggestion, please let us know by posting into the [v3 Alpha Feedback](https://discord.gg/3mgVyGua) channel on Discord:
If you have a suggestion, please let us know by posting into the [v3 Alpha Feedback](https://discord.gg/Vgff2p8gsy) channel on Discord:
- The post should be given the `Suggestion` tag.
Please feel free to reach out to us on [Discord](https://discord.gg/3mgVyGua) if you have any questions.
Please feel free to reach out to us on [Discord](https://discord.gg/Vgff2p8gsy) if you have any questions.
=== "Upvoting"
@@ -1,149 +0,0 @@
# Enums
In Go, an enum (enumeration) is a user-defined type that consists of a set of named constants called enumerators. Enums
are useful for representing a fixed set of values that a variable can take.
To define an enum in Go, you can use a type declaration with a list of constant values. Here's an example:
```go
type Title string
const (
Mr Title = "Mr"
Mrs Title = "Mrs"
Ms Title = "Ms"
)
```
In this example, we define an enum type called `Title` using the `type` keyword. We then declare a set of constants
(`Mr`, `Mrs`, `Ms`) of type `Title` using the `const` keyword.
## Using Enums in Bound Structs
Let's extend our previous example to use the `Title` enum in the `Person` struct:
```go
package main
import (
"github.com/wailsapp/wails/v3/pkg/application"
"log"
)
// Title is a title
type Title string
const (
Mr Title = "Mr"
Mrs Title = "Mrs"
Ms Title = "Ms"
)
// Person is a person
type Person struct {
// Name of the person
Name string
// Title of the person
Title Title
}
type GreetService struct{}
func (g *GreetService) Greet(person Person) string {
return "Hello " + string(person.Title) + " " + person.Name
}
func main() {
app := application.New(application.Options{
Bind: []any{
&GreetService{},
},
})
// ....
app.NewWebviewWindow()
err := app.Run()
if err != nil {
log.Fatal(err)
}
}
```
In this updated example, we add a `Title` field of type `Title` to the `Person` struct. The `Greet` method now includes the `Title` in the greeting message.
When we run the bindings generator, it will process the enum and generate the corresponding JavaScript or TypeScript code.
## Generating Bindings with Enums
After adding the `Title` enum to our example, let's generate the bindings using the following command:
```bash
% wails3 generate bindings
```
The output should display information about the processed package, struct, method, enum, and model:
```bash
INFO Processed: 1 Package, 1 Struct, 1 Method, 1 Enum, 1 Model in 1.044166ms.
INFO Output directory: /Users/lea/GolandProjects/tempdocs/binding/frontend/bindings
```
If we look in the `frontend/bindings` directory, we should see a generated `models.js` file that includes the enum definition:
```javascript
// @ts-check
// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
// This file is automatically generated. DO NOT EDIT
/**
* @readonly
* @enum {string}
*/
export const Title = {
Mr: "Mr",
Mrs: "Mrs",
Ms: "Ms",
};
/**
* Person defines a person
*/
export class Person {
/**
* Creates a new Person instance.
* @param {Partial<Person>} [source = {}] - The source object to create the Person.
*/
constructor(source = {}) {
if (!("Name" in source)) {
/**
* Name of the person
* @member
* @type {string}
*/
this["Name"] = "";
}
if (!("Title" in source)) {
/**
* Title of the person
* @member
* @type {Title}
*/
this["Title"] = null;
}
Object.assign(this, source);
}
/**
* Creates a new Person instance from a string or object.
* @param {string|object} source - The source data to create a Person instance from.
* @returns {Person} A new Person instance.
*/
static createFrom(source) {
let parsedSource = typeof source === 'string' ? JSON.parse(source) : source;
return new Person(parsedSource);
}
}
```
The generated `models.js` file includes the `Title` enum definition, which is exported as a read-only object with the enum values as properties. The `Person` class also includes a `Title` property of type `Title`.
You can now use the generated enum and class in your frontend code when interacting with the bound `GreetService` struct.
@@ -1,14 +0,0 @@
# Bindings Generator Guide
Welcome to the Wails v3 Bindings Generator Guide!
One of the key features of Wails is the ability to seamlessly integrate backend Go code with the frontend, enabling
efficient communication between the two layers. This can be done manually by sending messages between the frontend and
backend, but this can be cumbersome and error-prone, especially when dealing with complex data types.
The bindings generator in Wails v3 simplifies this process by automatically generating JavaScript or TypeScript
functions and models that reflect the methods and data structures defined in your Go code. This means you can write
your backend logic in Go and easily expose it to the frontend without the need for manual binding or complex integration.
This guide is designed to help you understand and utilise this powerful binding tool.
@@ -1,129 +0,0 @@
# Binding Models
In addition to binding methods, you can also use structs as input or output parameters in your bound methods. When structs are used as parameters, Wails generates corresponding JavaScript versions of those types.
Let's extend the previous example to use a `Person` type that has a `Name` field:
```go title="main.go"
package main
import (
"github.com/wailsapp/wails/v3/pkg/application"
"log"
)
// Person defines a person
type Person struct {
// Name of the person
Name string
}
type GreetService struct{}
func (g *GreetService) Greet(person Person) string {
return "Hello " + person.Name
}
func main() {
app := application.New(application.Options{
Bind: []any{
&GreetService{},
},
})
// ....
app.NewWebviewWindow()
err := app.Run()
if err != nil {
log.Fatal(err)
}
}
```
In this updated example, we define a `Person` struct with a `Name` field. The `Greet` method in the `GreetService` struct
now takes a `Person` as an input parameter.
When you run the bindings generator, Wails will generate a corresponding JavaScript `Person` type that mirrors the Go
struct. This allows you to create instances of the `Person` type in your frontend code and pass them to the bound
`Greet` method.
If we run the bindings generator again, we should see the following output:
```bash
% wails3 generate bindings
INFO Processed: 1 Package, 1 Struct, 1 Method, 0 Enums, 1 Models in 4.075625ms.
INFO Output directory: /Users/me/myproject/frontend/bindings
```
In the `frontend/bindings/main` directory, you should see a new `models.js` file containing the following code:
```javascript title="models.js"
// @ts-check
// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
// This file is automatically generated. DO NOT EDIT
/**
* Person defines a person
*/
export class Person {
/**
* Creates a new Person instance.
* @param {Partial<Person>} [source = {}] - The source object to create the Person.
*/
constructor(source = {}) {
if (!("Name" in source)) {
/**
* Name of the person
* @member
* @type {string}
*/
this["Name"] = "";
}
Object.assign(this, source);
}
/**
* Creates a new Person instance from a string or object.
* @param {string|object} source - The source data to create a Person instance from.
* @returns {Person} A new Person instance.
*/
static createFrom(source) {
let parsedSource = typeof source === 'string' ? JSON.parse(source) : source;
return new Person(parsedSource);
}
};
```
The `Person` class is generated with a constructor that takes an optional `source` parameter, which allows you to
create a new `Person` instance from an object. It also has a static `createFrom` method that can create a `Person`
instance from a string or object.
You may also notice that comments in the Go struct are kept in the generated JavaScript code! This can be helpful for
understanding the purpose of the fields and methods in the generated models and should be picked up by your IDE.
## Using Bound Models
Here's an example of how you can use the generated JavaScript `Person` type in your frontend code:
```javascript title="main.js"
import {Greet} from "./bindings/main/GreetService.js";
import {Person} from "./bindings/main/models.js";
const resultElement = document.getElementById('result');
async function doGreet() {
let person = new Person({Name: document.getElementById('name').value});
if (!person.Name) {
person.Name = 'anonymous';
}
resultElement.innerText = await Greet(person);
}
```
In this example, we import the generated `Person` type from the `models` module. We create a new instance of `Person`,
set its `Name` property, and pass it to the `Greet` method.
Using bound models allows you to work with complex data structures and seamlessly pass them between the frontend and
backend of your Wails application.
@@ -1,99 +0,0 @@
# Binding Structs
In Wails v3, structs can be bound to your application. These structs act as a bridge between the backend and frontend,
allowing you to define methods and state that can be accessed and manipulated from the frontend.
There are 3 things to consider when binding structs:
1. Structs can hold state and expose methods that operate on that state.
2. Structs can be used similar to controllers in HTTP web applications or as services.
3. Only public methods on the struct are bound, following Go's convention.
Here's a simple example of how you can define a struct and bind it to your Wails application:
```go title="main.go"
package main
import (
"log"
"github.com/wailsapp/wails/v3/pkg/application"
)
type GreetService struct {}
func (g *GreetService) Greet(name string) string {
return "Hello " + name
}
func main() {
app := application.New(application.Options{
Bind: []any{
&GreetService{},
},
})
// ....
err := app.Run()
if err != nil {
log.Fatal(err)
}
}
```
In this example, we define a `GreetService` struct with a public `Greet` method. The `Greet` method takes a `name`
parameter and returns a greeting string.
We then create a new Wails application using `application.New` and bind an instance of the `GreetService` struct to the
application using the `Bind` option in the `application.Options`. The `Bind` option must always be given an *instance* of
the struct, not the struct type itself.
## Generating the Bindings
By binding the struct, Wails is able to generate the necessary JavaScript or TypeScript code by running the following
command in the project directory:
```bash
wails generate bindings
```
You should see output similar to the following:
```bash
% wails3 generate bindings
INFO Processed: 1 Package, 1 Struct, 1 Method, 0 Enums, 0 Models in 4.41575ms.
INFO Output directory: /Users/me/myproject/frontend/bindings
```
If we look in the `frontend/bindings` directory, we should see the following files:
```bash
frontend/bindings
└── main
└── GreetService.js
```
The generated `GreetService.js` file contains the JavaScript code that mirrors the Go struct and its methods:
```javascript title="GreetService.js"
// @ts-check
// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
// This file is automatically generated. DO NOT EDIT
import {Call} from "@wailsio/runtime";
/**
* @param {string} name
* @returns {Promise<string>}
*/
export function Greet(name) {
return Call.ByName("main.GreetService.Greet", name);
}
```
As you can see, it also generates all the necessary JSDoc type information to ensure type safety in your frontend code.
## Using the Bindings
You can import and use this file in your frontend code to interact with the backend.
```javascript title="main.js"
import { Greet } from './bindings/main/GreetService.js';
console.log(Greet('Alice')); // Output: Hello Alice
```
@@ -1,65 +0,0 @@
# Typescript
To generate TypeScript bindings instead of JavaScript, you can use the `-ts` flag:
```bash
% wails3 generate bindings -ts
```
This will generate TypeScript files in the `frontend/bindings` directory:
```bash
frontend/bindings
└── main
├── GreetService.ts
└── models.ts
```
The generated files include `GreetService.ts`, which contains the TypeScript code for the bound struct and its methods,
and `models.ts`, which contains the TypeScript types for the bound models:
```typescript title="GreetService.ts"
// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
// This file is automatically generated. DO NOT EDIT
import {Call} from "@wailsio/runtime";
import {Person} from "./models";
export function Greet(person: Person): Promise<string> {
return Call.ByName("main.GreetService.Greet", person);
}
```
```typescript title="models.ts"
// @ts-check
// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
// This file is automatically generated. DO NOT EDIT
/**
* Person defines a person
*/
export class Person {
/**
* Name of the person
*/
"Name": string;
/** Creates a new Person instance. */
constructor(source: Partial<Person> = {}) {
if (!("Name" in source)) {
this["Name"] = "";
}
Object.assign(this, source);
}
/** Creates a new Person instance from a string or object. */
static createFrom(source: string | object = {}): Person {
let parsedSource = typeof source === 'string' ? JSON.parse(source) : source;
return new Person(parsedSource as Partial<Person>);
}
}
```
Using TypeScript bindings provides type safety and improved IDE support when working with the generated code in your frontend.
-311
View File
@@ -1,311 +0,0 @@
# Bindings Generator Guide
## Introduction
Welcome to the Wails v3 Bindings Generator Guide!
One of the key features of Wails is the ability to seamlessly integrate backend Go code with the frontend, enabling
efficient communication between the two layers. This can be done manually by sending messages between the frontend and
backend, but this can be cumbersome and error-prone, especially when dealing with complex data types.
The bindings generator in Wails v3 simplifies this process by automatically generating JavaScript or TypeScript
functions and models that reflect the methods and data structures defined in your Go code. This means you can write
your backend logic in Go and easily expose it to the frontend without the need for manual binding or complex integration.
This guide is designed to help you understand and utilise this powerful binding tool.
## Core Concepts
In Wails v3, structs can be bound to your application. These structs act as a bridge between the backend and frontend,
allowing you to define methods and state that can be accessed and manipulated from the frontend.
### Struct Binding
1. Structs can hold state and expose methods that operate on that state.
2. Structs can be used similar to controllers in HTTP web applications or as services.
3. Only public methods on the struct are bound, following Go's convention.
Here's a simple example of how you can define a struct and bind it to your Wails application:
```go
package main
import (
"log"
"github.com/wailsapp/wails/v3/pkg/application"
)
type GreetService struct {}
func (g *GreetService) Greet(name string) string {
return "Hello " + name
}
func main() {
app := application.New(application.Options{
Bind: []any{
&GreetService{},
},
})
// ....
err := app.Run()
if err != nil {
log.Fatal(err)
}
}
```
In this example, we define a `GreetService` struct with a public `Greet` method. The `Greet` method takes a `name`
parameter and returns a greeting string.
We then create a new Wails application using `application.New` and bind an instance of the `GreetService` struct to the
application using the `Bind` option in the `application.Options`. The `Bind` option must always be given an *instance* of
the struct, not the struct type itself.
### Generating the Bindings
By binding the struct, Wails is able to generate the necessary JavaScript or TypeScript code by running the following
command in the project directory:
```bash
wails generate bindings
```
You should see output similar to the following:
```bash
% wails3 generate bindings
INFO Processed: 1 Package, 1 Struct, 1 Method, 0 Enums, 0 Models in 4.41575ms.
INFO Output directory: /Users/me/myproject/frontend/bindings
```
If we look in the `frontend/bindings` directory, we should see the following files:
```bash
frontend/bindings
└── main
└── GreetService.js
```
The generated `GreetService.js` file contains the JavaScript code that mirrors the Go struct and its methods:
```javascript
// @ts-check
// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
// This file is automatically generated. DO NOT EDIT
import {Call} from "@wailsio/runtime";
/**
* @param {string} name
* @returns {Promise<string>}
*/
export function Greet(name) {
return Call.ByName("main.GreetService.Greet", name);
}
```
As you can see, it also generates all the necessary JSDoc type information to ensure type safety in your frontend code.
### Using the Bindings
You can import and use this file in your frontend code to interact with the backend.
```javascript
import { Greet } from './bindings/main/GreetService.js';
console.log(Greet('Alice')); // Output: Hello Alice
```
### Binding Models
In addition to binding methods, you can also use structs as input or output parameters in your bound methods. When structs are used as parameters, Wails generates corresponding JavaScript versions of those types.
Let's extend the previous example to use a `Person` type that has a `Name` field:
```go
package main
import (
"github.com/wailsapp/wails/v3/pkg/application"
"log"
)
// Person defines a person
type Person struct {
// Name of the person
Name string
}
type GreetService struct{}
func (g *GreetService) Greet(person Person) string {
return "Hello " + person.Name
}
func main() {
app := application.New(application.Options{
Bind: []any{
&GreetService{},
},
})
// ....
app.NewWebviewWindow()
err := app.Run()
if err != nil {
log.Fatal(err)
}
}
```
In this updated example, we define a `Person` struct with a `Name` field. The `Greet` method in the `GreetService` struct
now takes a `Person` as an input parameter.
When you run the bindings generator, Wails will generate a corresponding JavaScript `Person` type that mirrors the Go
struct. This allows you to create instances of the `Person` type in your frontend code and pass them to the bound
`Greet` method.
If we run the bindings generator again, we should see the following output:
```bash
% wails3 generate bindings
INFO Processed: 1 Package, 1 Struct, 1 Method, 0 Enums, 1 Models in 4.075625ms.
INFO Output directory: /Users/me/myproject/frontend/bindings
```
In the `frontend/bindings/main` directory, you should see a new `models.js` file containing the following code:
```javascript
// @ts-check
// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
// This file is automatically generated. DO NOT EDIT
/**
* Person defines a person
*/
export class Person {
/**
* Creates a new Person instance.
* @param {Partial<Person>} [source = {}] - The source object to create the Person.
*/
constructor(source = {}) {
if (!("Name" in source)) {
/**
* Name of the person
* @member
* @type {string}
*/
this["Name"] = "";
}
Object.assign(this, source);
}
/**
* Creates a new Person instance from a string or object.
* @param {string|object} source - The source data to create a Person instance from.
* @returns {Person} A new Person instance.
*/
static createFrom(source) {
let parsedSource = typeof source === 'string' ? JSON.parse(source) : source;
return new Person(parsedSource);
}
};
```
The `Person` class is generated with a constructor that takes an optional `source` parameter, which allows you to
create a new `Person` instance from an object. It also has a static `createFrom` method that can create a `Person`
instance from a string or object.
You may also notice that comments in the Go struct are kept in the generated JavaScript code! This can be helpful for
understanding the purpose of the fields and methods in the generated models and should be picked up by your IDE.
### Using Bound Models
Here's an example of how you can use the generated JavaScript `Person` type in your frontend code:
```javascript
import {Greet} from "./bindings/main/GreetService.js";
import {Person} from "./bindings/main/models.js";
const resultElement = document.getElementById('result');
async function doGreet() {
let person = new Person({Name: document.getElementById('name').value});
if (!person.Name) {
person.Name = 'anonymous';
}
resultElement.innerText = await Greet(person);
}
```
In this example, we import the generated `Person` type from the `models` module. We create a new instance of `Person`,
set its `Name` property, and pass it to the `Greet` method.
Using bound models allows you to work with complex data structures and seamlessly pass them between the frontend and
backend of your Wails application.
### Using Typescript
To generate TypeScript bindings instead of JavaScript, you can use the `-ts` flag:
```bash
% wails3 generate bindings -ts
```
This will generate TypeScript files in the `frontend/bindings` directory:
```bash
frontend/bindings
└── main
├── GreetService.ts
└── models.ts
````
The generated files include `GreetService.ts`, which contains the TypeScript code for the bound struct and its methods,
and `models.ts`, which contains the TypeScript types for the bound models:
```typescript title="GreetService.ts"
// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
// This file is automatically generated. DO NOT EDIT
import {Call} from "@wailsio/runtime";
import {Person} from "./models";
export function Greet(person: Person): Promise<string> {
return Call.ByName("main.GreetService.Greet", person);
}
```
```typescript title="models.ts"
// @ts-check
// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
// This file is automatically generated. DO NOT EDIT
/**
* Person defines a person
*/
export class Person {
/**
* Name of the person
*/
"Name": string;
/** Creates a new Person instance. */
constructor(source: Partial<Person> = {}) {
if (!("Name" in source)) {
this["Name"] = "";
}
Object.assign(this, source);
}
/** Creates a new Person instance from a string or object. */
static createFrom(source: string | object = {}): Person {
let parsedSource = typeof source === 'string' ? JSON.parse(source) : source;
return new Person(parsedSource as Partial<Person>);
}
}
```
Using TypeScript bindings provides type safety and improved IDE support when working with the generated code in your frontend.

Some files were not shown because too many files have changed in this diff Show More