Draft: Port demos to TypeScript

.gitignore

@@ -19,6 +19,12 @@ __pycache__
 .idea
 .vscode
 
+# compiled typescript
+out
+
+# extra GIRs from Workbench
+workbench-girs
+
 # Project files - sync with Makefile
 src/*/settings
 src/*/workbench.vala
@@ -35,3 +41,6 @@ src/*/*.gresource.xml
 src/*/jsconfig.json
 src/*/rustc-ice-*.txt
 src/*/*.sqlite*
+
+# All JavaScript files
+src/**/*.js

README.typescript.md

@@ -0,0 +1,52 @@
+# Demos TypeScript
+
+Here is how you generate TypeScript declaration files for the various platform
+GIRs (Gtk4, Adw, GObject, etc..) and other dependencies used by Workbench
+(Libportal/Xdp, Jsonrpc, Shumate, Vte, etc..).
+
+Due to current limitations
+(https://github.com/workbenchdev/Workbench/issues/980), you cannot directly
+generate the types from within Workbench's sandbox automatically.
+
+### 0. Copy the built GIRs from Workbench
+
+First enter the Build Terminal. On VSCode you can easily do this by pressing
+`Ctrl+P` then selecting `Flatpak: Enter Build Terminal`.
+
+You can also enter Workbench Terminal using the following command:
+
+```bash
+flatpak run --command=bash --filesystem=$(pwd) re.sonny.Workbench.Devel
+```
+
+Then you can copy all the GIRs build from Workbench
+
+```bash
+mkdir -p workbench-girs
+cp /app/share/gir-1.0/* workbench-girs
+```
+
+### 1. Enter the flatpak sandbox
+
+```bash
+FLATPAK_ENABLE_SDK_EXT=node20,typescript flatpak run --share=network --command=bash --filesystem=$(pwd) org.gnome.Sdk//master
+
+# Enable the node20 and typescript SDK extensions
+source /usr/lib/sdk/node20/enable.sh
+export PATH=/usr/lib/sdk/typescript/bin:$PATH
+```
+
+### 2. Install ts-for-gir (in the flatpak sandbox)
+
+```bash
+YARN_GLOBAL_DIR=/tmp/yarn-global
+export PATH="$YARN_GLOBAL_DIR/node_modules/.bin:$PATH"
+
+yarn --global-folder $YARN_GLOBAL_DIR global add @ts-for-gir/[email protected]
+```
+
+### Generate modules
+
+```bash
+ts-for-gir generate -g workbench-girs/ -g /usr/share/gir-1.0/ -o workbench-types/ --ignoreVersionConflicts
+```

ambient/workbench.d.ts

@@ -0,0 +1,20 @@
+/// <reference path="../workbench-types/adw-1.d.ts" />
+/// <reference path="../workbench-types/gtk-4.0.d.ts" />
+/// <reference path="../workbench-types/gobject-2.0.d.ts" />
+
+import Gtk from "gi://Gtk?version=4.0";
+import Adw from "gi://Adw";
+import GObject from "gi://GObject";
+
+declare global {
+  // global workbench object
+  declare const workbench: {
+    window: Adw.ApplicationWindow;
+    application: Adw.Application;
+    builder: Gtk.Builder;
+    template: string;
+    resolve(path: string): string;
+    preview(object: Gtk.Widget): void;
+    build(params: Record<string, Function | GObject.Object>): void;
+  };
+}

src/About Dialog/main.js → src/About Dialog/main.ts

@@ -2,7 +2,7 @@ import { gettext as _ } from "gettext";
 import Adw from "gi://Adw";
 import Gtk from "gi://Gtk?version=4.0";
 
-const button = workbench.builder.get_object("button");
+const button = workbench.builder.get_object<Gtk.Button>("button");
 
 function openAboutDialog() {
   const dialog = new Adw.AboutDialog({

src/Accessibility/main.js → src/Accessibility/main.ts

@@ -2,7 +2,7 @@ import GObject from "gi://GObject";
 import Gdk from "gi://Gdk?version=4.0";
 import Gtk from "gi://Gtk?version=4.0";
 
-const button = workbench.builder.get_object("custom_button");
+const button = workbench.builder.get_object<Gtk.Button>("custom_button");
 
 const clicker = new Gtk.GestureClick();
 clicker.connect("released", () => toggleButton(button));

src/Account/main.js → src/Account/main.ts

@@ -1,5 +1,8 @@
+import Adw from "gi://Adw";
 import Gdk from "gi://Gdk?version=4.0";
 import Gio from "gi://Gio";
+import GLib from "gi://GLib?version=2.0";
+import Gtk from "gi://Gtk?version=4.0";
 import Xdp from "gi://Xdp?version=1.0";
 import XdpGtk from "gi://XdpGtk4";
 
@@ -12,16 +15,22 @@ Gio._promisify(
 const portal = new Xdp.Portal();
 const parent = XdpGtk.parent_new_gtk(workbench.window);
 
-const revealer = workbench.builder.get_object("revealer");
-const button = workbench.builder.get_object("button");
-const avatar = workbench.builder.get_object("avatar");
-const entry = workbench.builder.get_object("entry");
-const username = workbench.builder.get_object("username");
-const display = workbench.builder.get_object("name");
+const revealer = workbench.builder.get_object<Gtk.Revealer>("revealer");
+const button = workbench.builder.get_object<Gtk.Button>("button");
+const avatar = workbench.builder.get_object<Adw.Avatar>("avatar");
+const entry = workbench.builder.get_object<Adw.EntryRow>("entry");
+const username = workbench.builder.get_object<Gtk.Label>("username");
+const display = workbench.builder.get_object<Gtk.Label>("name");
 
 async function onClicked() {
   const reason = entry.get_text();
-  const result = await portal.get_user_information(parent, reason, null, null);
+  // @ts-expect-error this function's isn't detected as `async` yet.
+  const result = await portal.get_user_information(
+    parent,
+    reason,
+    null,
+    null,
+  ) as GLib.Variant;
 
   /*
   result is a GVariant dictionary containing the following fields

src/Action Bar/main.ts

@@ -0,0 +1,18 @@
+import Gtk from "gi://Gtk?version=4.0";
+
+const action_bar = workbench.builder.get_object<Gtk.ActionBar>("action_bar");
+const button = workbench.builder.get_object<Gtk.ToggleButton>("button");
+const start_widget = workbench.builder.get_object<Gtk.Button>("start_widget");
+const end_widget = workbench.builder.get_object<Gtk.Button>("end_widget");
+
+button.connect("notify::active", () => {
+  action_bar.revealed = !button.active;
+});
+
+start_widget.connect("clicked", () => {
+  console.log("Start widget");
+});
+
+end_widget.connect("clicked", () => {
+  console.log("End widget");
+});

src/Actions/main.js → src/Actions/main.ts

@@ -1,7 +1,9 @@
+import Gtk from "gi://Gtk?version=4.0";
+import Adw from "gi://Adw";
 import GLib from "gi://GLib";
 import Gio from "gi://Gio";
 
-const demo = workbench.builder.get_object("demo");
+const demo = workbench.builder.get_object<Adw.StatusPage>("demo");
 
 const demo_group = new Gio.SimpleActionGroup();
 demo.insert_action_group("demo", demo_group);
@@ -55,7 +57,7 @@ scale_action.connect("notify::state", (action) => {
 
 demo_group.add_action(scale_action);
 
-const text = workbench.builder.get_object("text");
+const text = workbench.builder.get_object<Gtk.Label>("text");
 
 const alignment_action = new Gio.PropertyAction({
   name: "text-align",

src/Animation/main.js → src/Animation/main.ts

@@ -1,9 +1,10 @@
 import Adw from "gi://Adw";
 import Graphene from "gi://Graphene";
 import Gsk from "gi://Gsk";
+import Gtk from "gi://Gtk?version=4.0";
 
-const button_timed = workbench.builder.get_object("button_timed");
-const progress_bar = workbench.builder.get_object("progress_bar");
+const button_timed = workbench.builder.get_object<Gtk.Button>("button_timed");
+const progress_bar = workbench.builder.get_object<Gtk.ProgressBar>("progress_bar");
 const target_timed = Adw.PropertyAnimationTarget.new(progress_bar, "fraction");
 
 const animation_timed = new Adw.TimedAnimation({
@@ -23,8 +24,8 @@ animation_timed.connect("done", () => {
   animation_timed.reset();
 });
 
-const button_spring = workbench.builder.get_object("button_spring");
-const ball = workbench.builder.get_object("ball");
+const button_spring = workbench.builder.get_object<Gtk.Button>("button_spring");
+const ball = workbench.builder.get_object<Adw.Bin>("ball");
 
 const target_spring = Adw.CallbackAnimationTarget.new(animation_cb);
 const params = Adw.SpringParams.new(

src/Audio/main.js → src/Audio/main.ts

@@ -1,7 +1,7 @@
 import Gio from "gi://Gio";
 import Gtk from "gi://Gtk?version=4.0";
 
-const controls = workbench.builder.get_object("controls");
+const controls = workbench.builder.get_object<Gtk.MediaControls>("controls");
 
 const buttons = ["sound", "music"];
 const audio_files = {

src/Avatar/main.js → src/Avatar/main.ts

@@ -1,11 +1,12 @@
+import Adw from "gi://Adw";
 import Gdk from "gi://Gdk?version=4.0";
 import Gio from "gi://Gio";
 import Gtk from "gi://Gtk?version=4.0";
 
 Gio._promisify(Gtk.FileDialog.prototype, "open", "open_finish");
 
-const avatar_image = workbench.builder.get_object("avatar_image");
-const button = workbench.builder.get_object("button");
+const avatar_image = workbench.builder.get_object<Adw.Avatar>("avatar_image");
+const button = workbench.builder.get_object<Gtk.Button>("button");
 
 const file_filter = new Gtk.FileFilter();
 file_filter.add_pixbuf_formats();
@@ -21,7 +22,8 @@ button.connect("clicked", () => {
 });
 
 async function onClicked() {
-  const file = await file_dialog.open(workbench.window, null);
+  // @ts-expect-error this function's type isn't detected as async yet
+  const file = await file_dialog.open(workbench.window, null) as Gio.File;
   const texture = Gdk.Texture.new_from_file(file);
   avatar_image.set_custom_image(texture);
 }

src/Banner/main.js → src/Banner/main.ts

@@ -1,8 +1,9 @@
 import Adw from "gi://Adw";
+import Gtk from "gi://Gtk?version=4.0";
 
-const banner = workbench.builder.get_object("banner");
-const overlay = workbench.builder.get_object("overlay");
-const button_show_banner = workbench.builder.get_object("button_show_banner");
+const banner = workbench.builder.get_object<Adw.Banner>("banner");
+const overlay = workbench.builder.get_object<Adw.ToastOverlay>("overlay");
+const button_show_banner = workbench.builder.get_object<Gtk.Button>("button_show_banner");
 
 function alert() {
   const toast = new Adw.Toast({

src/Box/main.js → src/Box/main.ts

@@ -1,19 +1,19 @@
 import Gtk from "gi://Gtk?version=4.0";
 
-const interactive_box = workbench.builder.get_object("interactive_box");
-const button_append = workbench.builder.get_object("button_append");
-const button_prepend = workbench.builder.get_object("button_prepend");
-const button_remove = workbench.builder.get_object("button_remove");
+const interactive_box = workbench.builder.get_object<Gtk.Box>("interactive_box");
+const button_append = workbench.builder.get_object<Gtk.Button>("button_append");
+const button_prepend = workbench.builder.get_object<Gtk.Button>("button_prepend");
+const button_remove = workbench.builder.get_object<Gtk.Button>("button_remove");
 let count = 0;
 
 button_append.connect("clicked", append);
 button_prepend.connect("clicked", prepend);
 button_remove.connect("clicked", remove);
 
-const toggle_orientation_horizontal = workbench.builder.get_object(
+const toggle_orientation_horizontal = workbench.builder.get_object<Gtk.ToggleButton>(
   "toggle_orientation_horizontal",
 );
-const toggle_orientation_vertical = workbench.builder.get_object(
+const toggle_orientation_vertical = workbench.builder.get_object<Gtk.ToggleButton>(
   "toggle_orientation_vertical",
 );
 
@@ -27,19 +27,19 @@ toggle_orientation_vertical.connect("toggled", () => {
     interactive_box.orientation = Gtk.Orientation.VERTICAL;
 });
 
-const highlight = workbench.builder.get_object("highlight");
+const highlight = workbench.builder.get_object<Gtk.CheckButton>("highlight");
 highlight.connect("toggled", () => {
   highlight.active
     ? interactive_box.add_css_class("border")
     : interactive_box.remove_css_class("border");
 });
 
-const halign_toggle_fill = workbench.builder.get_object("halign_toggle_fill");
-const halign_toggle_start = workbench.builder.get_object("halign_toggle_start");
-const halign_toggle_center = workbench.builder.get_object(
+const halign_toggle_fill = workbench.builder.get_object<Gtk.ToggleButton>("halign_toggle_fill");
+const halign_toggle_start = workbench.builder.get_object<Gtk.ToggleButton>("halign_toggle_start");
+const halign_toggle_center = workbench.builder.get_object<Gtk.ToggleButton>(
   "halign_toggle_center",
 );
-const halign_toggle_end = workbench.builder.get_object("halign_toggle_end");
+const halign_toggle_end = workbench.builder.get_object<Gtk.ToggleButton>("halign_toggle_end");
 
 halign_toggle_fill.connect("toggled", () => {
   if (halign_toggle_fill.active) interactive_box.halign = Gtk.Align.FILL;
@@ -57,12 +57,12 @@ halign_toggle_end.connect("toggled", () => {
   if (halign_toggle_end.active) interactive_box.halign = Gtk.Align.END;
 });
 
-const valign_toggle_fill = workbench.builder.get_object("valign_toggle_fill");
-const valign_toggle_start = workbench.builder.get_object("valign_toggle_start");
-const valign_toggle_center = workbench.builder.get_object(
+const valign_toggle_fill = workbench.builder.get_object<Gtk.ToggleButton>("valign_toggle_fill");
+const valign_toggle_start = workbench.builder.get_object<Gtk.ToggleButton>("valign_toggle_start");
+const valign_toggle_center = workbench.builder.get_object<Gtk.ToggleButton>(
   "valign_toggle_center",
 );
-const valign_toggle_end = workbench.builder.get_object("valign_toggle_end");
+const valign_toggle_end = workbench.builder.get_object<Gtk.ToggleButton>("valign_toggle_end");
 
 valign_toggle_fill.connect("toggled", () => {
   if (valign_toggle_fill.active) interactive_box.valign = Gtk.Align.FILL;

src/Boxed Lists/main.ts

@@ -0,0 +1,18 @@
+import Adw from "gi://Adw";
+import GObject from "gi://GObject";
+import Gtk from "gi://Gtk?version=4.0";
+
+const drop_down = workbench.builder.get_object<Adw.ComboRow>("drop_down");
+
+drop_down.connect("notify::selected-item", () => {
+  const selected_item = drop_down.selected_item as Gtk.StringObject;
+  const selected_string = selected_item.get_string();
+  console.log(selected_string);
+});
+
+const expression = Gtk.ClosureExpression.new(
+  GObject.TYPE_STRING,
+  (obj) => obj.string,
+  null,
+);
+drop_down.expression = expression;

src/Breakpoints/main.js → src/Breakpoints/main.ts

@@ -1,4 +1,6 @@
-const breakpoint = workbench.builder.get_object("breakpoint");
+import Adw from "gi://Adw";
+
+const breakpoint = workbench.builder.get_object<Adw.Breakpoint>("breakpoint");
 
 breakpoint.connect("apply", () => {
   console.log("Breakpoint Applied");