api-viewer-element - npm Package Compare versions

Comparing version 0.1.0 to 0.2.0

lib/api-viewer-content.d.ts

@@ -1,21 +0,17 @@
-import { LitElement, PropertyValues } from 'lit-element';
-import { TemplateResult } from 'lit-html';
-import { PropertyInfo, SlotInfo, AttributeInfo, EventInfo } from './lib/types.js';
-import './api-viewer-item.js';
-import './api-viewer-panel.js';
-import './api-viewer-tab.js';
-import './api-viewer-tabs.js';
+import { LitElement } from 'lit-element';
+import { ElementInfo } from './lib/types.js';
+import './api-viewer-docs.js';
+import './api-viewer-demo.js';
+import './api-viewer-header.js';
+import './api-viewer-marked.js';
+import './api-viewer-select.js';
+import './api-viewer-toggle.js';
 export declare class ApiViewerContent extends LitElement {
-    name: string;
-    props: PropertyInfo[];
-    attrs: AttributeInfo[];
-    slots: SlotInfo[];
-    events: EventInfo[];
+    elements: ElementInfo[];
+    selected: number;
+    section: string;
     static readonly styles: import("lit-element").CSSResult;
-    protected renderProperties(props: PropertyInfo[]): TemplateResult;
-    protected renderAttributes(attrs: AttributeInfo[]): TemplateResult;
-    protected renderSlots(slots: EventInfo[]): TemplateResult;
-    protected renderEvents(events: EventInfo[]): TemplateResult;
-    protected render(): TemplateResult;
-    protected updated(props: PropertyValues): void;
+    protected render(): import("lit-element").TemplateResult;
+    private _onSelect;
+    private _onToggle;
 }
