0.7.12 • Published 4 years ago
@iosio/xact v0.7.12
@iosio/xact
modified and reduced version of preact without class components
Great if you just need a solid vdom for rendering JSX inside web components without the need for p/react class components, since lifecycles methods can be handled by the custom element.
Installation
npm install @iosio/xact --save
Quick example
Use @iosio/x or @iosio/x-preact for all the boilerplate set up
import {h, render, Fragment} from "../../src";
customElements.define('my-sweet-component', class extends HTMLElement {
constructor() {
super();
this.root = this.attachShadow({mode: 'open'});
}
static get observedAttributes() {
return ['count']
}
update = (props) => {
render(this.render(props), this.root);
};
render = ({count}) => {
return (
<Fragment>
<h1>Hello </h1>
<h1>I update when my count attribute changes</h1>
<h1>{count}</h1>
</Fragment>
)
};
connectedCallback() {
this.update({count: this.getAttribute('count')})
}
attributeChangedCallback(attr, oldValue, newValue) {
if (oldValue === newValue) return;
this.update({[attr]: newValue})
}
disconnectedCallback() {
if (!this.isConnected) {
render(null, this.root);
}
}
});
const component = document.createElement('my-sweet-component');
document.body.appendChild(component);
let count = 0;
setInterval(() => {
component.setAttribute('count', count++);
}, 1000);
License
0.7.12
4 years ago
0.7.9
4 years ago
0.7.8
4 years ago
0.7.0
4 years ago
0.6.6
4 years ago
0.6.4
4 years ago
0.6.1
4 years ago
0.6.0
4 years ago
0.5.81
4 years ago
0.5.75
4 years ago
0.5.74
4 years ago
0.5.73
4 years ago
0.5.71
4 years ago
0.5.70
4 years ago
0.5.69
4 years ago
0.5.68
4 years ago
0.5.63
4 years ago
0.5.62
4 years ago
0.5.59
5 years ago
0.5.52
5 years ago
0.5.47
5 years ago
0.5.43
5 years ago
0.5.38
5 years ago
0.5.37
5 years ago
0.5.28
5 years ago
0.5.22
5 years ago
0.5.9
5 years ago
0.5.8
5 years ago
0.5.7
5 years ago
0.0.6
5 years ago
0.0.5
5 years ago
0.0.4
5 years ago
0.0.3
5 years ago
0.0.2
5 years ago