panel - npm Package Compare versions

Comparing version 1.7.1 to 2.0.0

build/component-utils/controlled-component.js

@@ -91,3 +91,3 @@ 'use strict';
             $controller: this.controller,
-            $attrs: this.attrs
+            $attr: this.attr.bind(this)
           });
@@ -94,0 +94,0 @@ } catch (e) {

build/component.js

@@ -274,4 +274,4 @@ 'use strict';
 
-    _this.attrs = {};
-    _this._syncAttrs(); // constructor sync ensures default properties are present on this.attrs
+    _this._attrs = {};
+    _this._syncAttrs(); // constructor sync ensures default properties are present on this._attrs
 
@@ -399,3 +399,3 @@ _this._config = Object.assign({}, {
      * Attributes schema that defines the component's html attributes and their types
-     * Panel auto parses attribute changes into this.attrs object and $attrs template helper
+     * Panel auto parses attribute changes into attrs() object and $attr template helper
      *
@@ -442,3 +442,3 @@ * @typedef {object} AttrSchema
       try {
-        return this.tagName + '#' + this.panelID;
+        return (this.tagName || '').toLowerCase() + '#' + this.panelID;
       } catch (e) {
@@ -457,3 +457,3 @@ return 'UNKNOWN COMPONENT';
             $helpers: this.helpers,
-            $attrs: this.attrs
+            $attr: this.attr.bind(this)
           }));
@@ -534,3 +534,3 @@ } catch (e) {
     /**
-     * Validates attrsSchema and syncs element attributes defined in attrsSchema with this.attrs
+     * Validates attrsSchema and syncs element attributes defined in attrsSchema
      */
@@ -586,2 +586,4 @@
           this._updateAttr(attr);
+          // updated at end so we don't console.warn on initial sync
+          attrSchemaObj.deprecatedMsg = attrSchema.deprecatedMsg;
         }
@@ -603,7 +605,7 @@ } catch (err) {
 
-      return this.attrs;
+      return this._attrs;
     }
 
     /**
-     * Parses html attribute using type information from attrsSchema and updates this.attrs
+     * Parses html attribute using type information from attrsSchema and updates this._attrs
      * @param {string} attr - attribute name
@@ -640,6 +642,36 @@ */
 
-        this.attrs[attr] = attrValue;
+        this._attrs[attr] = attrValue;
+
+        if (attrSchema.deprecatedMsg) {
+          console.warn(this + ': attr \'' + attr + '\' is deprecated. ' + attrSchema.deprecatedMsg);
+        }
       }
     }
 
+    /**
+     * gets the parsed value of an attribute
+     * @param {string} attr - attribute name
+     */
+
+  }, {
+    key: 'attr',
+    value: function attr(_attr) {
+      if (_attr in this._attrs) {
+        return this._attrs[_attr];
+      } else {
+        throw new TypeError(this + ': attr \'' + _attr + '\' is not defined in attrsSchema');
+      }
+    }
+
+    /**
+     * Returns the parsed attrs as a key-value POJO
+     * @returns {{[attr: string]: any}}
+     */
+
+  }, {
+    key: 'attrs',
+    value: function attrs() {
+      return this._attrs;
+    }
+
     // update helpers
@@ -646,0 +678,0 @@

lib/component-utils/controlled-component.js

@@ -57,3 +57,3 @@ import Component from '../component';
           $controller: this.controller,
-          $attrs: this.attrs,
+          $attr: this.attr.bind(this),
         });