@@ -22,0 +18,0 @@ declare global {

lib/api-viewer-content.js

 import { __decorate } from "tslib";
 import { LitElement, html, customElement, css, property } from 'lit-element';
-import { EMPTY_ATTR_INFO, EMPTY_EVT_INFO, EMPTY_PROP_INFO, EMPTY_SLOT_INFO } from './lib/constants.js';
-import './api-viewer-item.js';
-import './api-viewer-panel.js';
-import './api-viewer-tab.js';
-/* eslint-disable import/no-duplicates */
-import './api-viewer-tabs.js';
-/* eslint-enable import/no-duplicates */
-const processAttrs = (attrs, props) => {
-    return attrs.filter(attr => !props.some(prop => prop.name === attr.name));
-};
-const processProps = (props, attrs) => {
-    return props.map((prop) => {
-        const p = prop;
-        const a = attrs.find(attr => prop.name === attr.name);
-        if (a) {
-            p.attribute = a.name;
-        }
-        return p;
-    });
-};
+import { cache } from 'lit-html/directives/cache.js';
+import { EMPTY_ELEMENT } from './lib/constants.js';
+import './api-viewer-docs.js';
+import './api-viewer-demo.js';
+import './api-viewer-header.js';
+import './api-viewer-marked.js';
+import './api-viewer-select.js';
+import './api-viewer-toggle.js';
 let ApiViewerContent = class ApiViewerContent extends LitElement {
     constructor() {
         super(...arguments);
-        this.name = '';
-        this.props = EMPTY_PROP_INFO;
-        this.attrs = EMPTY_ATTR_INFO;
-        this.slots = EMPTY_SLOT_INFO;
-        this.events = EMPTY_EVT_INFO;
+        this.elements = [];
+        this.selected = 0;
+        this.section = 'docs';
     }
@@ -38,120 +24,73 @@ static get styles() {
 
-      api-viewer-item:not(:first-of-type) {
-        border-top: solid 1px var(--ave-border-color);
+      .description {
+        padding: 0.75rem;
+        border-bottom: solid 1px var(--ave-border-color);
       }
     `;
     }
-    // eslint-disable-next-line class-methods-use-this
-    renderProperties(props) {
-        const hidden = props.length === 0;
+    render() {
+        const { elements, selected, section } = this;
+        const tags = elements.map((tag) => tag.name);
+        const element = EMPTY_ELEMENT;
+        if (elements[selected]) {
+            Object.assign(element, elements[selected]);
+        }
+        const { name, description, properties, attributes, slots, events, cssProperties } = element;
+        // TODO: analyzer should sort CSS custom properties
+        const cssProps = (cssProperties || []).sort((a, b) => a.name > b.name ? 1 : -1);
         return html `
-      <api-viewer-tab
-        heading="Properties"
-        slot="tab"
-        ?hidden="${hidden}"
-      ></api-viewer-tab>
-      <api-viewer-panel slot="panel" ?hidden="${hidden}">
-        ${props.map(prop => html `
-            <api-viewer-item
-              .name="${prop.name}"
-              .description="${prop.description}"
-              .valueType="${prop.type}"
-              .attribute="${prop.attribute}"
-            ></api-viewer-item>
-          `)}
-      </api-viewer-panel>
+      <api-viewer-header .heading="${name}">
+        <api-viewer-toggle
+          .section="${section}"
+          @section-changed="${this._onToggle}"
+        ></api-viewer-toggle>
+        <api-viewer-select
+          .options="${tags}"
+          .selected="${selected}"
+          @selected-changed="${this._onSelect}"
+        ></api-viewer-select>
+      </api-viewer-header>
+      ${cache(section === 'docs'
+            ? html `
+              <api-viewer-marked
+                .content="${description}"
+                class="description"
+              ></api-viewer-marked>
+              <api-viewer-docs
+                .name="${name}"
+                .props="${properties}"
+                .attrs="${attributes}"
+                .events="${events}"
+                .slots="${slots}"
+                .cssProps="${cssProps}"
+              ></api-viewer-docs>
+            `
+            : html `
+              <api-viewer-demo
+                .name="${name}"
+                .props="${properties}"
+                .slots="${slots}"
+                .events="${events}"
+                .cssProps="${cssProps}"
+              ></api-viewer-demo>
+            `)}
     `;
     }
-    // eslint-disable-next-line class-methods-use-this
-    renderAttributes(attrs) {
-        const hidden = attrs.length === 0;
-        return html `
-      <api-viewer-tab
-        heading="Attributes"
-        slot="tab"
-        ?hidden="${hidden}"
-      ></api-viewer-tab>
-      <api-viewer-panel slot="panel" ?hidden="${hidden}">
-        ${attrs.map(attr => html `
-            <api-viewer-item
-              .name="${attr.name}"
-              .description="${attr.description}"
-              .valueType="${attr.type}"
-            ></api-viewer-item>
-          `)}
-      </api-viewer-panel>
-    `;
+    _onSelect(e) {
+        const { selected } = e.detail;
+        this.selected = this.elements.findIndex(el => el.name === selected);
     }
-    // eslint-disable-next-line class-methods-use-this
-    renderSlots(slots) {
-        const hidden = slots.length === 0;
-        return html `
-      <api-viewer-tab
-        heading="Slots"
-        slot="tab"
-        ?hidden="${hidden}"
-      ></api-viewer-tab>
-      <api-viewer-panel slot="panel" ?hidden="${hidden}">
-        ${slots.map(slot => html `
-            <api-viewer-item
-              .name="${slot.name}"
-              .description="${slot.description}"
-            ></api-viewer-item>
-          `)}
-      </api-viewer-panel>
-    `;
+    _onToggle(e) {
+        this.section = e.detail.section;
     }
-    // eslint-disable-next-line class-methods-use-this
-    renderEvents(events) {
-        const hidden = events.length === 0;
-        return html `
-      <api-viewer-tab
-        heading="Events"
-        slot="tab"
-        ?hidden="${hidden}"
-      ></api-viewer-tab>
-      <api-viewer-panel slot="panel" ?hidden="${hidden}">
-        ${events.map(event => html `
-            <api-viewer-item
-              .name="${event.name}"
-              .description="${event.description}"
-            ></api-viewer-item>
-          `)}
-      </api-viewer-panel>
-    `;
-    }
-    render() {
-        const { slots, props, attrs, events } = this;
-        const attributes = processAttrs(attrs || [], props || []);
-        const properties = processProps(props || [], attrs || []);
-        return html `
-      <api-viewer-tabs>
-        ${this.renderProperties(properties)}${this.renderAttributes(attributes)}
-        ${this.renderSlots(slots)}${this.renderEvents(events)}
-      </api-viewer-tabs>
-    `;
-    }
-    updated(props) {
-        super.updated(props);
-        if (props.has('name') && props.get('name')) {
-            const tabs = this.renderRoot.querySelector('api-viewer-tabs');
-            tabs.selectFirst();
-        }
-    }
 };
 __decorate([
-    property({ type: String })
-], ApiViewerContent.prototype, "name", void 0);
+    property({ attribute: false })
+], ApiViewerContent.prototype, "elements", void 0);
 __decorate([
-    property({ attribute: false, hasChanged: () => true })
-], ApiViewerContent.prototype, "props", void 0);
+    property({ type: Number })
+], ApiViewerContent.prototype, "selected", void 0);
 __decorate([
-    property({ attribute: false, hasChanged: () => true })
-], ApiViewerContent.prototype, "attrs", void 0);
-__decorate([
-    property({ attribute: false, hasChanged: () => true })
-], ApiViewerContent.prototype, "slots", void 0);
-__decorate([
-    property({ attribute: false, hasChanged: () => true })
-], ApiViewerContent.prototype, "events", void 0);
+    property({ type: String })
+], ApiViewerContent.prototype, "section", void 0);
 ApiViewerContent = __decorate([
@@ -158,0 +97,0 @@ customElement('api-viewer-content')

lib/api-viewer-docs.d.ts

@@ -1,13 +0,18 @@
-import { LitElement } from 'lit-element';
-import { ElementInfo } from './lib/types.js';
-import './api-viewer-content.js';
-import './api-viewer-description.js';
-import './api-viewer-header.js';
-import './api-viewer-select.js';
+import { LitElement, PropertyValues } from 'lit-element';
+import { TemplateResult } from 'lit-html';
+import { PropertyInfo, SlotInfo, AttributeInfo, EventInfo, CSSPropertyInfo } from './lib/types.js';
+import './api-viewer-item.js';
+import './api-viewer-panel.js';
+import './api-viewer-tab.js';
+import './api-viewer-tabs.js';
 export declare class ApiViewerDocs extends LitElement {
-    elements: ElementInfo[];
-    selected: number;
+    name: string;
+    props: PropertyInfo[];
+    attrs: AttributeInfo[];
+    slots: SlotInfo[];
+    events: EventInfo[];
+    cssProps: CSSPropertyInfo[];
     static readonly styles: import("lit-element").CSSResult;
-    protected render(): import("lit-element").TemplateResult;
-    private _onSelect;
+    protected render(): TemplateResult;
+    protected updated(props: PropertyValues): void;
 }
@@ -14,0 +19,0 @@ declare global {

lib/api-viewer-docs.js

 import { __decorate } from "tslib";
 import { LitElement, html, customElement, css, property } from 'lit-element';
-import { EMPTY_ELEMENTS, EMPTY_ELEMENT } from './lib/constants.js';
-import './api-viewer-content.js';
-import './api-viewer-description.js';
-import './api-viewer-header.js';
-import './api-viewer-select.js';
+import './api-viewer-item.js';
+import './api-viewer-panel.js';
+import './api-viewer-tab.js';
+/* eslint-disable import/no-duplicates */
+import './api-viewer-tabs.js';
+/* eslint-enable import/no-duplicates */
+const processAttrs = (attrs, props) => {
+    return attrs.filter(attr => !props.some(prop => prop.name === attr.name));
+};
+const processProps = (props, attrs) => {
+    return props.map((prop) => {
+        const p = prop;
+        const a = attrs.find(attr => prop.name === attr.name);
+        if (a) {
+            p.attribute = a.name;
+        }
+        return p;
+    });
+};
+const renderTab = (heading, hidden, content) => {
+    return html `
+    <api-viewer-tab
+      heading="${heading}"
+      slot="tab"
+      ?hidden="${hidden}"
+    ></api-viewer-tab>
+    <api-viewer-panel slot="panel" ?hidden="${hidden}">
+      ${content}
+    </api-viewer-panel>
+  `;
+};
+const renderProperties = (props) => {
+    return renderTab('Properties', props.length === 0, html `
+      ${props.map(prop => html `
+          <api-viewer-item
+            .name="${prop.name}"
+            .description="${prop.description}"
+            .valueType="${prop.type}"
+            .attribute="${prop.attribute}"
+          ></api-viewer-item>
+        `)}
+    `);
+};
+const renderAttributes = (attrs) => {
+    return renderTab('Attributes', attrs.length === 0, html `
+      ${attrs.map(attr => html `
+          <api-viewer-item
+            .name="${attr.name}"
+            .description="${attr.description}"
+            .valueType="${attr.type}"
+          ></api-viewer-item>
+        `)}
+    `);
+};
+const renderSlots = (slots) => {
+    return renderTab('Slots', slots.length === 0, html `
+      ${slots.map(slot => html `
+          <api-viewer-item
+            .name="${slot.name}"
+            .description="${slot.description}"
+          ></api-viewer-item>
+        `)}
+    `);
+};
+const renderEvents = (events) => {
+    return renderTab('Events', events.length === 0, html `
+      ${events.map(event => html `
+          <api-viewer-item
+            .name="${event.name}"
+            .description="${event.description}"
+          ></api-viewer-item>
+        `)}
+    `);
+};
+const renderCssProps = (props) => {
+    return renderTab('CSS Custom Properties', props.length === 0, html `
+      ${props.map(prop => html `
+          <api-viewer-item
+            .name="${prop.name}"
+            .description="${prop.description}"
+          ></api-viewer-item>
+        `)}
+    `);
+};
 let ApiViewerDocs = class ApiViewerDocs extends LitElement {
     constructor() {
         super(...arguments);
-        this.elements = EMPTY_ELEMENTS;
-        this.selected = 0;
+        this.name = '';
+        this.props = [];
+        this.attrs = [];
+        this.slots = [];
+        this.events = [];
+        this.cssProps = [];
     }
@@ -19,43 +102,53 @@ static get styles() {
       }
+
+      api-viewer-item:not(:first-of-type) {
+        border-top: solid 1px var(--ave-border-color);
+      }
+
+      api-viewer-tab {
+        max-width: 150px;
+      }
+
+      api-viewer-tab[heading^='CSS'] {
+        font-size: 0.8125rem;
+      }
     `;
     }
     render() {
-        const { elements, selected } = this;
-        const tags = elements.map((tag) => tag.name);
-        const element = EMPTY_ELEMENT;
-        if (elements[selected]) {
-            Object.assign(element, elements[selected]);
-        }
-        const { name, description, properties, attributes, slots, events } = element;
+        const { slots, props, attrs, events, cssProps } = this;
+        const attributes = processAttrs(attrs || [], props || []);
+        const properties = processProps(props || [], attrs || []);
         return html `
-      <api-viewer-header .heading="${name}">
-        <api-viewer-select
-          .options="${tags}"
-          .selected="${selected}"
-          @selected-changed="${this._onSelect}"
-        ></api-viewer-select>
-      </api-viewer-header>
-      <api-viewer-description
-        .description="${description}"
-      ></api-viewer-description>
-      <api-viewer-content
-        .name="${name}"
-        .props="${properties}"
-        .attrs="${attributes}"
-        .events="${events}"
-        .slots="${slots}"
-      ></api-viewer-content>
+      <api-viewer-tabs>
+        ${renderProperties(properties)}${renderAttributes(attributes)}
+        ${renderSlots(slots)}${renderEvents(events)}${renderCssProps(cssProps)}
+      </api-viewer-tabs>
     `;
     }
-    _onSelect(e) {
-        const { selected } = e.detail;
-        this.selected = this.elements.findIndex(el => el.name === selected);
+    updated(props) {
+        super.updated(props);
+        if (props.has('name') && props.get('name')) {
+            const tabs = this.renderRoot.querySelector('api-viewer-tabs');
+            tabs.selectFirst();
+        }
     }
 };
 __decorate([
-    property({ attribute: false })
-], ApiViewerDocs.prototype, "elements", void 0);
+    property({ type: String })
+], ApiViewerDocs.prototype, "name", void 0);
 __decorate([
-    property({ type: Number })
-], ApiViewerDocs.prototype, "selected", void 0);
+    property({ attribute: false, hasChanged: () => true })
+], ApiViewerDocs.prototype, "props", void 0);
+__decorate([
+    property({ attribute: false, hasChanged: () => true })
+], ApiViewerDocs.prototype, "attrs", void 0);
+__decorate([
+    property({ attribute: false, hasChanged: () => true })
+], ApiViewerDocs.prototype, "slots", void 0);
+__decorate([
+    property({ attribute: false, hasChanged: () => true })
+], ApiViewerDocs.prototype, "events", void 0);
+__decorate([
+    property({ attribute: false, hasChanged: () => true })
+], ApiViewerDocs.prototype, "cssProps", void 0);
 ApiViewerDocs = __decorate([
@@ -62,0 +155,0 @@ customElement('api-viewer-docs')

lib/api-viewer-header.js

@@ -26,2 +26,16 @@ import { __decorate } from "tslib";
       }
+
+      .controls {
+        display: flex;
+      }
+
+      @media (max-width: 480px) {
+        .controls {
+          flex-direction: column;
+        }
+
+        .controls ::slotted(:not(:last-child)) {
+          margin-bottom: 0.5rem;
+        }
+      }
     `;
@@ -32,3 +46,5 @@ }
       <div class="heading">&lt;${this.heading}&gt;</div>
-      <slot></slot>
+      <div class="controls">
+        <slot></slot>
+      </div>
     `;
@@ -35,0 +51,0 @@ }

