@aaronshaf/totes 中文文档教程
totes
类似 React 的 Web 组件。 由 lit-html 提供支持。
支持:
- [x] setState
- [x] render
- [x] componentDidMount
- [x] shouldComponentUpdate
- [x] getSnapshotBeforeUpdate
- [x] component[Did]Unmount
- [x] componentDidUpdate
- [x] getDerivedStateFromProps
- [x] 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>
就是这样。 没有构建步骤。️ ????
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
- [x] Chrome (without polyfill)
- [x] Firefox
- [x] Safari
- [x] 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
totes
React-like web components. Powered by lit-html.
Supports:
- [x] setState
- [x] render
- [x] componentDidMount
- [x] shouldComponentUpdate
- [x] getSnapshotBeforeUpdate
- [x] component[Did]Unmount
- [x] componentDidUpdate
- [x] getDerivedStateFromProps
- [x] 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
- [x] Chrome (without polyfill)
- [x] Firefox
- [x] Safari
- [x] 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