child property as second parameter

CHANGELOG.md

@@ -16,6 +16,7 @@
 - make Audio.microphone and Audio.speaker always
 - feat: greetd service (#282)
 - feat(pam): Utils.authenticate (#273)
+- feat: child property as second parameter [#265](https://github.com/Aylur/ags/pull/265/)
 
 ## Breaking change
 

example/media-widget/Media.js

@@ -115,38 +115,32 @@ const Player = player => {
         child: Widget.Icon(NEXT_ICON),
     });
 
-    return Widget.Box({
-        class_name: 'player',
-        children: [
-            img,
-            Widget.Box({
+    return Widget.Box(
+        { class_name: 'player' },
+        img,
+        Widget.Box(
+            {
                 vertical: true,
                 hexpand: true,
-                children: [
-                    Widget.Box({
-                        children: [
-                            title,
-                            icon,
-                        ],
-                    }),
-                    artist,
-                    Widget.Box({ vexpand: true }),
-                    positionSlider,
-                    Widget.CenterBox({
-                        start_widget: positionLabel,
-                        center_widget: Widget.Box({
-                            children: [
-                                prev,
-                                playPause,
-                                next,
-                            ],
-                        }),
-                        end_widget: lengthLabel,
-                    }),
-                ],
+            },
+            Widget.Box([
+                title,
+                icon,
+            ]),
+            artist,
+            Widget.Box({ vexpand: true }),
+            positionSlider,
+            Widget.CenterBox({
+                start_widget: positionLabel,
+                center_widget: Widget.Box([
+                    prev,
+                    playPause,
+                    next,
+                ]),
+                end_widget: lengthLabel,
             }),
-        ],
-    });
+        ),
+    );
 }
 
 export default () => Widget.Box({

example/media-widget/config.js

@@ -4,6 +4,7 @@ import Media from './Media.js';
 
 const win = Widget.Window({
     name: 'mpris',
+    anchor: ['top', 'right'],
     child: Media(),
 });
 

src/widget.ts

@@ -19,39 +19,39 @@ import { Window as WindowClass, type WindowProps } from './widgets/window.js';
 import { CircularProgress as CircularProgressClass, type CircularProgressProps } from './widgets/circularprogress.js';
 import * as Etc from './widgets/etc.js';
 
-export const Window = <Child extends Gtk.Widget, Attr>(props?: WindowProps<Child, Attr>) => new WindowClass(props ?? {});
-export const Box = <Child extends Gtk.Widget, Attr>(props?: BoxProps<Child, Attr>) => new BoxClass(props ?? {});
-export const Button = <Child extends Gtk.Widget, Attr>(props?: ButtonProps<Child, Attr>) => new ButtonClass(props ?? {});
-export const CenterBox = <StartWidget extends Gtk.Widget, CenterWidget extends Gtk.Widget, EndWidget extends Gtk.Widget, Attr>(props?: CenterBoxProps<StartWidget, CenterWidget, EndWidget, Attr>) => new CenterBoxClass(props ?? {});
-export const CircularProgress = <Child extends Gtk.Widget, Attr>(props?: CircularProgressProps<Child, Attr>) => new CircularProgressClass(props ?? {});
-export const Entry = <Attr>(props?: EntryProps<Attr>) => new EntryClass(props ?? {});
-export const EventBox = <Child extends Gtk.Widget, Attr>(props?: EventBoxProps<Child, Attr>) => new EventBoxClass(props ?? {});
-export const Icon = <Attr>(props?: IconProps<Attr>) => new IconClass(props ?? {});
-export const Label = <Attr>(props?: LabelProps<Attr>) => new LabelClass(props ?? {});
-export const Menu = <Child extends Gtk.MenuItem, Attr>(props?: MenuProps<Child, Attr>) => new MenuClass(props ?? {});
-export const MenuItem = <Child extends Gtk.Widget, Attr>(props?: MenuItemProps<Child, Attr>) => new MenuItemClass(props ?? {});
-export const Overlay = <Child extends Gtk.Widget, Attr>(props?: OverlayProps<Child, Attr>) => new OverlayClass(props ?? {});
-export const ProgressBar = <Attr>(props?: ProgressBarProps<Attr>) => new ProgressBarClass(props ?? {});
-export const Revealer = <Child extends Gtk.Widget, Attr>(props?: RevealerProps<Child, Attr>) => new RevealerClass(props ?? {});
-export const Scrollable = <Child extends Gtk.Widget, Attr>(props?: ScrollableProps<Child, Attr>) => new ScrollableClass(props ?? {});
-export const Slider = <Attr>(props?: SliderProps<Attr>) => new SliderClass(props ?? {});
-export const Stack = <Child extends Gtk.Widget, Attr>(props?: StackProps<Child, Attr>) => new StackClass(props ?? {});
+export const Window = <Child extends Gtk.Widget, Attr>(props?: WindowProps<Child, Attr>, child?: Child) => new WindowClass(props, child);
+export const Box = <Child extends Gtk.Widget, Attr>(props?: BoxProps<Child, Attr> | Child[], ...children: Child[]) => new BoxClass(props, ...children);
+export const Button = <Child extends Gtk.Widget, Attr>(props?: ButtonProps<Child, Attr>) => new ButtonClass(props);
+export const CenterBox = <StartWidget extends Gtk.Widget, CenterWidget extends Gtk.Widget, EndWidget extends Gtk.Widget, Attr>(props?: CenterBoxProps<StartWidget, CenterWidget, EndWidget, Attr>, startWidget?: StartWidget, centerWidget?: CenterWidget, endWidget?: EndWidget) => new CenterBoxClass(props, startWidget, centerWidget, endWidget);
+export const CircularProgress = <Child extends Gtk.Widget, Attr>(props?: CircularProgressProps<Child, Attr>, child?: Child) => new CircularProgressClass(props, child);
+export const Entry = <Attr>(props?: EntryProps<Attr>) => new EntryClass(props);
+export const EventBox = <Child extends Gtk.Widget, Attr>(props?: EventBoxProps<Child, Attr>) => new EventBoxClass(props);
+export const Icon = <Attr>(props?: IconProps<Attr>) => new IconClass(props);
+export const Label = <Attr>(props?: LabelProps<Attr>) => new LabelClass(props);
+export const Menu = <Child extends Gtk.MenuItem, Attr>(props?: MenuProps<Child, Attr>, ...children: Child[]) => new MenuClass(props, ...children);
+export const MenuItem = <Child extends Gtk.Widget, Attr>(props?: MenuItemProps<Child, Attr>, child?: Child) => new MenuItemClass(props, child);
+export const Overlay = <Child extends Gtk.Widget, Attr>(props?: OverlayProps<Child, Attr>, ...children: Child[]) => new OverlayClass(props, ...children);
+export const ProgressBar = <Attr>(props?: ProgressBarProps<Attr>) => new ProgressBarClass(props);
+export const Revealer = <Child extends Gtk.Widget, Attr>(props?: RevealerProps<Child, Attr>, child?: Child) => new RevealerClass(props, child);
+export const Scrollable = <Child extends Gtk.Widget, Attr>(props?: ScrollableProps<Child, Attr>, child?: Child) => new ScrollableClass(props, child);
+export const Slider = <Attr>(props?: SliderProps<Attr>) => new SliderClass(props);
+export const Stack = <Child extends Gtk.Widget, Attr>(props?: StackProps<Child, Attr>) => new StackClass(props);
 
-export const Calendar = <Attr>(props?: Etc.CalendarProps<Attr>) => new Etc.Calendar(props ?? {});
-export const ColorButton = <Attr>(props?: Etc.ColorButtonProps<Attr>) => new Etc.ColorButton(props ?? {});
-export const DrawingArea = <Attr>(props?: Etc.DrawingAreaProps<Attr>) => new Etc.DrawingArea(props ?? {});
-export const FileChooserButton = <Attr>(props?: Etc.FileChooserButtonProps<Attr>) => new Etc.FileChooserButton(props ?? {});
-export const Fixed = <Attr>(props?: Etc.FixedProps<Attr>) => new Etc.Fixed(props ?? {});
-export const FlowBox = <Attr>(props?: Etc.FlowBoxProps<Attr>) => new Etc.FlowBox(props ?? {});
-export const FontButton = <Attr>(props?: Etc.FontButtonProps<Attr>) => new Etc.FontButton(props ?? {});
-export const LevelBar = <Attr>(props?: Etc.LevelBarProps<Attr>) => new Etc.LevelBar(props ?? {});
-export const ListBox = <Attr>(props?: Etc.ListBoxProps<Attr>) => new Etc.ListBox(props ?? {});
-export const MenuBar = <Attr>(props?: Etc.MenuBarProps<Attr>) => new Etc.MenuBar(props ?? {});
-export const Separator = <Attr>(props?: Etc.SeparatorProps<Attr>) => new Etc.Separator(props ?? {});
-export const SpinButton = <Attr>(props?: Etc.SpinButtonProps<Attr>) => new Etc.SpinButton(props ?? {});
-export const Spinner = <Attr>(props?: Etc.SpinnerProps<Attr>) => new Etc.Spinner(props ?? {});
-export const Switch = <Attr>(props?: Etc.SwitchProps<Attr>) => new Etc.Switch(props ?? {});
-export const ToggleButton = <Attr>(props?: Etc.ToggleButtonProps<Attr>) => new Etc.ToggleButton(props ?? {});
+export const Calendar = <Attr>(props?: Etc.CalendarProps<Attr>) => new Etc.Calendar(props);
+export const ColorButton = <Attr>(props?: Etc.ColorButtonProps<Attr>) => new Etc.ColorButton(props);
+export const DrawingArea = <Attr>(props?: Etc.DrawingAreaProps<Attr>) => new Etc.DrawingArea(props);
+export const FileChooserButton = <Attr>(props?: Etc.FileChooserButtonProps<Attr>) => new Etc.FileChooserButton(props);
+export const Fixed = <Attr>(props?: Etc.FixedProps<Attr>) => new Etc.Fixed(props);
+export const FlowBox = <Attr>(props?: Etc.FlowBoxProps<Attr>) => new Etc.FlowBox(props);
+export const FontButton = <Attr>(props?: Etc.FontButtonProps<Attr>) => new Etc.FontButton(props);
+export const LevelBar = <Attr>(props?: Etc.LevelBarProps<Attr>) => new Etc.LevelBar(props);
+export const ListBox = <Attr>(props?: Etc.ListBoxProps<Attr>) => new Etc.ListBox(props);
+export const MenuBar = <Attr>(props?: Etc.MenuBarProps<Attr>) => new Etc.MenuBar(props);
+export const Separator = <Attr>(props?: Etc.SeparatorProps<Attr>) => new Etc.Separator(props);
+export const SpinButton = <Attr>(props?: Etc.SpinButtonProps<Attr>) => new Etc.SpinButton(props);
+export const Spinner = <Attr>(props?: Etc.SpinnerProps<Attr>) => new Etc.Spinner(props);
+export const Switch = <Attr>(props?: Etc.SwitchProps<Attr>) => new Etc.Switch(props);
+export const ToggleButton = <Attr>(props?: Etc.ToggleButtonProps<Attr>) => new Etc.ToggleButton(props);
 
 // ts can't compile export default { subclass, Box, Button ... }
 // so we use a function and add members to it instead

src/widgets/box.ts

@@ -4,7 +4,8 @@ import Gtk from 'gi://Gtk?version=3.0';
 export type BoxProps<
     Child extends Gtk.Widget,
     Attr = unknown,
-> = BaseProps<Box<Child, Attr>, Gtk.Box.ConstructorProperties & {
+    Self = Box<Child, Attr>
+> = BaseProps<Self, Gtk.Box.ConstructorProperties & {
     child?: Child
     children?: Child[]
     vertical?: boolean
@@ -22,7 +23,15 @@ export class Box<Child extends Gtk.Widget, Attr> extends Gtk.Box {
         });
     }
 
-    constructor(props: BoxProps<Child, Attr> = {}) {
+    constructor(propsOrChildren: BoxProps<Child, Attr> | Child[] = {}, ...children: Child[]) {
+        const props = Array.isArray(propsOrChildren) ? {} : propsOrChildren;
+
+        if (Array.isArray(propsOrChildren))
+            props.children = propsOrChildren;
+
+        else if (children.length > 0)
+            props.children = children;
+
         super(props as Gtk.Box.ConstructorProperties);
     }
 

src/widgets/button.ts

@@ -52,7 +52,10 @@ export class Button<Child extends Gtk.Widget, Attr> extends Gtk.Button {
         });
     }
 
-    constructor(props: ButtonProps<Child, Attr> = {}) {
+    constructor(props: ButtonProps<Child, Attr> = {}, child?: Child) {
+        if (child)
+            props.child = child;
+
         super(props as Gtk.Button.ConstructorProperties);
         this.add_events(Gdk.EventMask.SCROLL_MASK);
         this.add_events(Gdk.EventMask.SMOOTH_SCROLL_MASK);

src/widgets/centerbox.ts

@@ -35,7 +35,21 @@ export class CenterBox<
         });
     }
 
-    constructor(props: CenterBoxProps<StartWidget, CenterWidget, EndWidget, Attr> = {}) {
+    constructor(
+        props: CenterBoxProps<StartWidget, CenterWidget, EndWidget, Attr> = {},
+        startWidget?: StartWidget,
+        centerWidget?: CenterWidget,
+        endWidget?: EndWidget,
+    ) {
+        if (startWidget)
+            props.start_widget = startWidget;
+
+        if (centerWidget)
+            props.center_widget = centerWidget;
+
+        if (endWidget)
+            props.end_widget = endWidget;
+
         super(props as Gtk.Widget.ConstructorProperties);
     }
 

src/widgets/circularprogress.ts

@@ -43,7 +43,10 @@ export class CircularProgress<
         });
     }
 
-    constructor(props: CircularProgressProps<Child, Attr> = {}) {
+    constructor(props: CircularProgressProps<Child, Attr> = {}, child?: Child) {
+        if (child)
+            props.child = child;
+
         super(props as Gtk.Bin.ConstructorProperties);
     }