fix(editor): bundle Monaco locally so the SQL editor works offline#35
Merged
Conversation
@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>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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 frommain.tsxbefore the React tree mounts, that:monaco-editor(loader.config({ monaco })), and?workerimports — the baseeditor.workerplus themonaco-sql-languagespgsqlworker 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.jsgrows accordingly (expected: bundle replaces the runtime CDN download).MonacoEditor.test.tsx15) — they mock@monaco-editor/react/monaco-sql-languages, so the bootstrap is untouched by them.Self-verification
npm run typecheck/npm run lintcleannpm run buildgreen (Monaco bundled locally)Notes for reviewer
monaco-editor(0.55.x) resolves via the existingmonaco-sql-languagesdependency — no new install, lockfile unchanged.vite/clienttypes are already enabled, so?workerimports 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.