mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 09:25:06 +03:00
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:
1 parent
d847c48464
commit
efed6b5c6a
1 file changed
+10
-9
@@ -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`,
|
||||
},
|
||||
})
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user