yone v0.1.32

Yone

使用Yone可帮助您构建一个 Web Component 组件库、渲染层使用了 Fre (类似于React)
它非常小，如果您并没有添加任何组件，那么使用 rollup 打包后整个组件库后仅有7kb。

Yone 永恩是《英雄联盟》（League of Legends）中的角色。

Use

import { define, Element, html } from 'yone'

class Component extends Element {
  render(){
    return html`
    <div>Hello</div>
    `
  }
}

define('my-app', Component)

生命周期

• onCreate 组件创建时触发

• onMount 组件挂载到文档时触发

• onUnMount 组件被移除文档时触发

• onAdopt 组件被移动时触发

• onProps 组件属性变更时触发

扩展方法

声明 props 需要使用静态属性 props 声明类型，类型会在赋值时进行转换，类型仅支持基础类型 String、Number、Boolean

import { define, Element, html } from 'yone'

class Component extends Element {

  static props = { disabled: Boolean }

  onCreate() {
    this.props = { disabled: false } //props 默认值
    this.state = { id: 1000 } //使用state
    this.ref = { div: null }  //使用ref
  }

  onClick(){
    this.setProps({ disabled: true })
    this.setState({ id: this.state.id + 1 })
  }

  render() {
    return html`
    <style>
      :host{
        display: block;
      }
    </style>
    <div onClick=${() => this.onClick()}}>${this.state.id}、${String(this.props.disabled)}</div>
    `
  }
}

define('my-app', Component)

外部使用

<my-app id="app"></my-app>

document.querySelector('#app').disabled //false

TypeScript 支持

如果在 TypeScript 中使用，强烈建议使用 tsx 文件后缀
并且在 tsconfig.json 中添加对 tsx 的编译支持

{
  "jsx":"react",
  "jsxFactory":"h",
  "jsxFragmentFactory":"Fragment"
}

import { define, Element, h, Fragment } from 'yone'

type State = {
  sex: number
}

class Component extends Element {
  state: State
  onCreate(){
    this.state = { sex: 0 }
  }
  render(){
    return (
      <>
        <style jsx>{`
          :host{
            background: red;
            display: block;
          }
        `}</style>
        <div>1</div>
        <div>2</div>
        <div>{ this.state.sex }</div>
      </>
    )
  }
}

define('my-app', Component)

在 Visual Studio Code 建议您使用 Vscode jsx style language server 扩展，然后在style标签添加 jsx 属性来获取CSS高亮以及CSS补全
在 style 中，您可以将变量和 CSS 值一起使用，例如：

<style jsx>{`
  :host{
  background: red;
  display: ${this.state.display};
  }
`}</style>

额外提醒

如果您不使用 tsx 并且使用的是 Visual Studio Code 编辑器，推荐您使用 lit-html 插件，这样你会获得模板的语法高亮。