Package Exports

web-component-analyzer

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (web-component-analyzer) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

web-component-analyzer

work in progress

web-component-analyzer is a CLI that makes it possible to easily analyze web components. It analyzes your code and jsdoc in order to extract properties, attributes, methods, events, slots and css custom properties.

In addition to custom elements this tool supports web components built with the following libraries:

lit-element
stencil
polymer
skatejs (in the making)

Please open an issue if you want me to add parsing functionality for more libraries.

The goal of this tool is to make it possible to analyze any web component in your own code as well as in library code.

How to use

This tool can be used either as a cli or you can depend directly on the typescript parsing functionality.

CLI

npm install -g web-component-analyer

wca "./src/**/*.{js,ts}" output.json --output=md

API

Overview of what this library can parse

Custom Elements

In your own code

export class MyCustomElement extends HTMLElement {
  myProp = "foo";

  static get observedAttributes() {
    return ["attr1", "attr2"];
  }
    
  set attr1 (val) {
  }
}

customElements.define("my-element", MyCustomElement);

In typescript definition files

export class MyCustomElement extends HTMLElement {
  myProp: string;
  static readonly observedAttributes: string[];
  attr1: string;
}

LitElement

https://lit-element.polymer-project.org/guide

@customElement("my-element")
export class MyCustomElement {
    
    myProp = "myProp";
    
    @property({type: String}) prop4 = "hello";
    @property({type: Object, attribute: "prop-5"}) prop5;
    
    static get properties() {
        return {
            prop1: { type: String },
            prop2: { type: Number, attribute: "prop-two" },
            prop3: { type: Boolean, attribute: false }
        };
    }
}

Polymer

https://polymer-library.polymer-project.org/3.0/docs/first-element/step-3

class IconToggle extends PolymerElement {
  static get properties () {
    return {
      toggleIcon: {
        type: String
      }
    };
  }
}

Stencil

https://stenciljs.com/docs/component https://stenciljs.com/docs/events

Outputs "web-components.json"
Outputs "components.d.ts"

Definition

import './stencil.core';

export namespace Components {
     interface ProgressRing {
        'decimalSize': number;
     }
      interface ProgressRingAttributes extends StencilHTMLAttributes {
        'decimalSize'?: number;
      }
}
declare global {
    interface StencilElementInterfaces {
        'ProgressRing': Components.ProgressRing;
    }

    interface StencilIntrinsicElements {
        'progress-ring': Components.ProgressRingAttributes;
    }
    interface HTMLProgressRingElement extends Components.ProgressRing, HTMLStencilElement {}
    var HTMLProgressRingElement: {
        prototype: HTMLProgressRingElement;
        new (): HTMLProgressRingElement;
    };
    interface HTMLElementTagNameMap {
        'progress-ring': HTMLProgressRingElement
    }
    interface ElementTagNameMap {
       'progress-ring': HTMLProgressRingElement;
    }
}

import { Component, Prop, EventEmitter } from '@stencil/core';

@Component({
  tag: 'my-embedded-component'
})
export class MyEmbeddedComponent {
  @Prop() color: string = 'blue';
  @Event() change: EventEmitter;
  @Event({eventName: 'todoCompleted'}) todoCompleted: EventEmitter;

  render() {
    return (
      <div>My favorite color is {this.color}</div>
    );
  }
}

SkateJS

class MyElement extends Element {
  static props = {
    name: String
  };
 }

class MyElement extends Element {
  static get props() {
    return {
      todos: Array
    };
  }
}