https://github.com/uppercod/base-element
https://github.com/uppercod/base-element
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/uppercod/base-element
- Owner: UpperCod
- Created: 2019-04-24T05:49:52.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2019-11-19T17:15:38.000Z (over 6 years ago)
- Last Synced: 2024-12-23T22:26:59.687Z (over 1 year ago)
- Language: JavaScript
- Size: 98.6 KB
- Stars: 1
- Watchers: 1
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# @atomico/base-element
[](http://npmjs.com/@atomico/base-element)
[](https://bundlephobia.com/result?p=@atomico/base-element)
It provides a minimum utility interface for the creation of web-components.
```ts
class BaseElement extends HTMLElement {
/**
* captures the properties defined in `static attributes`;
*/
props: Properties;
/**
* resolves once the component has been mounted to the document
*/
mounted: Promise;
/**
* resolves once the component has been unmounted from the document.
*/
unmounted: Promise;
/**
* defines the observables as properties and attributes of the component
*/
static observables: Observables;
/**
* validates the `value` which is then delivered to the` update({[name]:value})` method.
*/
setProperty(name: string, value: Values): void;
/**
* dispatches every time `setProperty` is successfully executed
*/
update(props: Properties): void;
}
```
This class is used by [@atomico/element](https://github.com/atomicojs/core) to use [@atomico/core](https://github.com/atomicojs/element) as web-component.
## Objective
`base-element`, allows to create HTMLElements under other libraries, similar to what it does [Skatejs](https://github.com/skatejs/skatejs), but less code.
## Observables
defines the observables as property and attribute of the component
```js
class CustomElement extends Element {
static Observables = {
fieldString: String, // [field-string]
fieldNumber: Number, // [field-number]
fieldBoolean: Boolean, // [field-boolean]
fieldObject: Object, // [field-object]
fieldArray: Array // [field-array],
fieldFunction:Function // [field-function]
};
}
```
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
import { render, html } from "lit-html";
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;
render(this.render(this.props), this.shadowRoot);
}
}
```
## Example with preact
```jsx
import { render, h } from "preact";
import Element from "@atomico/base-element";
export default class extends Element {
contructor() {
super();
this.attachShadow({ mode: "open" });
this.props = {};
this.render = this.render.bind(this);
this.unmounted.then(() => render("", this.shadowRoot));
this.update();
}
async update(props) {
this.props = { ...this.props, ...props };
if (this.prevent) return;
this.prevent = true;
await this.mounted;
this.prevent = false;
render(h(this.render, this.props), this.shadowRoot);
}
}
```
## 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;
}
}
}
```