lib/api-viewer-item.d.ts

 import { LitElement } from 'lit-element';
 import { TemplateResult } from 'lit-html';
+import './api-viewer-marked.js';
 export declare class ApiViewerItem extends LitElement {
@@ -4,0 +5,0 @@ name: string;

lib/api-viewer-item.js

 import { __decorate } from "tslib";
 import { LitElement, html, customElement, css, property } from 'lit-element';
 import { nothing } from 'lit-html';
-import { parse } from './lib/markdown.js';
+import './api-viewer-marked.js';
 const NOTHING = html `
@@ -33,2 +33,6 @@ ${nothing}
 
+      .col:only-child {
+        flex-basis: 100%;
+      }
+
       .col-type {
@@ -45,7 +49,2 @@ flex-basis: 50%;
 
-      p {
-        margin: 0.5rem 0;
-        font-size: 0.9375rem;
-      }
-
       .value {
@@ -66,4 +65,6 @@ font-family: var(--ave-monospace-font);
             ? html `
-          <div class="label">Type</div>
-          <div class="value">${type}</div>
+          <div class="col col-type">
+            <div class="label">Type</div>
+            <div class="value">${type}</div>
+          </div>
         `
@@ -76,4 +77,6 @@ : NOTHING;
             ? html `
-          <div class="label">Attribute</div>
-          <div class="value">${attr}</div>
+          <div class="col">
+            <div class="label">Attribute</div>
+            <div class="value">${attr}</div>
+          </div>
         `
@@ -90,12 +93,7 @@ : NOTHING;
         </div>
-        <div class="col">
-          ${this.renderAttr(attribute)}
-        </div>
-        <div class="col col-type">
-          ${this.renderType(valueType)}
-        </div>
+        ${this.renderAttr(attribute)}${this.renderType(valueType)}
       </div>
       <div>
         <div class="label">Description</div>
-        ${parse(description)}
+        <api-viewer-marked content="${description}"></api-viewer-marked>
       </div>
@@ -102,0 +100,0 @@ `;

lib/api-viewer-tab.js

@@ -17,2 +17,3 @@ import { __decorate } from "tslib";
         align-items: center;
+        flex-shrink: 0;
         box-sizing: border-box;
@@ -19,0 +20,0 @@ position: relative;

lib/api-viewer-tabs.js

@@ -33,5 +33,7 @@ import { __decorate } from "tslib";
         .tabs {
+          flex-grow: 1;
           display: flex;
-          flex-wrap: nowrap;
-          overflow: auto;
+          align-self: stretch;
+          overflow-x: auto;
+          -webkit-overflow-scrolling: touch;
         }
@@ -38,0 +40,0 @@ }

