FormidableLabs / FormidableLabs/react-live

Address remaining React hooks lint warnings in LiveProvider and Editor

Abierto
#417 0 comentarios 0 reacciones 0 asignados Ver en GitHub
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

Abrir la 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

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.