Hero Archipelagos

Self-contained WASM island applications that can be dynamically loaded into any web host.

Overview

Hero Archipelagos provides a collection of Web Component islands - standalone WASM applications that:

• Load dynamically at runtime (no Rust dependencies)
• Communicate via HTML attributes and Custom Events
• Create their own Hero0 client from provided context
• Render in Shadow DOM for style isolation

Quick Start

Using an Island

<!-- Load the island -->
<script type="module">
  import init from '/islands/room/room_island.js';
  await init();
</script>

<!-- Use the Web Component -->
<room-island
  backend-url="http://localhost:3377"
  context-name="herozero"
  user-name="Alice">
</room-island>

Listening for Events

document.querySelector('room-island')
  .addEventListener('room-joined', (e) => {
    console.log('Joined room:', e.detail.roomName);
  });

Available Islands

Island	Tag	Description
Room	<room-island>	Video/audio conferencing

Building

Prerequisites

• Rust 1.85+
• wasm-pack or trunk

Development

# Build all islands
cargo build --workspace

# Build specific island for WASM
cd islands/room
trunk serve --open

Production

cd islands/room
trunk build --release

# Output in dist/

Architecture

See ARCHITECTURE.md for detailed documentation.

Key Concepts

1. Islands are Web Components - Standard custom elements that work anywhere
2. Context via Attributes - Host passes config through HTML attributes
3. Events for Communication - Islands emit Custom Events to the host
4. Shadow DOM Isolation - Styles and DOM are encapsulated

Project Structure

hero_archipelagos/
├── shared/           # Shared types and components
│   └── src/
│       ├── context.rs        # IslandContext
│       ├── events.rs         # Event types
│       ├── components/       # Shared UI
│       └── web_component.rs  # Registration helpers
│
└── islands/
    └── room/         # Room island
        └── src/
            ├── lib.rs        # Web Component entry
            ├── app.rs        # Dioxus app
            ├── services/     # Hero0 API
            ├── views/        # UI components
            └── livekit/      # LiveKit integration

Context Attributes

Attribute	Required	Description
backend-url	Yes	Hero0 server URL
context-name	Yes	Namespace identifier
user-name	Yes	Display name
user-key	No	Public key
user-avatar	No	Avatar URL
theme	No	Theme name
locale	No	Locale code

Events

Room Island

Event	Detail	When
island-ready	-	Island initialized
room-created	{ roomId, roomName }	Room created
room-joined	{ roomId, roomName }	Joined room
room-left	{ roomId, reason }	Left room
island-error	{ code, message }	Error occurred

License

Apache-2.0