api-viewer-element - npm Package Compare versions

Comparing version 0.2.1 to 0.2.2

CHANGELOG.md

@@ -19,2 +19,10 @@ # Change Log
 
+## [0.2.2] - 2019-11-05
+
+### Added
+
+#### API docs viewer
+
+- CSS Shadow Parts: name, description
+
 ## [0.2.1] - 2019-11-02
@@ -21,0 +29,0 @@

lib/api-viewer-content.d.ts

@@ -13,3 +13,3 @@ import { LitElement } from 'lit-element';
     section: string;
-    static readonly styles: import("lit-element").CSSResult;
+    static get styles(): import("lit-element").CSSResult;
     protected render(): import("lit-element").TemplateResult;
@@ -16,0 +16,0 @@ private _onSelect;

lib/api-viewer-content.js

@@ -33,3 +33,3 @@ import { __decorate } from "tslib";
         const tags = elements.map((tag) => tag.name);
-        const { name, description, properties, attributes, slots, events, cssProperties } = { ...EMPTY_ELEMENT, ...(elements[selected] || {}) };
+        const { name, description, properties, attributes, slots, events, cssParts, cssProperties } = { ...EMPTY_ELEMENT, ...(elements[selected] || {}) };
         // TODO: analyzer should sort CSS custom properties
@@ -62,2 +62,3 @@ const cssProps = (cssProperties || []).sort((a, b) => a.name > b.name ? 1 : -1);
                 .slots="${slots}"
+                .cssParts="${cssParts}"
                 .cssProps="${cssProps}"
@@ -64,0 +65,0 @@ ></api-viewer-docs>

lib/api-viewer-demo-css.d.ts

@@ -5,3 +5,3 @@ import { LitElement, TemplateResult } from 'lit-element';
     cssProps: CSSPropertyInfo[];
-    static readonly styles: import("lit-element").CSSResult;
+    static get styles(): import("lit-element").CSSResult;
     protected render(): TemplateResult;
@@ -8,0 +8,0 @@ protected firstUpdated(): void;

lib/api-viewer-demo-events.d.ts

 import { LitElement, TemplateResult } from 'lit-element';
 export declare class ApiViewerDemoEvents extends LitElement {
     log: CustomEvent[];
-    static readonly styles: import("lit-element").CSSResult[];
+    static get styles(): import("lit-element").CSSResult[];
     protected render(): TemplateResult;
@@ -6,0 +6,0 @@ private _onClearClick;

lib/api-viewer-demo-knobs.d.ts

@@ -7,3 +7,3 @@ import { LitElement, TemplateResult } from 'lit-element';
     slots: SlotInfo[];
-    static readonly styles: import("lit-element").CSSResult;
+    static get styles(): import("lit-element").CSSResult;
     protected render(): TemplateResult;
@@ -10,0 +10,0 @@ protected firstUpdated(): void;

lib/api-viewer-demo-layout.d.ts

@@ -21,3 +21,3 @@ import { LitElement, PropertyValues } from 'lit-element';
     knobs: KnobValues;
-    static readonly styles: import("lit-element").CSSResult;
+    static get styles(): import("lit-element").CSSResult;
     protected render(): import("lit-element").TemplateResult;
@@ -24,0 +24,0 @@ protected updated(props: PropertyValues): void;

lib/api-viewer-demo-renderer.d.ts

@@ -8,3 +8,3 @@ import { LitElement } from 'lit-element';
     cssProps: CSSPropertyInfo[];
-    static readonly styles: import("lit-element").CSSResult;
+    static get styles(): import("lit-element").CSSResult;
     protected render(): import("lit-element").TemplateResult;
@@ -11,0 +11,0 @@ }

lib/api-viewer-demo-snippet.d.ts

@@ -15,3 +15,3 @@ import { LitElement, TemplateResult } from 'lit-element';
     protected btnText: string;
-    static readonly styles: import("lit-element").CSSResult[];
+    static get styles(): import("lit-element").CSSResult[];
     protected render(): TemplateResult;
@@ -18,0 +18,0 @@ private _onCopyClick;

lib/api-viewer-demo.d.ts

@@ -14,3 +14,3 @@ import { LitElement, TemplateResult } from 'lit-element';
     private renderWarning;
-    static readonly styles: import("lit-element").CSSResult;
+    static get styles(): import("lit-element").CSSResult;
     protected render(): TemplateResult;
@@ -17,0 +17,0 @@ }

lib/api-viewer-docs.d.ts

 import { LitElement, PropertyValues } from 'lit-element';
 import { TemplateResult } from 'lit-html';
