Add new pure TypeScript compiler example, fixes #183

examples/README.md

@@ -173,24 +173,24 @@ cd /examples/gtk-4-custom-widget
 yarn start
 ```
 
-## Gtk4 Template
-![gtk-4-template](gtk-4-template/preview.png)
+## Gtk4 Template (esbuild)
+![gtk-4-template-esbuild](gtk-4-template-esbuild/preview.png)
 
-This example shows how to use the Gtk4 template engine to create a custom widget.
+This example shows how to use the Gtk4 template engine to create a custom widget. It's also showing how to load the template `.ui` and style `.css` files from the file system using ESBuild.
 
-Source: [gtk-4-template](gtk-4-template)  
+Source: [gtk-4-template-esbuild](gtk-4-template-esbuild)  
 Bundler: ESBuild    
 
 Build and run:
 ```bash
-cd /examples/gtk-4-template
+cd /examples/gtk-4-template-esbuild
 yarn start
 ```
 
 ## Gtk4 Template (Vite)
 ![gtk-4-template-vite](gtk-4-template-vite/preview.png)
 
-This example is largely identical to the example above, but uses Vite to inject the template `.ui` file into the source code.
+This example is largely identical to the example above, but uses Vite to inject the template `.ui` and style `.css` files into the source code.
 
 Source: [gtk-4-template-vite](gtk-4-template-vite)  
 Bundler: Vite    
@@ -199,4 +199,18 @@ Build and run:
 ```bash
 cd /examples/gtk-4-template-vite
 yarn start
