feat(store): resourceLinks to custom cdn

Author: wangcch

src/monaco/env.ts

@@ -122,6 +122,10 @@ export interface WorkerMessage {
   event: 'init'
   tsVersion: string
   tsLocale?: string
+  pkgDirUrl?: string
+  pkgFileTextUrl?: string
+  pkgLatestVersionUrl?: string
+  typescriptLib?: string
 }
 
 export function loadMonacoEnv(store: Store) {
@@ -135,11 +139,27 @@ export function loadMonacoEnv(store: Store) {
               resolve()
             }
           })
-          worker.postMessage({
+
+          const {
+            pkgDirUrl,
+            pkgFileTextUrl,
+            pkgLatestVersionUrl,
+            typescriptLib,
+          } = store.resourceLinks || {}
+
+          const message: WorkerMessage = {
             event: 'init',
             tsVersion: store.typescriptVersion,
             tsLocale: store.locale,
-          } satisfies WorkerMessage)
+            pkgDirUrl: pkgDirUrl ? String(pkgDirUrl) : undefined,
+            pkgFileTextUrl: pkgFileTextUrl ? String(pkgFileTextUrl) : undefined,
+            pkgLatestVersionUrl: pkgLatestVersionUrl
+              ? String(pkgLatestVersionUrl)
+              : undefined,
+            typescriptLib: typescriptLib ? String(typescriptLib) : undefined,
+          }
+
+          worker.postMessage(message)
         })
         await init
         return worker

src/monaco/resource.ts

@@ -16,22 +16,19 @@ export type CreateNpmFileSystemOptions = {
     pkgPath: string,
   ) => string
   getPackageFileTextUrl?: (
-    path: string,
     pkgName: string,
     pkgVersion: string | undefined,
     pkgPath: string,
   ) => string
 }
 
 const defaultUnpkgOptions: Required<CreateNpmFileSystemOptions> = {
-  getPackageLatestVersionUrl: (pkgName: string) =>
+  getPackageLatestVersionUrl: (pkgName) =>
     `https://unpkg.com/${pkgName}@latest/package.json`,
-  getPackageDirectoryUrl: (
-    pkgName: string,
-    pkgVersion: string,
-    pkgPath: string,
-  ) => `https://unpkg.com/${pkgName}@${pkgVersion}/${pkgPath}/?meta`,
-  getPackageFileTextUrl: (path: string) => `https://unpkg.com/${path}`,
+  getPackageDirectoryUrl: (pkgName, pkgVersion, pkgPath) =>
+    `https://unpkg.com/${pkgName}@${pkgVersion}/${pkgPath}/?meta`,
+  getPackageFileTextUrl: (pkgName, pkgVersion, pkgPath) =>
+    `https://unpkg.com/${pkgName}@${pkgVersion || 'latest'}/${pkgPath}`,
 }
 
 export function createNpmFileSystem(
@@ -235,7 +232,7 @@ export function createNpmFileSystem(
             return
           }
           const text = await fetchText(
-            getPackageFileTextUrl(path, pkgName, _version, pkgFilePath),
+            getPackageFileTextUrl(pkgName, _version, pkgFilePath),
           )
           if (text !== undefined) {
             onFetch?.(path, text)
@@ -317,7 +314,7 @@ export function createNpmFileSystem(
       version = modName.substring(modName.lastIndexOf('@') + 1)
     }
     if (!version && getPackageVersion) {
-      getPackageVersion?.(pkgName)
+      version = getPackageVersion?.(pkgName)
     }
     return [modName, pkgName, version, path]
   }

src/monaco/vue.worker.ts

@@ -23,13 +23,35 @@ export interface CreateData {
   dependencies: Record<string, string>
 }
 
+function createFunc(func?: string) {
+  if (func && typeof func === 'string') {
+    return Function(`return ${func}`)()
+  }
+  return undefined
+}
+
 let ts: typeof import('typescript')
 let locale: string | undefined
+let resourceLinks: Record<
+  keyof Pick<
+    WorkerMessage,
+    'pkgDirUrl' | 'pkgFileTextUrl' | 'pkgLatestVersionUrl'
+  >,
+  ((...args: any[]) => string) | undefined
+>
 
 self.onmessage = async (msg: MessageEvent<WorkerMessage>) => {
   if (msg.data?.event === 'init') {
     locale = msg.data.tsLocale
-    ts = await importTsFromCdn(msg.data.tsVersion)
+    ts = await importTsFromCdn(
+      msg.data.tsVersion,
+      createFunc(msg.data.typescriptLib),
+    )
+    resourceLinks = {
+      pkgDirUrl: createFunc(msg.data.pkgDirUrl),
+      pkgFileTextUrl: createFunc(msg.data.pkgFileTextUrl),
+      pkgLatestVersionUrl: createFunc(msg.data.pkgLatestVersionUrl),
+    }
     self.postMessage('inited')
     return
   }
@@ -61,6 +83,11 @@ self.onmessage = async (msg: MessageEvent<WorkerMessage>) => {
               content,
             )
           },
+          {
+            getPackageDirectoryUrl: resourceLinks.pkgDirUrl,
+            getPackageFileTextUrl: resourceLinks.pkgFileTextUrl,
+            getPackageLatestVersionUrl: resourceLinks.pkgLatestVersionUrl,
+          },
         ),
       }
 
