@attr has discrepencies with `attributeChangedCallback`

未關閉
  • 哪裡不對？
#117 4 則留言 1 個 reaction 已指派 0 人 在 GitHub 檢視

還沒有人認領這個 Issue。

評估

難度
5/5
預估耗時
一週以上
新手友好度
25/100
Issue 類型
功能
描述清晰度
需要釐清
活躍度
停滯
技術堆疊
typescript
領域
frontend, web-dev

研究方向

先根據 issue 中描述的原生 attributeChangedCallback 契約，追蹤 @attr 的行為。在選擇方案之前，檢視每個提議的解決方案，並確定所需的 callback 名稱、值和呼叫頻率。行為達成共識，且選定的方案在沒有目前抽象不匹配的情況下完成實作，即視為完成。

由索引模型根據 Issue 內容生成。

描述

@attr

The attributeChangedCallback function is called whenever an observed attribute is set, added or removed. The attributeChangedCallback is called with the raw values of the attribute name, old value and new value.

This can be surprising when using the @attr decorator which gives conveniences over the attributes by allowing for camel-cased names eliding their data- prefix, and allowing types other than string. It can also be surprising to see attributeChangedCallback being called with null when you type an @attr as string.

For example:

@controller 
class FooBarElement extends HTMLElement {

  @attr foo = true

  attributeChangedCallback(name, oldValue, newValue) {
    console.log(name, oldValue, newValue)
  }

}

When this element first connects, attributeChangedCallback('data-foo', null, '') will fire. attributeChangedCallback will never fire with 'foo' as the name, because that is a Catalyst concept and not a WC concept. The same is true of the boolean type; attributeChangedCallback will never fire with booleans for values. This means developers have to suddenly work around all of the conveniences @attr offers them:

@controller 
class FooBarElement extends HTMLElement {

  @attr foo = true

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'data-foo') { // Smell: `data-foo` is the name of the attribute but we call if `foo` everywhere else in the file
      if (newValue === null) { // Smell: this should really be `if (oldValue === false)` to align with our expected types
        doStuff();
      }
    }
  }

}
Possible Solutions
  1. Document this gotcha and just let developers deal with it.
  • This burdens developers with the extra concepts they have to keep in their brain
  • It demonstrates that this is a leaky abstraction
  • The code they eventually have to write still smells
  1. Add extra code to call attributeChangedCallback with the mapped name, oldValue, newValue
  • Potentially harmful: attributeChangedCallback has a fixed signature where it is only called with string|null and we're abusing that contract.
  • This will cause the attributeChangedCallback to fire far more often, effectively double for each change to an attr mapped value. Use cases which do not care about the argument values will see more - effectively redundant - calls.
  1. Add extra code to call a new function (maybe attrChangedCallback) with the mapped name, oldValue, newValue.
  • This means further divergence from web component spec.
  • More to document, more stuff that Catalyst is responsible for.
  1. Add a function which can be given the 3 arguments and map it back to prop names (e.g. const [realName, realOldValue, realNewValue] = this.attributeToAttr(name, oldValue, newValue))
    • I hate it
    • Still burdens developers with extra concepts
    • Still demonstrates the leaky abstraction
    • Still requires more documentation, more stuff that Catalyst is responsible for.
  2. Add events which are automatically dispatched when attributes changed, which can be listened for. changing HelloWorldElement's @attr name = '' value could emit hello-world-name-changed.
    • It's still idiomatic to web components... sort of
    • Elements become very noisy
    • Required elements binding to their own events, so they're not in control of their own state.
    • Still requires more documentation
主要語言
TypeScript
星號
1.4k
分支
61
平均合併
1 天 15 小時
30 天內合併 PR
8

環境準備

在 Codespaces 中開啟

在瀏覽器裡用你自己的 GitHub 帳號啟動這個專案的開發容器。

  • 沒有 Dockerfile 或 Docker Compose 檔案
  • 沒有 Pull Request 範本
  • 閱讀貢獻指南

從這裡開始

  1. 先讀完整個 Issue，再讀專案的貢獻指南。
  2. 在 Issue 下留言說明你要接手 —— 這能避免兩個人做同樣的事。
  3. Fork 儲存庫，在一個分支上完成修改。
  4. 送出 Pull Request，並在描述裡引用這個 Issue 編號。

github/catalyst 的其他 Issue

查看 github/catalyst 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 寄到你的電子郵件信箱

精選適合新手參與的 GitHub issue 摘要。