← Examples Gallery

Advanced Protocol Demos

Every adapter, exercising the same matrix of capabilities: progressive async loading, mixed static + dynamic sources, menu + lens + lightbox renderers, placement, and image-hover menus. Each page is keyed to its adapter's ecosystem so you can see the same feature set with flavor native to each framework.

Adapter pages

• DOM — vanilla .alap anchors, no framework
• Web Component — <alap-link>, shadow-DOM isolated
• React — <AlapLink> + provider + context
• Vue — Composition API, provide/inject
• Svelte — Svelte 5 runes ($state / $effect)
• Solid — signals, createEffect
• Qwik — useSignal + useVisibleTask$
• Alpine — x-alap directive
• Astro — delegates to the web component

Scenarios covered per adapter

1. Progressive menu — :slow: mock + real HN search side by side
2. Mixed static + async — static tag | slow-protocol composition
3. Error + empty placeholders — :flaky:error: / :flaky:empty:
4. Menu with thumbnails — meta.thumbnail image-hover rows
5. Lens — metadata-rich panel with progressive loading
6. Lightbox — fullscreen media with progressive loading
7. Placement compass rose — all 9 directions, collapsible
8. In-flight dedup — two triggers, same token, one fetch

Shared pieces

• shared/mockProtocols.ts — :slow: and :flaky:, deterministic for demos
• shared/ecosystems.ts — per-adapter static links + Algolia HN alias
• shared/buildConfig.ts — config factory wiring real + mock protocols
• shared/styles.css — layout, compass, placeholder + provenance colors