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') 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/lua/examples.md | 4 ++++ docs/guide/typescript/examples.md | 14 ++++++++++++++ 2 files changed, 18 insertions(+) create mode 100644 docs/guide/lua/examples.md create mode 100644 docs/guide/typescript/examples.md (limited to 'docs/guide') diff --git a/docs/guide/lua/examples.md b/docs/guide/lua/examples.md new file mode 100644 index 0000000..be46b6e --- /dev/null +++ b/docs/guide/lua/examples.md @@ -0,0 +1,4 @@ +# Lua examples + +## [Simple Bar](https://github.com/Aylur/astal/tree/main/examples/lua/simple-bar) +![simple-bar](https://github.com/user-attachments/assets/a306c864-56b7-44c4-8820-81f424f32b9b) 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') 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 03b720929d64dcdaaef7ab3a7234596977b6ea08 Mon Sep 17 00:00:00 2001 From: tyrael <116419708+44mira@users.noreply.github.com> Date: Sat, 23 Nov 2024 00:26:42 +0800 Subject: doc: fix broken links to gtk docs --- docs/guide/lua/widget.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'docs/guide') diff --git a/docs/guide/lua/widget.md b/docs/guide/lua/widget.md index d9f99fa..593628e 100644 --- a/docs/guide/lua/widget.md +++ b/docs/guide/lua/widget.md @@ -139,18 +139,18 @@ These widgets are available by default in Lua. - Button: [Astal.Button](https://aylur.github.io/libastal/astal3/class.Button.html) - CenterBox: [Astal.CenterBox](https://aylur.github.io/libastal/astal3/class.CenterBox.html) - CircularProgress: [Astal.CircularProgress](https://aylur.github.io/libastal/astal3/class.CircularProgress.html) -- DrawingArea: [Gtk.DrawingArea](https://docs.gtk.org/gtk3/astal3/class.DrawingArea.html) -- Entry: [Gtk.Entry](https://docs.gtk.org/gtk3/astal3/class.Entry.html) +- DrawingArea: [Gtk.DrawingArea](https://docs.gtk.org/gtk3/class.DrawingArea.html) +- Entry: [Gtk.Entry](https://docs.gtk.org/gtk3/class.Entry.html) - Eventbox: [Astal.EventBox](https://aylur.github.io/libastal/astal3/class.EventBox.html) - Icon: [Astal.Icon](https://aylur.github.io/libastal/astal3/class.Icon.html) - Label: [Astal.Label](https://aylur.github.io/libastal/astal3/class.Label.html) - Levelbar: [Astal.LevelBar](https://aylur.github.io/libastal/astal3/class.LevelBar.html) - Overlay: [Astal.Overlay](https://aylur.github.io/libastal/astal3/class.Overlay.html) -- Revealer: [Gtk.Revealer](https://docs.gtk.org/gtk3/astal3/class.Revealer.html) +- Revealer: [Gtk.Revealer](https://docs.gtk.org/gtk3/class.Revealer.html) - Scrollable: [Astal.Scrollable](https://aylur.github.io/libastal/astal3/class.Scrollable.html) - Slider: [Astal.Slider](https://aylur.github.io/libastal/astal3/class.Slider.html) - Stack: [Astal.Stack](https://aylur.github.io/libastal/astal3/class.Stack.html) -- Switch: [Gtk.Switch](https://docs.gtk.org/gtk3/astal3/class.Switch.html) +- Switch: [Gtk.Switch](https://docs.gtk.org/gtk3/class.Switch.html) - Window: [Astal.Window](https://aylur.github.io/libastal/astal3/class.Window.html) ## Gtk4 -- 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') 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') 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 From 57c3bf427bba34399b7eecd3833fbbe3b35c59da Mon Sep 17 00:00:00 2001 From: tyrael <116419708+44mira@users.noreply.github.com> Date: Sun, 24 Nov 2024 01:23:55 +0800 Subject: doc: fix incorrect arch package --- docs/guide/lua/installation.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/guide') diff --git a/docs/guide/lua/installation.md b/docs/guide/lua/installation.md index b99d8df..f647ed7 100644 --- a/docs/guide/lua/installation.md +++ b/docs/guide/lua/installation.md @@ -9,7 +9,7 @@ Read more about it on the [nix page](../getting-started/nix) ## Arch ```sh -yay -S lua-libastal-git +yay -S libastal-lua-git ``` ## From Source -- cgit v1.2.3