styled-components を v6 にする

[takurinton]

現状、型が export されてなかったりして上げられないので一旦待機。

関連

• https://github.com/voyagegroup/ingred-ui/pull/1307
• https://github.com/voyagegroup/ingred-ui/pull/1347

[takurinton]

styled-components v6 になって ThemedStyledProps が export されなくなった。 https://github.com/voyagegroup/ingred-ui/blob/master/src/utils/spacer.ts#L1

これは ExecutionContext という型が export されてるので、それを使って再現可能。 ThemedStyledProps は型引数を2つ（マップしたい型と theme）受け取っていたが、ExecutionContext が theme の方はいい感じに当ててくれるのでマップしたい型だけ渡すようにした。

import { ExecutionContext } from "styled-components";

export type ThemedStyledProps<P> = P & ExecutionContext;

[takurinton]

v5 まで存在していた ThemedStyledProps の定義はここにある https://github.com/DefinitelyTyped/DefinitelyTyped/blob/ca9f5035eef6451d5389528b8813e52d2ced2c05/types/styled-components/v3/index.d.ts#L12-L16

[takurinton]

react-transition-group を使ってる箇所で、nodeRef を渡そうとするとエラーが出る。 nodeRef じゃなくて ref にしたら型エラーがなくなる。

予期された型は、型 'IntrinsicAttributes & PolymorphicComponentProps<"web", Substitute<(Pick<TimeoutProps<HTMLElement | undefined> & { classNames?: string | CSSTransitionClassNames | undefined; }, keyof TimeoutProps<...>> | Pick<...>) & RefAttributes<...>, CSSTransitionProps>, void, void, {}, {}>' に対してここで宣言されたプロパティ 'nodeRef' から取得されています

[takurinton]

npx tsc の結果（一部抜粋）

Overload 1 of 2, '(props: PolymorphicComponentProps<"web", Substitute<(Pick<TimeoutProps<HTMLElement | undefined> & { classNames?: string | CSSTransitionClassNames | undefined; }, keyof TimeoutProps<...>> | Pick<...>) & RefAttributes<...>, CSSTransitionProps>, void, void, {}, {}>): Element', gave the following error. Type 'RefObject<HTMLDivElement>' is not assignable to type 'Ref | undefined'. Overload 2 of 2, '(props: Substitute<(Pick<TimeoutProps<HTMLElement | undefined> & { classNames?: string | CSSTransitionClassNames | undefined; }, keyof TimeoutProps<...>> | Pick<...>) & RefAttributes<...>, CSSTransitionProps>): ReactElement<...> | null', gave the following error. Type 'RefObject<HTMLDivElement>' is not assignable to type 'Ref | undefined'. 16 nodeRef={nodeRef}

おそらくここらへんの話 https://github.com/styled-components/styled-components/issues/4076

[takurinton]

手元で型のテスト書いてみたら普通に通ってるしよくわからんかった

[takurinton]

これは一旦こんな感じに書くと通るのでスルーでいいかな。 https://github.com/voyagegroup/ingred-ui/compare/styled-components-v6#diff-bfed18578c6277356dc2718fa9149b6477dc8d161f71db8348a6955e882cb907R6-R9

[takurinton]

ちなみに nodeRef の定義は明示的に書かなくてもいい（書いておくけど）

[takurinton]

spacing の部分でランタイムエラーを吐いた、dependabot の PR のときと同じだ

[takurinton]

react-select のランタイムエラーはこれ https://github.com/styled-components/styled-components/issues/4074

以下のコンポーネントを styled-components で装飾して渡すと menuIsOpen が true の時にエラーになる

• ValueContainer（ingred-ui に該当箇所なし）
• Option（ingred-ui に該当なし）
• MenuList

[takurinton]

react-select 側で spacing が参照できない箇所が壊れてるっぽいけど、styled-components でどう扱ってるのかわからないのと、対応策がこちらにあるのか styled-components 自体にあるのかの判断が現状できてない（そもそも theme が壊れてるようにも見える）

[takurinton]

react-select は外から注入したコンポーネントはここで上書きされるはずだけどされてなさそう？ https://github.com/JedWatson/react-select/blob/master/packages/react-select/src/components/index.ts#L141-L151

ingred-ui のケースだと、ここで MenuList が上書きされてくれないといけないのに、されないで react-select の MenuList が呼ばれてしまっているのでエラーになってるような雰囲気

[takurinton]

react-select のエラーの件は styled-components v6.0.0-beta.1 以降で壊れてる リリースノート: https://github.com/styled-components/styled-components/releases/tag/v6.0.0-beta.1

[takurinton]

react-select は外から注入したコンポーネントはここで上書きされるはずだけどされてなさそう？

node_modules の下で print debug してみた感じ、そういうのではなさそうだった。 displayName: Styled(MenuList) になっていたし、JSX.Element ぽいものが格納されていた（react-select のデフォルトだったら [function MenuList] とかになるはず）

[takurinton]

ひとまず現在地のメモを書いた。react-select の問題が解決したら v6 に上げてもいいかもなー（PR は作ったのでマージされれば対応できそう） https://memo.takur.in/tech/frontend/styled-components-v6.html