refactor: use hoisted modern monaco (#33540)

web/app/components/base/modern-monaco/hoisted-config.ts

@@ -0,0 +1,12 @@
+// This file is generated by scripts/hoist-modern-monaco.ts.
+// Do not edit it manually.
+
+export const HOIST_BASE_PATH = '/hoisted-modern-monaco' as const
+export const TM_THEMES_VERSION = '1.12.1' as const
+export const TM_GRAMMARS_VERSION = '1.31.2' as const
+export const HOIST_THEME_IDS = ['light-plus', 'dark-plus'] as const
+export const HOIST_LANGUAGE_IDS = ['javascript', 'json', 'python', 'html', 'css'] as const
+export const MODERN_MONACO_IMPORT_MAP = {
+  'modern-monaco/editor-core': '/hoisted-modern-monaco/modern-monaco/editor-core.mjs',
+  'modern-monaco/lsp': '/hoisted-modern-monaco/modern-monaco/lsp/index.mjs',
+} as const

web/app/components/base/modern-monaco/import-map.tsx

@@ -0,0 +1,38 @@
+import { headers } from 'next/headers'
+import { env } from '@/env'
+import { MODERN_MONACO_IMPORT_MAP } from './hoisted-config'
+
+function withBasePath(pathname: string) {
+  return `${env.NEXT_PUBLIC_BASE_PATH}${pathname}`
+}
+
+function getRequestOrigin(requestHeaders: Headers) {
+  const protocol = requestHeaders.get('x-forwarded-proto') ?? 'http'
+  const host = requestHeaders.get('x-forwarded-host') ?? requestHeaders.get('host')
+  if (!host)
+    return null
+  return `${protocol}://${host}`
+}
+
+const MonacoImportMap = async () => {
+  const requestHeaders = await headers()
+  const nonce = process.env.NODE_ENV === 'production' ? requestHeaders.get('x-nonce') ?? '' : ''
+  const requestOrigin = getRequestOrigin(requestHeaders)
+  const importMap = JSON.stringify({
+    imports: Object.fromEntries(
+      Object.entries(MODERN_MONACO_IMPORT_MAP).map(([specifier, pathname]) => {
+        const modulePath = withBasePath(pathname)
+        const moduleUrl = requestOrigin ? new URL(modulePath, requestOrigin).toString() : modulePath
+        return [specifier, moduleUrl]
+      }),
+    ),
+  })
+
+  return (
+    <script nonce={nonce || undefined} type="importmap" data-modern-monaco-importmap="">
+      {importMap}
+    </script>
+  )
+}
+
+export default MonacoImportMap

web/app/components/base/modern-monaco/init.ts

@@ -1,14 +1,24 @@
 import type { InitOptions } from 'modern-monaco'
+import { basePath } from '@/utils/var'
+import {
+  HOIST_BASE_PATH,
+  HOIST_LANGUAGE_IDS,
+  HOIST_THEME_IDS,
+  TM_GRAMMARS_VERSION,
+  TM_THEMES_VERSION,
+} from './hoisted-config'
 
 export const LIGHT_THEME_ID = 'light-plus'
 export const DARK_THEME_ID = 'dark-plus'
 
+const assetPath = (pathname: string) => `${basePath}${HOIST_BASE_PATH}${pathname}`
+const themeAssetPath = (themeId: string) => assetPath(`/tm-themes@${TM_THEMES_VERSION}/themes/${themeId}.json`)
+const grammarAssetPath = (languageId: string) => assetPath(`/tm-grammars@${TM_GRAMMARS_VERSION}/grammars/${languageId}.json`)
+
 const DEFAULT_INIT_OPTIONS: InitOptions = {
-  defaultTheme: DARK_THEME_ID,
-  themes: [
-    LIGHT_THEME_ID,
-    DARK_THEME_ID,
-  ],
+  defaultTheme: themeAssetPath(DARK_THEME_ID),
+  themes: HOIST_THEME_IDS.map(themeAssetPath),
+  langs: HOIST_LANGUAGE_IDS.map(grammarAssetPath),
 }
 
 let monacoInitPromise: Promise<typeof import('modern-monaco/editor-core') | null> | null = null