Draft: Switch to `ts-for-gir` for TypeScript definitions

[vixalien]

Because the submodule has changed. You will probably need to run:

git submodule sync
git submodule update --init --recursive --remote

Types Repo

I'm currently using my own types repository at https://github.com/vixalien/gi-typescript-definitions. These types are generated manually (but I wish they were generated each week). The reason I'm using my own repo is because the (de facto) upstream https://gitlab.gnome.org/BrainBlasted/gi-typescript-definitions has not been updated yet.

Workbench types

I vaguely remember ts-for-gir being able to generate types for Workbench. But I'm not too sure of how it's gonna work. Will we generate the types manually and put them in the repo, and recompile the types everytime a GIR is generated? I'm not too sure and I need help in these regards.

GJS types

The types in ambient.d.ts has been removed in favor of gjs.d.ts in the types generated by ts-for-gir.

Hover provider

In my experience, you can't really hover on a type to get definitions, and I think this needs implementing in Workbench. I'd be happy to take pointers on how to implement this feature to get type information on hover.

Remaining issues/TODO

• [ ] The dom.d.ts types don't seem to be included. I don't know why, and I hope we can find a way to get output from the language server about this
• [ ] Same for our ambient.d.ts
• [ ] Rename ambient.d.ts to workbench.d.ts
• [ ] Add the support for hover providers

[vixalien]

It would be nice to get help with the " Add the support for hover providers" item on the tasklist.

I've been talking with @andyholmes , and we think the correct way would be to generate the types would be to generate them within Workbench itself. However, this will require we switch back to GNOME Master (see #980)

[vixalien]

Also related: https://github.com/workbenchdev/demos/pull/201

[vixalien]

A significant milestone!

Now Workbench can build the demos from TypeScript to JavaScript. Try it!! This means we can now only have TypeScript files in the demos, and the JavaScript files will be compiled from them.

However, the JavaScript files outputted are a bit different. For example, here is the Welcome demo.

TypeScript (source)

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("subtitle") as Gtk.Box;

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

JavaScript (compiled)

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

I talked this in the past with @sonnyp and we thought it was fine at the moment, but today I'm not so sure if it's adequate.

We talked about using alternative compilers for this task (maybe esbuild, swc or babel) instead of tsc. The first 2 are fast in compilation but seem to modify the output much too. I remember Sonny telling me that babel has a retainLines option, but I haven't tested it yet, and need to know if it's worth exploring.

It may also be beneficial to activate the compilerOptions.incremental option in the tsconfig.demo.json file so that the types compilation is a bit faster, particularly this can save a few seconds while hacking on workbench on each rebuild. This flag however produces a .tsbuildinfo file in the output directory and I don't know if that's passable.

[vixalien]

Note: to test this, you will also need to have https://github.com/workbenchdev/demos/pull/201

[vanillajonathan]

Any progress on this?

[vixalien]

@vanillajonathan Mostly waiting for ts-for-gir to fix some issues, which would allow us to generate the typescript types better. See https://github.com/gjsify/ts-for-gir/issues

But I think I can push through, and hopefully their issues will get resolved sooner than later.