Add new pure TypeScript compiler example, fixes #183

Author: JumpLink

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 renamed to 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/gtk4-template.ui renamed to examples/gtk-4-template-esbuild/gtk4-template.ui

@@ -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-esbuild/main.ts

@@ -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/package.json renamed to examples/gtk-4-template-esbuild/package.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-esbuild/preview.png

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