github / github/catalyst

Attrs initialization without `@attr` decorator

オープン
#207 コメント 4 件 リアクション 0 件 担当者 0 名 GitHub で見る
@attr
主要言語
TypeScript
スター
1.4k
フォーク
59
平均マージ
22時間 12分
マージ済み PR(30日)
5

説明

Hi there 😄

After upgrading from v1.1.4 to v1.3.2, I noticed that my attributes were no longer shadowed by `initializeAttrs()`. I started digging and stumbled upon this piece of logic introduced in #191:

https://github.com/github/catalyst/blob/a8fb3ba59a4ac258d0fe64a50ecd3b6997f5f016/src/attr.ts#L39

It prevents `initializeAttrs()` from doing anything the second time around, thus skipping the manual initialization of attributes. Also, it seems like this change was one of the main things addressed by the above-mentioned PR.

So, what would be the correct way now to initialize the attributes without the `@attr` decorator?

Thanks!

---

**Example**

```html

class InfoMessage extends HTMLElement {
open = true

connectedCallback() {
initializeAttrs(this, ['open'])
}
}

controller(InfoMessage)

```

1. `controller(InfoMessage)` wraps original `connectedCallback()` and calls:

https://github.com/github/catalyst/blob/a8fb3ba59a4ac258d0fe64a50ecd3b6997f5f016/src/core.ts#L14

2. `InfoMessage` is marked as `initialized` (`attrs.ts`):

https://github.com/github/catalyst/blob/a8fb3ba59a4ac258d0fe64a50ecd3b6997f5f016/src/attr.ts#L40

3. The original `connectedCallback()` is executed, but `initializeAttrs()` would hit that early-return condition.
4. `this.open` is stuck in its default state (`true`) 😔

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

Start by reading src/attr.ts around the initialized guard and src/core.ts where controller wraps connectedCallback(). Reproduce the InfoMessage example with initializeAttrs(this, ['open']) and data-open="false". Done means manual initialization without @attr applies the attribute value instead of leaving open at true.

索引モデルが issue の本文から書いたものです。

評価

技術スタック
typescript
領域
frontend
issue の種類
バグ
難易度
3/5
見積もり時間
1〜2日
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
35/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。