+```
+
+## Gtk4 Template (TSC)
+![gtk-4-template-tsc](gtk-4-template-tsc/preview.png)
+
+This example is largely identical to the examples above, but uses the TypeScript compiler to compile the source code. No assets can be resolved with the TypeScript compiler, so this example shows how this can be done on runtime.
+
+Source: [gtk-4-template-tsc](gtk-4-template-tsc)  
+Bundler: TSC    
+
+Build and run:
+```bash
+cd /examples/gtk-4-template-tsc
+yarn start
 ```

examples/gtk-4-template-esbuild/env.d.ts

@@ -0,0 +1,9 @@
+declare module '*.ui' {
+  const content: string
+  export default content
+}
+
+declare module '*.css' {
+  const content: string
+  export default content
+}

examples/gtk-4-template/esbuild.js → examples/gtk-4-template-esbuild/esbuild.js

@@ -12,4 +12,8 @@ await build({
     target: "firefox115", // Since GJS 1.77.2
     format: 'esm',
     external: ['gi://*', 'resource://*', 'gettext', 'system', 'cairo'],
+    loader: {
+        '.css': 'text',
+        '.ui': 'text',
+      },
 })

examples/gtk-4-template-esbuild/gtk4-template.css

@@ -0,0 +1,3 @@
+window {
+  background-color: green;
+}

examples/gtk-4-template-esbuild/main.ts

@@ -0,0 +1,79 @@
+#!/usr/bin/env gjs -m
+// SPDX-License-Identifier: MIT OR LGPL-2.0-or-later
+// SPDX-FileCopyrightText: 2021 Andy Holmes <[email protected]>
+// Based on https://gitlab.gnome.org/GNOME/gjs/-/blob/master/examples/gtk4-template.js
+
+import GObject from 'gi://GObject?version=2.0';
+import GLib from 'gi://GLib?version=2.0';
+import Gtk from 'gi://Gtk?version=4.0';
+import Gdk from 'gi://Gdk?version=4.0';
+
+import Template from './gtk4-template.ui';
+import Style from './gtk4-template.css';
+
+Gtk.init();
+
+const ExampleWindow = GObject.registerClass({
+    GTypeName: 'ExampleWindow',
+    Template: Template,
+    Children: [
+        'box',
+    ],
+    InternalChildren: [
+        'button',
+    ],
+}, class ExampleWindow extends Gtk.Window {
+
+    box: Gtk.Box | null = null;
+    _button: Gtk.Button | null = null;
+
+    constructor() {
+        super();
+
+        // The template has been initialized and you can access the children
+        if (this.box) this.box.visible = true;
+
+        // Internal children are set on the instance prefixed with a `_`
+        if (this._button) this._button.visible = true;
+
+        this.initStyles()
+    }
+
+    // The signal handler bound in the UI file
+    _onButtonClicked(button: Gtk.Button) {
+        if (this instanceof Gtk.Window)
+            log('Callback scope is bound to `ExampleWindow`');
+
+        button.label = 'Button was clicked!';
+    }
+
+    /** Load the stylesheet in a CssProvider and add it to the Gtk.StyleContext */
+    protected initStyles() {
+        const provider = new Gtk.CssProvider();
+        console.log("Style", Style)
+        provider.load_from_string(Style)
+        const display = Gdk.Display.get_default()
+
+        if (!display) {
+            console.error('No display found')
+            return
+        }
+
+        Gtk.StyleContext.add_provider_for_display(
+            display,
+            provider,
+            Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION
+        );
+    }
+});
+
+
+// Create a window that stops the program when it is closed
+const loop = GLib.MainLoop.new(null, false);
+
+const win = new ExampleWindow();
+win.connect('close-request', () => loop.quit());
+win.present();
+
+loop.run();
+

examples/gtk-4-template/package.json → examples/gtk-4-template-esbuild/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@ts-for-gir-example/gtk-4-template",
+  "name": "@ts-for-gir-example/gtk-4-template-esbuild",
   "version": "4.0.0-beta.10",
   "description": "Simple GJS Gtk 4 example app to demonstrate how you can use .ui template XML files over GJS itself",
   "type": "module",

examples/gtk-4-template-esbuild/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {   
+    "lib": ["ESNext"],
+    "types": ["@girs/gjs", "@girs/gjs/dom", "@girs/gio-2.0", "@girs/glib-2.0", "@girs/gtk-4.0"],
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "noImplicitThis": true,
+    "alwaysStrict": true,
+  },
+  "files": [
+    "main.ts",
+  ],
+  "include": ["env.d.ts"]
+}

examples/gtk-4-template-tsc/gtk4-template.css

@@ -0,0 +1,3 @@
+window {
+  background-color: yellow;
+}

examples/gtk-4-template-tsc/gtk4-template.ui

@@ -0,0 +1,44 @@
+<!-- SPDX-License-Identifier: MIT OR LGPL-2.0-or-later -->
+<!-- SPDX-FileCopyrightText: 2021 Andy Holmes <[email protected]> -->
+<interface>
+  <!-- Template
+
+    * class: must be the `GTypeName` given in the class definition, or the
+      class name prefixed with `Gjs_` if not given (eg `Gjs_ExampleWinow`)
+    * parent: the GType name of the derived class
+
+    -->
+  <template class="ExampleWindow" parent="GtkWindow">
+    <property name="default-width">480</property>
+    <property name="default-height">320</property>
+    <child>
+      <object class="GtkBox" id="box">
+        <property name="visible">True</property>
+        <child>
+          <object class="GtkButton" id="button">
+            <property name="label">Button</property>
+            <property name="halign">center</property>
+            <property name="hexpand">True</property>
+            <property name="valign">center</property>
+            <property name="visible">True</property>
+
+            <!-- Signals
+
+              * name: the signal name
+              * handler: the name of method on the subclass to call when emitted
+              * swapped: must always be "no" in GJS applications
+              * object: the object bound to `this` in the callback. This is
+                usually the template class (eg. `ExampleClass`) but may also be
+                an object ID (eg. `box` or `button`).
+
+              -->
+            <signal name="clicked"
+                    handler="_onButtonClicked"
+                    swapped="no"
+                    object="ExampleWindow"/>
+          </object>
+        </child>
+      </object>
+    </child>
+  </template>
+</interface>

examples/gtk-4-template/main.ts → examples/gtk-4-template-tsc/main.ts

@@ -7,6 +7,7 @@ import GObject from 'gi://GObject?version=2.0';
 import Gio from 'gi://Gio?version=2.0';
 import GLib from 'gi://GLib?version=2.0';
 import Gtk from 'gi://Gtk?version=4.0';
+import Gdk from 'gi://Gdk?version=4.0';
 
 Gtk.init();
 
@@ -18,13 +19,12 @@ Gtk.init();
  *   - an absolute file URI, such as `file:///home/user/window.ui`
  *   - a GResource URI, such as `resource:///org/gnome/AppName/window.ui`
  */
