User Activity Tracker Component

A Stencil web component that tracks and emits custom events when users interact with a simple counter interface.

Capabilities

Emits events on user actions

The component should emit custom events that can be tested using the testing framework's event matchers.

• Clicking the increment button emits a 'counterChanged' event with detail { value: 1, action: 'increment' } @test
• Clicking the decrement button emits a 'counterChanged' event with detail { value: -1, action: 'decrement' } @test
• Clicking the reset button emits a 'counterReset' event with detail { previousValue: 5 } when counter was at 5 @test

Tracks event frequency

The component should emit events multiple times as users interact with it.

• Clicking increment button three times emits the 'counterChanged' event exactly 3 times @test
• After clicking increment twice and decrement once, the 'counterChanged' event is received exactly 3 times @test

Implementation

@generates

API

import { Component, h, Event, EventEmitter, State } from '@stencil/core';

interface CounterChangeDetail {
  value: number;
  action: 'increment' | 'decrement';
}

interface CounterResetDetail {
  previousValue: number;
}

@Component({
  tag: 'activity-tracker',
  shadow: true
})
export class ActivityTracker {
  @State() counter: number = 0;

  @Event() counterChanged: EventEmitter<CounterChangeDetail>;
  @Event() counterReset: EventEmitter<CounterResetDetail>;

  private handleIncrement(): void;
  private handleDecrement(): void;
  private handleReset(): void;

  render(): any;
}

Dependencies { .dependencies }

@stencil/core { .dependency }

Provides the component framework including decorators for creating web components, managing state, and emitting events.

@satisfied-by