Skip to content

fix(editor): bundle Monaco locally so the SQL editor works offline#35

Merged
exzvor merged 1 commit into
mainfrom
fix/32-monaco-offline
Jun 2, 2026
Merged

fix(editor): bundle Monaco locally so the SQL editor works offline#35
exzvor merged 1 commit into
mainfrom
fix/32-monaco-offline

Conversation

@exzvor

@exzvor exzvor commented Jun 2, 2026

Copy link
Copy Markdown
Owner

Summary

The SQL editor hung on "Loading…" forever for offline/closed-network users (reported via Habr, #32). @monaco-editor/react's default loader fetches the Monaco runtime from a CDN (jsDelivr) at mount time; with no network the request never resolves and every Monaco mount hangs. For a desktop SQL IDE the editor must be bundled and work offline — and "no SQL console" was a direct consequence (the console is this editor).

Fix: a side-effect bootstrap (src/lib/monaco-setup.ts), imported from main.tsx before the React tree mounts, that:

  • hands the loader the locally-bundled monaco-editor (loader.config({ monaco })), and
  • wires Monaco's web workers via Vite ?worker imports — the base editor.worker plus the monaco-sql-languages pgsql worker that backs SQL completion/hover.

The loader is a singleton, so this fixes every Monaco mount site (SQL editor, diff viewers, notebook, jsonb, ERD DDL preview) at once — no CDN, no network.

Related issue

Fixes #32

Tests

  • npm run build — production build now emits the Monaco language/worker chunks locally (pgsql, sql, tsMode, jsonMode, lspLanguageFeatures…); main.js grows accordingly (expected: bundle replaces the runtime CDN download).
  • Existing editor tests pass unchanged (MonacoEditor.test.tsx 15) — they mock @monaco-editor/react/monaco-sql-languages, so the bootstrap is untouched by them.
  • Offline GUI smoke (the definitive check): run with the network disabled → the editor renders text (not "Loading…") and SQL autocomplete works; devtools Network shows zero jsdelivr/unpkg requests. Can only be confirmed in a windowed run.

Self-verification

  • npm run typecheck / npm run lint clean
  • npm run build green (Monaco bundled locally)
  • DCO sign-off

Notes for reviewer

monaco-editor (0.55.x) resolves via the existing monaco-sql-languages dependency — no new install, lockfile unchanged. vite/client types are already enabled, so ?worker imports typecheck. Bundle-size note: the Monaco chunk is large; that's the expected, correct tradeoff for offline operation (it replaces a runtime CDN fetch). Lazy-loading the editor route could trim the initial bundle later, but that's out of scope.

@monaco-editor/react's default loader fetches the Monaco runtime from a CDN
(jsDelivr) at mount time. On a machine with no network — offline, air-gapped,
or behind a proxy/firewall — that request never resolves, so the editor (and
every other Monaco mount) hangs forever on "Loading…". For a desktop SQL IDE
the editor must be bundled and work offline.

Add a side-effect bootstrap (src/lib/monaco-setup.ts), imported from main.tsx
before the React tree mounts, that hands the loader the locally-bundled
monaco-editor (loader.config({ monaco })) and wires Monaco's web workers
through Vite (?worker imports): the base editor worker plus the monaco-sql-
languages pgsql worker that backs SQL completion. The loader is a singleton,
so this fixes every Monaco mount site at once, with no CDN and no network.

Verified: production build now emits the Monaco/pgsql worker chunks locally;
offline rendering itself needs a GUI run to confirm end to end.

Fixes #32

Signed-off-by: exzvor <exzvor@gmail.com>
@exzvor exzvor merged commit 9e6c9fb into main Jun 2, 2026
2 checks passed
@exzvor exzvor deleted the fix/32-monaco-offline branch June 2, 2026 18:43
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[bug] SQL editor stuck on "Loading…" — Monaco is fetched from a CDN at runtime (breaks offline/closed networks)

1 participant