@atomico/base-element - npm Package Compare versions

Comparing version 0.0.0 to 0.0.1

package.json

 {
 	"name": "@atomico/base-element",
-	"version": "0.0.0",
+	"version": "0.0.1",
 	"description": "",
-	"source": "src/index.js",
+	"main": "dist/atomico-base-element.mjs",
 	"module": "dist/atomico-base-element.mjs",
 	"unpkg": "dist/atomico-base-element.umd.js",
+	"source": "src/index.js",
 	"author": "Matias Trujillo",
+	"license": "ISC",
 	"repository": {
@@ -10,0 +12,0 @@ "type": "git",

README.md

@@ -24,2 +24,3 @@ # @atomico/base-element
 	 * defines the observable attributes and properties of the component
+	 * @type {Object<string,(Number|String|Object|Boolean|Array)>}
 	 */
@@ -40,8 +41,34 @@ static attributes: Properties;
 
-## Motivacion
+## Objective
 
 `base-element`, allows to create HTMLElements under other libraries, similar to what it does [Skatejs](https://github.com/skatejs/skatejs), but less code.
 
-## Example of implementation of lit-html
+## attributes
 
+the updates are dispatched to the `update` method, every time an ovserbable attribute mutates, these attributes are also defined as web-component properties.
+
+```js
+class CustomElement extends Element {
+	static attributes = {
+		fieldString: String, // [field-string]
+		fieldNumber: Number, // [field-number]
+		fieldBoolean: Boolean, // [field-boolean]
+		fieldObject: Object, // [field-object]
+		fieldArray: Array // [field-array]
+	};
+}
+```
+
+the attributes force the type of the variable, so if you define an attribute as `Object`, it will apply
+`JSON.parse` to a string type value, to read its type.
+
+```js
+// set property, remember that to apply this WC, you must already be registered
+myCustomElement.fieldArray = [];
+// set attribute, more benefit using setAttribute, since it allows a deferred loading of the WC
+myCustomElement.setAttribute("field-array", []);
+```
+
+## Example with lit-html
+
 ```jsx
@@ -56,2 +83,3 @@ import { render, html } from "lit-html";
 		this.props = {};
+		this.update();
 	}
@@ -69,3 +97,3 @@ async update(props) {
 
-## Example of preact implementation
+## Example with preact
 
@@ -83,2 +111,3 @@ ```jsx
 		this.unmounted.then(() => render("", this.shadowRoot));
+		this.update();
 	}
@@ -95,1 +124,27 @@ async update(props) {
 ```
+
+## Example with innerHTML
+
+```js
+import Element from "@atomico/base-element";
+
+export default class extends Element {
+	contructor() {
+		super();
+		this.attachShadow({ mode: "open" });
+		this.props = {};
+		this.update();
+	}
+	async update(props) {
+		this.props = { ...this.props, ...props };
+		if (this.prevent) return;
+		this.prevent = true;
+		await this.mounted;
+		this.prevent = false;
+		let nextHTML = this.render(this.props);
+		if (nextHTML !== this.shadowRoot.innerHTML) {
+			this.shadowRoot.innerHTML = nextHTML;
+		}
+	}
+}
+```

No alert changes

Improved metrics

Total package byte prevSize

147143

increased by6.96%

Number of package files

12

increased by50%

Lines of code

284

increased by4.03%

Number of lines in readme file

145

increased by61.11%

No dependency changes