@rspress/plugin-playground 2.0.18 → 2.0.19

package/dist/cli/index.js

@@ -8,7 +8,6 @@ import { fileURLToPath as __rspack_fileURLToPath } from "node:url";
 import { dirname as __rspack_dirname } from "node:path";
 var __rspack_import_meta_dirname__ = __rspack_dirname(__rspack_fileURLToPath(import.meta.url));
 const DEFAULT_BABEL_URL = 'https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.22.20/babel.min.js';
-const DEFAULT_MONACO_URL = 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.43.0/min/vs';
 const parseImports = (code, sourceExt)=>{
     const parsed = napi.parseSync(code, {
         sourceType: 'module',
@@ -91,10 +90,6 @@ function pluginPlayground(options) {
     const playgroundVirtualModule = new RspackVirtualModulePlugin({});
     const getRouteMeta = ()=>cli_routeMeta;
     if (render && !/Playground\.(jsx?|tsx?)$/.test(render)) throw new Error('[Playground]: render should ends with Playground.(jsx?|tsx?)');
-    const preloads = [];
-    const monacoPrefix = (monacoLoader.paths?.vs || DEFAULT_MONACO_URL).replace(/\/+$/, '');
-    preloads.push(`${monacoPrefix}/loader.js`);
-    preloads.push(`${monacoPrefix}/editor/editor.main.js`);
     return {
         name: '@rspress/plugin-playground',
         config (config) {
@@ -204,17 +199,6 @@ function pluginPlayground(options) {
                     pkgRootPath
                 ]
             },
-            html: {
-                tags: preloads.map((url)=>({
-                        tag: 'link',
-                        head: true,
-                        attrs: {
-                            rel: 'preload',
-                            href: url,
-                            as: "script"
-                        }
-                    }))
-            },
             tools: {
                 rspack: {
                     plugins: [

package/dist/web/index.js

@@ -1,9 +1,9 @@
 import react, { loader } from "@monaco-editor/react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useDark } from "@rspress/core/runtime";
+import { safePreload, useDark } from "@rspress/core/runtime";
 import react_0, { Component, useMemo } from "react";
 const DEFAULT_MONACO_URL = 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.43.0/min/vs';
-function initLoader() {
+function getLoaderConfig() {
     let loaderConfig = {
         paths: {
             vs: DEFAULT_MONACO_URL
@@ -13,9 +13,11 @@ function initLoader() {
         const keys = Object.keys(__PLAYGROUND_MONACO_LOADER__);
         if (keys.length > 0) loaderConfig = __PLAYGROUND_MONACO_LOADER__;
     } catch (_e) {}
-    loader.config(loaderConfig);
+    return loaderConfig;
 }
-initLoader();
+const editor_loaderConfig = getLoaderConfig();
+const monacoPrefix = (editor_loaderConfig.paths?.vs || DEFAULT_MONACO_URL).replace(/\/+$/, '');
+loader.config(editor_loaderConfig);
 function getMonacoOptions() {
     try {
         return __PLAYGROUND_MONACO_OPTIONS__;
@@ -23,6 +25,12 @@ function getMonacoOptions() {
     return {};
 }
 function Editor(props) {
+    safePreload?.(`${monacoPrefix}/loader.js`, {
+        as: "script"
+    });
+    safePreload?.(`${monacoPrefix}/editor/editor.main.js`, {
+        as: "script"
+    });
     const { options, className = '', theme: themeProp, ...rest } = props || {};
     const dark = useDark();
     const theme = useMemo(()=>{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rspress/plugin-playground",
-  "version": "2.0.18",
+  "version": "2.0.19",
   "description": "A plugin for rspress to preview the code block in markdown/mdx file.",
   "bugs": "https://github.com/web-infra-dev/rspress/issues",
   "repository": {
@@ -37,7 +37,7 @@
   "devDependencies": {
     "@babel/types": "^7.29.7",
     "@rsbuild/plugin-react": "~2.1.0",
-    "@rslib/core": "0.23.2",
+    "@rslib/core": "1.0.0-beta.1",
     "@types/babel__core": "^7.20.5",
     "@types/babel__standalone": "^7.1.9",
     "@types/babel__traverse": "^7.28.0",
@@ -46,12 +46,12 @@
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "mdast-util-mdx-jsx": "^3.2.0",
-    "react": "^19.2.7",
-    "react-dom": "^19.2.7",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
     "rsbuild-plugin-publint": "^1.0.0",
     "typescript": "^6.0.3",
     "unified": "^11.0.5",
-    "@rspress/plugin-playground": "2.0.18"
+    "@rspress/plugin-playground": "2.0.19"
   },
   "peerDependencies": {
     "@rspress/core": "^2.0.10",

package/static/global-components/Playground.tsx

@@ -6,6 +6,7 @@ import {
   type HTMLAttributes,
   type ReactNode,
   useCallback,
+  useEffect,
   useState,
 } from 'react';
 
@@ -67,6 +68,9 @@ export default function Playground(props: PlaygroundProps) {
   const direction = useDirection(props);
 
   const [code, setCode] = useState(codeProp);
+  useEffect(() => {
+    setCode(codeProp);
+  }, [codeProp]);
 
   const handleCodeChange = useCallback((e?: string) => {
     setCode(e || '');