@rspress/plugin-preview 2.0.0-alpha.9 → 2.0.0-beta.0

package/dist/index.d.ts

@@ -1,6 +1,11 @@
 import type { RsbuildConfig } from '@rsbuild/core';
 import { RspressPlugin } from '@rspress/shared';
 
+declare interface CustomEntry {
+    entryCssPath: string;
+    demoPath: string;
+}
+
 declare type IframeOptions = {
     /**
      * framework in the iframe
@@ -18,6 +23,10 @@ declare type IframeOptions = {
      */
     devPort?: number;
     builderConfig?: RsbuildConfig;
+    /**
+     * custom support for other web frameworks
+     */
+    customEntry?: (meta: CustomEntry) => string;
 };
 
 export declare type Options = {

package/dist/index.js

@@ -1,10 +1,14 @@
 "use strict";
 var __webpack_modules__ = {
     "@rsbuild/plugin-less": function(module) {
-        module.exports = import("@rsbuild/plugin-less");
+        module.exports = import("@rsbuild/plugin-less").then(function(module) {
+            return module;
+        });
     },
     "@rsbuild/plugin-sass": function(module) {
-        module.exports = import("@rsbuild/plugin-sass");
+        module.exports = import("@rsbuild/plugin-sass").then(function(module) {
+            return module;
+        });
     }
 };
 var __webpack_module_cache__ = {};
@@ -77,7 +81,18 @@ var __webpack_exports__ = {};
     import DemoBlock from ${JSON.stringify(path)};
     ${str}
   `;
-    function generateEntry(demos, framework, position) {
+    const getLangFileExt = (lang)=>{
+        switch(lang){
+            case 'jsx':
+            case 'tsx':
+                return 'tsx';
+            case 'json':
+                return 'tsx';
+            default:
+                return lang;
+        }
+    };
+    function generateEntry(demos, framework, position, customEntry) {
         const sourceEntry = {};
         const entryCssPath = (0, external_node_path_namespaceObject.join)(staticPath, 'global-styles', 'entry.css');
         if ('follow' === position) Object.values(demos).forEach((routes)=>{
@@ -91,12 +106,16 @@ var __webpack_exports__ = {};
         render(() => <Demo />, document.getElementById('root'));
         `;
                 const reactEntry = `
-        import { render } from 'react-dom';
+        import { createRoot } from 'react-dom/client';
         import ${JSON.stringify(entryCssPath)};
         import Demo from ${JSON.stringify(demoPath)};
-        render(<Demo />, document.getElementById('root'));
+        const container = document.getElementById('root');
+        createRoot(container).render(<Demo />);
         `;
-                const entryContent = 'react' === framework ? reactEntry : solidEntry;
+                const entryContent = customEntry ? customEntry({
+                    entryCssPath,
+                    demoPath
+                }) : 'react' === framework ? reactEntry : solidEntry;
                 (0, external_node_fs_namespaceObject.writeFileSync)(entry, entryContent);
                 sourceEntry[id] = entry;
             });
