web-component-analyzer

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();