Input Agnostic Player and Native A2UI Support - #866
Conversation
|
/docs |
Bundle ReportChanges will increase total bundle size by 676.24kB (13.07%) ⬆️
Affected Assets, Files, and Routes:view changes for bundle: plugins/check-path/coreAssets Changed:
view changes for bundle: plugins/async-node/coreAssets Changed:
view changes for bundle: plugins/markdown/coreAssets Changed:
view changes for bundle: tools/storybookAssets Changed:
view changes for bundle: plugins/metrics/coreAssets Changed:
view changes for bundle: core/playerAssets Changed:
view changes for bundle: plugins/beacon/coreAssets Changed:
view changes for bundle: plugins/external-state/coreAssets Changed:
view changes for bundle: react/playerAssets Changed:
view changes for bundle: plugins/reference-assets/coreAssets Changed:
|
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #866 +/- ##
===========================
===========================
☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
|
/canary |
…ion logic to plugin. Also migrate to Bazel Repo based node module ignore
|
/canary |
Benchmark ResultsComparison against baseline from
|
| Benchmark | Current | Baseline | Change |
|---|---|---|---|
core/player/src/binding/__tests__/parser.bench.ts > parser benchmarks > Resolving binding: foo.bar |
642.36K ops/s | 588.82K ops/s | +9.1% ✅ |
core/player/src/binding/__tests__/parser.bench.ts > parser benchmarks > Resolving binding: foo.pets.1.name |
432.37K ops/s | 405.31K ops/s | +6.7% ✅ |
core/player/src/binding/__tests__/parser.bench.ts > parser benchmarks > Resolving binding: foo.pets.01.name |
376.93K ops/s | 471.42K ops/s | -20.0% |
core/player/src/binding/__tests__/parser.bench.ts > parser benchmarks > Resolving binding: foo.pets['01'].name |
384.67K ops/s | 470.61K ops/s | -18.3% |
core/player/src/binding/__tests__/parser.bench.ts > parser benchmarks > Resolving binding: foo.pets[01].name |
348.26K ops/s | 445.26K ops/s | -21.8% |
core/player/src/binding/__tests__/parser.bench.ts > parser benchmarks > Resolving binding: foo.pets[name = "frodo"].type |
218.48K ops/s | 243.29K ops/s | -10.2% |
core/player/src/binding/__tests__/parser.bench.ts > parser benchmarks > Resolving binding: foo.pets["name" = "sprinkles"].type |
187.90K ops/s | 221.16K ops/s | -15.0% |
core/player/src/binding/__tests__/parser.bench.ts > parser benchmarks > Resolving binding: foo.pets["isDog" = false].type |
216.52K ops/s | 295.56K ops/s | -26.7% |
core/player/src/binding/__tests__/parser.bench.ts > parser benchmarks > Resolving binding: foo.pets["isDog" = true].type |
224.13K ops/s | 308.99K ops/s | -27.5% |
core/player/src/binding/__tests__/parser.bench.ts > binding creation benchmarks > Resolving binding: foo.bar |
419.89K ops/s | 610.26K ops/s | -31.2% |
core/player/src/binding/__tests__/parser.bench.ts > binding creation benchmarks > Resolving binding: foo.pets.1.name |
312.43K ops/s | 405.96K ops/s | -23.0% |
core/player/src/binding/__tests__/parser.bench.ts > binding creation benchmarks > Resolving binding: foo.pets.01.name |
239.24K ops/s | 393.83K ops/s | -39.3% |
core/player/src/binding/__tests__/parser.bench.ts > binding creation benchmarks > Resolving binding: foo.pets['01'].name |
264.01K ops/s | 341.83K ops/s | -22.8% |
core/player/src/binding/__tests__/parser.bench.ts > binding creation benchmarks > Resolving binding: foo.pets[01].name |
266.15K ops/s | 314.81K ops/s | -15.5% |
core/player/src/binding/__tests__/parser.bench.ts > binding creation benchmarks > Resolving binding: foo.pets[name = "frodo"].type |
232.64K ops/s | 234.36K ops/s | -0.7% |
core/player/src/binding/__tests__/parser.bench.ts > binding creation benchmarks > Resolving binding: foo.pets["name" = "sprinkles"].type |
171.20K ops/s | 189.09K ops/s | -9.5% |
core/player/src/binding/__tests__/parser.bench.ts > binding creation benchmarks > Resolving binding: foo.pets["isDog" = false].type |
216.68K ops/s | 240.22K ops/s | -9.8% |
core/player/src/binding/__tests__/parser.bench.ts > binding creation benchmarks > Resolving binding: foo.pets["isDog" = true].type |
239.39K ops/s | 246.26K ops/s | -2.8% |
core/player/src/expressions/__tests__/performance.bench.ts > Expression Parsing/Execution Benchmark > Parsing: {{foo}} = 1 + 3 (sync) |
426.02K ops/s | 449.48K ops/s | -5.2% |
core/player/src/expressions/__tests__/performance.bench.ts > Expression Parsing/Execution Benchmark > Parsing: {{foo}} = 1 + 3 (async) |
305.90K ops/s | 362.75K ops/s | -15.7% |
core/player/src/expressions/__tests__/performance.bench.ts > Expression Parsing/Execution Benchmark > Parsing: conditional(true, true, false) (sync) |
372.92K ops/s | 439.45K ops/s | -15.1% |
core/player/src/expressions/__tests__/performance.bench.ts > Expression Parsing/Execution Benchmark > Parsing: conditional(true, true, false) (async) |
414.39K ops/s | 308.90K ops/s | +34.2% ✅ |
core/player/src/expressions/__tests__/performance.bench.ts > Expression Parsing/Execution Benchmark > Parsing: {{foo}} = conditional({{bar}} > 0, true, false) (sync) |
197.04K ops/s | 171.19K ops/s | +15.1% ✅ |
core/player/src/expressions/__tests__/performance.bench.ts > Expression Parsing/Execution Benchmark > Parsing: {{foo}} = conditional({{bar}} > 0, true, false) (async) |
175.58K ops/s | 172.45K ops/s | +1.8% |
core/player/src/expressions/__tests__/performance.bench.ts > Expression Parsing/Execution Benchmark > Parsing: {{foo}} = conditional(conditional(true = false, false, true), conditional(false = false, true, false), conditional(true = true, false, true)) (sync) |
141.79K ops/s | 154.78K ops/s | -8.4% |
core/player/src/expressions/__tests__/performance.bench.ts > Expression Parsing/Execution Benchmark > Parsing: {{foo}} = conditional(conditional(true = false, false, true), conditional(false = false, true, false), conditional(true = true, false, true)) (async) |
152.34K ops/s | 106.34K ops/s | +43.3% ✅ |
core/player/src/expressions/__tests__/performance.bench.ts > Expression Parsing/Execution Benchmark > Parsing: {{foo}} = await(asyncTestFunction(1)) (sync) |
N/A | N/A | N/A |
core/player/src/expressions/__tests__/performance.bench.ts > Expression Parsing/Execution Benchmark > Parsing: {{foo}} = await(asyncTestFunction(1)) (async) |
288.36K ops/s | 243.43K ops/s | +18.5% ✅ |
core/player/src/expressions/__tests__/performance.bench.ts > Expression Parsing/Execution Benchmark > Parsing: {{foo}} = asyncTestFunction(1) (sync) |
322.27K ops/s | 227.29K ops/s | +41.8% ✅ |
core/player/src/expressions/__tests__/performance.bench.ts > Expression Parsing/Execution Benchmark > Parsing: {{foo}} = asyncTestFunction(1) (async) |
207.69K ops/s | 242.15K ops/s | -14.2% |
core/player/src/expressions/__tests__/performance.bench.ts > Expression Parsing/Execution Benchmark > Parsing: asyncTestFunction(1) (sync) |
815.81K ops/s | 698.81K ops/s | +16.7% ✅ |
core/player/src/expressions/__tests__/performance.bench.ts > Expression Parsing/Execution Benchmark > Parsing: asyncTestFunction(1) (async) |
513.46K ops/s | 532.75K ops/s | -3.6% |
core/player/src/expressions/__tests__/performance.bench.ts > Expression Parsing/Execution Benchmark > Parsing: {{foo}} = conditional(!{{bar}} == false, await(asyncTestFunction(1)), false) (sync) |
183.16K ops/s | 168.02K ops/s | +9.0% ✅ |
core/player/src/expressions/__tests__/performance.bench.ts > Expression Parsing/Execution Benchmark > Parsing: {{foo}} = conditional(!{{bar}} == false, await(asyncTestFunction(1)), false) (async) |
113.92K ops/s | 153.84K ops/s | -26.0% |
core/player/src/view/resolver/__tests__/index.bench.ts > resolver benchmarks > initial resolve |
543.81 ops/s | 556.80 ops/s | -2.3% |
core/player/src/view/resolver/__tests__/index.bench.ts > resolver benchmarks > Resolving from cache |
13.51K ops/s | 13.26K ops/s | +1.8% |
core/player/src/view/resolver/__tests__/index.bench.ts > resolver benchmarks > data changes |
2.21K ops/s | 2.33K ops/s | -5.1% |
core/player/src/view/resolver/__tests__/index.bench.ts > resolver benchmarks > data changes slow |
587.28 ops/s | 465.52 ops/s | +26.2% ✅ |
plugins/async-node/core ⚠️
| Benchmark | Current | Baseline | Change |
|---|---|---|---|
plugins/async-node/core/src/__tests__/index.bench.ts > async node benchmarks > Resolve Async Node 1 times |
13.41K ops/s | 13.42K ops/s | -0.0% |
plugins/async-node/core/src/__tests__/index.bench.ts > async node benchmarks > Resolve Async Node 5 times |
13.27K ops/s | 13.20K ops/s | +0.5% |
plugins/async-node/core/src/__tests__/index.bench.ts > async node benchmarks > Resolve Async Node 10 times |
9.65K ops/s | 9.64K ops/s | +0.1% |
plugins/async-node/core/src/__tests__/index.bench.ts > async node benchmarks > Resolve Async Node 50 times |
2.82K ops/s | 3.19K ops/s | -11.5% |
plugins/async-node/core/src/__tests__/index.bench.ts > async node benchmarks > Resolve Async Node 100 times |
1.66K ops/s | 1.78K ops/s | -6.8% |
plugins/async-node/core/src/__tests__/transform.bench.ts > async transform benchmarks > Resolve Async Node 1 times |
6.00K ops/s | 6.13K ops/s | -2.1% |
plugins/async-node/core/src/__tests__/transform.bench.ts > async transform benchmarks > Resolve Async Node 5 times |
7.16K ops/s | 6.49K ops/s | +10.4% ✅ |
plugins/async-node/core/src/__tests__/transform.bench.ts > async transform benchmarks > Resolve Async Node 10 times |
5.86K ops/s | 6.34K ops/s | -7.5% |
plugins/async-node/core/src/__tests__/transform.bench.ts > async transform benchmarks > Resolve Async Node 50 times |
2.30K ops/s | 2.60K ops/s | -11.8% |
plugins/async-node/core/src/__tests__/transform.bench.ts > async transform benchmarks > Resolve Async Node 100 times |
1.48K ops/s | 1.60K ops/s | -7.1% |
react/player ⚠️
| Benchmark | Current | Baseline | Change |
|---|---|---|---|
react/player/src/asset/__tests__/index.bench.tsx > ReactAsset benchmarks > Render asset nested in 1 ReactAssets |
543.91 ops/s | 631.66 ops/s | -13.9% |
react/player/src/asset/__tests__/index.bench.tsx > ReactAsset benchmarks > Bubble errors nested in 1 ReactAssets |
787.06 ops/s | 1.12K ops/s | -30.0% |
react/player/src/asset/__tests__/index.bench.tsx > ReactAsset benchmarks > Render asset nested in 5 ReactAssets |
575.28 ops/s | 634.01 ops/s | -9.3% |
react/player/src/asset/__tests__/index.bench.tsx > ReactAsset benchmarks > Bubble errors nested in 5 ReactAssets |
867.34 ops/s | 1.03K ops/s | -16.1% |
react/player/src/asset/__tests__/index.bench.tsx > ReactAsset benchmarks > Render asset nested in 10 ReactAssets |
504.97 ops/s | 640.33 ops/s | -21.1% |
react/player/src/asset/__tests__/index.bench.tsx > ReactAsset benchmarks > Bubble errors nested in 10 ReactAssets |
707.88 ops/s | 908.95 ops/s | -22.1% |
react/player/src/asset/__tests__/index.bench.tsx > ReactAsset benchmarks > Render asset nested in 50 ReactAssets |
413.47 ops/s | 521.80 ops/s | -20.8% |
react/player/src/asset/__tests__/index.bench.tsx > ReactAsset benchmarks > Bubble errors nested in 50 ReactAssets |
211.57 ops/s | 271.20 ops/s | -22.0% |
react/player/src/asset/__tests__/index.bench.tsx > ReactAsset benchmarks > Render asset nested in 100 ReactAssets |
328.12 ops/s | 422.33 ops/s | -22.3% |
react/player/src/asset/__tests__/index.bench.tsx > ReactAsset benchmarks > Bubble errors nested in 100 ReactAssets |
89.75 ops/s | 120.76 ops/s | -25.7% |
| JSPluginWrapper by Transforms() { | ||
| /** register the A2UI assets — type strings are PascalCase to match the adapter output */ | ||
| override fun apply(androidPlayer: AndroidPlayer) { | ||
| androidPlayer.registerAsset("Row", ::Row) |
There was a problem hiding this comment.
Do we need new assets for it? Is the purpose to give a meaningful demo? These look usable for reference assets too
There was a problem hiding this comment.
Basically yeah, so that there is an off the shelf way for you to use A2UI with Player. Most other renderers have similar OTS assets.
| @OptIn(ExperimentalPlayerApi::class) | ||
| @JvmOverloads | ||
| @Suppress("ktlint:standard:function-naming") | ||
| public fun A2UIHeadlessPlayer( |
There was a problem hiding this comment.
hmmm where is this going to get used, is there a config that says when to use this vs when to use regular HeadlessPlayer when creating an Android Player?
There was a problem hiding this comment.
The idea here is to start offering more off the shelf configured versions of Player. With this, if you know you want to use A2UI with player you should just be able to start with this package and have something production grade.
|
/canary |
|
i'd be okay with this PR assuming 2 points
|
I'll leave it up to @player-ui/reviewers, does anyone feel strongly about another naming scheme? For the Assets, let me start a discussion post about it so we can figure out what we want to do. |
What and Why
With the emergence of A2UI and other agent-driven standards, Player — in its mission to serve the broader SDUI space — should expand support for more formats beyond its own in order to broaden the scope of what Player solves for. Furthermore, this lets capabilities be built against Player itself, regardless of input format, allowing for the decoupling of implementation from the server driving it.
This PR adds the generic "unknown format" entrypoint to every platform (web, JVM, Android, iOS) and ships A2UI as the first non-Player format end-to-end.
Core Player Changes
transformContentbail hook on Player's hooks. Fires at the top ofstart(), after plugins are registered and beforeresolveFlowContent. Plugins inspect aContentMeta{ format, version }and either convert the payload or pass it through.Player.start()signature widened from(payload: Flow)to(payload: unknown, options?: StartOptions). Default format is"player", which preserves existing behavior (a plain Flow flows through untouched).versionis free-form, so a single format plugin can dispatch across versions.Platform Entrypoints
The hook and signature widening live in the core JS bundle every platform loads; each platform entrypoint forwards the
format/versionthrough. Default"player"keeps all existing call sites untouched.ReactPlayer.start()mirrors the same signature (react/player/src/player.tsx) and forwards options to the underlyingPlayer.start().Player.start()gainsstart(flow: String, format: String, version: String? = null)(plus a matchingURLoverload).HeadlessPlayerimplements it and forwards{ format, version }to the JSplayer.start(payload, options)as a bridge-encodedMap.AndroidPlayer.start(flow, format, version)delegates to the wrappedHeadlessPlayer.StartOptions { format, version }value type;HeadlessPlayer.start(flow:options:completion:)appends the options object to the JSstartargs ([String: Any]→ JS object via JavaScriptCore). Threaded throughSwiftUIPlayer.init/Context.load/ManagedPlayervia a defaultedstartOptions:param (source-compatible). UseStartOptions.a2ui.Plugins
Core:
@player-ui/a2ui-pluginIncludes three sub-plugins:
A2UIContentPlugin: Only activates whenmeta.format === "a2ui". CallsadaptA2UIToFlow(snapshot)to transform content.A2UITransformPlugin: Per-asset transforms (Button/TextField/CheckBox/Slider/DateTimeInput/ChoicePicker/Text) that attachrun()/set()/valuehelpers consumed by the rendering layer.A2UIExpressionsPlugin: Registers the A2UI v0.9.1 standard library: validation (required,regex,length,numeric,email), formatters (formatString,formatNumber,formatCurrency,formatDate,pluralize),openUrl, and logic (and/or/not).This package emits a native JS bundle (
A2UIPlugin.native.js), which the JVM and iOS wrappers below load directly — so the adapter, transforms, and expression std-lib are shared across all platforms with zero reimplementation.Adapter Logic
Walks the flat
components[]list fromid: "root", inlines child references into a nested asset tree matching Player's{asset: ...}shape, and produces a Flow with a single VIEW state plus one END per unique event name encountered. Translation rules:{path: "/x/y"}→"x.y"(Player binding)formatString(...)→"Hello, {{x.y}}!"template{call, args}→@[fn(...)]@expressionchecks: [...]on inputs → lifted into a synthesizedFlow.schemaviasynthesizeSchemaso Player's existing SchemaController/ValidationController pick them up unchanged{path, componentId}blocks become indexed paths scoped to<scope>._index_Platform Renders
The A2UI v0.9.1 reference catalog — 16 assets — implemented per platform: Row, Column, List, Text, Image, Icon, Divider, Card, Modal, Tabs, Button, TextField, CheckBox, Slider, DateTimeInput, ChoicePicker. Asset
typestrings are PascalCase to match the adapter output; transformed assets consume the sharedrun()/set()/currentValuehelpers.@player-ui/a2ui-plugin-react— the full catalog as React components.plugins/a2ui/android—A2UIPlugin : AndroidPlayerPlugin, JSPluginWrapper by <jvm wrapper>registering the catalog as Jetpack Compose renderers. Function helpers decode as Kotlin function types.plugins/a2ui/swiftui—A2UIPlugin : JSBasePlugin, NativePluginthat loads the bundle and registers the catalog as SwiftUI renderers. Function helpers decode as SwiftWrappedFunctions.plugins/a2ui/jvm— generated KotlinJSPluginWrapper(A2UIPlugin) that loads the A2UI JS bundle (mirrorsreference-assets/jvm). Headless-capable, no UI layer.Packages
A new folder in the repo! The goal for this folder is to ship preconfigured Player entrypoints so consumers don't have to assemble plugins themselves. The
plugins/directory exports building blocks;packages/exports ready-to-use Players for specific content formats.Each preset comes with the A2UI plugin pre-added and appends any consumer-supplied plugins after it. Since
HeadlessPlayer/AndroidPlayerarefinal, the JVM/Android entries are idiomatic factory functions; iOS is a thinViewwrapper that also defaultsstartOptions: .a2ui.React:
@player-ui/a2uiJVM:
packages/a2ui/jvmAndroid:
packages/a2ui/androidiOS:
packages/a2ui/swiftuiMocks
The canonical catalog is
plugins/a2ui/mocks(21 snapshots). JS consumes it via@player-ui/a2ui-plugin-mocks; JVM/Android via//tools/mocks:jar. iOS mirrors the full set as faithful inline copies (the existing iOS demo/test convention, there is no runtime mechanism to read the canonical JSON on iOS today).Storybook
New A2UI stories with one story per asset, driven by a
createA2UIStoryhelper in the Player storybook extension that can render A2UI content.Demo Apps
.a2ui.PlayerViewModelregistersA2UIPluginalongside the reference assets (disjoint type namespaces).Notes
Image/Icon(no Coil /material-icons-coreonly) and iOSImage(deployment target iOS 14 predatesAsyncImage) render labelled placeholders; iOSIconuses SF Symbols.To Align On
Overall Approach
Change Type (required)
Indicate the type of change your pull request is:
patchminormajorN/ADoes your PR have any documentation updates?
Release Notes
TBD
📦 Published PR as canary version:
1.1.0--canary.866.38904Try this version out locally by upgrading relevant packages to 1.1.0--canary.866.38904