1.0.4 • Published 6 years ago
@aaronshaf/totes v1.0.4
totes
React-like web components. Powered by lit-html.
Supports:
- setState
- render
- componentDidMount
- shouldComponentUpdate
- getSnapshotBeforeUpdate
- componentDidUnmount
- componentDidUpdate
- getDerivedStateFromProps
- this.props.children
Quick start (copy and paste)
<script type="module">
import { html, Component } from "https://unpkg.com/@aaronshaf/totes@1/index.js";
class HelloWorld extends Component {
render() {
return html`<div>Hello, ${this.props.name}</div>`;
}
}
customElements.define("hello-world", HelloWorld);
</script>
<hello-world name="Aaron"></hello-world>
That's it. No build steps.️ 🎵
Example: setState and event handlers
export default class BasicExample extends Component {
static get observedAttributes() {
return ["message"];
}
constructor() {
super();
this.state = {
name: "Aaron",
toggled: false
};
}
handleInput(event) {
this.setState({ name: event.target.value || "Aaron" });
}
handleClick() {
this.setState({ toggled: this.state.toggled === false });
}
render() {
return html`<div>
<div>
<input
type="text"
value="Aaron"
@input=${this.handleInput}
/>
</div>
<p>${this.props.message} ${this.state.name}</p>
<button @click=${this.handleClick}>
${this.state.toggled ? "On" : "Off"}
</button>
</div>`;
}
}
customElements.define("basic-example", BasicExample);
<basic-example message="Hello"></basic-example>
Install from npm
yarn add @aaronshaf/totes --prod
Try it on Glitch
Supported browsers
- Chrome (without polyfill)
- Firefox
- Safari
- Edge
Custom elements / Shadow DOM polyfill
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.1.3/webcomponents-loader.js"></script>
Dev
git clone https://github.com/aaronshaf/totes.git
yarn global add serve
serve
See also
- html-router - drop-in router
- dem - download ECMAScript modules
1.0.4
6 years ago
1.0.3
6 years ago
1.0.2
6 years ago
1.0.1
6 years ago
1.0.0
6 years ago
0.0.21
6 years ago
0.0.20
6 years ago
0.0.19
6 years ago
0.0.17
6 years ago
0.0.16
6 years ago
0.0.15
6 years ago
0.0.14
6 years ago
0.0.13
6 years ago
0.0.12
6 years ago
0.0.11
6 years ago
0.0.10
6 years ago
0.0.9
6 years ago
0.0.8
6 years ago
0.0.7
6 years ago
0.0.6
6 years ago
0.0.5
6 years ago
0.0.4
6 years ago
0.0.2
6 years ago
0.0.1
6 years ago
0.0.0
6 years ago