@rspress/plugin-preview 2.0.0-alpha.8 → 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';
@@ -142,9 +162,9 @@ var __webpack_exports__ = {};
     const node_utils_namespaceObject = require("@rspress/shared/node-utils");
     const convert = function(test) {
         if (null == test) return ok;
-        if ('string' == typeof test) return typeFactory(test);
-        if ('object' == typeof test) return Array.isArray(test) ? anyFactory(test) : propsFactory(test);
         if ('function' == typeof test) return castFactory(test);
+        if ('object' == typeof test) return Array.isArray(test) ? anyFactory(test) : propsFactory(test);
+        if ('string' == typeof test) return typeFactory(test);
         throw new Error('Expected function, string, or object as test');
     };
     function anyFactory(tests) {
@@ -154,15 +174,17 @@ var __webpack_exports__ = {};
         return castFactory(any);
         function any(...parameters) {
             let index = -1;
-            while(++index < checks.length)if (checks[index].call(this, ...parameters)) return true;
+            while(++index < checks.length)if (checks[index].apply(this, parameters)) return true;
             return false;
         }
     }
     function propsFactory(check) {
+        const checkAsRecord = check;
         return castFactory(all);
         function all(node) {
+            const nodeAsRecord = node;
             let key;
-            for(key in check)if (node[key] !== check[key]) return false;
+            for(key in check)if (nodeAsRecord[key] !== checkAsRecord[key]) return false;
             return true;
         }
     }
@@ -172,28 +194,32 @@ var __webpack_exports__ = {};
             return node && node.type === check;
         }
     }
