@dolmen-tools/caniuse-widget

v1.3.0

Published

4 months ago

A web component widget to display Angular feature stages and version compatibility

0High
0Medium
0Low

ggrignon

web-component caniuse feature-status api-availability widget

@dolmen/caniuse-widget

A web component widget to display Angular feature stages and version compatibility. This widget shows the different stages of an Angular feature (experimental, preview, stable, deprecated, removed) with the versions they appeared in.

Features

🎨 Customizable Themes: Light and dark theme support
📱 Responsive Design: Works on all screen sizes
⚡ Lightweight: No external dependencies
🔧 Configurable: Multiple customization options
🌐 API Integration: Fetches data from dolmen.tools API

Installation

npm install @dolmen/caniuse-widget

Usage

Basic Usage

<!DOCTYPE html>
<html>
  <head>
    <script
      type="module"
      src="https://unpkg.com/@dolmen/caniuse-widget/dist/caniuse-widget.esm.js"
    ></script>
  </head>
  <body>
    <caniuse-widget
      type="angular"
      feature-name="Standalone API"
    ></caniuse-widget>
  </body>
</html>

With Custom Attributes

<caniuse-widget type="angular" feature-name="Signal (core)" theme="dark">
</caniuse-widget>

JavaScript Usage

import { CaniUseWidget } from "@dolmen/caniuse-widget";

// Create widget programmatically
const widget = new CaniUseWidget();
widget.type = "angular";
widget.featureName = "Standalone API";
widget.theme = "dark";

document.body.appendChild(widget);

Attributes

| Attribute | Type | Default | Description | | -------------- | --------------------- | ------------------------ | ---------------------------------- | | type | string | 'angular' | The type of feature | | feature-name | string | '' | The name of the feature to display | | api-base-url | string | 'https://dolmen.tools' | Base URL for the API endpoint | | theme | 'light' | 'dark' | 'dark' | Theme for the widget |

Properties

You can also set properties programmatically:

const widget = document.querySelector("caniuse-widget");

// Set properties
widget.type = "angular";
widget.featureName = "signal-core";
widget.theme = "light";

CSS Customization

The widget uses CSS custom properties that you can override to customize its appearance. All variables are scoped to the :host selector and will automatically adapt to light/dark themes.

Layout & Spacing

caniuse-widget {
  /* Widget container */
  --cw-widget-padding: 20px;
  --cw-widget-border-radius: 12px;
  --cw-widget-border-width: 1px;
  --cw-widget-gap: 2rem;

  /* Content spacing */
  --cw-content-gap: 2rem;
  --cw-stages-gap: 24px;
  --cw-stage-gap: 4px;
  --cw-stage-min-width: 60px;
  --cw-feature-name-min-width: 120px;
}

Colors & Theme

caniuse-widget {
  /* Base colors (auto-adjusts for light/dark theme) */
  --cw-bg-color: #1e293b; /* Dark theme default */
  --cw-text-color: #e2e8f0; /* Dark theme default */
  --cw-border-color: #475569; /* Dark theme default */
  --cw-card-bg: #334155; /* Dark theme default */

  /* Shadow */
  --cw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3); /* Dark theme default */

  /* Loading state colors */
  --cw-loading-color: #94a3b8; /* Dark theme default */
  --cw-loading-border-color: #475569; /* Dark theme default */
  --cw-loading-spinner-color: #60a5fa; /* Dark theme default */

  /* Error state colors */
  --cw-error-color: #ef4444;
  --cw-error-bg: rgba(239, 68, 68, 0.1);
  --cw-error-border: rgba(239, 68, 68, 0.2);

  /* Empty state colors */
  --cw-empty-color: #94a3b8; /* Dark theme default */
}

Typography

caniuse-widget {
  /* Font family */
  --cw-font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

Responsive Breakpoints

caniuse-widget {
  /* Responsive behavior */
  --cw-mobile-breakpoint: 768px;
  --cw-tablet-breakpoint: 1024px;
}

Example: Complete Customization

/* Custom dark theme */
caniuse-widget {
  --cw-bg-color: #0f172a;
  --cw-text-color: #f1f5f9;
  --cw-border-color: #334155;
  --cw-card-bg: #1e293b;
  --cw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4);

  --cw-widget-padding: 24px;
  --cw-widget-border-radius: 16px;
  --cw-font-size: 14px;
}

Light Theme Override Example

/* Light theme customization */
caniuse-widget[theme="light"] {
  --cw-bg-color: #ffffff;
  --cw-text-color: #1e293b;
  --cw-border-color: #e2e8f0;
  --cw-card-bg: #f8fafc;
  --cw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);

  --cw-loading-color: #64748b;
  --cw-loading-border-color: #e2e8f0;
  --cw-loading-spinner-color: #3b82f6;

  --cw-empty-color: #64748b;
}

Note: All CSS variables are automatically adjusted for light/dark themes when you change the theme attribute. You can override any of these variables to create your own custom styling while maintaining the widget's functionality.

API Integration

The widget automatically fetches feature data from the dolmen.tools API. The API endpoint format is:

GET https://dolmen.tools/api/caniuse/{type}/{featureName}

Response Format

The API returns feature data in the following format:

{
  "name": "Standalone API",
  "metadata": {
    "documentationUrl": "https://angular.dev/guide/components/importing#standalone-components"
  },
  "versions": [
    { "version": 13, "status": null },
    { "version": 14, "status": "experimental" },
    { "version": 15, "status": "stable" }
  ]
}

Status Types

The widget displays the following feature statuses:

🔬 Experimental: Early development, may change
👁️ Preview: Developer preview, API may change
✅ Stable: Production-ready, stable API
⚠️ Deprecated: Still works but will be removed
❌ Removed: No longer available

Examples

Basic Widget

<caniuse-widget type="angular" feature-name="Standalone API"></caniuse-widget>

Full Featured Widget

<caniuse-widget type="angular" feature-name="Signal (core)" theme="light">
</caniuse-widget>

Compact Widget

<caniuse-widget type="angular" feature-name="@defer"> </caniuse-widget>

Browser Support

Chrome 67+
Firefox 63+
Safari 11.1+
Edge 79+

Development

# Install dependencies
npm install

# Build the widget
npm run build

# Development mode with watch
npm run dev

# Clean build artifacts
npm run clean

License

MIT License - see LICENSE file for details.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.