lib/api-viewer.d.ts

 import { LitElement, TemplateResult } from 'lit-element';
-import './api-viewer-docs.js';
+import './api-viewer-content.js';
 export declare class ApiViewer extends LitElement {
@@ -10,2 +10,3 @@ src?: string;
     protected render(): TemplateResult;
+    protected firstUpdated(): void;
 }
@@ -12,0 +13,0 @@ declare global {

lib/api-viewer.js

@@ -5,8 +5,8 @@ import { __decorate } from "tslib";
 import { fetchJson } from './lib/fetch-json.js';
-import { EMPTY_ELEMENTS } from './lib/constants.js';
-import './api-viewer-docs.js';
+import { queryTemplates } from './lib/utils.js';
+import './api-viewer-content.js';
 let ApiViewer = class ApiViewer extends LitElement {
     constructor() {
         super(...arguments);
-        this.jsonFetched = Promise.resolve(EMPTY_ELEMENTS);
+        this.jsonFetched = Promise.resolve([]);
     }
@@ -17,3 +17,3 @@ // eslint-disable-next-line class-methods-use-this
         return html `
-      <api-viewer-docs .elements="${elements}"></api-viewer-docs>
+      <api-viewer-content .elements="${elements}"></api-viewer-content>
     `;
@@ -34,3 +34,3 @@ }
 
-        --ave-primary-color: #1867c0;
+        --ave-primary-color: #01579b;
         --ave-accent-color: #d63200;
@@ -58,2 +58,5 @@ --ave-border-color: rgba(0, 0, 0, 0.12);
     }
