@atomico/base-element - npm Package Compare versions

Comparing version 0.0.1 to 0.1.0

dist/atomico-base-element.umd.js

@@ -1,2 +0,2 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self)["@atomico/base-element"]=e()}(this,function(){"use strict";function t(t){return JSON.parse(t)}return class extends HTMLElement{constructor(){super(),this.props={},this.mounted=new Promise(t=>this.mount=t),this.unmounted=new Promise(t=>this.unmount=t)}connectedCallback(){this.mount()}disconnectedCallback(){this.unmount()}attributeChangedCallback(t,e,r){e!=r&&this.setProperty(t,r)}static get observedAttributes(){let t=this.attributes||{},e=[],r=t=>{Object.defineProperty(this.prototype,t,{set(e){this.setProperty(t,e)},get(){return this.props[t]}})};for(let s in t){let t=s.replace(/([A-Z])/g,"-$1").toLowerCase();e.push(t),name in this.prototype||r(s)}return e}setProperty(e,r){e=e.replace(/-(\w)/g,(t,e)=>e.toUpperCase());let s,{attributes:o}=this.constructor,n=o[e];try{if("string"==typeof r)switch(n){case Boolean:r=1==t(r||"true");break;case Number:r=Number(r);break;case Object:case Array:r=t(r)}}catch(t){s=!0}if(s||{}.toString.call(r)!=`[object ${n.name}]`)throw`the attribute [${e}] must be of the type [${n.name}]`;this.update({[e]:r})}update(t){}}});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self)["@atomico/base-element"]=t()}(this,function(){"use strict";function e(e){return JSON.parse(e)}return class extends HTMLElement{constructor(){super(),this.props={},this.mounted=new Promise(e=>this.mount=e),this.unmounted=new Promise(e=>this.unmount=e)}connectedCallback(){this.mount()}disconnectedCallback(){this.unmount()}attributeChangedCallback(e,t,s){t!=s&&this.setProperty(e,s)}static get observedAttributes(){let e=this.observables||{},t=[],s=e=>{Object.defineProperty(this.prototype,e,{set(t){this.setProperty(e,t)},get(){return this.props[e]}})};for(let r in e){let e=r.replace(/([A-Z])/g,"-$1").toLowerCase();t.push(e),name in this.prototype||s(r)}return t}setProperty(t,s){t=t.replace(/-(\w)/g,(e,t)=>t.toUpperCase());let r,{observables:o}=this.constructor,n=o[t];try{if("string"==typeof s)switch(n){case Boolean:s=1==e(s||"true");break;case Number:s=Number(s);break;case Object:case Array:s=e(s)}}catch(e){r=!0}if(r||{}.toString.call(s)!=`[object ${n.name}]`)throw`the attribute [${t}] must be of the type [${n.name}]`;this.update({[t]:s})}update(e){}}});
 //# sourceMappingURL=atomico-base-element.umd.js.map

index.d.ts

 type Values = Number | String | Object | Boolean | Array<any>;
 
-interface Attributes {
+interface Observables {
 	[index: string]: Values;
@@ -26,5 +26,5 @@ }
 		/**
-		 * defines the observable attributes and properties of the component
+		 * defines the observables as property and attribute of the component
 		 */
-		static attributes: Attributes;
+		static observables: Observables;
 		/**
@@ -31,0 +31,0 @@ * validate to `value`, and then deliver it to the` update({[name]:value})` method.

package.json

 {
 	"name": "@atomico/base-element",
-	"version": "0.0.1",
+	"version": "0.1.0",
 	"description": "",
@@ -5,0 +5,0 @@ "main": "dist/atomico-base-element.mjs",

README.md

@@ -23,6 +23,5 @@ # @atomico/base-element
 	/**
-	 * defines the observable attributes and properties of the component
-	 * @type {Object<string,(Number|String|Object|Boolean|Array)>}
+	 * defines the observables as property and attribute of the component
 	 */
-	static attributes: Properties;
+	static observables: Observables;
 	/**
@@ -45,9 +44,9 @@ * validate to `value`, and then deliver it to the` update({[name]:value})` method.
 
-## attributes
+## Observables
 
-the updates are dispatched to the `update` method, every time an ovserbable attribute mutates, these attributes are also defined as web-component properties.
+defines the observables as property and attribute of the component
 
 ```js
 class CustomElement extends Element {
-	static attributes = {
+	static Observables = {
 		fieldString: String, // [field-string]
@@ -54,0 +53,0 @@ fieldNumber: Number, // [field-number]

src/index.js

@@ -31,4 +31,4 @@ /**
 	static get observedAttributes() {
-		let attributes = this.attributes || {},
-			keys = [],
+		let observables = this.observables || {},
+			attributes = [],
 			/**
@@ -47,8 +47,8 @@ * @param {string} - add the setter and getter to the constructor prototype
 			};
-		for (let key in attributes) {
+		for (let key in observables) {
 			let attr = key.replace(/([A-Z])/g, "-$1").toLowerCase();
-			keys.push(attr);
+			attributes.push(attr);
 			if (!(name in this.prototype)) proxy(key);
 		}
-		return keys;
+		return attributes;
 	}
@@ -62,5 +62,5 @@ /**
 		name = name.replace(/-(\w)/g, (all, letter) => letter.toUpperCase());
-		let { attributes } = this.constructor,
+		let { observables } = this.constructor,
 			error,
-			type = attributes[name];
+			type = observables[name];
 		try {
@@ -67,0 +67,0 @@ if (typeof value == "string") {

test/component.js

 import Element from "../src/index";
 
 class CustomElement extends Element {
-	static attributes = {
+	static observables = {
 		fieldString: String,
@@ -6,0 +6,0 @@ fieldNumber: Number,

No alert changes

Worsened metrics

Total package byte prevSize

147070

decreased by-0.05%

Number of lines in readme file

144

decreased by-0.69%

No dependency changes