chore: Server monaco editor from Cloudflare (#47973)

How to test:
- Editor should load and work in the SQL Editor
- Search for JS bundles `https://cdnjs.cloudflare.com/*` in the preview
to verify that's it's loaded from a CDN
- Check in the local build whether the Monaco editor is loaded from the
base URL (have to do it locally, SQL Editor doesn't work on the
self-hosted Vercel deployment)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Performance**
* Improved delivery of Studio assets through CDN-based URLs in supported
environments.
* Updated the Monaco editor to load assets from the configured CDN when
available, with a local fallback.
* **Reliability**
* Added support for explicitly enabling or disabling CDN asset delivery
across environments.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
Ivan Vasilov authored and GitHub committed 2026-07-22 13:57:03 +02:00
1 parent d847c48464
commit efed6b5c6a
1 file changed
+10 -9
+10 -9
View File
@@ -1,19 +1,20 @@
import { loader } from '@monaco-editor/react'
import { BASE_PATH } from '@/lib/constants'
import { BASE_PATH, IS_PLATFORM } from '@/lib/constants'
// [Ivan] Serve the Monaco assets locally from the public folder (see #47182, which
// dropped CDN loading in every environment and re-nested the assets under `vs/`). The
// worker bootstrap (vs/base/worker/workerMain.js) loads the language workers (e.g.
// tsWorker.js) via fetch() from inside the web worker. A root-relative path fails to
// resolve there in some browsers (Firefox throws "... is not a valid URL"), so we point
// `vs` at an absolute URL including the origin. Guarded on `window` since callers are
// also evaluated during SSR (where `window` is undefined and there's no editor to mount).
// [Ivan] Serve the Monaco assets locally from the public folder for self-hosted deployments, but use the CDN for
// the platform deployment to reduce bundle size and improve caching.
//
// Shared by both runtime entry points — `pages/_app.tsx` (Next) and
// `routes/__root.tsx` (TanStack) — so the asset path can't drift between them.
export function configureMonacoLoader() {
if (typeof window !== 'undefined') {
loader.config({ paths: { vs: `${window.location.origin}${BASE_PATH}/monaco-editor/vs` } })
loader.config({
paths: {
vs: IS_PLATFORM
? 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.52.2/min/vs'
: `${BASE_PATH}/monaco-editor/vs`,
},
})
}
}