van-gtk = vanjs + gtk4

A library lets you create GUI with vanjs and gjs in a reactive way.

Hello World

1. You should have installed gjs. Example for Archlinux

   sudo pacman -S gjs

2. Create a npm project

   npm init

3. Install dependencies

   npm install van-gtk
   npm install -D esbuild

4. Create index.js

   import Gtk from 'gi://Gtk?version=4.0';
   import { app, Button, Box, Label, van } from 'van-gtk'
   app(()=>{
     const count = van.state(0)
       const win = new Gtk.Window({
         child: Box(
           Button({
             label: "Inc",
             onclicked: () => {
               count.val++;
             }
           }),
           count,
           Button({
             label: "Dec",
             onclicked: () => {
               count.val--;
             }
           }),
       )});
       return win;
   })
   .exitOnClose()
   .run()

5. Create esbuild.mjs

      
   import { build } from "esbuild";
      
   await build({
       entryPoints: ['index.js'],
       outdir: 'dist',
       bundle: true,
       target: "firefox115", // Since GJS 1.77.2
       format: 'esm',
       external: ['gi://*', 'resource://*', 'gettext', 'system', 'cairo'],
   })

6. Build

   node esbuild.mjs

7. Run

   gjs -m dist/main.js