Add typechecking for TypeScript (#946)

Co-authored-by: Sonny <[email protected]>

.gitmodules

@@ -7,3 +7,7 @@
 [submodule "blueprint-compiler"]
 	path = blueprint-compiler
 	url = https://gitlab.gnome.org/jwestman/blueprint-compiler.git
+[submodule "src/langs/typescript/template/gi-types"]
+	path = src/langs/typescript/gi-types
+	url = https://gitlab.gnome.org/BrainBlasted/gi-typescript-definitions.git
+	branch = nightly

Makefile

@@ -61,7 +61,7 @@ unit:
 test: unit lint
 	./build-aux/fun workbench-cli ci demos/src/Welcome
 
-ci: setup test
+ci: setup build test
 	./build-aux/fun workbench-cli ci demos/src/*
 
 # Note that if you have Sdk extensions installed they will be used

src/PanelCode.js

@@ -9,6 +9,7 @@ export default function PanelCode({
   builder,
   previewer,
   session: { settings, file },
+  langs,
 }) {
   const panel_code = builder.get_object("panel_code");
   const button_code = builder.get_object("button_code");
@@ -59,7 +60,9 @@ export default function PanelCode({
     }
 
     if (panel.language.toLowerCase() === "typescript") {
-      setupTypeScriptProject(file).catch(console.error);
+      setupTypeScriptProject(file, langs.typescript.document).catch(
+        console.error,
+      );
     }
   }
   switchLanguage();

src/common.js

@@ -128,14 +128,7 @@ export const languages = [
     document: null,
     default_file: "main.ts",
     index: 4,
-    language_server: [
-      "biome",
-      "lsp-proxy",
-      // src/meson.build installs biome.json there
-      GLib.getenv("FLATPAK_ID")
-        ? `--config-path=${pkg.pkgdatadir}`
-        : `--config-path=src/langs/typescript`,
-    ],
+    language_server: ["typescript-language-server", "--stdio"],
     formatting_options: {
       ...formatting_options,
       tabSize: 2,

src/langs/typescript/TypeScriptDocument.js

@@ -8,6 +8,7 @@ export class TypeScriptDocument extends Document {
     super(...args);
 
     this.lspc = setup({ document: this });
+    this.code_view.lspc = this.lspc;
   }
 
   async format() {
@@ -25,10 +26,6 @@ export class TypeScriptDocument extends Document {
       },
     });
 
-    // Biome doesn't support diff - it just returns one edit
-    // we don't want to loose the cursor position so we use this
-    const state = this.code_view.saveState();
     applyTextEdits(text_edits, this.buffer);
-    await this.code_view.restoreState(state);
   }
 }

src/langs/typescript/meson.build

@@ -0,0 +1,14 @@
+configure_file(
+  input: 'template/tsconfig.json',
+  output: 'tsconfig.json',
+  install_dir: join_paths(pkgdatadir, 'langs/typescript/template/'),
+  configuration: bin_conf,
+)
+
+install_data(
+  ['types/ambient.d.ts'],
+  install_dir: join_paths(pkgdatadir, 'langs/typescript'),
+  preserve_path: true,
+)
+
+install_subdir('gi-types', install_dir: join_paths(pkgdatadir, 'langs/typescript'))

src/langs/typescript/template/tsconfig.json

@@ -6,9 +6,15 @@
     // currently supported by the latest GJS
     "target": "ESNext",
     "outDir": "compiled_javascript",
+    "baseUrl": ".",
     "paths": {
-      "gi://*": ["./types/gi-module.d.ts"]
-    }
+      "*": ["*", "@pkgdatadir@/langs/typescript/gi-types/*"]
+    },
+    "skipLibCheck": true
   },
-  "include": ["main.ts", "types/ambient.d.ts", "types/gi-module.d.ts"]
+  "include": [
+    "main.ts",
+    "@pkgdatadir@/langs/typescript/types/ambient.d.ts",
+    "@pkgdatadir@/langs/typescript/gi-types/gi.d.ts"
+  ]
 }

src/langs/typescript/template/types/ambient.d.ts → src/langs/typescript/types/ambient.d.ts

@@ -1,3 +1,7 @@
+// import Adw from "gi://Adw";
+// import Gtk from "gi://Gtk?version=4.0";
+// import GObject from "gi://GObject";
+
 // additional type declarations for GJS
 
 // additional GJS log utils
@@ -31,6 +35,16 @@ declare module "gettext" {
   ): string;
 }
 
+// TODO: uncomment correct typings after we switch to `ts-for-gir`
+// 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;
+// };
+
 // global workbench object
-// TODO: use correct typings
 declare const workbench: any;

src/langs/typescript/typescript.js

@@ -40,31 +40,17 @@ const typescript_template_dir = Gio.File.new_for_path(
   pkg.pkgdatadir,
 ).resolve_relative_path("langs/typescript/template");
 
-export async function setupTypeScriptProject(destination) {
-  const types_destination = destination.get_child("types");
-
-  if (!types_destination.query_exists(null)) {
-    types_destination.make_directory_with_parents(null);
-  }
+export async function setupTypeScriptProject(destination, document) {
+  const destination_file = await copy(
+    "tsconfig.json",
+    typescript_template_dir,
+    destination,
+    Gio.FileCopyFlags.NONE,
+  );
 
-  return Promise.all([
-    copy(
-      "types/ambient.d.ts",
-      typescript_template_dir,
-      types_destination,
-      Gio.FileCopyFlags.NONE,
-    ),
-    copy(
-      "types/gi-module.d.ts",
-      typescript_template_dir,
-      types_destination,
-      Gio.FileCopyFlags.NONE,
-    ),
-    copy(
-      "tsconfig.json",
-      typescript_template_dir,
-      destination,
-      Gio.FileCopyFlags.NONE,
-    ),
-  ]);
+  // Notify the language server that the tsconfig file was created
+  // to initialized diagnostics and type checkings
+  await document.lspc.notify("workspace/didCreateFile", {
+    files: [{ uri: destination_file.get_uri() }],
+  });
 }

src/lsp/LSPClient.js

@@ -299,7 +299,7 @@ export default class LSPClient {
       },
       position: {
         line: iter_cursor.get_line(),
-        character: iter_cursor.get_line_offset() - 1,
+        character: iter_cursor.get_line_offset(),
       },
     });
 

src/meson.build

@@ -16,7 +16,7 @@ blueprint_compiler = find_program(
 meson.add_install_script('../build-aux/library.js', pkgdatadir)
 
 subdir('langs/rust/template')
-subdir('langs/typescript/template')
+subdir('langs/typescript')
 
 configure_file(
   input: 'bin.js',

src/util.js

@@ -191,10 +191,11 @@ export function removeDirectory(file) {
 
 export async function copy(filename, source_dir, dest_dir, flags) {
   const file = source_dir.get_child(filename);
+  const dest_file = dest_dir.get_child(file.get_basename());
 
   try {
     await file.copy_async(
-      dest_dir.get_child(file.get_basename()), // destination
+      dest_file, // destination
       flags, // flags
       GLib.PRIORITY_DEFAULT, // priority
       null, // cancellable
@@ -205,4 +206,6 @@ export async function copy(filename, source_dir, dest_dir, flags) {
       throw err;
     }
   }
+
+  return dest_file;
 }

src/window.js

@@ -163,6 +163,7 @@ export default function Window({ application, session }) {
     builder,
     previewer,
     session,
+    langs,
   });
 
   previewer.setPanelCode(panel_code);