diff options
Diffstat (limited to 'lang/gjs/src/gtk3')
-rw-r--r-- | lang/gjs/src/gtk3/app.ts | 105 | ||||
-rw-r--r-- | lang/gjs/src/gtk3/astalify.ts | 325 | ||||
-rw-r--r-- | lang/gjs/src/gtk3/index.ts | 9 | ||||
-rw-r--r-- | lang/gjs/src/gtk3/jsx-runtime.ts | 96 | ||||
-rw-r--r-- | lang/gjs/src/gtk3/widget.ts | 154 |
5 files changed, 689 insertions, 0 deletions
diff --git a/lang/gjs/src/gtk3/app.ts b/lang/gjs/src/gtk3/app.ts new file mode 100644 index 0000000..1191dc4 --- /dev/null +++ b/lang/gjs/src/gtk3/app.ts @@ -0,0 +1,105 @@ +import IO from "gi://AstalIO" +import GObject from "gi://GObject" +import Astal from "gi://Astal?version=3.0" +import Gio from "gi://Gio?version=2.0" +import Gtk from "gi://Gtk?version=3.0" + +Gtk.init(null) + +type RequestHandler = { + (request: string, res: (response: any) => void): void +} + +type Config = Partial<{ + icons: string + instanceName: string + gtkTheme: string + iconTheme: string + cursorTheme: string + css: string + requestHandler: RequestHandler + main(...args: string[]): void + client(message: (msg: string) => string, ...args: string[]): void + hold: boolean +}> + +import { setConsoleLogDomain } from "console" +import { exit, programArgs } from "system" + +export default new (class AstalJS extends Astal.Application { + static { GObject.registerClass({ GTypeName: "AstalJS" }, this) } + + eval(body: string): Promise<any> { + return new Promise((res, rej) => { + try { + const fn = Function(`return (async function() { + ${body.includes(";") ? body : `return ${body};`} + })`) + fn()() + .then(res) + .catch(rej) + } + catch (error) { + rej(error) + } + }) + } + + requestHandler?: RequestHandler + + vfunc_request(msg: string, conn: Gio.SocketConnection): void { + if (typeof this.requestHandler === "function") { + this.requestHandler(msg, (response) => { + IO.write_sock(conn, String(response), (_, res) => + IO.write_sock_finish(res), + ) + }) + } + else { + super.vfunc_request(msg, conn) + } + } + + apply_css(style: string, reset = false) { + super.apply_css(style, reset) + } + + quit(code?: number): void { + super.quit() + exit(code ?? 0) + } + + start({ requestHandler, css, hold, main, client, icons, ...cfg }: Config = {}) { + client ??= () => { + print(`Astal instance "${this.instanceName}" already running`) + exit(1) + } + + Object.assign(this, cfg) + setConsoleLogDomain(this.instanceName) + + this.requestHandler = requestHandler + this.connect("activate", () => { + main?.(...programArgs) + }) + + try { + this.acquire_socket() + } + catch (error) { + return client(msg => IO.send_message(this.instanceName, msg)!, ...programArgs) + } + + if (css) + this.apply_css(css, false) + + if (icons) + this.add_icons(icons) + + hold ??= true + if (hold) + this.hold() + + this.runAsync([]) + } +}) diff --git a/lang/gjs/src/gtk3/astalify.ts b/lang/gjs/src/gtk3/astalify.ts new file mode 100644 index 0000000..2cd6984 --- /dev/null +++ b/lang/gjs/src/gtk3/astalify.ts @@ -0,0 +1,325 @@ +import Astal from "gi://Astal?version=3.0" +import Gtk from "gi://Gtk?version=3.0" +import Gdk from "gi://Gdk?version=3.0" +import GObject from "gi://GObject" +import { execAsync } from "../process.js" +import Variable from "../variable.js" +import Binding, { kebabify, snakeify, type Connectable, type Subscribable } from "../binding.js" + +export function mergeBindings(array: any[]) { + function getValues(...args: any[]) { + let i = 0 + return array.map(value => value instanceof Binding + ? args[i++] + : value, + ) + } + + const bindings = array.filter(i => i instanceof Binding) + + if (bindings.length === 0) + return array + + if (bindings.length === 1) + return bindings[0].as(getValues) + + return Variable.derive(bindings, getValues)() +} + +function setProp(obj: any, prop: string, value: any) { + try { + // the setter method has to be used because + // array like properties are not bound correctly as props + const setter = `set_${snakeify(prop)}` + if (typeof obj[setter] === "function") + return obj[setter](value) + + return (obj[prop] = value) + } + catch (error) { + console.error(`could not set property "${prop}" on ${obj}:`, error) + } +} + +export default function astalify< + C extends { new(...args: any[]): Gtk.Widget }, +>(cls: C) { + class Widget extends cls { + get css(): string { return Astal.widget_get_css(this) } + set css(css: string) { Astal.widget_set_css(this, css) } + get_css(): string { return this.css } + set_css(css: string) { this.css = css } + + get className(): string { return Astal.widget_get_class_names(this).join(" ") } + set className(className: string) { Astal.widget_set_class_names(this, className.split(/\s+/)) } + get_class_name(): string { return this.className } + set_class_name(className: string) { this.className = className } + + get cursor(): Cursor { return Astal.widget_get_cursor(this) as Cursor } + set cursor(cursor: Cursor) { Astal.widget_set_cursor(this, cursor) } + get_cursor(): Cursor { return this.cursor } + set_cursor(cursor: Cursor) { this.cursor = cursor } + + get clickThrough(): boolean { return Astal.widget_get_click_through(this) } + set clickThrough(clickThrough: boolean) { Astal.widget_set_click_through(this, clickThrough) } + get_click_through(): boolean { return this.clickThrough } + set_click_through(clickThrough: boolean) { this.clickThrough = clickThrough } + + declare __no_implicit_destroy: boolean + get noImplicitDestroy(): boolean { return this.__no_implicit_destroy } + set noImplicitDestroy(value: boolean) { this.__no_implicit_destroy = value } + + _setChildren(children: Gtk.Widget[]) { + children = children.flat(Infinity).map(ch => ch instanceof Gtk.Widget + ? ch + : new Gtk.Label({ visible: true, label: String(ch) })) + + // remove + if (this instanceof Gtk.Bin) { + const ch = this.get_child() + if (ch) + this.remove(ch) + if (ch && !children.includes(ch) && !this.noImplicitDestroy) + ch?.destroy() + } + else if (this instanceof Gtk.Container) { + for (const ch of this.get_children()) { + this.remove(ch) + if (!children.includes(ch) && !this.noImplicitDestroy) + ch?.destroy() + } + } + + // TODO: add more container types + if (this instanceof Astal.Box) { + this.set_children(children) + } + + else if (this instanceof Astal.Stack) { + this.set_children(children) + } + + else if (this instanceof Astal.CenterBox) { + this.startWidget = children[0] + this.centerWidget = children[1] + this.endWidget = children[2] + } + + else if (this instanceof Astal.Overlay) { + const [child, ...overlays] = children + this.set_child(child) + this.set_overlays(overlays) + } + + else if (this instanceof Gtk.Container) { + for (const ch of children) + this.add(ch) + } + } + + toggleClassName(cn: string, cond = true) { + Astal.widget_toggle_class_name(this, cn, cond) + } + + hook( + object: Connectable, + signal: string, + callback: (self: this, ...args: any[]) => void, + ): this + hook( + object: Subscribable, + callback: (self: this, ...args: any[]) => void, + ): this + hook( + object: Connectable | Subscribable, + signalOrCallback: string | ((self: this, ...args: any[]) => void), + callback?: (self: this, ...args: any[]) => void, + ) { + if (typeof object.connect === "function" && callback) { + const id = object.connect(signalOrCallback, (_: any, ...args: unknown[]) => { + callback(this, ...args) + }) + this.connect("destroy", () => { + (object.disconnect as Connectable["disconnect"])(id) + }) + } + + else if (typeof object.subscribe === "function" && typeof signalOrCallback === "function") { + const unsub = object.subscribe((...args: unknown[]) => { + signalOrCallback(this, ...args) + }) + this.connect("destroy", unsub) + } + + return this + } + + constructor(...params: any[]) { + super() + const [config] = params + + const { setup, child, children = [], ...props } = config + props.visible ??= true + + if (child) + children.unshift(child) + + // collect bindings + const bindings = Object.keys(props).reduce((acc: any, prop) => { + if (props[prop] instanceof Binding) { + const binding = props[prop] + delete props[prop] + return [...acc, [prop, binding]] + } + return acc + }, []) + + // collect signal handlers + const onHandlers = Object.keys(props).reduce((acc: any, key) => { + if (key.startsWith("on")) { + const sig = kebabify(key).split("-").slice(1).join("-") + const handler = props[key] + delete props[key] + return [...acc, [sig, handler]] + } + return acc + }, []) + + // set children + const mergedChildren = mergeBindings(children.flat(Infinity)) + if (mergedChildren instanceof Binding) { + this._setChildren(mergedChildren.get()) + this.connect("destroy", mergedChildren.subscribe((v) => { + this._setChildren(v) + })) + } + else { + if (mergedChildren.length > 0) { + this._setChildren(mergedChildren) + } + } + + // setup signal handlers + for (const [signal, callback] of onHandlers) { + if (typeof callback === "function") { + this.connect(signal, callback) + } + else { + this.connect(signal, () => execAsync(callback) + .then(print).catch(console.error)) + } + } + + // setup bindings handlers + for (const [prop, binding] of bindings) { + if (prop === "child" || prop === "children") { + this.connect("destroy", binding.subscribe((v: any) => { + this._setChildren(v) + })) + } + this.connect("destroy", binding.subscribe((v: any) => { + setProp(this, prop, v) + })) + setProp(this, prop, binding.get()) + } + + Object.assign(this, props) + setup?.(this) + } + } + + GObject.registerClass({ + GTypeName: `Astal_${cls.name}`, + Properties: { + "class-name": GObject.ParamSpec.string( + "class-name", "", "", GObject.ParamFlags.READWRITE, "", + ), + "css": GObject.ParamSpec.string( + "css", "", "", GObject.ParamFlags.READWRITE, "", + ), + "cursor": GObject.ParamSpec.string( + "cursor", "", "", GObject.ParamFlags.READWRITE, "default", + ), + "click-through": GObject.ParamSpec.boolean( + "click-through", "", "", GObject.ParamFlags.READWRITE, false, + ), + "no-implicit-destroy": GObject.ParamSpec.boolean( + "no-implicit-destroy", "", "", GObject.ParamFlags.READWRITE, false, + ), + }, + }, Widget) + + return Widget +} + +type BindableProps<T> = { + [K in keyof T]: Binding<T[K]> | T[K]; +} + +type SigHandler< + W extends InstanceType<typeof Gtk.Widget>, + Args extends Array<unknown>, +> = ((self: W, ...args: Args) => unknown) | string | string[] + +export type ConstructProps< + Self extends InstanceType<typeof Gtk.Widget>, + Props extends Gtk.Widget.ConstructorProps, + Signals extends Record<`on${string}`, Array<unknown>> = Record<`on${string}`, any[]>, +> = Partial<{ + // @ts-expect-error can't assign to unknown, but it works as expected though + [S in keyof Signals]: SigHandler<Self, Signals[S]> +}> & Partial<{ + [Key in `on${string}`]: SigHandler<Self, any[]> +}> & BindableProps<Partial<Props> & { + className?: string + css?: string + cursor?: string + clickThrough?: boolean +}> & { + onDestroy?: (self: Self) => unknown + onDraw?: (self: Self) => unknown + onKeyPressEvent?: (self: Self, event: Gdk.Event) => unknown + onKeyReleaseEvent?: (self: Self, event: Gdk.Event) => unknown + onButtonPressEvent?: (self: Self, event: Gdk.Event) => unknown + onButtonReleaseEvent?: (self: Self, event: Gdk.Event) => unknown + onRealize?: (self: Self) => unknown + setup?: (self: Self) => void +} + +export type BindableChild = Gtk.Widget | Binding<Gtk.Widget> + +type Cursor = + | "default" + | "help" + | "pointer" + | "context-menu" + | "progress" + | "wait" + | "cell" + | "crosshair" + | "text" + | "vertical-text" + | "alias" + | "copy" + | "no-drop" + | "move" + | "not-allowed" + | "grab" + | "grabbing" + | "all-scroll" + | "col-resize" + | "row-resize" + | "n-resize" + | "e-resize" + | "s-resize" + | "w-resize" + | "ne-resize" + | "nw-resize" + | "sw-resize" + | "se-resize" + | "ew-resize" + | "ns-resize" + | "nesw-resize" + | "nwse-resize" + | "zoom-in" + | "zoom-out" diff --git a/lang/gjs/src/gtk3/index.ts b/lang/gjs/src/gtk3/index.ts new file mode 100644 index 0000000..cfafbda --- /dev/null +++ b/lang/gjs/src/gtk3/index.ts @@ -0,0 +1,9 @@ +import Astal from "gi://Astal?version=3.0" +import Gtk from "gi://Gtk?version=3.0" +import Gdk from "gi://Gdk?version=3.0" +import astalify, { type ConstructProps } from "./astalify.js" + +export { Astal, Gtk, Gdk } +export { default as App } from "./app.js" +export { astalify, ConstructProps } +export * as Widget from "./widget.js" diff --git a/lang/gjs/src/gtk3/jsx-runtime.ts b/lang/gjs/src/gtk3/jsx-runtime.ts new file mode 100644 index 0000000..22dc424 --- /dev/null +++ b/lang/gjs/src/gtk3/jsx-runtime.ts @@ -0,0 +1,96 @@ +import Gtk from "gi://Gtk?version=3.0" +import { mergeBindings, type BindableChild } from "./astalify.js" +import * as Widget from "./widget.js" + +function isArrowFunction(func: any): func is (args: any) => any { + return !Object.hasOwn(func, "prototype") +} + +export function Fragment({ children = [], child }: { + child?: BindableChild + children?: Array<BindableChild> +}) { + return mergeBindings([...children, child]) +} + +export function jsx( + ctor: keyof typeof ctors | typeof Gtk.Widget, + { children, ...props }: any, +) { + children ??= [] + + if (!Array.isArray(children)) + children = [children] + + children = children.filter(Boolean) + + if (children.length === 1) + props.child = children[0] + else if (children.length > 1) + props.children = children + + if (typeof ctor === "string") { + return new ctors[ctor](props) + } + + if (isArrowFunction(ctor)) + return ctor(props) + + // @ts-expect-error can be class or function + return new ctor(props) +} + +const ctors = { + box: Widget.Box, + button: Widget.Button, + centerbox: Widget.CenterBox, + circularprogress: Widget.CircularProgress, + drawingarea: Widget.DrawingArea, + entry: Widget.Entry, + eventbox: Widget.EventBox, + // TODO: fixed + // TODO: flowbox + icon: Widget.Icon, + label: Widget.Label, + levelbar: Widget.LevelBar, + // TODO: listbox + overlay: Widget.Overlay, + revealer: Widget.Revealer, + scrollable: Widget.Scrollable, + slider: Widget.Slider, + stack: Widget.Stack, + switch: Widget.Switch, + window: Widget.Window, +} + +declare global { + // eslint-disable-next-line @typescript-eslint/no-namespace + namespace JSX { + type Element = Gtk.Widget + type ElementClass = Gtk.Widget + interface IntrinsicElements { + box: Widget.BoxProps + button: Widget.ButtonProps + centerbox: Widget.CenterBoxProps + circularprogress: Widget.CircularProgressProps + drawingarea: Widget.DrawingAreaProps + entry: Widget.EntryProps + eventbox: Widget.EventBoxProps + // TODO: fixed + // TODO: flowbox + icon: Widget.IconProps + label: Widget.LabelProps + levelbar: Widget.LevelBarProps + // TODO: listbox + overlay: Widget.OverlayProps + revealer: Widget.RevealerProps + scrollable: Widget.ScrollableProps + slider: Widget.SliderProps + stack: Widget.StackProps + switch: Widget.SwitchProps + window: Widget.WindowProps + } + } +} + +export const jsxs = jsx diff --git a/lang/gjs/src/gtk3/widget.ts b/lang/gjs/src/gtk3/widget.ts new file mode 100644 index 0000000..fd70ed6 --- /dev/null +++ b/lang/gjs/src/gtk3/widget.ts @@ -0,0 +1,154 @@ +/* eslint-disable max-len */ +import Astal from "gi://Astal?version=3.0" +import Gtk from "gi://Gtk?version=3.0" +import GObject from "gi://GObject" +import astalify, { type ConstructProps, type BindableChild } from "./astalify.js" + +// Box +Object.defineProperty(Astal.Box.prototype, "children", { + get() { return this.get_children() }, + set(v) { this.set_children(v) }, +}) + +export type BoxProps = ConstructProps<Box, Astal.Box.ConstructorProps> +export class Box extends astalify(Astal.Box) { + static { GObject.registerClass({ GTypeName: "Box" }, this) } + constructor(props?: BoxProps, ...children: Array<BindableChild>) { super({ children, ...props } as any) } +} + +// Button +export type ButtonProps = ConstructProps<Button, Astal.Button.ConstructorProps, { + onClicked: [] + onClick: [event: Astal.ClickEvent] + onClickRelease: [event: Astal.ClickEvent] + onHover: [event: Astal.HoverEvent] + onHoverLost: [event: Astal.HoverEvent] + onScroll: [event: Astal.ScrollEvent] +}> +export class Button extends astalify(Astal.Button) { + static { GObject.registerClass({ GTypeName: "Button" }, this) } + constructor(props?: ButtonProps, child?: BindableChild) { super({ child, ...props } as any) } +} + +// CenterBox +export type CenterBoxProps = ConstructProps<CenterBox, Astal.CenterBox.ConstructorProps> +export class CenterBox extends astalify(Astal.CenterBox) { + static { GObject.registerClass({ GTypeName: "CenterBox" }, this) } + constructor(props?: CenterBoxProps, ...children: Array<BindableChild>) { super({ children, ...props } as any) } +} + +// CircularProgress +export type CircularProgressProps = ConstructProps<CircularProgress, Astal.CircularProgress.ConstructorProps> +export class CircularProgress extends astalify(Astal.CircularProgress) { + static { GObject.registerClass({ GTypeName: "CircularProgress" }, this) } + constructor(props?: CircularProgressProps, child?: BindableChild) { super({ child, ...props } as any) } +} + +// DrawingArea +export type DrawingAreaProps = ConstructProps<DrawingArea, Gtk.DrawingArea.ConstructorProps, { + onDraw: [cr: any] // TODO: cairo types +}> +export class DrawingArea extends astalify(Gtk.DrawingArea) { + static { GObject.registerClass({ GTypeName: "DrawingArea" }, this) } + constructor(props?: DrawingAreaProps) { super(props as any) } +} + +// Entry +export type EntryProps = ConstructProps<Entry, Gtk.Entry.ConstructorProps, { + onChanged: [] + onActivate: [] +}> +export class Entry extends astalify(Gtk.Entry) { + static { GObject.registerClass({ GTypeName: "Entry" }, this) } + constructor(props?: EntryProps) { super(props as any) } +} + +// EventBox +export type EventBoxProps = ConstructProps<EventBox, Astal.EventBox.ConstructorProps, { + onClick: [event: Astal.ClickEvent] + onClickRelease: [event: Astal.ClickEvent] + onHover: [event: Astal.HoverEvent] + onHoverLost: [event: Astal.HoverEvent] + onScroll: [event: Astal.ScrollEvent] +}> +export class EventBox extends astalify(Astal.EventBox) { + static { GObject.registerClass({ GTypeName: "EventBox" }, this) } + constructor(props?: EventBoxProps, child?: BindableChild) { super({ child, ...props } as any) } +} + +// // TODO: Fixed +// // TODO: FlowBox +// +// Icon +export type IconProps = ConstructProps<Icon, Astal.Icon.ConstructorProps> +export class Icon extends astalify(Astal.Icon) { + static { GObject.registerClass({ GTypeName: "Icon" }, this) } + constructor(props?: IconProps) { super(props as any) } +} + +// Label +export type LabelProps = ConstructProps<Label, Astal.Label.ConstructorProps> +export class Label extends astalify(Astal.Label) { + static { GObject.registerClass({ GTypeName: "Label" }, this) } + constructor(props?: LabelProps) { super(props as any) } +} + +// LevelBar +export type LevelBarProps = ConstructProps<LevelBar, Astal.LevelBar.ConstructorProps> +export class LevelBar extends astalify(Astal.LevelBar) { + static { GObject.registerClass({ GTypeName: "LevelBar" }, this) } + constructor(props?: LevelBarProps) { super(props as any) } +} + +// TODO: ListBox + +// Overlay +export type OverlayProps = ConstructProps<Overlay, Astal.Overlay.ConstructorProps> +export class Overlay extends astalify(Astal.Overlay) { + static { GObject.registerClass({ GTypeName: "Overlay" }, this) } + constructor(props?: OverlayProps, ...children: Array<BindableChild>) { super({ children, ...props } as any) } +} + +// Revealer +export type RevealerProps = ConstructProps<Revealer, Gtk.Revealer.ConstructorProps> +export class Revealer extends astalify(Gtk.Revealer) { + static { GObject.registerClass({ GTypeName: "Revealer" }, this) } + constructor(props?: RevealerProps, child?: BindableChild) { super({ child, ...props } as any) } +} + +// Scrollable +export type ScrollableProps = ConstructProps<Scrollable, Astal.Scrollable.ConstructorProps> +export class Scrollable extends astalify(Astal.Scrollable) { + static { GObject.registerClass({ GTypeName: "Scrollable" }, this) } + constructor(props?: ScrollableProps, child?: BindableChild) { super({ child, ...props } as any) } +} + +// Slider +export type SliderProps = ConstructProps<Slider, Astal.Slider.ConstructorProps, { + onDragged: [] +}> +export class Slider extends astalify(Astal.Slider) { + static { GObject.registerClass({ GTypeName: "Slider" }, this) } + constructor(props?: SliderProps) { super(props as any) } +} + +// Stack +export type StackProps = ConstructProps<Stack, Astal.Stack.ConstructorProps> +export class Stack extends astalify(Astal.Stack) { + static { GObject.registerClass({ GTypeName: "Stack" }, this) } + constructor(props?: StackProps, ...children: Array<BindableChild>) { super({ children, ...props } as any) } +} + +// Switch +export type SwitchProps = ConstructProps<Switch, Gtk.Switch.ConstructorProps> +export class Switch extends astalify(Gtk.Switch) { + static { GObject.registerClass({ GTypeName: "Switch" }, this) } + constructor(props?: SwitchProps) { super(props as any) } +} + +// Window +export type WindowProps = ConstructProps<Window, Astal.Window.ConstructorProps> +export class Window extends astalify(Astal.Window) { + static { GObject.registerClass({ GTypeName: "Window" }, this) } + constructor(props?: WindowProps, child?: BindableChild) { super({ child, ...props } as any) } +} |