Draft: Port demos to TypeScript

.gitignore

@@ -41,3 +41,6 @@ src/*/*.gresource.xml
 src/*/jsconfig.json
 src/*/rustc-ice-*.txt
 src/*/*.sqlite*
+
+# All JavaScript files
+src/**/*.js

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");

src/Button/main.js → src/Button/main.ts

@@ -1,3 +1,5 @@
+import Gtk from "gi://Gtk?version=4.0";
+
 const button_ids = [
   "regular",
   "flat",
@@ -13,7 +15,7 @@ const button_ids = [
 ];
 
 for (const id of button_ids) {
-  const button = workbench.builder.get_object(id);
+  const button = workbench.builder.get_object<Gtk.Button>(id);
   button.connect("clicked", onClicked);
 }
 

src/CSS Gradients/main.js → src/CSS Gradients/main.ts

@@ -5,15 +5,25 @@ import GtkSource from "gi://GtkSource";
 
 let css_provider;
 
-const combo_row_gradient_type = workbench.builder.get_object(
+const combo_row_gradient_type = workbench.builder.get_object<Adw.ComboRow>(
   "combo_row_gradient_type",
 );
-const spin_row_angle = workbench.builder.get_object("spin_row_angle");
-const button_color_1 = workbench.builder.get_object("button_color_1");
-const button_color_2 = workbench.builder.get_object("button_color_2");
-const button_color_3 = workbench.builder.get_object("button_color_3");
-const gtksource_buffer = workbench.builder.get_object("gtksource_buffer");
-const button_copy_css = workbench.builder.get_object("button_copy_css");
+const spin_row_angle = workbench.builder.get_object<Adw.SpinRow>(
+  "spin_row_angle",
+);
+const button_color_1 = workbench.builder.get_object<Gtk.ColorDialogButton>(
+  "button_color_1",
+);
+const button_color_2 = workbench.builder.get_object<Gtk.ColorDialogButton>(
+  "button_color_2",
+);
+const button_color_3 = workbench.builder.get_object<Gtk.ColorDialogButton>(
+  "button_color_3",
+);
+const gtksource_buffer = workbench.builder.get_object<GtkSource.Buffer>(
+  "gtksource_buffer",
+);
+const button_copy_css = workbench.builder.get_object<Gtk.Button>("button_copy_css");
 
 combo_row_gradient_type.connect("notify::selected", update);
 spin_row_angle.connect("notify::value", update);

src/Calendar/main.js → src/Calendar/main.ts

@@ -1,4 +1,6 @@
-const calendar = workbench.builder.get_object("calendar");
+import Gtk from "gi://Gtk?version=4.0"
+
+const calendar = workbench.builder.get_object<Gtk.Calendar>("calendar");
 
 // calendar.get_date() returns a GLib.DateTime object
 // https://docs.gtk.org/glib/struct.DateTime.html