Invalid object type error when using blueprint template composition for segregating widgets

[tarsi.surdi (Tarcísio Surdi)]

I’m developing an app using Typescript for its logic and Blueprints for UI declarations, however, I have been facing issues when trying to segregate parts of the UI into different files (by using templates).

For a proof of concept, I’ve created a TestLabel widget:

// src/ui/widgets/test-label.blp

using Gtk 4.0;

template $TestLabel: Gtk.Label {
    label: _("Teste");
}

// src/test-label.ts

import Gtk from "gi://Gtk?version=4.0";
import GObject from "gi://GObject";

export const TestLabel = GObject.registerClass(
    {
        GTypeName: "TestLabel",
        Template:
            "resource:///me/tarcisiosurdi/Nonograms/ui/widgets/test-label.ui",
    },
    class TestLabel extends Gtk.Label {}
);

And proceed to using it in my window.blp like this:

Main window blueprint

// src/ui/window.blp

using Gtk 4.0;
using Adw 1;

template $Gjs_Window: Adw.ApplicationWindow {
  default-width: 800;
  default-height: 600;
  width-request: 360;
  height-request: 294;

  content: Adw.ToastOverlay toastOverlay {
    child: Adw.NavigationView navigationView {
      Adw.NavigationPage {
        title: _("Nonograms");

        child: Adw.ToolbarView {
          [top]
          Adw.HeaderBar {
            show-title: true;

            [end]
            MenuButton {
              icon-name: "open-menu-symbolic";
              menu-model: primary_menu;
              primary: true;
              tooltip-text: _("Main Menu");
            }
          }

          Adw.StatusPage statusPage {
            icon-name: "me.tarcisiosurdi.Nonograms-symbolic";
            title: _("Welcome to Nonograms");
            description: _("Play japanese crosswords!");

            Box {
              orientation: vertical;
              spacing: 12;
              homogeneous: true;
              halign: center;

              $TestLabel {}
            }

           [...] (way more widgets here)
    };
  };
}

menu primary_menu {
  section {
    item {
      label: _("_Preferences");
      action: "app.preferences";
    }

    item {
      label: _("_Keyboard Shortcuts");
      action: "app.shortcuts";
    }

    item {
      label: _("_About Nonograms");
      action: "app.about";
    }
  }
}

I believe to have imported everything correctly by declaring the respective GResources:

But when compiling the app, I get a blank window and the following error: Error building template class 'Gjs_Window' for an instance of type 'Gjs_Window': .:0:0 Invalid object type 'TestLabel'. What am I doing wrong here?

[fmuellner (Florian Müllner)]

Does it work if you add

import {TestLabel} from './test-label.js'; // needed for type registration, otherwise unused

in window.js?

[tarsi.surdi (Tarcísio Surdi)]

Only importing it like that didn’t fix it, since it’s not directly loaded anywhere else in my app for having it’s type registred. I got it to work by adding this: GObject.type_ensure(TestLabel.$gtype) in my window’s static block right before the it’s template is loaded.

It was also pointed out to me (through other channels) that I was trying to extend Gtk.Label, but since it’s a final class, that wouldn’t work. Swapping it for a Adw.Bin with the label inside of it solved that issue too.