refactor: extract Monaco setup and completion providers from QueryEditor

Abierto
  • ¿Algo no está bien?
#5 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
45/100
Tipo de issue
Refactorización
Claridad
Bien especificado
Estado de actividad
Tranquilo
Stack tecnológico
react, typescript
Área
desktop, developer-experience

Línea de trabajo

Start with src/components/editor/QueryEditor.tsx and locate the Monaco setup, JOIN and schema completion providers, intention actions, and live-template expansion. Read the existing editor lifecycle and useLiveTemplates usage before deciding how their dependencies are registered and disposed. The requested files are monacoSetup.ts, sqlCompletionProvider.ts, intentionActions.ts, and liveTemplateProvider.ts alongside the component. Done means the component is under roughly 600 lines, the listed features still work, checks pass, and a Vitest test covers pure live-template expansion.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

good first issue help wanted refactor

src/components/editor/QueryEditor.tsx is 1,179 lines. The component itself is fine; the noise is Monaco configuration, language definitions, JOIN suggestion providers, and intention actions inlined alongside the React lifecycle.

What to extract

  1. monacoSetup.ts — theme registration, language token registration, editor option defaults.
  2. sqlCompletionProvider.ts — the JOIN-via-foreign-key autocomplete and the schema-aware identifier suggestions.
  3. intentionActions.ts — the Alt+Enter "intention actions" (quick fixes / refactors offered in the editor).
  4. liveTemplateProvider.ts — the snippet expansion that consumes useLiveTemplates.

Suggested approach

  • Files live in src/components/editor/ next to QueryEditor.tsx.
  • Each provider is a pure function that takes its dependencies (current schema, FK map, templates) and returns a Monaco-registered disposable.
  • QueryEditor.tsx orchestrates the disposables in a single useEffect.

Done criteria

  • QueryEditor.tsx drops below ~600 lines.
  • All editor features still work: JOIN suggestions, table/column autocomplete, Alt+Enter actions, live templates.
  • TypeScript / tests / build green.
  • One Vitest test for the live-template expander (pure-string logic).

Out of scope

  • Switching to a different editor (CodeMirror, etc.).
  • Adding language servers / LSP.

Audit reference

K5 in the pre-launch audit.

Lenguaje dominante
TypeScript
Estrellas
6
Forks
1
Merge medio
17 min
PR fusionados (30 d)
2

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de openidle-dev/queryden

Todos los issues de openidle-dev/queryden

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.