Skip to content

v0.5.0 — the connect step as custom elements

Choose a tag to compare

@NiKrause NiKrause released this 03 Aug 10:08
01853ba

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": false deleted the elements. A production build dropped the
    customElements.define calls, 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. qrcode and
    the BC-UR stack are CommonJS and reach for Buffer and process; an
    application that already polyfills those resolved the same specifier two ways
    and failed its build on a message about externals. ./elements now ships as a
    single pre-bundled browser file with nothing left to resolve — and with no free
    Buffer or process identifier 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.