FormidableLabs / FormidableLabs/react-live
Address remaining React hooks lint warnings in LiveProvider and Editor
- 主要言語
- 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