api-viewer-element - npm Package Compare versions

Comparing version 0.3.8 to 0.3.9

CHANGELOG.md

@@ -19,2 +19,9 @@ # Change Log
 
+## [0.3.9] - 2020-02-04
+
+### Fixed
+
+- Demo: fix handling dash-case attributes in knobs
+- Demo: fix handling attributes in code snippet
+
 ## [0.3.8] - 2020-02-03
@@ -21,0 +28,0 @@

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

@@ -23,2 +23,3 @@ import { LitElement, PropertyValues } from 'lit-element';
     protected updated(props: PropertyValues): void;
+    private _getProp;
     private _onLogClear;
@@ -25,0 +26,0 @@ private _onCopyClick;

lib/api-viewer-demo-layout.js

@@ -165,2 +165,5 @@ import { __decorate } from "tslib";
     }
+    _getProp(name) {
+        return this.props.find(p => p.attribute === name || p.name === name);
+    }
     _onLogClear() {
@@ -224,4 +227,5 @@ this.eventLog = [];
         }
+        const { attribute } = this._getProp(name);
         this.knobs = Object.assign(this.knobs, {
-            [name]: { type, value }
+            [name]: { type, value, attribute }
         });
@@ -248,4 +252,4 @@ }
                 .filter(prop => component[prop.name] !== getDefault(prop))
-                .forEach(({ name, type }) => {
-                this._syncKnob(component, name, type);
+                .forEach(prop => {
+                this._syncKnob(component, prop);
             });
@@ -274,6 +278,5 @@ }
             if (event.endsWith(s)) {
-                const name = event.replace(s, '');
-                const prop = this.props.find(p => p.attribute === name || p.name === name);
+                const prop = this._getProp(event.replace(s, ''));
                 if (prop) {
-                    this._syncKnob(component, prop.name, prop.type);
+                    this._syncKnob(component, prop);
                 }
@@ -284,6 +287,9 @@ }
     }
-    _syncKnob(component, name, type) {
+    _syncKnob(component, changed) {
+        const { name, type, attribute } = changed;
         const value = component[name];
         // update knobs to avoid duplicate event
-        this.knobs = Object.assign(this.knobs, { [name]: { type, value } });
+        this.knobs = Object.assign(this.knobs, {
+            [name]: { type, value, attribute }
+        });
         this.props = this.props.map(prop => {
@@ -290,0 +296,0 @@ return prop.name === name

lib/api-viewer-demo-snippet.js

@@ -39,8 +39,9 @@ import { __decorate } from "tslib";
         const knob = values[key];
+        const attr = knob.attribute || key;
         switch (normalizeType(knob.type)) {
             case 'boolean':
-                markup += knob.value ? ` ${key}` : '';
+                markup += knob.value ? ` ${attr}` : '';
                 break;
             default:
-                markup += knob.value != null ? ` ${key}="${knob.value}"` : '';
+                markup += knob.value != null ? ` ${attr}="${knob.value}"` : '';
                 break;
@@ -47,0 +48,0 @@ }

lib/lib/renderer.js

@@ -6,5 +6,5 @@ import { directive, NodePart } from 'lit-html';
     Object.keys(knobs).forEach((key) => {
-        const { type, value } = knobs[key];
+        const { type, attribute, value } = knobs[key];
         if (normalizeType(type) === 'boolean') {
-            component.toggleAttribute(key, Boolean(value));
+            component.toggleAttribute(attribute || key, Boolean(value));
         }
@@ -11,0 +11,0 @@ else {

lib/lib/types.d.ts

@@ -27,2 +27,3 @@ export interface ElementSetInfo {
     type: string;
+    attribute: string | undefined;
     value: string | number | boolean | null;
@@ -29,0 +30,0 @@ }

package.json

 {
   "name": "api-viewer-element",
-  "version": "0.3.8",
+  "version": "0.3.9",
   "description": "Web Components API viewer element",
@@ -5,0 +5,0 @@ "author": "Serhii Kulykov <[e-mail]>",

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

195678

increased by0.46%

Lines of code

2150

increased by0.42%

No dependency changes