refactor: extract Monaco setup and completion providers from QueryEditor

オープン
#5 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
4/5
見積もり時間
3〜5日
初心者へのやさしさ
45/100
issue の種類
リファクタリング
明瞭さ
明確に書かれている
活発さ
静か
技術スタック
react, typescript

調査の方向性

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.

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

説明

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.

主要言語
TypeScript
スター
6
フォーク
1
平均マージ
17分
マージ済み PR(30日)
2

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

openidle-dev/queryden のほかの issue

openidle-dev/queryden の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

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

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