-import { PropertyInfo, SlotInfo, AttributeInfo, EventInfo, CSSPropertyInfo } from './lib/types.js';
+import { PropertyInfo, SlotInfo, AttributeInfo, EventInfo, CSSPartInfo, CSSPropertyInfo } from './lib/types.js';
 import './api-viewer-item.js';
@@ -14,4 +14,5 @@ import './api-viewer-panel.js';
     events: EventInfo[];
+    cssParts: CSSPartInfo[];
     cssProps: CSSPropertyInfo[];
-    static readonly styles: import("lit-element").CSSResult;
+    static get styles(): import("lit-element").CSSResult;
     protected render(): TemplateResult;
@@ -18,0 +19,0 @@ protected updated(props: PropertyValues): void;

lib/api-viewer-docs.js

@@ -57,31 +57,23 @@ import { __decorate } from "tslib";
 };
+const renderEntity = (items) => {
+    return html `
+    ${items.map((item) => html `
+        <api-viewer-item
+          .name="${item.name}"
+          .description="${item.description}"
+        ></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>
-        `)}
-    `);
+    return renderTab('Slots', slots.length === 0, renderEntity(slots));
 };
 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>
-        `)}
-    `);
+    return renderTab('Events', events.length === 0, renderEntity(events));
 };
+const renderCssParts = (parts) => {
+    return renderTab('CSS Shadow Parts', parts.length === 0, renderEntity(parts));
+};
 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>
-        `)}
-    `);
+    return renderTab('CSS Custom Properties', props.length === 0, renderEntity(props));
 };
