@attr has discrepencies with `attributeChangedCallback`

Đang mở
  • Có gì không ổn?
#117 4 bình luận 1 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Đánh giá

Độ khó
5/5
Thời gian dự kiến
Hơn một tuần
Mức phù hợp với người mới
25/100
Loại issue
Tính năng
Độ rõ ràng
Cần làm rõ
Mức độ hoạt động
Đình trệ
Công nghệ
typescript
Lĩnh vực
frontend, web-dev

Hướng nghiên cứu

Bắt đầu bằng cách đối chiếu hành vi của @attr với hợp đồng attributeChangedCallback gốc được mô tả trong issue. Xem xét từng giải pháp được đề xuất và xác định tên callback, các giá trị cũng như tần suất gọi mong muốn trước khi chọn một cách tiếp cận. Được xem là hoàn tất khi hành vi đã được thống nhất và cách tiếp cận được chọn được triển khai mà không còn sự không khớp về abstraction hiện tại.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

@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
Ngôn ngữ chính
TypeScript
Star
1.4k
Fork
61
Merge trung bình
1 ngày 15 giờ
Pull request đã merge (30 ngày)
8

Chuẩn bị môi trường

Mở trong Codespaces

Khởi chạy dev container của dự án ngay trên trình duyệt, bằng tài khoản GitHub của bạn.

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của github/catalyst

Tất cả issue của github/catalyst

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.