From f5ed9aad2c8ab133b5c188aec70b0f704748015d Mon Sep 17 00:00:00 2001 From: Aylur Date: Mon, 18 Nov 2024 14:53:06 +0000 Subject: fix(gjs): add workaround for array props --- docs/guide/typescript/faq.md | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) (limited to 'docs/guide/typescript') diff --git a/docs/guide/typescript/faq.md b/docs/guide/typescript/faq.md index a151099..444a0af 100644 --- a/docs/guide/typescript/faq.md +++ b/docs/guide/typescript/faq.md @@ -197,11 +197,14 @@ These happen when accessing list type properties. Gjs fails to correctly bind import Notifd from "gi://AstalNotifd" const notifd = Notifd.get_default() -notifd.notifications // ❌ // [!code error] - -notifd.get_notifications() // ✅ +notifd.notifications // [!code --] +notifd.get_notifications() // [!code ++] ``` +:::tip +Open up an issue/PR to add a [workaround](https://github.com/Aylur/astal/blob/main/lang/gjs/src/overrides.ts). +::: + ## How to create regular floating windows Use `Gtk.Window` with [Widget.astalify](/guide/typescript/widget#how-to-use-non-builtin-gtk-widgets). -- cgit v1.2.3 From 41c002faf826a8ac637e6dece4c9ba1e65b1c608 Mon Sep 17 00:00:00 2001 From: Aylur Date: Mon, 18 Nov 2024 16:05:21 +0100 Subject: docs: add examples pages copies from the supported languages page --- docs/guide/typescript/examples.md | 14 ++++++++++++++ 1 file changed, 14 insertions(+) create mode 100644 docs/guide/typescript/examples.md (limited to 'docs/guide/typescript') diff --git a/docs/guide/typescript/examples.md b/docs/guide/typescript/examples.md new file mode 100644 index 0000000..ec51e89 --- /dev/null +++ b/docs/guide/typescript/examples.md @@ -0,0 +1,14 @@ +# TypeScript Examples + +## Gtk3 + +### [Simple Bar](https://github.com/Aylur/astal/tree/main/examples/js/simple-bar) +![simple-bar](https://github.com/user-attachments/assets/a306c864-56b7-44c4-8820-81f424f32b9b) + +### [Notification Popups](https://github.com/Aylur/astal/tree/main/examples/js/notifications) +![notification-popups](https://github.com/user-attachments/assets/0df0eddc-5c74-4af0-a694-48dc8ec6bb44) +### [Applauncher](https://github.com/Aylur/astal/tree/main/examples/js/applauncher) +![launcher](https://github.com/user-attachments/assets/2695e3bb-dff4-478a-b392-279fe638bfd3) + +### [Media Player](https://github.com/Aylur/astal/tree/main/examples/js/media-player) +![media-player](https://github.com/user-attachments/assets/891e9706-74db-4505-bd83-c3628d7b4fd0) -- cgit v1.2.3 From 920e7d2b03e72043f55dbb4bddc020f407748518 Mon Sep 17 00:00:00 2001 From: Aylur Date: Mon, 18 Nov 2024 22:35:45 +0000 Subject: docs: list of how widgets are passed --- docs/guide/typescript/first-widgets.md | 83 ++++++++++++++++++++++++---------- 1 file changed, 58 insertions(+), 25 deletions(-) (limited to 'docs/guide/typescript') diff --git a/docs/guide/typescript/first-widgets.md b/docs/guide/typescript/first-widgets.md index a467382..ac4f739 100644 --- a/docs/guide/typescript/first-widgets.md +++ b/docs/guide/typescript/first-widgets.md @@ -354,42 +354,75 @@ inner state of widgets that does not need to be recreated. In this case you can create a [custom reactive structure](./binding#example-custom-subscribable) ::: -When there is at least one `Binding` passed as a child, the `children` -parameter will always be a flattened `Binding>`. -When there is a single `Binding` passed as a child, the `child` parameter will -be a `Binding` or a flattened `Binding>`. +# How children are passed + +Here is full list of how children and bound children can be passed to custom widgets. ```tsx -import { type Binding } from "astal" +import Binding from "astal/binding" -function MyContainer({ children }: { - children?: Binding> -}) { - // children is a Binding over an Array of widgets -} +function Parent(props: { + child?: JSX.Element | Binding | Binding> + children?: Array | Binding> +}) -return - - {num(n => range(n).map(i => ( - } ``` -- cgit v1.2.3 From 4b87bb6c86b345aea63793a2f88ebdaec88c0d52 Mon Sep 17 00:00:00 2001 From: Aylur Date: Fri, 22 Nov 2024 20:10:22 +0000 Subject: docs: highlight global module tip --- docs/guide/typescript/faq.md | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) (limited to 'docs/guide/typescript') diff --git a/docs/guide/typescript/faq.md b/docs/guide/typescript/faq.md index 444a0af..4ee616b 100644 --- a/docs/guide/typescript/faq.md +++ b/docs/guide/typescript/faq.md @@ -92,7 +92,7 @@ printerr("print this line to stderr") ## Populate the global scope with frequently accessed variables -It might be annoying to always import Gtk only for `Gtk.Align` enums. +It might be annoying to always import Gtk only for the `Gtk.Align` enum. :::code-group @@ -118,7 +118,7 @@ Object.assign(globalThis, { :::code-group -```tsx [Bar.tsx] +```tsx [Bar.tsx] {3} export default function Bar() { return @@ -131,11 +131,13 @@ export default function Bar() { :::code-group ```ts [app.ts] -import "./globals" +import "./globals" // don't forget to import it first // [!code ++] import Bar from "./Bar" App.start({ - main: Bar + main() { + Bar() + } }) ``` -- cgit v1.2.3 From d953f4bae6c0a29cbee509015799fbb223d17188 Mon Sep 17 00:00:00 2001 From: Aylur <104676705+Aylur@users.noreply.github.com> Date: Sat, 23 Nov 2024 11:01:44 +0100 Subject: Update gobject.md --- docs/guide/typescript/gobject.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/guide/typescript') diff --git a/docs/guide/typescript/gobject.md b/docs/guide/typescript/gobject.md index f7f001d..4e40845 100644 --- a/docs/guide/typescript/gobject.md +++ b/docs/guide/typescript/gobject.md @@ -74,7 +74,7 @@ class MyObj extends GObject.Object { declare myProp: string constructor() { - super({ myProp: "default-value" }) + super({ myProp: "default-value" } as any) } } ``` -- cgit v1.2.3