refactor(ags4): use agsV1 syntax

modules/ags/gtk4/tsconfig.json

@@ -2,8 +2,6 @@
   "$schema": "https://json.schemastore.org/tsconfig",
   "compilerOptions": {
     "experimentalDecorators": true,
-    "jsx": "react-jsx",
-    "jsxImportSource": "astal/gtk4",
     "lib": [
       "ES2022"
     ],

modules/ags/gtk4/widget/bar.ts

@@ -0,0 +1,49 @@
+import { App, Astal, Gdk, Gtk } from 'astal/gtk4';
+import { Variable } from 'astal';
+
+import Kompass from 'gi://Kompass';
+
+import { Box, Calendar, CenterBox, Label, MenuButton, Popover, Window } from './subclasses';
+
+const { EXCLUSIVE } = Astal.Exclusivity;
+const { TOP, LEFT, RIGHT } = Astal.WindowAnchor;
+const { CENTER } = Gtk.Align;
+
+const time = Variable(0);
+
+setInterval(() => {
+    time.set(time.get() + 1);
+}, 1000);
+
+export default () => {
+    const styledBox = Box({
+        css: time().as((t) => `* { background: red; min-height: 10px; min-width: ${t}px; }`),
+    });
+
+    return Window({
+        visible: true,
+        cssClasses: ['Bar'],
+        exclusivity: EXCLUSIVE,
+        anchor: TOP | LEFT | RIGHT,
+        application: App,
+
+        child: CenterBox({
+            startWidget: new Kompass.Tray({
+                cursor: Gdk.Cursor.new_from_name('pointer', null),
+            }),
+
+            centerWidget: styledBox,
+
+            endWidget: MenuButton({
+                cursor: Gdk.Cursor.new_from_name('pointer', null),
+                hexpand: true,
+                halign: CENTER,
+
+                children: [
+                    Label({ label: time().as(String) }),
+                    Popover({ child: Calendar() }),
+                ],
+            }),
+        }),
+    });
+};

modules/ags/gtk4/widget/bar.tsx

@@ -1,51 +0,0 @@
-import { App, Astal, Gdk, Gtk } from 'astal/gtk4';
-import { Variable } from 'astal';
-
-import Kompass from 'gi://Kompass';
-
-import { Box, Calendar, CenterBox, Label, MenuButton, Popover, Window } from './subclasses';
-
-const { EXCLUSIVE } = Astal.Exclusivity;
-const { TOP, LEFT, RIGHT } = Astal.WindowAnchor;
-const { CENTER } = Gtk.Align;
-
-const time = Variable(0);
-
-setInterval(() => {
-    time.set(time.get() + 1);
-}, 1000);
-
-export default () => {
-    const styledBox = (
-        <Box
-            css={time().as((t) => `* { background: red; min-height: 10px; min-width: ${t}px; }`)}
-        />
-    ) as Box;
-
-    return (
-        <Window
-            visible
-            cssClasses={['Bar']}
-            exclusivity={EXCLUSIVE}
-            anchor={TOP | LEFT | RIGHT}
-            application={App}
-        >
-            <CenterBox cssName="centerbox">
-                <Kompass.Tray cursor={Gdk.Cursor.new_from_name('pointer', null)} />
-
-                {styledBox}
-
-                <MenuButton
-                    cursor={Gdk.Cursor.new_from_name('pointer', null)}
-                    hexpand
-                    halign={CENTER}
-                >
-                    <Label label={time().as(String)} />
-                    <Popover>
-                        <Calendar />
-                    </Popover>
-                </MenuButton>
-            </CenterBox>
-        </Window>
-    );
-};

modules/ags/gtk4/widget/subclasses/astalify.ts

@@ -11,6 +11,10 @@ import {
 } from './_astal';
 
 export type BindableChild = Gtk.Widget | Binding<Gtk.Widget>;
+export interface AstalifyProps {
+    css: string
+    children: Gtk.Widget[]
+}
 
 export const type = Symbol('child type');
 const dummyBuilder = new Gtk.Builder();
@@ -161,6 +165,7 @@ export default <C extends new (...args: any[]) => Gtk.Widget>(
         set type(value: string) { this[type] = value; }
 
 
+        @property(Object)
         get children(): Gtk.Widget[] { return this.getChildren(this); }
 
         set children(value: Gtk.Widget[]) { this.setChildren(this, value); }

modules/ags/gtk4/widget/subclasses/box.ts

@@ -1,24 +1,28 @@
 import { register } from 'astal';
 import { Astal, type ConstructProps, Gtk } from 'astal/gtk4';
 
-import astalify from './astalify';
+import astalify, { type AstalifyProps } from './astalify';
 
 
 export type BoxProps = ConstructProps<
-    Box,
+    BoxClass,
-    Astal.Box.ConstructorProps & { css: string }
+    Astal.Box.ConstructorProps & AstalifyProps
 >;
 
 @register({ GTypeName: 'Box' })
-export class Box extends astalify(Astal.Box) {
+export class BoxClass extends astalify(Astal.Box) {
+    constructor({ cssName = 'box', ...props }: BoxProps = {}) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    constructor(props?: BoxProps) { super(props as any); }
+        super({ cssName, ...props as any });
+    }
 
-    getChildren(self: Box) {
+    getChildren(self: BoxClass) {
         return self.get_children();
     }
 
-    setChildren(self: Box, children: Gtk.Widget[]) {
+    setChildren(self: BoxClass, children: Gtk.Widget[]) {
         return self.set_children(children);
     }
 }
+
+export const Box = (props?: BoxProps) => new BoxClass(props);

modules/ags/gtk4/widget/subclasses/button.ts

@@ -1,20 +1,24 @@
 import { register } from 'astal';
 import { Gtk, type ConstructProps } from 'astal/gtk4';
 
-import astalify from './astalify';
+import astalify, { type AstalifyProps } from './astalify';
 
 
 type ButtonSignals = Record<`on${string}`, unknown[]> & {
     onClicked: []
 };
 export type ButtonProps = ConstructProps<
-    Button,
+    ButtonClass,
-    Gtk.Button.ConstructorProps & { css: string },
+    Gtk.Button.ConstructorProps & AstalifyProps,
     ButtonSignals
 >;
 
 @register({ GTypeName: 'Button' })
-export class Button extends astalify(Gtk.Button) {
+export class ButtonClass extends astalify(Gtk.Button) {
+    constructor({ cssName = 'button', ...props }: ButtonProps = {}) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    constructor(props?: ButtonProps) { super(props as any); }
+        super({ cssName, ...props as any });
     }
+}
+
+export const Button = (props?: ButtonProps) => new ButtonClass(props);

modules/ags/gtk4/widget/subclasses/calendar.ts

@@ -1,7 +1,7 @@
 import { register } from 'astal';
 import { Gtk, type ConstructProps } from 'astal/gtk4';
 
-import astalify from './astalify';
+import astalify, { type AstalifyProps } from './astalify';
 
 
 type CalendarSignals = Record<`on${string}`, unknown[]> & {
@@ -13,13 +13,17 @@ type CalendarSignals = Record<`on${string}`, unknown[]> & {
 
 };
 export type CalendarProps = ConstructProps<
-    Calendar,
+    CalendarClass,
-    Gtk.Calendar.ConstructorProps & { css: string },
+    Gtk.Calendar.ConstructorProps & AstalifyProps,
     CalendarSignals
 >;
 
 @register({ GTypeName: 'Calendar' })
-export class Calendar extends astalify(Gtk.Calendar) {
+export class CalendarClass extends astalify(Gtk.Calendar) {
+    constructor({ cssName = 'calendar', ...props }: CalendarProps = {}) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    constructor(props?: CalendarProps) { super(props as any); }
+        super({ cssName, ...props as any });
     }
+}
+
+export const Calendar = (props?: CalendarProps) => new CalendarClass(props);

modules/ags/gtk4/widget/subclasses/centerbox.ts

@@ -1,24 +1,26 @@
 import { register } from 'astal';
 import { Gtk, type ConstructProps } from 'astal/gtk4';
 
-import astalify from './astalify';
+import astalify, { type AstalifyProps } from './astalify';
 
 
 export type CenterBoxProps = ConstructProps<
-    CenterBox,
+    CenterBoxClass,
-    Gtk.CenterBox.ConstructorProps & { css: string }
+    Gtk.CenterBox.ConstructorProps & AstalifyProps
 >;
 
 @register({ GTypeName: 'CenterBox' })
-export class CenterBox extends astalify(Gtk.CenterBox) {
+export class CenterBoxClass extends astalify(Gtk.CenterBox) {
+    constructor({ cssName = 'centerbox', ...props }: CenterBoxProps = {}) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    constructor(props?: CenterBoxProps) { super(props as any); }
+        super({ cssName, ...props as any });
+    }
 
-    getChildren(box: CenterBox) {
+    getChildren(box: CenterBoxClass) {
         return [box.startWidget, box.centerWidget, box.endWidget];
     }
 
-    setChildren(box: CenterBox, children: (Gtk.Widget | null)[]) {
+    setChildren(box: CenterBoxClass, children: (Gtk.Widget | null)[]) {
         if (children.length > 3) {
             throw new Error('Cannot have more than 3 children in a CenterBox');
         }
@@ -28,3 +30,5 @@ export class CenterBox extends astalify(Gtk.CenterBox) {
         box.endWidget = children[2] || new Gtk.Box();
     }
 }
+
+export const CenterBox = (props?: CenterBoxProps) => new CenterBoxClass(props);

modules/ags/gtk4/widget/subclasses/entry.ts

@@ -1,7 +1,7 @@
 import { register } from 'astal';
 import { Gtk, type ConstructProps } from 'astal/gtk4';
 
-import astalify from './astalify';
+import astalify, { type AstalifyProps } from './astalify';
 
 
 type EntrySignals = Record<`on${string}`, unknown[]> & {
@@ -9,15 +9,19 @@ type EntrySignals = Record<`on${string}`, unknown[]> & {
     onNotifyText: []
 };
 export type EntryProps = ConstructProps<
-    Entry,
+    EntryClass,
-    Gtk.Entry.ConstructorProps & { css: string },
+    Gtk.Entry.ConstructorProps & AstalifyProps,
     EntrySignals
 >;
 
 @register({ GTypeName: 'Entry' })
-export class Entry extends astalify(Gtk.Entry) {
+export class EntryClass extends astalify(Gtk.Entry) {
+    constructor({ cssName = 'entry', ...props }: EntryProps = {}) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    constructor(props?: EntryProps) { super(props as any); }
+        super({ cssName, ...props as any });
+    }
 
     getChildren() { return []; }
 }
+
+export const Entry = (props?: EntryProps) => new EntryClass(props);

modules/ags/gtk4/widget/subclasses/image.ts

@@ -1,18 +1,22 @@
 import { register } from 'astal';
 import { Gtk, type ConstructProps } from 'astal/gtk4';
 
-import astalify from './astalify';
+import astalify, { type AstalifyProps } from './astalify';
 
 
 export type ImageProps = ConstructProps<
-    Image,
+    ImageClass,
-    Gtk.Image.ConstructorProps & { css: string }
+    Gtk.Image.ConstructorProps & AstalifyProps
 >;
 
 @register({ GTypeName: 'Image' })
-export class Image extends astalify(Gtk.Image) {
+export class ImageClass extends astalify(Gtk.Image) {
+    constructor({ cssName = 'image', ...props }: ImageProps = {}) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    constructor(props?: ImageProps) { super(props as any); }
+        super({ cssName, ...props as any });
+    }
 
     getChildren() { return []; }
 }
+
+export const Image = (props?: ImageProps) => new ImageClass(props);

modules/ags/gtk4/widget/subclasses/label.ts

@@ -1,18 +1,22 @@
 import { register } from 'astal';
 import { Gtk, type ConstructProps } from 'astal/gtk4';
 
-import astalify from './astalify';
+import astalify, { type AstalifyProps } from './astalify';
 
 
 export type LabelProps = ConstructProps<
-    Label,
+    LabelClass,
-    Gtk.Label.ConstructorProps & { css: string }
+    Gtk.Label.ConstructorProps & AstalifyProps
 >;
 
 @register({ GTypeName: 'Label' })
-export class Label extends astalify(Gtk.Label) {
+export class LabelClass extends astalify(Gtk.Label) {
+    constructor({ cssName = 'label', ...props }: LabelProps = {}) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    constructor(props?: LabelProps) { super(props as any); }
+        super({ cssName, ...props as any });
+    }
 
     getChildren() { return []; }
 }
+
+export const Label = (props?: LabelProps) => new LabelClass(props);

modules/ags/gtk4/widget/subclasses/levelbar.ts

@@ -1,18 +1,22 @@
 import { register } from 'astal';
 import { Gtk, type ConstructProps } from 'astal/gtk4';
 
-import astalify from './astalify';
+import astalify, { type AstalifyProps } from './astalify';
 
 
 export type LevelBarProps = ConstructProps<
-    LevelBar,
+    LevelBarClass,
-    Gtk.LevelBar.ConstructorProps & { css: string }
+    Gtk.LevelBar.ConstructorProps & AstalifyProps
 >;
 
 @register({ GTypeName: 'LevelBar' })
-export class LevelBar extends astalify(Gtk.LevelBar) {
+export class LevelBarClass extends astalify(Gtk.LevelBar) {
+    constructor({ cssName = 'levelbar', ...props }: LevelBarProps = {}) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    constructor(props?: LevelBarProps) { super(props as any); }
+        super({ cssName, ...props as any });
+    }
 
     getChildren() { return []; }
 }
+
+export const LevelBar = (props?: LevelBarProps) => new LevelBarClass(props);

modules/ags/gtk4/widget/subclasses/menubutton.ts

@@ -1,24 +1,26 @@
 import { register } from 'astal';
 import { Gtk, type ConstructProps } from 'astal/gtk4';
 
-import astalify from './astalify';
+import astalify, { type AstalifyProps } from './astalify';
 
 
 export type MenuButtonProps = ConstructProps<
-    MenuButton,
+    MenuButtonClass,
-    Gtk.MenuButton.ConstructorProps & { css: string }
+    Gtk.MenuButton.ConstructorProps & AstalifyProps
 >;
 
 @register({ GTypeName: 'MenuButton' })
-export class MenuButton extends astalify(Gtk.MenuButton) {
+export class MenuButtonClass extends astalify(Gtk.MenuButton) {
+    constructor({ cssName = 'menubutton', ...props }: MenuButtonProps = {}) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    constructor(props?: MenuButtonProps) { super(props as any); }
+        super({ cssName, ...props as any });
+    }
 
-    getChildren(self: MenuButton) {
+    getChildren(self: MenuButtonClass) {
         return [self.popover, self.child];
     }
 
-    setChildren(self: MenuButton, children: Gtk.Widget[]) {
+    setChildren(self: MenuButtonClass, children: Gtk.Widget[]) {
         for (const child of children) {
             if (child instanceof Gtk.Popover) {
                 self.set_popover(child);
@@ -29,3 +31,5 @@ export class MenuButton extends astalify(Gtk.MenuButton) {
         }
     }
 }
+
+export const MenuButton = (props?: MenuButtonProps) => new MenuButtonClass(props);

modules/ags/gtk4/widget/subclasses/overlay.ts

@@ -1,20 +1,22 @@
 import { register } from 'astal';
 import { Gtk, type ConstructProps } from 'astal/gtk4';
 
-import astalify, { type } from './astalify';
+import astalify, { type, type AstalifyProps } from './astalify';
 
 
 export type OverlayProps = ConstructProps<
-    Overlay,
+    OverlayClass,
-    Gtk.Overlay.ConstructorProps & { css: string }
+    Gtk.Overlay.ConstructorProps & AstalifyProps
 >;
 
 @register({ GTypeName: 'Overlay' })
-export class Overlay extends astalify(Gtk.Overlay) {
+export class OverlayClass extends astalify(Gtk.Overlay) {
+    constructor({ cssName = 'overlay', ...props }: OverlayProps = {}) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    constructor(props?: OverlayProps) { super(props as any); }
+        super({ cssName, ...props as any });
+    }
 
-    getChildren(self: Overlay) {
+    getChildren(self: OverlayClass) {
         const children: Gtk.Widget[] = [];
         let ch = self.get_first_child();
 
@@ -26,7 +28,7 @@ export class Overlay extends astalify(Gtk.Overlay) {
         return children.filter((child) => child !== self.child);
     }
 
-    setChildren(self: Overlay, children: Gtk.Widget[]) {
+    setChildren(self: OverlayClass, children: Gtk.Widget[]) {
         for (const child of children) {
             const types = type in child ?
                 (child[type] as string).split(/\s+/) :
@@ -44,3 +46,5 @@ export class Overlay extends astalify(Gtk.Overlay) {
         }
     }
 }
+
+export const Overlay = (props?: OverlayProps) => new OverlayClass(props);

modules/ags/gtk4/widget/subclasses/popover.ts

@@ -1,16 +1,20 @@
 import { register } from 'astal';
 import { Gtk, type ConstructProps } from 'astal/gtk4';
 
-import astalify from './astalify';
+import astalify, { type AstalifyProps } from './astalify';
 
 
 export type PopoverProps = ConstructProps<
-    Popover,
+    PopoverClass,
-    Gtk.Popover.ConstructorProps & { css: string }
+    Gtk.Popover.ConstructorProps & AstalifyProps
 >;
 
 @register({ GTypeName: 'Popover' })
-export class Popover extends astalify(Gtk.Popover) {
+export class PopoverClass extends astalify(Gtk.Popover) {
+    constructor({ cssName = 'popover', ...props }: PopoverProps = {}) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    constructor(props?: PopoverProps) { super(props as any); }
+        super({ cssName, ...props as any });
     }
+}
+
+export const Popover = (props?: PopoverProps) => new PopoverClass(props);

modules/ags/gtk4/widget/subclasses/revealer.ts

@@ -1,16 +1,20 @@
 import { register } from 'astal';
 import { Gtk, type ConstructProps } from 'astal/gtk4';
 
-import astalify from './astalify';
+import astalify, { type AstalifyProps } from './astalify';
 
 
 export type RevealerProps = ConstructProps<
-    Revealer,
+    RevealerClass,
-    Gtk.Revealer.ConstructorProps & { css: string }
+    Gtk.Revealer.ConstructorProps & AstalifyProps
 >;
 
 @register({ GTypeName: 'Revealer' })
-export class Revealer extends astalify(Gtk.Revealer) {
+export class RevealerClass extends astalify(Gtk.Revealer) {
+    constructor({ cssName = 'revealer', ...props }: RevealerProps = {}) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    constructor(props?: RevealerProps) { super(props as any); }
+        super({ cssName, ...props as any });
     }
+}
+
+export const Revealer = (props?: RevealerProps) => new RevealerClass(props);

modules/ags/gtk4/widget/subclasses/slider.ts

@@ -1,22 +1,26 @@
 import { register } from 'astal';
 import { Astal, type ConstructProps } from 'astal/gtk4';
 
-import astalify from './astalify';
+import astalify, { type AstalifyProps } from './astalify';
 
 
 type SliderSignals = Record<`on${string}`, unknown[]> & {
     onClicked: []
 };
 export type SliderProps = ConstructProps<
-    Slider,
+    SliderClass,
-    Astal.Slider.ConstructorProps & { css: string },
+    Astal.Slider.ConstructorProps & AstalifyProps,
     SliderSignals
 >;
 
 @register({ GTypeName: 'Slider' })
-export class Slider extends astalify(Astal.Slider) {
+export class SliderClass extends astalify(Astal.Slider) {
+    constructor({ cssName = 'slider', ...props }: SliderProps = {}) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    constructor(props?: SliderProps) { super(props as any); }
+        super({ cssName, ...props as any });
+    }
 
     getChildren() { return []; }
 }
+
+export const Slider = (props?: SliderProps) => new SliderClass(props);

modules/ags/gtk4/widget/subclasses/stack.ts

@@ -1,20 +1,22 @@
 import { register } from 'astal';
 import { Gtk, type ConstructProps } from 'astal/gtk4';
 
-import astalify from './astalify';
+import astalify, { type AstalifyProps } from './astalify';
 
 
 export type StackProps = ConstructProps<
-    Stack,
+    StackClass,
-    Gtk.Stack.ConstructorProps & { css: string }
+    Gtk.Stack.ConstructorProps & AstalifyProps
 >;
 
 @register({ GTypeName: 'Stack' })
-export class Stack extends astalify(Gtk.Stack) {
+export class StackClass extends astalify(Gtk.Stack) {
+    constructor({ cssName = 'stack', ...props }: StackProps = {}) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    constructor(props?: StackProps) { super(props as any); }
+        super({ cssName, ...props as any });
+    }
 
-    setChildren(self: Stack, children: Gtk.Widget[]) {
+    setChildren(self: StackClass, children: Gtk.Widget[]) {
         for (const child of children) {
             if (child.name !== '' && child.name !== null) {
                 self.add_named(child, child.name);
@@ -25,3 +27,5 @@ export class Stack extends astalify(Gtk.Stack) {
         }
     }
 }
+
+export const Stack = (props?: StackProps) => new StackClass(props);

modules/ags/gtk4/widget/subclasses/switch.ts

@@ -1,18 +1,22 @@
 import { register } from 'astal';
 import { Gtk, type ConstructProps } from 'astal/gtk4';
 
-import astalify from './astalify';
+import astalify, { type AstalifyProps } from './astalify';
 
 
 export type SwitchProps = ConstructProps<
-    Switch,
+    SwitchClass,
-    Gtk.Switch.ConstructorProps & { css: string }
+    Gtk.Switch.ConstructorProps & AstalifyProps
 >;
 
 @register({ GTypeName: 'Switch' })
-export class Switch extends astalify(Gtk.Switch) {
+export class SwitchClass extends astalify(Gtk.Switch) {
+    constructor({ cssName = 'switch', ...props }: SwitchProps = {}) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    constructor(props?: SwitchProps) { super(props as any); }
+        super({ cssName, ...props as any });
+    }
 
     getChildren() { return []; }
 }
+
+export const Switch = (props?: SwitchProps) => new SwitchClass(props);

modules/ags/gtk4/widget/subclasses/window.ts

@@ -1,16 +1,20 @@
 import { register } from 'astal';
 import { Astal, type ConstructProps } from 'astal/gtk4';
 
-import astalify from './astalify';
+import astalify, { type AstalifyProps } from './astalify';
 
 
 export type WindowProps = ConstructProps<
-    Window,
+    WindowClass,
-    Astal.Window.ConstructorProps & { css: string }
+    Astal.Window.ConstructorProps & AstalifyProps
 >;
 
 @register({ GTypeName: 'Window' })
-export class Window extends astalify(Astal.Window) {
+export class WindowClass extends astalify(Astal.Window) {
+    constructor({ cssName = 'window', ...props }: WindowProps = {}) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    constructor(props?: WindowProps) { super(props as any); }
+        super({ cssName, ...props as any });
     }
+}
+
+export const Window = (props?: WindowProps) => new WindowClass(props);