@@ -60,0 +60,0 @@ } catch (e) {

lib/component.js

@@ -205,4 +205,4 @@ import cuid from 'cuid';
 
-    this.attrs = {};
-    this._syncAttrs(); // constructor sync ensures default properties are present on this.attrs
+    this._attrs = {};
+    this._syncAttrs(); // constructor sync ensures default properties are present on this._attrs
 
@@ -330,3 +330,3 @@ this._config = Object.assign({}, {
    * Attributes schema that defines the component's html attributes and their types
-   * Panel auto parses attribute changes into this.attrs object and $attrs template helper
+   * Panel auto parses attribute changes into attrs() object and $attr template helper
    *
@@ -373,3 +373,3 @@ * @typedef {object} AttrSchema
     try {
-      return `${this.tagName}#${this.panelID}`;
+      return `${(this.tagName || ``).toLowerCase()}#${this.panelID}`;
     } catch (e) {
@@ -387,3 +387,3 @@ return `UNKNOWN COMPONENT`;
           $helpers: this.helpers,
-          $attrs: this.attrs,
+          $attr: this.attr.bind(this),
         }));
@@ -434,3 +434,3 @@ } catch (e) {
   /**
-   * Validates attrsSchema and syncs element attributes defined in attrsSchema with this.attrs
+   * Validates attrsSchema and syncs element attributes defined in attrsSchema
    */
@@ -477,9 +477,11 @@ _syncAttrs() {
       this._updateAttr(attr);
+      // updated at end so we don't console.warn on initial sync
+      attrSchemaObj.deprecatedMsg = attrSchema.deprecatedMsg;
     }
 
-    return this.attrs;
+    return this._attrs;
   }
 
   /**
-   * Parses html attribute using type information from attrsSchema and updates this.attrs
+   * Parses html attribute using type information from attrsSchema and updates this._attrs
    * @param {string} attr - attribute name
@@ -514,6 +516,30 @@ */
 
-      this.attrs[attr] = attrValue;
+      this._attrs[attr] = attrValue;
+
+      if (attrSchema.deprecatedMsg) {
+        console.warn(`${this}: attr '${attr}' is deprecated. ${attrSchema.deprecatedMsg}`);
+      }
     }
   }
 
+  /**
+   * gets the parsed value of an attribute
+   * @param {string} attr - attribute name
+   */
+  attr(attr) {
+    if (attr in this._attrs) {
+      return this._attrs[attr];
+    } else {
+      throw new TypeError(`${this}: attr '${attr}' is not defined in attrsSchema`);
+    }
+  }
+
+  /**
+   * Returns the parsed attrs as a key-value POJO
+   * @returns {{[attr: string]: any}}
+   */
+  attrs() {
+    return this._attrs;
+  }
+
   // update helpers
@@ -520,0 +546,0 @@

lib/index.d.ts

@@ -125,7 +125,20 @@ // Type definitions for panel
   enum?: Array<string>;
+
+  /** When setAttribute is invoked, console.warn that attr is deprecated e.g 'use xyz instead' */
+  deprecatedMsg?: string;
+
+  /**
+   * For a type: `json` attr, the typescript interface that corresponds to it.
+   * Can be used to auto-generate Attrs interface
+   */
+  interface?: string;
 }
 
+export interface AnyAttrs {
+  [attr: string]: any;
+}
+
 type ConfigOptions<State, AppState> = Component.ConfigOptions<State, AppState>;
 
-export class Component<State, AppState = {}, App = unknown> extends WebComponent {
+export class Component<State, AppState = {}, App = unknown, Attrs = AnyAttrs> extends WebComponent {
   /** The first Panel Component ancestor in the DOM tree; null if this component is the root */
@@ -140,5 +153,2 @@ $panelParent: Component<unknown>;
 
-  /** Attributes parsed from component's html attributes using attrsSchema */
-  attrs: {[attr: string]: any};
-
   /** A reference to the top-level component */
@@ -168,2 +178,8 @@ app: App;
 
+  /** Gets the attribute value. Throws an error if attr not defined in attrsSchema */
+  attr<A extends keyof Attrs>(attr: A): Attrs[A];
+
+  /** Attributes parsed from component's html attributes using attrsSchema */
+  attrs(): Attrs;
+
   /**
@@ -170,0 +186,0 @@ * For use inside view templates, to create a child Panel component nested under this

package.json

 {
   "name": "panel",
-  "version": "1.7.1",
+  "version": "2.0.0",
   "description": "Web Components with Virtual DOM: lightweight composable web apps",
@@ -5,0 +5,0 @@ "main": "build/index.js",

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

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

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

132968

increased by6.59%

Number of package files

30

increased by3.45%

Lines of code

2814

increased by2.25%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes