Files

1871 lines
74 KiB
HTML

<!--
Copyright (c) 2016-2023 Martin Donath <martin.donath@squidfunk.com>
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to
deal in the Software without restriction, including without limitation the
rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
sell copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
IN THE SOFTWARE.
-->
<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="description" content="The Wails Project - Build beautiful cross-platform applications using Go">
<meta name="author" content="Lea Anthony">
<link rel="canonical" href="https://v3alpha.wails.io/development/changes/">
<link rel="prev" href="../status/">
<link rel="next" href="../../roadmap/">
<link rel="alternate" href="./" hreflang="en">
<link rel="alternate" href="../../cy/development/changes/" hreflang="cy">
<link rel="icon" href="/favicon.ico">
<meta name="generator" content="mkdocs-1.6.0, mkdocs-material-9.5.22+insiders-4.53.8">
<title>v3 Changes - alpha</title>
<link rel="stylesheet" href="../../assets/stylesheets/main.46e89654.min.css">
<link rel="stylesheet" href="../../assets/stylesheets/palette.ab4e12ef.min.css">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i%7CRoboto+Mono:400,400i,700,700i&display=fallback">
<style>:root{--md-text-font:"Roboto";--md-code-font:"Roboto Mono"}</style>
<link rel="stylesheet" href="../../stylesheets/extra.css">
<script>__md_scope=new URL("../..",location),__md_hash=e=>[...e].reduce((e,_)=>(e<<5)-e+_.charCodeAt(0),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
</head>
<body dir="ltr" data-md-color-scheme="default" data-md-color-primary="indigo" data-md-color-accent="indigo">
<input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
<input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
<label class="md-overlay" for="__drawer"></label>
<div data-md-component="skip">
<a href="#changes-for-v3" class="md-skip">
Skip to content
</a>
</div>
<div data-md-component="announce">
<aside class="md-banner">
<div class="md-banner__inner md-grid md-typeset">
<div class="announcement__translation">
Translations are autogenerated. Please report mistakes.
</div>
</div>
</aside>
</div>
<header class="md-header" data-md-component="header">
<nav class="md-header__inner md-grid" aria-label="Header">
<a href="../.." title="alpha" class="md-header__button md-logo" aria-label="alpha" data-md-component="logo">
<img src="../../assets/images/wails-logo-horizontal-dark.svg" alt="logo">
</a>
<label class="md-header__button md-icon" for="__drawer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2Z"/></svg>
</label>
<div class="md-header__title" data-md-component="header-title">
<div class="md-header__ellipsis">
<div class="md-header__topic">
<span class="md-ellipsis">
alpha
</span>
</div>
<div class="md-header__topic" data-md-component="header-topic">
<span class="md-ellipsis">
v3 Changes
</span>
</div>
</div>
</div>
<form class="md-header__option" data-md-component="palette">
<input class="md-option" data-md-color-media="(prefers-color-scheme: light)" data-md-color-scheme="default" data-md-color-primary="indigo" data-md-color-accent="indigo" aria-label="Switch to dark mode" type="radio" name="__palette" id="__palette_0">
<label class="md-header__button md-icon" title="Switch to dark mode" for="__palette_1" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17 6H7c-3.31 0-6 2.69-6 6s2.69 6 6 6h10c3.31 0 6-2.69 6-6s-2.69-6-6-6zm0 10H7c-2.21 0-4-1.79-4-4s1.79-4 4-4h10c2.21 0 4 1.79 4 4s-1.79 4-4 4zM7 9c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/></svg>
</label>
<input class="md-option" data-md-color-media="(prefers-color-scheme: dark)" data-md-color-scheme="slate" data-md-color-primary="indigo" data-md-color-accent="indigo" aria-label="Switch to light mode" type="radio" name="__palette" id="__palette_1">
<label class="md-header__button md-icon" title="Switch to light mode" for="__palette_0" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17 7H7a5 5 0 0 0-5 5 5 5 0 0 0 5 5h10a5 5 0 0 0 5-5 5 5 0 0 0-5-5m0 8a3 3 0 0 1-3-3 3 3 0 0 1 3-3 3 3 0 0 1 3 3 3 3 0 0 1-3 3Z"/></svg>
</label>
</form>
<script>var media,input,key,value,palette=__md_get("__palette");if(palette&&palette.color){"(prefers-color-scheme)"===palette.color.media&&(media=matchMedia("(prefers-color-scheme: light)"),input=document.querySelector(media.matches?"[data-md-color-media='(prefers-color-scheme: light)']":"[data-md-color-media='(prefers-color-scheme: dark)']"),palette.color.media=input.getAttribute("data-md-color-media"),palette.color.scheme=input.getAttribute("data-md-color-scheme"),palette.color.primary=input.getAttribute("data-md-color-primary"),palette.color.accent=input.getAttribute("data-md-color-accent"));for([key,value]of Object.entries(palette.color))document.body.setAttribute("data-md-color-"+key,value)}</script>
<div class="md-header__option">
<div class="md-select">
<button class="md-header__button md-icon" aria-label="Select language">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m12.87 15.07-2.54-2.51.03-.03A17.52 17.52 0 0 0 14.07 6H17V4h-7V2H8v2H1v2h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04M18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12m-2.62 7 1.62-4.33L19.12 17h-3.24Z"/></svg>
</button>
<div class="md-select__inner">
<ul class="md-select__list">
<li class="md-select__item">
<a href="./" hreflang="en" class="md-select__link">
English
</a>
</li>
<li class="md-select__item">
<a href="../../cy/development/changes/" hreflang="cy" class="md-select__link">
Cymraeg
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="md-header__source">
<a href="https://github.com/wailsapp/wails" title="Go to repository" class="md-source" data-md-component="source">
<div class="md-source__icon md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
</div>
<div class="md-source__repository">
GitHub
</div>
</a>
</div>
</nav>
</header>
<div class="md-container" data-md-component="container">
<nav class="md-tabs" aria-label="Tabs" data-md-component="tabs">
<div class="md-grid">
<ul class="md-tabs__list">
<li class="md-tabs__item">
<a href="../.." class="md-tabs__link">
Home
</a>
</li>
<li class="md-tabs__item">
<a href="../../getting-started/installation/" class="md-tabs__link">
Getting started
</a>
</li>
<li class="md-tabs__item">
<a href="../../getting-started/feedback/" class="md-tabs__link">
Feedback
</a>
</li>
<li class="md-tabs__item">
<a href="../../whats-new/" class="md-tabs__link">
What's New in v3?
</a>
</li>
<li class="md-tabs__item">
<a href="../../API/application/" class="md-tabs__link">
API
</a>
</li>
<li class="md-tabs__item md-tabs__item--active">
<a href="../introduction/" class="md-tabs__link">
Development
</a>
</li>
<li class="md-tabs__item">
<a href="../../roadmap/" class="md-tabs__link">
Roadmap
</a>
</li>
<li class="md-tabs__item">
<a href="../../changelog/" class="md-tabs__link">
Change Log
</a>
</li>
<li class="md-tabs__item">
<a href="https://github.com/sponsors/leaanthony" class="md-tabs__link">
Sponsor❤️
</a>
</li>
</ul>
</div>
</nav>
<main class="md-main" data-md-component="main">
<div class="md-main__inner md-grid">
<div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--primary md-nav--lifted md-nav--integrated" aria-label="Navigation" data-md-level="0">
<label class="md-nav__title" for="__drawer">
<a href="../.." title="alpha" class="md-nav__button md-logo" aria-label="alpha" data-md-component="logo">
<img src="../../assets/images/wails-logo-horizontal-dark.svg" alt="logo">
</a>
alpha
</label>
<div class="md-nav__source">
<a href="https://github.com/wailsapp/wails" title="Go to repository" class="md-source" data-md-component="source">
<div class="md-source__icon md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
</div>
<div class="md-source__repository">
GitHub
</div>
</a>
</div>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../.." class="md-nav__link">
<span class="md-ellipsis">
Home
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--pruned md-nav__item--nested">
<a href="../../getting-started/installation/" class="md-nav__link">
<span class="md-ellipsis">
Getting started
</span>
<span class="md-nav__icon md-icon"></span>
</a>
</li>
<li class="md-nav__item">
<a href="../../getting-started/feedback/" class="md-nav__link">
<span class="md-ellipsis">
Feedback
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../whats-new/" class="md-nav__link">
<span class="md-ellipsis">
What's New in v3?
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--pruned md-nav__item--nested">
<a href="../../API/application/" class="md-nav__link">
<span class="md-ellipsis">
API
</span>
<span class="md-nav__icon md-icon"></span>
</a>
</li>
<li class="md-nav__item md-nav__item--active md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6" checked>
<label class="md-nav__link" for="__nav_6" id="__nav_6_label" tabindex="">
<span class="md-ellipsis">
Development
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_6_label" aria-expanded="true">
<label class="md-nav__title" for="__nav_6">
<span class="md-nav__icon md-icon"></span>
Development
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../introduction/" class="md-nav__link">
<span class="md-ellipsis">
Introduction
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../status/" class="md-nav__link">
<span class="md-ellipsis">
Status
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--active">
<input class="md-nav__toggle md-toggle" type="checkbox" id="__toc">
<label class="md-nav__link md-nav__link--active" for="__toc">
<span class="md-ellipsis">
v3 Changes
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<a href="./" class="md-nav__link md-nav__link--active">
<span class="md-ellipsis">
v3 Changes
</span>
</a>
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
<label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon"></span>
Table of contents
</label>
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
<li class="md-nav__item">
<a href="#events" class="md-nav__link">
<span class="md-ellipsis">
Events
</span>
</a>
<nav class="md-nav" aria-label="Events">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#application-events" class="md-nav__link">
<span class="md-ellipsis">
Application Events
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#window-events" class="md-nav__link">
<span class="md-ellipsis">
Window Events
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#custom-events" class="md-nav__link">
<span class="md-ellipsis">
Custom Events
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#event-callbacks-and-emit-function-signature" class="md-nav__link">
<span class="md-ellipsis">
Event callbacks and Emit function signature
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#off-and-offall" class="md-nav__link">
<span class="md-ellipsis">
Off and OffAll
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#hooks" class="md-nav__link">
<span class="md-ellipsis">
Hooks
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#developer-notes" class="md-nav__link">
<span class="md-ellipsis">
Developer notes
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#window" class="md-nav__link">
<span class="md-ellipsis">
Window
</span>
</a>
<nav class="md-nav" aria-label="Window">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#backgroundcolour" class="md-nav__link">
<span class="md-ellipsis">
BackgroundColour
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#windowistranslucent" class="md-nav__link">
<span class="md-ellipsis">
WindowIsTranslucent
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#systray" class="md-nav__link">
<span class="md-ellipsis">
Systray
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#bindings" class="md-nav__link">
<span class="md-ellipsis">
Bindings
</span>
</a>
<nav class="md-nav" aria-label="Bindings">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#insecure-calls" class="md-nav__link">
<span class="md-ellipsis">
Insecure calls
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#drag-and-drop" class="md-nav__link">
<span class="md-ellipsis">
Drag and Drop
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#context-menus" class="md-nav__link">
<span class="md-ellipsis">
Context Menus
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#dialogs" class="md-nav__link">
<span class="md-ellipsis">
Dialogs
</span>
</a>
<nav class="md-nav" aria-label="Dialogs">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#windows" class="md-nav__link">
<span class="md-ellipsis">
Windows
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#clipboard" class="md-nav__link">
<span class="md-ellipsis">
ClipBoard
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#wails-markup-language-wml" class="md-nav__link">
<span class="md-ellipsis">
Wails Markup Language (WML)
</span>
</a>
<nav class="md-nav" aria-label="Wails Markup Language (WML)">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#data-wml-event" class="md-nav__link">
<span class="md-ellipsis">
data-wml-event
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#data-wml-window" class="md-nav__link">
<span class="md-ellipsis">
data-wml-window
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#data-wml-trigger" class="md-nav__link">
<span class="md-ellipsis">
data-wml-trigger
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#plugins" class="md-nav__link">
<span class="md-ellipsis">
Plugins
</span>
</a>
<nav class="md-nav" aria-label="Plugins">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#creating-a-plugin" class="md-nav__link">
<span class="md-ellipsis">
Creating a plugin
</span>
</a>
<nav class="md-nav" aria-label="Creating a plugin">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#enums" class="md-nav__link">
<span class="md-ellipsis">
Enums
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#logging" class="md-nav__link">
<span class="md-ellipsis">
Logging
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#misc" class="md-nav__link">
<span class="md-ellipsis">
Misc
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#windows-application-options" class="md-nav__link">
<span class="md-ellipsis">
Windows Application Options
</span>
</a>
<nav class="md-nav" aria-label="Windows Application Options">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#wndprocinterceptor" class="md-nav__link">
<span class="md-ellipsis">
WndProcInterceptor
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#hide-window-on-close-onbeforeclose" class="md-nav__link">
<span class="md-ellipsis">
Hide Window on Close + OnBeforeClose
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#window-drag" class="md-nav__link">
<span class="md-ellipsis">
Window Drag
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../../roadmap/" class="md-nav__link">
<span class="md-ellipsis">
Roadmap
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../changelog/" class="md-nav__link">
<span class="md-ellipsis">
Change Log
</span>
</a>
</li>
<li class="md-nav__item">
<a href="https://github.com/sponsors/leaanthony" class="md-nav__link">
<span class="md-ellipsis">
Sponsor❤️
</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-content" data-md-component="content">
<nav class="md-path" aria-label="Navigation" >
<ol class="md-path__list">
<li class="md-path__item">
<a href="../.." class="md-path__link">
<span class="md-ellipsis">
Home
</span>
</a>
</li>
<li class="md-path__item">
<a href="../introduction/" class="md-path__link">
<span class="md-ellipsis">
Development
</span>
</a>
</li>
</ol>
</nav>
<article class="md-content__inner md-typeset">
<a href="https://github.com/wailsapp/wails/edit/v3-alpha/mkdocs-website/docs/en/development/changes.md" title="Edit this page" class="md-content__button md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 20H6V4h7v5h5v3.1l2-2V8l-6-6H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h4v-2m10.2-7c.1 0 .3.1.4.2l1.3 1.3c.2.2.2.6 0 .8l-1 1-2.1-2.1 1-1c.1-.1.2-.2.4-.2m0 3.9L14.1 23H12v-2.1l6.1-6.1 2.1 2.1Z"/></svg>
</a>
<h1 id="changes-for-v3">Changes for v3<a class="headerlink" href="#changes-for-v3" title="Permanent link">#</a></h1>
<div class="admonition note">
<p class="admonition-title">Note</p>
<p>This is currently an unsorted brain dump of changes. It will be organised into a more readable format soon.</p>
</div>
<h2 id="events">Events<a class="headerlink" href="#events" title="Permanent link">#</a></h2>
<p>In v3, there are 3 types of events:</p>
<ul>
<li>Application Events</li>
<li>Window Events</li>
<li>Custom Events</li>
</ul>
<h3 id="application-events">Application Events<a class="headerlink" href="#application-events" title="Permanent link">#</a></h3>
<p>Application events are events that are emitted by the application. These events
include native events such as <code>ApplicationDidFinishLaunching</code> on macOS.</p>
<h3 id="window-events">Window Events<a class="headerlink" href="#window-events" title="Permanent link">#</a></h3>
<p>Window events are events that are emitted by a window. These events include
native events such as <code>WindowDidBecomeMain</code> on macOS. Common events are also
defined, so they work cross-platform, e.g. <code>WindowClosing</code>.</p>
<h3 id="custom-events">Custom Events<a class="headerlink" href="#custom-events" title="Permanent link">#</a></h3>
<p>Events that the user defines are called <code>WailsEvents</code>. This is to differentiate
them from the <code>Event</code> object that is used to communicate with the browser.
WailsEvents are now objects that encapsulate all the details of an event. This
includes the event name, the data, and the source of the event.</p>
<p>The data associated with a WailsEvent is now a single value. If multiple values
are required, then a struct can be used.</p>
<h3 id="event-callbacks-and-emit-function-signature">Event callbacks and <code>Emit</code> function signature<a class="headerlink" href="#event-callbacks-and-emit-function-signature" title="Permanent link">#</a></h3>
<p>The signatures events callbacks (as used by <code>On</code>, <code>Once</code> &amp; <code>OnMultiple</code>) have
changed. In v2, the callback function received optional data. In v3, the
callback function receives a <code>WailsEvent</code> object that contains all data related
to the event.</p>
<p>Similarly, the <code>Emit</code> function has changed. Instead of taking a name and
optional data, it now takes a single <code>WailsEvent</code> object that it will emit.</p>
<h3 id="off-and-offall"><code>Off</code> and <code>OffAll</code><a class="headerlink" href="#off-and-offall" title="Permanent link">#</a></h3>
<p>In v2, <code>Off</code> and <code>OffAll</code> calls would remove events in both JS and Go. Due to
the multi-window nature of v3, this has been changed so that these methods only
apply to the context they are called in. For example, if you call <code>Off</code> in a
window, it will only remove events for that window. If you use <code>Off</code> in Go, it
will only remove events for Go.</p>
<h3 id="hooks">Hooks<a class="headerlink" href="#hooks" title="Permanent link">#</a></h3>
<p>Event Hooks are a new feature in v3. They allow you to hook into the event
system and perform actions when certain events are emitted. For example, you can
hook into the <code>WindowClosing</code> event and perform some cleanup before the window
closes. Hooks can be registered at the application level or at the window level
using <code>RegisterHook</code>. Application level are for application events. Window level
hooks will only be called for the window they are registered with.</p>
<h3 id="developer-notes">Developer notes<a class="headerlink" href="#developer-notes" title="Permanent link">#</a></h3>
<p>When emitting an event in Go, it will dispatch the event to local Go listeners
and also each window in the application. When emitting an event in JS, it now
sends the event to the application. This will be processed as if it was emitted
in Go, however the sender ID will be that of the window.</p>
<h2 id="window">Window<a class="headerlink" href="#window" title="Permanent link">#</a></h2>
<p>The Window API has largely remained the same, however the methods are now on an
instance of a window rather than the runtime. Some notable differences are:</p>
<ul>
<li>Windows now have a Name that identifies them. This is used to identify the
window when emitting events.</li>
<li>Windows have even more methods on the that were previously unavailable, such
as <code>AbsolutePosition</code> and <code>ToggleDevTools</code>.</li>
<li>Windows can now accept files via native drag and drop. See the Drag and Drop
section for more details.</li>
</ul>
<h3 id="backgroundcolour">BackgroundColour<a class="headerlink" href="#backgroundcolour" title="Permanent link">#</a></h3>
<p>In v2, this was a pointer to an <code>RGBA</code> struct. In v3, this is an <code>RGBA</code> struct
value.</p>
<h3 id="windowistranslucent">WindowIsTranslucent<a class="headerlink" href="#windowistranslucent" title="Permanent link">#</a></h3>
<p>This flag has been removed. Now there is a <code>BackgroundType</code> flag that can be
used to set the type of background the window should have. This flag can be set
to any of the following values:</p>
<ul>
<li><code>BackgroundTypeSolid</code> - The window will have a solid background</li>
<li><code>BackgroundTypeTransparent</code> - The window will have a transparent background</li>
<li><code>BackgroundTypeTranslucent</code> - The window will have a translucent background</li>
</ul>
<p>On Windows, if the <code>BackgroundType</code> is set to <code>BackgroundTypeTranslucent</code>, the
type of translucency can be set using the <code>BackdropType</code> flag in the
<code>WindowsWindow</code> options. This can be set to any of the following values:</p>
<ul>
<li><code>Auto</code> - The window will use an effect determined by the system</li>
<li><code>None</code> - The window will have no background</li>
<li><code>Mica</code> - The window will use the Mica effect</li>
<li><code>Acrylic</code> - The window will use the acrylic effect</li>
<li><code>Tabbed</code> - The window will use the tabbed effect</li>
</ul>
<h2 id="systray">Systray<a class="headerlink" href="#systray" title="Permanent link">#</a></h2>
<p>Wails 3 comes with a built-in systray. This is a fully featured systray that has
been designed to be as simple as possible to use. It is possible to set the
icon, tooltip and menu of the systray. It is possible to also "attach" a window
to the systray. Doing this will provide the following functionality:</p>
<ul>
<li>Clicking the systray icon with toggle the window visibility</li>
<li>Right-clicking the systray will open the menu, if there is one</li>
</ul>
<p>On macOS, if there is no attached window, the systray will use the default
method of displaying the menu (any button). If there is an attached window but
no menu, the systray will toggle the window regardless of the button pressed.</p>
<h2 id="bindings">Bindings<a class="headerlink" href="#bindings" title="Permanent link">#</a></h2>
<p>Bindings work in a similar way to v2, by providing a means to bind struct
methods to the frontend. These can be called in the frontend using the binding
wrappers generated by the <code>wails3 generate bindings</code> command:</p>
<div class="highlight"><pre><span></span><code><a id="__codelineno-0-1" name="__codelineno-0-1" href="#__codelineno-0-1"></a><span class="c1">// @ts-check</span>
<a id="__codelineno-0-2" name="__codelineno-0-2" href="#__codelineno-0-2"></a><span class="c1">// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL</span>
<a id="__codelineno-0-3" name="__codelineno-0-3" href="#__codelineno-0-3"></a><span class="c1">// This file is automatically generated. DO NOT EDIT</span>
<a id="__codelineno-0-4" name="__codelineno-0-4" href="#__codelineno-0-4"></a>
<a id="__codelineno-0-5" name="__codelineno-0-5" href="#__codelineno-0-5"></a><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">main</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">&quot;./models&quot;</span><span class="p">;</span>
<a id="__codelineno-0-6" name="__codelineno-0-6" href="#__codelineno-0-6"></a>
<a id="__codelineno-0-7" name="__codelineno-0-7" href="#__codelineno-0-7"></a><span class="nb">window</span><span class="p">.</span><span class="nx">go</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">go</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="p">{};</span>
<a id="__codelineno-0-8" name="__codelineno-0-8" href="#__codelineno-0-8"></a><span class="nb">window</span><span class="p">.</span><span class="nx">go</span><span class="p">.</span><span class="nx">main</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-9" name="__codelineno-0-9" href="#__codelineno-0-9"></a><span class="w"> </span><span class="nx">GreetService</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-10" name="__codelineno-0-10" href="#__codelineno-0-10"></a><span class="w"> </span><span class="cm">/**</span>
<a id="__codelineno-0-11" name="__codelineno-0-11" href="#__codelineno-0-11"></a><span class="cm"> * GreetService.Greet</span>
<a id="__codelineno-0-12" name="__codelineno-0-12" href="#__codelineno-0-12"></a><span class="cm"> * Greet greets a person</span>
<a id="__codelineno-0-13" name="__codelineno-0-13" href="#__codelineno-0-13"></a><span class="cm"> * @param name {string}</span>
<a id="__codelineno-0-14" name="__codelineno-0-14" href="#__codelineno-0-14"></a><span class="cm"> * @returns {Promise&lt;string&gt;}</span>
<a id="__codelineno-0-15" name="__codelineno-0-15" href="#__codelineno-0-15"></a><span class="cm"> **/</span>
<a id="__codelineno-0-16" name="__codelineno-0-16" href="#__codelineno-0-16"></a><span class="w"> </span><span class="nx">Greet</span><span class="o">:</span><span class="w"> </span><span class="kd">function</span><span class="w"> </span><span class="p">(</span><span class="nx">name</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-17" name="__codelineno-0-17" href="#__codelineno-0-17"></a><span class="w"> </span><span class="nx">wails</span><span class="p">.</span><span class="nx">CallByID</span><span class="p">(</span><span class="mf">1411160069</span><span class="p">,</span><span class="w"> </span><span class="p">...</span><span class="nb">Array</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">slice</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="nx">arguments</span><span class="p">,</span><span class="w"> </span><span class="mf">0</span><span class="p">));</span>
<a id="__codelineno-0-18" name="__codelineno-0-18" href="#__codelineno-0-18"></a><span class="w"> </span><span class="p">},</span>
<a id="__codelineno-0-19" name="__codelineno-0-19" href="#__codelineno-0-19"></a>
<a id="__codelineno-0-20" name="__codelineno-0-20" href="#__codelineno-0-20"></a><span class="w"> </span><span class="cm">/**</span>
<a id="__codelineno-0-21" name="__codelineno-0-21" href="#__codelineno-0-21"></a><span class="cm"> * GreetService.GreetPerson</span>
<a id="__codelineno-0-22" name="__codelineno-0-22" href="#__codelineno-0-22"></a><span class="cm"> * GreetPerson greets a person</span>
<a id="__codelineno-0-23" name="__codelineno-0-23" href="#__codelineno-0-23"></a><span class="cm"> * @param person {main.Person}</span>
<a id="__codelineno-0-24" name="__codelineno-0-24" href="#__codelineno-0-24"></a><span class="cm"> * @returns {Promise&lt;string&gt;}</span>
<a id="__codelineno-0-25" name="__codelineno-0-25" href="#__codelineno-0-25"></a><span class="cm"> **/</span>
<a id="__codelineno-0-26" name="__codelineno-0-26" href="#__codelineno-0-26"></a><span class="w"> </span><span class="nx">GreetPerson</span><span class="o">:</span><span class="w"> </span><span class="kd">function</span><span class="w"> </span><span class="p">(</span><span class="nx">person</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-27" name="__codelineno-0-27" href="#__codelineno-0-27"></a><span class="w"> </span><span class="nx">wails</span><span class="p">.</span><span class="nx">CallByID</span><span class="p">(</span><span class="mf">4021313248</span><span class="p">,</span><span class="w"> </span><span class="p">...</span><span class="nb">Array</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">slice</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="nx">arguments</span><span class="p">,</span><span class="w"> </span><span class="mf">0</span><span class="p">));</span>
<a id="__codelineno-0-28" name="__codelineno-0-28" href="#__codelineno-0-28"></a><span class="w"> </span><span class="p">},</span>
<a id="__codelineno-0-29" name="__codelineno-0-29" href="#__codelineno-0-29"></a><span class="w"> </span><span class="p">},</span>
<a id="__codelineno-0-30" name="__codelineno-0-30" href="#__codelineno-0-30"></a><span class="p">};</span>
</code></pre></div>
<p>Bound methods are obfuscated by default, and are identified using uint32 IDs,
calculated using the
<a href="https://en.wikipedia.org/wiki/Fowler%E2%80%93Noll%E2%80%93Vo_hash_function">FNV hashing algorithm</a>.
This is to prevent the method name from being exposed in production builds. In
debug mode, the method IDs are logged along with the calculated ID of the method
to aid in debugging. If you wish to add an extra layer of obfuscation, you can
use the <code>BindAliases</code> option. This allows you to specify a map of alias IDs to
method IDs. When the frontend calls a method using an ID, the method ID will be
looked up in the alias map first for a match. If it does not find it, it assumes
it's a standard method ID and tries to find the method in the usual way.</p>
<p>Example:</p>
<div class="highlight"><pre><span></span><code><a id="__codelineno-1-1" name="__codelineno-1-1" href="#__codelineno-1-1"></a><span class="w"> </span><span class="nx">app</span><span class="w"> </span><span class="o">:=</span><span class="w"> </span><span class="nx">application</span><span class="p">.</span><span class="nx">New</span><span class="p">(</span><span class="nx">application</span><span class="p">.</span><span class="nx">Options</span><span class="p">{</span>
<a id="__codelineno-1-2" name="__codelineno-1-2" href="#__codelineno-1-2"></a><span class="w"> </span><span class="nx">Bind</span><span class="p">:</span><span class="w"> </span><span class="p">[]</span><span class="kt">any</span><span class="p">{</span>
<a id="__codelineno-1-3" name="__codelineno-1-3" href="#__codelineno-1-3"></a><span class="w"> </span><span class="o">&amp;</span><span class="nx">GreetService</span><span class="p">{},</span>
<a id="__codelineno-1-4" name="__codelineno-1-4" href="#__codelineno-1-4"></a><span class="w"> </span><span class="p">},</span>
<a id="__codelineno-1-5" name="__codelineno-1-5" href="#__codelineno-1-5"></a><span class="w"> </span><span class="nx">BindAliases</span><span class="p">:</span><span class="w"> </span><span class="kd">map</span><span class="p">[</span><span class="kt">uint32</span><span class="p">]</span><span class="kt">uint32</span><span class="p">{</span>
<a id="__codelineno-1-6" name="__codelineno-1-6" href="#__codelineno-1-6"></a><span class="w"> </span><span class="mi">1</span><span class="p">:</span><span class="w"> </span><span class="mi">1411160069</span><span class="p">,</span>
<a id="__codelineno-1-7" name="__codelineno-1-7" href="#__codelineno-1-7"></a><span class="w"> </span><span class="mi">2</span><span class="p">:</span><span class="w"> </span><span class="mi">4021313248</span><span class="p">,</span>
<a id="__codelineno-1-8" name="__codelineno-1-8" href="#__codelineno-1-8"></a><span class="w"> </span><span class="p">},</span>
<a id="__codelineno-1-9" name="__codelineno-1-9" href="#__codelineno-1-9"></a><span class="w"> </span><span class="nx">Assets</span><span class="p">:</span><span class="w"> </span><span class="nx">application</span><span class="p">.</span><span class="nx">AssetOptions</span><span class="p">{</span>
<a id="__codelineno-1-10" name="__codelineno-1-10" href="#__codelineno-1-10"></a><span class="w"> </span><span class="nx">Handler</span><span class="p">:</span><span class="w"> </span><span class="nx">application</span><span class="p">.</span><span class="nx">AssetFileServerFS</span><span class="p">(</span><span class="nx">assets</span><span class="p">),</span>
<a id="__codelineno-1-11" name="__codelineno-1-11" href="#__codelineno-1-11"></a><span class="w"> </span><span class="p">},</span>
<a id="__codelineno-1-12" name="__codelineno-1-12" href="#__codelineno-1-12"></a><span class="w"> </span><span class="nx">Mac</span><span class="p">:</span><span class="w"> </span><span class="nx">application</span><span class="p">.</span><span class="nx">MacOptions</span><span class="p">{</span>
<a id="__codelineno-1-13" name="__codelineno-1-13" href="#__codelineno-1-13"></a><span class="w"> </span><span class="nx">ApplicationShouldTerminateAfterLastWindowClosed</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="p">,</span>
<a id="__codelineno-1-14" name="__codelineno-1-14" href="#__codelineno-1-14"></a><span class="w"> </span><span class="p">},</span>
<a id="__codelineno-1-15" name="__codelineno-1-15" href="#__codelineno-1-15"></a><span class="w"> </span><span class="p">})</span>
</code></pre></div>
<p>We can now call using this alias in the frontend: <code>wails.Call(1, "world!")</code>.</p>
<h3 id="insecure-calls">Insecure calls<a class="headerlink" href="#insecure-calls" title="Permanent link">#</a></h3>
<p>If you don't mind your calls being available in plain text in your binary and
have no intention of using <a href="https://github.com/burrowers/garble">garble</a>, then
you can use the insecure <code>wails.CallByName()</code> method. This method takes the
fully qualified name of the method to call and the arguments to pass to it.
Example:</p>
<div class="highlight"><pre><span></span><code>```go
wails.CallByName(&quot;main.GreetService.Greet&quot;, &quot;world!&quot;)
```
</code></pre></div>
<div class="admonition danger">
<p class="admonition-title">Danger</p>
<p>This is only provided as a convenience method for development. It is not recommended to use this in production.</p>
</div>
<h2 id="drag-and-drop">Drag and Drop<a class="headerlink" href="#drag-and-drop" title="Permanent link">#</a></h2>
<p>Native drag and drop can be enabled per-window. Simply set the
<code>EnableDragAndDrop</code> window config option to <code>true</code> and the window will allow
files to be dragged onto it. When this happens, the <code>events.FilesDropped</code> event
will be emitted. The filenames can then be retrieved from the
<code>WindowEvent.Context()</code> using the <code>DroppedFiles()</code> method. This returns a slice
of strings containing the filenames.</p>
<h2 id="context-menus">Context Menus<a class="headerlink" href="#context-menus" title="Permanent link">#</a></h2>
<p>Context menus are contextual menus that are shown when the user right-clicks on
an element. Creating a context menu is the same as creating a standard menu , by
using <code>app.NewMenu()</code>. To make the context menu available to a window, call
<code>window.RegisterContextMenu(name, menu)</code>. The name will be the id of the context
menu and used by the frontend.</p>
<p>To indicate that an element has a context menu, add the <code>data-contextmenu</code>
attribute to the element. The value of this attribute should be the name of a
context menu previously registered with the window.</p>
<p>It is possible to register a context menu at the application level, making it
available to all windows. This can be done using
<code>app.RegisterContextMenu(name, menu)</code>. If a context menu cannot be found at the
window level, the application context menus will be checked. A demo of this can
be found in <code>v3/examples/contextmenus</code>.</p>
<h2 id="dialogs">Dialogs<a class="headerlink" href="#dialogs" title="Permanent link">#</a></h2>
<p>Dialogs are now available in JavaScript!</p>
<h3 id="windows">Windows<a class="headerlink" href="#windows" title="Permanent link">#</a></h3>
<p>Dialog buttons in Windows are not configurable and are constant depending on the
type of dialog. To trigger a callback when a button is pressed, create a button
with the same name as the button you wish to have the callback attached to.
Example: Create a button with the label <code>Ok</code> and use <code>OnClick()</code> to set the
callback method:</p>
<div class="highlight"><pre><span></span><code><a id="__codelineno-3-1" name="__codelineno-3-1" href="#__codelineno-3-1"></a><span class="w"> </span><span class="nx">dialog</span><span class="w"> </span><span class="o">:=</span><span class="w"> </span><span class="nx">app</span><span class="p">.</span><span class="nx">QuestionDialog</span><span class="p">().</span>
<a id="__codelineno-3-2" name="__codelineno-3-2" href="#__codelineno-3-2"></a><span class="w"> </span><span class="nx">SetTitle</span><span class="p">(</span><span class="s">&quot;Update&quot;</span><span class="p">).</span>
<a id="__codelineno-3-3" name="__codelineno-3-3" href="#__codelineno-3-3"></a><span class="w"> </span><span class="nx">SetMessage</span><span class="p">(</span><span class="s">&quot;The cancel button is selected when pressing escape&quot;</span><span class="p">)</span>
<a id="__codelineno-3-4" name="__codelineno-3-4" href="#__codelineno-3-4"></a><span class="w"> </span><span class="nx">ok</span><span class="w"> </span><span class="o">:=</span><span class="w"> </span><span class="nx">dialog</span><span class="p">.</span><span class="nx">AddButton</span><span class="p">(</span><span class="s">&quot;Ok&quot;</span><span class="p">)</span>
<a id="__codelineno-3-5" name="__codelineno-3-5" href="#__codelineno-3-5"></a><span class="w"> </span><span class="nx">ok</span><span class="p">.</span><span class="nx">OnClick</span><span class="p">(</span><span class="kd">func</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-3-6" name="__codelineno-3-6" href="#__codelineno-3-6"></a><span class="w"> </span><span class="c1">// Do something</span>
<a id="__codelineno-3-7" name="__codelineno-3-7" href="#__codelineno-3-7"></a><span class="w"> </span><span class="p">})</span>
<a id="__codelineno-3-8" name="__codelineno-3-8" href="#__codelineno-3-8"></a><span class="w"> </span><span class="nx">no</span><span class="w"> </span><span class="o">:=</span><span class="w"> </span><span class="nx">dialog</span><span class="p">.</span><span class="nx">AddButton</span><span class="p">(</span><span class="s">&quot;Cancel&quot;</span><span class="p">)</span>
<a id="__codelineno-3-9" name="__codelineno-3-9" href="#__codelineno-3-9"></a><span class="w"> </span><span class="nx">dialog</span><span class="p">.</span><span class="nx">SetDefaultButton</span><span class="p">(</span><span class="nx">ok</span><span class="p">)</span>
<a id="__codelineno-3-10" name="__codelineno-3-10" href="#__codelineno-3-10"></a><span class="w"> </span><span class="nx">dialog</span><span class="p">.</span><span class="nx">SetCancelButton</span><span class="p">(</span><span class="nx">no</span><span class="p">)</span>
<a id="__codelineno-3-11" name="__codelineno-3-11" href="#__codelineno-3-11"></a><span class="w"> </span><span class="nx">dialog</span><span class="p">.</span><span class="nx">Show</span><span class="p">()</span>
</code></pre></div>
<h2 id="clipboard">ClipBoard<a class="headerlink" href="#clipboard" title="Permanent link">#</a></h2>
<p>The clipboard API has been simplified. There is now a single <code>Clipboard</code> object
that can be used to read and write to the clipboard. The <code>Clipboard</code> object is
available in both Go and JS. <code>SetText()</code> to set the text and <code>Text()</code> to get the
text.</p>
<h2 id="wails-markup-language-wml">Wails Markup Language (WML)<a class="headerlink" href="#wails-markup-language-wml" title="Permanent link">#</a></h2>
<p>The Wails Markup Language is a simple markup language that allows you to add
functionality to standard HTML elements without the use of Javascript.</p>
<p>The following tags are currently supported:</p>
<h3 id="data-wml-event"><code>data-wml-event</code><a class="headerlink" href="#data-wml-event" title="Permanent link">#</a></h3>
<p>This specifies that a Wails event will be emitted when the element is clicked.
The value of the attribute should be the name of the event to emit.</p>
<p>Example:</p>
<div class="highlight"><pre><span></span><code><a id="__codelineno-4-1" name="__codelineno-4-1" href="#__codelineno-4-1"></a><span class="p">&lt;</span><span class="nt">button</span> <span class="na">data-wml-event</span><span class="o">=</span><span class="s">&quot;myevent&quot;</span><span class="p">&gt;</span>Click Me<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>
</code></pre></div>
<p>Sometimes you need the user to confirm an action. This can be done by adding the
<code>data-wml-confirm</code> attribute to the element. The value of this attribute will be
the message to display to the user.</p>
<p>Example:</p>
<div class="highlight"><pre><span></span><code><a id="__codelineno-5-1" name="__codelineno-5-1" href="#__codelineno-5-1"></a><span class="p">&lt;</span><span class="nt">button</span> <span class="na">data-wml-event</span><span class="o">=</span><span class="s">&quot;delete-all-items&quot;</span> <span class="na">data-wml-confirm</span><span class="o">=</span><span class="s">&quot;Are you sure?&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-5-2" name="__codelineno-5-2" href="#__codelineno-5-2"></a> Delete All Items
<a id="__codelineno-5-3" name="__codelineno-5-3" href="#__codelineno-5-3"></a><span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>
</code></pre></div>
<h3 id="data-wml-window"><code>data-wml-window</code><a class="headerlink" href="#data-wml-window" title="Permanent link">#</a></h3>
<p>Any <code>wails.window</code> method can be called by adding the <code>data-wml-window</code>
attribute to an element. The value of the attribute should be the name of the
method to call. The method name should be in the same case as the method.</p>
<div class="highlight"><pre><span></span><code><a id="__codelineno-6-1" name="__codelineno-6-1" href="#__codelineno-6-1"></a><span class="p">&lt;</span><span class="nt">button</span> <span class="na">data-wml-window</span><span class="o">=</span><span class="s">&quot;Close&quot;</span><span class="p">&gt;</span>Close Window<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>
</code></pre></div>
<h3 id="data-wml-trigger"><code>data-wml-trigger</code><a class="headerlink" href="#data-wml-trigger" title="Permanent link">#</a></h3>
<p>This attribute specifies which javascript event should trigger the action. The
default is <code>click</code>.</p>
<div class="highlight"><pre><span></span><code><a id="__codelineno-7-1" name="__codelineno-7-1" href="#__codelineno-7-1"></a><span class="p">&lt;</span><span class="nt">button</span> <span class="na">data-wml-event</span><span class="o">=</span><span class="s">&quot;hover-box&quot;</span> <span class="na">data-wml-trigger</span><span class="o">=</span><span class="s">&quot;mouseover&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-7-2" name="__codelineno-7-2" href="#__codelineno-7-2"></a> Hover over me!
<a id="__codelineno-7-3" name="__codelineno-7-3" href="#__codelineno-7-3"></a><span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>
</code></pre></div>
<h2 id="plugins">Plugins<a class="headerlink" href="#plugins" title="Permanent link">#</a></h2>
<p>Plugins are a way to extend the functionality of your Wails application.</p>
<h3 id="creating-a-plugin">Creating a plugin<a class="headerlink" href="#creating-a-plugin" title="Permanent link">#</a></h3>
<p>Plugins are standard Go structure that adhere to the following interface:</p>
<div class="highlight"><pre><span></span><code><a id="__codelineno-8-1" name="__codelineno-8-1" href="#__codelineno-8-1"></a><span class="kd">type</span><span class="w"> </span><span class="nx">Plugin</span><span class="w"> </span><span class="kd">interface</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-8-2" name="__codelineno-8-2" href="#__codelineno-8-2"></a><span class="w"> </span><span class="nx">Name</span><span class="p">()</span><span class="w"> </span><span class="kt">string</span>
<a id="__codelineno-8-3" name="__codelineno-8-3" href="#__codelineno-8-3"></a><span class="w"> </span><span class="nx">Init</span><span class="p">(</span><span class="o">*</span><span class="nx">application</span><span class="p">.</span><span class="nx">App</span><span class="p">)</span><span class="w"> </span><span class="kt">error</span>
<a id="__codelineno-8-4" name="__codelineno-8-4" href="#__codelineno-8-4"></a><span class="w"> </span><span class="nx">Shutdown</span><span class="p">()</span>
<a id="__codelineno-8-5" name="__codelineno-8-5" href="#__codelineno-8-5"></a><span class="w"> </span><span class="nx">CallableByJS</span><span class="p">()</span><span class="w"> </span><span class="p">[]</span><span class="kt">string</span>
<a id="__codelineno-8-6" name="__codelineno-8-6" href="#__codelineno-8-6"></a><span class="w"> </span><span class="nx">InjectJS</span><span class="p">()</span><span class="w"> </span><span class="kt">string</span>
<a id="__codelineno-8-7" name="__codelineno-8-7" href="#__codelineno-8-7"></a><span class="p">}</span>
</code></pre></div>
<p>The <code>Name()</code> method returns the name of the plugin. This is used for logging
purposes.</p>
<p>The <code>Init(*application.App) error</code> method is called when the plugin is loaded.
The <code>*application.App</code> parameter is the application that the plugin is being
loaded into. Any errors will prevent the application from starting.</p>
<p>The <code>Shutdown()</code> method is called when the application is shutting down.</p>
<p>The <code>CallableByJS()</code> method returns a list of exported functions that can be
called from the frontend. These method names must exactly match the names of the
methods exported by the plugin.</p>
<p>The <code>InjectJS()</code> method returns JavaScript that should be injected into all
windows as they are created. This is useful for adding custom JavaScript
functions that complement the plugin.</p>
<h4 id="enums">Enums<a class="headerlink" href="#enums" title="Permanent link">#</a></h4>
<p>In Go, enums are often defined as a type and a set of constants. For example:</p>
<div class="highlight"><pre><span></span><code><a id="__codelineno-9-1" name="__codelineno-9-1" href="#__codelineno-9-1"></a><span class="kd">type</span><span class="w"> </span><span class="nx">MyEnum</span><span class="w"> </span><span class="kt">int</span>
<a id="__codelineno-9-2" name="__codelineno-9-2" href="#__codelineno-9-2"></a>
<a id="__codelineno-9-3" name="__codelineno-9-3" href="#__codelineno-9-3"></a><span class="kd">const</span><span class="w"> </span><span class="p">(</span>
<a id="__codelineno-9-4" name="__codelineno-9-4" href="#__codelineno-9-4"></a><span class="w"> </span><span class="nx">MyEnumOne</span><span class="w"> </span><span class="nx">MyEnum</span><span class="w"> </span><span class="p">=</span><span class="w"> </span><span class="kc">iota</span>
<a id="__codelineno-9-5" name="__codelineno-9-5" href="#__codelineno-9-5"></a><span class="w"> </span><span class="nx">MyEnumTwo</span>
<a id="__codelineno-9-6" name="__codelineno-9-6" href="#__codelineno-9-6"></a><span class="w"> </span><span class="nx">MyEnumThree</span>
<a id="__codelineno-9-7" name="__codelineno-9-7" href="#__codelineno-9-7"></a><span class="p">)</span>
</code></pre></div>
<p>Due to incompatibility between Go and JavaScript, custom types cannot be used in
this way. The best strategy is to use a type alias for float64:</p>
<div class="highlight"><pre><span></span><code><a id="__codelineno-10-1" name="__codelineno-10-1" href="#__codelineno-10-1"></a><span class="kd">type</span><span class="w"> </span><span class="nx">MyEnum</span><span class="w"> </span><span class="p">=</span><span class="w"> </span><span class="kt">float64</span>
<a id="__codelineno-10-2" name="__codelineno-10-2" href="#__codelineno-10-2"></a>
<a id="__codelineno-10-3" name="__codelineno-10-3" href="#__codelineno-10-3"></a><span class="kd">const</span><span class="w"> </span><span class="p">(</span>
<a id="__codelineno-10-4" name="__codelineno-10-4" href="#__codelineno-10-4"></a><span class="w"> </span><span class="nx">MyEnumOne</span><span class="w"> </span><span class="nx">MyEnum</span><span class="w"> </span><span class="p">=</span><span class="w"> </span><span class="kc">iota</span>
<a id="__codelineno-10-5" name="__codelineno-10-5" href="#__codelineno-10-5"></a><span class="w"> </span><span class="nx">MyEnumTwo</span>
<a id="__codelineno-10-6" name="__codelineno-10-6" href="#__codelineno-10-6"></a><span class="w"> </span><span class="nx">MyEnumThree</span>
<a id="__codelineno-10-7" name="__codelineno-10-7" href="#__codelineno-10-7"></a><span class="p">)</span>
</code></pre></div>
<p>In Javascript, you can then use the following:</p>
<div class="highlight"><pre><span></span><code><a id="__codelineno-11-1" name="__codelineno-11-1" href="#__codelineno-11-1"></a><span class="kd">const</span><span class="w"> </span><span class="nx">MyEnum</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-11-2" name="__codelineno-11-2" href="#__codelineno-11-2"></a><span class="w"> </span><span class="nx">MyEnumOne</span><span class="o">:</span><span class="w"> </span><span class="mf">0</span><span class="p">,</span>
<a id="__codelineno-11-3" name="__codelineno-11-3" href="#__codelineno-11-3"></a><span class="w"> </span><span class="nx">MyEnumTwo</span><span class="o">:</span><span class="w"> </span><span class="mf">1</span><span class="p">,</span>
<a id="__codelineno-11-4" name="__codelineno-11-4" href="#__codelineno-11-4"></a><span class="w"> </span><span class="nx">MyEnumThree</span><span class="o">:</span><span class="w"> </span><span class="mf">2</span><span class="p">,</span>
<a id="__codelineno-11-5" name="__codelineno-11-5" href="#__codelineno-11-5"></a><span class="p">};</span>
</code></pre></div>
<ul>
<li>Why use <code>float64</code>? Can't we use <code>int</code>?<ul>
<li>Because JavaScript doesn't have a concept of <code>int</code>. Everything is a
<code>number</code>, which translates to <code>float64</code> in Go. There are also restrictions
on casting types in Go's reflection package, which means using <code>int</code> doesn't
work.</li>
</ul>
</li>
</ul>
<h3 id="logging">Logging<a class="headerlink" href="#logging" title="Permanent link">#</a></h3>
<p>Logging in v2 was confusing as both application logs and system (internal) logs
were using the same logger. We have simplified this as follows:</p>
<ul>
<li>Internal logs are now handled using the standard Go <code>slog</code> logger. This is
configured using the <code>logger</code> option in the application options. By default,
this uses the <a href="https://github.com/lmittmann/tint">tint</a> logger.</li>
<li>Application logs can now be achieved through the new <code>log</code> plugin which
utilises <code>slog</code> under the hood. This plugin provides a simple API for logging
to the console. It is available in both Go and JS.</li>
</ul>
<h3 id="misc">Misc<a class="headerlink" href="#misc" title="Permanent link">#</a></h3>
<h2 id="windows-application-options">Windows Application Options<a class="headerlink" href="#windows-application-options" title="Permanent link">#</a></h2>
<h3 id="wndprocinterceptor">WndProcInterceptor<a class="headerlink" href="#wndprocinterceptor" title="Permanent link">#</a></h3>
<p>If this is set, the WndProc will be intercepted and the function will be called.
This allows you to handle Windows messages directly. The function should have
the following signature:</p>
<div class="highlight"><pre><span></span><code><a id="__codelineno-12-1" name="__codelineno-12-1" href="#__codelineno-12-1"></a><span class="kd">func</span><span class="p">(</span><span class="nx">hwnd</span><span class="w"> </span><span class="kt">uintptr</span><span class="p">,</span><span class="w"> </span><span class="nx">msg</span><span class="w"> </span><span class="kt">uint32</span><span class="p">,</span><span class="w"> </span><span class="nx">wParam</span><span class="p">,</span><span class="w"> </span><span class="nx">lParam</span><span class="w"> </span><span class="kt">uintptr</span><span class="p">)</span><span class="w"> </span><span class="p">(</span><span class="nx">returnValue</span><span class="w"> </span><span class="kt">uintptr</span><span class="p">,</span><span class="w"> </span><span class="nx">shouldReturn</span><span class="p">)</span>
</code></pre></div>
<p>The <code>shouldReturn</code> value should be set to <code>true</code> if the returnValue should be
returned by the main wndProc method. If it is set to <code>false</code>, the return value
will be ignored and the message will continue to be processed by the main
wndProc method.</p>
<h2 id="hide-window-on-close-onbeforeclose">Hide Window on Close + OnBeforeClose<a class="headerlink" href="#hide-window-on-close-onbeforeclose" title="Permanent link">#</a></h2>
<p>In v2, there was the <code>HideWindowOnClose</code> flag to hide the window when it closed.
There was a logical overlap between this flag and the <code>OnBeforeClose</code> callback.
In v3, the <code>HideWindowOnClose</code> flag has been removed and the <code>OnBeforeClose</code>
callback has been renamed to <code>ShouldClose</code>. The <code>ShouldClose</code> callback is called
when the user attempts to close a window. If the callback returns <code>true</code>, the
window will close. If it returns <code>false</code>, the window will not close. This can be
used to hide the window instead of closing it.</p>
<h2 id="window-drag">Window Drag<a class="headerlink" href="#window-drag" title="Permanent link">#</a></h2>
<p>In v2, the <code>--wails-drag</code> attribute was used to indicate that an element could
be used to drag the window. In v3, this has been replaced with
<code>--webkit-app-region</code> to be more in line with the way other frameworks handle
this. The <code>--webkit-app-region</code> attribute can be set to any of the following
values:</p>
<ul>
<li><code>drag</code> - The element can be used to drag the window</li>
<li><code>no-drag</code> - The element cannot be used to drag the window</li>
</ul>
<p>We would have ideally liked to use <code>app-region</code>, however this is not supported
by the <code>getComputedStyle</code> call on webkit on macOS.</p>
</article>
</div>
<script>var tabs=__md_get("__tabs");if(Array.isArray(tabs))e:for(var set of document.querySelectorAll(".tabbed-set")){var tab,labels=set.querySelector(".tabbed-labels");for(tab of tabs)for(var label of labels.getElementsByTagName("label"))if(label.innerText.trim()===tab){var input=document.getElementById(label.htmlFor);input.checked=!0;continue e}}</script>
<script>var target=document.getElementById(location.hash.slice(1));target&&target.name&&(target.checked=target.name.startsWith("__tabbed_"))</script>
</div>
<button type="button" class="md-top md-icon" data-md-component="top" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8v12Z"/></svg>
Back to top
</button>
</main>
<footer class="md-footer">
<nav class="md-footer__inner md-grid" aria-label="Footer" >
<a href="../status/" class="md-footer__link md-footer__link--prev" aria-label="Previous: Status">
<div class="md-footer__button md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12Z"/></svg>
</div>
<div class="md-footer__title">
<span class="md-footer__direction">
Previous
</span>
<div class="md-ellipsis">
Status
</div>
</div>
</a>
<a href="../../roadmap/" class="md-footer__link md-footer__link--next" aria-label="Next: Roadmap">
<div class="md-footer__title">
<span class="md-footer__direction">
Next
</span>
<div class="md-ellipsis">
Roadmap
</div>
</div>
<div class="md-footer__button md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 11v2h12l-5.5 5.5 1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5 16 11H4Z"/></svg>
</div>
</a>
</nav>
<div class="md-footer-meta md-typeset">
<div class="md-footer-meta__inner md-grid">
<div class="md-copyright">
<div class="md-copyright__highlight">
Copyright © 2023 Lea Anthony
</div>
Made with
<a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
Material for MkDocs Insiders
</a>
</div>
<div class="md-social">
<a href="https://github.com/wailsapp/wails" target="_blank" rel="noopener" title="github.com" class="md-social__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 512"><!--! Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M186.1 328.7c0 20.9-10.9 55.1-36.7 55.1s-36.7-34.2-36.7-55.1 10.9-55.1 36.7-55.1 36.7 34.2 36.7 55.1zM480 278.2c0 31.9-3.2 65.7-17.5 95-37.9 76.6-142.1 74.8-216.7 74.8-75.8 0-186.2 2.7-225.6-74.8-14.6-29-20.2-63.1-20.2-95 0-41.9 13.9-81.5 41.5-113.6-5.2-15.8-7.7-32.4-7.7-48.8 0-21.5 4.9-32.3 14.6-51.8 45.3 0 74.3 9 108.8 36 29-6.9 58.8-10 88.7-10 27 0 54.2 2.9 80.4 9.2 34-26.7 63-35.2 107.8-35.2 9.8 19.5 14.6 30.3 14.6 51.8 0 16.4-2.6 32.7-7.7 48.2 27.5 32.4 39 72.3 39 114.2zm-64.3 50.5c0-43.9-26.7-82.6-73.5-82.6-18.9 0-37 3.4-56 6-14.9 2.3-29.8 3.2-45.1 3.2-15.2 0-30.1-.9-45.1-3.2-18.7-2.6-37-6-56-6-46.8 0-73.5 38.7-73.5 82.6 0 87.8 80.4 101.3 150.4 101.3h48.2c70.3 0 150.6-13.4 150.6-101.3zm-82.6-55.1c-25.8 0-36.7 34.2-36.7 55.1s10.9 55.1 36.7 55.1 36.7-34.2 36.7-55.1-10.9-55.1-36.7-55.1z"/></svg>
</a>
<a href="https://twitter.com/wailsapp" target="_blank" rel="noopener" title="twitter.com" class="md-social__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg>
</a>
<a href="https://discord.gg/JDdSxwjhGf" target="_blank" rel="noopener" title="discord.gg" class="md-social__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M524.531 69.836a1.5 1.5 0 0 0-.764-.7A485.065 485.065 0 0 0 404.081 32.03a1.816 1.816 0 0 0-1.923.91 337.461 337.461 0 0 0-14.9 30.6 447.848 447.848 0 0 0-134.426 0 309.541 309.541 0 0 0-15.135-30.6 1.89 1.89 0 0 0-1.924-.91 483.689 483.689 0 0 0-119.688 37.107 1.712 1.712 0 0 0-.788.676C39.068 183.651 18.186 294.69 28.43 404.354a2.016 2.016 0 0 0 .765 1.375 487.666 487.666 0 0 0 146.825 74.189 1.9 1.9 0 0 0 2.063-.676A348.2 348.2 0 0 0 208.12 430.4a1.86 1.86 0 0 0-1.019-2.588 321.173 321.173 0 0 1-45.868-21.853 1.885 1.885 0 0 1-.185-3.126 251.047 251.047 0 0 0 9.109-7.137 1.819 1.819 0 0 1 1.9-.256c96.229 43.917 200.41 43.917 295.5 0a1.812 1.812 0 0 1 1.924.233 234.533 234.533 0 0 0 9.132 7.16 1.884 1.884 0 0 1-.162 3.126 301.407 301.407 0 0 1-45.89 21.83 1.875 1.875 0 0 0-1 2.611 391.055 391.055 0 0 0 30.014 48.815 1.864 1.864 0 0 0 2.063.7A486.048 486.048 0 0 0 610.7 405.729a1.882 1.882 0 0 0 .765-1.352c12.264-126.783-20.532-236.912-86.934-334.541ZM222.491 337.58c-28.972 0-52.844-26.587-52.844-59.239s23.409-59.241 52.844-59.241c29.665 0 53.306 26.82 52.843 59.239 0 32.654-23.41 59.241-52.843 59.241Zm195.38 0c-28.971 0-52.843-26.587-52.843-59.239s23.409-59.241 52.843-59.241c29.667 0 53.307 26.82 52.844 59.239 0 32.654-23.177 59.241-52.844 59.241Z"/></svg>
</a>
</div>
</div>
</div>
</footer>
</div>
<div class="md-dialog" data-md-component="dialog">
<div class="md-dialog__inner md-typeset"></div>
</div>
<script id="__config" type="application/json">{"base": "../..", "features": ["navigation.tabs", "navigation.sections", "navigation.expand", "navigation.instant.prefetch", "navigation.top", "navigation.footer", "navigation.path", "navigation.prune", "toc.integrate", "toc.follow", "search.suggest", "search.highlight", "search.share", "content.tabs.link", "content.tabs.annotation", "content.tabs.copy", "content.code.copy", "content.action.edit"], "search": "../../assets/javascripts/workers/search.1e90e0fb.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}}</script>
<script src="../../assets/javascripts/bundle.13690f9d.min.js"></script>
<!-- Extra JavaScript (can't be set in mkdocs.yml due to content hash) -->
<script src="../../assets/javascripts/custom.js"></script>
</body>
</html>