Component Library with Lazy Loading

Build a web component library with proper build configuration for code splitting and lazy loading.

Requirements

Components to Build

Create two web components:

1. User Card Component (user-card)

   • Accepts properties: name (string), email (string)
   • Displays the user information in a simple card layout
   • Emits a 'userSelected' event when clicked

2. Product Card Component (product-card)

   • Accepts properties: name (string), price (number)
   • Displays the product information
   • Uses a shared utility function to format the price as currency
   • Emits a 'productSelected' event when clicked

Shared Code

Create a utility file with a formatCurrency(amount: number): string function that both components can import and use.

Build Configuration

Configure the build to:

• Generate a dist output with lazy-loadable ES modules
• Enable automatic code splitting
• Ensure shared code is split into a separate chunk

Test Cases

• The build generates separate lazy-loadable bundles for each component @test
• The user-card component renders with provided properties @test
• The product-card component uses the shared currency formatter @test

Implementation

@generates

Configuration API

export interface Config {
  outputTargets?: OutputTarget[];
  // Other configuration options
}

export interface OutputTarget {
  type: string;
  dir?: string;
  // Other output target options
}

Dependencies { .dependencies }

@stencil/core { .dependency }

Provides web component compilation and build tooling with code splitting support.