FormidableLabs / FormidableLabs/react-live
Address remaining React hooks lint warnings in LiveProvider and Editor
- Lenguaje dominante
- TypeScript
- Estrellas
- 4.6k
- Forks
- 260
- Métricas de merge de PR
- Sin PR fusionados en 30 d
Descripción
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.
Guía de contribución
Línea de trabajo
Comienza con las pruebas de LiveProvider, que actualmente solo cubren cambios de código, y luego inspecciona los puntos de entrada de LiveProvider y Editor junto con .oxlintrc.json. Añade cobertura para los cambios en scope, noInline, transformCode y enableTypeScript, y después aborda las advertencias restantes, preservando el contrato controlled/uncontrolled de contentEditable; considera primero #415.
Escrito por el modelo de indexación a partir del texto del issue.
Evaluación
- Stack tecnológico
- react, typescript
- Área
- frontend, testing
- Tipo de issue
- Error
- Dificultad
- 4/5
- Tiempo estimado
- 3-5 días
- Estado de actividad
- Activo
- Claridad
- Bastante claro
- Aptitud para principiantes
- 48/100