FormidableLabs / FormidableLabs/react-live

Address remaining React hooks lint warnings in LiveProvider and Editor

オープン
#417 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る
主要言語
TypeScript
スター
4.6k
フォーク
260
PR マージ指標
30日以内にマージされた PR はありません

説明

Five oxlint warnings remain, set to `warn` in `.oxlintrc.json`.

### `LiveProvider` effect deps

```js
useEffect(() => {
transpileAsync(code).catch(onError);
}, [code, scope, noInline, transformCode]);
```

**Do not apply the suggested fix as-is.** The linter calls `scope`, `noInline`, and `transformCode` unnecessary because they are not in the effect body. They are used by `transpileAsync`, which closes over them. Removing them stops re-transpiling when `scope` or `transformCode` changes.

Real bug the linter misses: `transpileAsync` also closes over `enableTypeScript`, which is not in the deps, so toggling it at runtime does not re-transpile.

Fix: make `transpileAsync` a `useCallback` with deps `scope`, `noInline`, `transformCode`, `enableTypeScript`, and depend on it. Changes when transpilation runs, notably for an inline `scope={{ ... }}`.

### `jsx-no-constructed-context-values`

New context object every render re-renders all consumers. Needs `useCallback` on `onError`/`onChange` as well as `useMemo`, and `onChange` depends on `transpileAsync` — so entangled with the above.

### `set-state-in-effect` in `Editor`

`useEffect(() => setCode(props.code), [props.code])` syncs state from props. Both standard fixes change the controlled/uncontrolled contract of a contentEditable editor.

### Order

1. Add tests that changing `scope`, `noInline`, `transformCode`, and `enableTypeScript` re-transpiles. Only `code` is covered today. The `enableTypeScript` one should fail, confirming the bug above.
2. Fix the stale closure.
3. `useCallback`/`useMemo` refactor.
4. `Editor` prop sync, separately.

Worth holding until #415 is understood.

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

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

調査の方向性

現在はコードの変更のみをカバーしている LiveProvider のテストから始め、続いて .oxlintrc.json と併せて LiveProvider と Editor のエントリーポイントを調査します。scope、noInline、transformCode、enableTypeScript の変更に対するカバレッジを追加し、その後、contentEditable の controlled/uncontrolled 契約を維持しながら残りの警告に対処します。まず #415 を検討してください。

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

評価

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

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

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