@@ -98,10 +125,15 @@ self.onmessage = async (msg: MessageEvent<WorkerMessage>) => {
   )
 }
 
-async function importTsFromCdn(tsVersion: string) {
+async function importTsFromCdn(
+  tsVersion: string,
+  getTsCdn?: (version?: string) => string,
+) {
   const _module = globalThis.module
   ;(globalThis as any).module = { exports: {} }
-  const tsUrl = `https://cdn.jsdelivr.net/npm/typescript@${tsVersion}/lib/typescript.js`
+  const tsUrl =
+    getTsCdn?.(tsVersion) ||
+    `https://cdn.jsdelivr.net/npm/typescript@${tsVersion}/lib/typescript.js`
   await import(/* @vite-ignore */ tsUrl)
   const ts = globalThis.module.exports
   globalThis.module = _module

src/output/Sandbox.vue

@@ -128,6 +128,11 @@ function createSandbox() {
       /<!--PREVIEW-OPTIONS-PLACEHOLDER-HTML-->/,
       previewOptions.value?.placeholderHTML || '',
     )
+    .replace(
+      /<!--ES-MODULE-SHIMS-LINK-->/,
+      store.value.resourceLinks?.esModuleShims ||
+        'https://cdn.jsdelivr.net/npm/[email protected]/dist/es-module-shims.wasm.js',
+    )
   sandbox.srcdoc = sandboxSrc
   containerRef.value?.appendChild(sandbox)
 

src/output/srcdoc.html

@@ -6,8 +6,9 @@
         color-scheme: dark;
       }
       body {
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-          Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+        font-family:
+          -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
+          Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
       }
     </style>
     <!-- PREVIEW-OPTIONS-HEAD-HTML -->
@@ -361,10 +362,7 @@
     </script>
 
     <!-- ES Module Shims: Import maps polyfill for modules browsers without import maps support (all except Chrome 89+) -->
-    <script
-      async
-      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/es-module-shims.wasm.js"
-    ></script>
+    <script async src="<!--ES-MODULE-SHIMS-LINK-->"></script>
     <script type="importmap">
       <!--IMPORT_MAP-->
     </script>

src/store.ts

@@ -48,6 +48,7 @@ export function useStore(
     typescriptVersion = ref('latest'),
     dependencyVersion = ref(Object.create(null)),
     reloadLanguageTools = ref(),
+    resourceLinks = undefined,
   }: Partial<StoreState> = {},
   serializedState?: string,
 ): ReplStore {
@@ -92,7 +93,9 @@ export function useStore(
       vueVersion,
       async (version) => {
         if (version) {
-          const compilerUrl = `https://cdn.jsdelivr.net/npm/@vue/compiler-sfc@${version}/dist/compiler-sfc.esm-browser.js`
+          const compilerUrl =
+            resourceLinks?.value?.vueCompilerUrl?.(version) ||
+            `https://cdn.jsdelivr.net/npm/@vue/compiler-sfc@${version}/dist/compiler-sfc.esm-browser.js`
           loading.value = true
           compiler.value = await import(/* @vite-ignore */ compilerUrl).finally(
             () => (loading.value = false),
@@ -389,6 +392,8 @@ export function useStore(
     deserialize,
     getFiles,
     setFiles,
+
+    resourceLinks,
   })
   return store
 }
@@ -414,6 +419,20 @@ export interface SFCOptions {
   template?: Partial<SFCTemplateCompileOptions>
 }
 
+export type ResourceLinkConfigs = {
+  esModuleShims?: string
+  vueCompilerUrl?: (version: string) => string
+  typescriptLib?: (version: string) => string
+  // for monaco
+  pkgLatestVersionUrl?: (pkgName: string) => string
+  pkgDirUrl?: (pkgName: string, pkgVersion: string, pkgPath: string) => string
+  pkgFileTextUrl?: (
+    pkgName: string,
+    pkgVersion: string | undefined,
+    pkgPath: string,
+  ) => string
+}
+
 export type StoreState = ToRefs<{
   files: Record<string, File>
   activeFilename: string
@@ -440,6 +459,9 @@ export type StoreState = ToRefs<{
   /** \{ dependencyName: version \} */
   dependencyVersion: Record<string, string>
   reloadLanguageTools?: (() => void) | undefined
+
+  /** Custom online resources */
+  resourceLinks?: ResourceLinkConfigs
 }>
 
 export interface ReplStore extends UnwrapRef<StoreState> {
@@ -463,6 +485,8 @@ export interface ReplStore extends UnwrapRef<StoreState> {
   deserialize(serializedState: string, checkBuiltinImportMap?: boolean): void
   getFiles(): Record<string, string>
   setFiles(newFiles: Record<string, string>, mainFile?: string): Promise<void>
+  /** Custom online resources */
+  resourceLinks?: ResourceLinkConfigs
 }
 
 export type Store = Pick<
@@ -487,6 +511,7 @@ export type Store = Pick<
   | 'renameFile'
   | 'getImportMap'
   | 'getTsConfig'
+  | 'resourceLinks'
 >
 
 export class File {