/webview-v

V binding for webview - a tiny cross-platform library to build modern cross-platform GUI applications.

Primary LanguageVMIT LicenseMIT

webview - V Binding

build-status last-commit

This repository provides a V binding for webview - a tiny cross-platform library to build modern cross-platform GUI applications. It allows to combine V as a fast, compiled general purpose programming language with modern web technologies to design a graphical user interface.

Installation

Prerequisites

  • V

    Installing V from source

  • WebKit

    E.g., on a debian based Linux destribution

    sudo apt install libgtk-3-dev libwebkit2gtk-4.0-dev

    On macOS you should be good to go with developer tools installed

    xcode-select --install

Install the repository as V module

  • From source

    v install --git https://github.com/ttytm/webview
  • Or as vpm module

    v install ttytm.webview

Usage

After the installation, build the webview C library to which the webview V module will bind.
You can re-run the script at any point to rebuild the library with the latest upstream changes.

# For installations from source
~/.vmodules/webview/build.vsh
# For installations as vpm module
~/.vmodules/ttytm/webview/build.vsh
# PowerShell might require to prefix the script with `v run`, e.g.:
v run $HOME/.vmodules/webview/build.vsh

Usage Example

Note When running and building on Windows, it is recommended to use gcc for compilation. E.g.:

v -cc gcc run .

import webview // For installations from source
// import ttytm.webview // For installations as vpm module

const html = '<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      body {
        background: linear-gradient(to right, #274060, #1B2845);
        color: GhostWhite;
        font-family: sans-serif;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h1>Your App Content!</h1>
    <button onclick="callV()">Call V!</button>
  </body>
  <script>
    async function callV() {
      console.log(await window.my_v_func(\'Hello from JS!\'));
    }
  </script>
</html>'

fn my_v_func(e &webview.Event) string {
	println('Hello from V from V!')
	e.eval("console.log('Hello from V from JS!');")
	str_arg := e.string(0) // Get string arg at index `0`
	return str_arg + ' Hello back from V!'
}

w := webview.create(debug: true)
w.bind('my_v_func', my_v_func)
w.set_size(600, 400, .@none)
w.set_html(html)
w.run()

Output when pressing Call V!

Hello from V from V!
CONSOLE LOG Hello from V from JS!
CONSOLE LOG Hello from JS! Hello back from V!

Extended examples can be found in the examples/ directory.
An application example that uses this webview binding with SvelteKit for the UI is emoji-mart-desktop.

The overview of exported functions is accessible in the repositories src/lib.v file and on its vdoc site.

Disclaimer

Until a stable version 1.0 is available, new features will be introduced, existing ones may change, or breaking changes may occur in minor(0.<minor>.*) versions.