@@ -96,2 +88,3 @@ let ApiViewerDocs = class ApiViewerDocs extends LitElement {
         this.events = [];
+        this.cssParts = [];
         this.cssProps = [];
@@ -119,3 +112,3 @@ }
     render() {
-        const { slots, props, attrs, events, cssProps } = this;
+        const { slots, props, attrs, events, cssParts, cssProps } = this;
         const attributes = processAttrs(attrs || [], props || []);
@@ -127,2 +120,3 @@ const properties = processProps(props || [], attrs || []);
         ${renderSlots(slots)}${renderEvents(events)}${renderCssProps(cssProps)}
+        ${renderCssParts(cssParts)}
       </api-viewer-tabs>
@@ -156,2 +150,5 @@ `;
     property({ attribute: false, hasChanged: () => true })
+], ApiViewerDocs.prototype, "cssParts", void 0);
+__decorate([
+    property({ attribute: false, hasChanged: () => true })
 ], ApiViewerDocs.prototype, "cssProps", void 0);
@@ -158,0 +155,0 @@ ApiViewerDocs = __decorate([

lib/api-viewer-header.d.ts

 import { LitElement } from 'lit-element';
 export declare class ApiViewerHeader extends LitElement {
     heading: string;
-    static readonly styles: import("lit-element").CSSResult;
+    static get styles(): import("lit-element").CSSResult;
     protected render(): import("lit-element").TemplateResult;
@@ -6,0 +6,0 @@ }

lib/api-viewer-item.d.ts

@@ -9,3 +9,3 @@ import { LitElement } from 'lit-element';
     attribute?: string | undefined;
-    static readonly styles: import("lit-element").CSSResult;
+    static get styles(): import("lit-element").CSSResult;
     protected renderType(type?: string): TemplateResult;
@@ -12,0 +12,0 @@ protected renderAttr(attr?: string): TemplateResult;

lib/api-viewer-marked.d.ts

@@ -6,3 +6,3 @@ import { LitElement } from 'lit-element';
     content?: string | undefined;
-    static readonly styles: import("lit-element").CSSResult;
+    static get styles(): import("lit-element").CSSResult;
     protected render(): TemplateResult;
@@ -9,0 +9,0 @@ }

lib/api-viewer-panel.d.ts

 import { LitElement } from 'lit-element';
 export declare class ApiViewerPanel extends LitElement {
-    static readonly styles: import("lit-element").CSSResult;
+    static get styles(): import("lit-element").CSSResult;
     protected render(): import("lit-element").TemplateResult;
@@ -5,0 +5,0 @@ protected firstUpdated(): void;

lib/api-viewer-select.d.ts

@@ -6,3 +6,3 @@ import { LitElement } from 'lit-element';
     select?: HTMLSelectElement;
-    static readonly styles: import("lit-element").CSSResult;
+    static get styles(): import("lit-element").CSSResult;
     protected render(): import("lit-element").TemplateResult;
@@ -9,0 +9,0 @@ private _onChange;

lib/api-viewer-tab.d.ts

@@ -7,3 +7,3 @@ import { LitElement, PropertyValues } from 'lit-element';
     private _mousedown;
-    static readonly styles: import("lit-element").CSSResult;
+    static get styles(): import("lit-element").CSSResult;
     protected render(): import("lit-element").TemplateResult;
@@ -10,0 +10,0 @@ protected firstUpdated(): void;

lib/api-viewer-tabs.d.ts

@@ -6,3 +6,3 @@ import { LitElement } from 'lit-element';
     private _boundSlotChange;
-    static readonly styles: import("lit-element").CSSResult;
+    static get styles(): import("lit-element").CSSResult;
     render(): import("lit-element").TemplateResult;
@@ -9,0 +9,0 @@ firstUpdated(): void;

lib/api-viewer-toggle.d.ts

 import { LitElement } from 'lit-element';
 export declare class ApiViewerToggle extends LitElement {
     section: string;
-    static readonly styles: import("lit-element").CSSResult;
+    static get styles(): import("lit-element").CSSResult;
     protected render(): import("lit-element").TemplateResult;
@@ -6,0 +6,0 @@ protected firstUpdated(): void;

lib/api-viewer.d.ts

@@ -8,3 +8,3 @@ import { LitElement, TemplateResult } from 'lit-element';
     private renderDocs;
-    static readonly styles: import("lit-element").CSSResult;
+    static get styles(): import("lit-element").CSSResult;
     protected render(): TemplateResult;
@@ -11,0 +11,0 @@ protected firstUpdated(): void;

lib/lib/constants.js

@@ -8,4 +8,5 @@ export const EMPTY_ELEMENT = {
     events: [],
+    cssParts: [],
     cssProperties: []
 };
 //# sourceMappingURL=constants.js.map

lib/lib/types.d.ts

@@ -10,2 +10,3 @@ export interface ElementSetInfo {
     cssProperties: CSSPropertyInfo[] | undefined;
+    cssParts: CSSPartInfo[] | undefined;
 }
@@ -42,2 +43,4 @@ export interface SlotInfo {
 }
+export interface CSSPartInfo extends Info {
+}
 export interface CSSPropertyInfo extends Info {
@@ -44,0 +47,0 @@ value?: string;

package.json

 {
   "name": "api-viewer-element",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "Web Components API viewer element",
@@ -28,4 +28,4 @@ "author": "Serhii Kulykov <[e-mail]>",
   "dependencies": {
-    "@types/dompurify": "^0.0.33",
-    "@types/marked": "^0.6.5",
+    "@types/dompurify": "^2.0.0",
+    "@types/marked": "^0.7.0",
     "@types/prismjs": "^1.16.0",
@@ -40,7 +40,7 @@ "dompurify": "^2.0.7",
   "devDependencies": {
-    "@open-wc/building-rollup": "^0.12.5",
-    "@typescript-eslint/eslint-plugin": "^2.6.0",
-    "@typescript-eslint/parser": "^2.6.0",
+    "@open-wc/building-rollup": "^0.12.10",
+    "@typescript-eslint/eslint-plugin": "^2.6.1",
+    "@typescript-eslint/parser": "^2.6.1",
     "@webcomponents/webcomponentsjs": "^2.3.0",
-    "es-dev-server": "^1.20.0",
+    "es-dev-server": "^1.23.0",
     "eslint": "^6.6.0",
@@ -59,3 +59,3 @@ "eslint-config-airbnb-base": "^14.0.0",
     "rimraf": "^3.0.0",
-    "rollup": "^1.26.0",
+    "rollup": "^1.26.3",
     "stylelint": "^11.1.1",
@@ -67,4 +67,4 @@ "stylelint-config-prettier": "^6.0.0",
     "tsc-watch": "^4.0.0",
-    "typescript": "^3.6.4",
-    "web-component-analyzer": "^0.1.18"
+    "typescript": "^3.7.2",
+    "web-component-analyzer": "^0.1.20"
   },
@@ -71,0 +71,0 @@ "husky": {

README.md

@@ -23,2 +23,3 @@ # <api-viewer>
   - CSS Custom Properties - styling API of the component
+  - CSS Shadow Parts - elements that can be styled using `::part`
 - Live playground
@@ -25,0 +26,0 @@ - Source - code snippet matching the rendered component

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

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

202601

increased by0.59%

Lines of code

2445

increased by0.12%

Number of lines in readme file

191

increased by0.53%

Dependency changes

• + Added@types/dompurify@2.4.0(transitive)

• + Added@types/marked@0.7.4(transitive)

• + Added@types/trusted-types@2.0.7(transitive)

• - Removed@types/dompurify@0.0.33(transitive)

• - Removed@types/marked@0.6.5(transitive)

• Updated@types/dompurify@^2.0.0

• Updated@types/marked@^0.7.0