mirror of
https://github.com/wavetermdev/wails.git
synced 2026-04-22 15:26:15 -07:00
Compare commits
3 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| ee59205804 | |||
| bbcf387ed3 | |||
| eb69031304 |
@@ -0,0 +1,5 @@
|
||||
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
|
||||
+23
-26
@@ -5,39 +5,36 @@ 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/).
|
||||
|
||||
## Recommended Setup Steps
|
||||
## Setup Steps
|
||||
|
||||
Install the wails3 CLI if you haven't already:
|
||||
1. Install the wails3 CLI if you haven't already:
|
||||
|
||||
```shell
|
||||
go install github.com/wailsapp/wails/v3/cmd/wails3@latest
|
||||
```
|
||||
```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:
|
||||
|
||||
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:setup
|
||||
```
|
||||
4. Serve the documentation locally:
|
||||
|
||||
```bash
|
||||
wails3 task docs:setup
|
||||
```
|
||||
```shell
|
||||
wails3 task docs:serve
|
||||
```
|
||||
|
||||
This will install the required dependencies for you.
|
||||
5. Open your browser to [http://127.0.0.1:8000](http://127.0.0.1:8000)
|
||||
|
||||
If you have installed the wails3 CLI, you can run the following command to build
|
||||
the documentation and serve it locally:
|
||||
6. For a complete build, run:
|
||||
|
||||
```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
|
||||
```shell
|
||||
wails3 task docs:build
|
||||
```
|
||||
|
||||
## Contributing
|
||||
|
||||
|
||||
@@ -7,10 +7,10 @@ tasks:
|
||||
setup:
|
||||
summary: Setup the project
|
||||
preconditions:
|
||||
- sh: python{{exeExt}} --version
|
||||
msg: "Looks like Python isn't installed. Python is required to build the documentation: https://www.python.org/downloads/"
|
||||
- sh: docker version
|
||||
msg: "Looks like docker isn't installed. Visit https://www.docker.com to download and install."
|
||||
cmds:
|
||||
- python -m pip install -r requirements.txt --user
|
||||
- docker build -t squidfunk/mkdocs-material .
|
||||
|
||||
setup:insiders:
|
||||
summary: Setup the project (insiders)
|
||||
@@ -31,18 +31,54 @@ tasks:
|
||||
build:
|
||||
summary: Builds the documentation
|
||||
preconditions:
|
||||
- sh: mkdocs --version
|
||||
msg: "Looks like mkdocs isn't installed. Run `wails3 task setup` or `task setup` in the documentation directory to install it."
|
||||
- sh: docker version
|
||||
msg: "Looks like docker isn't installed. Visit https://www.docker.com to download and install."
|
||||
cmds:
|
||||
- mkdocs build
|
||||
- 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
|
||||
|
||||
serve:
|
||||
summary: Builds the documentation and serves it locally
|
||||
preconditions:
|
||||
- sh: mkdocs --version
|
||||
msg: "Looks like mkdocs isn't installed. Run `wails3 task setup` or `task setup` in the documentation directory to install it."
|
||||
- sh: docker version
|
||||
msg: "Looks like docker isn't installed. Visit https://www.docker.com to download and install."
|
||||
cmds:
|
||||
- mkdocs serve
|
||||
- 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
|
||||
|
||||
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/Vgff2p8gsy) channel on Discord.
|
||||
If you find a bug, please let us know by posting into the [v3 Alpha Feedback](https://discord.gg/3mgVyGua) 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/Vgff2p8gsy) channel.
|
||||
- Create a post in the [v3 Alpha Feedback](https://discord.gg/3mgVyGua) 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/Vgff2p8gsy) channel on Discord:
|
||||
If you have a suggestion, please let us know by posting into the [v3 Alpha Feedback](https://discord.gg/3mgVyGua) channel on Discord:
|
||||
|
||||
- The post should be given the `Suggestion` tag.
|
||||
|
||||
Please feel free to reach out to us on [Discord](https://discord.gg/Vgff2p8gsy) if you have any questions.
|
||||
Please feel free to reach out to us on [Discord](https://discord.gg/3mgVyGua) if you have any questions.
|
||||
|
||||
=== "Upvoting"
|
||||
|
||||
|
||||
@@ -0,0 +1,149 @@
|
||||
# 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.
|
||||
@@ -0,0 +1,14 @@
|
||||
# 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.
|
||||
|
||||
@@ -0,0 +1,129 @@
|
||||
# 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.
|
||||
@@ -0,0 +1,99 @@
|
||||
# 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
|
||||
```
|
||||
@@ -0,0 +1,65 @@
|
||||
# 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.
|
||||
@@ -0,0 +1,311 @@
|
||||
# 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.
|
||||
@@ -1,65 +0,0 @@
|
||||
# Wails v3 Plugin Guide
|
||||
|
||||
Wails v3 introduces the concept of plugins. A plugin is a self-contained module that can extend the functionality of your Wails application.
|
||||
This guide will walk you through the structure and functionality of a Wails plugin.
|
||||
|
||||
## Plugin Structure
|
||||
|
||||
A Wails plugin is a standard Go module, typically consisting of the following files:
|
||||
|
||||
- `plugin.go`: This is the main Go file where the plugin's functionality is implemented.
|
||||
- `plugin.yaml`: This is the plugin's metadata file. It contains information about the plugin such as its name, author, version, and more.
|
||||
- `assets/`: This directory contains any static assets that the plugin might need.
|
||||
- `README.md`: This file provides documentation for the plugin.
|
||||
|
||||
## Plugin Implementation
|
||||
|
||||
In `plugin.go`, a plugin is defined as a struct that implements the `application.Plugin` interface. This interface requires the following methods:
|
||||
|
||||
- `Init()`: This method is called when the plugin is initialized.
|
||||
- `Shutdown()`: This method is called when the application is shutting down.
|
||||
- `Name()`: This method returns the name of the plugin.
|
||||
- `CallableByJS()`: This method returns a list of method names that can be called from the frontend.
|
||||
|
||||
In addition to these methods, you can define any number of additional methods that implement the plugin's functionality.
|
||||
These methods can be called from the frontend using the `wails.Plugin()` function.
|
||||
|
||||
## Plugin Metadata
|
||||
|
||||
The `plugin.yaml` file contains metadata about the plugin. This includes the plugin's name, description, author, version, website, repository, and license.
|
||||
|
||||
## Plugin Assets
|
||||
|
||||
Any static assets that the plugin needs can be placed in the `assets/` directory.
|
||||
These assets can be accessed by the frontend by requesting them at the plugin base path.
|
||||
This path is `/wails/plugins/<plugin-name>/`.
|
||||
|
||||
### Example
|
||||
|
||||
If a plugin named `logopack` has an asset named `logo.png`, the frontend can access it at `/wails/plugins/logopack/logo.png`.
|
||||
|
||||
## Plugin Documentation
|
||||
|
||||
The `README.md` file provides documentation for the plugin. This should include instructions on how to install and use the plugin, as well as any other information that users of the plugin might find useful.
|
||||
|
||||
## Example
|
||||
|
||||
Here's an example of how to use a plugin in your Wails application:
|
||||
|
||||
```go
|
||||
Plugins: map[string]application.Plugin{
|
||||
"log": log.NewPlugin(),
|
||||
},
|
||||
```
|
||||
And here's how you can call a plugin method from the frontend:
|
||||
|
||||
```js
|
||||
wails.Plugin("log","Debug","hello world")
|
||||
```
|
||||
|
||||
## Support
|
||||
|
||||
If you encounter any issues with a plugin, please raise a ticket in the plugin's repository.
|
||||
|
||||
!!! note
|
||||
The Wails team does not provide support for third-party plugins.
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user