Add example to show how assets (ui and css) can be injected into the …

…app using vite

.eslintignore

@@ -6,6 +6,8 @@ tmp/
 test/
 # don't lint templates
 templates/
+# ignore examples
+examples/
 # ignore generated types
 @types/
 *.js

.yarnrc.yml

@@ -14,4 +14,8 @@ packageExtensions:
       "@parcel/core": "*"
   "@parcel/fs@*":
     dependencies:
-      "@parcel/core": "*"
+      "@parcel/core": "*"
+  # Similar fix for Farm, but wait for another fix: https://github.com/farm-fe/farm/issues/1421
+  "@farmfe/cli@*":
+    dependencies:
+      "@farmfe/core": "*"

examples/README.md

@@ -171,4 +171,32 @@ Build and run:
 ```bash
 cd /examples/gtk-4-custom-widget
 yarn start
+```
+
+## Gtk4 Template
+![gtk-4-template](gtk-4-template/preview.png)
+
+This example shows how to use the Gtk4 template engine to create a custom widget.
+
+Source: [gtk-4-template](gtk-4-template)  
+Bundler: ESBuild    
+
+Build and run:
+```bash
+cd /examples/gtk-4-template
+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.
+
+Source: [gtk-4-template-vite](gtk-4-template-vite)  
+Bundler: Vite    
+
+Build and run:
+```bash
+cd /examples/gtk-4-template-vite
+yarn start
 ```

examples/adw-1-hello/package.json

@@ -18,9 +18,6 @@
   "author": "Pascal Garber <[email protected]>",
   "license": "MIT",
   "devDependencies": {
-    "@babel/core": "^7.24.7",
-    "@rollup/plugin-babel": "^6.0.4",
-    "rollup": "^4.18.0",
     "typescript": "^5.5.3",
     "vite": "^5.3.3"
   },

examples/adw-1-hello/vite.config.js

@@ -1,31 +1,24 @@
 import { defineConfig } from 'vite'
-import { babel } from '@rollup/plugin-babel';
 
 export default defineConfig({
   build: {
+    // target: "firefox60", // Since GJS 1.53.90
+    // target: "firefox68", // Since GJS 1.63.90
+    // target: "firefox78", // Since GJS 1.65.90
+    // target: "firefox91", // Since GJS 1.71.1
+    // target: "firefox102", // Since GJS 1.73.2
+    target: "firefox115", // Since GJS 1.77.2
     assetsDir: '.',
     rollupOptions: {
       input: 'main.ts',
       output: {
         entryFileNames: 'main.js',
       },
       external: [
-        new RegExp('^gi:\/\/*', 'i')
+        new RegExp('^gi:\/\/*', 'i'),
+        new RegExp('^resource:\/\/*', 'i'),
+        'gettext', 'system', 'cairo'
       ],
-      plugins: [
-        babel({
-          babelHelpers: 'bundled',
-          targets: {
-            // firefox: 91
-            // firefox: 60, // Since GJS 1.53.90
-            // firefox: 68, // Since GJS 1.63.90
-            // firefox: 78, // Since GJS 1.65.90
-            // firefox: 91, // Since GJS 1.71.1
-            // firefox: 102, // Since GJS 1.73.2
-            firefox: 115, // Since GJS 1.77.2
-          }
-        })
-      ]
     }
   }
 });

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

@@ -0,0 +1,26 @@
+/**
+ * Type definition for asset content files
+ * @see https://vitejs.dev/guide/assets.html#impgitorting-asset-as-string
+ */
+declare module '*?raw' {
+  const textContent: string
+  export default textContent
+}
+
+/**
+ * Type definition for url asset strings
+ * @see https://vitejs.dev/guide/assets.html#explicit-url-imports
+ */
+declare module '*?url' {
+  const url: string
+  export default url
+}
+
+/**
+ * Type definition for inline style strings
+ * @see https://vitejs.dev/guide/assets.html#inline-assets
+ */
+declare module '*.css?inline' {
+  const style: string
+  export default style
+}

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

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

examples/gtk-4-template-vite/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-vite/main.ts

@@ -0,0 +1,89 @@
+#!/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 '@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 Template from './gtk4-template.ui?raw';
+import Style from './gtk4-template.css?inline';
+
+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();
+
+        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()
+    }
+
+    // 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!';
+    }
+
+    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();
+        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-vite/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@ts-for-gir-example/gtk-4-template-vite",
+  "version": "4.0.0-beta.5",
+  "description": "Simple GJS Gtk 4 example app to demonstrate how you can use .ui template XML files over a bundler",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build:app": "vite build",
+    "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",
+    "vite": "^5.3.3"
+  },
+  "dependencies": {
+    "@girs/gdk-4.0": "workspace:^",
+    "@girs/gjs": "workspace:^",
+    "@girs/glib-2.0": "workspace:^",
+    "@girs/gobject-2.0": "workspace:^",
+    "@girs/gtk-4.0": "workspace:^"
+  }
+}

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

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {   
+    "lib": ["ESNext"],
+    "types": [],
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "noImplicitThis": true,
+    "alwaysStrict": true,
+  },
+  "include": ["env.d.ts"],
+  "files": [
+    "main.ts",
+  ]
+}

examples/gtk-4-template-vite/vite.config.js

@@ -0,0 +1,26 @@
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  build: {
+    // target: "firefox60", // Since GJS 1.53.90
+    // target: "firefox68", // Since GJS 1.63.90
+    // target: "firefox78", // Since GJS 1.65.90
+    // target: "firefox91", // Since GJS 1.71.1
+    // target: "firefox102", // Since GJS 1.73.2
+    target: "firefox115", // Since GJS 1.77.2
+
+    assetsDir: '.',
+    rollupOptions: {
+      input: 'main.ts',
+      output: {
+        entryFileNames: 'main.js',
+      },
+      external: [
+        new RegExp('^gi:\/\/*', 'i'),
+        new RegExp('^resource:\/\/*', 'i'),
+        'gettext', 'system', 'cairo'
+      ],
+    },
+    cssMinify: false
+  }
+});

examples/gtk-4-template/main.ts

@@ -3,11 +3,6 @@
 // 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 '@girs/gio-2.0';
-import '@girs/gtk-4.0';
-
 import GObject from 'gi://GObject?version=2.0';
 import Gio from 'gi://Gio?version=2.0';
 import GLib from 'gi://GLib?version=2.0';
@@ -45,10 +40,10 @@ const ExampleWindow = GObject.registerClass({
         super._init(params);
 
         // The template has been initialized and you can access the children
-        if(this.box) this.box.visible = true;
+        if (this.box) this.box.visible = true;
 
         // Internal children are set on the instance prefixed with a `_`
-        if(this._button) this._button.visible = true;
+        if (this._button) this._button.visible = true;
     }
 
     // The signal handler bound in the UI file

examples/gtk-4-template/package.json

@@ -1,7 +1,7 @@
 {
-  "name": "@ts-for-gir-example/gtk-4-template-example",
+  "name": "@ts-for-gir-example/gtk-4-template",
   "version": "4.0.0-beta.5",
-  "description": "Simple GJS Gtk 4 example app to demonstrate how you can use .ui template XML files",
+  "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": {
@@ -18,7 +18,6 @@
   "author": "Pascal Garber <[email protected]>",
   "license": "MIT",
   "devDependencies": {
-    "@ts-for-gir/cli": "workspace:^",
     "esbuild": "^0.23.0",
     "typescript": "^5.5.3"
   },