-const file = Gio.File.new_for_path('gtk4-template.ui');
-const [, template] = file.load_contents(null);
-
+const templateFile = Gio.File.new_for_path('gtk4-template.ui');
+const [, Template] = templateFile.load_contents(null);
 
 const ExampleWindow = GObject.registerClass({
     GTypeName: 'ExampleWindow',
-    Template: template,
+    Template: Template,
     Children: [
         'box',
     ],
@@ -44,6 +44,8 @@ const ExampleWindow = GObject.registerClass({
 
         // Internal children are set on the instance prefixed with a `_`
         if (this._button) this._button.visible = true;
+
+        this.initStyles()
     }
 
     // The signal handler bound in the UI file
@@ -53,6 +55,24 @@ const ExampleWindow = GObject.registerClass({
 
         button.label = 'Button was clicked!';
     }
+
+    /** Load the stylesheet in a CssProvider and add it to the Gtk.StyleContext */
+    protected initStyles() {
+        const provider = new Gtk.CssProvider();
+        provider.load_from_path('gtk4-template.css')
+        const display = Gdk.Display.get_default()
+
+        if (!display) {
+            console.error('No display found')
+            return
+        }
+
+        Gtk.StyleContext.add_provider_for_display(
+            display,
+            provider,
+            Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION
+        );
+    }
 });
 
 

examples/gtk-4-template-tsc/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@ts-for-gir-example/gtk-4-template-tsc",
+  "version": "4.0.0-beta.10",
+  "description": "Simple GJS Gtk 4 example app to demonstrate how you can use .ui template XML files over GJS itself",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build:app": "tsc",
+    "build": "yarn build:app",
+    "start:app": "gjs -m dist/main.js",
+    "debug:app": "GTK_DEBUG=interactive yarn start:app",
+    "start": "yarn build && yarn start:app",
+    "validate": "yarn validate:types",
+    "validate:types": "tsc --noEmit",
+    "clear": "rm -rf dist @types"
+  },
+  "author": "Pascal Garber <[email protected]>",
+  "license": "MIT",
+  "devDependencies": {
+    "typescript": "^5.5.3"
+  },
+  "dependencies": {
+    "@girs/gio-2.0": "workspace:^",
+    "@girs/gjs": "workspace:^",
+    "@girs/glib-2.0": "workspace:^",
+    "@girs/gtk-4.0": "workspace:^"
+  }
+}

examples/gtk-4-template/tsconfig.json → examples/gtk-4-template-tsc/tsconfig.json

@@ -10,6 +10,7 @@
     "strictNullChecks": true,
     "noImplicitThis": true,
     "alwaysStrict": true,
+    "outDir": "./dist"
   },
   "files": [
     "main.ts",

examples/gtk-4-template-vite/main.ts

@@ -3,13 +3,10 @@
 // SPDX-FileCopyrightText: 2021 Andy Holmes <[email protected]>
 // Based on https://gitlab.gnome.org/GNOME/gjs/-/blob/master/examples/gtk4-template.js
 
-import '@girs/gjs';
-import '@girs/gjs/dom';
-
-import GObject from '@girs/gobject-2.0';
-import GLib from '@girs/glib-2.0';
-import Gtk from '@girs/gtk-4.0';
-import Gdk from '@girs/gdk-4.0'
+import GObject from 'gi://GObject?version=2.0';
+import GLib from 'gi://GLib?version=2.0';
+import Gtk from 'gi://Gtk?version=4.0';
+import Gdk from 'gi://Gdk?version=4.0';
 
 import Template from './gtk4-template.ui?raw';
 import Style from './gtk4-template.css?inline';
@@ -33,15 +30,12 @@ const ExampleWindow = GObject.registerClass({
     constructor() {
         super();
 
-        this.onStartup = this.onStartup.bind(this)
-
         // The template has been initialized and you can access the children
         if (this.box) this.box.visible = true;
 
         // Internal children are set on the instance prefixed with a `_`
         if (this._button) this._button.visible = true;
 
-        // this.connect('startup', this.onStartup)
         this.initStyles()
     }
 
@@ -53,10 +47,6 @@ const ExampleWindow = GObject.registerClass({
         button.label = 'Button was clicked!';
     }
 
-    protected onStartup(): void {
-        this.initStyles()
-    }
-
     /** Load the stylesheet in a CssProvider and add it to the Gtk.StyleContext */
     protected initStyles() {
         const provider = new Gtk.CssProvider();

examples/gtk-4-template-vite/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {   
     "lib": ["ESNext"],
-    "types": [],
+    "types": ["@girs/gjs", "@girs/gjs/dom", "@girs/gio-2.0", "@girs/glib-2.0", "@girs/gtk-4.0"],
     "target": "ESNext",
     "module": "ESNext",
     "moduleResolution": "bundler",
@@ -11,8 +11,8 @@
     "noImplicitThis": true,
     "alwaysStrict": true,
   },
-  "include": ["env.d.ts"],
   "files": [
     "main.ts",
-  ]
+  ],
+  "include": ["env.d.ts"]
 }