v0.5.0 — the connect step as custom elements
The connect step, as elements you can drop into your own application.
import '@le-space/libp2p-webrtc-qr/elements'<qr-invite value="https://example/#i=…"></qr-invite>
<qr-scanner id="scan" label="Scan their code"></qr-scanner>
<qr-status auto></qr-status>
<qr-peers id="peers"></qr-peers>qr-invite |
renders a payload, split into an animated BC-UR sequence when one code would be too dense to read |
qr-scanner |
the camera, the scan loop, multi-frame reassembly, and the modal around them |
qr-status |
IPv4, IPv6 and a summary of what this network will allow, before anyone tries |
qr-peers |
who is connected, and how each connection is doing |
Custom elements rather than components in somebody's framework, because the
consumers of this package are plain JavaScript twice over and Svelte once, and a
fourth will not be any of those. Shadow DOM so a host stylesheet cannot reach in
and break a code that has to stay scannable; CSS custom properties so the host
can still say what it should look like.
The demo lost 717 lines to this and behaves the same.
Where the seams moved
Each element was extracted with a consumer attached rather than in isolation,
and every one of these was found by using it:
"sideEffects": falsedeleted the elements. A production build dropped the
customElements.definecalls, so they silently never existed. Dev-server tests
passed; built-bundle tests did not.- They could not be consumed by an application with a real build.
qrcodeand
the BC-UR stack are CommonJS and reach forBufferandprocess; an
application that already polyfills those resolved the same specifier two ways
and failed its build on a message about externals../elementsnow ships as a
single pre-bundled browser file with nothing left to resolve — and with no free
Bufferorprocessidentifier left for a polyfill plugin to rewrite, which
took a second round to learn. - The code was 406px wide on a 390px screen without
box-sizing: border-box. decode()throws on an element that has not rendered yet — WebKit reports
Missing source URL, which reads like a corrupt image rather than a race.
The transport entry point is unchanged
Importing the package root still gives the transport, the codec and QRSession
as plain source, and pulls in none of the UI — no QR encoder, no camera
decoder, no CBOR. Enforced by the exports map.
Additive against 0.4.0. Existing imports are untouched.
Verified
37 unit tests, 119 browser tests across Chromium, Firefox and WebKit, 6 Helia
transfer tests. Three consumers on this line: the demo, the Helia example, and a
SvelteKit application whose light theme is set entirely through custom
properties — which is what makes the theming claim something other than an
assertion.