🎨 PeRyL Web Component Demo

User Card Component - Showcasing Props, Events, State & Lifecycle

📚 Introduction

What is this demo?

This interactive demo showcases the happel() function from PeRyL, which creates reusable web components using the HApp framework.

Features Demonstrated:

🎮 Example 1: Single Card with Dynamic Controls

This example shows a single <happ-user-card> component with controls to change its attributes dynamically.

Try it: Change the inputs below and click "Update Card" to see the component react to attribute changes.

🔗 Example 2: Parent-Child Communication

This example demonstrates a parent component (<happ-user-demo>) managing multiple child components (<happ-user-card>).

Try it: Click on any user card, expand them, toggle their status, or use the Add/Remove buttons. Watch the event statistics update!

💻 How It Works

Creating a Web Component

Web components in PeRyL are created using the happel() function:

happel<UserCardState, UserCardActions>({
    state: userCardState,        // Initial state function
    view: userCardView,          // Render function
    dispatcher: userCardDispatcher,  // Action handler
    id: "happ-user-card",       // Custom element tag name
    debug: true                 // Enable console logging
});

Using the Component in HTML

<happ-user-card
    username="Alice"
    avatar="👩"
    role="admin"
    online="true">
</happ-user-card>

Listening to Events

document.querySelector('happ-user-card')
    .addEventListener('action', (event) => {
        console.log('Event received:', event.detail);
    });

📖 Learn More

Key Files in This Demo:

Architecture: PeRyL uses a Flux-inspired architecture with unidirectional data flow:

State → View → User Actions → Dispatcher → State Mutations → Re-render