fix(plugin-playground): manually load babel.min.js to avoid conflict with monaco

.changeset/thin-ads-serve.md

@@ -0,0 +1,5 @@
+---
+"@rspress/plugin-playground": patch
+---
+
+fix(plugin-playground): manually load babel.min.js to avoid conflict with monaco

packages/plugin-playground/src/cli/index.ts

@@ -44,7 +44,7 @@ export function pluginPlayground(
     include,
     defaultDirection = 'horizontal',
     editorPosition = 'left',
-    babelUrl = '',
+    babelUrl = DEFAULT_BABEL_URL,
     monacoLoader = {},
     monacoOptions = {},
     defaultRenderMode = 'playground',
@@ -208,30 +208,20 @@ export function pluginPlayground(
           __PLAYGROUND_DIRECTION__: JSON.stringify(defaultDirection),
           __PLAYGROUND_MONACO_LOADER__: JSON.stringify(monacoLoader),
           __PLAYGROUND_MONACO_OPTIONS__: JSON.stringify(monacoOptions),
+          __PLAYGROUND_BABEL_URL__: JSON.stringify(babelUrl),
         },
         include: [join(__dirname, '..', '..', '..')],
       },
       html: {
-        tags: [
-          ...preloads.map(url => ({
-            tag: 'link',
-            head: true,
-            attrs: {
-              rel: 'preload',
-              href: url,
-              as: 'script',
-            },
-          })),
-          {
-            tag: 'script',
-            head: true,
-            attrs: {
-              id: 'rspress-playground-babel',
-              async: true,
-              src: babelUrl || DEFAULT_BABEL_URL,
-            },
+        tags: preloads.map(url => ({
+          tag: 'link',
+          head: true,
+          attrs: {
+            rel: 'preload',
+            href: url,
+            as: 'script',
           },
-        ],
+        })),
       },
       tools: {
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment, @typescript-eslint/prefer-ts-expect-error

packages/plugin-playground/src/web/babel.ts

@@ -6,21 +6,50 @@ declare global {
   interface Window {
     Babel: Babel;
   }
+  const __PLAYGROUND_BABEL_URL__: string;
 }
 
-function getBabel(): Babel | Promise<Babel> {
+// see https://github.com/web-infra-dev/rspress/issues/876
+async function loadUmdBabelModule(): Promise<Babel> {
+  const data = await fetch(__PLAYGROUND_BABEL_URL__);
+
+  const umdSourceCode = await data.text();
+
+  const run = new Function(
+    'exports',
+    'module',
+    'require',
+    `with(exports, module, require) {${umdSourceCode}}`,
+  );
+
+  const exports: Babel = {} as unknown as Babel;
+  const module = { exports };
+  const require = () => {};
+
+  run(exports, module, require);
+
+  return exports;
+}
+
+let loadBabelPromise: null | Promise<Babel> = null;
+
+async function getBabel(): Promise<Babel> {
   if (window.Babel) {
     return window.Babel;
   }
-  const el = document.getElementById('rspress-playground-babel');
-  if (!el) {
-    throw new Error('Babel not found');
+  if (loadBabelPromise) {
+    return loadBabelPromise;
+  }
+
+  loadBabelPromise = loadUmdBabelModule();
+  try {
+    const Babel = await loadBabelPromise;
+    window.Babel = Babel;
+    return Babel;
+  } catch (e) {
+    loadBabelPromise = null;
+    throw e;
   }
-  return new Promise(resolve => {
-    el.addEventListener('load', () => {
-      resolve(window.Babel);
-    });
-  });
 }
 
 export { getBabel };