[gem] Use decorators instead lifetime method

[mantou132]

Old:

@customElement('my-element')
class MyElement extends GemElement {
  #data: number;
  willMount = () => {
    this.memo(
      () => this.#data = ...,
      () => [this.attr]
    )
    this.effect(
      () => { ... },
      () => [this.attr]
    )
  }
}

New:

easy to extends

@willMount @mounted @shouldUpdate @template @updated @unmounted @effect @memo

@customElement('my-element')
class MyElement extends GemElement {
  @memo(() => [this.attr])
  get #data() {
    // slow exec
    return this.attr * 10000;
  }

  @effect((that) => [that.attr])
  async #effect() {
    await fetch('./')
    this.setState({})
  }
}

https://github.com/tc39/proposal-decorators?tab=readme-ov-file#will-decorators-let-you-access-private-fields-and-methods

tc39/proposal-decorators#509
microsoft/TypeScript#59482

test fail and example error: evanw/esbuild#3866

[mantou132]

• 要确保 @willMounted @mounted 执行在其他 memo effect 之前/之后 // 没必要
• 装饰器回调要保持编写顺序（方法先于字段）？ // 没必要

[mantou132]

应该同时保存生命周期和装饰器？，装饰器多了一行：

如果通过编译，可以按命名约定省区装饰器：#118

@customElement('dy-chart')
class DyChartElement extends GemElement { 
  @effect([] => [])
  #fetch = () => {}

  @template()
  #content = () => {
    return html`content`
  }

  @fallback()
  #errorBoundary = () => {
    return html``
  }
}

@customElement('dy-chart')
class DyChartElement extends GemElement { 
  @effect([] => [])
  #fetch = () => {}

  render= () => {
    return html`content`
  }

  fallback = () => {
    return html``
  }
}

function DyChart() {
  useEffect(() => {
  }, []) 

  if (xxx) {
    return <></>
  }

  return <>content</>
}