fix react template css (#3477)

changelog

.github/workflows/build-and-test-alpha.yml

@@ -23,7 +23,7 @@ jobs:
 
       - name: Install linux dependencies
         if: matrix.os == 'ubuntu-latest'
-        run: sudo apt-get update -y && sudo apt-get install -y libgtk-3-dev libwebkit2gtk-4.0-dev javascriptcoregtk-4.1-dev build-essential pkg-config
+        run: sudo apt-get update -y && sudo apt-get install -y libgtk-3-dev libwebkit2gtk-4.1-dev javascriptcoregtk-4.1-dev build-essential pkg-config
 
       - name: Setup Go
         uses: actions/setup-go@v3
@@ -122,7 +122,7 @@ jobs:
 
       - name: Install linux dependencies
         if: matrix.os == 'ubuntu-latest'
-        run: sudo apt-get update -y && sudo apt-get install -y libgtk-3-dev libwebkit2gtk-4.0-dev javascriptcoregtk-4.1-dev build-essential pkg-config
+        run: sudo apt-get update -y && sudo apt-get install -y libgtk-3-dev libwebkit2gtk-4.1-dev javascriptcoregtk-4.1-dev build-essential pkg-config
 
       - name: Build Wails3 CLI
         run: |

.github/workflows/pr.yml

@@ -62,8 +62,12 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v3
 
-      - name: Install linux dependencies
-        if: matrix.os == 'ubuntu-latest'
+      - name: Install linux dependencies (v3)
+        if:  ${{ matrix.os == 'ubuntu-latest' && github.event.pull_request.base.ref == 'v3-alpha' }}
+        run: sudo apt-get update -y && sudo apt-get install -y libgtk-3-dev libwebkit2gtk-4.1-dev build-essential pkg-config
+
+      - name: Install linux dependencies (v2)
+        if:  ${{ matrix.os == 'ubuntu-latest' && github.event.pull_request.base.ref == 'master' }}
         run: sudo apt-get update -y && sudo apt-get install -y libgtk-3-dev libwebkit2gtk-4.0-dev build-essential pkg-config
 
       - name: Setup Go
@@ -71,14 +75,28 @@ jobs:
         with:
           go-version: ${{ matrix.go-version }}
 
-      - name: Run tests (mac)
-        if: matrix.os == 'macos-latest'
+      - name: Run tests (mac) | v2
+        if: ${{ matrix.os == 'macos-latest' && github.event.pull_request.base.ref == 'master' }}
         env:
           CGO_LDFLAGS: -framework UniformTypeIdentifiers -mmacosx-version-min=10.13
+          CGO_CFLAGS: -mmacosx-version-min=10.13
         working-directory: ./v2
         run: go test -v ./...
 
-      - name: Run tests (!mac)
-        if: matrix.os != 'macos-latest'
-        working-directory: ./v2
+      - name: Run tests (!mac) | v2
+        if: ${{ matrix.os != 'macos-latest' && github.event.pull_request.base.ref == 'master' }}
+        working-directory:  ./v2
+        run: go test -v ./...
+
+      - name: Run tests (mac) | v3
+        if: ${{ matrix.os == 'macos-latest' && github.event.pull_request.base.ref == 'v3-alpha' }}
+        env:
+          CGO_LDFLAGS: -framework UniformTypeIdentifiers -mmacosx-version-min=10.13
+          CGO_CFLAGS: -mmacosx-version-min=10.13
+        working-directory: ./v3
+        run: go test -v ./...
+
+      - name: Run tests (!mac) | v3
+        if: ${{ matrix.os != 'macos-latest' && github.event.pull_request.base.ref == 'v3-alpha' }}
+        working-directory:  ./v3
         run: go test -v ./...

.github/workflows/publish-npm.yml

@@ -0,0 +1,20 @@
+on:
+  push:
+    branches: ['v3-alpha']
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v3
+        with:
+          node-version: "20"
+      - run: npm ci
+        working-directory: v3/internal/runtime/desktop/@wailsio/runtime
+
+      - uses: JS-DevTools/npm-publish@v3
+        with:
+          package: v3/internal/runtime/desktop/@wailsio/runtime
+          access: public
+          token: ${{ secrets.NPM_TOKEN }}

mkdocs-website/docs/en/changelog.md

@@ -31,9 +31,13 @@ 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)
+- Add flag `-port` to dev command and support environment variable `WAILS_VITE_PORT` by [@abichinger](https://github.com/abichinger) in [#3429](https://github.com/wailsapp/wails/pull/3429)
+- Add tests for bound method calls by [@abichinger](https://github.com/abichinger) in [#3431](https://github.com/wailsapp/wails/pull/3431)
 
 ### Fixed
 
+- Fixed react template css to show footer by [atterpac](https://github.com/atterpac) in [#3477](https://github.com/wailsapp/wails/pull/3477)
 - Fixed zombie processes when working in devmode by updating to latest refresh by [Atterpac](https://github.com/atterpac) in [#3320](https://github.com/wailsapp/wails/pull/3320).
 - Fixed appimage webkit file sourcing by [Atterpac](https://github.com/atterpac) in [#3306](https://github.com/wailsapp/wails/pull/3306).
 - Fixed Doctor apt package verify by [Atterpac](https://github.com/Atterpac) in [#2972](https://github.com/wailsapp/wails/pull/2972).
@@ -56,9 +60,16 @@ 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)
+- Fix registering events causing a nil map assignment by [@hfoxy](https://github.com/hfoxy) in [#3426](https://github.com/wailsapp/wails/pull/3426)
+- Fix unmarshaling of bound method parameters by [@fbbdev](https://github.com/fbbdev) in [#3431](https://github.com/wailsapp/wails/pull/3431)
+- Fix handling of multiple return values from bound methods by [@fbbdev](https://github.com/fbbdev) in [#3431](https://github.com/wailsapp/wails/pull/3431)
+- Fix doctor detection of npm that is not installed with system package manager by [@pekim](https://github.com/pekim) in [#3458](https://github.com/wailsapp/wails/pull/3458)
 
 ### Changed
 
+- Update linux webkit dependency to webkit2gtk-4.1 over webkitgtk2-4.0 to support Ubuntu 24.04 LTS by [atterpac](https://github.com/atterpac) in [#3461](https://github.com/wailsapp/wails/pull/3461)
 - The bundled JS runtime script is now an ESM module: script tags importing it must have the `type="module"` attribute. By [@fbbdev](https://github.com/fbbdev) in [#3295](https://github.com/wailsapp/wails/pull/3295)
 - The `@wailsio/runtime` package does not publish its API on the `window.wails` object, and does not start the WML system. This has been done to improve encapsulation. The WML system can be started manually if desired by calling the new `WML.Enable` method. The bundled JS runtime script still performs both operations automatically. By [@fbbdev](https://github.com/fbbdev) in [#3295](https://github.com/wailsapp/wails/pull/3295)
 - The Window API module `@wailsio/runtime/src/window` now exposes the containing window object as a default export. It is not possible anymore to import individual methods through ESM named or namespace import syntax.

mkdocs-website/docs/en/learn/plugins.md

@@ -0,0 +1,176 @@
+# 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.

mkdocs-website/mkdocs.yml

@@ -141,6 +141,7 @@ nav:
     - Next Steps: getting-started/next-steps.md
     - Learn More:
         - Runtime: learn/runtime.md
+        - Plugins: learn/plugins.md
     - Feedback: getting-started/feedback.md
   - Feedback: getting-started/feedback.md
   - What's New in v3?: whats-new.md

v2/internal/staticanalysis/test/standard/go.mod

@@ -1,8 +1,8 @@
 module changeme
 
-go 1.18
+go 1.22
 
-require github.com/wailsapp/wails/v2 v2.3.1
+require github.com/wailsapp/wails/v2 v2.8.0
 
 require (
 	github.com/bep/debounce v1.2.1 // indirect

v3/Taskfile.yaml

@@ -132,12 +132,28 @@ tasks:
       - task: format
 #      - task: docs:update:api
 
-  test:example:
+  test:example:darwin:
     dir: 'examples/{{.DIR}}'
+    platforms:
+      - darwin
     cmds:
       - echo "Building example {{.DIR}}"
       - go mod tidy
       - go build -o "testbuild-{{.DIR}}{{exeExt}}"
+    env:
+      CGO_LDFLAGS: -framework UniformTypeIdentifiers -mmacosx-version-min=10.13
+      CGO_CFLAGS: -mmacosx-version-min=10.13
+
+  test:example:notdarwin:
+    dir: 'examples/{{.DIR}}'
+    platforms:
+      - linux
+      - windows
+    cmds:
+      - echo "Building example {{.DIR}}"
+      - go mod tidy
+      - go build -o "testbuild-{{.DIR}}{{exeExt}}"
+
 
   test:examples:
     summary: Builds the examples
@@ -155,10 +171,8 @@ tasks:
         hide-window
         keybindings
         menu
-        oauth
         plain
         screen
-        server
         show-macos-toolbar
         systray
         video
@@ -167,6 +181,10 @@ tasks:
         wml
     cmds:
       - for: { var: EXAMPLEDIRS }
-        task: test:example
+        task: test:example:darwin
+        vars:
+          DIR: "{{.ITEM}}"
+      - for: { var: EXAMPLEDIRS }
+        task: test:example:notdarwin
         vars:
           DIR: "{{.ITEM}}"

v3/examples/environment/assets/index.html

@@ -7,7 +7,8 @@
         body {
             padding-top: 75px;
             margin: 0 auto;
-            color: white;
+            background-color: white;
+            color: black;
             text-align: -webkit-center;
             font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif
         }
@@ -54,9 +55,7 @@
         html += "<tr><td>Debug</td><td>"+ result.Debug +"</td></tr>";
         if(result.PlatformInfo) {
             for (let key in result.PlatformInfo) {
-                if (obj.hasOwnProperty(key)) {
                     html += "<tr><td>"+key+"</td><td>"+ result.PlatformInfo[key] +"</td></tr>";
-                }
             }
         }
         html += "</table>";

v3/examples/frameless/assets/index.html

@@ -24,10 +24,10 @@
 </head>
 <body>
 <div class="container">
-    <div class="quarter" style="background-color: lightblue; --webkit-app-region: drag">Draggable</div>
+    <div class="quarter" style="background-color: lightblue; --wails-draggable: drag">Draggable</div>
     <div class="quarter" style="background-color: lightgreen;">Not Draggable</div>
     <div class="quarter" style="background-color: lightpink;">Not Draggable</div>
-    <div class="quarter" style="background-color: lightyellow; --webkit-app-region: drag">Draggable</div>
+    <div class="quarter" style="background-color: lightyellow; --wails-draggable: drag">Draggable</div>
 </div>
 </body>
 </html>

v3/examples/oauth/README.md

@@ -1,3 +0,0 @@
-# OAuth Example
-
-This example is not ready for testing yet.

v3/examples/oauth/assets/index.html

@@ -1,41 +0,0 @@
-<!-- templates/index.html -->
-<!doctype html>
-<html>
-<head>
-    <title>Google SignIn</title>
-    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <!-- load bulma css -->
-    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- load fontawesome -->
-</head>
-<body>
-<div id="main" class="container">
-    <div class="jumbotron text-center text-success" style="padding-top:70px;">
-        <h1><span class="fa fa-lock"></span> Social Authentication</h1>
-        <p>Login or Register with:</p>
-        <a wml-event="github-login" class="btn btn-primary"><span class="fa fa-github" style="color: #FFF"></span> SignIn with Github</a>
-    </div>
-</div>
-<div id="details" class="text-center" style="display: none">
-    <image id="logo" style="width:250px"></image>
-    <h3 id="name" style="padding-top: 10px"></h3>
-    <a wml-event="github-logout" class="btn btn-primary"><span class="fa fa-github" style="color: #FFF"></span> Logout </a>
-</div>
-<script type="module">
-    import * as wails from "/wails/runtime.js";
-
-    wails.Events.On("wails:oauth:success", (event) => {
-        document.getElementById("main").style.display = "none";
-        document.getElementById("details").style.display = "block";
-        document.getElementById("name").innerText = event.data.Name;
-        document.getElementById("logo").src = event.data.AvatarURL;
-        document.body.style.backgroundColor = "#000";
-        document.body.style.color = "#FFF";
-    });
-    wails.Events.On("wails:oauth:loggedout", (event) => {
-        document.getElementById("details").style.display = "none";
-        document.getElementById("main").style.display = "block";
-        document.body.style.backgroundColor = "#FFF";
-        document.body.style.color = "#000";
-    });
-</script>
-</body>
-</html>

v3/examples/oauth/main.go

@@ -1,68 +0,0 @@
-package main
-
-import (
-	"embed"
-	_ "embed"
-	"log"
-	"os"
-
-	"github.com/markbates/goth"
-	"github.com/markbates/goth/providers/github"
-	"github.com/wailsapp/wails/v3/pkg/application"
-	"github.com/wailsapp/wails/v3/plugins/oauth"
-)
-
-//go:embed assets
-var assets embed.FS
-
-func main() {
-
-	oAuthPlugin := oauth.NewPlugin(oauth.Config{
-		Providers: []goth.Provider{
-			github.New(
-				os.Getenv("clientkey"),
-				os.Getenv("secret"),
-				"http://localhost:9876/auth/github/callback",
-				"email",
-				"profile"),
-		},
-	})
-
-	app := application.New(application.Options{
-		Name:        "OAuth Demo",
-		Description: "A demo of the oauth Plugin",
-		Mac: application.MacOptions{
-			ApplicationShouldTerminateAfterLastWindowClosed: true,
-		},
-		Assets: application.AssetOptions{
-			Handler: application.AssetFileServerFS(assets),
-		},
-		Plugins: map[string]application.Plugin{
-			"github.com/wailsapp/wails/v3/plugins/oauth": oAuthPlugin,
-		},
-	})
-
-	app.NewWebviewWindowWithOptions(application.WebviewWindowOptions{
-		Title:                  "OAuth Demo",
-		DevToolsEnabled:        true,
-		OpenInspectorOnStartup: true,
-		Mac: application.MacWindow{
-			Backdrop:                application.MacBackdropTranslucent,
-			TitleBar:                application.MacTitleBarHiddenInsetUnified,
-			InvisibleTitleBarHeight: 50,
-		},
-	})
-
-	app.Events.On("github-login", func(e *application.WailsEvent) {
-		oAuthPlugin.Github()
-	})
-	app.Events.On("github-logout", func(e *application.WailsEvent) {
-		oAuthPlugin.LogoutGithub()
-	})
-
-	err := app.Run()
-
-	if err != nil {
-		log.Fatal(err.Error())
-	}
-}

v3/examples/plugins/assets/style.css

@@ -0,0 +1,202 @@
+html {
+    background-color: rgba(33, 37, 43);
+    text-align: center;
+    color: white;
+    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    -webkit-touch-callout: none;
+}
+
+body {
+    padding-top: 40px;
+    margin: 0;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
+    "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+    overscroll-behavior: none;
+}
+
+.logo {
+    width: 30%;
+    height: 20%;
+}
+/* CSS */
+.button-42 {
+    background-color: initial;
+    background-image: linear-gradient(-180deg, #555555, #2f2f2f);
+    border-radius: 6px;
+    box-shadow: rgba(0, 0, 0, 0.1) 0 2px 4px;
+    color: #FFFFFF;
+    cursor: pointer;
+    display: inline-block;
+    font-family: Inter,-apple-system,system-ui,Roboto,"Helvetica Neue",Arial,sans-serif;
+    height: 35px;
+    line-height: 35px;
+    outline: 0;
+    overflow: hidden;
+    padding: 0 20px;
+    pointer-events: auto;
+    position: relative;
+    text-align: center;
+    touch-action: manipulation;
+    user-select: none;
+    -webkit-user-select: none;
+    vertical-align: top;
+    white-space: nowrap;
+    z-index: 9;
+    border: 0;
+    transition: box-shadow .2s;
+    font-size: medium;
+}
+p {
+    font-size: 1rem;
+}
+
+.button-42:hover {
+    background-image: linear-gradient(-180deg, #cb3939, #610000);
+}
+html {
+    background-color: rgba(33, 37, 43);
+    text-align: center;
+    color: white;
+    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    -webkit-touch-callout: none;
+}
+
+body {
+    padding-top: 40px;
+    margin: 0;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
+    "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+    overscroll-behavior: none;
+}
+
+.button-42 {
+    background-color: initial;
+    background-image: linear-gradient(-180deg, #555555, #2f2f2f);
+    border-radius: 6px;
+    box-shadow: rgba(0, 0, 0, 0.1) 0 2px 4px;
+    color: #FFFFFF;
+    cursor: pointer;
+    display: inline-block;
+    font-family: Inter,-apple-system,system-ui,Roboto,"Helvetica Neue",Arial,sans-serif;
+    height: 35px;
+    line-height: 35px;
+    outline: 0;
+    overflow: hidden;
+    padding: 0 20px;
+    pointer-events: auto;
+    position: relative;
+    text-align: center;
+    touch-action: manipulation;
+    user-select: none;
+    -webkit-user-select: none;
+    vertical-align: top;
+    white-space: nowrap;
+    z-index: 9;
+    border: 0;
+    transition: box-shadow .2s;
+    font-size: medium;
+}
+
+p {
+    font-size: 1rem;
+}
+
+.button-42:hover {
+    background-image: linear-gradient(-180deg, #cb3939, #610000);
+}
+
+.tab {
+    overflow: hidden;
+    background-color: #f1f1f100;
+    margin-left: 20px;
+}
+
+.tab button {
+    background-color: transparent; /* Make the background transparent */
+    color: white; /* Make the text white */
+    float: left;
+    border: none;
+    outline: none;
+    cursor: pointer;
+    padding: 14px 16px;
+    transition: 0.3s;
+    position: relative; /* Added for the underline */
+}
+
+.tab button::after { /* Added for the underline */
+    content: '';
+    position: absolute;
+    width: 0;
+    height: 2px;
+    bottom: 0;
+    left: 0;
+    background-color: #a40505;
+    visibility: hidden;
+    transition: all 0.3s ease-in-out;
+}
+
+.tab button:hover::after, /* Added for the underline */
+.tab button.active::after { /* Added for the underline */
+    width: 100%;
+    visibility: visible;
+}
+
+.tab button.active {
+    background-color: transparent; /* Make the background transparent */
+    color: red;
+}
+.tabcontent {
+    display: none;
+    padding: 6px 12px;
+    border-top: none;
+}
+#sqlresults, #hashresults {
+    font-family: 'Courier New', Courier, monospace;
+    min-height: 100px;
+}
+#selectquery {
+    width: 90%;
+}
+table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-top: 20px;
+}
+
+th, td {
+    border: 1px solid #ddd;
+    padding: 8px;
+    text-align: left;
+}
+
+th {
+    background-color: #005467;
+    color: white;
+}
+
+tr:hover {
+    background-color: #888;
+}
+
+.error-message {
+    color: #FF4B2B; /* Bright red color for better visibility in dark mode */
+    background-color: #1E1E1E; /* Dark background for the error message */
+    border: 1px solid #FF4B2B; /* Border color same as text color */
+    padding: 10px; /* Padding around the text */
+    margin: 10px 0; /* Margin top and bottom */
+    border-radius: 5px; /* Rounded corners */
+    text-align: center; /* Center the text */
+}
+
+.narrowColumn {
+    width: 1%;  /* Adjust as needed */
+    white-space: nowrap;
+}

v3/examples/plugins/experimental/README.md

@@ -1,4 +0,0 @@
-# Experimental Plugins
-
-This directory contains experimental plugins. These plugins are not supported by the Wails team and are provided as-is. 
-They may be removed at any time. If you have any thoughts about these plugins, they can be discussed on the [Wails Discord](https://discord.gg/u8JkcWsG).

v3/examples/plugins/hashes/README.md

@@ -15,7 +15,8 @@ Add the plugin to the `Plugins` option in the Applications options:
 You can then call the Generate method from the frontend:
 
 ```js
-    wails.Plugin("hashes","Generate","hello world").then((result) => console.log(result))
+    import {Call} from "/wails/runtime.js";
+    Call.Plugin("hashes","Generate","hello world").then((result) => console.log(result))
 ```
 
 This method returns a struct with the following fields:

v3/examples/plugins/hashes/plugin.go

@@ -6,6 +6,7 @@ import (
 	"crypto/sha256"
 	"encoding/hex"
 	"github.com/wailsapp/wails/v3/pkg/application"
+	"io/fs"
 )
 
 // ---------------- Plugin Setup ----------------
@@ -32,8 +33,8 @@ func (r *Plugin) CallableByJS() []string {
 	}
 }
 
-func (r *Plugin) InjectJS() string {
-	return ""
+func (r *Plugin) Assets() fs.FS {
+	return nil
 }
 
 // ---------------- Plugin Methods ----------------

v3/examples/plugins/main.go

@@ -2,8 +2,9 @@ package main
 
 import (
 	"embed"
+	"log/slog"
 	"os"
-	"plugin_demo/plugins/hashes"
+	"plugin_demo/hashes"
 
 	"github.com/wailsapp/wails/v3/pkg/application"
 	"github.com/wailsapp/wails/v3/plugins/kvstore"
@@ -24,6 +25,7 @@ func main() {
 		Mac: application.MacOptions{
 			ApplicationShouldTerminateAfterLastWindowClosed: true,
 		},
+		LogLevel: slog.LevelDebug,
 		Plugins: map[string]application.Plugin{
 			"hashes": hashes.NewPlugin(),
 			"log":    log.NewPlugin(),
@@ -34,10 +36,6 @@ func main() {
 				Filename: "store.json",
 				AutoSave: true,
 			}),
-			//"server": server.NewPlugin(&server.Config{
-			//	Enabled: true,
-			//	Port:    34115,
-			//}),
 			"single_instance": single_instance.NewPlugin(&single_instance.Config{
 				// When true, the original app will be activated when a second instance is launched
 				ActivateAppOnSubsequentLaunch: true,
@@ -50,8 +48,8 @@ func main() {
 	})
 
 	app.NewWebviewWindowWithOptions(application.WebviewWindowOptions{
-		DevToolsEnabled:        true,
-		OpenInspectorOnStartup: true,
+		Width:  1024,
+		Height: 768,
 	})
 
 	err := app.Run()