@@ -104,7 +123,7 @@ var __webpack_exports__ = {};
         else Object.entries(demos).forEach(([key, routes])=>{
             if (0 === routes.length) return;
             const reactContent = `
-        import { render } from 'react-dom';
+        import { createRoot } from 'react-dom/client';
         import ${JSON.stringify(entryCssPath)};
         ${routes.map((demo, index)=>`import Demo_${index} from ${JSON.stringify(demo.path)}`).join('\n')}
         function App() {
@@ -115,7 +134,8 @@ var __webpack_exports__ = {};
             </div>
           )
         }
-        render(<App /> , document.getElementById('root'));
+        const container = document.getElementById('root');
+        createRoot(container).render(<App />);
       `;
             const solidContent = `
         import { render } from 'solid-js/web';
@@ -423,14 +443,18 @@ var __webpack_exports__ = {};
                 if ('hasVisited' in node) return;
                 if (node.lang && previewLanguages.includes(node.lang)) {
                     var _node_meta, _node_meta1, _node_meta2, _node_meta3, _node_meta4, _node_meta5;
-                    if ((null === (_node_meta = node.meta) || void 0 === _node_meta ? void 0 : _node_meta.includes('pure')) || !(null === (_node_meta1 = node.meta) || void 0 === _node_meta1 ? void 0 : _node_meta1.includes('preview')) && 'pure' === defaultRenderMode) return;
-                    const value = injectDemoBlockImport(previewCodeTransform({
+                    if ((null == (_node_meta = node.meta) ? void 0 : _node_meta.includes('pure')) || !(null == (_node_meta1 = node.meta) ? void 0 : _node_meta1.includes('preview')) && 'pure' === defaultRenderMode) return;
+                    const isJsx = 'jsx' === node.lang || 'tsx' === node.lang;
+                    const value = isJsx ? injectDemoBlockImport(previewCodeTransform({
                         language: node.lang,
                         code: node.value
-                    }), demoBlockComponentPath);
-                    const isMobileMode = (null === (_node_meta2 = node.meta) || void 0 === _node_meta2 ? void 0 : _node_meta2.includes('mobile')) || (null === (_node_meta3 = node.meta) || void 0 === _node_meta3 ? void 0 : _node_meta3.includes('iframe')) || !(null === (_node_meta4 = node.meta) || void 0 === _node_meta4 ? void 0 : _node_meta4.includes('web')) && !(null === (_node_meta5 = node.meta) || void 0 === _node_meta5 ? void 0 : _node_meta5.includes('internal')) && 'iframe' === previewMode;
+                    }), demoBlockComponentPath) : previewCodeTransform({
+                        language: node.lang,
+                        code: node.value
+                    });
+                    const isMobileMode = (null == (_node_meta2 = node.meta) ? void 0 : _node_meta2.includes('mobile')) || (null == (_node_meta3 = node.meta) ? void 0 : _node_meta3.includes('iframe')) || !(null == (_node_meta4 = node.meta) ? void 0 : _node_meta4.includes('web')) && !(null == (_node_meta5 = node.meta) ? void 0 : _node_meta5.includes('internal')) && 'iframe' === previewMode;
                     const id = generateId(pageName, index++);
-                    const virtualModulePath = (0, external_node_path_namespaceObject.join)(virtualDir, `${id}.tsx`);
+                    const virtualModulePath = (0, external_node_path_namespaceObject.join)(virtualDir, `${id}.${getLangFileExt(node.lang)}`);
                     constructDemoNode(id, virtualModulePath, node, isMobileMode);
                     if (external_node_fs_default().existsSync(virtualModulePath)) {
                         const content = external_node_fs_default().readFileSync(virtualModulePath, 'utf-8');
@@ -443,7 +467,7 @@ var __webpack_exports__ = {};
             if (remarkPlugin_demos[pageName].length > 0) data.pageMeta.haveDemos = true;
         };
     };
-    let src_rslib_entry_routeMeta;
+    let src_routeMeta;
     const DEFAULT_PREVIEW_LANGUAGES = [
         'jsx',
         'tsx'
@@ -451,11 +475,11 @@ var __webpack_exports__ = {};
     function pluginPreview(options) {
         const { isMobile = false, iframeOptions = {}, iframePosition = 'follow', defaultRenderMode = 'preview', previewLanguages = DEFAULT_PREVIEW_LANGUAGES, previewCodeTransform = ({ code })=>code } = options ?? {};
         const previewMode = (null == options ? void 0 : options.previewMode) ?? (isMobile ? 'iframe' : 'internal');
-        const { devPort = 7890, framework = 'react', position = iframePosition, builderConfig = {} } = iframeOptions;
+        const { devPort = 7890, framework = 'react', position = iframePosition, builderConfig = {}, customEntry } = iframeOptions;
         const globalUIComponents = 'fixed' === position ? [
             (0, external_node_path_namespaceObject.join)(staticPath, 'global-components', 'Device.tsx')
         ] : [];
-        const getRouteMeta = ()=>src_rslib_entry_routeMeta;
+        const getRouteMeta = ()=>src_routeMeta;
         let lastDemos;
         let devServer;
         let clientConfig;
@@ -468,7 +492,7 @@ var __webpack_exports__ = {};
                 return config;
             },
             routeGenerated (routes) {
-                src_rslib_entry_routeMeta = routes;
+                src_routeMeta = routes;
             },
             async beforeBuild (_, isProd) {
                 if (!isProd) try {
@@ -492,9 +516,9 @@ var __webpack_exports__ = {};
                 var _devServer_server;
                 if ((0, external_lodash_namespaceObject.isEqual)(remarkPlugin_demos, lastDemos)) return;
                 lastDemos = (0, external_lodash_namespaceObject.cloneDeep)(remarkPlugin_demos);
-                await (null == devServer ? void 0 : null === (_devServer_server = devServer.server) || void 0 === _devServer_server ? void 0 : _devServer_server.close());
+                await (null == devServer ? void 0 : null == (_devServer_server = devServer.server) ? void 0 : _devServer_server.close());
                 devServer = void 0;
-                const sourceEntry = generateEntry(remarkPlugin_demos, framework, position);
+                const sourceEntry = generateEntry(remarkPlugin_demos, framework, position, customEntry);
                 const outDir = (0, external_node_path_namespaceObject.join)(config.outDir ?? 'doc_build', '~demo');
                 if (0 === Object.keys(sourceEntry).length) return;
                 const { html, source, output, performance } = clientConfig ?? {};
@@ -570,11 +594,11 @@ var __webpack_exports__ = {};
                         setup: (api)=>{
                             api.modifyRsbuildConfig((config)=>{
                                 var _config_output;
-                                if ((null === (_config_output = config.output) || void 0 === _config_output ? void 0 : _config_output.target) === 'web') clientConfig = config;
+                                if ((null == (_config_output = config.output) ? void 0 : _config_output.target) === 'web') clientConfig = config;
                             });
                             api.onCloseDevServer(async ()=>{
                                 var _devServer_server;
-                                await (null == devServer ? void 0 : null === (_devServer_server = devServer.server) || void 0 === _devServer_server ? void 0 : _devServer_server.close());
+                                await (null == devServer ? void 0 : null == (_devServer_server = devServer.server) ? void 0 : _devServer_server.close());
                                 devServer = void 0;
                             });
                         }

package/dist/utils.d.ts

@@ -1,5 +1,7 @@
 export declare const generateId: (pageName: string, index: number) => string;
 
+export declare const getLangFileExt: (lang: string) => string;
+
 export declare const injectDemoBlockImport: (str: string, path: string) => string;
 
 /**

package/dist/utils.js

@@ -25,6 +25,7 @@ var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
     generateId: ()=>generateId,
+    getLangFileExt: ()=>getLangFileExt,
     injectDemoBlockImport: ()=>injectDemoBlockImport,
     normalizeId: ()=>normalizeId,
     toValidVarName: ()=>toValidVarName
@@ -42,12 +43,25 @@ const injectDemoBlockImport = (str, path)=>`
     import DemoBlock from ${JSON.stringify(path)};
     ${str}
   `;
+const getLangFileExt = (lang)=>{
+    switch(lang){
+        case 'jsx':
+        case 'tsx':
+            return 'tsx';
+        case 'json':
+            return 'tsx';
+        default:
+            return lang;
+    }
+};
 exports.generateId = __webpack_exports__.generateId;
+exports.getLangFileExt = __webpack_exports__.getLangFileExt;
 exports.injectDemoBlockImport = __webpack_exports__.injectDemoBlockImport;
 exports.normalizeId = __webpack_exports__.normalizeId;
 exports.toValidVarName = __webpack_exports__.toValidVarName;
 for(var __webpack_i__ in __webpack_exports__)if (-1 === [
     "generateId",
+    "getLangFileExt",
     "injectDemoBlockImport",
     "normalizeId",
     "toValidVarName"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rspress/plugin-preview",
-  "version": "2.0.0-alpha.9",
+  "version": "2.0.0-beta.0",
   "description": "A plugin for rspress to preview the code block in markdown/mdx file.",
   "bugs": "https://github.com/web-infra-dev/rspress/issues",
   "repository": {
@@ -17,19 +17,19 @@
     "static"
   ],
   "dependencies": {
-    "@rsbuild/core": "1.3.4",
-    "@rsbuild/plugin-babel": "~1.0.4",
+    "@rsbuild/core": "1.3.9",
+    "@rsbuild/plugin-babel": "~1.0.5",
     "@rsbuild/plugin-less": "~1.2.2",
     "@rsbuild/plugin-react": "~1.1.1",
     "@rsbuild/plugin-sass": "~1.3.1",
     "@rsbuild/plugin-solid": "~1.0.5",
     "lodash": "4.17.21",
     "qrcode.react": "^4.2.0",
-    "@rspress/shared": "2.0.0-alpha.9",
-    "@rspress/theme-default": "2.0.0-alpha.9"
+    "@rspress/shared": "2.0.0-beta.0",
+    "@rspress/theme-default": "2.0.0-beta.0"
   },
   "devDependencies": {
-    "@rslib/core": "0.6.1",
+    "@rslib/core": "0.6.5",
     "@types/lodash": "^4.17.16",
     "@types/mdast": "^4.0.4",
     "@types/node": "^18.11.17",
@@ -37,15 +37,15 @@
     "@types/react-dom": "^18.3.6",
     "mdast-util-mdx-jsx": "^3.2.0",
     "mdast-util-mdxjs-esm": "^2.0.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "react-router-dom": "^6.29.0",
     "typescript": "^5.8.2",
     "unified": "^11.0.5",
     "unist-util-visit": "^5.0.0"
   },
   "peerDependencies": {
-    "@rspress/core": "^2.0.0-alpha.9",
+    "@rspress/core": "^2.0.0-beta.0",
     "react": ">=17.0.0",
     "react-router-dom": "^6.8.1"
   },