TransportPicker
A sandbox for developers to test how live updates behave on a bad network.
SourcePackage @weft-js/warp
Preview
tsx
import { TransportPicker } from '@weft-js/warp'export function Sandbox() { return ( <TransportPicker /> )}Installation
npm install @weft-js/warpUsage
tsx
import { TransportPicker } from '@weft-js/warp'<TransportPicker />When to use
Use it for
- Trying out a realtime setup while you build. It is never for end users.
Accessibility
- This has no shortcuts of its own: controls inside it use Tab, Enter and Space as usual, and warp's parts keep their roles and labels.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
lanes | Partial<Record<LaneId, Status>> | — | Real statuses to show in place of the simulated ones. |
bus | TransportBus | 'postgres' | The server bus to start on. |
wire | TransportWire | 'default' | The wire under test. |
preset | TransportPreset | 'multi' | The deploy preset. |
network | TransportNetwork | 'good' | The simulated network. |
title | string | 'Realtime sandbox' | The heading. |
| Event | Type | Default | Description |
|---|---|---|---|
onConfigChange | ((c: TransportConfig) => void) | — | The setup changed. |
Parts
Every element carries a stable name, so you can style it from your own CSS: [data-scope="transport"] [data-part="head"]
headconfigchoicessweep-basesweeplabelmetahintrowmessagebuild-errortitledescriptionlaneslog
RelatedConnection pill