[gnome-sound-recorder/wip/cdavis/typescript] general: Use class static initialization blocks

[Christopher Davis <christopherdavis src gnome org>]

commit 666f04cd09a4feee176dd14f3b7600885ed911b6
Author: Christopher Davis <christopherdavis gnome org>
Date:   Tue Aug 23 19:10:11 2022 -0400

    general: Use class static initialization blocks
    
    Instead of wrapping our class definitions in
    `GObject.registerClass()`, we can use class static initalization
    blocks to register the class. This means that we can get
    rid of the extra *Class types.

 src/application.ts         | 12 ++++++---
 src/recorder.ts            | 43 ++++++++++++++++-------------
 src/recorderWidget.ts      | 49 ++++++++++++++++++---------------
 src/recording.ts           | 47 +++++++++++++++++---------------
 src/recordingList.ts       | 18 +++++++------
 src/recordingListWidget.ts | 46 ++++++++++++++++---------------
 src/row.ts                 | 67 +++++++++++++++++++++++++---------------------
 src/waveform.ts            | 49 ++++++++++++++++++---------------
 src/window.ts              | 53 +++++++++++++++++++-----------------
 9 files changed, 212 insertions(+), 172 deletions(-)
---
diff --git a/src/application.ts b/src/application.ts
index 52f12e7..81fad40 100644
--- a/src/application.ts
+++ b/src/application.ts
@@ -32,10 +32,14 @@ export const RecordingsDir = Gio.file_new_for_path(GLib.build_filenamev([GLib.ge
 export const CacheDir = Gio.file_new_for_path(GLib.build_filenamev([GLib.get_user_cache_dir(), pkg.name]));
 export const Settings = new Gio.Settings({ schema: pkg.name });
 
-import { Window, WindowClass } from './window.js';
+import { Window } from './window.js';
 
-export const Application = GObject.registerClass(class Application extends Adw.Application {
-    private window?: WindowClass;
+export class Application extends Adw.Application {
+    private window?: Window;
+
+    static {
+        GObject.registerClass(this);
+    }
 
     constructor() {
         super({ application_id: pkg.name, resource_base_path: '/org/gnome/SoundRecorder/' });
@@ -154,4 +158,4 @@ export const Application = GObject.registerClass(class Application extends Adw.A
         });
         aboutDialog.show();
     }
-});
+}
diff --git a/src/recorder.ts b/src/recorder.ts
index ae99641..874911c 100644
--- a/src/recorder.ts
+++ b/src/recorder.ts
@@ -25,7 +25,7 @@ import Gst from 'gi://Gst';
 import GstPbutils from 'gi://GstPbutils';
 
 import { RecordingsDir, Settings } from './application.js';
-import { Recording, RecordingClass } from './recording.js';
+import { Recording } from './recording.js';
 
 // All supported encoding profiles.
 export const EncodingProfiles = [
@@ -65,22 +65,7 @@ const AudioChannels = [
     { name: 'mono', channels: 1 },
 ];
 
-export type RecorderClass = InstanceType<typeof Recorder>;
-
-export const Recorder = GObject.registerClass({
-    Properties: {
-        'duration': GObject.ParamSpec.int(
-            'duration',
-            'Recording Duration', 'Recording duration in nanoseconds',
-            GObject.ParamFlags.READWRITE | GObject.ParamFlags.CONSTRUCT,
-            0, GLib.MAXINT16, 0),
-        'current-peak': GObject.ParamSpec.float(
-            'current-peak',
-            'Waveform current peak', 'Waveform current peak in float [0, 1]',
-            GObject.ParamFlags.READWRITE | GObject.ParamFlags.CONSTRUCT,
-            0.0, 1.0, 0.0),
-    },
-}, class Recorder extends GObject.Object {
+export class Recorder extends GObject.Object {
     private peaks: number[];
 
     private _duration!: number;
@@ -96,6 +81,26 @@ export const Recorder = GObject.registerClass({
     private timeout?: number | null;
     private pipeState?: Gst.State;
 
+    static {
+        GObject.registerClass(
+            {
+                Properties: {
+                    'duration': GObject.ParamSpec.int(
+                        'duration',
+                        'Recording Duration', 'Recording duration in nanoseconds',
+                        GObject.ParamFlags.READWRITE | GObject.ParamFlags.CONSTRUCT,
+                        0, GLib.MAXINT16, 0),
+                    'current-peak': GObject.ParamSpec.float(
+                        'current-peak',
+                        'Waveform current peak', 'Waveform current peak in float [0, 1]',
+                        GObject.ParamFlags.READWRITE | GObject.ParamFlags.CONSTRUCT,
+                        0.0, 1.0, 0.0),
+                },
+            },
+            this
+        )
+    }
+
     constructor() {
         super();
         this.peaks = [];
@@ -169,7 +174,7 @@ export const Recorder = GObject.registerClass({
             this.state = Gst.State.PLAYING;
     }
 
-    public stop(): RecordingClass | undefined {
+    public stop(): Recording | undefined {
         this.state = Gst.State.NULL;
         this.duration = 0;
         if (this.timeout) {
@@ -296,4 +301,4 @@ export const Recorder = GObject.registerClass({
         }
     }
 
-});
+}
diff --git a/src/recorderWidget.ts b/src/recorderWidget.ts
index ce251d2..f4eaac1 100644
--- a/src/recorderWidget.ts
+++ b/src/recorderWidget.ts
@@ -4,8 +4,8 @@ import GObject from 'gi://GObject';
 import Gtk from 'gi://Gtk?version=4.0';
 
 import { formatTime } from './utils.js';
-import { WaveForm, WaveFormClass, WaveType } from  './waveform.js';
-import { RecorderClass } from './recorder.js';
+import { WaveForm, WaveType } from  './waveform.js';
+import { Recorder } from './recorder.js';
 
 enum RecorderState {
     Recording,
@@ -13,33 +13,38 @@ enum RecorderState {
     Stopped,
 }
 
-export type RecorderWidgetClass = InstanceType<typeof RecorderWidget>;
-
-export const RecorderWidget = GObject.registerClass({
-    Template: 'resource:///org/gnome/SoundRecorder/ui/recorder.ui',
-    InternalChildren: [
-        'recorderBox', 'playbackStack', 'recorderTime',
-        'pauseBtn', 'resumeBtn',
-    ],
-    Signals: {
-        'canceled': {},
-        'paused': {},
-        'resumed': {},
-        'started': {},
-        'stopped': { param_types: [GObject.TYPE_OBJECT] },
-    },
-}, class RecorderWidget extends Gtk.Box {
+export class RecorderWidget extends Gtk.Box {
     private _recorderBox!: Gtk.Box;
     private _playbackStack!: Gtk.Stack;
     private _recorderTime!: Gtk.Label;
     private _pauseBtn!: Gtk.Button;
     private _resumeBtn!: Gtk.Button;
 
-    private recorder: RecorderClass;
-    private waveform: WaveFormClass;
+    private recorder: Recorder;
+    private waveform: WaveForm;
     public actionsGroup: Gio.SimpleActionGroup;
 
-    constructor(recorder: RecorderClass) {
+    static {
+        GObject.registerClass(
+            {
+                Template: 'resource:///org/gnome/SoundRecorder/ui/recorder.ui',
+                InternalChildren: [
+                    'recorderBox', 'playbackStack', 'recorderTime',
+                    'pauseBtn', 'resumeBtn',
+                ],
+                Signals: {
+                    'canceled': {},
+                    'paused': {},
+                    'resumed': {},
+                    'started': {},
+                    'stopped': { param_types: [GObject.TYPE_OBJECT] },
+                },
+            },
+            this
+        );
+    }
+
+    constructor(recorder: Recorder) {
         super();
         this.recorder = recorder;
 
@@ -175,4 +180,4 @@ export const RecorderWidget = GObject.registerClass({
             break;
         }
     }
-});
+}
diff --git a/src/recording.ts b/src/recording.ts
index 62413c1..3e69abc 100644
--- a/src/recording.ts
+++ b/src/recording.ts
@@ -8,26 +8,7 @@ import GstPbutils from 'gi://GstPbutils';
 import { CacheDir } from './application.js'
 import { EncodingProfiles } from './recorder.js';
 
-export type RecordingClass = InstanceType<typeof Recording>;
-
-export const Recording = GObject.registerClass({
-    Signals: {
-        'peaks-updated': {},
-        'peaks-loading': {},
-    },
-    Properties: {
-        'duration': GObject.ParamSpec.int(
-            'duration',
-            'Recording Duration', 'Recording duration in nanoseconds',
-            GObject.ParamFlags.READWRITE | GObject.ParamFlags.CONSTRUCT,
-            0, GLib.MAXINT16, 0),
-        'name': GObject.ParamSpec.string(
-            'name',
-            'Recording Name', 'Recording name in string',
-            GObject.ParamFlags.READWRITE | GObject.ParamFlags.CONSTRUCT,
-            ''),
-    },
-}, class Recording extends GObject.Object {
+export class Recording extends GObject.Object {
     private _file: Gio.File;
     private _peaks: number[];
     private loadedPeaks: number[];
@@ -38,6 +19,30 @@ export const Recording = GObject.registerClass({
 
     public pipeline?: Gst.Bin | null;
 
+    static {
+        GObject.registerClass(
+            {
+                Signals: {
+                    'peaks-updated': {},
+                    'peaks-loading': {},
+                },
+                Properties: {
+                    'duration': GObject.ParamSpec.int(
+                        'duration',
+                        'Recording Duration', 'Recording duration in nanoseconds',
+                        GObject.ParamFlags.READWRITE | GObject.ParamFlags.CONSTRUCT,
+                        0, GLib.MAXINT16, 0),
+                    'name': GObject.ParamSpec.string(
+                        'name',
+                        'Recording Name', 'Recording name in string',
+                        GObject.ParamFlags.READWRITE | GObject.ParamFlags.CONSTRUCT,
+                        ''),
+                },
+            },
+            this
+        );
+    }
+
     constructor(file: Gio.File) {
         super();
 
@@ -205,5 +210,5 @@ export const Recording = GObject.registerClass({
             }
         });
     }
-});
+}
 
diff --git a/src/recordingList.ts b/src/recordingList.ts
index 08940bc..1d2beed 100644
--- a/src/recordingList.ts
+++ b/src/recordingList.ts
@@ -4,16 +4,18 @@ import GLib from 'gi://GLib';
 import GObject from 'gi://GObject';
 
 import { RecordingsDir } from './application.js';
-import { Recording, RecordingClass } from './recording.js';
+import { Recording } from './recording.js';
 
-export type RecordingListClass = InstanceType<typeof RecordingList>;
-
-export const RecordingList = GObject.registerClass(class RecordingList extends Gio.ListStore {
+export class RecordingList extends Gio.ListStore {
     private enumerator?: Gio.FileEnumerator;
 
     public cancellable: Gio.Cancellable;
     public dirMonitor: Gio.FileMonitor;
 
+    static {
+        GObject.registerClass(this);
+    }
+
     constructor() {
         super();
         this.cancellable = new Gio.Cancellable();
@@ -148,18 +150,18 @@ export const RecordingList = GObject.registerClass(class RecordingList extends G
 
     private getIndex(file: Gio.File): number {
         for (let i = 0; i < this.get_n_items(); i++) {
-            const item = this.get_item(i) as RecordingClass;
+            const item = this.get_item(i) as Recording;
             if (item.uri === file.get_uri())
                 return i;
         }
         return -1;
     }
 
-    private sortedInsert(recording: RecordingClass): void {
+    private sortedInsert(recording: Recording): void {
         let added = false;
 
         for (let i = 0; i < this.get_n_items(); i++) {
-            const curr = this.get_item(i) as RecordingClass;
+            const curr = this.get_item(i) as Recording;
             if (curr.timeModified.difference(recording.timeModified) <= 0) {
                 this.insert(i, recording);
                 added = true;
@@ -170,4 +172,4 @@ export const RecordingList = GObject.registerClass(class RecordingList extends G
         if (!added)
             this.append(recording);
     }
-});
+}
diff --git a/src/recordingListWidget.ts b/src/recordingListWidget.ts
index 1c05cf1..1520ba5 100644
--- a/src/recordingListWidget.ts
+++ b/src/recordingListWidget.ts
@@ -6,20 +6,26 @@ import GstPlayer from 'gi://GstPlayer'
 import Gtk from 'gi://Gtk?version=4.0'
 import Gio from 'gi://Gio';
 
-import { Row, RowClass, RowState } from './row.js';
-import { RecordingClass } from './recording.js';
+import { Row, RowState } from './row.js';
+import { Recording } from './recording.js';
+import { WaveForm } from './waveform.js'
 
-export type RecordingsListWidgetClass = InstanceType<typeof RecordingsListWidget>;
-
-export const RecordingsListWidget = GObject.registerClass({
-    Signals: {
-        'row-deleted': { param_types: [GObject.TYPE_OBJECT, GObject.TYPE_INT] },
-    },
-}, class RecordingsListWidget extends Adw.Bin {
+export class RecordingsListWidget extends Adw.Bin {
     private player: GstPlayer.Player;
     public list: Gtk.ListBox;
-    public activeRow?: RowClass | null;
-    public activePlayingRow?: RowClass | null;
+    public activeRow?: Row | null;
+    public activePlayingRow?: Row | null;
+
+    static {
+        GObject.registerClass(
+            {
+                Signals: {
+                    'row-deleted': { param_types: [GObject.TYPE_OBJECT, GObject.TYPE_INT] },
+                },
+            },
+            this
+        );
+    }
 
     constructor(model: Gio.ListModel, player: GstPlayer.Player) {
         super();
@@ -53,9 +59,7 @@ export const RecordingsListWidget = GObject.registerClass({
         });
 
         // @ts-expect-error TypeScript gets `bind_model()` wrong
-        this.list.bind_model(model, (recording: RecordingClass) => {
-            // This is weird - does using `constructor()` break how it's recognized?
-            // @ts-expect-error TypeScript gets the type here wrong too
+        this.list.bind_model(model, (recording: Recording) => {
             const row = new Row(recording);
 
             row.waveform.connect('gesture-pressed', () => {
@@ -69,11 +73,11 @@ export const RecordingsListWidget = GObject.registerClass({
                 }
             });
 
-            row.waveform.connect('position-changed', (_wave, _position) => {
-                this.player.seek(_position * row.recording.duration);
+            row.waveform.connect('position-changed', (_wave: WaveForm, position: number) => {
+                this.player.seek(position * row.recording.duration);
             });
 
-            row.connect('play', (_row: RowClass) => {
+            row.connect('play', (_row: Row) => {
                 if (this.activePlayingRow) {
                     if (this.activePlayingRow !== _row) {
                         this.activePlayingRow.state = RowState.Paused;
@@ -92,12 +96,12 @@ export const RecordingsListWidget = GObject.registerClass({
                 this.player.pause();
             });
 
-            row.connect('seek-backward', (row: RowClass) => {
+            row.connect('seek-backward', (row: Row) => {
                 let position = this.player.position - 10 * Gst.SECOND;
                 position = position < 0 || position > row.recording.duration ? 0 : position;
                 this.player.seek(position);
             });
-            row.connect('seek-forward', (_row: RowClass) => {
+            row.connect('seek-forward', (_row: Row) => {
                 let position = this.player.position + 10 * Gst.SECOND;
                 position = position < 0 || position > _row.recording.duration ? 0 : position;
                 this.player.seek(position);
@@ -123,7 +127,7 @@ export const RecordingsListWidget = GObject.registerClass({
         this.list.connect('row-activated', this.rowActivated.bind(this));
     }
 
-    private rowActivated(_list: Gtk.ListBox, row: RowClass): void {
+    private rowActivated(_list: Gtk.ListBox, row: Row): void {
         if (row.editMode && row.expanded || this.activeRow && this.activeRow.editMode && 
this.activeRow.expanded)
             return;
 
@@ -158,4 +162,4 @@ export const RecordingsListWidget = GObject.registerClass({
                 after.remove_css_class('expanded-after');
         }
     }
-});
+}
diff --git a/src/row.ts b/src/row.ts
index 01994ba..fab94df 100644
--- a/src/row.ts
+++ b/src/row.ts
@@ -4,39 +4,16 @@ import Gio from 'gi://Gio'
 import GObject from 'gi://GObject'
 import Gtk from 'gi://Gtk?version=4.0'
 
-import { RecordingClass } from './recording.js';
+import { Recording } from './recording.js';
 import { displayDateTime, formatTime } from './utils.js';
-import { WaveForm, WaveFormClass, WaveType } from './waveform.js';
+import { WaveForm, WaveType } from './waveform.js';
 
 export enum RowState {
     Playing,
     Paused,
 }
 
-export type RowClass = InstanceType<typeof Row>;
-
-export const Row = GObject.registerClass({
-    Template: 'resource:///org/gnome/SoundRecorder/ui/row.ui',
-    InternalChildren: [
-        'playbackStack', 'mainStack', 'waveformStack', 'rightStack',
-        'name', 'entry', 'date', 'duration', 'revealer', 'playbackControls',
-        'saveBtn', 'playBtn', 'pauseBtn',
-    ],
-    Signals: {
-        'play': { param_types: [GObject.TYPE_STRING] },
-        'pause': {},
-        'seek-backward': {},
-        'seek-forward': {},
-        'deleted': {},
-    },
-    Properties: {
-        'expanded': GObject.ParamSpec.boolean(
-            'expanded',
-            'Row active status', 'Row active status',
-            GObject.ParamFlags.READWRITE | GObject.ParamFlags.CONSTRUCT,
-            false),
-    },
-}, class Row extends Gtk.ListBoxRow {
+export class Row extends Gtk.ListBoxRow {
     private _playbackStack!: Gtk.Stack;
     private _mainStack!: Gtk.Stack;
     private _waveformStack!: Gtk.Stack;
@@ -50,12 +27,12 @@ export const Row = GObject.registerClass({
     private _playBtn!: Gtk.Button;
     private _pauseBtn!: Gtk.Button;
 
-    public recording: RecordingClass;
+    public recording: Recording;
     private _expanded: boolean;
     private _editMode: boolean;
     private _state: RowState;
 
-    public waveform: WaveFormClass;
+    public waveform: WaveForm;
     private actionGroup: Gio.SimpleActionGroup;
     private exportDialog?: Gtk.FileChooserNative | null;
 
@@ -65,7 +42,35 @@ export const Row = GObject.registerClass({
     private playAction: Gio.SimpleAction;
     private keyController: Gtk.EventControllerKey;
 
-    constructor(recording: RecordingClass) {
+    static {
+        GObject.registerClass(
+            {
+                Template: 'resource:///org/gnome/SoundRecorder/ui/row.ui',
+                InternalChildren: [
+                    'playbackStack', 'mainStack', 'waveformStack', 'rightStack',
+                    'name', 'entry', 'date', 'duration', 'revealer', 'playbackControls',
+                    'saveBtn', 'playBtn', 'pauseBtn',
+                ],
+                Signals: {
+                    'play': { param_types: [GObject.TYPE_STRING] },
+                    'pause': {},
+                    'seek-backward': {},
+                    'seek-forward': {},
+                    'deleted': {},
+                },
+                Properties: {
+                    'expanded': GObject.ParamSpec.boolean(
+                        'expanded',
+                        'Row active status', 'Row active status',
+                        GObject.ParamFlags.READWRITE | GObject.ParamFlags.CONSTRUCT,
+                        false),
+                },
+            },
+            this
+        );
+    }
+
+    constructor(recording: Recording) {
         super();
 
         this.recording = recording;
@@ -177,7 +182,7 @@ export const Row = GObject.registerClass({
             this.saveRenameAction.activate(null);
         });
 
-        this.recording.connect('peaks-updated', (_recording: RecordingClass) => {
+        this.recording.connect('peaks-updated', (_recording: Recording) => {
             this._waveformStack.visible_child_name = 'wave';
             this.waveform.peaks = _recording.peaks;
         });
@@ -268,4 +273,4 @@ export const Row = GObject.registerClass({
     public get state(): RowState {
         return this._state;
     }
-});
+}
diff --git a/src/waveform.ts b/src/waveform.ts
index 906efb8..bf5c84d 100644
--- a/src/waveform.ts
+++ b/src/waveform.ts
@@ -37,26 +37,7 @@ export enum WaveType {
 
 const GUTTER = 4;
 
-export type WaveFormClass = InstanceType<typeof WaveForm>;
-
-export const WaveForm = GObject.registerClass({
-    Properties: {
-        'position': GObject.ParamSpec.float(
-            'position',
-            'Waveform position', 'Waveform position',
-            GObject.ParamFlags.READWRITE | GObject.ParamFlags.CONSTRUCT,
-            0.0, 1.0, 0.0),
-        'peak': GObject.ParamSpec.float(
-            'peak',
-            'Waveform current peak', 'Waveform current peak in float [0, 1]',
-            GObject.ParamFlags.READWRITE | GObject.ParamFlags.CONSTRUCT,
-            0.0, 1.0, 0.0),
-    },
-    Signals: {
-        'position-changed': {  param_types: [GObject.TYPE_DOUBLE]  },
-        'gesture-pressed': {},
-    },
-}, class WaveForm extends Gtk.DrawingArea {
+export class WaveForm extends Gtk.DrawingArea {
     private _peaks: number[];
     private _position: number;
     private dragGesture?: Gtk.GestureDrag;
@@ -65,6 +46,30 @@ export const WaveForm = GObject.registerClass({
 
     private waveType: WaveType;
 
+    static {
+        GObject.registerClass(
+            {
+                Properties: {
+                    'position': GObject.ParamSpec.float(
+                        'position',
+                        'Waveform position', 'Waveform position',
+                        GObject.ParamFlags.READWRITE | GObject.ParamFlags.CONSTRUCT,
+                        0.0, 1.0, 0.0),
+                    'peak': GObject.ParamSpec.float(
+                        'peak',
+                        'Waveform current peak', 'Waveform current peak in float [0, 1]',
+                        GObject.ParamFlags.READWRITE | GObject.ParamFlags.CONSTRUCT,
+                        0.0, 1.0, 0.0),
+                },
+                Signals: {
+                    'position-changed': {  param_types: [GObject.TYPE_DOUBLE]  },
+                    'gesture-pressed': {},
+                },
+            },
+            this
+        );
+    }
+
     constructor(params: Partial<Gtk.DrawingArea.ConstructorProperties> | undefined, type: WaveType) {
         super(params);
         this._peaks = [];
@@ -104,7 +109,7 @@ export const WaveForm = GObject.registerClass({
     }
 
     private drawFunc(superDa: Gtk.DrawingArea, ctx: Cairo.Context) {
-        const da = superDa as WaveFormClass;
+        const da = superDa as WaveForm;
         const maxHeight = da.get_allocated_height();
         const vertiCenter = maxHeight / 2;
         const horizCenter = da.get_allocated_width() / 2;
@@ -197,4 +202,4 @@ export const WaveForm = GObject.registerClass({
         this._peaks.length = 0;
         this.queue_draw();
     }
-});
+}
diff --git a/src/window.ts b/src/window.ts
index 4ecb4c6..716de6f 100644
--- a/src/window.ts
+++ b/src/window.ts
@@ -26,12 +26,12 @@ import Gst from 'gi://Gst'
 import GstPlayer from 'gi://GstPlayer'
 import Gtk from 'gi://Gtk?version=4.0'
 
-import { Recorder, RecorderClass } from './recorder.js';
-import { RecordingList, RecordingListClass } from './recordingList.js';
-import { RecordingsListWidget, RecordingsListWidgetClass } from './recordingListWidget.js';
-import { RecorderWidget, RecorderWidgetClass } from './recorderWidget.js';
-import { RecordingClass } from './recording.js'
-import { RowClass } from './row.js'
+import { Recorder } from './recorder.js';
+import { RecordingList } from './recordingList.js';
+import { RecordingsListWidget } from './recordingListWidget.js';
+import { RecorderWidget } from './recorderWidget.js';
+import { Recording } from './recording.js'
+import { Row } from './row.js'
 
 enum WindowState {
     Empty,
@@ -39,26 +39,19 @@ enum WindowState {
     Recorder,
 }
 
-export type WindowClass = InstanceType<typeof Window>;
-
-export const Window = GObject.registerClass({
-    Template: 'resource:///org/gnome/SoundRecorder/ui/window.ui',
-    InternalChildren: [
-        'mainStack', 'emptyPage', 'column', 'headerRevealer', 'toastOverlay',
-    ],
-}, class Window extends Adw.ApplicationWindow {
+export class Window extends Adw.ApplicationWindow {
     private _mainStack!: Gtk.Stack;
     private _emptyPage!: Adw.StatusPage;
     private _column!: Adw.Clamp;
     private _headerRevealer!: Gtk.Revealer;
     private _toastOverlay!: Adw.ToastOverlay;
 
-    private recorder: RecorderClass;
-    private recorderWidget: RecorderWidgetClass;
+    private recorder: Recorder;
+    private recorderWidget: RecorderWidget;
     private player: GstPlayer.Player;
-    private recordingList: RecordingListClass;
+    private recordingList: RecordingList;
     private itemsSignalId: number;
-    private recordingListWidget: RecordingsListWidgetClass;
+    private recordingListWidget: RecordingsListWidget;
 
     private toastUndo: boolean;
     private undoSignalID: number | null;
@@ -66,6 +59,18 @@ export const Window = GObject.registerClass({
 
     private _state: WindowState;
 
+    static {
+        GObject.registerClass(
+            {
+                Template: 'resource:///org/gnome/SoundRecorder/ui/window.ui',
+                InternalChildren: [
+                    'mainStack', 'emptyPage', 'column', 'headerRevealer', 'toastOverlay',
+                ],
+            },
+            this
+        );
+    }
+
     constructor(params: Partial<Adw.Application.ConstructorProperties>) {
         super(params);
 
@@ -93,7 +98,7 @@ export const Window = GObject.registerClass({
 
         this.recordingListWidget = new RecordingsListWidget(this.recordingList, this.player);
 
-        this.recordingListWidget.connect('row-deleted', (_listBox: Gtk.ListBox, recording: RecordingClass, 
index: number) => {
+        this.recordingListWidget.connect('row-deleted', (_listBox: Gtk.ListBox, recording: Recording, index: 
number) => {
             this.recordingList.remove(index);
             let message: string;
             if (recording.name) {
@@ -134,7 +139,7 @@ export const Window = GObject.registerClass({
             this.recordingList.disconnect(this.itemsSignalId);
 
         for (let i = 0; i < this.recordingList.get_n_items(); i++) {
-            const recording = this.recordingList.get_item(i) as RecordingClass;
+            const recording = this.recordingList.get_item(i) as Recording;
             if (recording.pipeline)
                 recording.pipeline.set_state(Gst.State.NULL);
         }
@@ -161,14 +166,14 @@ export const Window = GObject.registerClass({
             this.state = WindowState.List;
     }
 
-    private onRecorderStopped(_widget: RecorderWidgetClass, recording: RecordingClass): void {
+    private onRecorderStopped(_widget: RecorderWidget, recording: Recording): void {
         this.recordingList.insert(0, recording);
-        const row = this.recordingListWidget.list.get_row_at_index(0) as RowClass;
+        const row = this.recordingListWidget.list.get_row_at_index(0) as Row;
         row.editMode = true;
         this.state = WindowState.List;
     }
 
-    private sendNotification(message: string, recording: RecordingClass, index: number): void {
+    private sendNotification(message: string, recording: Recording, index: number): void {
         const toast = Adw.Toast.new(message);
         toast.connect('dismissed', () => {
             if (!this.toastUndo)
@@ -215,4 +220,4 @@ export const Window = GObject.registerClass({
     public get state(): WindowState {
         return this._state;
     }
-});
+}