@rspress/plugin-preview 2.0.0-beta.11 → 2.0.0-beta.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +38 -38
- package/package.json +8 -8
package/dist/index.js
CHANGED
@@ -1,15 +1,15 @@
|
|
1
|
-
import
|
2
|
-
import
|
3
|
-
import
|
4
|
-
import
|
5
|
-
import
|
6
|
-
import
|
7
|
-
import
|
8
|
-
import
|
9
|
-
import
|
10
|
-
const staticPath =
|
11
|
-
const demoBlockComponentPath =
|
12
|
-
const virtualDir =
|
1
|
+
import external_node_net_default from "node:net";
|
2
|
+
import external_node_path_default, { dirname, join, resolve as external_node_path_resolve } from "node:path";
|
3
|
+
import { createRsbuild, mergeRsbuildConfig } from "@rsbuild/core";
|
4
|
+
import { pluginBabel } from "@rsbuild/plugin-babel";
|
5
|
+
import { pluginReact } from "@rsbuild/plugin-react";
|
6
|
+
import { pluginSolid } from "@rsbuild/plugin-solid";
|
7
|
+
import { RSPRESS_TEMP_DIR, normalizePosixPath, removeTrailingSlash } from "@rspress/shared";
|
8
|
+
import { cloneDeep, isEqual } from "lodash";
|
9
|
+
import external_node_fs_default, { writeFileSync } from "node:fs";
|
10
|
+
const staticPath = external_node_path_default.join(__dirname, '..', 'static');
|
11
|
+
const demoBlockComponentPath = external_node_path_default.join(staticPath, 'global-components', 'DemoBlock.tsx');
|
12
|
+
const virtualDir = external_node_path_default.join(process.cwd(), 'node_modules', RSPRESS_TEMP_DIR, 'virtual-demo');
|
13
13
|
const toValidVarName = (str)=>{
|
14
14
|
if (/^[a-zA-Z_$][0-9a-zA-Z_$]*$/.test(str)) return str;
|
15
15
|
return str.replace(/[^0-9a-zA-Z_$]/g, '_').replace(/^([0-9])/, '_$1');
|
@@ -32,11 +32,11 @@ const getLangFileExt = (lang)=>{
|
|
32
32
|
};
|
33
33
|
function generateEntry(demos, framework, position, customEntry) {
|
34
34
|
const sourceEntry = {};
|
35
|
-
const entryCssPath =
|
35
|
+
const entryCssPath = join(staticPath, 'global-styles', 'entry.css');
|
36
36
|
if ('follow' === position) Object.values(demos).forEach((routes)=>{
|
37
37
|
routes.forEach((route)=>{
|
38
38
|
const { id, path: demoPath } = route;
|
39
|
-
const entry =
|
39
|
+
const entry = join(virtualDir, `${id}.entry.tsx`);
|
40
40
|
const solidEntry = `
|
41
41
|
import { render } from 'solid-js/web';
|
42
42
|
import ${JSON.stringify(entryCssPath)};
|
@@ -54,7 +54,7 @@ function generateEntry(demos, framework, position, customEntry) {
|
|
54
54
|
entryCssPath,
|
55
55
|
demoPath
|
56
56
|
}) : 'react' === framework ? reactEntry : solidEntry;
|
57
|
-
|
57
|
+
writeFileSync(entry, entryContent);
|
58
58
|
sourceEntry[id] = entry;
|
59
59
|
});
|
60
60
|
});
|
@@ -91,8 +91,8 @@ function generateEntry(demos, framework, position, customEntry) {
|
|
91
91
|
`;
|
92
92
|
const renderContent = 'solid' === framework ? solidContent : reactContent;
|
93
93
|
const id = `_${toValidVarName(key)}`;
|
94
|
-
const entry =
|
95
|
-
|
94
|
+
const entry = join(virtualDir, `${id}.entry.tsx`);
|
95
|
+
writeFileSync(entry, renderContent);
|
96
96
|
sourceEntry[id] = entry;
|
97
97
|
});
|
98
98
|
return sourceEntry;
|
@@ -303,13 +303,13 @@ const getExternalDemoContent = (tempVar)=>({
|
|
303
303
|
const remarkPlugin_demos = {};
|
304
304
|
const remarkCodeToDemo = function({ getRouteMeta, previewMode, defaultRenderMode, position, previewLanguages, previewCodeTransform }) {
|
305
305
|
const routeMeta = getRouteMeta();
|
306
|
-
|
306
|
+
external_node_fs_default.mkdirSync(virtualDir, {
|
307
307
|
recursive: true
|
308
308
|
});
|
309
309
|
const data = this.data();
|
310
310
|
return (tree, vfile)=>{
|
311
311
|
const demoMdx = [];
|
312
|
-
const route = routeMeta.find((meta)=>
|
312
|
+
const route = routeMeta.find((meta)=>normalizePosixPath(meta.absolutePath) === normalizePosixPath(vfile.path || vfile.history[0]));
|
313
313
|
if (!route) return;
|
314
314
|
const { pageName } = route;
|
315
315
|
remarkPlugin_demos[pageName] = [];
|
@@ -321,7 +321,7 @@ const remarkCodeToDemo = function({ getRouteMeta, previewMode, defaultRenderMode
|
|
321
321
|
remarkPlugin_demos[pageName].push({
|
322
322
|
title,
|
323
323
|
id: demoId,
|
324
|
-
path: relativePathReg.test(demoPath) ? (
|
324
|
+
path: relativePathReg.test(demoPath) ? external_node_path_resolve(vfile.dirname || dirname(vfile.path), demoPath) : demoPath
|
325
325
|
});
|
326
326
|
} else demoMdx.push(getASTNodeImport(`Demo${demoId}`, demoPath));
|
327
327
|
const tempVar = `externalDemoContent${externalDemoIndex}`;
|
@@ -377,13 +377,13 @@ const remarkCodeToDemo = function({ getRouteMeta, previewMode, defaultRenderMode
|
|
377
377
|
});
|
378
378
|
const isMobileMode = node.meta?.includes('mobile') || node.meta?.includes('iframe') || !node.meta?.includes('web') && !node.meta?.includes('internal') && 'iframe' === previewMode;
|
379
379
|
const id = generateId(pageName, index++);
|
380
|
-
const virtualModulePath =
|
380
|
+
const virtualModulePath = join(virtualDir, `${id}.${getLangFileExt(node.lang)}`);
|
381
381
|
constructDemoNode(id, virtualModulePath, node, isMobileMode);
|
382
|
-
if (
|
383
|
-
const content =
|
382
|
+
if (external_node_fs_default.existsSync(virtualModulePath)) {
|
383
|
+
const content = external_node_fs_default.readFileSync(virtualModulePath, 'utf-8');
|
384
384
|
if (content === value) return;
|
385
385
|
}
|
386
|
-
|
386
|
+
external_node_fs_default.writeFileSync(virtualModulePath, value);
|
387
387
|
}
|
388
388
|
});
|
389
389
|
tree.children.unshift(...demoMdx);
|
@@ -400,7 +400,7 @@ function pluginPreview(options) {
|
|
400
400
|
const previewMode = options?.previewMode ?? (isMobile ? 'iframe' : 'internal');
|
401
401
|
const { devPort = 7890, framework = 'react', position = iframePosition, builderConfig = {}, customEntry } = iframeOptions;
|
402
402
|
const globalUIComponents = 'fixed' === position ? [
|
403
|
-
|
403
|
+
join(staticPath, 'global-components', 'Device.tsx')
|
404
404
|
] : [];
|
405
405
|
const getRouteMeta = ()=>src_routeMeta;
|
406
406
|
let lastDemos;
|
@@ -419,7 +419,7 @@ function pluginPreview(options) {
|
|
419
419
|
async beforeBuild (_, isProd) {
|
420
420
|
if (!isProd) try {
|
421
421
|
await new Promise((resolve, reject)=>{
|
422
|
-
const server =
|
422
|
+
const server = external_node_net_default.createServer();
|
423
423
|
server.unref();
|
424
424
|
server.on('error', reject);
|
425
425
|
server.listen({
|
@@ -435,15 +435,15 @@ function pluginPreview(options) {
|
|
435
435
|
}
|
436
436
|
},
|
437
437
|
async afterBuild (config, isProd) {
|
438
|
-
if (
|
439
|
-
lastDemos =
|
438
|
+
if (isEqual(remarkPlugin_demos, lastDemos)) return;
|
439
|
+
lastDemos = cloneDeep(remarkPlugin_demos);
|
440
440
|
await devServer?.server?.close();
|
441
441
|
devServer = void 0;
|
442
442
|
const sourceEntry = generateEntry(remarkPlugin_demos, framework, position, customEntry);
|
443
|
-
const outDir =
|
443
|
+
const outDir = join(config.outDir ?? 'doc_build', '~demo');
|
444
444
|
if (0 === Object.keys(sourceEntry).length) return;
|
445
445
|
const { html, source, output, performance } = clientConfig ?? {};
|
446
|
-
const rsbuildConfig =
|
446
|
+
const rsbuildConfig = mergeRsbuildConfig({
|
447
447
|
dev: {
|
448
448
|
progressBar: false
|
449
449
|
},
|
@@ -463,7 +463,7 @@ function pluginPreview(options) {
|
|
463
463
|
},
|
464
464
|
output: {
|
465
465
|
...output,
|
466
|
-
assetPrefix: output?.assetPrefix ? `${
|
466
|
+
assetPrefix: output?.assetPrefix ? `${removeTrailingSlash(output.assetPrefix)}/~demo` : '/~demo',
|
467
467
|
distPath: {
|
468
468
|
root: outDir
|
469
469
|
},
|
@@ -471,7 +471,7 @@ function pluginPreview(options) {
|
|
471
471
|
},
|
472
472
|
plugins: config?.builderPlugins
|
473
473
|
}, builderConfig);
|
474
|
-
const rsbuildInstance = await
|
474
|
+
const rsbuildInstance = await createRsbuild({
|
475
475
|
callerName: 'rspress',
|
476
476
|
rsbuildConfig
|
477
477
|
});
|
@@ -482,13 +482,13 @@ function pluginPreview(options) {
|
|
482
482
|
pluginLess()
|
483
483
|
]);
|
484
484
|
if ('solid' === framework) rsbuildInstance.addPlugins([
|
485
|
-
|
485
|
+
pluginBabel({
|
486
486
|
include: /\.(?:jsx|tsx)$/
|
487
487
|
}),
|
488
|
-
|
488
|
+
pluginSolid()
|
489
489
|
]);
|
490
490
|
if ('react' === framework) rsbuildInstance.addPlugins([
|
491
|
-
|
491
|
+
pluginReact()
|
492
492
|
]);
|
493
493
|
if (isProd) rsbuildInstance.build();
|
494
494
|
else devServer = await rsbuildInstance.startDevServer();
|
@@ -496,7 +496,7 @@ function pluginPreview(options) {
|
|
496
496
|
builderConfig: {
|
497
497
|
source: {
|
498
498
|
include: [
|
499
|
-
|
499
|
+
join(__dirname, '..')
|
500
500
|
]
|
501
501
|
},
|
502
502
|
tools: {
|
@@ -544,11 +544,11 @@ function pluginPreview(options) {
|
|
544
544
|
]
|
545
545
|
],
|
546
546
|
globalComponents: [
|
547
|
-
|
547
|
+
join(staticPath, 'global-components', 'Container.tsx')
|
548
548
|
]
|
549
549
|
},
|
550
550
|
globalUIComponents,
|
551
|
-
globalStyles:
|
551
|
+
globalStyles: join(staticPath, 'global-styles', `${previewMode}.css`)
|
552
552
|
};
|
553
553
|
}
|
554
554
|
export { pluginPreview };
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@rspress/plugin-preview",
|
3
|
-
"version": "2.0.0-beta.
|
3
|
+
"version": "2.0.0-beta.13",
|
4
4
|
"description": "A plugin for rspress to preview the code block in markdown/mdx file.",
|
5
5
|
"bugs": "https://github.com/web-infra-dev/rspress/issues",
|
6
6
|
"repository": {
|
@@ -23,19 +23,19 @@
|
|
23
23
|
"static"
|
24
24
|
],
|
25
25
|
"dependencies": {
|
26
|
-
"@rsbuild/core": "~1.3.
|
26
|
+
"@rsbuild/core": "~1.3.22",
|
27
27
|
"@rsbuild/plugin-babel": "~1.0.5",
|
28
28
|
"@rsbuild/plugin-less": "~1.2.4",
|
29
|
-
"@rsbuild/plugin-react": "~1.3.
|
30
|
-
"@rsbuild/plugin-sass": "~1.3.
|
29
|
+
"@rsbuild/plugin-react": "~1.3.2",
|
30
|
+
"@rsbuild/plugin-sass": "~1.3.2",
|
31
31
|
"@rsbuild/plugin-solid": "~1.0.5",
|
32
32
|
"lodash": "4.17.21",
|
33
33
|
"qrcode.react": "^4.2.0",
|
34
|
-
"@rspress/shared": "2.0.0-beta.
|
35
|
-
"@rspress/theme-default": "2.0.0-beta.
|
34
|
+
"@rspress/shared": "2.0.0-beta.13",
|
35
|
+
"@rspress/theme-default": "2.0.0-beta.13"
|
36
36
|
},
|
37
37
|
"devDependencies": {
|
38
|
-
"@rslib/core": "0.
|
38
|
+
"@rslib/core": "0.9.2",
|
39
39
|
"@types/lodash": "^4.17.17",
|
40
40
|
"@types/mdast": "^4.0.4",
|
41
41
|
"@types/node": "^22.8.1",
|
@@ -52,7 +52,7 @@
|
|
52
52
|
"unist-util-visit": "^5.0.0"
|
53
53
|
},
|
54
54
|
"peerDependencies": {
|
55
|
-
"@rspress/core": "^2.0.0-beta.
|
55
|
+
"@rspress/core": "^2.0.0-beta.13",
|
56
56
|
"react": ">=18.0.0",
|
57
57
|
"react-router-dom": "^6.8.1"
|
58
58
|
},
|