feat: framework agnostic component preview solution

e2e/fixtures/plugin/doc/components/component.jsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 export default function HelloWorld() {
   return <div>Hello World</div>;
 }

e2e/fixtures/plugin/doc/components/guide.mdx

@@ -1,19 +1 @@
 # Guide
-
-```jsx
-import React from 'react';
-
-export default function HelloWorld() {
-  return <div>Hello</div>;
-}
-```
-
-```jsx
-import React from 'react';
-
-export default function HelloWorld() {
-  return <div>World</div>;
-}
-```
-
-<code src="./component.jsx" />

e2e/fixtures/plugin/doc/index.mdx

@@ -0,0 +1,14 @@
+# Hello World
+
+```jsx
+export default function HelloWorld() {
+  return <div>这是 solidjs 渲染的结果11</div>;
+}
+```
+
+```jsx
+// 如果要引入自定义的外部组件，可以使用 tsconfig.json 中的 paths 别名配置
+export default function HelloWorld() {
+  return <div>这是 solidjs 渲染的结果</div>;
+}
+```

e2e/fixtures/plugin/package.json

@@ -8,13 +8,13 @@
     "preview": "rspress preview"
   },
   "dependencies": {
+    "@rspress/plugin-playground": "workspace:*",
+    "@rspress/plugin-preview": "workspace:*",
+    "@rspress/shared": "workspace:*",
     "react": "^18",
     "react-dom": "^18",
     "react-transition-group": "4.4.5",
-    "rspress": "workspace:*",
-    "@rspress/shared": "workspace:*",
-    "@rspress/plugin-preview": "workspace:*",
-    "@rspress/plugin-playground": "workspace:*"
+    "rspress": "workspace:*"
   },
   "devDependencies": {
     "@types/node": "^14"

e2e/fixtures/plugin/rspress.config.ts

@@ -12,6 +12,6 @@ export default defineConfig({
       isMobile: true,
       iframePosition: 'fixed',
     }),
-    // pluginPlayground(),
   ],
+
 });

e2e/fixtures/plugin/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
     "esModuleInterop": true,
-    "jsx": "react-jsx"
+    "jsx": "preserve"
   }
 }

packages/core/src/node/dev.ts

@@ -34,12 +34,21 @@ export async function dev(options: DevOptions): Promise<ServerInstance> {
       false,
       extraBuilderConfig,
     );
+    builder.addPlugins([
+      {
+        name: 'rspress:afterBuild',
+        setup(api) {
+          api.onDevCompileDone(async () => {
+            await pluginDriver.afterBuild();
+          });
+        },
+      },
+    ]);
     const { server } = await builder.startDevServer({
       // We will support the following options in the future
       getPortSilently: true,
     });
 
