### Subprocess Usage Example Source: https://github.com/aylur/ags/blob/main/docs/guide/utilities.md Demonstrates starting a subprocess with optional callbacks for stdout and stderr, and alternatively, connecting to the 'stdout' and 'stderr' signals. ```typescript const proc = subprocess( "some-command", (out) => console.log(out), // optional (err) => console.error(err), // optional ) // or with signals const proc = subprocess("some-command") proc.connect("stdout", (_, out) => console.log(out)) proc.connect("stderr", (_, err) => console.error(err)) ``` -------------------------------- ### CLI Instance Name Examples Source: https://github.com/aylur/ags/blob/main/docs/guide/migration-guide.md Examples showing how to specify the instance name using the CLI, both for older and newer versions. ```sh ags -i name ``` ```sh ags -t window-name -i name ``` ```sh ags run ``` ```sh ags toggle window-name -i name ``` -------------------------------- ### Example App Implementation Source: https://github.com/aylur/ags/blob/main/docs/guide/app-cli.md A full example of a Gtk.Application subclass that handles command-line arguments and creates a main window. ```tsx import Astal from "gi://Astal?version=4.0" import Gio from "gi://Gio?version=2.0" import GObject from "gi://GObject?version=2.0" import Gtk from "gi://Gtk?version=4.0" import { programInvocationName, programArgs } from "system" import { createRoot } from "gnim" class App extends Gtk.Application { static { GObject.registerClass(this) } constructor() { super({ applicationId: "my.awesome.app", flags: Gio.ApplicationFlags.HANDLES_COMMAND_LINE, }) } vfunc_command_line(cmd: Gio.ApplicationCommandLine): number { const args: string[] = cmd.get_arguments() if (cmd.isRemote) { console.log("invoked from remote instance") cmd.print_literal("hello from primary instance") cmd.done() } else { this.main(args) } return 0 } private main(args: string[]) { createRoot((dispose) => { this.connect("shutdown", dispose) return ( ) }) } } const app = new App() app.runAsync([programInvocationName, ...programArgs]) ``` -------------------------------- ### Update Syntax for Button Setup Source: https://github.com/aylur/ags/blob/main/docs/guide/migration-guide.md The 'setup' function is now represented by '$', and 'className' has been changed to 'class'. ```tsx ) } ``` -------------------------------- ### Create a Basic Window with a Counter and Date Source: https://github.com/aylur/ags/blob/main/docs/index.md This snippet demonstrates creating a window with a centered layout, displaying the current date and time, and a button to increment a counter. It utilizes state management and polling for updates. ```tsx function Bar() { const [counter, setCounter] = createState(0) const date = createPoll("", 1000, `date \"+%H:%M - %A %e.\"`) return ( ) } ``` -------------------------------- ### Run AGS with Nix Source: https://github.com/aylur/ags/blob/main/docs/guide/install.md Enter a Nix shell environment with AGS available directly from its GitHub repository. ```sh nix shell github:aylur/ags ``` -------------------------------- ### Import Utility Functions from Modules Source: https://github.com/aylur/ags/blob/main/docs/guide/migration-guide.md Utility functions like `exec`, `readFile`, `timeout`, and `fetch` are now available from dedicated modules. ```js Utils.exec("command") // [!code --:4] Utils.readFile("file") Utils.timeout(1000, callback) Utils.fetch("url") ``` ```js import { exec } from "ags/process" import { readFile } from "ags/file" import { timeout } from "ags/time" import { fetch } from "ags/fetch" ``` -------------------------------- ### Interactive Slider Input Source: https://github.com/aylur/ags/blob/main/docs/guide/intrinsics.md The Slider component provides a horizontal slider for input. It allows setting width and handling drag events to get the current value. ```tsx print(value)} /> ``` -------------------------------- ### Add Custom SVG Symbolic Icons Source: https://github.com/aylur/ags/blob/main/docs/guide/faq.md Shows how to add custom SVG symbolic icons by placing them in the correct directory structure and referencing them using `app.start` or `app.add_icons`. ```txt .\n├── icons\n│ └── hicolor\n│ └── scalable\n│ └── actions\n│ └── custom-symbolic.svg\n└── app.ts ``` ```ts app.start({ icons: `${SRC}/icons`, // SRC will point to the root main() { new Gtk.Image({ iconName: "custom-symbolic", }) }, }) ``` -------------------------------- ### State Management with GObject and createBinding Source: https://github.com/aylur/ags/blob/main/docs/guide/first-widgets.md Demonstrates state management by binding to GObject properties using createBinding and deriving values with createComputed. A custom GObject class 'CounterStore' is used to hold the state. ```tsx import GObject, { register, property } from "ags/gobject" import { createBinding, createComputed } from "ags" @register() class CounterStore extends GObject.Object { @property(Number) count = 0 } function Counter() { const counter = new CounterStore() function increment() { counter.count += 1 } const count = createBinding(count, "count") const label = createComputed(() => count().toString()) return ( ) } ``` -------------------------------- ### Create Persistent Floating Windows Source: https://github.com/aylur/ags/blob/main/docs/guide/faq.md Demonstrates how to create regular floating windows using `Gtk.Window` and prevent them from being destroyed on close by handling the `delete-event`. ```tsx return ( { self.hide() return true }} > {child} ) ``` -------------------------------- ### Conditionally Access Nested Objects with Source: https://github.com/aylur/ags/blob/main/docs/guide/faq.md Use the component to conditionally render content based on the presence of nested reactive objects. This example binds a label to a nested value. ```tsx function Component() { const nested: Accessor = createBinding(object, "nested") return ( {(nested) => nested && ( ) } ) } ``` -------------------------------- ### Initialize AGS Project with `ags init` Source: https://context7.com/aylur/ags/llms.txt Scaffold a new AGS project with a full TypeScript development environment. Can initialize in a specified directory or use a Nix flake template. ```sh # Initialize a project at a given directory ags init -d /path/to/my-shell ``` ```sh # Initialize using the Nix flake template nix flake init --template github:aylur/ags ``` -------------------------------- ### ags types Source: https://context7.com/aylur/ags/llms.txt Generate TypeScript type definitions from installed GObject Introspection (`.gir`) libraries so IDEs and the TypeScript compiler can provide correct types for GNOME APIs. ```APIDOC ## CLI — `ags types` Generate TypeScript type definitions from installed GObject Introspection (`.gir`) libraries so IDEs and the TypeScript compiler can provide correct types for GNOME APIs. ```sh # Generate types and write to project root ags types -u -d /path/to/project/root # Equivalent npm script (runs @ts-for-gir/cli) npm run types ``` ``` -------------------------------- ### ags init Source: https://context7.com/aylur/ags/llms.txt Scaffold a new AGS project with a full TypeScript development environment, tsconfig, package.json, and sample widget templates. ```APIDOC ## CLI — `ags init` Scaffold a new AGS project with a full TypeScript development environment, tsconfig, package.json, and sample widget templates. ```sh # Initialize a project at a given directory ags init -d /path/to/my-shell # Initialize using the Nix flake template nix flake init --template github:aylur/ags ``` ``` -------------------------------- ### Register Keybindings for GTK4 Window Source: https://github.com/aylur/ags/blob/main/docs/guide/faq.md Use Gtk.EventControllerKey to handle key press events in a GTK4 window when its keymode is set to ON_DEMAND. This example closes the window on Escape key press. ```tsx { if (keyval === Gdk.KEY_Escape) { widget.hide() } }} /> ``` -------------------------------- ### Toggle Windows via CLI Source: https://github.com/aylur/ags/blob/main/docs/guide/migration-guide.md Previously, windows were passed as an array to `App.config`. Now, pass the `app` instance to `Window` to make windows toggleable by name through the CLI. ```javascript App.config({ windows: [Widget.Window({ name: "window-name" })], }) ``` ```javascript app.start({ main() { return }, }) ``` -------------------------------- ### Initialize AGS project with Nix flake Source: https://github.com/aylur/ags/blob/main/docs/guide/quick-start.md Initialize an AGS project using a Nix flake template. This is an alternative method for setting up a development environment, particularly for users familiar with Nix. ```sh nix flake init --template github:aylur/ags ``` -------------------------------- ### State Management with createState Source: https://github.com/aylur/ags/blob/main/docs/guide/first-widgets.md Example of managing local state within a widget using createState for reactive values and createComputed for derived values. The increment function updates the state, and the label is derived from the count. ```tsx import { createState, createComputed } from "ags" function Counter() { const [count, setCount] = createState(0) function increment() { setCount((v) => v + 1) } const label = createComputed(() => count().toString()) return ( ) } ``` -------------------------------- ### Register Window with `application` Prop Source: https://github.com/aylur/ags/blob/main/docs/guide/app-cli.md Register a window by passing the `app` instance to the `application` prop. Ensure the `name` prop is set before `application`. ```tsx import app from "astal/gtk4/app" function Bar() { return ( ) } ``` -------------------------------- ### Create Long-running Process Reactive Value with createSubprocess Source: https://context7.com/aylur/ags/llms.txt Use `createSubprocess` to create an Accessor backed by a persistent subprocess. The process starts on the first subscriber and is killed when the last disconnects. Output lines can directly become the accessor value or be transformed. ```tsx import { createSubprocess } from "ags/process" function JournalLog() { // stdout lines become the accessor value const log = createSubprocess("", "journalctl -f") return