-    function castFactory(check) {
-        return assertion;
-        function assertion(node, ...parameters) {
-            return Boolean(node && 'object' == typeof node && 'type' in node && Boolean(check.call(this, node, ...parameters)));
+    function castFactory(testFunction) {
+        return check;
+        function check(value, index, parent) {
+            return Boolean(looksLikeANode(value) && testFunction.call(this, value, 'number' == typeof index ? index : void 0, parent || void 0));
         }
     }
     function ok() {
         return true;
     }
+    function looksLikeANode(value) {
+        return null !== value && 'object' == typeof value && 'type' in value;
+    }
     function color(d) {
         return '\u001B[33m' + d + '\u001B[39m';
     }
+    const empty = [];
     const CONTINUE = true;
     const EXIT = false;
     const SKIP = 'skip';
-    const visitParents = function(tree, test, visitor, reverse) {
+    function visitParents(tree, test, visitor, reverse) {
+        let check;
         if ('function' == typeof test && 'function' != typeof visitor) {
             reverse = visitor;
             visitor = test;
-            test = null;
-        }
-        const is = convert(test);
+        } else check = test;
+        const is = convert(check);
         const step = reverse ? -1 : 1;
         factory(tree, void 0, [])();
         function factory(node, index, parents) {
@@ -206,49 +232,61 @@ var __webpack_exports__ = {};
             }
             return visit;
             function visit() {
-                let result = [];
+                let result = empty;
                 let subresult;
                 let offset;
                 let grandparents;
-                if (!test || is(node, index, parents[parents.length - 1] || null)) {
+                if (!test || is(node, index, parents[parents.length - 1] || void 0)) {
                     result = toResult(visitor(node, parents));
                     if (result[0] === EXIT) return result;
                 }
-                if (node.children && result[0] !== SKIP) {
-                    offset = (reverse ? node.children.length : -1) + step;
-                    grandparents = parents.concat(node);
-                    while(offset > -1 && offset < node.children.length){
-                        subresult = factory(node.children[offset], offset, grandparents)();
-                        if (subresult[0] === EXIT) return subresult;
-                        offset = 'number' == typeof subresult[1] ? subresult[1] : offset + step;
+                if ('children' in node && node.children) {
+                    const nodeAsParent = node;
+                    if (nodeAsParent.children && result[0] !== SKIP) {
+                        offset = (reverse ? nodeAsParent.children.length : -1) + step;
+                        grandparents = parents.concat(nodeAsParent);
+                        while(offset > -1 && offset < nodeAsParent.children.length){
+                            const child = nodeAsParent.children[offset];
+                            subresult = factory(child, offset, grandparents)();
+                            if (subresult[0] === EXIT) return subresult;
+                            offset = 'number' == typeof subresult[1] ? subresult[1] : offset + step;
+                        }
                     }
                 }
                 return result;
             }
         }
-    };
+    }
     function toResult(value) {
         if (Array.isArray(value)) return value;
         if ('number' == typeof value) return [
             CONTINUE,
             value
         ];
-        return [
+        return null == value ? empty : [
             value
         ];
     }
-    const lib_visit = function(tree, test, visitor, reverse) {
-        if ('function' == typeof test && 'function' != typeof visitor) {
-            reverse = visitor;
-            visitor = test;
-            test = null;
+    function lib_visit(tree, testOrVisitor, visitorOrReverse, maybeReverse) {
+        let reverse;
+        let test;
+        let visitor;
+        if ('function' == typeof testOrVisitor && 'function' != typeof visitorOrReverse) {
+            test = void 0;
+            visitor = testOrVisitor;
+            reverse = visitorOrReverse;
+        } else {
+            test = testOrVisitor;
+            visitor = visitorOrReverse;
+            reverse = maybeReverse;
         }
         visitParents(tree, test, overload, reverse);
         function overload(node, parents) {
             const parent = parents[parents.length - 1];
-            return visitor(node, parent ? parent.children.indexOf(node) : null, parent);
+            const index = parent ? parent.children.indexOf(node) : void 0;
+            return visitor(node, index, parent);
         }
-    };
+    }
     const getASTNodeImport = (name, from)=>({
             type: 'mdxjsEsm',
             value: `import ${name} from ${JSON.stringify(from)}`,
@@ -405,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');
@@ -425,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'
@@ -433,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;
@@ -450,7 +492,7 @@ var __webpack_exports__ = {};
                 return config;
             },
             routeGenerated (routes) {
-                src_rslib_entry_routeMeta = routes;
+                src_routeMeta = routes;
             },
             async beforeBuild (_, isProd) {
                 if (!isProd) try {
@@ -474,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 ?? {};
@@ -552,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.8",
+  "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,35 +17,35 @@
     "static"
   ],
   "dependencies": {
-    "@rsbuild/core": "1.3.0",
-    "@rsbuild/plugin-babel": "~1.0.4",
-    "@rsbuild/plugin-less": "~1.2.1",
+    "@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.8",
-    "@rspress/theme-default": "2.0.0-alpha.8"
+    "@rspress/shared": "2.0.0-beta.0",
+    "@rspress/theme-default": "2.0.0-beta.0"
   },
   "devDependencies": {
-    "@rslib/core": "0.6.0",
+    "@rslib/core": "0.6.5",
     "@types/lodash": "^4.17.16",
-    "@types/mdast": "^3.0.15",
+    "@types/mdast": "^4.0.4",
     "@types/node": "^18.11.17",
     "@types/react": "^18.3.20",
-    "@types/react-dom": "^18.3.5",
-    "mdast-util-mdx-jsx": "^2.1.4",
-    "mdast-util-mdxjs-esm": "^1.3.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "@types/react-dom": "^18.3.6",
+    "mdast-util-mdx-jsx": "^3.2.0",
+    "mdast-util-mdxjs-esm": "^2.0.1",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "react-router-dom": "^6.29.0",
     "typescript": "^5.8.2",
-    "unified": "^10.1.2",
-    "unist-util-visit": "^4.1.2"
+    "unified": "^11.0.5",
+    "unist-util-visit": "^5.0.0"
   },
   "peerDependencies": {
-    "@rspress/core": "^2.0.0-alpha.8",
+    "@rspress/core": "^2.0.0-beta.0",
     "react": ">=17.0.0",
     "react-router-dom": "^6.8.1"
   },