@yschimke/remote-compose-player-cmp 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +70 -0
- package/package.json +36 -0
package/README.md
ADDED
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
# @yschimke/remote-compose-player-cmp
|
|
2
|
+
|
|
3
|
+
The Compose Multiplatform / Wasm [Remote Compose](https://developer.android.com/jetpack/androidx/releases/compose-remote)
|
|
4
|
+
player, as a browser bundle. It renders a `.rc` document into a page, driven entirely by query
|
|
5
|
+
parameters and one `window` function — no JavaScript API to learn and no bundler step.
|
|
6
|
+
|
|
7
|
+
```html
|
|
8
|
+
<iframe src="/rc-player/index.html?src=/documents/watch-face.rc&theme=dark"></iframe>
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Install
|
|
12
|
+
|
|
13
|
+
```
|
|
14
|
+
npm install @yschimke/remote-compose-player-cmp
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
The package ships a `dist/` directory: `index.html`, the compiled Wasm module, the Skiko runtime,
|
|
18
|
+
and a fonts manifest. Serve it as static files — copy `dist/` into your public directory, or point
|
|
19
|
+
your server at `node_modules/@yschimke/remote-compose-player-cmp/dist`. Nothing here is meant to be
|
|
20
|
+
imported into an app bundle; the player runs in its own document.
|
|
21
|
+
|
|
22
|
+
Every file must be served from the same directory, and `.wasm` must be served as
|
|
23
|
+
`application/wasm` — the module is instantiated by streaming.
|
|
24
|
+
|
|
25
|
+
## Which player is this?
|
|
26
|
+
|
|
27
|
+
**There are two.** This one is the Compose Multiplatform renderer. The other is a TypeScript player
|
|
28
|
+
vendored inside `compose-preview`'s CLI, and today **it supports more operations**. Reach for this
|
|
29
|
+
package when you want the same renderer that runs on Android and iOS — one implementation, one set
|
|
30
|
+
of pixels across platforms. Reach for the TypeScript player when coverage matters more than
|
|
31
|
+
cross-platform parity. `RC_CMP_WASM_PLAYER.md` in the repository tracks which gates remain before
|
|
32
|
+
this one replaces it.
|
|
33
|
+
|
|
34
|
+
## The embed contract
|
|
35
|
+
|
|
36
|
+
Versioned separately from the release it ships in, because a host cares whether `?src=` still means
|
|
37
|
+
what it coded against — not which release it happens to have. `window.rcPlayerContractVersion` and
|
|
38
|
+
`document.documentElement.dataset.rcPlayerContract` both carry it, and this package's **major**
|
|
39
|
+
tracks it.
|
|
40
|
+
|
|
41
|
+
Full reference: [RC_PLAYER_EMBED.md](https://github.com/yschimke/compose-ai-tools/blob/main/docs/design/RC_PLAYER_EMBED.md).
|
|
42
|
+
Summary:
|
|
43
|
+
|
|
44
|
+
| parameter | meaning |
|
|
45
|
+
|---|---|
|
|
46
|
+
| `?src=` | URL of the `.rc` document. Required. |
|
|
47
|
+
| `?theme=light\|dark` | Force a mode. Anything else follows `prefers-color-scheme`. |
|
|
48
|
+
| `?fontsBase=` | Directory holding `fonts.json` and its faces. Default `./fonts/`. |
|
|
49
|
+
| `?namedValues=` | Host overrides for the document's named variables. |
|
|
50
|
+
| `?rcTrace=1` | Emit User Timing marks for a DevTools performance profile. |
|
|
51
|
+
| `?allowExternalImagePlaceholders=1` | Render a placeholder instead of failing on an external image. |
|
|
52
|
+
| `?handoffDelayMs=` | Cold-start tail before `ready`. Only lower it if you composite the result yourself. |
|
|
53
|
+
|
|
54
|
+
- `window.rcPlayerLoad(src)` swaps the document without reloading the page, keeping the Wasm module,
|
|
55
|
+
the Compose runtime and the fetched fonts warm.
|
|
56
|
+
- `document.documentElement.dataset.rcPlayerState` is `loading`, `ready` or `error`. Wait for
|
|
57
|
+
`ready` before revealing the frame; `rcPlayerError` carries the message on `error`.
|
|
58
|
+
- The player also `postMessage`s `cp-rc-wasm-ready` / `cp-rc-wasm-error:<message>` and structured
|
|
59
|
+
host-action and debug-message events to `window.parent`, same-origin.
|
|
60
|
+
|
|
61
|
+
## Size
|
|
62
|
+
|
|
63
|
+
The bundle is around 23 MB, nearly all of it the Skiko WebAssembly runtime. That is the cost of
|
|
64
|
+
running the real Compose renderer in a browser rather than a reimplementation of it. The repository
|
|
65
|
+
enforces a budget so an unintended jump fails the build; the budget is **not** a published
|
|
66
|
+
guarantee, and it moves when a deliberate payload lands.
|
|
67
|
+
|
|
68
|
+
## License
|
|
69
|
+
|
|
70
|
+
Apache 2.0.
|
package/package.json
ADDED
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@yschimke/remote-compose-player-cmp",
|
|
3
|
+
"version": "0.0.1",
|
|
4
|
+
"description": "The Compose Multiplatform / Wasm Remote Compose player, as a drop-in browser bundle. Renders .rc documents in an iframe driven by query parameters and window.rcPlayerLoad.",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"remote-compose",
|
|
7
|
+
"compose-multiplatform",
|
|
8
|
+
"wasm",
|
|
9
|
+
"player",
|
|
10
|
+
"androidx"
|
|
11
|
+
],
|
|
12
|
+
"license": "Apache-2.0",
|
|
13
|
+
"author": "Yuri Schimke",
|
|
14
|
+
"homepage": "https://github.com/yschimke/compose-ai-tools/blob/main/docs/design/RC_PLAYER_EMBED.md",
|
|
15
|
+
"repository": {
|
|
16
|
+
"type": "git",
|
|
17
|
+
"url": "git+https://github.com/yschimke/compose-ai-tools.git",
|
|
18
|
+
"directory": "rc-player/wasm"
|
|
19
|
+
},
|
|
20
|
+
"bugs": {
|
|
21
|
+
"url": "https://github.com/yschimke/compose-ai-tools/issues"
|
|
22
|
+
},
|
|
23
|
+
"type": "module",
|
|
24
|
+
"files": [
|
|
25
|
+
"dist",
|
|
26
|
+
"README.md"
|
|
27
|
+
],
|
|
28
|
+
"exports": {
|
|
29
|
+
"./index.html": "./dist/index.html",
|
|
30
|
+
"./dist/*": "./dist/*"
|
|
31
|
+
},
|
|
32
|
+
"sideEffects": true,
|
|
33
|
+
"publishConfig": {
|
|
34
|
+
"access": "public"
|
|
35
|
+
}
|
|
36
|
+
}
|