dotnet / dotnet/docs-maui

[maui-labs docs] Comet: document .NET 11 Preview 7 upgrade, Yoga layout API, and DevFlow agent integration

Open
#3,510 0 comments 0 reactions 0 assignees View on GitHub
:watch: Not Triaged
Dominant language
No language data
Stars
282
Forks
265
Avg merge
2d 2h
Merged PRs (30d)
19

Description

## Source PR

**PR**: https://github.com/dotnet/maui-labs/pull/325
**Title**: feat(comet): upgrade Comet to .NET 11 Preview 7
**Author**: @davidortinau
**Merged**: 2026-09-04

---

## Summary of Changes

PR #325 upgrades the Comet experimental MVU framework to target .NET 11 Preview 7 and introduces several user-facing features:

1. **SDK requirement bump** — Comet now requires the .NET 11 Preview 7 SDK (`11.0.100-preview.7.26381.103` or later patch). The previous target was an earlier .NET 11 preview.
2. **New `UseYogaLayout` property** — opt-in Yoga (Facebook's cross-platform layout engine) on both the iOS (`SwiftUIBackendRoot`) and Android (`ComposeBackendRoot`) backends. Default is `false` (native layout unchanged).
3. **Yoga container padding** — when `UseYogaLayout` is `true`, `Padding` on container views is handled by the Yoga engine (not native `.padding()`) and is reflected immediately.
4. **Reactive reflow** — Yoga layout now re-runs automatically after each reactive flush, so content whose size changes (e.g. a bound label) is re-measured and re-arranged without manual intervention.
5. **In-app screenshot endpoint** — `SwiftUIBackendRoot.CreateController` now registers a `ScreenshotProvider` with `CometDevRegistry`, enabling `GET /api/v1/ui/screenshot` over the DevFlow agent on iOS (works over USB with `iproxy`, no Developer Disk Image required).
6. **`ComposeDevAgentHost` for Android** — new public API in `Comet.Platform.Compose` to start the DevFlow agent and enable real `MotionEvent` drag injection on Android.

---

## Documentation Pages Affected

- `docs/developer-tools/devflow/` — add or update a page covering Comet-specific DevFlow agent integration
- If a Comet product page exists in the docs (e.g. under a `docs/comet/` or `docs/experimental/` section), update:
- System requirements table (minimum .NET 11 Preview 7 SDK)
- `UseYogaLayout` property documentation for both `SwiftUIBackendRoot` and `ComposeBackendRoot`
- A "Yoga layout" conceptual section

---

## Suggested Changes

### 1. System Requirements

Update the Comet requirements table to:

| Requirement | Value |
|-------------|-------|
| .NET SDK | 11.0.100-preview.7 or later |
| iOS minimum | 17.0 |
| Mac Catalyst minimum | 17.0 |
| macOS minimum | 14.0 |
| Android minimum | API 24 |

### 2. Yoga Layout section (new)

Add under a "Layout" heading in the Comet conceptual docs:

````markdown
## Yoga Layout Engine

Comet supports an optional Yoga-powered layout pass that computes absolute frames in C# before the native render, giving consistent cross-platform layout semantics.

### Enabling on iOS / Mac Catalyst

```csharp
var backendRoot = new SwiftUIBackendRoot(services)
{
UseYogaLayout = true // default: false
};
```

When `UseYogaLayout` is `true`:
- The `Comet.Layout.Yoga` engine measures each node and assigns absolute pixel frames.
- `Padding` on container views is honoured by Yoga (the native `.padding()` modifier is not applied in absolute mode).
- Layout re-runs automatically after every reactive flush, so views bound to reactive state resize and reflow without extra code.

### Enabling on Android

```csharp
var backendRoot = new ComposeBackendRoot(context)
{
UseYogaLayout = true // default: false
};
```

The Compose backend measures leaf nodes synchronously via `android.graphics.Paint` (equivalent to SwiftUI's `sizeThatFits`) and positions children using `Modifier.AbsoluteOffset + .Size` inside a `Box`.

### When to use

Use `UseYogaLayout = true` when:
- You need pixel-identical layout on both platforms.
- You rely on `Padding` on container views.
- You have reactive content whose intrinsic size changes at runtime (e.g., a label whose text is bound to state).

Leave it `false` (the default) to use each platform's native layout (SwiftUI stacks / Compose Column and Row), which is simpler and performs better for most cases.
````

### 3. DevFlow agent integration (new or update existing DevFlow/Comet section)

````markdown
## DevFlow Integration

Comet apps can be inspected and automated using the [MAUI DevFlow agent](../devflow/index.md).

### iOS (SwiftUI backend)

`SwiftUIBackendRoot.CreateController` automatically registers a screenshot provider with the DevFlow agent when it is running. No extra code is needed — start the DevFlow agent via the standard NuGet package and the in-app `/api/v1/ui/screenshot` endpoint works over USB:

```bash
iproxy 9224 9223 # tunnel device port 9223 to Mac port 9224
curl (localhost/redacted) -o screenshot.png
```

### Android (Compose backend)

Call `ComposeDevAgentHost.Start(activity)` in your `MainActivity.OnCreate` **before** materializing the root view:

```csharp
protected override void OnCreate(Bundle? savedInstanceState)
{
base.OnCreate(savedInstanceState);

// Start DevFlow agent on fixed port 9223 (adb forward tcp:9223 tcp:9223)
Comet.Platform.Compose.ComposeDevAgentHost.Start(this);

// Then materialize the Comet root view
var root = new ComposeBackendRoot(this);
// …
}
```

Features available via the agent on Android:
- Visual tree inspection (`/api/v1/ui/tree`)
- Semantic tap / fill / clear / focus
- Real `MotionEvent` drag injection (exercises the Compose gesture pipeline — velocity, swipe-to-dismiss, flings)

> **Note**: Screenshots on Android use `adb screencap` or the probe's PixelCopy route; the screenshot endpoint is not yet served by `ComposeDevAgentHost`.
````

> Generated by [PR Documentation Check](https://github.com/dotnet/maui-labs/actions/runs/33885939213) for issue #325 · [◷](https://github.com/search?q=repo%3Adotnet%2Fdocs-maui+is%3Aissue+%22gh-aw-workflow-call-id%3A+dotnet%2Fmaui-labs%2Fpr-docs-check%22&type=issues)

Contributor guide

Open the contributing guide

Research direction

Read PR #325 first, then inspect docs/developer-tools/devflow/ and any existing Comet or experimental documentation page. Update the requirements, Yoga layout behavior, and iOS/Android DevFlow integration using the issue details. Done means the relevant pages document .NET 11 Preview 7, UseYogaLayout, and the platform-specific agent capabilities without leaving the Comet features undocumented.

Written by the indexing model from the issue text.

Assessment

Tech stack
android, csharp, ios
Domain
devtools, documentation, mobile-dev
Issue type
Documentation
Difficulty
3/5
Estimated time
1-2 days
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
72/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.