Merge pull request #196 from Aylur/feat/jsx-gtk4

Add jsx support for gtk4

1 files changed, 21 insertions, 3 deletions

diff --git a/docs/guide/typescript/first-widgets.md b/docs/guide/typescript/first-widgets.md
index 77b2f61..9b8bf32 100644
--- a/docs/guide/typescript/first-widgets.md
+++ b/docs/guide/typescript/first-widgets.md
@@ -71,7 +71,7 @@ function MyButton(): JSX.Element {
 }
 ```
 
-```ts [MyButton.ts]
+```ts [MyButton.ts (gtk3)]
 import { Widget } from "astal/gtk3"
 
 function MyButton(): Widget.Button {
@@ -82,6 +82,17 @@ function MyButton(): Widget.Button {
 }
 ```
 
+```ts [MyButton.ts (gtk4)]
+import { Widget } from "astal/gtk4"
+
+function MyButton(): Widget.Button {
+    return Widget.Button(
+        { onClicked: "echo hello" },
+        Widget.Label({ label: "Click me!" }),
+    )
+}
+```
+
 :::
 
 :::info
@@ -218,6 +229,14 @@ Their types are not generated, but written by hand, which means not all of them
 Refer to the Gtk and Astal docs to have a full list of them.
 :::
 
+:::info
+Attributes prefixed with `onNotify` will connect to a `notify::` signal of the widget.
+
+```tsx
+<switch onNotifyActive={self => print("switched to", self.active)}>
+```
+:::
+
 ## How properties are passed
 
 Using JSX, a custom widget will always have a single object as its parameter.
@@ -413,8 +432,7 @@ function Parent(props: {
 
 :::tip
 If you have a widget where you pass widgets in various ways, you can
-wrap `child` in `children` in a [`Subscribable`](./faq#custom-widgets-with-bindable-properties) and handle all cases
-as if they were bindings.
+wrap `child` and `children` props in a [`Subscribable`](./faq#custom-widgets-with-bindable-properties) and handle all cases as if they were bindings.
 :::
 
 :::info