Add TypeScript types and port Welcome demo (#227)

See also #201

---------

Co-authored-by: Angelo Verlain <[email protected]>

Author: sonnyp

Diff for: .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

Diff for: 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
+```

Diff for: 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;
+  };
+}

Diff for: src/Welcome/main.ts

@@ -0,0 +1,30 @@
+import Adw from "gi://Adw";
+import Gio from "gi://Gio";
+import Gtk from "gi://Gtk?version=4.0";
+
+Gio._promisify(Adw.AlertDialog.prototype, "choose", "choose_finish");
+
+const box = workbench.builder.get_object<Gtk.Box>("subtitle");
+
+const button = new Gtk.Button({
+  label: "Press me",
+  margin_top: 6,
+  css_classes: ["suggested-action"],
+});
+button.connect("clicked", () => {
+  greet().catch(console.error);
+});
+box.append(button);
+
+console.log("Welcome to Workbench!");
+
+async function greet() {
+  const dialog = new Adw.AlertDialog({
+    body: "Hello World!",
+  });
+
+  dialog.add_response("ok", "OK");
+
+  const response = await dialog.choose(workbench.window, null);
+  console.log(response);
+}

Diff for: tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "module": "ES2022",
+    "moduleResolution": "Bundler",
+    "target": "ES2022",
+    "outDir": "out",
+    "skipLibCheck": true,
+    "lib": ["ES2022"]
+  },
+  "include": [
+    "src/**/*.ts",
+    "./workbench-types/index.d.ts",
+    "./ambient/workbench.d.ts",
+  ]
+}