Web Component Analyzer CLI

import { analyzeText } from 'web-component-analyzer';

const componentCode = `
/**
 * A simple counter element.
 * @slot default - The content rendered inside the counter.
 * @csspart button - The button part.
 * @prop {number} count - The current count.
 * @attr {string} label - A label for the counter.
 * @fires count-changed - Emitted when the count changes.
 */
class MyCounter extends HTMLElement {
  static get observedAttributes() {
    return ['label'];
  }

  constructor() {
    super();
    this.count = 0;
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    this.shadowRoot.innerHTML = `
      <style>
        :host { display: block; padding: 16px; border: 1px solid #ccc; }
        .wrapper { display: flex; align-items: center; gap: 8px; }
        button { padding: 8px 16px; cursor: pointer; }
      </style>
      <div class="wrapper">
        <span part="button">${this.label || 'Counter'}: ${this.count}</span>
        <button id="increment">Increment</button>
      </div>
    `;
    this.shadowRoot.querySelector('#increment')?.addEventListener('click', this._onIncrement.bind(this));
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'label') {
      this.label = newValue;
      if (this.shadowRoot) {
        this.shadowRoot.querySelector('span').textContent = `${this.label}: ${this.count}`;
      }
    }
  }

  _onIncrement() {
    this.count++;
    if (this.shadowRoot) {
        this.shadowRoot.querySelector('span').textContent = `${this.label || 'Counter'}: ${this.count}`;
    }
    this.dispatchEvent(new CustomEvent('count-changed', { detail: this.count }));
  }
}

customElements.define('my-counter', MyCounter);
`;

async function analyzeMyComponent() {
  try {
    const result = await analyzeText(componentCode, {
      fileName: 'my-counter.js',
      // 'defaultPackage' can be used to set properties for the default package in the manifest
      defaultPackage: { name: 'my-components', version: '1.0.0' }
    });

    if (result && result.length > 0) {
      console.log("Analysis Result for 'my-counter':");
      console.log(JSON.stringify(result[0], null, 2));
      console.log("\nProperties found:", result[0].declarations?.[0]?.members?.filter(m => m.kind === 'field' || m.kind === 'property').map(p => p.name));
    } else {
      console.log("No components found in the provided code.");
    }
  } catch (error) {
    console.error("Error analyzing component:", error);
  }
}

analyzeMyComponent();