-    await pluginDriver.afterBuild();
     return server;
   } finally {
     await writeSearchIndex(config);

packages/plugin-preview/modern.config.ts

@@ -7,6 +7,11 @@ export default defineConfig({
       format: 'cjs',
       sourceMap: true,
       input: ['./src/index.ts'],
+      externals: [
+        '@rsbuild/core',
+        '@rsbuild/plugin-babel',
+        '@rsbuild/plugin-solid',
+      ],
       target: 'es2020',
       dts: {
         respectExternal: false,

packages/plugin-preview/package.json

@@ -37,19 +37,23 @@
   "dependencies": {
     "@mdx-js/mdx": "2.2.1",
     "@rspress/shared": "workspace:*",
+    "lodash": "4.17.21",
     "qrcode.react": "^3.1.0",
     "remark-gfm": "3.0.1",
     "rspack-plugin-virtual-module": "0.1.12",
-    "lodash": "4.17.21"
+    "solid-js": "1.8.11"
   },
   "devDependencies": {
+    "@biomejs/biome": "1.5.2",
+    "@rsbuild/core": "0.3.1",
+    "@rsbuild/plugin-solid": "0.3.1",
+    "@rsbuild/plugin-babel": "0.3.1",
+    "@types/lodash": "4.14.200",
     "@types/mdast": "^3.0.10",
     "@types/node": "^18.11.17",
-    "@types/lodash": "4.14.200",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "mdast-util-mdxjs-esm": "^1.3.0",
-    "@biomejs/biome": "1.5.2",
     "react": "^18",
     "react-dom": "^18",
     "react-router-dom": "^6.8.1",
@@ -58,9 +62,9 @@
     "unist-util-visit": "^4.1.1"
   },
   "peerDependencies": {
+    "@rspress/core": "^1.0.2",
     "react": ">=17",
-    "react-router-dom": "^6.8.1",
-    "@rspress/core": "^1.0.2"
+    "react-router-dom": "^6.8.1"
   },
   "files": [
     "dist",

packages/plugin-preview/src/codeToDemo.ts

@@ -9,15 +9,18 @@ import {
 import type { Plugin } from 'unified';
 import type { Root } from 'mdast';
 import type { MdxjsEsm } from 'mdast-util-mdxjs-esm';
+
 import { injectDemoBlockImport, generateId } from './utils';
 import { demoBlockComponentPath } from './constant';
-import { demoRoutes } from '.';
+// import { demoRoutes } from '.';
+
+export const demoEntryMap: Record<string, string> = {};
+export const DEMO_SERVER_PORT = '7890';
 
 // FIXME: remove it
 const json = JSON.parse(
   fs.readFileSync(resolve(process.cwd(), './package.json'), 'utf8'),
 );
-
 /**
  * remark plugin to transform code to demo
  */
@@ -56,15 +59,15 @@ export const remarkCodeToDemo: Plugin<
       // Only for external demo
       externalDemoIndex?: number,
     ) {
-      const demoRoute = `/~demo/${demoId}`;
-      if (isMobileMode) {
-        // only add demoRoutes in mobile mode
-        demoRoutes.push({
-          path: demoRoute,
-        });
-      } else {
-        demos.push(getASTNodeImport(`Demo${demoId}`, demoPath));
-      }
+      // const demoRoute = `/~demo/${demoId}`;
+      // if (isMobileMode) {
+      //   // only add demoRoutes in mobile mode
+      //   demoRoutes.push({
+      //     path: demoRoute,
+      //   });
+      // } else {
+      //   demos.push(getASTNodeImport(`Demo${demoId}`, demoPath));
+      // }
 
       // get external demo content
       const tempVar = `externalDemoContent${externalDemoIndex}`;
@@ -92,7 +95,7 @@ export const remarkCodeToDemo: Plugin<
             {
               type: 'mdxJsxAttribute',
               name: 'url',
-              value: demoRoute,
+              value: demoPath,
             },
             {
               type: 'mdxJsxAttribute',
@@ -187,6 +190,14 @@ export const remarkCodeToDemo: Plugin<
         );
         const id = generateId(pageName, index++);
         const virtualModulePath = join(demoDir, `${id}.tsx`);
+        const virtualEntryPath = join(demoDir, `${id}.entry.tsx`);
+
+        const entryContent = `
+        import { render } from 'solid-js/web';
+        import Demo from '${virtualModulePath}';
+
+        render(() => <Demo /> , document.getElementById('root'));
+`;
         fs.ensureDirSync(join(demoDir));
         // Only when the content of the file changes, the file will be written
         // Avoid to trigger the hmr indefinitely
@@ -195,8 +206,12 @@ export const remarkCodeToDemo: Plugin<
           if (content !== value) {
             fs.writeFileSync(virtualModulePath, value);
           }
+          fs.writeFileSync(virtualEntryPath, entryContent);
         }
-        constructDemoNode(id, virtualModulePath, node, isMobileMode);
+        demoEntryMap[id] = virtualEntryPath;
+
+        const demoPath = `http://localhost:${DEMO_SERVER_PORT}/demos/${id}.html`;
+        constructDemoNode(id, demoPath, node, isMobileMode);
       }
     });
 

packages/plugin-preview/src/index.ts

@@ -8,7 +8,10 @@ import {
   normalizePosixPath,
 } from '@rspress/shared';
 import { uniqBy } from 'lodash';
-import { remarkCodeToDemo } from './codeToDemo';
+import { createRsbuild } from '@rsbuild/core';
+import { pluginSolid } from '@rsbuild/plugin-solid';
+import { pluginBabel } from '@rsbuild/plugin-babel';
+import { DEMO_SERVER_PORT, demoEntryMap, remarkCodeToDemo } from './codeToDemo';
 import { generateId, injectDemoBlockImport } from './utils';
 import {
   demoBlockComponentPath,
@@ -308,6 +311,50 @@ import Demo from ${JSON.stringify(demoComponentPath)}
       }
       return demoRoutes;
     },
+    async afterBuild() {
+      // Create demo dev server
+      const rsbuildInstance = await createRsbuild({
+        rsbuildConfig: {
+          dev: {
+            client: {
+              port: DEMO_SERVER_PORT,
+            },
+            progressBar: false,
+          },
+          server: {
+            // Don't display the demo server log
+            printUrls: () => undefined,
+          },
+          source: {
+            entry: demoEntryMap,
+            alias: {
+              'solid-js/web': `${require.resolve('solid-js/web/dist/web.js')}`,
+            },
+          },
+          output: {
+            distPath: {
+              root: 'demo_build',
+            },
+          },
+          tools: {
+            rspack: {
+              output: {
+                publicPath: '/demos',
+              },
+            },
+          },
+        },
+      });
+      rsbuildInstance.addPlugins([
+        pluginBabel({
+          include: /\.(?:jsx|tsx)$/,
+        }),
+        pluginSolid(),
+      ]);
+      await rsbuildInstance.startDevServer({
+        getPortSilently: true,
+      });
+    },
   };
 }
 

packages/plugin-preview/src/utils.ts

@@ -27,9 +27,8 @@ export const normalizeId = (routePath: string) => {
   return toValidVarName(result);
 };
 
-export const injectDemoBlockImport = (str: string, path: string): string => {
+export const injectDemoBlockImport = (str: string, _path: string): string => {
   return `
-    import DemoBlock from '${path}';
     ${str}
   `;
 };

packages/plugin-preview/tsconfig.json

@@ -4,7 +4,7 @@
     "declaration": false,
     "module": "ESNext",
     "target": "ESNext",
-    "jsx": "react-jsx",
+    "jsx": "preserve",
     "baseUrl": "src",
     "rootDir": ".",
     "lib": ["ESNext", "DOM"],

packages/runtime/tsconfig.json

@@ -4,7 +4,7 @@
     "rootDir": "src",
     "baseUrl": ".",
     "skipLibCheck": true,
-    "jsx": "react-jsx",
+    "jsx": "preserve",
     "esModuleInterop": true
   },
   "include": ["./src/**/*"]