@aaronshaf/totes 中文文档教程

发布于 6年前 浏览 24 项目主页 更新于 3年前

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

totes-example

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

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

totes-example

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

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文