Compare commits

..

3 Commits

Author SHA1 Message Date
Lea Anthony ee59205804 Add more documentation. 2024-03-31 20:48:25 +11:00
Lea Anthony bbcf387ed3 Add more documentation. 2024-03-31 20:43:32 +11:00
Lea Anthony eb69031304 Add new bindings guide.
Move to docker building.
Update README.
2024-03-31 16:19:00 +11:00
134 changed files with 4258 additions and 1674 deletions
+5 -17
View File
@@ -71,26 +71,14 @@ jobs:
with:
go-version: ${{ matrix.go-version }}
- name: Run tests (mac) | v2
if: ${{ matrix.os == 'macos-latest' && github.base_ref == 'master' }}
- name: Run tests (mac)
if: matrix.os == 'macos-latest'
env:
CGO_LDFLAGS: -framework UniformTypeIdentifiers -mmacosx-version-min=10.13
working-directory: ./v2
run: go test -v ./...
- name: Run tests (!mac) | v2
if: ${{ matrix.os != 'macos-latest' && github.base_ref == 'master' }}
working-directory: ./v2
run: go test -v ./...
- name: Run tests (mac) | v3
if: ${{ matrix.os == 'macos-latest' && github.base_ref == 'v3-alpha' }}
env:
CGO_LDFLAGS: -framework UniformTypeIdentifiers -mmacosx-version-min=10.13
working-directory: ./v3
run: go test -v ./...
- name: Run tests (!mac) | v3
if: ${{ matrix.os != 'macos-latest' && github.base_ref == 'v3-alpha' }}
working-directory: ./v3
- name: Run tests (!mac)
if: matrix.os != 'macos-latest'
working-directory: ./v2
run: go test -v ./...
+5
View File
@@ -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
View File
@@ -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
+45 -9
View File
@@ -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
-3
View File
@@ -31,7 +31,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Support multiple space-separated trigger events in the WML system by [@fbbdev](https://github.com/fbbdev) in [#3295](https://github.com/wailsapp/wails/pull/3295)
- Add ESM exports from the bundled JS runtime script by [@fbbdev](https://github.com/fbbdev) in [#3295](https://github.com/wailsapp/wails/pull/3295)
- Add binding generator flag for using the bundled JS runtime script instead of the npm package by [@fbbdev](https://github.com/fbbdev) in [#3334](https://github.com/wailsapp/wails/pull/3334)
- Implement `setIcon` on linux by [@abichinger](https://github.com/abichinger) in [#3354](https://github.com/wailsapp/wails/pull/3354)
### Fixed
@@ -57,8 +56,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Fix custom context menu closing immediately on linux by [@abichinger](https://github.com/abichinger) in [#3330](https://github.com/wailsapp/wails/pull/3330)
- Fix the output path and extension of model files produced by the binding generator by [@fbbdev](https://github.com/fbbdev) in [#3334](https://github.com/wailsapp/wails/pull/3334)
- Fix the import paths of model files in JS code produced by the binding generator by [@fbbdev](https://github.com/fbbdev) in [#3334](https://github.com/wailsapp/wails/pull/3334)
- Fix drag-n-drop on some linux distros by [@abichinger](https://github.com/abichinger) in [#3346](https://github.com/wailsapp/wails/pull/3346)
- Fix missing task for macOS when using `wails3 task dev` by [@hfoxy](https://github.com/hfoxy) in [#3417](https://github.com/wailsapp/wails/pull/3417)
### Changed
@@ -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.
+311
View File
@@ -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.
-176
View File
@@ -1,176 +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 the Log plugin implementation:
```go
package log
import (
"embed"
_ "embed"
"github.com/wailsapp/wails/v3/pkg/application"
"io/fs"
"log/slog"
)
//go:embed assets/*
var assets embed.FS
// ---------------- Plugin Setup ----------------
// This is the main plugin struct. It can be named anything you like.
// It must implement the application.Plugin interface.
// Both the Init() and Shutdown() methods are called synchronously when the app starts and stops.
type Config struct {
// Logger is the logger to use. If not set, a default logger will be used.
Logger *slog.Logger
// LogLevel defines the log level of the logger.
LogLevel slog.Level
// Handles errors that occur when writing to the log
ErrorHandler func(err error)
}
type Plugin struct {
config *Config
app *application.App
level slog.LevelVar
}
func NewPluginWithConfig(config *Config) *Plugin {
if config.Logger == nil {
config.Logger = application.DefaultLogger(config.LogLevel)
}
result := &Plugin{
config: config,
}
result.level.Set(config.LogLevel)
return result
}
func NewPlugin() *Plugin {
return NewPluginWithConfig(&Config{})
}
// Shutdown is called when the app is shutting down
// You can use this to clean up any resources you have allocated
func (p *Plugin) Shutdown() error { return nil }
// Name returns the name of the plugin.
// You should use the go module format e.g. github.com/myuser/myplugin
func (p *Plugin) Name() string {
return "github.com/wailsapp/wails/v3/plugins/log"
}
func (p *Plugin) Init(api application.PluginAPI) error {
return nil
}
// CallableByJS returns a list of methods that can be called from the frontend
func (p *Plugin) CallableByJS() []string {
return []string{
"Debug",
"Info",
"Warning",
"Error",
"SetLogLevel",
}
}
func (p *Plugin) Assets() fs.FS {
return assets
}
// ---------------- Plugin Methods ----------------
// Plugin methods are just normal Go methods. You can add as many as you like.
// The only requirement is that they are exported (start with a capital letter).
// You can also return any type that is JSON serializable.
// See https://golang.org/pkg/encoding/json/#Marshal for more information.
func (p *Plugin) Debug(message string, args ...any) {
p.config.Logger.Debug(message, args...)
}
func (p *Plugin) Info(message string, args ...any) {
p.config.Logger.Info(message, args...)
}
func (p *Plugin) Warning(message string, args ...any) {
p.config.Logger.Warn(message, args...)
}
func (p *Plugin) Error(message string, args ...any) {
p.config.Logger.Error(message, args...)
}
func (p *Plugin) SetLogLevel(level slog.Level) {
p.level.Set(level)
}
```
This plugin can be added to the application like this:
```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