+    firstUpdated() {
+        queryTemplates(this);
+    }
 };
@@ -60,0 +63,0 @@ __decorate([

lib/lib/constants.d.ts

@@ -1,9 +0,3 @@
-import { ElementInfo, SlotInfo, EventInfo, PropertyInfo, AttributeInfo, Info } from './types.js';
-export declare const EMPTY_ELEMENTS: ElementInfo[];
-export declare const EMPTY_SLOT_INFO: SlotInfo[];
-export declare const EMPTY_ATTR_INFO: AttributeInfo[];
-export declare const EMPTY_PROP_INFO: PropertyInfo[];
-export declare const EMPTY_EVT_INFO: EventInfo[];
+import { ElementInfo } from './types.js';
 export declare const EMPTY_ELEMENT: ElementInfo;
-export declare const EMPTY_INFO: Info;
 //# sourceMappingURL=constants.d.ts.map

lib/lib/constants.js

@@ -1,18 +0,10 @@
-export const EMPTY_ELEMENTS = [];
-export const EMPTY_SLOT_INFO = [];
-export const EMPTY_ATTR_INFO = [];
-export const EMPTY_PROP_INFO = [];
-export const EMPTY_EVT_INFO = [];
 export const EMPTY_ELEMENT = {
     name: '',
     description: '',
-    slots: EMPTY_SLOT_INFO,
-    attributes: EMPTY_ATTR_INFO,
-    properties: EMPTY_PROP_INFO,
-    events: EMPTY_EVT_INFO
+    slots: [],
+    attributes: [],
+    properties: [],
+    events: [],
+    cssProperties: []
 };
-export const EMPTY_INFO = {
-    name: '',
-    description: ''
-};
 //# sourceMappingURL=constants.js.map

lib/lib/fetch-json.js

@@ -1,4 +0,3 @@
-import { EMPTY_ELEMENTS } from './constants.js';
 export const fetchJson = async (src) => {
-    let result = EMPTY_ELEMENTS;
+    let result = [];
     try {
@@ -5,0 +4,0 @@ const file = await fetch(src);

lib/lib/types.d.ts

@@ -9,6 +9,8 @@ export interface ElementSetInfo {
     slots: SlotInfo[] | undefined;
+    cssProperties: CSSPropertyInfo[] | undefined;
 }
 export interface SlotInfo {
     name: string;
-    description: string;
+    description?: string;
+    content?: string;
 }
@@ -23,7 +25,26 @@ export interface Info {
 export interface PropertyInfo extends Info {
-    type: string | undefined;
+    type: string;
     attribute: string | undefined;
+    value: string | number | boolean | null | undefined;
 }
+export interface KnobValue {
+    type: string;
+    value: string | number | boolean | null;
+}
+export declare type KnobValues = {
+    [name: string]: KnobValue;
+};
+export interface SlotValue {
+    name: string;
+    content: string;
+}
 export interface EventInfo extends Info {
 }
+export interface CSSPropertyInfo extends Info {
+    value?: string;
+    defaultValue?: string;
+}
+export declare type ComponentWithProps = {
+    [s: string]: string | number | boolean | null;
+};
 //# sourceMappingURL=types.d.ts.map

package.json

 {
   "name": "api-viewer-element",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Web Components API viewer element",
@@ -30,2 +30,3 @@ "author": "Serhii Kulykov <[e-mail]>",
     "@types/marked": "^0.6.5",
+    "@types/prismjs": "^1.16.0",
     "dompurify": "^2.0.7",
@@ -35,13 +36,14 @@ "lit-element": "^2.2.1",
     "marked": "^0.7.0",
+    "prismjs": "^1.17.1",
     "tslib": "^1.10.0"
   },
   "devDependencies": {
-    "@open-wc/building-rollup": "^0.12.0",
-    "@typescript-eslint/eslint-plugin": "^2.5.0",
-    "@typescript-eslint/parser": "^2.5.0",
+    "@open-wc/building-rollup": "^0.12.5",
+    "@typescript-eslint/eslint-plugin": "^2.6.0",
+    "@typescript-eslint/parser": "^2.6.0",
     "@webcomponents/webcomponentsjs": "^2.3.0",
-    "es-dev-server": "^1.18.5",
-    "eslint": "^6.5.1",
+    "es-dev-server": "^1.20.0",
+    "eslint": "^6.6.0",
     "eslint-config-airbnb-base": "^14.0.0",
-    "eslint-config-prettier": "^6.4.0",
+    "eslint-config-prettier": "^6.5.0",
     "eslint-plugin-import": "^2.18.2",
@@ -57,3 +59,3 @@ "eslint-plugin-lit": "^1.2.0",
     "rimraf": "^3.0.0",
-    "rollup": "^1.25.1",
+    "rollup": "^1.26.0",
     "stylelint": "^11.1.1",
@@ -66,3 +68,3 @@ "stylelint-config-prettier": "^6.0.0",
     "typescript": "^3.6.4",
-    "web-component-analyzer": "^0.1.17"
+    "web-component-analyzer": "^0.1.18"
   },
@@ -69,0 +71,0 @@ "husky": {

README.md

 # <api-viewer>
 
-API viewer for [web-component-analyzer](https://github.com/runem/web-component-analyzer) JSON output.
+API documentation and live playground for Web Components. Based on [web-component-analyzer](https://github.com/runem/web-component-analyzer) JSON format.
 
-## Usage
-
 ```html
@@ -13,18 +11,127 @@ <api-viewer src="./custom-elements.json"></api-viewer>
 
-[<img src="https://raw.githubusercontent.com/web-padawan/api-viewer-element/master/screenshot.png" alt="Screenshot of api-viewer element" width="800">](https://api-viewer-element.netlify.com/)
+[<img src="https://raw.githubusercontent.com/web-padawan/api-viewer-element/master/screenshot-docs.png" alt="Screenshot of api-viewer docs" width="800">](https://api-viewer-element.netlify.com/)
 
-## Preparing a JSON
+[<img src="https://raw.githubusercontent.com/web-padawan/api-viewer-element/master/screenshot-demo.png" alt="Screenshot of api-viewer demo" width="800">](https://api-viewer-element.netlify.com/)
 
-First, install [web-component-analyzer](https://github.com/runem/web-component-analyzer):
+## Features
 
+- API docs viewer
+  - Properties - JS properties publicly exposed by the component
+  - Attributes - HTML attributes (except those that match properties)
+  - Events - DOM events dispatched by the component
+  - Slots - default `<slot>` and / or named slots, if any
+  - CSS Custom Properties - styling API of the component
+- Live playground
+  - Source - code snippet matching the rendered component
+  - Knobs - change properties and slotted content dynamically
+  - Styles - change values of the custom CSS properties
+  - Event log - output the events fired by the component
+  - Templates - configure complex slotted content
+
+## Install
+
 ```sh
-npm install -g web-component-analyzer
+$ npm install api-viewer-element
 ```
 
-Analyze your components using `--format json`:
+## Usage
 
+1. Install [web-component-analyzer](https://github.com/runem/web-component-analyzer):
+
 ```sh
-wca analyze my-element.js --outFile custom-elements.json --format json
+$ npm install -g web-component-analyzer
 ```
 
+2. Analyze your components using `--format json`:
+
+```sh
+$ wca analyze my-element.js --outFile custom-elements.json --format json
+```
+
+3. Create an HTML file and import the component:
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <script type="module">
+      import 'api-viewer-element';
+    </script>
+  </head>
+
+  <body>
+    <api-viewer src="./custom-elements.json"></api-viewer>
+  </body>
+</html>
+```
+
+4. Use [es-dev-server](https://open-wc.org/developing/es-dev-server.html) to serve your HTML page.
+
+## Examples
+
+### Playground
+
+Import the components documented in JSON file to enable demos:
+
+```html
+<script type="module">
+  import 'my-element';
+</script>
+<api-viewer src="./custom-elements.json"></api-viewer>
+```
+
+### Knobs
+
+The playground listens to all the events dispatched by the rendered component. This can be used to
+sync knobs with the property changes caused by the user. In order to make it work, dispatch and
+document `[property]-changed` events:
+
+```js
+/**
+ * A custom element that fires event on value change.
+ *
+ * @element my-element
+ *
+ * @prop {String} value - Value of the component
+ * @fires value-changed - Event fired when value is changed
+ */
+```
+
+### Styles
+
+The playground collects the default values for the documented CSS custom properties on the
+rendered component using `getComputedStyle(element).getPropertyValue()`. In order to make it work,
+use the following CSS structure:
+
+```css
+:host {
+  --button-color: red;
+}
+
+button {
+  color: var(--button-color);
+}
+```
+
+### Templates
+
+Use `<template data-element="my-element">` for configuring complex content:
+
+```html
+<api-viewer src="./custom-elements.json">
+  <template data-element="fancy-accordion">
+    <expansion-panel>
+      <div slot="header">Panel 1</div>
+      <div>Content 1</div>
+    </expansion-panel>
+    <expansion-panel>
+      <div slot="header">Panel 2</div>
+      <div>Content 2</div>
+    </expansion-panel>
+  </template>
+</api-viewer>
+```
+
+*Note*: do not minify HTML to keep proper indentation.
+
 ## Styling
@@ -34,13 +141,16 @@
 
-| Property               | Description                                   |
-|------------------------|-----------------------------------------------|
-| `--ave-accent-color`   | Accent color, used for property names         |
-| `--ave-border-color`   | Color used for borders and dividers           |
-| `--ave-border-radius`  | Border radius used for the outer border       |
-| `--ave-header-color`   | Header text color used for tag name           |
-| `--ave-item-color`     | API items content color (main text)           |
-| `--ave-label-color`    | API items labels color                        |
-| `--ave-monospace-font` | Monospace font stack for the API items        |
-| `--ave-primary-color`  | Primary color, used for header and active tab |
-| `--ave-tab-color`      | Inactive tabs color                           |
+| Property                         | Description                                     |
+| -------------------------------- | ----------------------------------------------- |
+| `--ave-accent-color`             | Accent color, used for property names           |
+| `--ave-border-color`             | Color used for borders and dividers             |
+| `--ave-border-radius`            | Border radius used for the outer border         |
+| `--ave-button-active-background` | Color of the `:focus` and `:hover` button       |
+| `--ave-button-background`        | Background of the button (code snippet, events) |
+| `--ave-button-color`             | Color of the button (code snippet, events)      |
+| `--ave-header-color`             | Header text color used for tag name             |
+| `--ave-item-color`               | API items content color (main text)             |
+| `--ave-label-color`              | API items labels color                          |
+| `--ave-monospace-font`           | Monospace font stack for the API items          |
+| `--ave-primary-color`            | Primary color, used for header and active tab   |
+| `--ave-tab-color`                | Inactive tabs color                             |
 
@@ -52,3 +162,3 @@ ## Contributing
 ```sh
-yarn
+$ yarn
 ```
@@ -59,3 +169,3 @@
 ```sh
-yarn dev
+$ yarn dev
 ```
@@ -68,3 +178,3 @@
 ```sh
-yarn dist
+$ yarn dist
 ```
@@ -75,3 +185,3 @@
 ```sh
-yarn serve:dist
+$ yarn serve:dist
 ```
@@ -85,1 +195,2 @@
 - The tabs component is based on the [howto-tabs](https://developers.google.com/web/fundamentals/web-components/examples/howto-tabs) example.
+- Thanks to [open-wc.org](https://open-wc.org/) for [es-dev-server](https://github.com/open-wc/open-wc/tree/master/packages/es-dev-server) and [rollup preset](https://open-wc.org/building/building-rollup.html).

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

200586

increased by22.86%

Number of package files

104

increased by5.05%

Lines of code

2433

increased by20.51%

Number of lines in readme file

190

increased by140.51%

Worsened metrics

Dependency count

9

increased by28.57%

Number of medium supply chain risk alerts

2

increased by100%

Dependency changes

• + Added@types/prismjs@^1.16.0

• + Addedprismjs@^1.17.1

• + Added@types/prismjs@1.26.5(transitive)

• + Addedprismjs@1.29.0(transitive)